/*
 * Glowlee storefront theme overrides.
 * Loaded AFTER style.css / rtl-style.css / responsive.css so it wins the cascade
 * in both LTR and RTL. Do not remove — this is the single source of truth for
 * Glowlee's brand tokens and the net-new components (mega-menu, trust badges,
 * app-download banner) added on top of the base theme.
 */

:root {
    --color-primary: #1F4B3F;       /* deep forest green — buttons, header, logo */
    --color-primary-dark: #3D7A64;  /* brighter green, used for hover/secondary detail (not a darken-on-hover — this palette's hover state is intentionally lighter against the dark primary) */
    --color-primary-light: #E7EEEA; /* pale sage tint for subtle backgrounds */
    --color-accent-gold: #C9A961;   /* badges, discounts, borders */
    --color-ink: #1A1A1A;           /* primary text */
    --color-surface: #FFFFFF;
    --color-surface-muted: #FDFBF7; /* warm cream background */
    --radius-card: 12px;
    --shadow-card: 0 4px 18px rgba(26, 26, 26, 0.08);
    --shadow-card-hover: 0 10px 28px rgba(26, 26, 26, 0.14);
    --font-display: 'Playfair Display', Georgia, serif;
}

/* ---------------------------------------------------------------------- */
/* Display type — an elegant serif for major headings gives the storefront
   a boutique-beauty feel instead of the generic sans-everywhere look.
   Body copy, nav, and Arabic text stay on Cairo (serif Arabic support is
   inconsistent, and Cairo already reads clean/premium in RTL).           */
/* ---------------------------------------------------------------------- */
html[dir="ltr"] .heading_s1 h1, html[dir="ltr"] .heading_s1 h2, html[dir="ltr"] .heading_s1 h3,
html[dir="ltr"] .heading_s4 h1, html[dir="ltr"] .heading_s4 h2, html[dir="ltr"] .heading_s4 h3,
html[dir="ltr"] .banner_content h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------- */
/* Buttons & links: darken-on-hover using the token instead of a hardcoded
   second hex, so future palette changes only touch :root.                */
/* ---------------------------------------------------------------------- */
.btn-fill-out:hover,
.btn-fill-line:hover,
.add-to-cart-icon:hover,
.header_cart_icon:hover i,
a.text-brand:hover {
    filter: brightness(0.9);
}

/* Section heading that doubles as a "see all in shop" link — a small arrow
   makes it read as clickable rather than plain text, since nothing else
   about it (color, weight) differs from a non-linked heading until hover. */
.glowlee-section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}
.glowlee-section-link::after {
    content: "\2192"; /* → , flips correctly for RTL via the transform below */
    font-size: 20px;
    line-height: 1;
    transition: transform .2s ease, color .2s ease;
}
html[dir="rtl"] .glowlee-section-link::after {
    transform: scaleX(-1);
}
.glowlee-section-link:hover {
    color: var(--color-primary);
}
.glowlee-section-link:hover::after {
    transform: translateX(4px);
}
html[dir="rtl"] .glowlee-section-link:hover::after {
    transform: scaleX(-1) translateX(4px);
}

/* ---------------------------------------------------------------------- */
/* Product card — layered card, always-visible actions (no hover-only
   icons — those don't work on touch, and hiding the primary "add to
   cart" action behind a hover was the single biggest thing making the
   catalog feel harder to browse than it needed to be). Corner wishlist
   +compare icons stay small/secondary; add-to-cart is a full-width,
   always-visible button under the price, matching a plain always-on
   pattern rather than a hover-reveal icon cluster.                     */
/* ---------------------------------------------------------------------- */
.glowlee-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .25s ease, transform .25s ease;
    background: var(--color-surface);
}
.glowlee-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}
.glowlee-card .product_img { position: relative; }
.pr_flash {
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 9px;
    background-color: var(--color-primary) !important;
}
.product_price ins {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}
.product_price del {
    color: #a7a7a7;
}

