/*!*****************************************************************************
  Vivace Collections — "Emerald, Royal Gold & White"
  ----------------------------------------------------------------------------
  The storefront ships style.css, a pre-built bundle (no SCSS source in this
  repo, so it cannot be recompiled). This file is therefore a deliberate,
  self-contained THEME LAYER that is linked immediately after style.css and
  retunes the palette plus the components where the bundle hardcodes a colour.

  Three brand colours, used consistently:

    EMERALD       #064E3B  rgb(6, 78, 59)     brand dark — headings, nav ink,
                                              footer, announcement bar, CTAs
    LIGHT GOLD    #F3ECD0  rgb(243, 236, 208)  the HEADER BAR (pale, not the
                                              saturated accent gold)
    ROYAL GOLD    #D4AF37  rgb(212, 175, 55)  accent — hovers, prices,
                                              underlines, badges
    WHITE         #FFFFFF                     page canvas, cards, inputs,
                                              panels, modals

  IVORY #FAF6ED is ink that sits ON emerald (footer copy, announcement bar,
  logo invert on the footer) — it is not a page surface.

  How the retune works: style.css drives ~300 declarations off the CSS custom
  properties --theme-default (accent) and --light-white / --light-background /
  --box-background / --border (surfaces). Re-declaring those here — same
  specificity as the bundle, later load order — recolours the whole site
  without touching the 17k-line bundle. The bundled surface tokens are set to
  pure white, and the `--green-*` names are kept as white aliases so the
  component rules further down stay readable. --white keeps pure white for its
  87 ink usages on dark and gold.

  The bundle's own dark mode (body.dark, toggled by theme-setting.js) is
  preserved: the `.dark` guard restores the dark surfaces and repoints the
  surface aliases at dark values, because `:root .layout-4` would otherwise
  out-specify the bundle's `.dark` block.
  *****************************************************************************/

/* ───────────────────────────────────────────────────────────────────────────
   1. Palette tokens
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --emerald: 6, 78, 59;
    --emerald-deep: 4, 56, 42;
    --emerald-700: 4, 120, 87;
    --emerald-soft: 232, 240, 235;

    --gold: 212, 175, 55;
    --gold-deep: 166, 124, 20;
    --gold-soft: 232, 210, 140;

    /* Light gold — the header bar. A pale, soft gold: deep enough to read as
       gold, light enough that the emerald ink on it stays high-contrast. */
    --gold-light: 243, 236, 208;
    --gold-light-top: 251, 249, 239;
    --gold-light-deep: 237, 228, 194;

    /* Surface aliases — all white, kept under their original names so every
       component rule below still reads clearly. */
    --green-page: 255, 255, 255;
    --green-light: 255, 255, 255;
    --green-band: 255, 255, 255;
    --green-soft: 233, 233, 233;

    /* Warm ivory — ink on emerald surfaces only, never a page surface now. */
    --ivory: 250, 246, 237;
    --ivory-2: 244, 239, 226;

    /* Accent surfaces read by the bundle → royal gold */
    --theme-default: 212, 175, 55;
    --star-yellow: 212, 175, 55;

    /* Bundle surface tokens → white. 55 rules read --light-white as a
       background; setting it here covers all of them at once. */
    --light-white: 255, 255, 255;
    --light-background: 255, 255, 255;
    --box-background: 255, 255, 255;
    --border: 238, 238, 238;
    --light-border: 233, 233, 233;

    /* Headings → emerald (Bootstrap reads --bs-heading-color) */
    --bs-heading-color: #064e3b;
    --heading-color: #064e3b;
}

/* Body always carries a layout class in this app (see website/main/app.blade.php).
   Matching the bundle's `:root .layout-N` specificity and loading later is what
   makes these declarations win. */
