/* ==========================================================================
   GLOW HOUSE — design system
   Loaded after glowhouse.css, so this file is the final word on tokens and
   components.

   Consolidated from nineteen incrementally appended blocks. Every behavioural
   fix from those blocks is preserved and is commented with the reason it
   exists, because several of them look arbitrary without it.

   Colour is organised by ROLE, not by shade. The store previously ran three
   unrelated accents with no rule about which meant what, and the lightest of
   them was carrying text and prices at 1.61:1 against white - far below the
   4.5:1 AA floor. Ratios are recorded in estore-docs/ROADMAP.md.
   ========================================================================== */

:root {
  /* ---- brand ------------------------------------------------------------ */
  --gh-rose-700: #8E2A4B;   /* hover / pressed                               */
  --gh-rose-600: #A8325A;   /* PRIMARY: actions, prices, links      6.42:1   */
  --gh-rose-300: #E79BB2;   /* decorative rules, inactive states             */
  --gh-rose-100: #F8BCCB;   /* the original brand pink - BACKGROUNDS ONLY    */
  --gh-rose-50:  #FDF2F5;   /* softest wash                                  */

  --gh-bronze:     #C08552; /* decorative only                               */
  --gh-bronze-700: #8A5C34; /* bronze that passes AA when it carries text    */

  /* ---- neutrals --------------------------------------------------------- */
  --gh-ink:     #14100E;
  --gh-muted:   #6B5F58;
  --gh-faint:   #A2968E;
  --gh-line:    #EDE7E3;
  --gh-bg-soft: #FAF7F5;
  --gh-white:   #FFFFFF;

  /* ---- status ----------------------------------------------------------- */
  --gh-success: #1E7A4B;
  --gh-danger:  #B3261E;
  --gh-amber:   #E8A33D;   /* ratings - reads as a rating, not as brand      */

  /* ---- spacing (4px base) ----------------------------------------------- */
  --gh-s1: .25rem; --gh-s2: .5rem;  --gh-s3: .75rem; --gh-s4: 1rem;
  --gh-s5: 1.5rem; --gh-s6: 2rem;   --gh-s7: 3rem;   --gh-s8: 4rem;

  /* ---- type scale ------------------------------------------------------- */
  --gh-t-xs:   .8rem;
  --gh-t-sm:   .88rem;
  --gh-t-base: 1rem;
  --gh-t-lg:   1.125rem;
  --gh-t-xl:   clamp(1.25rem, 2vw, 1.5rem);
  --gh-t-2xl:  clamp(1.5rem, 3vw, 2rem);
  --gh-t-3xl:  clamp(1.9rem, 4vw, 2.75rem);

  /* ---- radii ------------------------------------------------------------ */
  --gh-r-sm: 8px; --gh-r: 14px; --gh-r-lg: 20px; --gh-r-pill: 999px;

  /* ---- elevation -------------------------------------------------------- */
  --gh-shadow-sm: 0 1px 2px rgba(20,16,14,.06);
  --gh-shadow:    0 4px 16px rgba(20,16,14,.08);
  --gh-shadow-lg: 0 12px 32px rgba(20,16,14,.12);

  /* ---- motion ----------------------------------------------------------- */
  --gh-ease: cubic-bezier(.4,0,.2,1);
  --gh-fast: 140ms;
  --gh-slow: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Typography hierarchy
   ========================================================================== */
h1 { font-size: var(--gh-t-3xl); }
h2 { font-size: var(--gh-t-2xl); }
h3 { font-size: var(--gh-t-xl); }
h4 { font-size: var(--gh-t-lg); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--gh-ink); }
.text-sm { font-size: var(--gh-t-sm); }
.text-xs { font-size: var(--gh-t-xs); }

/* ==========================================================================
   Accessibility — the legacy theme removed outlines without a replacement
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gh-rose-600) !important;
  outline-offset: 2px;
  border-radius: var(--gh-r-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn, .btn-primary, .btn-secondary, button.btn {
  border-radius: var(--gh-r-pill);
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--gh-fast) var(--gh-ease),
              border-color var(--gh-fast) var(--gh-ease),
              color var(--gh-fast) var(--gh-ease),
              box-shadow var(--gh-fast) var(--gh-ease),
              transform var(--gh-fast) var(--gh-ease);
}
.btn-sm { min-height: 34px; }

.btn-primary, .btn.btn-primary, input[type="submit"].btn-primary {
  background-color: var(--gh-rose-600) !important;
  border-color: var(--gh-rose-600) !important;
  color: var(--gh-white) !important;
  box-shadow: var(--gh-shadow-sm);
}
.btn-primary:hover, .btn.btn-primary:hover,
.btn-primary:focus, .btn.btn-primary:focus {
  background-color: var(--gh-rose-700) !important;
  border-color: var(--gh-rose-700) !important;
  color: var(--gh-white) !important;
  box-shadow: var(--gh-shadow);
}
.btn-primary:active, .btn.btn-primary:active { transform: translateY(1px); }

.btn-secondary, .btn.btn-secondary, .btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--gh-rose-600) !important;
  color: var(--gh-rose-600) !important;
}
.btn-secondary:hover, .btn.btn-secondary:hover, .btn-outline-primary:hover {
  background-color: var(--gh-rose-50) !important;
  color: var(--gh-rose-700) !important;
  border-color: var(--gh-rose-700) !important;
}

/* the theme ships a few hard-coded dark buttons; bring them into the system
   rather than leaving a fourth colour on the page */
.btn-dark, .btn.btn-dark, .subscribe-form .btn, #filter_btn {
  background-color: var(--gh-ink) !important;
  border-color: var(--gh-ink) !important;
  color: var(--gh-white) !important;
  border-radius: var(--gh-r-pill) !important;
}
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ==========================================================================
   Form controls
   ========================================================================== */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], select, textarea {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-r-sm);
  background-color: var(--gh-white);
  color: var(--gh-ink);
  transition: border-color var(--gh-fast) var(--gh-ease),
              box-shadow var(--gh-fast) var(--gh-ease);
}
.form-control:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--gh-rose-600);
  box-shadow: 0 0 0 3px rgba(168,50,90,.14);
  outline: none;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--gh-faint); opacity: 1;
}
.form-control.is-invalid, .is-invalid { border-color: var(--gh-danger) !important; }
.invalid-feedback, .text-danger, .error { color: var(--gh-danger) !important; }

/* ==========================================================================
   Prices — the single biggest readability failure before the system existed
   ========================================================================== */
.product-price, .main-price, .price-area .price, .product-card .price, .item-price {
  color: var(--gh-rose-600) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}
.previous-price, .old-price, del, .strike-price {
  color: var(--gh-muted) !important;
  font-weight: 400;
  text-decoration: line-through;
}

/* ==========================================================================
   Ratings — they rendered as faint specks at card size
   ========================================================================== */