.glowlee-card-corner {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.glowlee-card-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--color-ink);
    border: none;
    box-shadow: 0 2px 8px rgba(26, 26, 26, .12);
    font-size: 15px;
}
.glowlee-card-icon-btn-sm {
    width: 28px;
    height: 28px;
    font-size: 12.5px;
    align-self: flex-end;
}
.glowlee-card-icon-btn:hover,
.glowlee-card-icon-btn.is-active {
    background: var(--color-primary);
    color: #fff;
}
.glowlee-card-addcart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 13.5px;
    font-weight: 700;
}
.glowlee-card-addcart:hover {
    background: var(--color-primary);
    color: #fff;
}
.glowlee-card-addcart.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------- */
/* Shop grid, small screens. A legacy rule in responsive.css —
   `.shop_container .col-6 { flex:0 0 100% }` inside `max-width:480px` —
   forces every product card to full width below 480px, unconditionally,
   in BOTH grid and list mode. That's the real reason the grid/list toggle
   looked like it did nothing on small phones: grid was already rendering
   as one column, so switching to "list" produced no visible change at
   all, in every browser (confirmed with a clean cold-cache request, no
   toggle interaction, straight after page load — the column was already
   100% wide by default). Restoring the intended 2-per-row grid here;
   list mode still forces 100% via style.css's own
   `.shop_container.list [class*="col-"]` rule, so this is grid-only.    */
/* ---------------------------------------------------------------------- */
@media (max-width: 480px) {
    .shop_container:not(.list) .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---------------------------------------------------------------------- */
/* Shop list view (toolbar grid/list toggle on /shop). The legacy
   `.shop_container.list` layout was float-based and keyed off markup
   (.pr_action_btn / .list_product_action_box) that the card redesign above
   removed, so the toggle's active state visibly swapped colors but the
   cards themselves never actually changed shape — most obvious on small
   screens, where grid was already one column so "list" looked identical.
   Rebuilt here as a flex row targeting the current .glowlee-card markup,
   with !important on the parts style.css still wins on (float/width),
   since both rules share the same specificity and style.css loads first
   but its cascade position doesn't matter — ours needs to reliably win.  */
/* ---------------------------------------------------------------------- */
.shop_container.list .glowlee-card {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    min-height: 168px;
}
.shop_container.list .glowlee-card:hover {
    transform: none;
}
/* Image is the product's biggest selling point in a list of rows —
   sized up from the first pass (was 120px/88px, felt like an
   afterthought thumbnail) so it actually draws the eye. */
.shop_container.list .glowlee-card .product_img {
    flex: 0 0 168px;
    width: 168px !important;
    max-width: 168px !important;
    float: none !important;
}
.shop_container.list .glowlee-card .product_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The discount badge is sized for the full-width grid card (long label,
   generous padding) — at the old 88-120px list thumbnail it was wider
   than the image itself and visibly bled onto the title text next to it.
   Dropped the "off"/"خصم" word for a compact "24%" chip that always fits
   even at the smallest breakpoint, and made it bolder/shadowed so it
   still reads as the attention-grabbing element it's meant to be. */
.shop_container.list .glowlee-card .pr_flash {
    font-size: 14px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop_container.list .glowlee-card .pr_flash_label {
    display: none;
}
.shop_container.list .glowlee-card .glowlee-card-corner {
    top: 8px;
    inset-inline-end: 8px;
    flex-direction: row;
    gap: 6px;
}
.shop_container.list .glowlee-card .glowlee-card-icon-btn {
    width: 26px;
    height: 26px;
    font-size: 12px;
    background: var(--color-surface-muted, #f8f5f3);
    box-shadow: none;
}
.shop_container.list .glowlee-card .product_info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 10px;
    padding-inline-start: 16px;
    /* Reserve room on the side .glowlee-card-corner anchors to (same
       inset-inline-end edge) so the title never runs under the icons. */
    padding-inline-end: 72px;
    text-align: start;
}
.shop_container.list .glowlee-card .product_title {
    font-size: 16px;
}
.shop_container.list .glowlee-card .pr_desc {
    display: block;
    margin-bottom: 8px;
}
.shop_container.list .glowlee-card .glowlee-card-addcart {
    width: auto;
    margin-top: 8px;
    padding-inline: 20px;
}
@media (max-width: 480px) {
    .shop_container.list .glowlee-card { min-height: 132px; }
    .shop_container.list .glowlee-card .product_img { flex-basis: 132px; width: 132px !important; max-width: 132px !important; }
    .shop_container.list .glowlee-card .product_info { padding-block: 8px; padding-inline-start: 12px; padding-inline-end: 64px; }
    .shop_container.list .glowlee-card .product_title { font-size: 14px; }
    .shop_container.list .glowlee-card .pr_flash { font-size: 12.5px; padding: 5px 8px; }
    .shop_container.list .glowlee-card .glowlee-card-corner { top: 6px; gap: 4px; }
    .shop_container.list .glowlee-card .glowlee-card-icon-btn { width: 24px; height: 24px; font-size: 11px; }
    .shop_container.list .glowlee-card .pr_desc { display: none; }
    .shop_container.list .glowlee-card .glowlee-card-addcart { font-size: 12px; padding: 7px 12px; }
}

/* ---------------------------------------------------------------------- */
/* Header — one clean row instead of the legacy 3-tier stack (colored
   utility bar + logo/search bar + separate button-styled category nav).
   Plain-text nav links, a compact icon cluster, language/currency folded
   into small dropdowns instead of a dedicated colored strip. Modeled on
   minimal single-row boutique headers — the goal is fewer visual layers,
   bigger tap targets, nothing that needs a hover to be discoverable.    */
/* ---------------------------------------------------------------------- */
.glowlee-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--color-surface);
    border-bottom: 1px solid #EFEAE3;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.glowlee-header-row {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 18px 0;
    transition: padding .25s ease;
}
/* Scrolled state (.glowlee-header-scrolled toggled by navbar.blade.php's
   scroll listener once the page has moved past the hero). A flat sticky
   bar with no visual change on scroll reads as broken, not fixed — the
   shadow is what actually tells the user it's now floating above the
   page, and the tighter row + thin gold rule underneath is the "premium
   boutique" cue the rest of the storefront already uses (badges,
   card borders) rather than just a plain flat white strip. */
