/* ==========================================================================
   ZERO DEGREE — "Glacier" Design System
   v5.0 — cohesive override stylesheet (loads after the compiled Tailwind 3
   bundle; deployed as a static asset, no build step required).

   Palette : deep navy glacier (#060C15 / #0B1320) + icy cyan (#00D2FF)
             on warm off-white surfaces (#F6F2EB), refined neutral greys.
   Type    : Plus Jakarta Sans (EN) / Cairo (AR).
   Motion  : 150–250ms ease, prefers-reduced-motion respected.
   RTL     : logical properties + explicit [dir="rtl"] rules.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   01 — DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Glacier navy ramp */
    --zd-navy-950: #060C15;
    --zd-navy-900: #0B1320;
    --zd-navy-850: #0A1836;
    --zd-navy-800: #10203B;
    --zd-navy-700: #1A2C4E;
    --zd-navy-600: #23395F;

    /* Icy cyan accent */
    --zd-ice: #00D2FF;
    --zd-ice-deep: #00A9D6;
    --zd-ice-glow: rgba(0, 210, 255, 0.28);
    --zd-ice-soft: rgba(0, 210, 255, 0.08);
    --zd-ice-line: rgba(0, 210, 255, 0.35);

    /* Warm off-white surfaces + cards */
    --zd-surface: #F6F2EB;
    --zd-surface-deep: #EFE9DE;
    --zd-card: #FFFFFF;

    /* Ink (text on light) */
    --zd-ink: #101B2E;
    --zd-ink-soft: #3F4E63;
    --zd-ink-muted: #6B7A8F;

    /* Ink on navy */
    --zd-on-navy: #F1F5FA;
    --zd-on-navy-muted: rgba(241, 245, 250, 0.62);
    --zd-on-navy-faint: rgba(241, 245, 250, 0.12);

    /* Lines */
    --zd-line: rgba(16, 27, 46, 0.12);
    --zd-line-soft: rgba(16, 27, 46, 0.07);

    /* Radii */
    --zd-r-xs: 10px;
    --zd-r-sm: 12px;
    --zd-r-md: 14px;
    --zd-r-lg: 16px;
    --zd-r-xl: 20px;
    --zd-r-pill: 999px;

    /* Layered soft shadows (no muddy blur) */
    --zd-shadow-sm: 0 1px 2px rgba(11, 19, 32, 0.05), 0 2px 8px rgba(11, 19, 32, 0.04);
    --zd-shadow-md: 0 2px 6px rgba(11, 19, 32, 0.05), 0 12px 28px -10px rgba(11, 19, 32, 0.14);
    --zd-shadow-lg: 0 4px 10px rgba(11, 19, 32, 0.05), 0 24px 48px -16px rgba(11, 19, 32, 0.20);
    --zd-shadow-glow: 0 8px 22px -6px rgba(0, 210, 255, 0.45), 0 2px 6px rgba(11, 19, 32, 0.08);

    /* Type */
    --zd-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --zd-font-ar: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   02 — BASE / GLOBAL
   -------------------------------------------------------------------------- */
body {
    font-family: var(--zd-font) !important;
    background-color: var(--zd-surface) !important;
    color: var(--zd-ink) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Arabic typography (RTL default locale) */
[dir="rtl"] body,
html[lang="ar"] body {
    font-family: var(--zd-font-ar) !important;
}

/* Legacy compatibility hook kept from the compiled bundle / app.css */
.direction-rtl {
    direction: rtl;
}

/* Warm surface behind the page while cards stay white */
main#main.bg-white {
    background-color: var(--zd-surface) !important;
}

::selection {
    background: rgba(0, 210, 255, 0.30);
    color: var(--zd-navy-950);
}

/* Visible focus — keyboard users always get a clear 2px ring */
:focus-visible {
    outline: 2px solid var(--zd-ice) !important;
    outline-offset: 2px;
}

.skip-to-main-content-link:focus-visible {
    opacity: 1 !important;
    position: fixed;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 100000;
    background: var(--zd-navy-900);
    color: var(--zd-on-navy);
    border-radius: var(--zd-r-sm);
    box-shadow: var(--zd-shadow-lg);
}

/* Thin, themed scrollbars */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 19, 32, 0.32) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(11, 19, 32, 0.30);
    border-radius: var(--zd-r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 19, 32, 0.50);
    background-clip: content-box;
}

/* Inner scroll surfaces (dropdowns, account sidebar, filter panel) */
.journal-scroll::-webkit-scrollbar {
    width: 8px;
}

.journal-scroll::-webkit-scrollbar-thumb {
    background: rgba(11, 19, 32, 0.22);
    border-radius: var(--zd-r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

.journal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 19, 32, 0.40);
    background-clip: content-box;
}

.journal-scroll::-webkit-scrollbar-track {
    background: transparent;
    border: 0;
}

/* --------------------------------------------------------------------------
   03 — TYPOGRAPHY
   -------------------------------------------------------------------------- */

/* Retire the serif display; unify on Jakarta/Cairo with display weight */
.font-dmserif {
    font-family: var(--zd-font) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-style: normal !important;
}

/* Larger display headings on home (product/category carousel titles) */
main h2.font-dmserif,
main .container h2.font-dmserif {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    line-height: 1.25;
    color: var(--zd-ink);
}