.product-card .fa-star, .product-card .fa-star-half,
.rating .fa-star, .rating .fa-star-half, .star-rating .fa-star {
  font-size: .85rem;
  color: #CFC6C0;
  letter-spacing: .05em;
}
.product-card .fa-star.filled, .product-card .fa-star-half.filled,
.rating .filled, .star-rating .filled { color: var(--gh-amber); }

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */
.card, .widget.card, .product-card {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-r);
  background: var(--gh-white);
  box-shadow: var(--gh-shadow-sm);
  transition: box-shadow var(--gh-slow) var(--gh-ease),
              transform var(--gh-slow) var(--gh-ease);
}
.product-card:hover { box-shadow: var(--gh-shadow); transform: translateY(-2px); }

.product-card-body { padding-block: var(--gh-s3) var(--gh-s4); }
.product-card-body .product-category { display: block; margin-bottom: .15rem; }
.product-card-body .product-title { margin-bottom: .4rem; line-height: 1.45; }
.product-card-body .product-price { margin-bottom: 0; }

.section-title h2::before, .widget-title::after {
  background-color: var(--gh-rose-600) !important;
}

/* while a product image resolves, show a soft branded wash rather than a blank
   cell, so a slow connection reads as loading rather than broken */
.product-thumb, .product-card .product-thumb {
  background: linear-gradient(135deg, var(--gh-rose-50) 0%, var(--gh-white) 60%);
  border-radius: var(--gh-r-sm);
  overflow: hidden;
}
.product-thumb > img { transition: opacity .35s var(--gh-ease); }

/* ==========================================================================
   Badges
   The theme paints these with raw Bootstrap utilities - orange, red, black,
   teal - which put four unrelated colours on one product grid. Mapped onto the
   brand ramp; white text is at or above 4.5:1 on every one.
   A bare .product-badge deliberately gets NO background: the theme leaves that
   div holding only whitespace for products with no badge type, and filling it
   turned every one of those into a solid dot.
   ========================================================================== */
/* The theme fixes the badge at height:24px with line-height:24px. Adding
   vertical padding on top of that, under border-box, left a 14.4px content
   area holding a 24px line box: measured gapTop 7.8px / gapBottom -0.8px, so
   the label sat low and hung a hair outside the pill. Reported from a real
   phone as "not centred in the pill". Centre it with flex and let the height
   follow the content instead of fighting a fixed one. .72rem was also 11.5px,
   below the 12px floor the responsive audit set. */
.product-badge, .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 24px;
  line-height: 1;
  border-radius: var(--gh-r-pill);
  font-weight: 600;
  font-size: .75rem;
  padding: .32em .85em;
  text-align: center;
}
.product-badge.bg-dark      { background: var(--gh-rose-600) !important; color: var(--gh-white) !important; }
.product-badge.bg-danger    { background: var(--gh-success) !important;  color: var(--gh-white) !important; }
.product-badge.bg-warning   { background: var(--gh-bronze-700) !important; color: var(--gh-white) !important; }
.product-badge.bg-success   { background: var(--gh-rose-700) !important; color: var(--gh-white) !important; }
.product-badge.bg-info,
.product-badge.product-badge2 { background: var(--gh-rose-600) !important; color: var(--gh-white) !important; }
.product-badge.bg-secondary { background: var(--gh-line) !important; color: var(--gh-muted) !important; }
.badge-primary { background: var(--gh-rose-600) !important; color: var(--gh-white) !important; }
.badge-soft    { background: var(--gh-rose-100) !important; color: var(--gh-ink) !important; }
.badge-success { background: var(--gh-success) !important; color: var(--gh-white) !important; }

/* Badges were pinned with a hard `left`, so in RTL they sat on the wrong side
   of the card. The theme also inset them differently per side (left:0 vs
   left:15px), which put the English badge hard against the card edge, crossing
   the rounded corner, while the Arabic one floated inset. Pinned to the same
   inset on the start edge in both directions with logical properties, and the
   discount badge to the end edge. */
.product-card .product-badge, .gh-card .product-badge {
  inset-block-start: 12px !important;
  inset-inline-start: 12px !important;
  inset-inline-end: auto !important;
  left: auto; right: auto;
}
.product-card .product-badge.product-badge2, .gh-card .product-badge.product-badge2 {
  inset-inline-start: auto !important;
  inset-inline-end: 12px !important;
}

/* ==========================================================================
   Tint surfaces — where the original light pink now belongs
   ========================================================================== */
.gh-tint      { background-color: var(--gh-rose-100); color: var(--gh-ink); }
.gh-tint-soft { background-color: var(--gh-rose-50);  color: var(--gh-ink); }

.topbar, .header-top, .top-bar {
  background-color: var(--gh-rose-100) !important;
  color: var(--gh-ink) !important;
}
.topbar a, .header-top a, .top-bar a { color: var(--gh-ink) !important; font-weight: 500; }
.topbar a:hover, .header-top a:hover, .top-bar a:hover { color: var(--gh-rose-700) !important; }

/* ==========================================================================
   Top utility bar
   It was a 4/8 Bootstrap split, which wrapped onto two lines as soon as the
   labels grew - RTL first, because Arabic labels are wider than their English
   counterparts. One flex row that never wraps; on small screens it scrolls
   sideways instead of stacking.
   ========================================================================== */
.menu-top-area .row { flex-wrap: nowrap; align-items: center; }
.menu-top-area [class^="col-"], .menu-top-area [class*=" col-"] {
  flex: 0 0 auto; width: auto; max-width: none;
}
/* gh-topbar-centered: this used to carry margin-inline-end:auto, which pushed
   Track Order to one edge and the rest to the other - measured 840px of gap
   between the two groups on a 1440px screen. Everything sits together now. */
.menu-top-area .right-area, .menu-top-area .t-m-s-a {
  display: flex; align-items: center; gap: var(--gh-s3); white-space: nowrap;
}
.menu-top-area .track-order-link, .menu-top-area .main-link {
  display: inline-flex; align-items: center; gap: .35rem;
  line-height: 1; white-space: nowrap;
}

/* ==========================================================================
   Filters — the price range printed the currency sign and the value as
   adjacent text with no separator, which RTL reordered into "10000ر.س -0ر.س"
   ========================================================================== */
.ui-range-values {
  direction: ltr; display: inline-flex; align-items: center;
  gap: .4rem; white-space: nowrap;
}
.ui-range-value-min, .ui-range-value-max {
  display: inline-flex; align-items: baseline; gap: .25rem;
}
.ui-range-slider-footer { align-items: center; gap: var(--gh-s3); }

/* ==========================================================================
   Empty states
   ========================================================================== */
.gh-empty { text-align: center; padding: var(--gh-s8) var(--gh-s4); }
.gh-empty__icon {
  width: 72px; height: 72px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gh-r-pill);
  background: var(--gh-rose-50); color: var(--gh-rose-600);
  font-size: 1.75rem; margin-bottom: var(--gh-s4);
}
.gh-empty__title { font-size: 1.35rem; font-weight: 600; color: var(--gh-ink); margin-bottom: var(--gh-s2); }
.gh-empty__text  { color: var(--gh-muted); margin-bottom: var(--gh-s5); }

/* ==========================================================================
   Not-found page — it used to render as bare black-on-white text with no
   header, footer or branding, English only
   ========================================================================== */