.glowlee-header.glowlee-header-scrolled {
    border-bottom-color: transparent;
    box-shadow: 0 8px 24px rgba(26, 26, 26, .1);
}
.glowlee-header.glowlee-header-scrolled .glowlee-header-row {
    padding: 11px 0;
}
.glowlee-header.glowlee-header-scrolled::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent-gold), transparent);
}
.glowlee-header-logo {
    display: inline-flex;
    align-items: center;
}
.glowlee-logo-text {
    color: var(--color-primary);
    letter-spacing: .01em;
}
.glowlee-header-nav {
    align-items: center;
    gap: 26px;
    margin-inline-end: auto;
}
.glowlee-header-navlink {
    background: none;
    border: none;
    padding: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-ink);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.glowlee-header-navlink:hover,
.glowlee-header-navlink.active {
    color: var(--color-primary);
}
.glowlee-header-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}
.glowlee-header-icon-btn {
    display: inline-flex;
}
.glowlee-header-icon-link,
button.glowlee-header-icon-btn,
.glowlee-lang-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--color-ink);
    background: none;
    border: none;
    font-size: 18px;
    text-decoration: none;
}
.glowlee-lang-toggle {
    font-size: 13px;
    font-weight: 700;
}
.glowlee-header-icon-link:hover,
button.glowlee-header-icon-btn:hover,
.glowlee-lang-toggle:hover {
    background: var(--color-surface-muted);
    color: var(--color-primary);
}
.glowlee-header-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 50px;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}
.glowlee-mobile-toggle {
    border: none;
    background: none;
    font-size: 24px;
    color: var(--color-ink);
    padding: 0;
}

/* Expanding search bar */
.glowlee-search-bar {
    display: none;
    padding: 0 0 16px;
}
.glowlee-search-bar.is-open { display: block; }
.glowlee-search-form {
    display: flex;
    align-items: center;
    border: 1px solid #E5DFD6;
    border-radius: 999px;
    padding: 4px 6px 4px 18px;
    background: var(--color-surface-muted);
}
.glowlee-search-form input {
    flex: 1;
    border: none;
    background: none;
    font-size: 14px;
    padding: 8px 0;
    outline: none;
}
.glowlee-search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
}

/* Mobile nav drawer */
.glowlee-mobile-nav { padding: 6px 0 18px; }
.glowlee-mobile-nav .navbar-nav { list-style: none; padding: 0; margin: 0; }
.glowlee-mobile-nav .nav-link {
    padding: 12px 4px;
    font-weight: 600;
    color: var(--color-ink);
    border-bottom: 1px solid #F3EFE8;
}
.glowlee-mobile-nav .nav-link.active { color: var(--color-primary); }
/* The "All Categories" submenu inside the mobile drawer is a plain
   Bootstrap .dropdown-menu, which:
   1) inherited the legacy theme's unconditional dark navbar-dropdown
      background (#252A2C — meant for the original dark-skin header,
      never restyled after the light-header redesign), clashing hard
      with the rest of this drawer.
   2) floated via position:absolute (Bootstrap's default), so inside a
      narrow drawer it overlaid on top of the page instead of pushing
      the rest of the list down — it visibly extended past the drawer's
      own edge over the hero image.
   3) its inner <ul> is a second nesting level with no list-style reset
      of its own (the reset above only covers the outer .navbar-nav), so
      the browser's default second-level "circle" bullet showed up as a
      stray "o" beside every category name.
   Fixed as a static, in-flow, indented sub-list instead of a floating
   panel — the correct pattern for a dropdown living inside a drawer. */