/* Auth pages h1 */
main h1.font-dmserif {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: var(--zd-ink);
}

body {
    font-size: 15px;
    line-height: 1.6;
}

[dir="rtl"] .font-dmserif {
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   04 — BUTTONS & LINKS
   -------------------------------------------------------------------------- */

/* Primary — icy cyan surface, navy ink (the "cold" CTA) */
.primary-button,
button[type="submit"].primary-button,
a.primary-button {
    background: linear-gradient(180deg, #22E1FF 0%, var(--zd-ice) 55%, #00C4EC 100%) !important;
    color: var(--zd-navy-950) !important;
    border: 1px solid rgba(0, 180, 222, 0.65) !important;
    border-radius: var(--zd-r-pill) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    box-shadow: var(--zd-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    text-decoration: none;
}

.primary-button:hover,
.primary-button:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: var(--zd-shadow-glow);
    color: var(--zd-navy-950) !important;
}

.primary-button:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.primary-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: saturate(0.4);
}

/* Secondary — crisp outline */
.secondary-button,
a.secondary-button,
button.secondary-button {
    background: var(--zd-card) !important;
    color: var(--zd-navy-900) !important;
    border: 1.5px solid var(--zd-navy-900) !important;
    border-radius: var(--zd-r-pill) !important;
    font-weight: 600 !important;
    box-shadow: var(--zd-shadow-sm);
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    text-decoration: none;
}

.secondary-button:hover,
.secondary-button:focus-visible {
    background: var(--zd-navy-900) !important;
    color: var(--zd-on-navy) !important;
    border-color: var(--zd-navy-900) !important;
    transform: translateY(-1px);
    box-shadow: var(--zd-shadow-md);
}

.secondary-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Ghost — quiet text actions (remove, view details, etc.) */
.text-blue-700,
button.text-blue-700,
span.text-blue-700,
a.text-blue-700 {
    color: var(--zd-ice-deep) !important;
    font-weight: 600;
    transition: color 160ms ease;
}

.text-blue-700:hover {
    color: var(--zd-navy-900) !important;
}

/* Links: quiet underline-on-hover for body copy */
main a:not([class*="button"]):not([class*="btn"]) {
    text-underline-offset: 3px;
}

main p a:not([class]),
main li > a:not([class]) {
    text-decoration-color: var(--zd-ice);
}

/* --------------------------------------------------------------------------
   05 — FORMS
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
textarea,
select {
    background-color: var(--zd-card);
    /* No !important here: specificity (0,4,1) already beats single-class
       utilities, and scoped overrides (header search, footer email) rely
       on their own !important winning the cascade. */
    border: 1px solid rgba(16, 27, 46, 0.18);
    border-radius: var(--zd-r-sm) !important;
    color: var(--zd-ink);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    caret-color: var(--zd-ice-deep);
}

input::placeholder,
textarea::placeholder {
    color: var(--zd-ink-muted);
    opacity: 1;
}

input:hover,
textarea:hover,
select:hover {
    border-color: rgba(16, 27, 46, 0.34) !important;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    border-color: var(--zd-ice-deep) !important;
    box-shadow: 0 0 0 3px var(--zd-ice-glow) !important;
}

/* Validation state kept loud (compiled bundle already forces red borders) */
input.\!border-red-500,
textarea.\!border-red-500 {
    box-shadow: 0 0 0 3px rgba(228, 63, 74, 0.15) !important;
}

/* Required label marker */
label.required::after {
    content: " *";
    color: var(--zd-ice-deep);
    font-weight: 700;
}

/* Custom select chevron tint */
select.custom-select {
    color: var(--zd-ink);
    background-position: right 1rem center;
}

[dir="rtl"] select.custom-select {
    background-position: left 1rem center;
}

[dir="rtl"] select.custom-select option {
    direction: rtl;
}

/* Checkbox / radio glyphs (icon-font swaps driven by .peer) */
.peer:checked ~ .peer-checked\:icon-check-box,
.peer:checked ~ .peer-checked\:icon-radio-select {
    color: var(--zd-ice-deep) !important;
}

/* Keyboard focus on hidden checkboxes/radios lights the glyph */
.peer:focus-visible + .icon-uncheck,
.peer:focus-visible + .icon-radio-unselect {
    outline: 2px solid var(--zd-ice);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Quantity changer +/- glyphs */
.icon-minus,
.icon-plus {
    transition: color 150ms ease;
}

.icon-minus:hover,
.icon-plus:hover {
    color: var(--zd-ice-deep);
}

/* --------------------------------------------------------------------------
   06 — TOPBAR (light warm strip) 
   -------------------------------------------------------------------------- */
.max-lg\:hidden:has(+ header),
.max-lg\:hidden:has(+ header) > div {
    background: var(--zd-surface);
}

/* The v-topbar strip itself (structural: direct sibling before <header>) */
.max-lg\:hidden:has(+ header) .flex.w-full.items-center.justify-between {
    background: var(--zd-surface);
    border-color: var(--zd-line-soft);
}

.max-lg\:hidden:has(+ header) p,
.max-lg\:hidden:has(+ header) span {
    color: var(--zd-ink-muted) !important;
    font-size: 12px !important;
}

.max-lg\:hidden:has(+ header) a,
.max-lg\:hidden:has(+ header) [role="button"] {
    color: var(--zd-ink-soft) !important;
    transition: color 160ms ease;
}

.max-lg\:hidden:has(+ header) [role="button"]:hover,
.max-lg\:hidden:has(+ header) a:hover {
    color: var(--zd-ice-deep) !important;
}

/* Dropdown rows inside switchers */
.max-lg\:hidden:has(+ header) .hover\:bg-gray-100:hover {
    background: var(--zd-ice-soft) !important;
}

/* --------------------------------------------------------------------------
   07 — HEADER: translucent navy glass, sticky
   -------------------------------------------------------------------------- */
/* Header: the glass layer lives on ::before, NOT on the header element.
   backdrop-filter on the header element makes it a containing block for
   position:fixed descendants — the mini-cart, category, mobile-nav and
   currency drawers all mount inside <header> and would be trapped there
   (positioned/sized against the 78px header strip instead of the viewport).
   A child pseudo-element carries the glass look without trapping anything. */
header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -12px rgba(6, 12, 21, 0.5) !important;
    position: sticky;
    top: 0;
    z-index: 40 !important;
}