.gh-404 { padding-block: clamp(3rem, 8vw, 6rem); }
.gh-404__icon { width: 92px; height: 92px; font-size: 2.1rem; }
.gh-404__code {
  font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 700; line-height: 1;
  letter-spacing: -.04em; color: var(--gh-rose-100); margin-bottom: var(--gh-s3);
}
.gh-404__actions {
  display: flex; flex-wrap: wrap; gap: var(--gh-s3);
  justify-content: center; margin-bottom: var(--gh-s7);
}
.gh-404__cats { border-top: 1px solid var(--gh-line); padding-top: var(--gh-s5); }
.gh-404__cats-label { display: block; color: var(--gh-muted); font-size: var(--gh-t-sm); margin-bottom: var(--gh-s3); }
.gh-404__cats-list { display: flex; flex-wrap: wrap; gap: var(--gh-s2); justify-content: center; }
.gh-404__cats-list a {
  display: inline-block; padding: .45rem 1rem;
  border-radius: var(--gh-r-pill); border: 1px solid var(--gh-line);
  background: var(--gh-white); color: var(--gh-ink); font-size: var(--gh-t-sm);
  transition: border-color var(--gh-fast) var(--gh-ease),
              color var(--gh-fast) var(--gh-ease),
              background var(--gh-fast) var(--gh-ease);
}
.gh-404__cats-list a:hover {
  border-color: var(--gh-rose-600); color: var(--gh-rose-600); background: var(--gh-rose-50);
}

/* ==========================================================================
   Footer bits
   The Cash On Delivery badge used to be a raster image with the English words
   baked into the pixels, so no code could translate it.
   ========================================================================== */
.gh-cod-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: var(--gh-r-pill);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  color: var(--gh-white); font-size: .84rem; font-weight: 600; line-height: 1;
}
.gh-cod-badge i { font-size: 1rem; opacity: .9; }

/* ==========================================================================
   Links
   ========================================================================== */
a { color: var(--gh-rose-600); transition: color var(--gh-fast) var(--gh-ease); }
a:hover { color: var(--gh-rose-700); }
.navbar a, .site-header a, .footer a, footer a, .breadcrumb a { color: inherit; }
.footer a:hover, footer a:hover { color: var(--gh-rose-600); }

/* the count bubbles on the cart / compare icons */
.count-label { font-size: .72rem; min-width: 18px; min-height: 18px; line-height: 18px; }

/* ==========================================================================
   Touch targets and legibility
   Measured on the live homepage at 390px: 81 icon-only controls on product
   cards (wishlist / compare / add-to-cart, 27 products x 3) were under 40px.
   WCAG 2.5.5 asks for 44px; those are the controls a thumb aims at most.
   ========================================================================== */
.product-button-group .product-button, a.product-button {
  min-width: 40px; min-height: 40px;
  display: inline-flex !important; align-items: center; justify-content: center;
}

@media (max-width: 767.98px) {
  /* gh-topbar-grid. History: this bar first scrolled sideways, which put
     "اللغة" half off the edge and Login entirely off-screen - and the language
     switcher lives ONLY here, so anything unreachable here is unreachable full
     stop. Wrapping fixed that but left the six items ragged: measured at 390px
     they landed on three rows at six unrelated x positions across 143px of
     bar, every one of them a 36px target. Reported from a real phone as
     "scattered and overlapping".

     A fixed three-column grid instead. Each item gets an equal, predictable
     cell and a 44px target, and the layout cannot go ragged as labels change
     length. The Bootstrap columns and the two flex wrappers are dissolved with
     display:contents so the six links are the grid items; .t-h-dropdown stays
     a real box because the menus position against it. */
  .menu-top-area .container { overflow-x: visible; }
  .menu-top-area .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 2px;
    min-width: 0;
  }
  .menu-top-area .row > [class^="col-"],
  .menu-top-area .row > [class*=" col-"],
  .menu-top-area .right-area,
  .menu-top-area .t-m-s-a { display: contents; }

  .menu-top-area .row .track-order-link,
  .menu-top-area .row .t-h-dropdown,
  .menu-top-area .row .login-register {
    min-width: 0;
    min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .menu-top-area .track-order-link, .menu-top-area .main-link {
    font-size: .8rem; min-height: 44px;
    justify-content: center; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .menu-top-area .login-register > a,
  .menu-top-area .login-register > .t-h-dropdown { width: 100%; }
  /* the theme sizes the login link on its own selector, so it came out 15px
     against 12.8px for the other five - one cell reading as louder than the
     rest is exactly the raggedness this grid is here to remove */
  .menu-top-area .login-register .track-order-link,
  .menu-top-area .login-register .track-order-link span { font-size: .8rem; }

  .product-button-group .product-button, a.product-button {
    min-width: 44px; min-height: 44px;
  }
  .product-button-group { gap: .35rem; }
  .btn { min-height: 44px; padding-inline: 1.15rem; }
}

/* ==========================================================================
   GLOW HOUSE homepage — sections written for this store
   Mobile-first; every horizontal rule uses logical properties so RTL mirrors
   without a second stylesheet.
   ========================================================================== */

/* ---- section scaffolding ------------------------------------------------ */
.gh-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.gh-section--soft { background: var(--gh-bg-soft); }

.gh-section__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.gh-section__head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gh-s4); text-align: start;
}
.gh-section__title {
  font-size: var(--gh-t-2xl); font-weight: 600; letter-spacing: -.02em;
  color: var(--gh-ink); margin: 0 0 .25rem;
}
.gh-section__sub { color: var(--gh-muted); font-size: var(--gh-t-sm); margin: 0; }
.gh-section__more {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--gh-rose-600); font-weight: 600; font-size: var(--gh-t-sm);
  white-space: nowrap; min-height: 40px;
}
.gh-section__more i { font-size: .75em; }
.gh-section__more:hover { color: var(--gh-rose-700); }

/* ---- hero --------------------------------------------------------------- */
.gh-hero .item {
  background-size: cover; background-position: center;
  min-height: clamp(320px, 42vw, 520px);
  display: flex; align-items: center;
}
.gh-hero__inner { max-width: 34rem; }
.gh-hero__title {
  font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; color: var(--gh-ink);
  margin: 0 0 var(--gh-s3);
}
.gh-hero__sub {
  font-size: clamp(.95rem, 1.6vw, 1.15rem); color: var(--gh-muted);
  margin: 0 0 var(--gh-s5); line-height: 1.6;
}
/* the stacked mobile image - see the note in glow.blade.php */
.gh-hero__img { display: none; }

@media (max-width: 575.98px) {
  /*  on a 2.53:1 banner in a 1.15:1 box threw away 55% of the width.
     Stack instead: the whole image on top, the words under it on a clean
     surface where they are readable without a scrim. */
  .gh-hero .item {
    display: block;
    min-height: 0;
    padding: 0;                       /* let the art run edge to edge */
    background-image: none !important;
    background-color: var(--gh-rose-50);
  }
  .gh-hero__img {
    display: block; width: 100%; height: auto;
    object-fit: contain;
  }
  .gh-hero .item .container { padding-block: var(--gh-s5) var(--gh-s6); }
  .gh-hero__inner { max-width: none; text-align: center; }
  .gh-hero__inner .btn { width: 100%; max-width: 20rem; }
}