.glowlee-mobile-nav .dropdown-menu {
    position: static;
    float: none;
    display: none;
    width: 100%;
    background: var(--color-surface-muted);
    border: none;
    box-shadow: none;
    border-radius: 8px;
    margin: 2px 0 6px;
    padding: 4px;
}
.glowlee-mobile-nav .dropdown-menu.show { display: block; }
.glowlee-mobile-nav .dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.glowlee-mobile-nav .dropdown-item {
    color: var(--color-ink);
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 500;
    background: none;
    border: none;
    border-radius: 6px;
}
.glowlee-mobile-nav .dropdown-item:hover,
.glowlee-mobile-nav .dropdown-item:focus,
.glowlee-mobile-nav .dropdown-item.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.glowlee-mobile-nav .dropdown-toggle::after {
    float: inline-end;
    margin-top: 8px;
}

@media (max-width: 991px) {
    .glowlee-header-row { gap: 14px; padding: 14px 0; }
}

/* ---------------------------------------------------------------------- */
/* Mega-menu (replaces the flat "All Categories" list / single-column
   dropdowns). Pure CSS hover/focus panel — no extra JS dependency.       */
/* ---------------------------------------------------------------------- */
.glowlee-megamenu {
    position: relative;
}
.glowlee-megamenu > .glowlee-megamenu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.glowlee-megamenu-panel {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 1050;
    display: none;
    min-width: 720px;
    max-width: 960px;
    background: var(--color-surface);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: var(--shadow-card-hover);
    padding: 24px;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.glowlee-megamenu-col-title {
    display: block;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 10px;
    font-size: 15px;
}
.glowlee-megamenu-col-title:hover { color: var(--color-primary-dark); }
.glowlee-megamenu-sublink {
    display: block;
    color: #5b5f66;
    font-size: 13.5px;
    padding: 4px 0;
}
.glowlee-megamenu-sublink:hover { color: var(--color-primary-dark); }
.glowlee-megamenu-close { display: none; }
body.glowlee-menu-open { overflow: hidden; }

/* Desktop/tablet: hover or click opens a dropdown panel anchored under the button. */
@media (min-width: 992px) {
    .glowlee-megamenu:hover .glowlee-megamenu-panel,
    .glowlee-megamenu:focus-within .glowlee-megamenu-panel,
    .glowlee-megamenu.is-open .glowlee-megamenu-panel {
        display: grid;
    }
}

/* Mobile: the panel used to just flow inside its parent column (25% viewport
   width there, per the legacy grid), squeezing every category into an
   unreadable sliver on the right. It's now a full-screen scrollable overlay
   instead, opened only by tap (no :hover — touch devices don't have it) and
   closed via the visible × button, tapping the backdrop, or the toggle again. */
@media (max-width: 991px) {
    .glowlee-megamenu-panel {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2000;
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 64px 20px 24px;
        overflow-y: auto;
    }
    .glowlee-megamenu.is-open .glowlee-megamenu-panel {
        display: block;
    }
    .glowlee-megamenu.is-open .glowlee-megamenu-panel > div {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0eae7;
    }
    .glowlee-megamenu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 14px;
        inset-inline-end: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--color-surface-muted);
        color: var(--color-ink);
        font-size: 20px;
        z-index: 2001;
        border: none;
    }
}

/* ---------------------------------------------------------------------- */
/* Trust badge row (payment / installment messaging) — visual only,       */
/* generic wording, no third-party BNPL logos.                            */
/* ---------------------------------------------------------------------- */
.glowlee-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding: 18px 12px;
    background: var(--color-surface-muted);
    border-radius: var(--radius-card);
}
.glowlee-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink);
    background: var(--color-surface);
    border-radius: 999px;
    padding: 8px 16px;
    box-shadow: var(--shadow-card);
}
.glowlee-trust-badge i {
    color: var(--color-primary);
    font-size: 16px;
}

