/* ============================================================================
   LEAVORI — Frontend Enhancement Layer
   ----------------------------------------------------------------------------
   Loaded AFTER style.css (prebuilt Tailwind v4 artifact) + custom.css and
   AFTER the DB-driven theme block from ThemeService::renderCss().

   Everything brand-coloured here must reference the live theme variables
   (--color-primary, --color-primary-dark, …) so Admin → Theme Settings keeps
   working. Do not hardcode brand colours in this file.

     1. Design tokens
     2. Accessibility: focus-visible, skip link, reduced motion
     3. Arbitrary utilities the prebuilt style.css does not ship
     4. Component polish: buttons, cards, images, inputs, badges, tables
     5. States: skeleton, empty, toast
     6. RTL safety + responsive fixes
   ========================================================================== */

/* ===== 1. Design tokens ==================================================== */
:root {
    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* Elevation (neutral, palette independent) */
    --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px -1px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 12px 20px -6px rgba(16, 24, 40, 0.14), 0 4px 8px -4px rgba(16, 24, 40, 0.08);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary, #3d210c) 35%, transparent);

    /* Section rhythm */
    --space-section: 70px;
    --space-section-sm: 45px;

    /* Motion */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Semantic aliases bound to the live theme */
    --surface: var(--color-card-bg, #ffffff);
    --surface-muted: var(--color-primary-lighter, #f6f6f6);
    --line: var(--color-border, #dfe3e8);
    --text: var(--color-light-primary-text, #212529);
    --text-muted: var(--color-light-secondary-text, #495057);
    --brand: var(--color-primary, #3d210c);
    --brand-strong: var(--color-primary-dark, #5f381b);
    --brand-soft: var(--color-primary-lighter, #f1e7de);
}

/* ===== 2. Accessibility ==================================================== */
/* `style.css` is a prebuilt artifact that omits Tailwind's screen-reader helper,
   yet the Blade templates (and Breeze) use it. Without this the labels leak
   into the visual layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* The prebuilt stylesheet ships almost no focus styling; give every
   interactive element a visible, brand-tinted ring that works in RTL too. */
:where(a[href], button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Remove the ring for pointer-driven clicks on custom controls that already
   show their own state, but never for keyboard users. */
:where(.product-btn-action-item, .variant-size-btn, .variant-color-btn):focus {
    outline: none;
}
:where(.product-btn-action-item, .variant-size-btn, .variant-color-btn):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Skip to content */
.skip-link {
    position: fixed;
    inset-inline-start: 0;
    top: -100px;
    z-index: 100000;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--brand);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-end-end-radius: var(--radius-md);
    transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

/* Enforce a usable tap target on small icon-only controls. */
@media (max-width: 767px) {
    .product-btn-action-item,
    .mobile-icon-btn {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Text helpers */
.visually-hidden,
.sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Honour reduced-motion preferences across theme, vendor and custom CSS. */
@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;
    }
    .wow {
        visibility: visible !important;
        animation-name: none !important;
    }
    html {
        scroll-behavior: auto !important;
    }
}

/* ===== 3. Arbitrary utilities missing from the prebuilt style.css =========
   The theme ships a compiled Tailwind artifact, so classes added to Blade
   views after it was built silently render as nothing. These rules restore
   them (and map the legacy teal values onto the live theme). */
.text-\[11px\] { font-size: 11px; line-height: 1.35; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.z-\[90\] { z-index: 90; }
.z-\[91\] { z-index: 91; }
.z-\[9999\] { z-index: 9999; }
.z-\[99999\] { z-index: 99999; }
.duration-\[250ms\] { transition-duration: 250ms; }
.tracking-\[0\.4em\] { letter-spacing: 0.4em; }
.h-\[130px\] { height: 130px; }
.min-h-\[130px\] { min-height: 130px; }
.max-h-\[140px\] { max-height: 140px; }
.max-h-\[160px\] { max-height: 160px; }
.max-w-\[75px\] { max-width: 75px; }
.max-w-\[160px\] { max-width: 160px; }
.max-w-\[240px\] { max-width: 240px; }
.min-w-\[20px\] { min-width: 20px; }
.min-w-\[40px\] { min-width: 40px; }
.min-w-\[220px\] { min-width: 220px; }
.-mb-\[40px\] { margin-bottom: -40px; }
.bottom-\[2px\] { bottom: 2px; }
.right-\[2px\] { right: 2px; }
.rounded-l-\[100px\] { border-top-left-radius: 100px; border-bottom-left-radius: 100px; }
.-translate-y-\[25\%\] { transform: translateY(-25%); }
.active\:scale-\[0\.99\]:active { transform: scale(0.99); }

/* Star-rating sprite: only the relative '../images' variant was compiled. */
.bg-\[url\(\'\/assets\/images\/star-icon\.png\'\)\] {
    background-image: url('/assets/images/star-icon.png');
}

/* Package-deals background driven by the theme variable. */
.bg-\[var\(--color-package-deals-bg\,\#FFEB69\)\] {
    background-color: var(--color-package-deals-bg, #ffeb69);
}

/* Legacy teal → live theme (keeps old markup themable). */
.bg-\[\#056d6e\] { background-color: var(--brand-strong); }
.bg-\[\#056d6e\]\/10 { background-color: color-mix(in srgb, var(--brand-strong) 10%, transparent); }
.text-\[\#056d6e\] { color: var(--brand-strong); }
.border-\[\#056d6e\] { border-color: var(--brand-strong); }
.\!bg-\[\#056d6e\] { background-color: var(--brand-strong) !important; }
.\!border-\[\#056d6e\] { border-color: var(--brand-strong) !important; }
.\!bg-\[\#088178\] { background-color: var(--brand) !important; }
.\!bg-\[\#ffc107\] { background-color: var(--color-warning, #ffc107) !important; }

/* Checkout / order-status state colours. */
.bg-\[\#fef2f2\] { background-color: #fef2f2; }
.bg-\[\#fee2e2\] { background-color: #fee2e2; }
.bg-\[\#ef4444\] { background-color: #ef4444; }
.bg-\[\#ecfdf5\] { background-color: #ecfdf5; }
.bg-\[\#d1fae5\] { background-color: #d1fae5; }
.border-\[\#fecaca\] { border-color: #fecaca; }
.border-\[\#a7f3d0\] { border-color: #a7f3d0; }
.text-\[\#b91c1c\] { color: #b91c1c; }
.text-\[\#7f1d1d\] { color: #7f1d1d; }
.text-\[\#dc2626\] { color: #dc2626; }
.text-\[\#f87171\] { color: #f87171; }
.text-\[\#059669\] { color: #059669; }
.text-\[\#065f46\] { color: #065f46; }
.text-\[\#34d399\] { color: #34d399; }
.text-\[\#92400e\] { color: #92400e; }
.hover\:bg-\[\#fee2e2\]:hover { background-color: #fee2e2; }
.hover\:bg-\[\#d1fae5\]:hover { background-color: #d1fae5; }
.hover\:text-\[\#991b1b\]:hover { color: #991b1b; }
.hover\:text-\[\#065f46\]:hover { color: #065f46; }

/* Header search floating label (RTL aware). */
.ltr\:left-\[14px\]:not(:dir(rtl)) { left: 14px; }
[dir="ltr"] .ltr\:left-\[14px\] { left: 14px; }
[dir="rtl"] .rtl\:right-\[14px\] { right: 14px; }
[dir="ltr"] .peer-focus\:ltr\:left-\[14px\]:where(.peer:focus ~ *) { left: 14px; }
[dir="rtl"] .peer-focus\:rtl\:right-\[14px\]:where(.peer:focus ~ *) { right: 14px; }
[dir="ltr"] .peer-\[\:not\(\:placeholder-shown\)\]\:ltr\:left-\[14px\]:where(.peer:not(:placeholder-shown) ~ *) { left: 14px; }
[dir="rtl"] .peer-\[\:not\(\:placeholder-shown\)\]\:rtl\:right-\[14px\]:where(.peer:not(:placeholder-shown) ~ *) { right: 14px; }

/* The idle (empty + unfocused) floating label has no usable left/right offset in
   the prebuilt stylesheet, so it falls back to its static position — exactly on
   top of the magnifier icon — and its opaque white background hides the glyph
   except for a few pixels of its outline. Suppress that duplicate and let the
   field's own placeholder render instead; the lifted focus/filled states (which
   do resolve correctly) are left untouched. */
#desktop-search:placeholder-shown:not(:focus) ~ label,
#mobile-search:placeholder-shown:not(:focus) ~ label {
    opacity: 0;
}

#desktop-search:not(:focus):placeholder-shown::placeholder,
#mobile-search:not(:focus):placeholder-shown::placeholder {
    color: rgb(145 158 171);
    opacity: 1;
}

@media screen and (min-width: 640px) {
    .sm\:text-\[15px\] { font-size: 15px; }
    .sm\:h-\[140px\] { height: 140px; }
    .sm\:min-h-\[150px\] { min-height: 150px; }
    .sm\:max-w-\[120px\] { max-width: 120px; }
    .sm\:max-w-\[220px\] { max-width: 220px; }
    .sm\:min-w-\[36px\] { min-width: 36px; }
    .sm\:pb-\[70px\] { padding-bottom: 70px; }
}
@media screen and (min-width: 768px) {
    .md\:max-w-\[150px\] { max-width: 150px; }
    .md\:max-w-\[260px\] { max-width: 260px; }
}
@media screen and (min-width: 1024px) {
    .lg\:-mb-\[110px\] { margin-bottom: -110px; }
    .lg\:pt-\[130px\] { padding-top: 130px; }
    .lg\:before\:bg-\[var\(--color-package-deals-bg\,\#FFEB69\)\]::before {
        background-color: var(--color-package-deals-bg, #ffeb69);
    }
    .lg\:after\:bg-\[var\(--color-package-deals-bg\,\#FFEB69\)\]::after {
        background-color: var(--color-package-deals-bg, #ffeb69);
    }
    .lg\:before\:bg-\[url\(\'\/assets\/images\/slider-left-shape\.png\'\)\]::before {
        background-image: url('/assets/images/slider-left-shape.png');
    }
    .lg\:after\:bg-\[url\(\'\/assets\/images\/slider-right-shape\.png\'\)\]::after {
        background-image: url('/assets/images/slider-right-shape.png');
    }
}
@media screen and (min-width: 1536px) {
    .2xl\:max-w-\[340px\] { max-width: 340px; }
    .2xl\:max-w-\[800px\] { max-width: 800px; }
}

/* ===== 4. Component polish ================================================ */

/* --- Buttons ------------------------------------------------------------- */
.btn {
    transition:
        background-color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}
.btn:not(:disabled):active {
    transform: translateY(1px);
}
.btn:disabled,
.btn-disabled {
    cursor: not-allowed;
}
/* Loading state toggled by JS: keeps width stable, shows a spinner. */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lv-spin 0.7s linear infinite;
    color: var(--color-btn-primary-text, #ffffff);
}
@keyframes lv-spin {
    to { transform: rotate(360deg); }
}

/* --- Cards --------------------------------------------------------------- */
.product-card-1 {
    background-color: var(--surface);
    border-color: var(--line);
    transition:
        box-shadow var(--duration-slow) var(--ease-out),
        border-color var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}
@media (hover: hover) and (min-width: 768px) {
    .product-card-1:hover {
        box-shadow: var(--shadow-md);
        border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
    }
}
/* Touch devices get no hover affordance — keep the action row reachable. */
@media (hover: none) {
    .product-card-1 .product-btn-actions {
        opacity: 1;
        position: static;
        margin-top: 0.5rem;
        justify-content: flex-start;
    }
}

/* --- Images -------------------------------------------------------------- */
/* Product photography is portrait 4:5 (source images are e.g. 960x1200).
   Reserve space so late-loading product images do not shift the layout. */
.product-image img,
.product-image {
    aspect-ratio: 4 / 5;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
img[loading="lazy"] {
    content-visibility: auto;
}

/* --- Forms --------------------------------------------------------------- */
.input-group {
    transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background-color var(--duration-base) var(--ease-out);
}
.input-group:focus-within {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
}
/* Keep native validation readable without stealing focus styling. */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    border-color: var(--color-error, #cb0233);
}
label {
    -webkit-tap-highlight-color: transparent;
}
/* Bigger, more forgiving checkboxes / radios. */
input[type="checkbox"]:not(.size-\[18px\]):not([class*="size-"]),
input[type="radio"] {
    min-width: 18px;
    min-height: 18px;
    accent-color: var(--brand);
}

/* --- Badges / price ------------------------------------------------------ */
.badge-discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-error, #cb0233);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
}
.price-current {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.price-old {
    font-variant-numeric: tabular-nums;
    text-decoration: line-through;
    color: var(--text-muted);
}

/* --- Tables -------------------------------------------------------------- */
.lv-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.lv-table-responsive > table {
    min-width: 100%;
}
@media (max-width: 767px) {
    .lv-table-responsive > table {
        min-width: 600px;
    }
}

/* --- Sticky header ------------------------------------------------------- */
.sticky-header.stickybar {
    box-shadow: var(--shadow-sm);
}

/* ===== 5. States ========================================================== */

/* --- Skeleton ------------------------------------------------------------ */
.lv-skeleton {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--brand) 8%, #ffffff);
    border-radius: var(--radius-md);
}
.lv-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: lv-shimmer 1.4s ease-in-out infinite;
}
@keyframes lv-shimmer {
    100% { transform: translateX(100%); }
}
.lv-skeleton-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
/* Skeleton placeholder sized like the portrait product-image frame. */
.lv-skeleton-product {
    aspect-ratio: 4 / 5;
}

/* --- Compact product thumbnails (cart / wishlist / checkout rows) ------
   Portrait 4:5 crops sized for tabular layouts; the arbitrary Tailwind
   sizes these replace were never compiled into style.css. */
/* Quick-view drawer: stacked product shots as uniform portrait frames. */
.quick-view-sidebar .product-images-wrapper img {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    object-fit: cover;
    background: #f4f3f5;
}
/* Sellzy sliders: custom.css forces height:100% on .slick-slide > div, which
   stretches the image frame past its 4:5 box (and crops the photo). Undo the
   stretching so the portrait frame and photo stay an exact 4:5. */
.sellzy-slider .slick-slide > .product-image-container { height: auto !important; flex-direction: column !important; }
.lv-thumb-lg { width: 96px;  height: 120px; flex: none; }
.lv-thumb-md { width: 80px;  height: 100px; flex: none; }
.lv-thumb-sm { width: 60px;  height: 75px;  flex: none; }
.cart-product-item-image { width: 72px; height: 90px; flex: none; }
@media screen and (min-width: 640px) {
    .cart-product-item-image { width: 82px; height: 102px; }
}

/* --- Checkout sidebar: cart products panel ------------------------------
   The product row is a table inside an `overflow-x-auto` wrapper. A long
   product title with `white-space: nowrap` (the `truncate` utility) makes
   the cell unshrinkable, which forces the whole table past the narrow
   sidebar and produces a horizontal scrollbar. Letting the title (and the
   variant/price line) wrap fixes the underlying overflow. */
.cart-items-table .product-title {
    white-space: normal;
    overflow-wrap: anywhere;
}
.cart-items-table .cart-item-quantity,
.cart-items-table .product-offer-price {
    min-width: 0;
    overflow-wrap: anywhere;
}
.lv-skeleton-line {
    height: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-sm);
}
.lv-skeleton-line:last-child {
    width: 60%;
}

/* --- Empty state --------------------------------------------------------- */
.lv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
}
.lv-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background-color: var(--brand-soft);
    color: var(--brand);
    font-size: 2rem;
}
.lv-empty-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}
.lv-empty-text {
    max-width: 32rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* --- Toast --------------------------------------------------------------- */
.lv-toast-stack {
    position: fixed;
    z-index: 100001;
    bottom: 1.25rem;
    inset-inline-end: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}
.lv-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
    transition: opacity var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
}
.lv-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.lv-toast[data-variant="success"] { border-inline-start: 4px solid var(--color-success, #54d62c); }
.lv-toast[data-variant="error"] { border-inline-start: 4px solid var(--color-error, #cb0233); }
.lv-toast[data-variant="info"] { border-inline-start: 4px solid var(--color-info, #1890ff); }
.lv-toast-icon {
    flex: none;
    font-size: 1.125rem;
    line-height: 1.2;
}
.lv-toast[data-variant="success"] .lv-toast-icon { color: var(--color-success-dark, #229a16); }
.lv-toast[data-variant="error"] .lv-toast-icon { color: var(--color-error, #cb0233); }
.lv-toast[data-variant="info"] .lv-toast-icon { color: var(--color-info-dark, #0c53b3); }
.lv-toast-close {
    flex: none;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.lv-toast-close:hover {
    color: var(--text);
}

/* --- PWA install prompt -------------------------------------------------- */
.lv-install-prompt {
    position: fixed;
    z-index: 100002;
    inset-inline: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.lv-install-prompt[hidden] {
    display: none;
}
@media (min-width: 640px) {
    .lv-install-prompt {
        inset-inline: auto;
        inset-inline-end: 1.5rem;
        bottom: 1.5rem;
        width: 24rem;
    }
}

/* ===== 6. RTL safety + responsive fixes =================================== */

/* Logical spacing beats physical left/right for the drawer + tooltips. */
[dir="rtl"] .before\:left-\[calc\(50\%-8px\)\]::before {
    left: auto;
    right: calc(50% - 8px);
}

/* Prevent horizontal overflow. The off-canvas drawers are `position: fixed`
   and parked 200px past the viewport with `translate-x`, so they extend the
   *viewport* scroll box — clipping `body` alone is not enough, it has to be on
   the root element. `clip` (rather than `hidden`) keeps the root scroller
   scrollable on the Y axis without creating a nested scroll container. */
html,
body {
    overflow-x: clip;
}

/* Long product titles / emails must never break the grid. */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
}
a, span, p, td, th, button {
    overflow-wrap: break-word;
}

/* Images never exceed their column. */
img {
    max-width: 100%;
}

/* Keep the mobile bottom bar above page content but below dialogs. */
@media (max-width: 767px) {
    .mobile-bottom-bar {
        z-index: 60;
    }
}

/* Print: hide chrome, keep the receipt-ish content readable. */
@media print {
    .header-top,
    .header-middle,
    .header-bottom,
    .mobile-header,
    .mobile-bottom-bar,
    .footer-area,
    footer,
    .scroll-to-top,
    #preloader,
    .lv-toast-stack,
    .lv-install-prompt {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

/* ==========================================================================
   7. PWA chrome — install prompt, update toast, offline banner
   ========================================================================== */

.lv-toast-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary, #3d210c);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast, 150ms) ease;
}

.lv-toast-action:hover {
  background: var(--color-primary-dark, #5f381b);
}

.lv-toast-action--ghost {
  background: transparent;
  color: var(--text-muted, #6b7280);
}

.lv-toast-action--ghost:hover {
  background: rgba(128, 128, 128, .12);
}

.lv-install-prompt {
  display: flex;
  align-items: center;
  gap: .75rem;
  right: 1rem;
  left: 1rem;
  padding: .875rem 1rem;
  background: #111827;
  color: #f9fafb;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl, 0 20px 40px -12px rgba(0, 0, 0, .35));
}

.lv-install-prompt__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .1);
  font-size: 1.125rem;
}

.lv-install-prompt__text {
  flex: 1 1 auto;
  min-width: 0;
}

.lv-install-prompt__title {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
}

.lv-install-prompt__sub {
  font-size: .75rem;
  opacity: .75;
}

.lv-install-prompt__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.lv-install-prompt__dismiss {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .7;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem;
}

.lv-install-prompt__dismiss:hover {
  opacity: 1;
}

.lv-offline-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: var(--color-warning, #cfc0b4);
  color: #1f2937;
  font-size: .8125rem;
  font-weight: 500;
  transform: translateY(-100%);
  transition: transform var(--duration-base, 250ms) ease;
}

.lv-offline-banner.is-visible {
  transform: translateY(0);
}

.lv-offline-banner svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* --------------------------------------------------------------------------
   Hero slider — the content column is a flex item with no basis, so long
   headlines collapse to min-content and wrap one letter per line.
   -------------------------------------------------------------------------- */
/* `custom.css` gives every `.slick-slide > div` `display:flex`, which turns this
   column into a row and squeezes each child down to min-content. */
.single-hero-slider-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* …and the same stylesheet forces `height:100%` + `flex-direction:column` on
   *every* second-level div, which stretches the badge row to the full slide
   height and pushes the headline to the bottom. The selector below repeats
   the theme's own ancestors so that it wins the specificity tie-break against
   `.sellzy-slider .slick-slide > div > div`. */
.sellzy-slider .slick-slide .single-hero-slider-content > * {
  height: auto !important;
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: row !important;
}

.single-hero-slider-content h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

.single-hero-slider-content h6 {
  font-size: clamp(.875rem, .8rem + .3vw, 1.125rem);
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}

.single-hero-slider-content p {
  font-size: clamp(.875rem, .82rem + .3vw, 1.0625rem);
  line-height: 1.55;
  max-width: 34ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
}

/* ==========================================================================
   8. Product card
   --------------------------------------------------------------------------
   The theme's `product-card-1` gives the image `w-full` with no height, so a
   grid of mixed aspect ratios renders ragged. These rules normalise the image
   box, add the hover lift, and provide the availability badge + sold-out
   treatment the storefront was missing.
   ========================================================================== */

.product-card-1 {
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.product-card-1:hover {
  transform: translateY(-4px);
  border-color: var(--brand, #008080) !important;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / .18);
}

/* Portrait 4:5 image box for every card in every grid, matching the
   required product-photography ratio (was 1:1, which cropped garments). */
.product-card-1 .product-image {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card-1 .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two-line clamp so long titles don't push prices out of alignment. */
.product-card-1 .product-content h5 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3rem;
  text-wrap: pretty;
}

.product-card-1 .product-content h5 a {
  transition: color .2s ease;
}

.product-card-1 .product-content h5 a:hover {
  color: var(--brand, #008080);
}

/* ---------- availability badge ---------- */

.lv-card-badges {
  position: absolute;
  inset-inline-start: .75rem;
  top: .75rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
  pointer-events: none;
}

.lv-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .5rem;
  border-radius: 9999px;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.25rem;
  letter-spacing: .01em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.lv-badge-sale {
  background: #e11d48;
  color: #fff;
}

.lv-badge-new {
  background: var(--brand, #008080);
  color: #fff;
}

.lv-badge-out {
  background: rgb(17 24 39 / .82);
  color: #fff;
}

/* ---------- sold-out treatment ---------- */

/* The product photo stays fully colorful; only the centered badge marks
   the card as sold out. The overlay never intercepts clicks. */
.lv-card-soldout {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: .75rem;
}

.lv-card-soldout span {
  padding: .4rem 1rem;
  border-radius: 9999px;
  background: #d92d20;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgb(217 45 32 / .4);
}

/* Disabled primary action on a sold-out card. */
.lv-btn-disabled {
  pointer-events: none;
  opacity: .55;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* ---------- price ---------- */

.lv-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap-x: .5rem;
  gap-y: .125rem;
}

.lv-price-current {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #1a1a1a);
  font-variant-numeric: tabular-nums;
}

.lv-price-old {
  font-size: .8125rem;
  color: var(--text-muted, #8a8a8a);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}

.lv-price-save {
  font-size: .75rem;
  font-weight: 700;
  color: #e11d48;
}

/* Keep the hover action rail above the sold-out veil. */
.product-card-1 .product-btn-actions {
  z-index: 11;
}

@media (prefers-reduced-motion: reduce) {
  .product-card-1,
  .product-card-1:hover {
    transform: none;
    transition: none;
  }
}

/* ===== 14. Best-selling section (homepage) =================================
   Editorial, product-first layout: no full-bleed decorative background, a
   quiet accent rule under the heading, and a text-link "view all" affordance
   so the grid, not chrome, carries the section. */
.lv-bestselling .lv-bestselling-accent {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  margin: 0.625rem auto 0;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .lv-bestselling .lv-bestselling-accent {
    margin-inline: 0;
  }
}

.lv-bestselling .lv-view-all {
  color: var(--brand);
  text-underline-offset: 3px;
  transition: color var(--duration-base) var(--ease-out),
    gap var(--duration-base) var(--ease-out);
}

.lv-bestselling .lv-view-all:hover,
.lv-bestselling .lv-view-all:focus-visible {
  color: var(--brand-strong);
  text-decoration: underline;
}

.lv-bestselling .lv-view-all:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

.lv-bestselling .lv-view-all i {
  transition: transform var(--duration-base) var(--ease-out);
}

.lv-bestselling .lv-view-all:hover i {
  transform: translateX(4px);
}

[dir="rtl"] .lv-bestselling .lv-view-all:hover i {
  transform: translateX(-4px) scaleX(-1);
}

[dir="rtl"] .lv-bestselling .lv-view-all i {
  transform: scaleX(-1);
}

/* In the 2-up mobile grid the card action button is narrow; compact it so
   labels like "Out of Stock" stay fully visible. */
@media (max-width: 479.98px) {
  .lv-bestselling .product-card-1 .btn-section {
    gap: 0.5rem;
  }

  .lv-bestselling .product-card-1 .btn-section .wishlist-toggle-btn {
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
  }

  .lv-bestselling .product-card-1 .btn-section .btn {
    padding-inline: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.125rem;
    gap: 0.25rem;
    min-width: 0;
  }

  .lv-bestselling .product-card-1 .btn-section .btn i {
    display: none;
  }

  .lv-bestselling .product-card-1 .btn-section .btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ===== 15. My Account dashboard ============================================
   Premium editorial account area on the live chocolate-brown theme: a page
   header, a refined sidebar with count badges, stat cards, recent-order rows,
   and compact wishlist/address cards. All brand colour flows through the
   theme variables; no !important. */

/* --- Page header ----------------------------------------------------------- */
.ma-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand) 5%, var(--surface)) 0%,
      var(--surface) 55%
    );
}

.ma-page-header__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 1.5rem;
  line-height: 1;
}

.ma-page-header__title {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.ma-page-header__subtitle {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .ma-page-header__title {
    font-size: 1.625rem;
  }
}

/* --- Section titles (all panes) -------------------------------------------- */
.ma-section-title {
  position: relative;
  padding-inline-start: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.ma-section-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  translate: 0 -50%;
  width: 4px;
  height: 1.125em;
  border-radius: var(--radius-pill);
  background: var(--brand);
}

/* --- Sidebar nav ------------------------------------------------------------ */
.ma-nav {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.ma-nav__item {
  position: relative;
  min-height: 48px;
  color: var(--text);
  text-align: start;
}

.ma-nav__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ma-nav__item.active {
  background-color: var(--brand);
  color: var(--color-white, #ffffff);
  box-shadow: var(--shadow-sm);
}

.ma-nav__item.active i {
  color: inherit;
}

.ma-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ma-nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding-inline: 0.4375rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  background: var(--brand-soft);
  color: var(--brand);
  transition: background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.ma-nav__item.active .ma-nav__badge {
  background: color-mix(in srgb, var(--color-white, #ffffff) 22%, transparent);
  color: var(--color-white, #ffffff);
}

.ma-nav__divider {
  height: 1px;
  margin-block: 0.5rem;
  background: var(--line);
}

.ma-nav__item--logout {
  color: var(--color-error-dark, #b42318);
}

.ma-nav__item--logout:hover,
.ma-nav__item--logout:focus-visible {
  background-color: var(--color-error, #ff4842);
  color: var(--color-white, #ffffff);
}

/* Below the lg sidebar breakpoint the nav becomes a horizontal snap rail. */
@media (max-width: 1023.98px) {
  .ma-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-pill);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ma-nav::-webkit-scrollbar {
    display: none;
  }

  .ma-nav li {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .ma-nav__item {
    width: auto;
    padding-inline: 1rem;
    border-radius: var(--radius-pill);
    gap-x: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .ma-nav__item i {
    font-size: 1.125rem;
  }

  .ma-nav__divider {
    display: none;
  }
}

/* --- Cards ------------------------------------------------------------------ */
.ma-card {
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 768px) {
  .ma-card {
    padding: 1.5rem;
  }
}

.ma-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ma-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
}

.ma-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.25rem 0;
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-out);
}

.ma-card__link:hover,
.ma-card__link:focus-visible {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ma-card__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ma-card__link-arrow {
  transition: translate var(--duration-fast) var(--ease-out);
}

.ma-card__link:hover .ma-card__link-arrow {
  translate: 3px 0;
}

[dir="rtl"] .ma-card__link-arrow {
  rotate: 180deg;
}

[dir="rtl"] .ma-card__link:hover .ma-card__link-arrow {
  translate: 0 -3px;
}

.ma-card__footnote {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* --- Stat cards -------------------------------------------------------------- */
.ma-stat {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.ma-stat::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
  opacity: 0.85;
}

.ma-stat:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
}

.ma-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.375rem;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 1.25rem;
  line-height: 1;
}

.ma-stat__icon--info {
  background: color-mix(in srgb, var(--color-info, #1890ff) 12%, var(--surface));
  color: var(--color-info-dark, #0d5ed8);
}

.ma-stat__icon--success {
  background: color-mix(in srgb, var(--color-success, #54d62c) 14%, var(--surface));
  color: var(--color-success-dark, #2e9313);
}

.ma-stat__icon--primary {
  background: var(--brand);
  color: var(--color-white, #ffffff);
}

.ma-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ma-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.ma-stat__value--money {
  font-size: 1.25rem;
}

.ma-stat__unit {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .ma-stat {
    padding: 1.25rem 1.375rem;
  }

  .ma-stat__value {
    font-size: 1.75rem;
  }

  .ma-stat__value--money {
    font-size: 1.375rem;
  }
}

/* --- Recent-order rows -------------------------------------------------------- */
.ma-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.875rem 0;
  border-top: 1px solid var(--line);
}

.ma-order-row:last-child {
  padding-bottom: 0.25rem;
}

.ma-order-row__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.ma-order-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ma-order-row__id {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.ma-order-row__meta {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.ma-order-row__total {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.ma-order-row__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--brand);
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.ma-order-row__view:hover,
.ma-order-row__view:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--color-white, #ffffff);
}

.ma-order-row__view:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ma-order-row__view-arrow {
  font-size: 1.125rem;
}

[dir="rtl"] .ma-order-row__view-arrow {
  rotate: 180deg;
}

/* --- Status badges ------------------------------------------------------------- */
.ma-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ma-badge--warning {
  background: color-mix(in srgb, var(--color-warning, #ffc107) 18%, var(--surface));
  color: var(--color-warning-dark, #b88600);
}

.ma-badge--info {
  background: color-mix(in srgb, var(--color-info, #1890ff) 14%, var(--surface));
  color: var(--color-info-dark, #0d5ed8);
}

.ma-badge--success {
  background: color-mix(in srgb, var(--color-success, #54d62c) 16%, var(--surface));
  color: var(--color-success-dark, #2e9313);
}

.ma-badge--error {
  background: color-mix(in srgb, var(--color-error, #ff4842) 14%, var(--surface));
  color: var(--color-error-dark, #b42318);
}

.ma-badge--neutral {
  background: var(--surface-muted);
  color: var(--text-muted);
}

/* --- Wishlist thumbnail rail ----------------------------------------------------- */
.ma-thumb-rail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ma-thumb-rail__item {
  display: block;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.ma-thumb-rail__item:hover,
.ma-thumb-rail__item:focus-visible {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.ma-thumb-rail__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ma-thumb-rail__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ma-thumb-rail__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 700;
}

/* --- Address card ------------------------------------------------------------------ */
.ma-address-card {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.ma-address-card__name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.125rem;
}

.ma-address-card__phone {
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--text);
}

/* --- Empty states -------------------------------------------------------------------- */
.ma-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.375rem;
  padding: 2rem 1rem;
}

.ma-empty--compact {
  padding: 1.25rem 0.5rem;
}

.ma-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand);
}

.ma-empty--compact .ma-empty__icon {
  width: 44px;
  height: 44px;
}

.ma-empty__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.ma-empty__text {
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 34ch;
}

.ma-empty__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.75rem;
  padding-inline: 1.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--color-white, #ffffff);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out);
}

.ma-empty__action:hover,
.ma-empty__action:focus-visible {
  background: var(--brand-strong);
  color: var(--color-white, #ffffff);
}

.ma-empty__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- 320px safety ---------------------------------------------------------------------- */
@media (max-width: 359.98px) {
  .ma-page-header {
    padding: 1rem;
  }

  .ma-page-header__mark {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .ma-stat {
    padding: 0.875rem;
  }

  .ma-order-row {
    gap: 0.5rem;
  }

  .ma-order-row__thumb {
    width: 40px;
    height: 40px;
  }
}

/* --- My-account: cancel order button ------------------------------------------------ */
.lv-btn-cancel {
  color: var(--color-error, #cb0233);
  border-color: var(--color-error, #cb0233);
}

.lv-btn-cancel:hover {
  background-color: var(--color-error, #cb0233);
  border-color: var(--color-error, #cb0233);
  color: #fff;
}

/* --- Shop filter: category tree --------------------------------------------------- */
.category-toggle {
  flex: none;
  width: 22px;
  height: 22px;
  margin-inline-end: 2px;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.category-toggle .hgi {
  font-size: 16px;
  line-height: 1;
}

.category-children {
  margin-top: 4px;
}

/* --- My-account: add products to a pending order -------------------------- */
.lv-btn-add-to-order {
  color: var(--brand, #3d210c);
  border: 1px solid var(--brand, #3d210c);
}

.lv-btn-add-to-order:hover {
  background-color: var(--brand, #3d210c);
  border-color: var(--brand, #3d210c);
  color: #fff;
}

/* --- Append-to-order banner (shop / cart / checkout) ---------------------- */
.lv-append-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-radius: 14px;
  background-color: #fff8e6;
  border: 1px solid #f3d68f;
  color: #7a4d07;
}

.lv-append-banner__icon .hgi {
  font-size: 22px;
  color: #b26a00;
}

.lv-append-banner__text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  flex: 1 1 260px;
}

.lv-append-banner__btn {
  border: 1px solid #b26a00;
  border-radius: 90px;
  background: transparent;
  color: #7a4d07;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 18px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lv-append-banner__btn:hover {
  background-color: #b26a00;
  color: #fff;
}

.lv-append-notice {
  padding: 12px 20px;
  border-radius: 14px;
  background-color: #eef6ff;
  border: 1px solid #bcd9f5;
}

.lv-append-notice__text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c5d99;
}

/* --- Slide sidebars: close button placement ------------------------------- */
/* The theme markup uses `ltr:`/`rtl:` Tailwind variants that never made it into
   the compiled stylesheet, so `.close-sidebar-btn` had no horizontal position
   and sat on top of the sidebar heading. A logical property pins it to the
   inline-end edge in both LTR and RTL, matching the original intent. */
.close-sidebar-btn {
  inset-inline-start: auto;
  inset-inline-end: 1.5rem;
}

/* --- Cancel-order confirmation modal --- */
.lv-modal {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.lv-modal--open {
	visibility: visible;
	opacity: 1;
}
.lv-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}
.lv-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--bs-body-bg, #fff);
	border-radius: 20px;
	padding: 28px 26px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	transform: scale(0.92) translateY(10px);
	transition: transform 0.2s ease;
}
.lv-modal--open .lv-modal__dialog {
	transform: scale(1) translateY(0);
}
.lv-modal__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 72, 66, 0.1);
	color: #d92d20;
}
.lv-modal__icon svg {
	width: 28px;
	height: 28px;
}
.lv-modal__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 6px;
}
.lv-modal__text {
	font-size: 0.875rem;
	margin: 0 0 10px;
}
.lv-modal__ref {
	font-size: 0.85rem;
	margin: 0 0 8px;
}
.lv-modal__hint {
	font-size: 0.78rem;
	color: #98a2b3;
	margin: 0 0 18px;
}
.lv-modal__actions {
	display: flex;
	gap: 12px;
}
.lv-modal__btn {
	flex: 1;
	border-radius: 80px;
	padding: 10px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.lv-modal__btn--secondary {
	background: #f2f4f7;
	color: #344052;
	border-color: #dfe3e8;
}
.lv-modal__btn--secondary:hover {
	background: #e4e7ec;
}
.lv-modal__btn--danger {
	background: var(--color-error, #cb0233);
	color: #fff;
	border-color: var(--color-error, #cb0233);
}
.lv-modal__btn--danger:hover {
	opacity: 0.9;
}

/* --- Auth (login) page ---------------------------------------------------- */
.lv-auth {
  min-height: 85dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 3rem;
  background:
    radial-gradient(900px 480px at 100% -10%, rgba(61, 33, 12, 0.06), transparent 60%),
    linear-gradient(180deg, #faf7f2 0%, #f3ede4 100%);
}
.lv-auth__card {
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #fff;
  border: 1px solid #ece4d8;
  border-radius: 24px;
  box-shadow: 0 24px 60px -32px rgba(61, 33, 12, 0.35);
  overflow: hidden;
  margin-inline: auto;
}
.lv-auth__aside { display: none; }
.lv-auth__panel {
  padding: 1.75rem 1.25rem 2rem;
  min-width: 0;
}
.lv-auth__head {
  text-align: center;
  margin-bottom: 1.25rem;
}
.lv-auth__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.lv-auth__subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}
.lv-auth__social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.lv-auth__divider {
  margin: 0 0 1.25rem;
}
.lv-auth__signup {
  margin-top: 1.25rem;
  text-align: center;
}
@media (min-width: 768px) {
  .lv-auth { padding: 3rem 1.5rem 4rem; }
  .lv-auth__card { max-width: 660px; }
  .lv-auth__panel { padding: 2.25rem 2.5rem 2.5rem; }
}
@media (min-width: 1024px) {
  .lv-auth__card {
    max-width: 940px;
    grid-template-columns: 1.05fr minmax(0, 1fr);
  }
  .lv-auth__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 2.5rem;
    background: linear-gradient(160deg, #f6ecdd 0%, #eedfc6 100%);
  }
  .lv-auth__aside-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    margin: 0;
    color: #3d210c;
  }
  .lv-auth__aside-text {
    font-size: 0.9rem;
    color: rgba(61, 33, 12, 0.72);
    margin: 0 0 0.5rem;
    max-width: 30ch;
  }
  .lv-auth__aside-img {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    height: auto;
  }
  .lv-auth__panel {
    padding: 3rem 3rem 3.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --- Order details page --------------------------------------------------- */
.odx-hero-wrap { padding-block: 0.5rem 1.25rem; }
.odx-hero {
  background: #fff;
  border: 1px solid #ece4d8;
  border-radius: 24px;
  box-shadow: 0 24px 60px -32px rgba(61, 33, 12, 0.35);
  padding: 1.5rem 1.25rem;
}
.odx-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0 1.5rem;
}
.odx-thanks__img { width: min(240px, 70vw); height: auto; margin-bottom: 1.25rem; }
.odx-thanks__title { font-size: clamp(1.35rem, 4vw, 2.25rem); font-weight: 700; margin: 0 0 0.5rem; }
.odx-thanks__text { font-size: 0.9rem; color: #6b7280; margin: 0; max-width: 34rem; line-height: 1.7; }

.odx-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed #e7ddcf;
  margin-bottom: 1.5rem;
}
.odx-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a1887f;
  margin: 0 0 0.15rem;
}
.odx-hero__number { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; margin: 0; }
.odx-hero__aside { text-align: right; }
.odx-hero__date { font-size: 0.8rem; color: #6b7280; margin: 0.5rem 0 0; }
.odx-status {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: capitalize;
}

/* Progress tracker (single rail + riding marker) */
.odx-progress {
  --odx-p: 0;
  margin-top: 1.75rem;
}
.odx-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.odx-progress__kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a1887f;
}
.odx-progress__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(61, 33, 12, 0.07);
  color: #3d210c;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: capitalize;
}
.odx-progress__pulse {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.odx-progress__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: odxPulse 1.8s ease-out infinite;
}
@keyframes odxPulse {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.odx-progress__percent {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
.odx-progress__track {
  position: relative;
  height: 14px;
  margin: 1.9rem 0 1.15rem;
  border-radius: 999px;
  background: #f0e9df;
  box-shadow: inset 0 1px 2px rgba(61, 33, 12, 0.08);
}
.odx-progress__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--odx-p) * 1%);
  min-width: 14px;
  border-radius: 999px;
  background-image: linear-gradient(to right, #7a4b22, #3d210c);
  transition: width 0.6s ease;
}
html[dir="rtl"] .odx-progress__fill { background-image: linear-gradient(to left, #7a4b22, #3d210c); }
.odx-progress__marker {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--odx-p) * 1%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #3d210c;
  box-shadow: 0 10px 20px -10px rgba(61, 33, 12, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.9);
}
html[dir="rtl"] .odx-progress__marker { transform: translate(50%, -50%); }
.odx-progress__marker .hgi { font-size: 18px; }
.odx-progress__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.odx-progress__label {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.1rem;
}
.odx-progress__name {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #a1887f;
}
.odx-progress__label.is-done .odx-progress__name { color: #3d210c; }
.odx-progress__label.is-active .odx-progress__name { color: #3d210c; font-weight: 800; }
.odx-progress__check { flex: 0 0 auto; width: 14px; height: 14px; }
.odx-progress__hint { font-size: 0.7rem; color: #a1887f; }

/* Cancelled variant */
.odx-progress--cancelled .odx-progress__pill {
  background: rgba(255, 72, 66, 0.12);
  color: #b42318;
}
.odx-progress--cancelled .odx-progress__fill {
  background-image: linear-gradient(to right, #f97066, #d92d20);
}
html[dir="rtl"] .odx-progress--cancelled .odx-progress__fill {
  background-image: linear-gradient(to left, #f97066, #d92d20);
}
.odx-progress--cancelled .odx-progress__marker {
  color: #b42318;
  box-shadow: 0 10px 20px -10px rgba(217, 45, 32, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.9);
}
.odx-progress--cancelled .odx-progress__label.is-done .odx-progress__name { color: #b42318; }

@media (max-width: 575px) {
  .odx-progress__label { flex: 1 1 44%; }
}
@media (max-width: 380px) {
  .odx-progress__percent { display: none; }
  .odx-progress__marker { width: 34px; height: 34px; }
  .odx-progress__marker .hgi { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .odx-progress__pulse::after { animation: none; }
  .odx-progress__fill { transition: none; }
}
.odx-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 600;
}
.odx-note--error { background: rgba(255, 72, 66, 0.1); color: #b42318; }
.odx-note .hgi { font-size: 20px; }

.odx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
.odx-col-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.odx-col-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.odx-card {
  background: #fff;
  border: 1px solid #ece4d8;
  border-radius: 20px;
  overflow: hidden;
}
.odx-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #faf7f2;
  border-bottom: 1px solid #ece4d8;
}
.odx-card__head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.odx-chip {
  font-size: 0.72rem;
  font-weight: 700;
  color: #3d210c;
  background: rgba(61, 33, 12, 0.08);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

.odx-items { list-style: none; margin: 0; padding: 0.25rem 1.25rem; }
.odx-item {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid #f1ece4;
  align-items: flex-start;
}
.odx-item:last-child { border-bottom: 0; }
.odx-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  background: #f6f1ea;
  border: 1px solid #eee7dc;
}
.odx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.odx-item__body { flex: 1 1 auto; min-width: 0; }
.odx-item__title { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.25rem; line-height: 1.4; }
.odx-item__meta { font-size: 0.78rem; color: #6b7280; margin: 0; }
.odx-item__total {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}
.odx-item__note { font-size: 0.75rem; color: #6b7280; margin: 0.4rem 0 0; }

.odx-return { margin-top: 0.5rem; }
.odx-return summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: #b42318;
  border: 1px solid rgba(255, 72, 66, 0.35);
  background: rgba(255, 72, 66, 0.06);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}
.odx-return summary::-webkit-details-marker { display: none; }
.odx-return summary .hgi { font-size: 15px; }
.odx-return__form { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 420px; }
.odx-return__form textarea {
  width: 100%;
  font-size: 0.8rem;
  border: 1px solid #e5dcd0;
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  resize: vertical;
}
.odx-return__form textarea:focus { outline: none; border-color: #b42318; }
.odx-return__form button {
  align-self: flex-start;
  border: 0;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: #3d210c;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
}
.odx-return__form button:hover { opacity: 0.9; }

.odx-return-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.45rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.odx-return-badge .hgi { font-size: 14px; }
.odx-return-badge--success { background: rgba(84, 214, 44, 0.14); color: #1e8e3e; }
.odx-return-badge--warning { background: rgba(255, 193, 7, 0.16); color: #a1650b; }
.odx-return-badge--error { background: rgba(255, 72, 66, 0.12); color: #b42318; }

/* --- Order details: 7-day return window hint --- */
.odx-return-window {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0.7rem 1.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1e8e3e;
  background: rgba(84, 214, 44, 0.08);
  border-bottom: 1px solid rgba(84, 214, 44, 0.18);
}
.odx-return-window .hgi { font-size: 15px; line-height: 1; }
.odx-return-window__count {
  font-size: 0.7rem;
  font-weight: 800;
  color: #1e8e3e;
  background: rgba(84, 214, 44, 0.16);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
.odx-return-window--closed {
  color: #b42318;
  background: rgba(255, 72, 66, 0.06);
  border-bottom-color: rgba(255, 72, 66, 0.16);
}
.odx-return-window--closed .odx-return-window__count {
  color: #b42318;
  background: rgba(255, 72, 66, 0.12);
}
.odx-return-window--muted .odx-return-window__count {
  color: #6b7280;
  background: rgba(145, 158, 171, 0.16);
}
.odx-return-window--muted {
  color: #6b7280;
  background: #faf7f2;
  border-bottom-color: #ece4d8;
}

.odx-delivery { display: flex; gap: 1rem; padding: 1.25rem; }
.odx-delivery__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(61, 33, 12, 0.08);
  color: #3d210c;
}
.odx-delivery__icon .hgi { font-size: 22px; }
.odx-delivery__body { min-width: 0; }
.odx-delivery__name { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; margin: 0 0 0.3rem; }
.odx-delivery__name .hgi { font-size: 18px; color: #a1887f; }
.odx-delivery__addr { font-size: 0.82rem; color: #6b7280; line-height: 1.7; margin: 0; word-break: break-word; }
.odx-delivery__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0.2rem 0 0;
}
.odx-delivery__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.odx-delivery__note {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.85rem;
  background: #faf7f2;
  border: 1px solid #eee7dc;
  border-radius: 12px;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.65;
}

.odx-gift { display: flex; gap: 1rem; padding: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.odx-gift__img { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; border: 1px solid #eee7dc; }
.odx-gift__body { min-width: 0; flex: 1; }
.odx-gift__wrap { font-size: 0.85rem; margin: 0 0 0.4rem; }
.odx-gift__msg {
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.9rem;
  background: #faf7f2;
  border: 1px solid #eee7dc;
  border-radius: 12px;
  font-size: 0.82rem;
  font-style: italic;
  color: #6b7280;
}

.odx-totals { list-style: none; margin: 0; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.odx-totals li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; color: #4b5563; }
.odx-totals li span { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.odx-totals li .hgi { font-size: 16px; color: #a1887f; }
.odx-totals li.is-discount strong { color: #b42318; }
.odx-totals__grand {
  border-top: 1px dashed #e7ddcf;
  padding-top: 0.75rem;
  font-size: 1rem !important;
  color: #1f2937 !important;
}
.odx-totals__grand strong { font-size: 1.05rem; font-weight: 800; }

.odx-payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid #f1ece4;
  background: #fdfbf8;
}
.odx-payment__method { font-size: 0.8rem; font-weight: 700; text-transform: capitalize; }
.odx-payment__status {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  background: rgba(255, 193, 7, 0.16);
  color: #a1650b;
}
.odx-payment__status.is-paid { background: rgba(84, 214, 44, 0.14); color: #1e8e3e; }

.odx-actions { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; }
.odx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.7rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
  text-decoration: none;
}
.odx-btn .hgi { font-size: 18px; }
.odx-btn--full { width: 100%; }
.odx-btn--primary { background: #3d210c; color: #fff; border-color: #3d210c; }
.odx-btn--primary:hover { opacity: 0.9; }
.odx-btn--outline { background: #fff; color: #3d210c; border-color: #d9cdbc; }
.odx-btn--outline:hover { background: #faf7f2; }
.odx-btn--ghost { background: transparent; color: #6b7280; border-color: transparent; }
.odx-btn--ghost:hover { color: #3d210c; background: #f6f1ea; }

@media (min-width: 768px) {
  .odx-hero { padding: 2rem 2.25rem; }
}
@media (min-width: 1024px) {
  .odx-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}

/* --- Birthday gift (my-account profile) ------------------------------------
   Small dashed "voucher" card shown under the profile form once the user
   shares their birthday; the code is redeemable through the regular cart
   coupon flow. */
.ma-bday-hint {
  margin: 0.4rem 0 0;
  padding-inline-start: 0.9rem;
  font-size: 0.75rem;
  color: #a1887f;
}
.ma-giftcard {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  border: 1.5px dashed rgba(61, 33, 12, 0.35);
  background: linear-gradient(135deg, #fff8f0, #fdf3e7);
}
.ma-giftcard__icon {
  font-size: 1.75rem;
  line-height: 1;
}
.ma-giftcard__body {
  flex: 1 1 16rem;
  min-width: 0;
}
.ma-giftcard__title {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #3d210c;
}
.ma-giftcard__meta {
  margin: 0;
  font-size: 0.78rem;
  color: #8a6d57;
}
.ma-giftcard__hint {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: #a1887f;
}
.ma-giftcard__action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ma-giftcard__code {
  padding: 0.35rem 0.7rem;
  border: 1.5px dashed #3d210c;
  border-radius: 10px;
  background: #fff;
  color: #3d210c;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.ma-giftcard__copy {
  padding: 0.35rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: #3d210c;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.ma-giftcard__copy:hover {
  opacity: 0.9;
}
.ma-giftcard__used {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(84, 214, 44, 0.16);
  color: #2b7a1f;
  font-size: 0.78rem;
  font-weight: 700;
}

/* --- My-account: coupons tab -----------------------------------------------
   Ticket-style cards: the discount on a tinted stub, the fine print beside it.
   Built from the design tokens so it follows the live theme in LTR and RTL. */
.lv-coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 1rem;
}
.lv-coupon {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.lv-coupon:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.lv-coupon__stub {
  flex: 0 0 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 1.25rem 0.5rem;
  text-align: center;
  background: var(--brand-soft);
  color: var(--brand);
  border-inline-end: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
}
.lv-coupon__amount {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.lv-coupon__off {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.lv-coupon__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem;
}
.lv-coupon__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.lv-coupon__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.lv-coupon__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  background: color-mix(in srgb, var(--color-warning, #ffc107) 18%, var(--surface));
  color: var(--color-warning-dark, #7a5200);
}
.lv-coupon__flag--gift {
  background: color-mix(in srgb, var(--color-error, #ff4842) 12%, var(--surface));
  color: var(--color-error-dark, #c92a24);
}
.lv-coupon__code {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.375rem 0.625rem;
  border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.lv-coupon__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
}
.lv-coupon__copy:hover { text-decoration: underline; }
.lv-coupon__copy.is-copied { color: var(--color-success-dark, #2e9313); }
.lv-coupon__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lv-coupon__terms li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.lv-coupon__terms .hgi { font-size: 0.875rem; color: var(--brand); }
.lv-coupon__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.25rem;
}
.lv-coupon__apply.is-busy { opacity: 0.6; pointer-events: none; }
@media (max-width: 479px) {
  .lv-coupon { flex-direction: column; }
  .lv-coupon__stub {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-inline-end: 0;
    border-block-end: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  }
}

/* ==========================================================================
   Product cards in narrow grid cells (home + shop, below 1024px).
   A card can be as slim as ~165px (2-up on a phone) or ~229px (3-up on a
   tablet), while the wishlist circle + the padded "Add to Cart" pill need
   ~218px, so the pill spilled over the neighbouring card and pushed the page
   into horizontal scroll. The wishlist becomes a chip floating on the image
   corner instead, which hands the whole row to the call to action.
   ========================================================================== */
@media (max-width: 1023.98px) {
  .product-card-1 {
    position: relative;
    padding: 0.75rem;
  }

  .product-card-1 .btn-section > .wishlist-toggle-btn {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 6;
    box-shadow: 0 4px 12px rgba(33, 43, 54, 0.1);
  }

  .product-card-1 .btn-section .btn {
    min-width: 0;
    gap: 0.25rem;
    padding-inline: 0.75rem;
  }

  .product-card-1 .btn-section .btn > .hgi { flex: none; }

  .product-card-1 .btn-section .btn > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .product-card-1 .product-content h5,
  .product-card-1 .rating-section,
  .product-card-1 .price-section { margin-bottom: 0.5rem; }
}

/* ---------------------------------------------------------------------------
 * nice-select: the closed dropdown is only faded out (opacity:0), so its
 * absolutely-positioned .list keeps extending the scrollable overflow area.
 * The theme pins .filter-select/.quick-view-select lists to right:0, and in
 * RTL the wider-than-select list pokes past the viewport's left edge, giving
 * Arabic /shop ~24px of sideways scroll from an invisible element. Closed
 * lists are also pointer-events:none, so keep them fully out of layout;
 * jquery.nice-select opens via the .open class, so the dropdown itself is
 * unchanged (it simply pops in instead of fading from an off-layout box).
 * ------------------------------------------------------------------------- */
.nice-select:not(.open) > .list {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Web push opt-in prompt (app-push.js).
 *
 * Deliberately the same box as the install prompt, one notch shorter, and
 * stacked above it in z-index order: on a first visit both can fire, and two
 * identical-looking panels side by side is how a site starts to look like
 * adware. app-pwa.js only offers install on its own terms, so the visual
 * family matters more than the ordering.
 * ------------------------------------------------------------------------- */
.lv-push-prompt {
    position: fixed;
    z-index: 100003;
    inset-inline: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.lv-push-prompt[hidden] {
    display: none;
}

.lv-push-prompt__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--primary, #3d210c) 10%, transparent);
    color: var(--primary, #3d210c);
}

.lv-push-prompt__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.lv-push-prompt__title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.lv-push-prompt__sub {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.lv-push-prompt__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

/* The account page renders one of these instead of a banner. */
[data-push-state]::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-inline-end: 0.5rem;
    background-color: currentColor;
    opacity: 0.65;
}

[data-push-state][data-state="blocked"]::before,
[data-push-state][data-state="unsupported"]::before {
    background-color: var(--color-error, #cb0233);
    opacity: 1;
}

[data-push-state][data-state="enabled"]::before {
    background-color: var(--color-success, #54d62c);
    opacity: 1;
}

/* Two prompts must never overlap into an unreadable pile on a small screen. */
@media (max-width: 639px) {
    .lv-push-prompt {
        flex-wrap: wrap;
        bottom: 0.75rem;
    }

    .lv-push-prompt__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-push-prompt {
        transition: none;
    }
}

/* ===== Comparison table ====================================================
   /compare is a horizontal table: the attribute names in the first column have
   to stay readable while the columns scroll, and a column must never be squeezed
   until its text overlaps its neighbour. Widths are declared here rather than as
   per-cell Tailwind utilities because the number of columns is data, not markup.
   Logical properties throughout: the table flips with the Arabic locale. */
.lv-compare-wrap {
    overscroll-behavior-x: contain;
}

.lv-compare-table {
    /* One label rail plus up to MAX product columns, each wide enough for a
       price, a colour list or a paragraph to be read without wrapping sideways. */
    min-width: calc(150px + 220px * 2);
}

.lv-compare-table .lv-compare-label {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    padding: 1rem 0.75rem;
    background-color: var(--surface, #fff);
    text-align: start;
    vertical-align: middle;
    font-size: 0.9375rem;
    white-space: normal;
    box-shadow: inset -1px 0 0 var(--line, #dfe3e8);
}

/* Zebra striping lives here rather than on each row because rows are printed or
   skipped by the data: a fixed class per row would leave two identical tints next
   to each other as soon as one attribute is missing. The pinned rail carries the
   same tint, or the alternation breaks where the table is stuck. */
.lv-compare-table tbody tr:nth-child(even) {
    background-color: var(--color-gray-100, #f9fafb);
}

.lv-compare-table tbody tr:nth-child(even) .lv-compare-label {
    background-color: var(--color-gray-100, #f9fafb);
}

.lv-compare-table .lv-compare-cell {
    min-width: 220px;
    padding: 1rem;
    vertical-align: middle;
    text-align: start;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-muted, #495057);
    word-break: normal;
    overflow-wrap: anywhere;
}

/* The cell stays a table cell — flexing the <td> itself pulls it out of the
   column grid and the whole row collapses into one column. The wrapper inside
   is what stacks the photo above the name.
   The head of the column starts where every other row starts: centring the photo
   looked fine with four products on a wide screen and wrong with two, because the
   table fills its wrapper and a 220px photo centred in a 630px cell floats over
   nothing, detached from the price printed underneath it. */
.lv-compare-cell-product {
    text-align: start;
    vertical-align: top;
}

.lv-compare-product-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 220px;
}

.lv-compare-thumb {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg, 16px);
    background-color: #f4f3f5;
    overflow: hidden;
}

.lv-compare-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lv-compare-remove {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--text, #212529);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

.lv-compare-remove:hover {
    background-color: var(--color-error, #cb0233);
    color: #fff;
}

.lv-compare-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    /* The name belongs to the photo it sits under, so it never gets wider. */
    max-width: 100%;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text, #212529);
}

.lv-compare-name:hover {
    color: var(--brand, #3d210c);
}

.lv-compare-yes,
.lv-compare-no {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
}

.lv-compare-yes {
    color: var(--color-success, #2f9e44);
}

.lv-compare-no {
    color: var(--color-error, #cb0233);
}

/* Star strip: the theme sprite is 18px tall with the empty row at 0 and the
   filled row at -18px. Inlined here because style.css only ships the arbitrary
   utility the demo pages happened to use. */
.lv-compare-stars {
    position: relative;
    display: block;
    width: 90px;
    height: 18px;
    overflow: hidden;
    background: url("/assets/images/star-icon.png") repeat-x 0 0;
    flex: none;
}

.lv-compare-stars-fill {
    display: block;
    height: 18px;
    background: url("/assets/images/star-icon.png") repeat-x 0 -18px;
}

.lv-compare-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.lv-compare-rating-count {
    font-size: 0.8125rem;
    color: var(--text-muted, #495057);
    font-variant-numeric: tabular-nums;
}

.lv-compare-reviews {
    color: var(--text-muted, #495057);
    opacity: 0.75;
}

.lv-compare-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lv-compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text, #212529);
}

.lv-compare-chip-plain {
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--line, #dfe3e8);
    border-radius: var(--radius-pill, 9999px);
    font-variant-numeric: tabular-nums;
}

/* The swatch is decorative next to the colour name, so a pale colour still has
   an edge that survives a white card. */
.lv-compare-swatch {
    width: 1rem;
    height: 1rem;
    flex: none;
    border-radius: 50%;
    border: 1px solid rgba(16, 24, 40, 0.16);
}

.lv-compare-description {
    margin: 0 0 0.25rem;
    /* Two products on a wide screen make a very wide column; a paragraph that runs
       to the far edge of it is not readable. */
    max-width: 46ch;
    color: var(--text-muted, #495057);
}

.lv-compare-more {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand, #3d210c);
}

.lv-compare-more:hover {
    text-decoration: underline;
}

.lv-compare-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* --- The picker (how a column gets filled) ------------------------------- */
.lv-compare-picker {
    background-color: var(--surface, #fff);
}

.lv-compare-picker-head {
    margin-bottom: 0.75rem;
}

.lv-compare-results {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.lv-compare-results:empty {
    display: none;
}

.lv-compare-result,
.lv-compare-result-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--line, #dfe3e8);
    border-radius: var(--radius-md, 12px);
    background-color: var(--surface, #fff);
}

.lv-compare-result + .lv-compare-result,
.lv-compare-result + .lv-compare-result-message,
.lv-compare-result-message + .lv-compare-result {
    margin-top: 0.5rem;
}

.lv-compare-result {
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.lv-compare-result:hover {
    border-color: var(--brand, #3d210c);
    background-color: var(--brand-soft, #f1e7de);
}

.lv-compare-result.is-blocked {
    cursor: not-allowed;
    opacity: 0.55;
}

.lv-compare-result.is-selected .lv-compare-result-action {
    color: var(--color-success, #2f9e44);
}

.lv-compare-result-message {
    color: var(--text-muted, #495057);
    font-size: 0.9375rem;
}

.lv-compare-result-img {
    width: 44px;
    height: 55px;
    flex: none;
    border-radius: var(--radius-sm, 8px);
    object-fit: cover;
    background-color: #f4f3f5;
}

.lv-compare-result-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
}

.lv-compare-result-title {
    font-weight: 600;
    color: var(--text, #212529);
    overflow-wrap: anywhere;
}

.lv-compare-result-meta {
    font-size: 0.8125rem;
    color: var(--text-muted, #495057);
}

.lv-compare-result-action {
    flex: none;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand, #3d210c);
}

/* --- The picker as the last column of the table --------------------------- */
/*
 * It lives in a cell now, so the cell's own box is the picker's box: a bordered card
 * inside a table cell reads as a widget pasted over the table rather than a column of it.
 *
 * The results stay in normal flow and scroll inside the column. They cannot float out of
 * the cell the way a dropdown usually would: the table wrapper is horizontally
 * scrollable, and a wrapper with overflow set clips anything positioned inside it, which
 * would cut the list off at the cell edge.
 */
/*
 * `.lv-compare-table .lv-compare-cell` sets middle alignment on every cell, so this rule
 * has to carry the same specificity to top-align the column — a search box floating in
 * the vertical middle of a nine-row table reads like a footnote, not like the next slot.
 */
.lv-compare-table .lv-compare-cell-add {
    vertical-align: top;
    width: 320px;
    background-color: var(--surface-alt, #faf9f8);
    /*
     * A search input carries an intrinsic preferred width (~173px plus padding), and in a
     * table that becomes the column's minimum, the table's minimum, and — at 390px, where
     * the table is meant to scroll inside its wrapper — the page's: it scrolled 152px
     * sideways with the column present and 0px without it. `min-width: 0` cannot absorb a
     * replaced element's intrinsic size, so the cell is told to contain its own painting:
     * nothing inside this column may affect the layout or the ink of anything outside it,
     * which is also what the column means.
     */
    contain: paint;
}

.lv-compare-picker-in-table {
    /* A width of its own, so typing does not widen the column and slide every product
       column sideways underneath the pointer mid-click. */
    width: 320px;
    max-width: 320px;
    min-width: 0;
}

/*
 * Flex children default to `min-width: auto`, which means they refuse to shrink below
 * their content. The search field and the result rows are flex, so their min-content set
 * the floor for the whole column, the floor for the table, and — at 390px, where the
 * table is meant to scroll inside its wrapper — the floor for the page, which scrolled
 * 152px sideways. Inside this column the width above owns the floor; the content shrinks
 * to it.
 */
.lv-compare-picker-in-table,
.lv-compare-picker-in-table * {
    min-width: 0;
}

.lv-compare-picker-in-table .lv-compare-results {
    max-height: 17rem;
    overflow: hidden auto;
    overscroll-behavior: contain;
    padding-inline-end: 0.25rem;
}

.lv-compare-picker-in-table .lv-compare-result,
.lv-compare-picker-in-table .lv-compare-result-message {
    min-width: 0;
}

@media (max-width: 767px) {
    .lv-compare-table .lv-compare-cell-add {
        width: 260px;
    }

    .lv-compare-picker-in-table {
        width: 260px;
        max-width: 260px;
    }
}

@media (max-width: 767px) {
    .lv-compare-table .lv-compare-label {
        width: 112px;
        min-width: 112px;
        max-width: 112px;
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }

    .lv-compare-table .lv-compare-cell {
        min-width: 200px;
        padding: 0.75rem;
    }

    .lv-compare-table {
        min-width: calc(112px + 200px * 2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-compare-remove,
    .lv-compare-result {
        transition: none;
    }
}


/* ===== 7. Long-press quick photo gallery (lv-quick-gallery.js) ============ */

/* Our gesture owns the long press on product-card photos: kill the native
   image callout + selection so holding opens the gallery instead. */
.product-card-1 .product-image img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.lvqg-lock { overflow: hidden; }

.lvqg {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    flex-direction: column;
    background: rgba(18, 15, 13, .96);
    color: #fff;
}
.lvqg.is-open { display: flex; }

.lvqg-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    flex: 0 0 auto;
}
.lvqg-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    opacity: .92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvqg-openbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.lvqg-openbtn i { font-size: 17px; }

.lvqg-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.lvqg-btn:hover { background: rgba(255, 255, 255, .2); }
.lvqg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lvqg-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
}
.lvqg-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .18s ease;
    will-change: transform;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.lvqg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(18, 15, 13, .55);
}
.lvqg-prev { inset-inline-start: 12px; }
.lvqg-next { inset-inline-end: 12px; }
/* The chevrons encode direction; mirror them in RTL. */
html[dir="rtl"] .lvqg-prev i { transform: scaleX(-1); }
html[dir="rtl"] .lvqg-next i { transform: scaleX(-1); }

.lvqg-count {
    position: absolute;
    bottom: 12px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    background: rgba(0, 0, 0, .45);
    padding: 3px 11px;
    border-radius: 999px;
}

.lvqg-load {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    background: rgba(18, 15, 13, .85);
    font-size: 13px;
    text-align: center;
    padding: 0 24px;
}
.lvqg-load[hidden] { display: none; }
.lvqg-spin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    animation: lvqg-rotate .9s linear infinite;
}
@keyframes lvqg-rotate { to { transform: rotate(360deg); } }

.lvqg-thumbs {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    scrollbar-width: none;
}
.lvqg-thumbs::-webkit-scrollbar { display: none; }
.lvqg-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, .22);
    background: #f4f3f5;
    overflow: hidden;
    cursor: pointer;
    opacity: .62;
    transition: opacity .15s ease, border-color .15s ease;
}
.lvqg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lvqg-thumb.is-active { opacity: 1; border-color: var(--color-primary, #fff); }
.lvqg-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .lvqg-img,
    .lvqg-thumb { transition: none; }
    .lvqg-spin { animation-duration: 1.6s; }
}