/* These banners put their subject on the right and leave the left clear, which
   suits the LTR layout where the words sit on the left. In Arabic the words are
   on the right, so once the full width became visible they landed on top of the
   bottles. Move the text block to the clear side in RTL; the text inside it
   stays right-aligned. Not applied to the stacked phone layout, where the
   words are under the image and centred. */
/* The hero carousel forces its own subtree to LTR (owl does this so slide
   order works in RTL), so the text block sits against the LEFT edge in both
   languages while the Arabic text inside it stays right-aligned. On desktop
   that is harmless - the block is narrow relative to the container. In the
   tablet band the block is nearly as wide as the container, so the
   right-aligned words ran onto the bottles once the full image width became
   visible. Align the Arabic to the same edge its block is on, which reproduces
   the English composition instead of fighting it. Not applied to the stacked
   phone layout, where the words are under the image and centred. */
@media (min-width: 576px) {
  html[dir="rtl"] .gh-hero__inner { text-align: left; }
  html[dir="rtl"] .gh-hero__title, html[dir="rtl"] .gh-hero__sub { text-align: left; }
}

/* Tablet band. The theme pins .hero-slider to a fixed 430px, which at 768px
   made the box 1.79:1 against a 2.53:1 banner and cropped 29% of its width -
   the subjects on these banners are arranged horizontally, so width is the
   expensive thing to lose. Letting the box run shorter trades that for ~14% of
   height, top and bottom, where there is nothing but backdrop. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .gh-hero .hero-slider, .gh-hero .item { height: auto !important; }
  .gh-hero .item { min-height: clamp(260px, 33vw, 340px); }
}

/* ---- category tiles ----------------------------------------------------- */
.gh-cats__grid {
  display: grid; gap: clamp(.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 576px) { .gh-cats__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 768px) { .gh-cats__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1200px){ .gh-cats__grid { grid-template-columns: repeat(8, minmax(0,1fr)); } }

.gh-cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--gh-s3);
  padding: var(--gh-s4) var(--gh-s2);
  border-radius: var(--gh-r); border: 1px solid var(--gh-line);
  background: var(--gh-white); color: var(--gh-ink); text-align: center;
  transition: border-color var(--gh-fast) var(--gh-ease),
              box-shadow var(--gh-slow) var(--gh-ease),
              transform var(--gh-slow) var(--gh-ease);
}
.gh-cat-tile:hover {
  border-color: var(--gh-rose-300); color: var(--gh-rose-600);
  box-shadow: var(--gh-shadow); transform: translateY(-3px);
}
.gh-cat-tile__img {
  width: clamp(64px, 14vw, 92px); aspect-ratio: 1;
  border-radius: var(--gh-r-pill); overflow: hidden;
  background: var(--gh-rose-50);
  display: grid; place-items: center;
}
.gh-cat-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.gh-cat-tile__name { font-size: var(--gh-t-sm); font-weight: 600; line-height: 1.3; }

/* ---- product grid ------------------------------------------------------- */
.gh-grid {
  display: grid; gap: clamp(.75rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .gh-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1200px) { .gh-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* applies to every product card on the site - homepage, catalogue, search
   results, related products - so a product looks identical wherever it appears.
   .product-list is the catalogue's horizontal list view and opts out. */
.product-card:not(.product-list) {
  display: flex; flex-direction: column; height: 100%; position: relative;
}
.product-card:not(.product-list) .product-thumb { position: relative; aspect-ratio: 1; }
.product-card:not(.product-list) .product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card:not(.product-list) .product-card-body {
  display: flex; flex-direction: column; flex: 1; padding-inline: var(--gh-s4);
}
.product-card:not(.product-list) .product-title { font-size: var(--gh-t-sm); font-weight: 600; }
.product-card:not(.product-list) .product-price { margin-top: auto; font-size: var(--gh-t-base); }

/* card actions reveal on hover, but stay visible on touch where there is no hover */
/* The action buttons used to be absolutely positioned over the product image -
   measured overlapping the image on 16 of 16 cards at every breakpoint. They now
   sit in their own row after the price (.gh-card-actions), so they can never
   cover the image, the name or the price on any device.
   Any template still rendering the group inside the thumb (the unused themes,
   campaign, includes/*_product) gets a static fallback rather than an overlay. */
.product-card .product-thumb .product-button-group {
  position: static;
  display: flex; gap: .35rem; justify-content: center;
  padding-block: var(--gh-s2);
  opacity: 1; transform: none;
}
.product-card .product-button {
  background: var(--gh-white); color: var(--gh-ink);
  border-radius: var(--gh-r-pill); box-shadow: var(--gh-shadow-sm);
}
.product-card .product-button:hover { background: var(--gh-rose-600); color: var(--gh-white); }

/* ---- promo strip -------------------------------------------------------- */
.gh-promo__grid {
  display: grid; gap: clamp(.75rem, 2vw, 1.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .gh-promo__grid { grid-template-columns: 1fr 1fr; } }

.gh-promo__card {
  position: relative; overflow: hidden;
  border-radius: var(--gh-r-lg);
  min-height: clamp(180px, 24vw, 260px);
  display: flex; align-items: center;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--gh-ink);
  transition: box-shadow var(--gh-slow) var(--gh-ease), transform var(--gh-slow) var(--gh-ease);
}
.gh-promo__card--a { background: linear-gradient(135deg, var(--gh-rose-50), var(--gh-rose-100)); }
.gh-promo__card--b { background: linear-gradient(135deg, #FBF7F5, #EFE3DC); }
.gh-promo__card:hover { box-shadow: var(--gh-shadow-lg); transform: translateY(-3px); }

.gh-promo__text { position: relative; z-index: 2; max-width: 60%; }
.gh-promo__eyebrow {
  display: block; font-size: var(--gh-t-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gh-bronze-700); margin-bottom: .4rem;
}
.gh-promo__title { font-size: var(--gh-t-xl); font-weight: 700; margin: 0 0 var(--gh-s3); }
.gh-promo__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; font-size: var(--gh-t-sm); color: var(--gh-rose-600);
}
.gh-promo__img {
  position: absolute; inset-block-end: 0; inset-inline-end: 0;
  width: clamp(120px, 26%, 210px); aspect-ratio: 1;
  object-fit: contain; opacity: .95; z-index: 1;
}

/* ---- trust strip -------------------------------------------------------- */
.gh-trust-strip {
  background: var(--gh-white);
  border-block-start: 1px solid var(--gh-line);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.gh-trust__grid {
  display: grid; gap: var(--gh-s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 992px) { .gh-trust__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.gh-trust__item { display: flex; align-items: center; gap: var(--gh-s3); }
.gh-trust__icon { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.gh-trust__title { font-size: var(--gh-t-sm); font-weight: 600; margin: 0 0 .15rem; color: var(--gh-ink); }
.gh-trust__text { font-size: var(--gh-t-xs); color: var(--gh-muted); margin: 0; line-height: 1.5; }

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 575.98px) {
  .gh-section__head--row { flex-direction: column; align-items: flex-start; gap: var(--gh-s2); }
  .gh-promo__text { max-width: 68%; }
}


/* ==========================================================================
   Catalogue & product page — milestone 4
   ========================================================================== */

/* toolbar above the grid: sort, view switch, result count */
.shop-toolbar, .catalog-toolbar, .products-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gh-s3);
  padding: var(--gh-s3) var(--gh-s4);
  background: var(--gh-white);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-r);
  margin-bottom: var(--gh-s5);
}
.shop-toolbar select, .products-toolbar select { min-height: 40px; }

/* sidebar widgets get the same card treatment as everything else */
.widget.widget-categories, .sidebar .widget {
  border-radius: var(--gh-r);
  border: 1px solid var(--gh-line);
  background: var(--gh-white);
}
.widget-title {
  font-size: var(--gh-t-base); font-weight: 600; letter-spacing: -.01em;
}

/* category list in the sidebar reads as a menu, not a wall of links */
.widget-categories #category_list > li > a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 40px; padding-block: .35rem;
  color: var(--gh-ink); font-size: var(--gh-t-sm);
  transition: color var(--gh-fast) var(--gh-ease);
}
.widget-categories #category_list > li > a:hover { color: var(--gh-rose-600); }
.widget-categories #category_list > li.expanded > a,
.widget-categories #category_list > li.active > a {
  color: var(--gh-rose-600); font-weight: 600;
}

/* pagination */
.pagination { gap: .3rem; }
.pagination li a, .pagination li span {
  min-width: 38px; min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gh-r-sm); border: 1px solid var(--gh-line);
  color: var(--gh-ink);
}
.pagination li.active a, .pagination li.active span {
  background: var(--gh-rose-600); border-color: var(--gh-rose-600); color: var(--gh-white);
}