/* Glass layer: z-index -1 keeps it under the header content while staying
   confined inside the header's own stacking context (it can never sink
   behind page content). */
header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(11, 19, 32, 0.80);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
}

/* No blur cost on small screens */
@media (max-width: 1023px) {
    header::before {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--zd-navy-900);
    }
}

/* Header logo — light enamel plate so the navy wordmark stays legible
   on the translucent navy glass (works for the channel PNG and the SVG) */
header a:has(> img) {
    display: inline-flex;
    align-items: center;
    background: rgba(246, 242, 235, 0.95);
    border-radius: var(--zd-r-sm);
    padding: 7px 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

header a:has(> img):hover {
    box-shadow: var(--zd-shadow-glow);
    transform: translateY(-1px);
}

/* Inside the white drawers (mobile nav) the plate is not needed */
.fixed.z-\[1000\] a:has(> img) {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

header a > img,
img[width="131"][height="29"] {
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 200ms ease;
}

header a:hover > img {
    transform: scale(1.02);
}

/* Header icon buttons */
header .icon-cart,
header .icon-users,
header .icon-compare,
header .icon-hamburger,
header .icon-search {
    color: var(--zd-on-navy) !important;
    transition: color 160ms ease, transform 160ms ease;
}

header a:hover .icon-cart,
header a:hover .icon-users,
header a:hover .icon-compare,
header [role="button"]:hover .icon-users,
header span.icon-hamburger:hover,
header span.icon-cart:hover,
header span.icon-users:hover,
header span.icon-compare:hover {
    color: var(--zd-ice) !important;
}

/* Mini-cart quantity badge */
span.icon-cart + span.bg-navyBlue {
    background: var(--zd-ice) !important;
    color: var(--zd-navy-950) !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 2px rgba(11, 19, 32, 0.9), var(--zd-shadow-glow);
}

/* Header search field */
header form input[name="query"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--zd-r-sm) !important;
    color: var(--zd-on-navy) !important;
    font-size: 13px;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

header form input[name="query"]::placeholder {
    color: rgba(241, 245, 250, 0.45) !important;
}

header form input[name="query"]:hover {
    border-color: rgba(255, 255, 255, 0.28) !important;
}

header form input[name="query"]:focus,
header form input[name="query"]:focus-visible {
    border-color: var(--zd-ice) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 0 0 3px var(--zd-ice-glow) !important;
}

header .icon-search {
    color: rgba(241, 245, 250, 0.55) !important;
}

/* Desktop category nav */
header div.group.h-\[77px\],
header div.flex.h-\[77px\] {
    transition: border-color 200ms ease;
}

header div.group.h-\[77px\] a.inline-block,
header div.flex.h-\[77px\] span {
    color: var(--zd-on-navy) !important;
    font-weight: 600 !important;
    font-size: 13px;
    letter-spacing: 0.08em;
    transition: color 180ms ease;
}

header div.group.h-\[77px\]:hover a.inline-block,
header div.flex.h-\[77px\]:hover span {
    color: var(--zd-ice) !important;
}

/* hover:border-navyBlue in the bundle is invisible on navy — swap to ice */
header div.group.h-\[77px\]:hover,
header div.flex.h-\[77px\]:hover {
    border-bottom-color: var(--zd-ice) !important;
}

/* Mega menu panel */
header div.top-\[78px\] {
    background: var(--zd-card) !important;
    border: 1px solid var(--zd-line-soft);
    border-radius: var(--zd-r-lg);
    box-shadow: var(--zd-shadow-lg) !important;
}

header div.top-\[78px\] p.font-medium,
header div.top-\[78px\] p.text-navyBlue > a {
    color: var(--zd-navy-900) !important;
    font-weight: 700;
}

header div.top-\[78px\] ul li a,
header div.top-\[78px\] li {
    color: var(--zd-ink-soft) !important;
    transition: color 150ms ease;
}

header div.top-\[78px\] ul li a:hover {
    color: var(--zd-ice-deep) !important;
}

/* Header dropdown panels (profile, switchers) */
.absolute.z-20.w-max.rounded-\[20px\] {
    background: var(--zd-card) !important;
    border: 1px solid var(--zd-line-soft);
    border-radius: var(--zd-r-lg) !important;
    box-shadow: var(--zd-shadow-lg) !important;
}

.absolute.z-20.w-max.rounded-\[20px\] p,
.absolute.z-20.w-max.rounded-\[20px\] .text-sm {
    color: var(--zd-ink-soft);
}

.absolute.z-20.w-max.rounded-\[20px\] .text-xl {
    color: var(--zd-ink) !important;
    font-weight: 700;
}

.absolute.z-20.w-max.rounded-\[20px\] a {
    border-radius: var(--zd-r-xs);
    color: var(--zd-ink-soft);
    transition: background-color 150ms ease, color 150ms ease;
}

.absolute.z-20.w-max.rounded-\[20px\] a:hover {
    background: var(--zd-ice-soft) !important;
    color: var(--zd-navy-900) !important;
}

/* --------------------------------------------------------------------------
   08 — DRAWERS (mini cart / mobile nav / filters) — appearance only.
        v-show + Vue transitions stay untouched: NO display/visibility rules
        anywhere in this section (the 1b22184 regression stays fixed).
   -------------------------------------------------------------------------- */
.fixed.z-\[1000\] {
    z-index: 99999 !important;
    background: var(--zd-card) !important;
    box-shadow: 0 0 60px rgba(6, 12, 21, 0.28) !important;
    border-inline-start: 1px solid var(--zd-line-soft);
}

[dir="ltr"] .fixed.z-\[1000\] {
    box-shadow: -24px 0 60px rgba(6, 12, 21, 0.22) !important;
}

[dir="rtl"] .fixed.z-\[1000\] {
    box-shadow: 24px 0 60px rgba(6, 12, 21, 0.22) !important;
}

/* Scrim — drawer, then modal (both must sit above the sticky glass header) */
.fixed.inset-0.z-20.bg-gray-500,
.fixed.inset-0.z-10.bg-gray-500 {
    background: rgba(6, 12, 21, 0.62) !important;
}

.fixed.inset-0.z-20 {
    z-index: 99997 !important;
}

/* Confirm-dialog viewport (has `transform`; must stack above the drawer) */
.fixed.inset-0.z-20.transform {
    z-index: 100001 !important;
}

/* Modal scrim + modal viewport wrapper (they share z-10 in the bundle) */
.fixed.inset-0.z-10 {
    z-index: 100000 !important;
}

/* Flash toasts must never hide behind the open drawer panel */
.z-\[1001\] {
    z-index: 100002 !important;
}

/* Drawer close button — 40px circular hit target, not a bare glyph */
.fixed.z-\[1000\] .icon-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--zd-r-pill);
    color: var(--zd-ink) !important;
    background: transparent;
    transition: color 160ms ease, background-color 160ms ease, transform 200ms ease;
}

