/*
 * Smart Media — typography and brand layer (hand-written)
 * ============================================================================
 * Kept separate from smart-media-theme.css, which is GENERATED from the vendor
 * theme and gets overwritten when regenerated. Edit this file, not that one.
 *
 * Load order: vendor theme -> smart-media-theme.css -> this file.
 */

/* ---------------------------------------------------------------------------
 * 1. Fonts
 *
 * The Arabic face was previously declared in style-ar.css pointing at
 * /fonts/Tajawal-*.ttf — a document-root path where only two 0-byte files
 * existed, so every weight silently failed and Arabic fell back to the
 * browser default. The real files live next to this stylesheet. No Latin font
 * was ever declared or fetched at all, despite the theme naming Rubik,
 * Montserrat and Poppins.
 *
 * Paths here are relative to this file, so they resolve whether the document
 * root is the project root or public/.
 *
 * Tajawal carries Arabic, Latin and Arabic-Indic digits but NOT the shekel
 * sign (U+20AA). unicode-range therefore limits it to Arabic, letting Latin
 * text, digits and ₪ come from the system UI face — sharper for English and
 * guaranteed to have the currency glyph.
 * --------------------------------------------------------------------------- */

@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061C;
}

@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061C;
}

@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061C;
}

@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061C;
}

@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061C;
}

@font-face {
  font-family: "Tajawal";
  src: url("fonts/Tajawal-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061C;
}

/* ---------------------------------------------------------------------------
 * 2. Type scale
 *
 * The theme's base was 14px (with 12px and 13px in places), which is small for
 * Latin and noticeably cramped for Arabic, whose letterforms need more room.
 * Base is 16px; headings use clamp() so they shrink on phones without a media
 * query per breakpoint.
 * --------------------------------------------------------------------------- */

:root {
  --sm-font-arabic: "Tajawal";
  --sm-font-latin: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sm-font-stack: var(--sm-font-arabic), var(--sm-font-latin);

  /* ---- Every size on the site derives from these five values. -------------
     Change --sm-text-base to rescale the whole front end at once.
     0.9375rem = 15px, one notch above the theme's original 14px. ---------- */
  --sm-text-xs: 0.75rem;      /* 12px — badges, captions */
  --sm-text-sm: 0.84375rem;   /* 13.5px — tables, secondary text */
  --sm-text-base: 0.9375rem;  /* 15px — body */
  --sm-text-lg: 1rem;         /* 16px — prices, lead text */
  --sm-text-xl: 1.125rem;     /* 18px */

  --sm-text-menu: 0.875rem;   /* 14px — main navigation */

  --sm-leading-tight: 1.35;
  --sm-leading-normal: 1.6;
  --sm-leading-arabic: 1.8;   /* Arabic needs more leading than Latin */
}

html {
  /* Honour the visitor's browser font-size preference. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sm-font-stack) !important;
  font-size: var(--sm-text-base);
  line-height: var(--sm-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Consistent digit widths so prices and quantities line up in tables. */
  font-variant-numeric: lining-nums tabular-nums;
}

/* Elements that inherited the theme's 12–14px sizes. */
p,
li,
td,
th,
label,
input,
select,
textarea,
button,
.form-control,
.form-select {
  font-family: inherit;
  font-size: var(--sm-text-base);
}

small,
.small,
.text-muted,
figcaption {
  font-size: var(--sm-text-sm);
}

p {
  line-height: var(--sm-leading-normal);
  margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  color: var(--sm-navy, #041C4C);
  line-height: var(--sm-leading-tight);
  font-weight: 700;
  margin-bottom: 0.5em;
}

/* clamp() lets each heading shrink on phones without a breakpoint per size. */
h1, .h1 { font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.125rem); }  /* 26 -> 34px */
h2, .h2 { font-size: clamp(1.375rem, 1rem + 1.3vw, 1.75rem); }     /* 22 -> 28px */
h3, .h3 { font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.375rem); }   /* 19 -> 22px */
h4, .h4 { font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem); }
h5, .h5 { font-size: var(--sm-text-lg); }
h6, .h6 { font-size: var(--sm-text-base); }

/* Product names and prices: the two things customers scan for. */
.product-price,
.price-box,
.new-price,
.amount {
  font-size: var(--sm-text-lg);
  font-weight: 700;
  line-height: var(--sm-leading-tight);
}

.product-price del,
del {
  font-size: var(--sm-text-sm);
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * 3. Arabic-specific corrections
 *
 * letter-spacing splits the cursive joins between Arabic letters, so it is
 * neutralised in RTL. The theme applies it in nine places.
 * --------------------------------------------------------------------------- */

[dir="rtl"] body,
html[lang="ar"] body {
  font-size: 0.96875rem;            /* 15.5px — Arabic reads small at 15px */
  line-height: var(--sm-leading-arabic);
}

[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] td,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] td {
  line-height: var(--sm-leading-arabic);
}