/* ---- product page ------------------------------------------------------- */
.product-gallery, .details-page-top-left-content {
  border-radius: var(--gh-r-lg); overflow: hidden;
}
.relatedproduct-section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.relatedproduct-section .section-title h2,
.review-area .section-title h2 {
  font-size: var(--gh-t-2xl); font-weight: 600; letter-spacing: -.02em;
}

/* the buy row: quantity stepper next to the actions, aligned and equal height */
.qty, .quantity-area { display: inline-flex; align-items: center; }
.qty .qty-btn, .quantity-area button {
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gh-r-sm);
}


/* ==========================================================================
   Cart, checkout and account — milestone 5
   ========================================================================== */

.gh-empty--cart {
  background: var(--gh-white);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-r-lg);
}

/* ---- cart table --------------------------------------------------------- */
.shopping-cart .table { border-color: var(--gh-line); }
.shopping-cart thead th {
  font-size: var(--gh-t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gh-muted);
  border-bottom: 1px solid var(--gh-line);
}
.shopping-cart td { vertical-align: middle; border-color: var(--gh-line); }
.shopping-cart .product-item .product-thumb { width: 76px; aspect-ratio: 1; flex: 0 0 auto; }
.shopping-cart .product-title { font-size: var(--gh-t-sm); font-weight: 600; margin: 0; }

/* the totals read as a summary panel rather than loose text */
.shopping-cart-footer, .cart-summary {
  background: var(--gh-bg-soft);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-r);
  padding: var(--gh-s4);
}
.gh-vat-lines { color: var(--gh-muted); font-size: var(--gh-t-sm); }

/* ---- checkout step indicator (gh-checkout-steps) ------------------------ */
.steps, .gh-checkout-steps {
  display: flex; gap: var(--gh-s2); flex-wrap: wrap;
  padding: 0; margin-bottom: var(--gh-s6);
}
.steps .step {
  flex: 1 1 0; min-width: 160px;
  display: flex; align-items: center; gap: var(--gh-s2);
  padding: var(--gh-s3) var(--gh-s4);
  border: 1px solid var(--gh-line); border-radius: var(--gh-r);
  background: var(--gh-white); color: var(--gh-muted);
  transition: border-color var(--gh-fast) var(--gh-ease),
              color var(--gh-fast) var(--gh-ease),
              background var(--gh-fast) var(--gh-ease);
}
.steps .step .step-title { margin: 0; font-size: var(--gh-t-sm); font-weight: 600; }
.steps .step.active {
  border-color: var(--gh-rose-600);
  background: var(--gh-rose-50);
  color: var(--gh-rose-600);
}
.steps .step.active .step-title { color: var(--gh-rose-600); }
.steps .step:hover { border-color: var(--gh-rose-300); }

/* ---- quantity stepper ---------------------------------------------------
   Measured on the product page at 390px: in Arabic the control rendered
   plus-left / minus-right, because the flex row inherits the document's rtl
   direction while the source order is minus, value, plus. Reported from a real
   phone as "pressing them feels backwards".

   A stepper is a numeric control and the number inside it is written LTR
   either way, so it is pinned to ltr in both languages - which is also what
   every Saudi storefront does. The hit areas were 45x41; a stepper is a
   repeat-tap target and 41px was under the 44px floor.                      */
.qtySelector, .qtySelector.product-quantity { direction: ltr; }
.qtySelector .decreaseQty, .qtySelector .increaseQty,
.qtySelector .decreaseQtycart, .qtySelector .increaseQtycart {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.qtySelector .qtyValue { min-height: 44px; }

/* ---- checkout navigation (gh-cknav) -------------------------------------
   The step buttons used to be `.btn-sm` with the label inside
   `.hidden-xs-down`, so below 576px the primary action rendered as a bare
   maroon pill with a single arrow glyph. Reported from a real phone: the
   owner could not tell it was "continue" and could not place an order.
   Labels are now permanent; on a phone the pair stacks so the primary
   action is a full-width target instead of a 40px pill.                    */
.gh-cknav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gh-s3); flex-wrap: wrap;
}
.gh-cknav .btn,
.gh-cknav__back, .gh-cknav__next {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gh-s2);
  min-height: 48px; padding-inline: var(--gh-s5);
  font-size: var(--gh-t-sm); font-weight: 600; white-space: nowrap;
  border-radius: var(--gh-r-pill);
}
/* back is secondary: it must not compete with the action that moves the order
   forward. It carries .btn-secondary for the fill (the theme's bare .btn is a
   solid maroon that outranks a plain background declaration here); this only
   softens the border so the pair does not read as two equal actions. */
.gh-cknav__back, .gh-cknav__back:visited { border-color: var(--gh-rose-300) !important; }
.gh-cknav__back:hover, .gh-cknav__back:focus { border-color: var(--gh-rose-600) !important; }
.gh-cknav__next { flex: 0 1 auto; }
/* the terms gate: the button is disabled until the box is ticked, so say so */
.gh-cknav__gate { display: inline-flex; flex-direction: column; align-items: stretch; gap: var(--gh-s1); }
.gh-cknav__hint { font-size: var(--gh-t-xs); color: var(--gh-muted); text-align: center; }
.gh-cknav__gate:has(.gh-cknav__next:not(:disabled)) .gh-cknav__hint { visibility: hidden; }
.gh-cknav__next:disabled { opacity: .55; cursor: not-allowed; }
.gh-cknav i { font-size: .85em; }