.fixed.z-\[1000\] .icon-cancel:hover {
    color: var(--zd-navy-900) !important;
    background: var(--zd-surface-deep);
    transform: rotate(90deg);
}

/* Drawer headings — the mini-cart title */
.fixed.z-\[1000\] p.text-2xl {
    color: var(--zd-ink) !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em;
}

.fixed.z-\[1000\] .text-xl.font-medium {
    color: var(--zd-ink) !important;
    font-weight: 700 !important;
}

.fixed.z-\[1000\] .text-zinc-500 {
    color: var(--zd-ink-muted) !important;
}

/* Mini-cart header offer line → icy hint chip (only drawer with a bare
   text-base paragraph in its header; blade skips it when config is empty) */
.fixed.z-\[1000\] div.grid.gap-y-2\.5 > p.text-base {
    justify-self: start;
    padding: 5px 12px;
    border: 1px solid var(--zd-ice-line);
    border-radius: var(--zd-r-pill);
    background: var(--zd-ice-soft);
    color: var(--zd-navy-800) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.4;
}

/* Mini-cart line items (real rows and skeleton rows share the shape) */
.fixed.z-\[1000\] .grid.gap-12 > div.flex {
    background: var(--zd-surface);
    border: 1px solid var(--zd-line-soft);
    border-radius: var(--zd-r-md);
    padding: 14px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.fixed.z-\[1000\] .grid.gap-12 > div.flex:hover {
    border-color: var(--zd-ice-line);
    box-shadow: var(--zd-shadow-sm);
}

.fixed.z-\[1000\] img {
    border-radius: var(--zd-r-sm) !important;
}

/* Item name link */
.fixed.z-\[1000\] .grid.gap-12 a p,
.fixed.z-\[1000\] .grid.gap-12 a {
    transition: color 160ms ease;
}

.fixed.z-\[1000\] .grid.gap-12 a:hover p {
    color: var(--zd-ice-deep) !important;
}

/* Line total (the price paragraph in each row) */
.fixed.z-\[1000\] .grid.gap-12 p.text-lg {
    color: var(--zd-navy-900) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}

/* "See details" toggler */
.fixed.z-\[1000\] .grid.gap-12 p.flex.cursor-pointer {
    color: var(--zd-ink-soft) !important;
    font-weight: 600;
}

.fixed.z-\[1000\] .grid.gap-12 p.flex.cursor-pointer:hover {
    color: var(--zd-ice-deep) !important;
}

/* Mini-cart subtotal */
.fixed.z-\[1000\] p.text-3xl {
    color: var(--zd-navy-900) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Subtotal divider row */
.fixed.z-\[1000\] .my-8.border-b,
.fixed.z-\[1000\] .my-8.border-t {
    border-color: var(--zd-line-soft) !important;
}

/* Mini-cart checkout CTA (the navy pill anchor in the drawer footer) */
.fixed.z-\[1000\] a.bg-navyBlue {
    background: linear-gradient(180deg, #22E1FF 0%, var(--zd-ice) 60%, #00C4EC 100%) !important;
    color: var(--zd-navy-950) !important;
    font-weight: 700 !important;
    border-radius: var(--zd-r-pill) !important;
    box-shadow: var(--zd-shadow-glow) !important;
    transition: transform 180ms ease, box-shadow 180ms ease;
    text-decoration: none !important;
}

.fixed.z-\[1000\] a.bg-navyBlue:hover {
    transform: translateY(-1px);
}

/* View-cart → quiet outline pill */
.fixed.z-\[1000\] a[href*="cart"] {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--zd-line);
    border-radius: var(--zd-r-pill);
    color: var(--zd-navy-900) !important;
    font-weight: 600 !important;
    text-align: center;
    text-decoration: none !important;
    transition: border-color 180ms ease, background-color 180ms ease;
}

.fixed.z-\[1000\] a[href*="cart"]:hover {
    border-color: var(--zd-navy-900);
    background: var(--zd-ice-soft);
}

/* Quantity changer pill (drawer + cart page). :not(.shimmer) keeps the
   skeleton's stepper placeholder shimmering. */
.rounded-\[54px\]:not(.shimmer) {
    background: var(--zd-card) !important;
    border-radius: var(--zd-r-pill) !important;
}

/* The value slot is w-2.5 (10px) in the bundle — clips "10+" quantities */
.rounded-\[54px\] > p {
    min-width: 1.75rem;
    color: var(--zd-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Empty cart state */
.fixed.z-\[1000\] .mt-32 {
    margin-top: clamp(4rem, 18vh, 8rem) !important;
}

.zd-drawer-empty-cta {
    display: block;
    width: max-content;
    padding: 10px 28px;
    border: 1.5px solid var(--zd-navy-900);
    border-radius: var(--zd-r-pill);
    color: var(--zd-navy-900);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.zd-drawer-empty-cta:hover,
.zd-drawer-empty-cta:focus-visible {
    background: var(--zd-navy-900);
    color: var(--zd-on-navy);
    transform: translateY(-1px);
    box-shadow: var(--zd-shadow-md);
}

/* Mobile: keep CTAs clear of the home-indicator / gesture area */
@media (max-width: 767px) {
    .fixed.z-\[1000\] .grid-col-1 {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* --------------------------------------------------------------------------
   09 — FLASH MESSAGES
   Inline styles are beaten with !important; type comes from the toast icon.
   -------------------------------------------------------------------------- */
.flex.w-max.max-w-\[408px\] {
    border-radius: var(--zd-r-md) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--zd-shadow-md) !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-done) {
    background: #E9F7F0 !important;
    border-color: rgba(14, 107, 67, 0.25) !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-done) p {
    color: #0E6B43 !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-error) {
    background: #FCEBEA !important;
    border-color: rgba(178, 44, 40, 0.25) !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-error) p {
    color: #B22C28 !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-exclamation-mark) {
    background: #FFF6E0 !important;
    border-color: rgba(138, 90, 0, 0.25) !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-exclamation-mark) p {
    color: #8A5A00 !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-info) {
    background: var(--zd-navy-900) !important;
    border-color: rgba(0, 210, 255, 0.35) !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-info) p {
    color: var(--zd-on-navy) !important;
}

.flex.w-max.max-w-\[408px\]:has(.icon-toast-info) span {
    color: var(--zd-ice) !important;
}

.flex.w-max.max-w-\[408px\] .icon-cancel {
    opacity: 0.65;
    transition: opacity 150ms ease, transform 150ms ease;
}

.flex.w-max.max-w-\[408px\] .icon-cancel:hover {
    opacity: 1;
    transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   10 — MODALS (confirm, checkout login, terms)
   Panels share left-1/2 top-1/2 z-[999]; radius varies per modal.
   -------------------------------------------------------------------------- */
.absolute.left-1\/2.top-1\/2.z-\[999\] {
    background: var(--zd-card) !important;
    border-radius: var(--zd-r-xl) !important;
    box-shadow: var(--zd-shadow-lg) !important;
    border: 1px solid var(--zd-line-soft);
}

/* --------------------------------------------------------------------------
   11 — PRODUCT CARDS
   -------------------------------------------------------------------------- */

/* Grid card root (v-product-card template) */
.group.w-full.rounded-md {
    background: transparent !important;
    border-radius: var(--zd-r-lg);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.group.w-full.rounded-md:hover {
    transform: translateY(-4px);
}

/* Image well: soften edges so the zoom reads cleanly */
.group.rounded-md > div.relative.overflow-hidden {
    border-radius: var(--zd-r-md) !important;
}

/* Product name */
.group.rounded-md p.text-base.font-medium,
.group.rounded-md p.text-base {
    color: var(--zd-ink) !important;
    font-weight: 600 !important;
    line-height: 1.45;
}

/* Price row — emphasis */
.group.rounded-md div.flex.flex-wrap.items-center.gap-x-2\.5,
.relative.flex.max-w-max div.flex.flex-wrap.items-center.gap-x-2\.5 {
    color: var(--zd-navy-900) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* List-mode card */
.relative.flex.max-w-max.rounded {
    border-radius: var(--zd-r-md);
    background: var(--zd-card);
    border: 1px solid var(--zd-line-soft);
    box-shadow: var(--zd-shadow-sm);
    padding: 16px;
    max-width: 100%;
}

/* Sale / New badges */
.action-items p.bg-red-600,
.action-items p.bg-red-500 {
    background: var(--zd-navy-900) !important;
    color: var(--zd-ice) !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    border-radius: var(--zd-r-pill) !important;
    box-shadow: 0 4px 14px rgba(6, 12, 21, 0.28);
}

.action-items p.bg-navyBlue {
    background: var(--zd-ice) !important;
    color: var(--zd-navy-950) !important;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.04em;
    border-radius: var(--zd-r-pill) !important;
    box-shadow: 0 4px 14px rgba(0, 210, 255, 0.35);
}

/* Ratings chip + icy stars */
.icon-star-fill {
    color: var(--zd-ice-deep) !important;
}

/* --------------------------------------------------------------------------
   12 — CAROUSELS & SECTION HEADINGS
   -------------------------------------------------------------------------- */

/* Hero (image) carousel controls */
.bg-black\/80 {
    background: rgba(6, 12, 21, 0.62) !important;
    color: var(--zd-on-navy) !important;
}

.bg-black\/80:hover {
    background: rgba(6, 12, 21, 0.85) !important;
}

/* Active hero dot */
.absolute.bottom-5 .bg-navyBlue {
    background: var(--zd-ice) !important;
    box-shadow: 0 0 0 3px var(--zd-ice-glow);
}

/* Stylish arrow buttons (product + category carousels) */
.icon-arrow-left-stylish,
.icon-arrow-right-stylish {
    border-color: var(--zd-line) !important;
    color: var(--zd-navy-900) !important;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.icon-arrow-left-stylish:hover,
.icon-arrow-right-stylish:hover {
    background: var(--zd-navy-900) !important;
    color: var(--zd-ice) !important;
    border-color: var(--zd-navy-900) !important;
    transform: translateY(-1px);
    box-shadow: var(--zd-shadow-md);
}

/* Category carousel discs (swiper rail is the stable hook) */
a.h-\[110px\].w-\[110px\].rounded-full,
div.scrollbar-hide a.rounded-full {
    background: var(--zd-surface-deep) !important;
    box-shadow: inset 0 0 0 1px var(--zd-line-soft);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

a.h-\[110px\].w-\[110px\].rounded-full:hover,
div.scrollbar-hide a.rounded-full:hover {
    box-shadow: inset 0 0 0 2px var(--zd-ice), var(--zd-shadow-glow);
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   13 — SERVICES STRIP
   -------------------------------------------------------------------------- */
.container .flex.justify-center.gap-6 > div {
    background: var(--zd-card);
    border: 1px solid var(--zd-line-soft);
    border-radius: var(--zd-r-lg);
    padding: 18px 22px;
    box-shadow: var(--zd-shadow-sm);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.container .flex.justify-center.gap-6 > div:hover {
    transform: translateY(-3px);
    border-color: var(--zd-ice-line);
    box-shadow: var(--zd-shadow-md);
}

/* Service icon disc */
.container span.rounded-full.border-black {
    border-color: var(--zd-ice-line) !important;
    background: var(--zd-ice-soft) !important;
    color: var(--zd-navy-900) !important;
}

/* --------------------------------------------------------------------------
   14 — CATEGORY PAGE: filters, toolbar, pagination, breadcrumbs
   -------------------------------------------------------------------------- */
.panel-side {
    color: var(--zd-ink-soft);
}

.panel-side .grid.rounded-md {
    border-radius: var(--zd-r-md) !important;
    overflow: hidden;
}

.panel-side a div {
    transition: background-color 150ms ease, color 150ms ease;
}

.panel-side a:hover div {
    background: var(--zd-ice-soft) !important;
}

/* Active account-nav item */
.panel-side a div.bg-zinc-100 {
    background: var(--zd-ice-soft) !important;
    box-shadow: inset 3px 0 0 var(--zd-ice-deep);
}

[dir="rtl"] .panel-side a div.bg-zinc-100 {
    box-shadow: inset -3px 0 0 var(--zd-ice-deep);
}

/* Load-more + generic quiet buttons */
button.rounded.border.border-gray-300 {
    border-radius: var(--zd-r-pill) !important;
    border-color: var(--zd-line) !important;
    color: var(--zd-ink-soft) !important;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

button.rounded.border.border-gray-300:hover {
    border-color: var(--zd-ice-deep) !important;
    background: var(--zd-ice-soft) !important;
    color: var(--zd-navy-900) !important;
}

/* Pagination (partials/pagination) */
nav ul.inline-flex li a,
nav ul.inline-flex li span {
    border-color: var(--zd-line) !important;
    color: var(--zd-ink-soft) !important;
    transition: background-color 150ms ease, color 150ms ease;
}

nav ul.inline-flex li a.bg-gray-100 {
    background: var(--zd-navy-900) !important;
    color: var(--zd-ice) !important;
    border-color: var(--zd-navy-900) !important;
    font-weight: 700;
}

nav ul.inline-flex li a:hover:not(.bg-gray-100) {
    background: var(--zd-ice-soft) !important;
}

/* Breadcrumbs */
nav ol.flex li a {
    color: var(--zd-ink-soft) !important;
    font-size: 13px;
    font-weight: 600;
    transition: color 150ms ease;
}

nav ol.flex li a:hover {
    color: var(--zd-ice-deep) !important;
}

nav ol.flex li.text-zinc-500 {
    color: var(--zd-ink-muted) !important;
    font-size: 13px;
}

nav ol.flex li span[class*="icon-arrow"] {
    color: var(--zd-ink-muted) !important;
    font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   15 — CART PAGE
   -------------------------------------------------------------------------- */
.container .border-zinc-200.pb-2\.5,
.container .flex.justify-between.gap-x-2\.5 {
    border-color: var(--zd-line-soft) !important;
}

/* Cart checkbox glyphs already themed by .peer rules */

/* Cart item remove links inherit ghost-link styling */

/* Cart summary card */
.w-\[418px\].max-w-full {
    background: var(--zd-card);
    border: 1px solid var(--zd-line-soft);
    border-radius: var(--zd-r-xl);
    box-shadow: var(--zd-shadow-md);
    padding: 28px;
}

/* Minimum-order warning banner */
.container div.bg-\[\#FFF3CD\] {
    background: #FFF6E0 !important;
    border: 1px solid rgba(138, 90, 0, 0.25);
    border-radius: var(--zd-r-md) !important;
    color: #8A5A00 !important;
}

/* --------------------------------------------------------------------------
   16 — CHECKOUT ONEPAGE
   -------------------------------------------------------------------------- */

/* Step cards (each accordion = one step; direct children only) */
#steps-container > div {
    background: var(--zd-card) !important;
    border-radius: var(--zd-r-lg) !important;
    border: 1px solid var(--zd-line-soft) !important;
    box-shadow: var(--zd-shadow-md);
    overflow: hidden;
}

/* Step headers */
#steps-container .flex.cursor-pointer.select-none.items-center.justify-between {
    transition: background-color 160ms ease;
}

#steps-container .flex.cursor-pointer.select-none.items-center.justify-between:hover {
    background: var(--zd-ice-soft);
}

/* Step titles */
#steps-container h2 {
    color: var(--zd-ink) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.01em;
}

/* Summary card (sticky desktop rail) */
.sticky.top-8.block.h-max {
    background: var(--zd-card);
    border: 1px solid var(--zd-line-soft);
    border-radius: var(--zd-r-xl);
    box-shadow: var(--zd-shadow-lg);
    padding: 28px;
}

/* Shipping / payment option cards — selected state is unmistakable */
input.peer:checked ~ label.rounded-xl {
    border-color: var(--zd-ice-deep) !important;
    border-width: 2px !important;
    background: linear-gradient(0deg, var(--zd-ice-soft), var(--zd-ice-soft)), var(--zd-card) !important;
    box-shadow: 0 0 0 4px var(--zd-ice-glow), var(--zd-shadow-md) !important;
    color: var(--zd-ink) !important;
}

input.peer:not(:checked) ~ label.rounded-xl {
    border-color: var(--zd-line) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

input.peer:not(:checked) ~ label.rounded-xl:hover {
    border-color: rgba(16, 27, 46, 0.34) !important;
    box-shadow: var(--zd-shadow-sm);
}

/* Selected radio glyph tint */
input.peer:checked ~ label.icon-radio-unselect,
input.peer:checked ~ label.peer-checked\:icon-radio-select {
    color: var(--zd-ice-deep) !important;
}

/* --------------------------------------------------------------------------
   17 — AUTH PAGES (sign-in / sign-up / forgot password)
   -------------------------------------------------------------------------- */

/* Brand gradient backdrop (auth pages are the only ones with an h1.font-dmserif
   directly under the container, and they render without header/footer) */
main:has(h1.font-dmserif) {
    background:
        radial-gradient(52rem 30rem at 88% -6%, rgba(0, 210, 255, 0.16), transparent 62%),
        radial-gradient(44rem 26rem at -8% 104%, rgba(26, 44, 78, 0.16), transparent 60%),
        var(--zd-surface) !important;
    min-height: 100vh;
}

/* Centered brand card */
main:has(h1.font-dmserif) .max-w-\[870px\] {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: var(--zd-r-xl) !important;
    box-shadow: var(--zd-shadow-lg);
}

main:has(h1.font-dmserif) .max-w-\[870px\] p.text-zinc-500 {
    color: var(--zd-ink-muted) !important;
}

main:has(h1.font-dmserif) a.text-navyBlue {
    color: var(--zd-ice-deep) !important;
    font-weight: 700;
}

main:has(h1.font-dmserif) a.text-navyBlue:hover {
    color: var(--zd-navy-900) !important;
}

/* --------------------------------------------------------------------------
   18 — ACCOUNT PAGES
   -------------------------------------------------------------------------- */

/* Sidebar profile card */
.panel-side > div:first-child {
    background: var(--zd-card);
    border-radius: var(--zd-r-md) !important;
    box-shadow: var(--zd-shadow-sm);
}

.panel-side p.text-2xl,
.panel-side .text-xl {
    color: var(--zd-ink) !important;
    font-weight: 700 !important;
}

/* Datagrid (account "tables" are CSS-grid rows, not <table>) */
.table-responsive {
    border: 1px solid var(--zd-line-soft);
    border-radius: var(--zd-r-md) !important;
    box-shadow: var(--zd-shadow-sm) !important;
}

.table-responsive .row.bg-zinc-100 {
    background: var(--zd-surface-deep) !important;
    color: var(--zd-ink-muted) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table-responsive .row.bg-white {
    transition: background-color 150ms ease;
}

.table-responsive .row.bg-white:hover {
    background: var(--zd-ice-soft) !important;
}

/* Order status badges — semantic, calm pills */
.label-pending,
.label-processing,
.label-closed,
.label-canceled,
.label-info,
.label-completed,
.label-active {
    border-radius: var(--zd-r-pill) !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
}

.label-pending {
    background: #B7791F !important;
}

.label-processing {
    background: var(--zd-ice-deep) !important;
    color: var(--zd-navy-950) !important;
}

.label-completed,
.label-active {
    background: #177245 !important;
}

.label-closed {
    background: #3B4E8C !important;
}

.label-canceled {
    background: #C0392B !important;
}

.label-info {
    background: #5B6B7C !important;
}

/* --------------------------------------------------------------------------
   19 — FOOTER
   -------------------------------------------------------------------------- */
footer {
    background: var(--zd-navy-900) !important;
    margin-top: 72px !important;
    color: var(--zd-on-navy-muted);
}

/* Link columns */
footer ul.grid.gap-5 li a {
    color: var(--zd-on-navy-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 160ms ease;
    text-decoration: none;
}

footer ul.grid.gap-5 li a:hover {
    color: var(--zd-ice) !important;
}

/* Newsletter heading */
footer p.text-3xl {
    color: var(--zd-on-navy) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.35 !important;
}

footer .grid.gap-2\.5 > p.text-xs {
    color: var(--zd-on-navy-muted) !important;
}

/* Newsletter field */
footer input[name="email"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: var(--zd-on-navy) !important;
    border-radius: var(--zd-r-md) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

footer input[name="email"]::placeholder {
    color: rgba(241, 245, 250, 0.38) !important;
}

footer input[name="email"]:focus,
footer input[name="email"]:focus-visible {
    border-color: var(--zd-ice) !important;
    box-shadow: 0 0 0 3px var(--zd-ice-glow) !important;
}

/* Subscribe button */
footer button[type="submit"] {
    background: var(--zd-ice) !important;
    color: var(--zd-navy-950) !important;
    font-weight: 700 !important;
    border-radius: var(--zd-r-sm) !important;
    transition: filter 160ms ease, transform 160ms ease;
}

footer button[type="submit"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Mobile footer accordion + copyright strip */
footer .bg-\[\#F1EADF\] {
    background: rgba(255, 255, 255, 0.045) !important;
}

footer .\!border-\[\#e9decc\] {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

footer .bg-\[\#F1EADF\] p {
    color: var(--zd-on-navy-muted) !important;
}

footer p.text-sm.text-zinc-600 {
    color: var(--zd-on-navy-muted) !important;
}

footer [class*="icon-facebook"],
footer [class*="icon-instagram"],
footer [class*="icon-twitter"],
footer [class*="icon-youtube"],
footer [class*="icon-snapchat"],
footer [class*="icon-tiktok"] {
    color: var(--zd-on-navy-muted) !important;
    transition: color 160ms ease, transform 160ms ease;
}

footer [class*="icon-facebook"]:hover,
footer [class*="icon-instagram"]:hover,
footer [class*="icon-twitter"]:hover,
footer [class*="icon-youtube"]:hover,
footer [class*="icon-snapchat"]:hover,
footer [class*="icon-tiktok"]:hover {
    color: var(--zd-ice) !important;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   20 — SHIMMER (matches glacier palette)
   -------------------------------------------------------------------------- */
.shimmer {
    background: linear-gradient(
        100deg,
        rgba(16, 27, 46, 0.055) 30%,
        rgba(0, 210, 255, 0.10) 50%,
        rgba(16, 27, 46, 0.055) 70%
    ) !important;
    background-size: 1250px 100% !important;
}

/* Skeletons over the navy glass header need a light shimmer to read */
header .shimmer {
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.10) 30%,
        rgba(0, 210, 255, 0.20) 50%,
        rgba(255, 255, 255, 0.10) 70%
    ) !important;
}

/* --------------------------------------------------------------------------
   21 — RESPONSIVE REFINEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* Sticky mobile filter/sort bar */
    .fixed.bottom-0.z-10.grid {
        background: rgba(255, 255, 255, 0.92) !important;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-color: var(--zd-line-soft) !important;
    }

    .fixed.bottom-0.z-10 [class*="icon-"] {
        color: var(--zd-navy-900) !important;
    }
}

/* --------------------------------------------------------------------------
   22 — REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .group.rounded-md:hover,
    .primary-button:hover,
    .secondary-button:hover {
        transform: none !important;
    }
}