[dir="rtl"] *,
html[lang="ar"] * {
  letter-spacing: normal !important;
}

/* Arabic headings carry weight better a notch lighter than Latin bold. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-weight: 700;
  line-height: 1.45;
}

/* Latin words inside Arabic copy (brand names, model numbers) read better
   from the Latin face at a slightly smaller optical size. */
[dir="rtl"] .latin,
[dir="rtl"] [lang="en"] {
  font-family: var(--sm-font-latin);
  font-size: 0.97em;
}

/* ---------------------------------------------------------------------------
 * 4. Brand layer
 *
 * Elements the vendor theme never painted with the stock accent, plus the
 * Bootstrap utilities used by the newer markup (empty states, cart summary,
 * coupon field).
 * --------------------------------------------------------------------------- */

body {
  color: var(--sm-navy, #041C4C);
}

.btn-primary,
.btn-dark {
  background-color: var(--sm-royal, #2D5FFE);
  border-color: var(--sm-royal, #2D5FFE);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus {
  background-color: var(--sm-royal-hover, #022D7B);
  border-color: var(--sm-royal-hover, #022D7B);
  color: #fff;
}

.btn-outline-secondary {
  border-color: var(--sm-deep, #022D7B);
  color: var(--sm-deep, #022D7B);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--sm-royal, #2D5FFE);
  border-color: var(--sm-royal, #2D5FFE);
  color: #fff;
}

.btn {
  font-weight: 500;
  font-size: var(--sm-text-base);
}

.table-dark {
  --bs-table-bg: var(--sm-navy, #041C4C);
  background-color: var(--sm-navy, #041C4C);
  color: #fff;
}

.text-success,
.text-primary {
  color: var(--sm-royal, #2D5FFE) !important;
}

.list-group-item strong {
  color: var(--sm-navy, #041C4C);
}

/* Keyboard focus was invisible on the themed controls. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sm-royal, #2D5FFE);
  outline-offset: 2px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sm-royal, #2D5FFE);
  box-shadow: 0 0 0 0.2rem var(--sm-royal-soft, rgba(45, 95, 254, 0.12));
}

del {
  color: #7a869a;
}

/* ---------------------------------------------------------------------------
 * 5. Main navigation
 *
 * Was 14px with padding applied only to one side (padding-right: 40px), which
 * spaced the items unevenly once the layout flipped to LTR. Logical properties
 * space it symmetrically in both directions.
 * --------------------------------------------------------------------------- */

.hb-menu nav > ul > li > a,
.hb-menu-2 nav > ul > li > a {
  font-size: var(--sm-text-menu);
  font-weight: 600;
  line-height: 38px;
  letter-spacing: 0.01em;
}

.hb-menu nav > ul > li,
.hb-menu-2 nav > ul > li {
  padding-right: 0;
  padding-inline-end: 34px;
}

.hb-menu nav > ul > li:last-child,
.hb-menu-2 nav > ul > li:last-child {
  padding-inline-end: 0;
}

/* Dropdown entries were noticeably smaller than the bar above them. */
.hb-menu nav > ul > li > ul.hb-dropdown > li > a,
.hb-menu nav ul > li > ul.hb-dropdown > li > a {
  font-size: var(--sm-text-base);
  line-height: 2;
}

/* Arabic needs a touch more room per item than the uppercase Latin labels. */
[dir="rtl"] .hb-menu nav > ul > li > a,
[dir="rtl"] .hb-menu-2 nav > ul > li > a {
  font-size: 0.9375rem;   /* 15px */
  line-height: 40px;
}

/* Scrolled state: the bar had no separation from the content beneath it. */
.header-sticky.sticky {
  box-shadow: 0 2px 12px rgba(4, 28, 76, 0.18);
}

/* ---------------------------------------------------------------------------
 * Language switcher
 *
 * The theme paints the active/hovered row with a solid accent background and
 * white text. Recolouring the accent to Royal Blue meant the row became a solid
 * blue block — and an earlier version of this rule set the link text to Royal
 * Blue too, i.e. blue on blue, so the active language was invisible.
 *
 * The panel is also only 120px wide with 40px of horizontal padding, leaving
 * ~80px of content: the flag and its label wrapped onto separate lines.
 * --------------------------------------------------------------------------- */

.language.ht-language,
.currency.ht-currency {
  min-width: 170px;
  /* Was `text-align: left`, which fought the RTL layout. */
  text-align: start;
}

.ht-setting-list > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sm-text-sm);
  line-height: 1.6;
  margin-bottom: 4px;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Keep the label legible on the filled active/hover row. */
.ht-setting-list > li.active > a,
.ht-setting-list > li:hover > a {
  color: #fff;
  font-weight: 600;
}

/* The flags used style="width: 10%" — a percentage of a container with no
   declared width, so their rendered size was unpredictable. */
.lang-flag {
  width: 22px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 2px;
  /* Overrides the theme's padding-right, which is wrong side in RTL. */
  padding: 0 !important;
}

.ht-language-trigger,
.language-selector-wrapper {
  font-size: var(--sm-text-sm);
}

/* ---------------------------------------------------------------------------
 * 6. Rules lifted out of inline <style> blocks in the product views
 *
 * These hard-coded the stock yellow inside Blade templates, so the generated
 * palette override could never reach them. One of them was also invalid CSS
 * (`background-color: #fed700 border-color: ##7fad39;` — missing semicolon,
 * doubled hash) on a selector that matched nothing (`.btn btn-outline-primary`
 * needs a dot before the second class).
 * --------------------------------------------------------------------------- */

.filter-link.active {
  color: var(--sm-royal, #2D5FFE);
  border-color: var(--sm-royal, #2D5FFE);
}

.btn.btn-outline-primary.active {
  color: #fff;
  background-color: var(--sm-royal, #2D5FFE);
  border-color: var(--sm-royal, #2D5FFE);
}

/* Chosen size/colour swatch on the product page. The JS used to write these
   borders as inline styles; it now toggles .is-selected instead. */
.size_cart_details,
.color_cart_details {
  border: 1px solid #ccc;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.selected_size_details,
.selected_color_details,
.size_cart_details.is-selected,
.color_cart_details.is-selected {
  border: 2px solid var(--sm-royal, #2D5FFE) !important;
  box-shadow: 0 0 5px var(--sm-royal-soft, rgba(45, 95, 254, 0.35));
}

/* ---------------------------------------------------------------------------
 * 7. Header logo
 *
 * The <img> had an inline width:155px. A logo on a tall canvas (e.g. 1024x1536
 * with the mark in the middle) then rendered 230px tall and mostly empty.
 * Capping the height instead keeps any logo shape inside the header row.
 * --------------------------------------------------------------------------- */

.logo a {
  display: inline-block;
}

.logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 84px;
}

@media (min-width: 992px) {
  .header-middle > .container > .row {
    align-items: center;
  }
}

@media (max-width: 991px) {
  .logo img {
    max-height: 64px;
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------------------
 * 8. Products menu: categories side by side
 *
 * Replaces the 220px single-column dropdown (with hover flyouts for children)
 * by a full-width panel: each main category is a column heading and its
 * children are listed beneath it. Desktop only — the mobile menu is meanmenu's
 * clone under .mobile-menu, which these selectors do not reach.
 * --------------------------------------------------------------------------- */

/* Position the panel against the whole bar (nav > ul is relative), not the
   "products" item, so it can span the container width. */
.hb-menu nav > ul > li.sm-mega-holder {
  position: static;
}

.hb-menu nav > ul > li > ul.hb-dropdown.sm-mega {
  left: 0;
  right: 0;
  width: auto;
  max-height: 70vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 24px;
  align-items: start;
  padding: 22px 26px;
  border-top: 3px solid var(--sm-royal, #2D5FFE);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 30px rgba(4, 28, 76, 0.16);
}

/* Keyboard users tabbing into the menu get the panel too. */
.hb-menu nav ul > li.sm-mega-holder:focus-within > ul.hb-dropdown {
  opacity: 1;
  transform: scaleY(1);
  visibility: visible;
}

.hb-menu nav ul > li > ul.hb-dropdown.sm-mega > li > a.sm-mega-title {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--sm-navy, #041C4C);
  font-size: var(--sm-text-base);
  font-weight: 700;
  line-height: 1.5;
}

.hb-menu nav ul > li > ul.hb-dropdown.sm-mega > li > a.sm-mega-title:hover,
.hb-menu nav ul > li > ul.hb-dropdown.sm-mega > li > a.sm-mega-title:focus-visible {
  background: var(--sm-royal-soft, rgba(45, 95, 254, 0.08));
  color: var(--sm-royal, #2D5FFE);
}

.hb-menu .sm-mega-children {
  margin: 2px 0 10px;
  margin-inline-start: 12px;
  padding: 0;
  padding-inline-start: 10px;
  border-inline-start: 2px solid #e6ebf5;
  list-style: none;
}

.hb-menu .sm-mega-children > li > a {
  display: block;
  padding: 3px 8px;
  color: #4a5875;
  font-size: var(--sm-text-sm);
  line-height: 1.8;
  transition: color 150ms ease-in-out;
}

.hb-menu .sm-mega-children > li > a:hover,
.hb-menu .sm-mega-children > li > a:focus-visible {
  color: var(--sm-royal, #2D5FFE);
}