/* the modal footer runs the same pair, so it inherits the same rules */
.modal-footer { display: flex; gap: var(--gh-s3); flex-wrap: wrap; }

@media (max-width: 575px) {
  /* primary first in the reading order on a phone, back underneath */
  .gh-cknav { flex-direction: column-reverse; align-items: stretch; gap: var(--gh-s2); }
  .gh-cknav .btn, .gh-cknav__back, .gh-cknav__next { width: 100%; }
  .gh-cknav__gate { width: 100%; }
  .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .modal-footer .btn { width: 100%; }
}

/* ---- checkout forms ----------------------------------------------------- */
.checkout-form .form-group, .checkout .form-group { margin-bottom: var(--gh-s4); }
.checkout-form label, .checkout label {
  font-size: var(--gh-t-sm); font-weight: 600; color: var(--gh-ink);
  margin-bottom: .35rem; display: inline-block;
}
.checkout-form .form-control, .checkout .form-control { min-height: 44px; }

.widget-featured-products, .checkout-sidebar .widget {
  border-radius: var(--gh-r); border: 1px solid var(--gh-line); background: var(--gh-white);
}
.checkout-sidebar .entry { padding-block: var(--gh-s3); border-bottom: 1px solid var(--gh-line); }
.checkout-sidebar .entry:last-child { border-bottom: 0; }
.checkout-sidebar .entry-thumb { width: 56px; aspect-ratio: 1; border-radius: var(--gh-r-sm); overflow: hidden; }

/* ---- account ------------------------------------------------------------ */
.user-dashboard .card, .dashboard-card {
  border-radius: var(--gh-r); border: 1px solid var(--gh-line);
  box-shadow: var(--gh-shadow-sm);
}
.user-sidebar .list-group-item, .dashboard-nav a {
  min-height: 44px; display: flex; align-items: center; gap: var(--gh-s2);
  border: 0; border-radius: var(--gh-r-sm);
  color: var(--gh-ink); font-size: var(--gh-t-sm);
}
.user-sidebar .list-group-item.active, .dashboard-nav a.active {
  background: var(--gh-rose-50); color: var(--gh-rose-600); font-weight: 600;
}

/* ---- auth pages --------------------------------------------------------- */
.login-area .card, .register-area .card, .auth-card {
  border-radius: var(--gh-r-lg); border: 1px solid var(--gh-line);
  box-shadow: var(--gh-shadow);
}

@media (max-width: 767.98px) {
  .steps .step { min-width: 100%; }
  .shopping-cart .product-item .product-thumb { width: 60px; }
}


/* ---- card actions row --------------------------------------------------- */
.gh-card-actions {
  display: flex; align-items: center; gap: var(--gh-s2);
  margin-top: var(--gh-s3);
  padding-top: var(--gh-s3);
  border-top: 1px solid var(--gh-line);
}
.gh-card-actions .product-button {
  flex: 0 0 auto;
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gh-r-pill);
  border: 1px solid var(--gh-line);
  background: var(--gh-white); color: var(--gh-ink);
  box-shadow: none;
  transition: background var(--gh-fast) var(--gh-ease),
              color var(--gh-fast) var(--gh-ease),
              border-color var(--gh-fast) var(--gh-ease);
}
/* the add-to-cart action is the primary one and takes the remaining width */
.gh-card-actions .add_to_single_cart {
  flex: 1 1 auto;
  background: var(--gh-rose-600); border-color: var(--gh-rose-600); color: var(--gh-white);
}
.gh-card-actions .add_to_single_cart:hover {
  background: var(--gh-rose-700); border-color: var(--gh-rose-700); color: var(--gh-white);
}
.gh-card-actions .product-button:hover {
  border-color: var(--gh-rose-600); color: var(--gh-rose-600); background: var(--gh-rose-50);
}
@media (max-width: 767.98px) {
  .gh-card-actions .product-button { min-width: 44px; min-height: 44px; }
}


/* the tablet band is where the six items are tightest before wrapping */
@media (min-width: 768px) and (max-width: 991.98px) {
  .menu-top-area .row { flex-wrap: wrap; row-gap: .35rem; }
  .menu-top-area .right-area { gap: var(--gh-s2); }
  .menu-top-area .track-order-link,
  .menu-top-area .main-link { font-size: .84rem; }
}


/* gh-topbar-boxmodel — wrapping the bar exposed Bootstrap's negative .row
   margins and the column padding, which pushed the widest label past the
   viewport and added ~21px of page overflow in RTL. Neutralise the row box
   model on small screens so the wrap has the full width to work with. */
@media (max-width: 767.98px) {
  .menu-top-area .container { padding-inline: var(--gh-s3); max-width: 100%; }
  .menu-top-area .row { margin-inline: 0; width: 100%; }
  .menu-top-area [class^="col-"], .menu-top-area [class*=" col-"] {
    padding-inline: 0; max-width: 100%;
  }
  .menu-top-area .right-area, .menu-top-area .t-m-s-a { max-width: 100%; }
  /* the theme pads this link with   entities, which do not collapse */
  .menu-top-area .wishlist-mobile { margin-inline-start: 0; }
}


/* gh-dropdown-clamp — the currency and language menus are absolutely positioned
   and, in RTL on a narrow screen, opened past the left edge: measured
   [-18..122] against a 390px viewport, which was the whole of the page's 18px
   horizontal overflow. Pin them inside the viewport instead. */
.menu-top-area .t-h-dropdown { position: relative; }
.menu-top-area .t-h-dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  max-width: calc(100vw - var(--gh-s5));
}
html[dir="rtl"] .menu-top-area .t-h-dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
@media (max-width: 767.98px) {
  /* Centring the menu on its trigger worked while the bar was a wrapped flex
     row. In the grid the triggers sit in the outer cells, so the currency menu
     ran off the edge again - measured [327..467] against a 390px viewport in
     Arabic and [-74..66] in English. Anchor to the row instead of the trigger,
     which cannot leave the viewport whichever cell was tapped. */
  .menu-top-area .row { position: relative; }
  .menu-top-area .t-h-dropdown { position: static; }
  /* physical properties with !important: the theme sets `left` on this menu
     from a selector that outranks the logical shorthand, so the clamp above
     computed left:235px and the menu still ran to 407px on a 390px screen.
     Anchored to the row's start edge, which is the side the reading starts on
     in each direction. */
  .menu-top-area .t-h-dropdown-menu {
    transform: none !important;
    min-width: 10rem;
    max-width: calc(100vw - var(--gh-s5));
  }
  html[dir="ltr"] .menu-top-area .t-h-dropdown-menu { left: 0 !important; right: auto !important; }
  html[dir="rtl"] .menu-top-area .t-h-dropdown-menu { right: 0 !important; left: auto !important; }
}