/* ---------------------------------------------------------------------- */
/* Sale banner text legibility fix — the legacy .overlay_bg_40 utility only
   tints the WHOLE image a flat 40% black, which isn't reliably enough
   contrast for the always-white banner title/button against a bright
   product photo (confirmed unreadable against a light marble background).
   First attempt used a gradient that faded to fully transparent at the
   top of the text box — worked for 3 of 4 banners but still failed on the
   brightest photo, because the title sits in the weak/transparent part of
   the fade (confirmed via computed styles: the gradient WAS identical on
   all four, the remaining one is purely down to that photo being lighter
   than the others). This version never fades below 45% black, so there's
   always a contrast floor regardless of the photo underneath.            */
/* ---------------------------------------------------------------------- */
.shop_bn_content {
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .7) 60%, rgba(0, 0, 0, .45) 100%);
    padding-top: 30px !important;
    padding: 14px !important;
}

/* Sale banners are now a compact 3-across strip (170px tall, always one
   row — was col-md-4 which stacked to full-width on mobile, tripling this
   section's mobile height on top of the earlier fixed-height problem).
   Text needs to shrink to fit that shorter, narrower tile.               */
.shop_title {
    font-size: 15px;
    margin-bottom: 4px;
    line-height: 1.25;
}
.shop_subtitle {
    font-size: 11px;
    margin-bottom: 2px;
}
.shop_bn_content .btn.btn-white {
    padding: 5px 10px;
    font-size: 10.5px;
}
@media (max-width: 767px) {
    .shop_title { font-size: 11.5px; }
    .shop_subtitle { font-size: 9px; }
    .shop_bn_content .btn.btn-white { padding: 3px 6px; font-size: 8.5px; }
}

/* ---------------------------------------------------------------------- */
/* Wide sale banner (the single full-width banner between "Exclusive
   Products" and "Trending Products") — was plain `width:100%` on the
   image with no height/aspect-ratio control, so it inherited the source
   photo's native ratio straight through. That photo is 1600×400 (4:1);
   on a 375px-wide phone that's a ~94px sliver — too short to read the
   overlay text, and next to nothing like the polished, elevated card
   look the rest of the homepage (product cards, category tiles) has.

   aspect-ratio here progressively widens with viewport instead: tall
   enough on mobile to actually read as a banner, opening up to the
   photo's real 4:1 ratio at the sizes where that's already a good fit.
   Also gets the same rounded-corner + shadow-lift-on-hover treatment
   as .glowlee-card, so it reads as part of the same design system
   instead of a leftover unstyled legacy element.                       */
/* ---------------------------------------------------------------------- */
.glowlee-wide-banner .banner_img {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .25s ease, transform .25s ease;
}
.glowlee-wide-banner:hover .banner_img {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}
.glowlee-wide-banner .banner_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 576px) {
    .glowlee-wide-banner .banner_img { aspect-ratio: 16 / 9; }
}
@media (min-width: 768px) {
    .glowlee-wide-banner .banner_img { aspect-ratio: 21 / 9; }
}
@media (min-width: 992px) {
    .glowlee-wide-banner .banner_img { aspect-ratio: 3 / 1; }
}
@media (min-width: 1200px) {
    .glowlee-wide-banner .banner_img { aspect-ratio: 4 / 1; }
}

/* Its own type scale, roomier than the 3-column compact banners' —
   this one spans the full container width, so the cramped mobile sizes
   above (sized for a ~1/3-width tile) left it looking like an
   afterthought instead of the section's own moment. Specificity (two
   classes) wins over the shared .shop_title rules regardless of the
   media-query source order. */
.glowlee-wide-banner .shop_bn_content {
    padding: 22px 26px !important;
}
.glowlee-wide-banner .shop_title {
    font-size: 24px;
    margin-bottom: 8px;
}
.glowlee-wide-banner .shop_subtitle {
    font-size: 13px;
    letter-spacing: .04em;
}
.glowlee-wide-banner .shop_bn_content .btn.btn-white {
    padding: 9px 20px;
    font-size: 12.5px;
    margin-top: 6px;
}
@media (max-width: 767px) {
    .glowlee-wide-banner .shop_bn_content { padding: 16px 18px !important; }
    .glowlee-wide-banner .shop_title { font-size: 18px; }
    .glowlee-wide-banner .shop_subtitle { font-size: 11px; }
    .glowlee-wide-banner .shop_bn_content .btn.btn-white { padding: 7px 15px; font-size: 11px; }
}

/* Tighter vertical rhythm for the compact banner + category-tile strips —
   the legacy small_pt/small_pb/pb_20 utilities (50/50/20px) were sized for
   much taller sections; halved here to match. */