:root .layout-1,
:root .layout-2,
:root .layout-3,
:root .layout-4 {
    --theme-default: 212, 175, 55;
    --light-white: 255, 255, 255;
    --light-background: 255, 255, 255;
    --box-background: 255, 255, 255;
    --light-border: 233, 233, 233;
    --border: 238, 238, 238;
    --bs-heading-color: #064e3b;
    --green-page: 255, 255, 255;
    --green-light: 255, 255, 255;
    --green-band: 255, 255, 255;
    --green-soft: 233, 233, 233;
}

/* 1a. Dark-mode guard — restores the bundle's dark surfaces on top of the
   layout retune above (same values as style.css `.dark`), and repoints the
   green tokens at dark values so every rule that paints a light-green surface
   keeps working in dark mode. */
:root .layout-1.dark,
:root .layout-2.dark,
:root .layout-3.dark,
:root .layout-4.dark {
    --light-white: 26, 25, 25;
    --white: 223, 223, 223;
    --black: 255, 255, 255;
    --theme-font-color: 255, 255, 255;
    --bs-heading-color: #fff;
    --bs-body-color: #a3a3a3;
    --dark-color: 222, 222, 222;
    --light-background: 242, 242, 242;
    --box-background: 47, 47, 47;
    --light-border: 40, 40, 40;
    --border: 58, 57, 57;
    --green-page: 26, 25, 25;
    --green-light: 47, 47, 47;
    --green-band: 40, 40, 40;
    --green-soft: 58, 57, 57;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Canvas, text, rhythm
   ─────────────────────────────────────────────────────────────────────────── */
body {
    background-color: rgb(var(--green-page));
}

::selection {
    background-color: rgba(var(--emerald), 1);
    color: rgb(var(--ivory));
}

/* Light-green bands instead of flat white on the big light blocks.
   Scoped to <main>: the footer's own sections also carry .section-b-space, and
   painting those covers the emerald footer surface (which then leaves
   ivory-on-ivory links). The footer band rules below reset them explicitly. */
main .section-b-space,
main .bg-light,
main .light-bg {
    background-color: rgb(var(--green-band));
}

/* Emerald headings with a gold hairline under section titles. */
.title h3,
.title-1 h3,
.title-section h3 {
    color: rgb(var(--emerald));
    font-weight: 600;
}

.title-1 p {
    color: rgb(var(--gold-deep));
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.title-1 p span {
    background-color: rgba(var(--gold), 1);
}

.title svg {
    stroke: rgba(var(--gold), 1);
}

/* ───────────────────────────────────────────────────────────────────────────
   3. Announcement marquee — deep emerald with gold separators
   (the colour literals also live in app.blade.php; kept in sync there)
   ─────────────────────────────────────────────────────────────────────────── */
.vc-announce {
    background: linear-gradient(90deg,
        rgb(var(--emerald-deep)) 0%,
        rgb(var(--emerald)) 50%,
        rgb(var(--emerald-deep)) 100%);
    color: rgb(var(--ivory));
    border-bottom: 1px solid rgba(var(--gold), .45);
}

.vc-ann-item {
    color: rgb(var(--ivory));
}

.vc-ann-sep {
    color: rgb(var(--gold));
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Header — LIGHT GOLD BAR with emerald ink
   ───────────────────────────────────────────────────────────────────────────
   The header bar is LIGHT gold — a pale, soft gold (--gold-light), not the
   saturated accent gold used for prices and hovers. A shallow gradient gives
   it depth under the emerald announcement strip and over the white page, while
   keeping it clearly light. Every piece of header ink — nav labels, carets,
   icons, the cart count — is deep emerald, which on light gold reads at a very
   high contrast ratio. */
header {
    background-color: rgb(var(--gold-light));
    background-image: linear-gradient(180deg,
        rgb(var(--gold-light-top)) 0%,
        rgb(var(--gold-light)) 50%,
        rgb(var(--gold-light-deep)) 100%);
    border-bottom: 1px solid rgba(var(--emerald), .22);
}

/* The bundle paints .sub_header with --light-background (white) and
   .top_header with a dark bar; both must be transparent so the gold shows. */
header .top_header,
header .sub_header {
    background-color: transparent;
}

header .header-1 .main-menu nav .nav-menu > li .nav-link,
header .header-1 .main-menu nav .nav-menu > li .nav-link span {
    color: rgb(var(--emerald-deep));
    font-weight: 600;
}

header .header-1 .main-menu nav .nav-menu > li .nav-link:hover,
header .header-1 .main-menu nav .nav-menu > li.active .nav-link {
    color: rgb(var(--emerald));
}

/* Hover rule under a nav label: deep emerald reads on light gold. */
header .header-1 .main-menu nav .nav-menu > li .nav-link:before {
    background-color: rgb(var(--emerald-deep));
}

header .sub_header ul li a,
header .sub_header ul li button,
header .sub_header ul .onhover-div button,
header .sub_header ul .onhover-div .shoping-prize,
header .sub_header ul li .shoping-prize {
    color: rgb(var(--emerald-deep));
}

header .sub_header ul li a:hover,
header .sub_header ul li button:hover,
header .sub_header ul .onhover-div:hover .shoping-prize,
header .sub_header ul li .shoping-prize:hover {
    color: rgb(var(--emerald));
}

/* Icons inherit their own stroke; force them dark to sit on light gold. */
header .sub_header [data-lucide],
header .header-1 .main-menu nav .nav-menu > li .nav-link [data-lucide],
header .toggle-nav .sidebar-bar {
    color: rgb(var(--emerald-deep));
}

/* The "🔥 Sale" label keeps its own hot colour, but on light gold it needs to
   be the deeper tone to stay readable. */
header .header-1 .main-menu nav .nav-menu > li .nav-link[style*="e74c3c"] {
    color: #a3301f !important;
}

/* Mobile slide-out nav + bottom bar */
.mobile-back {
    background-color: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

header .mobile-fix-option {
    background-color: rgb(var(--emerald)) !important;
}

header .mobile-fix-option ul li a,
header .mobile-fix-option ul li a .iconsax {
    color: rgba(var(--ivory), .88) !important;
    --Iconsax-Color: rgba(var(--ivory), .88);
}

header .mobile-fix-option ul li a.active,
header .mobile-fix-option ul li a:hover {
    color: rgb(var(--gold)) !important;
}

/* Dropdown / mega-menu panels */
.nav-submenu {
    background-color: rgb(var(--ivory)) !important;
    border: 1px solid rgba(var(--gold), .35) !important;
    box-shadow: 0 12px 30px rgba(var(--emerald), .12) !important;
}

.nav-submenu li a {
    color: rgb(var(--emerald));
}

.nav-submenu li a:hover {
    color: rgb(var(--gold-deep));
    background-color: rgba(var(--gold), .08);
}

/* ───────────────────────────────────────────────────────────────────────────
   5. Search modal — emerald frame, gold submit
   ─────────────────────────────────────────────────────────────────────────── */
.search-modal-panel,
.search-modal-input-wrap {
    border-color: rgba(var(--gold), .35) !important;
}

.search-submit-btn {
    background-color: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.search-submit-btn:hover {
    background-color: rgb(var(--emerald-700)) !important;
}

.search-clear-btn,
.search-esc-btn {
    color: rgb(var(--emerald)) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   6. Footer — deep emerald, ivory text, gold accents
   ─────────────────────────────────────────────────────────────────────────── */
/* The footer's inner <section class="section-b-space footer-1"> must stay
   transparent so the emerald surface below it shows through. */
footer .section-b-space,
footer .footer-1,
footer.footer-2 > .footer-1 {
    background-color: transparent !important;
}

footer.layout-light,
footer.footer-2 {
    background-color: rgb(var(--emerald-deep));
    background-image: linear-gradient(180deg,
        rgb(var(--emerald)) 0%,
        rgb(var(--emerald-deep)) 100%);
    color: rgb(var(--ivory));
    border-top: 3px solid rgba(var(--gold), .55);
}

footer .footer-content h5,
footer .footer-title h5,
footer .footer-content .footer-title h5 {
    color: rgb(var(--ivory));
}

footer .footer-content .footer-title h5:after,
footer .footer-2 > .footer-1 .footer-title h5:after {
    background-color: rgba(var(--gold), 1);
}

footer .footer-content ul li a,
footer .footer-content ul li h6,
footer .footer-content p,
footer .footer-contact-item,
footer .footer-end h6,
footer .sub-footer .footer-end h6,
footer .footer-content ul li .iconsax {
    color: rgba(var(--ivory), .82) !important;
    --Iconsax-Color: rgba(var(--ivory), .82);
}

footer .footer-content ul li:hover a,
footer .footer-content ul li a:hover {
    color: rgb(var(--gold)) !important;
}

/* The bundled footer is light, so links relying on colour:inherit read as
   near-black once the surface goes emerald. */
footer a {
    color: inherit;
}

footer .sub-footer {
    border-top: 1px solid rgba(var(--gold), .28);
}

/* Logo on the homepage/header is a dark artwork; force it light inside the
   emerald footer only, so the footer mark stays legible. */
footer .footer-logo img,
footer .brand-logo img {
    filter: brightness(0) invert(1);
}

footer .footer-content .social-icon > li a {
    background-color: rgba(var(--ivory), .12);
    border: 1px solid rgba(var(--gold), .35);
}

footer .footer-content .social-icon > li a i {
    color: rgb(var(--ivory));
}

footer .footer-content .social-icon > li:hover a {
    background-color: rgb(var(--gold));
    border-color: rgb(var(--gold));
    box-shadow: 0 0 10px 0 rgba(var(--gold), .55);
}

footer .footer-content .social-icon > li:hover a i {
    color: rgb(var(--emerald-deep));
}

/* ───────────────────────────────────────────────────────────────────────────
   7. Buttons — emerald primary, gold outline hover
   ─────────────────────────────────────────────────────────────────────────── */
.btn_black {
    background-image: linear-gradient(90deg,
        rgb(var(--emerald-deep)) 0,
        rgb(var(--emerald-700)) 51%,
        rgb(var(--emerald-deep)));
    color: rgb(var(--ivory)) !important;
    border-radius: 2px;
}

.btn_black:hover {
    color: rgb(var(--ivory)) !important;
}

.btn_black svg {
    fill: rgb(var(--ivory));
}

.btn_outline {
    border: 1px solid rgba(var(--emerald), 1);
    color: rgb(var(--emerald));
    border-radius: 2px;
}

.btn_outline svg {
    fill: rgb(var(--emerald));
}

.btn_outline:hover {
    background-color: rgba(var(--gold), .12);
    border-color: rgba(var(--gold), 1);
    color: rgb(var(--gold-deep));
}

.btn_outline:hover svg {
    fill: rgb(var(--gold-deep));
}

/* Bootstrap solid variants used across the views */
.btn-dark,
.btn-primary {
    background-color: rgb(var(--emerald)) !important;
    border-color: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.btn-dark:hover,
.btn-primary:hover,
.btn-dark:focus,
.btn-primary:focus {
    background-color: rgb(var(--emerald-700)) !important;
    border-color: rgb(var(--emerald-700)) !important;
    color: rgb(var(--ivory)) !important;
}

.btn-outline-dark,
.btn-outline-primary {
    border-color: rgba(var(--emerald), 1) !important;
    color: rgb(var(--emerald)) !important;
}

.btn-outline-dark:hover,
.btn-outline-primary:hover {
    background-color: rgb(var(--emerald)) !important;
    border-color: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.btn-warning,
.btn-gold {
    background-color: rgb(var(--gold)) !important;
    border-color: rgb(var(--gold)) !important;
    color: rgb(var(--emerald-deep)) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   8. Accents the bundle hardcodes
   ─────────────────────────────────────────────────────────────────────────── */
.theme-default {
    background-color: rgb(var(--gold)) !important;
    color: rgb(var(--emerald-deep));
}

.theme-color {
    color: rgb(var(--gold-deep));
}

.bg-color-brown {
    background-color: rgb(var(--gold));
}

.bg-color-chocolate {
    background-color: rgb(var(--emerald-700));
}

.bg-color-coffee {
    background-color: rgb(var(--green-band));
}

/* Scroll-to-top, badges, price text */
.tap-top {
    background: rgb(var(--emerald));
    color: rgb(var(--gold));
    border: 1px solid rgba(var(--gold), .5);
}

.tap-top:hover {
    background: rgb(var(--emerald-700));
}

.grid-section .product-box-3 .product-detail h6 a:hover,
.product-box-3 .product-detail h6 a:hover {
    color: rgb(var(--gold-deep));
}

/* Keyboard focus ring follows the brand instead of the bundle's indigo default
   (the layout's inline rule is retuned in app.blade.php to match). */
:focus-visible {
    outline-color: rgb(var(--emerald)) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   9. White surfaces — cards, inputs, panels, modals
   ───────────────────────────────────────────────────────────────────────────
   Bootstrap and the bundle paint these `background-color: #fff` /
   `rgba(var(--white), 1)`. They stay white; the aliases below exist so the
   rules keep their meaning if the surface tone is ever changed again. */
.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.accordion-item,
.list-group-item {
    background-color: rgb(var(--green-light));
}

/* Inputs — the search pill on every listing page is the most visible white. */
.form-control,
.form-select,
.cv2-qty-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
    background-color: rgb(var(--green-light)) !important;
    border-color: rgb(var(--green-soft)) !important;
    color: rgb(var(--emerald-deep));
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
    background-color: rgb(var(--green-light)) !important;
    border-color: rgb(var(--emerald)) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--emerald), .12) !important;
}

.form-control::-moz-placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #6f8a76;
}

.form-check-input {
    background-color: rgb(var(--green-light));
    border-color: rgb(var(--green-soft));
}

.form-check-input:checked {
    background-color: rgb(var(--emerald));
    border-color: rgb(var(--emerald));
}

.modal-header,
.modal-footer {
    border-color: rgba(var(--gold), .28);
}

.table > :not(caption) > * > * {
    border-color: rgba(var(--gold), .18);
}

/* 9a. Cards and controls the page templates hardcode as white */
.vad-rcard,
.vad-snav,
.vad-colcard,
.msa-card,
.msa-btn,
.cv2-summary-box,
.cv2-qty-input,
.offer-code code {
    background-color: rgb(var(--green-light)) !important;
}

/* Circular slider / gallery controls: were white discs on the ivory page. */
.rp-nav,
.rv-nav,
.cs-nav,
.pg-arrow,
.col-slider-btn,
.brand-slider-btn,
.vad-msnav {
    background-color: rgb(var(--green-light)) !important;
    border-color: rgb(var(--green-soft)) !important;
    color: rgb(var(--emerald)) !important;
}

.rp-nav:hover,
.rv-nav:hover,
.cs-nav:hover,
.pg-arrow:hover,
.col-slider-btn:hover,
.brand-slider-btn:hover {
    background-color: rgb(var(--green-soft)) !important;
    color: rgb(var(--emerald-deep)) !important;
}

/* Hero carousel dots sit on top of photos — gold reads better than green there. */
.hero-banner-wrap .carousel-indicators button,
.carousel-indicators button {
    background-color: rgba(var(--ivory), .55) !important;
    border-color: rgba(var(--ivory), .75) !important;
}

.carousel-indicators button.active,
.carousel-indicators .active {
    background-color: rgb(var(--gold)) !important;
    border-color: rgb(var(--gold)) !important;
}

/* 9b. Bundle surfaces that were painted rgba(var(--white), 1).
   The header's own nav list is deliberately NOT here — see section 4: it is an
   inline row inside the gold bar at desktop and a white panel on mobile. */
.search-offcanvas .offcanvas-body,
.search-offcanvas .offcanvas-body .search-bar .search-suggestion .search-tab .nav-tabs .nav-item .nav-link,
.search-offcanvas .offcanvas-body .search-bar .search-suggestion .search-tab .tab-content .top-wear .searct-items li,
.search-offcanvas .offcanvas-body .search-bar .search-suggestion .search-tab .tab-content .inner-sleep .inner-sleep-items,
.theme-modal .modal-content .modal-body,
.theme-video-modal .modal-content .modal-header .btn-close,
.dashboard-left-sidebar .profile-box .profile-contain .profile-image img {
    background-color: rgb(var(--green-light)) !important;
}

/* At desktop the nav list is an inline row inside the gold header: it must be
   transparent or its white panel splits the gold bar into three blocks. Below
   1200px it is a slide-out overlay that needs the solid white surface. */
@media (min-width: 1200px) {
    header .header-1 .main-menu nav .nav-menu,
    header .header-1 .main-menu nav .sm-horizontal {
        background-color: transparent !important;
    }
}

@media (max-width: 1199.98px) {
    header .header-1 .main-menu nav .sm-horizontal {
        background-color: rgb(var(--green-light)) !important;
        border-color: rgb(var(--green-soft)) !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   10. Storefront CTAs
   ───────────────────────────────────────────────────────────────────────────
   Product / cart / wishlist templates declare their own "brand black" buttons in
   page-level <style> blocks (`background: #000`, hover `#222`/`#333`). Those
   blocks are emitted in <body>, so they load after this file; matching them by
   class + !important is what keeps every primary action emerald rather than
   black. Media surfaces that are legitimately black (video embeds, reel
   overlays) are deliberately NOT listed here. */
.atc-main {
    background: rgb(var(--emerald)) !important;
    background-image: none !important;
    color: rgb(var(--ivory)) !important;
}

.atc-main:hover {
    background: rgb(var(--emerald-700)) !important;
    color: rgb(var(--ivory)) !important;
}

/* "Buy Now" is the secondary-emphasis action → gold, emerald ink for contrast */
.atc-buynow,
.atc-buynow:hover {
    background: rgb(var(--gold)) !important;
    color: rgb(var(--emerald-deep)) !important;
}

.atc-wish {
    border-color: rgb(var(--emerald)) !important;
    color: rgb(var(--emerald)) !important;
    background: rgb(var(--green-light)) !important;
}

.atc-wish:hover {
    background: rgb(var(--green-light)) !important;
    color: rgb(var(--emerald)) !important;
}

.atc-wish:hover svg { stroke: rgb(var(--emerald)) !important; }
.atc-wish.wishlisted svg { fill: rgb(var(--emerald)) !important; }

/* Product accordion panel */
.pd-accordion { background: rgb(var(--green-light)) !important; }
.pd-acc-item { border-bottom-color: rgba(var(--gold), .22) !important; }

/* Cart */
.cv2-btn-primary {
    background: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.cv2-btn-primary:hover { background: rgb(var(--emerald-700)) !important; }

.cv2-btn-outline {
    background: transparent !important;
    border-color: rgb(var(--emerald)) !important;
    color: rgb(var(--emerald)) !important;
}

.cv2-btn-outline:hover {
    background: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.cv2-summary-box {
    background: rgb(var(--green-light)) !important;
    border-color: rgba(var(--gold), .3) !important;
}

.cv2-summary-box h6,
.cv2-summary-row.total { border-color: rgba(var(--gold), .22) !important; }

.cv2-qty-btn:hover {
    background: rgb(var(--emerald)) !important;
    border-color: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.cv2-qty-btn:disabled { background: rgb(var(--ivory-2)) !important; }

/* Wishlist */
.wl-atc {
    background: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.wl-atc:hover { background: rgb(var(--emerald-700)) !important; }

.wl-remove:hover {
    background: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.wl-clear-btn:hover {
    border-color: rgb(var(--emerald)) !important;
    color: rgb(var(--emerald)) !important;
}

/* Promo-banner CTA + the small black pagination/nav controls */
.vad-ratc {
    background: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.vad-msnav:hover,
.pg-arrow:hover,
.rp-nav:hover,
.rv-nav:hover {
    background: rgb(var(--emerald)) !important;
    border-color: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

/* "You may also like" sidebar add-to-cart */
.msa-btn {
    background: rgb(var(--emerald)) !important;
    color: rgb(var(--ivory)) !important;
}

.cv2-summary-box,
.pd-accordion,
.vad-rcard {
    border: 1px solid rgba(var(--gold), .28) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   11. Remaining pure-white surfaces that do not read --light-white
   ───────────────────────────────────────────────────────────────────────────
   11a. Ink pins. These three bundle rules paint TEXT with --light-white. They
   are pinned explicitly to ivory so they keep rendering light even if the
   surface token is ever darkened again. */
.summary-total .coupon-code .btn,
.home-section-4 .product-1 .product .product-details h5 span,
.home-section-4 .product-2 .product .product-details span {
    color: rgb(var(--ivory)) !important;
}

/* 11b. The 14 bundle rules that paint a surface with --white instead of
   --light-white. --white itself stays pure white because 87 other rules use it
   as ink on dark or gold; these surfaces are listed explicitly. */
.search-offcanvas .offcanvas-body,
.search-offcanvas .offcanvas-body .search-bar .search-suggestion .search-tab .nav-tabs .nav-item .nav-link,
.search-offcanvas .offcanvas-body .search-bar .search-suggestion .search-tab .tab-content .top-wear .searct-items li,
.search-offcanvas .offcanvas-body .search-bar .search-suggestion .search-tab .tab-content .inner-sleep .inner-sleep-items,
.theme-modal .modal-dialog .modal-content .modal-body,
.theme-video-modal .modal-content .modal-header .btn-close,
.dashboard-left-sidebar .profile-box .profile-contain .profile-image img,
.product-box-4 .img-wrapper .cart-info-icon a,
.product-box-4 .img-wrapper .cart-info-icon button,
.input-box input,
.offer-banner > span,
.offer-banner .btn,
.banner .banner-contain,
.subscribe-banner .subscribe-content,
.offer-banner-2 .offer-banner-details > div,
.instashop-images a:nth-child(3).gallery-box span:before,
.wrapper {
    background-color: rgb(var(--green-light)) !important;
}

/* The bundled mobile slide-out menu marks these controls light-on-dark, so
   re-point their ink at emerald now that their surface is light green. */
header .header-1 .main-menu nav .nav-menu > li .nav-submenu,
header .header-1 .main-menu nav .nav-menu > li .mega-menu,
header .sub_header ul .onhover-div .onhover-show-div,
header .sub_header ul li .onhover-show-div {
    color: rgb(var(--emerald)) !important;
}

.offcanvas,
.search-details {
    color: rgb(var(--emerald)) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   12. Dark-mode component corrections
   ─────────────────────────────────────────────────────────────────────────── */
:root .layout-1.dark .card,
:root .layout-2.dark .card,
:root .layout-3.dark .card,
:root .layout-4.dark .card,
:root .layout-1.dark .modal-content,
:root .layout-2.dark .modal-content,
:root .layout-3.dark .modal-content,
:root .layout-4.dark .modal-content {
    background-color: rgb(var(--box-background));
}

:root .layout-1.dark footer.layout-light,
:root .layout-2.dark footer.layout-light,
:root .layout-3.dark footer.layout-light,
:root .layout-4.dark footer.layout-light {
    background-image: none;
    background-color: rgba(var(--box-background), 1);
    border-top-color: rgba(var(--gold), .4);
}