/* ==========================================================================
   Payment method selector
   Was a single pale box with a stock hand icon. Now selectable cards, plus a
   clearly-disabled row for the Saudi gateways that have no credentials yet.
   ========================================================================== */
.gh-pay { display: flex; flex-direction: column; gap: var(--gh-s3); }

.gh-pay__option {
  display: flex; align-items: center; gap: var(--gh-s3);
  padding: var(--gh-s4);
  border: 1px solid var(--gh-line); border-radius: var(--gh-r);
  background: var(--gh-white); color: var(--gh-ink);
  min-height: 72px;
  transition: border-color var(--gh-fast) var(--gh-ease),
              box-shadow var(--gh-fast) var(--gh-ease),
              background var(--gh-fast) var(--gh-ease);
}
.gh-pay__option:hover, .gh-pay__option:focus-visible {
  border-color: var(--gh-rose-600);
  background: var(--gh-rose-50);
  box-shadow: var(--gh-shadow-sm);
  color: var(--gh-ink);
}
.gh-pay__icon {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gh-r-pill);
  background: var(--gh-rose-50); color: var(--gh-rose-600);
  font-size: 1.15rem;
}
.gh-pay__text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.gh-pay__title { font-weight: 600; font-size: var(--gh-t-base); }
.gh-pay__hint  { font-size: var(--gh-t-sm); color: var(--gh-muted); }
.gh-pay__check { flex: 0 0 auto; color: var(--gh-faint); }
.gh-pay__option:hover .gh-pay__check { color: var(--gh-rose-600); }

.gh-pay__soon-label {
  margin-top: var(--gh-s2);
  font-size: var(--gh-t-sm); color: var(--gh-muted);
}
.gh-pay__soon { display: flex; flex-wrap: wrap; gap: var(--gh-s2); }
.gh-pay__chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border: 1px dashed var(--gh-line); border-radius: var(--gh-r-pill);
  background: var(--gh-bg-soft); color: var(--gh-faint);
  font-size: var(--gh-t-sm); font-weight: 500;
  cursor: not-allowed;
}
.gh-pay__chip i { font-size: 1em; }

@media (max-width: 575.98px) {
  .gh-pay__option { padding: var(--gh-s3); min-height: 64px; }
  .gh-pay__icon { width: 40px; height: 40px; }
}


/* ==========================================================================
   Top utility bar — centred, white, AA-readable
   The bar is #A8325A. Text was inheriting the ink colour #14100E, which
   measures 2.94:1 against it and fails AA. White is 6.42:1.
   ========================================================================== */
.menu-top-area .row {
  justify-content: center;
  align-items: center;
  column-gap: clamp(.75rem, 2vw, 2rem);
}
.menu-top-area .right-area,
.menu-top-area .t-m-s-a {
  justify-content: center;
  gap: clamp(.75rem, 2vw, 2rem);
}

/* white text, and the same on hover/focus so it never drops back to ink */
.menu-top-area,
.menu-top-area a,
.menu-top-area .track-order-link,
.menu-top-area .main-link,
.menu-top-area .text-label,
.menu-top-area i {
  color: #fff !important;
}
.menu-top-area a:hover,
.menu-top-area .track-order-link:hover,
.menu-top-area .main-link:hover {
  color: #fff !important;
  opacity: .82;
}

/* the dropdown panels are on white, so their contents must stay dark */
.menu-top-area .t-h-dropdown-menu,
.menu-top-area .t-h-dropdown-menu a {
  color: var(--gh-ink) !important;
  background: var(--gh-white);
}
.menu-top-area .t-h-dropdown-menu a:hover {
  color: var(--gh-rose-600) !important;
  opacity: 1;
}
.menu-top-area .t-h-dropdown-menu a.active {
  color: var(--gh-rose-600) !important;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .menu-top-area .row { column-gap: .6rem; }
  .menu-top-area .right-area, .menu-top-area .t-m-s-a { gap: .6rem; }
}

/* the login label has a short form on phones - see master/front.blade.php */
.gh-tb-short { display: none; }
@media (max-width: 767.98px) {
  .gh-tb-long { display: none; }
  .gh-tb-short { display: inline; }
}

/* ==========================================================================
   Order tracking
   The bundled page was a bare input, a button and a four-item list rendered by
   a 200-line @for that indexed its rows positionally - a missing or reordered
   row silently lit the wrong step. Rebuilt as a real status timeline with the
   order beside it. Statuses come from the admin panel's own vocabulary
   (Pending / In Progress / Shipped / Delivered / Canceled); nothing here
   invents a state the shop cannot actually set.
   ========================================================================== */

/* ---- the lookup form ---------------------------------------------------- */
.gh-track-form {
  background: var(--gh-white);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-r-lg);
  box-shadow: var(--gh-shadow-sm);
  padding: clamp(1.25rem, 4vw, 2rem);
  text-align: center;
}
.gh-track-form__title { font-size: var(--gh-t-2xl); margin: 0 0 var(--gh-s2); }
.gh-track-form__sub {
  color: var(--gh-muted); font-size: var(--gh-t-sm);
  margin: 0 auto var(--gh-s5); max-width: 34rem; line-height: 1.6;
}
.gh-track-form__row { display: flex; gap: var(--gh-s3); justify-content: center; flex-wrap: wrap; }
.gh-track-form__input {
  flex: 1 1 18rem; min-width: 0; min-height: 48px;
  text-align: center; font-weight: 600; letter-spacing: .02em;
}
.gh-track-form__btn {
  flex: 0 0 auto; min-height: 48px; padding-inline: var(--gh-s5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gh-s2);
}
@media (max-width: 575.98px) {
  /* flex-basis 18rem plus grow made the input stretch to fill the column once
     the row turned vertical - it rendered as a 280px-tall empty box */
  .gh-track-form__row { flex-direction: column; }
  .gh-track-form__input, .gh-track-form__btn { width: 100%; flex: 0 0 auto; }
}

/* ---- result ------------------------------------------------------------- */
.gh-track-result:empty { display: none; }
.gh-track {
  margin-top: var(--gh-s5);
  background: var(--gh-white);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-r-lg);
  box-shadow: var(--gh-shadow-sm);
  overflow: hidden;
}
.gh-track__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gh-s3); flex-wrap: wrap;
  padding: var(--gh-s4) clamp(1rem, 3vw, 1.75rem);
  background: var(--gh-rose-50);
  border-bottom: 1px solid var(--gh-line);
}
.gh-track__label { display: block; font-size: var(--gh-t-xs); color: var(--gh-muted); }
.gh-track__number { font-size: var(--gh-t-lg); color: var(--gh-ink); letter-spacing: .02em; }
.gh-track__state {
  font-size: var(--gh-t-xs); font-weight: 600;
  padding: .4em 1em; border-radius: var(--gh-r-pill);
}
.gh-track__state--live { background: var(--gh-rose-600); color: var(--gh-white); }
.gh-track__state--done { background: var(--gh-success); color: var(--gh-white); }
.gh-track__state--off  { background: var(--gh-line);     color: var(--gh-muted); }