.glowlee-tight-section.small_pt { padding-top: 26px; }
.glowlee-tight-section.small_pb { padding-bottom: 26px; }
.glowlee-tight-section.pb_20 { padding-bottom: 10px; }

/* ---------------------------------------------------------------------- */
/* Homepage "Shop by Category" — 3 square photo cards in a single row.
   Kept to exactly 3 (was 6 across 2 rows, which tripled this section's
   height for no real benefit — the full category list is one tap away
   via the mega-menu anyway). Real elevated cards (white frame, shadow,
   square image, caption below) rather than a flat full-bleed tile with
   a text overlay — bigger and more deliberately "product card"-like.   */
/* ---------------------------------------------------------------------- */
.glowlee-cat-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.glowlee-cat-tile {
    display: block;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .25s ease, transform .25s ease;
}
.glowlee-cat-tile:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}
.glowlee-cat-tile-img {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.glowlee-cat-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.glowlee-cat-tile:hover .glowlee-cat-tile-img img {
    transform: scale(1.06);
}
.glowlee-cat-tile-label {
    display: block;
    padding: 16px 10px;
    text-align: center;
    color: var(--color-ink);
    font-weight: 700;
    font-size: 17px;
    border-top: 1px solid #F3EFE8;
}
@media (max-width: 767px) {
    .glowlee-cat-tiles { gap: 10px; }
    .glowlee-cat-tile-label { font-size: 12.5px; padding: 10px 6px; }
}

/* ---------------------------------------------------------------------- */
/* Homepage brand carousel. The legacy `.cl_logo img` rule (width:163px,
   opacity:.7) was built for wide photographic logotypes; our generated
   circular lettermark SVGs are square, so at 163px they rendered as huge
   163×163 circles — visibly bigger than the product photos above them and
   the biggest thing on the section. Capped like the /brands cards.      */
/* ---------------------------------------------------------------------- */
.client_logo .cl_logo img {
    width: 72px;
    height: 72px;
    max-width: 100%;
    object-fit: contain;
    opacity: 1;
}
@media (max-width: 480px) {
    .client_logo .cl_logo img { width: 56px; height: 56px; }
}

/* ---------------------------------------------------------------------- */
/* Brand landing pages (/brands, /brand/{slug}).                          */
/* ---------------------------------------------------------------------- */
.glowlee-brand-card {
    display: block;
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 20px 16px;
    transition: box-shadow .25s ease, transform .25s ease;
}
.glowlee-brand-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}
.glowlee-brand-card-logo {
    /* Was 64px — visually dominated the card next to the brand name, which
       is the part users actually read. A lettermark is a placeholder
       accent, not the focal point, so it's sized like one now. */
    height: 40px;
    width: 40px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.glowlee-brand-card-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.glowlee-brand-card-name {
    font-weight: 700;
    color: var(--color-ink);
    font-size: 14.5px;
}
.glowlee-brand-card-count {
    color: #8a8f98;
    font-size: 12px;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------- */
/* Mini-cart dropdown — its width (320px) was scoped in the legacy theme to
   `.navbar-nav .dropdown-menu.cart_box`, an ancestor class the rewritten
   header no longer has, so it silently fell back to Bootstrap's generic
   10rem dropdown default — product name/price/buttons all wrapped into an
   unreadable narrow column. Self-contained now, no ancestor dependency.  */
/* ---------------------------------------------------------------------- */
.cart_box.dropdown-menu {
    width: 320px;
    min-width: 320px;
    max-width: calc(100vw - 24px);
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover);
    overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Footer — tighter widget spacing, and the currency switcher + social
   icons combined into one compact row instead of two separate headed
   widgets (main height fix was collapsing the old 5-column row, which
   summed to 16/12 grid columns and silently wrapped a whole widget onto
   a new line, stretching every column to match its height).             */
/* ---------------------------------------------------------------------- */
.footer_top .widget_title {
    margin-bottom: 14px;
}
.footer_top .widget + .widget {
    margin-top: 18px;
}
.glowlee-footer-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.glowlee-footer-meta .social_icons {
    margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Customer reviews (replaces the app-download banner — no real app to
   link to, and social proof does more to move a browsing visitor toward
   buying than a promo for something that doesn't exist). Full-bleed
   brand-green band, deliberately the boldest-colored section on the page
   outside the hero, so it reads as a "stop and read this" moment rather
   than blending into the white sections around it. Cream cards on the
   dark green give strong contrast for both the star ratings (gold) and
   the review text itself.                                               */
/* ---------------------------------------------------------------------- */
.glowlee-reviews {
    background: linear-gradient(160deg, var(--color-primary) 0%, #163A30 100%);
    padding: 56px 0 60px;
    margin: 8px 0;
}
.glowlee-reviews .heading_s1 h2 {
    color: #fff;
}
.glowlee-reviews-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, .72);
    margin: -8px 0 30px;
    font-size: 15px;
}
.glowlee-review-card {
    position: relative;
    background: var(--color-surface-muted);
    border-radius: var(--radius-card);
    padding: 30px 26px 24px;
    height: 100%;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
.glowlee-review-quote {
    position: absolute;
    top: 6px;
    inset-inline-end: 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 72px;
    line-height: 1;
    color: var(--color-accent-gold);
    opacity: .35;
    pointer-events: none;
}
.glowlee-review-stars {
    color: var(--color-accent-gold);
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.glowlee-review-text {
    color: var(--color-ink);
    font-size: 14.5px;
    line-height: 1.8;
    min-height: 95px;
    margin-bottom: 18px;
}
.glowlee-review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(26, 26, 26, .08);
}
.glowlee-review-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.glowlee-review-author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}
.glowlee-review-author-meta strong {
    color: var(--color-ink);
    font-size: 14px;
}
.glowlee-review-author-meta span {
    color: #8a8f98;
    font-size: 12.5px;
}
.glowlee-reviews-slider .owl-dots { margin-top: 30px; }
.glowlee-reviews-slider .owl-dots .owl-dot span {
    background: rgba(255, 255, 255, .35);
}
.glowlee-reviews-slider .owl-dots .owl-dot.active span {
    background: var(--color-accent-gold);
}
@media (max-width: 767px) {
    .glowlee-reviews { padding: 40px 0 44px; }
    .glowlee-review-card { padding: 24px 20px 20px; }
    .glowlee-review-quote { font-size: 56px; }
}

/* ---------------------------------------------------------------------- */
/* Preloader. Shown on every full-page navigation (server-rendered
   storefront, not an SPA — every link click is a real page load). The
   generic 3-dot spinner from the base theme worked but read as an
   anonymous "something's loading, or maybe stuck?" screen; a real wait
   deserves a branded moment instead of a bare spinner, and it needed to
   actually go away quickly once the page was ready (the multi-second
   artificial delay that used to hold it on screen is fixed separately,
   in scripts.js — this only covers how it looks while it's up).        */
/* ---------------------------------------------------------------------- */
.preloader {
    background: var(--color-surface-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.glowlee-preloader {
    text-align: center;
}
.glowlee-preloader-word {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--color-primary);
    animation: glowlee-preloader-pulse 1.5s ease-in-out infinite;
}
.glowlee-preloader-bar {
    display: block;
    width: 110px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: 999px;
    background: var(--color-primary-light);
    overflow: hidden;
}
.glowlee-preloader-bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-gold));
    animation: glowlee-preloader-sweep 1.1s ease-in-out infinite;
}
@keyframes glowlee-preloader-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.95); }
}
@keyframes glowlee-preloader-sweep {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(360%); }
}
@media (prefers-reduced-motion: reduce) {
    .glowlee-preloader-word { animation: none; }
    .glowlee-preloader-bar span { animation: none; width: 100%; }
}

/* ---------------------------------------------------------------------- */
/* Cart / wishlist / compare AJAX — in-flight state + toast confirmations.
   See the "GLOWLEE — Cart / Wishlist / Compare" block appended to
   theme/js/scripts.js. Buttons already have an .is-active look defined
   above (.glowlee-card-icon-btn.is-active, .glowlee-card-addcart.is-active)
   — that now reflects real, live cart/wishlist/compare membership instead
   of only ever appearing right after a fresh page load.                   */
/* ---------------------------------------------------------------------- */
.js-toggle-form.is-loading button {
    opacity: .55;
    cursor: wait;
    pointer-events: none;
}

/* Cart page qty stepper — live update in flight (see the inline script in
   shop_cart.blade.php). Not a .js-toggle-form (it fires from the qty
   input, not a form submit), so it gets its own tiny loading state. */
.shop_cart_table tr.is-updating .quantity,
.shop_cart_table tr.is-updating .product-subtotal {
    opacity: .5;
    transition: opacity .15s ease;
}

/* Wishlist heart used to only ever go red on a fresh page load (server-
   rendered inline style); now it toggles live, so the color has to come
   from the .is-active class instead of an inline style that AJAX can't reach. */
.btn-line-fill.is-active .icon-heart,
.pr_action_btn .btn-reset.is-active .icon-heart {
    color: #e74c3c;
}
.pr_action_btn .btn-reset.is-active {
    color: var(--color-primary);
}
.btn-addtocart.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.glowlee-toast-host {
    position: fixed;
    z-index: 99999;
    bottom: 20px;
    inset-inline-end: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100vw - 40px);
    pointer-events: none;
}
.glowlee-toast {
    padding: 12px 18px;
    border-radius: 8px;
    background: var(--color-ink);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-card-hover);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}