/* ---- the timeline ------------------------------------------------------- */
/* A column on a phone and a row from 768px. The connecting line is drawn on
   the step itself rather than a separate element so it cannot fall out of
   alignment when a label wraps to two lines. */
.gh-track__steps {
  list-style: none; margin: 0;
  padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 3vw, 1.75rem);
  display: grid; gap: 0;
}
.gh-track__step { position: relative; display: flex; gap: var(--gh-s3); padding-bottom: var(--gh-s5); }
.gh-track__step:last-child { padding-bottom: 0; }
.gh-track__step::before {
  content: ""; position: absolute;
  inset-inline-start: 17px; top: 36px; bottom: 4px;
  width: 2px; background: var(--gh-line);
}
.gh-track__step:last-child::before { display: none; }
/* only a step that has been passed fills its forward segment - colouring the
   current step's segment too drew progress into a stage not reached yet */
.gh-track__step.is-done::before { background: var(--gh-rose-300); }

.gh-track__dot {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gh-bg-soft); color: var(--gh-faint);
  border: 2px solid var(--gh-line); font-size: .8rem; z-index: 1;
}
.is-done .gh-track__dot    { background: var(--gh-rose-300); border-color: var(--gh-rose-300); color: var(--gh-white); }
.is-current .gh-track__dot { background: var(--gh-rose-600); border-color: var(--gh-rose-600); color: var(--gh-white); }
.is-current.is-off .gh-track__dot { background: var(--gh-danger); border-color: var(--gh-danger); }

.gh-track__step-body { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.gh-track__step-title { font-weight: 600; color: var(--gh-faint); font-size: var(--gh-t-sm); }
.is-done .gh-track__step-title, .is-current .gh-track__step-title { color: var(--gh-ink); }
.gh-track__step-when { font-size: var(--gh-t-xs); color: var(--gh-muted); }

@media (min-width: 768px) {
  .gh-track__steps { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .gh-track__step { flex-direction: column; align-items: center; text-align: center; padding-bottom: 0; gap: var(--gh-s2); }
  .gh-track__step::before {
    inset-inline-start: 50%; inset-inline-end: -50%;
    top: 17px; bottom: auto; width: auto; height: 2px;
  }
  .gh-track__step-body { align-items: center; }
}

/* ---- order panels ------------------------------------------------------- */
.gh-track__grid {
  display: grid; gap: 1px; background: var(--gh-line);
  border-top: 1px solid var(--gh-line);
}
@media (min-width: 768px) { .gh-track__grid { grid-template-columns: 1fr 1fr; } }
.gh-track__panel { background: var(--gh-white); padding: clamp(1rem, 3vw, 1.5rem); }
.gh-track__panel-title { font-size: var(--gh-t-sm); margin: 0 0 var(--gh-s3); color: var(--gh-ink); }

.gh-track__dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem var(--gh-s4); margin: 0; }
.gh-track__dl dt { font-size: var(--gh-t-xs); color: var(--gh-muted); font-weight: 400; margin: 0; }
.gh-track__dl dd { font-size: var(--gh-t-sm); color: var(--gh-ink); font-weight: 600; margin: 0; text-align: end; }

.gh-track__items { list-style: none; margin: 0; padding: 0; }
.gh-track__item {
  display: flex; align-items: center; gap: var(--gh-s3);
  padding-block: var(--gh-s2); border-bottom: 1px solid var(--gh-line);
}
.gh-track__item:last-child { border-bottom: 0; }
.gh-track__item-thumb {
  width: 40px; height: 40px; object-fit: cover; flex: 0 0 40px;
  border-radius: var(--gh-r-sm); background: var(--gh-rose-50);
}
.gh-track__item-name { flex: 1 1 auto; font-size: var(--gh-t-sm); color: var(--gh-ink); min-width: 0; }
.gh-track__item-qty  { font-size: var(--gh-t-sm); color: var(--gh-muted); font-weight: 600; white-space: nowrap; }

/* ---- not found ---------------------------------------------------------- */
.gh-track__empty {
  margin-top: var(--gh-s5); text-align: center;
  background: var(--gh-white); border: 1px solid var(--gh-line);
  border-radius: var(--gh-r-lg); padding: clamp(1.5rem, 5vw, 3rem);
}
.gh-track__empty-icon { font-size: 2.5rem; color: var(--gh-rose-300); margin-bottom: var(--gh-s3); }
.gh-track__empty-title { font-size: var(--gh-t-lg); margin: 0 0 var(--gh-s2); }
.gh-track__empty-text { color: var(--gh-muted); font-size: var(--gh-t-sm); margin: 0 auto; max-width: 30rem; line-height: 1.6; }

/* ==========================================================================
   Order success
   ========================================================================== */
.gh-done { text-align: center; max-width: 40rem; margin-inline: auto; }
.gh-done__mark {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--gh-s4);
  display: flex; align-items: center; justify-content: center;
  background: var(--gh-success); color: var(--gh-white); font-size: 1.75rem;
}
.gh-done__title { font-size: var(--gh-t-2xl); margin: 0 0 var(--gh-s3); }
.gh-done__text { color: var(--gh-muted); line-height: 1.7; margin: 0 0 var(--gh-s3); }

/* the order number is the one thing on this page the customer must keep */
.gh-done__number {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gh-s3);
  background: var(--gh-rose-50); border: 1px dashed var(--gh-rose-300);
  border-radius: var(--gh-r); padding: var(--gh-s3) var(--gh-s4);
  margin-block: var(--gh-s5);
}
.gh-done__number-label { font-size: var(--gh-t-xs); color: var(--gh-muted); display: block; text-align: start; }
.gh-done__number-value { font-size: var(--gh-t-lg); font-weight: 700; color: var(--gh-ink); letter-spacing: .02em; }
.gh-done__copy {
  flex: 0 0 auto; min-height: 44px; padding-inline: var(--gh-s4);
  display: inline-flex; align-items: center; gap: var(--gh-s2);
  background: var(--gh-white); color: var(--gh-rose-600);
  border: 1px solid var(--gh-rose-300); border-radius: var(--gh-r-pill);
  font-size: var(--gh-t-sm); font-weight: 600; cursor: pointer;
}
.gh-done__copy:hover { background: var(--gh-white); border-color: var(--gh-rose-600); color: var(--gh-rose-700); }
.gh-done__copy.is-done { color: var(--gh-success); border-color: var(--gh-success); }

.gh-done__actions { display: flex; gap: var(--gh-s3); justify-content: center; flex-wrap: wrap; }
.gh-done__actions .btn { min-height: 48px; padding-inline: var(--gh-s5); display: inline-flex; align-items: center; gap: var(--gh-s2); }
@media (max-width: 575.98px) {
  .gh-done__number { flex-direction: column; align-items: stretch; text-align: center; }
  .gh-done__number-label, .gh-done__number-value { text-align: center; }
  .gh-done__copy { justify-content: center; }
  .gh-done__actions { flex-direction: column; }
  .gh-done__actions .btn { width: 100%; }
}