.glowlee-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.glowlee-toast-success { background: var(--color-primary); }
.glowlee-toast-error   { background: #B3261E; }
@media (max-width: 480px) {
    .glowlee-toast-host {
        inset-inline: 20px;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------- */
/* Static content pages (About / FAQ / Terms / Contact) — these were still
   on the legacy theme's generic defaults (a pale-blue section tint that
   isn't in the brand palette anywhere else, an unstyled Bootstrap
   accordion, bare paragraph text with no card treatment) instead of the
   forest-green/gold/cream system + elevated-card look the rest of the
   storefront has had since the retheme. Scoped overrides below instead of
   blade rewrites — .bg_light_blue2 / .icon_box_style4 / .accordion_style1 /
   .term_conditions / .contact_style3 are each used on exactly one page
   (confirmed via grep), so redefining them here is safe and keeps the
   existing markup untouched.                                             */
/* ---------------------------------------------------------------------- */

/* About → "Why Choose Us" section backdrop: pale sage instead of the
   off-brand pale blue, so the white icon cards sit on the same family of
   tone as every other muted section on the site. */
.bg_light_blue2 {
    background-color: var(--color-primary-light) !important;
}
.icon_box_style4 {
    border-radius: var(--radius-card);
    transition: box-shadow .25s ease, transform .25s ease;
}
.icon_box_style4.box_shadow1 {
    box-shadow: var(--shadow-card);
}
.icon_box_style4.box_shadow1:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* FAQ accordion — was a completely unstyled Bootstrap card (no radius, no
   shadow, default black chevron). Elevated-card look + brand-green accent
   on the open question, matching how every other "card" on the site
   (product cards, the icon boxes above) already reads. */
.accordion_style1.accordion .card {
    background: var(--color-surface);
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card);
    padding: 4px 22px;
    transition: box-shadow .25s ease;
}
.accordion_style1.accordion .card:hover {
    box-shadow: var(--shadow-card-hover);
}
.accordion_style1 .card-header a {
    color: var(--color-ink);
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.accordion_style1 .card-header a[aria-expanded="true"] {
    color: var(--color-primary);
}
.accordion_style1 .card-header a::after {
    color: var(--color-primary);
}
.accordion_style1 .card-body {
    padding-top: 0 !important;
    color: #5a5a5a;
}

/* Terms & Conditions — was bare text with no container at all. A capped
   reading width (long lines at full container width are hard to read) in
   an elevated card, same family as everything above. */
.glowlee-legal-card {
    max-width: 860px;
    margin: 0 auto;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 40px 44px;
}
.glowlee-legal-card .term_conditions h6 {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
}
.glowlee-legal-card .term_conditions p,
.glowlee-legal-card .term_conditions li {
    font-size: 15px;
    line-height: 1.8;
    color: #4a4a4a;
}
@media (max-width: 575px) {
    .glowlee-legal-card { padding: 28px 22px; }
}

/* Contact — the map placeholder was a flat gray box with a barely-rounded
   corner (4px, vs. the --radius-card 12px used everywhere else); brand
   cream tint + matching radius so it reads as part of the same page
   instead of a leftover default. */
.glowlee-map-placeholder {
    height: 400px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
}
.glowlee-map-placeholder i {
    color: var(--color-primary);
}

/* Scroll-to-top vs. the floating WhatsApp bubble — both are pinned to the
   same corner (they mirror together in RTL: .scrollup via rtl-style.css,
   WhatsApp via the inline $isRtl check in app.blade.php), so with both at
   a ~20-24px bottom offset .scrollup was rendering directly on top of the
   56px WhatsApp bubble once scrolling revealed it. Lifted clear of it
   whenever the bubble is actually on the page (see the has-whatsapp-float
   body class) — doesn't touch left/right, so this holds in both LTR and
   RTL without duplicating the mirroring logic here. */
body.has-whatsapp-float .scrollup {
    bottom: 92px;
}