/*
 * Site themes — /shop (both layouts) on a themed request (themes/_base/app.php key "shop").
 *
 * /shop keeps its own layout picker (Admin › Ecommerce › Customize shop, tenant_settings.shop_template):
 *   Classic     = views/shop/index.php       (.hero-banner, .top-bar, .shop-layout …)
 *   Marketplace = views/shop/template-2.php  (everything inside .zs2, colours from --zs2-* variables)
 * Both follow the template's colours, fonts and Light / Dark / Auto by re-pointing their own CSS (an
 * inline <style> in each view) at the --z-* tokens. Layout, words and product images are untouched.
 *
 * Rules
 *   - Token-only: never a [data-zin-mode] or prefers-color-scheme selector (Auto swaps the tokens).
 *   - Every rule is scoped body.zt-app-shop + the layout's own container, so the shared header (nav)
 *     and the themed footer (.zt-site-footer) stay chrome.css's job.
 *   - Sale / "left in stock" / best-seller words keep their red-orange hue; their lightness follows the
 *     surface (relative colour syntax, guarded by @supports — older browsers keep the legacy hex).
 *   - !important only where the view paints with an inline style attribute or app.css's form rules
 *     would otherwise win.
 * Loaded only on themed requests (zin_theme_app_head); legacy /shop never sees this file.
 */

/* ---- Shared helpers --------------------------------------------------------------------- */
@supports (color: oklch(from red l c h)) {
    body.zt-app-shop {
        /* Legacy #dc2626 / #B12704 / #C45500 on a light surface, lifted on a dark one. */
        --zs-red-text:   oklch(from var(--z-surface) calc(0.745 - l * 0.168) 0.2 27.3);
        --zs-stock-text: oklch(from var(--z-surface) calc(0.779 - l * 0.282) 0.17 33.5);
        --zs-best-text:  oklch(from var(--z-surface) calc(0.782 - l * 0.2) 0.15 47);
    }
}

/* =========================================================================================
   CLASSIC layout (views/shop/index.php)
   ========================================================================================= */

/* ---- Hero + promo bands: the template's brand band and its ink ----------------------------- */
body.zt-app-shop .hero-banner { background: linear-gradient(135deg, var(--z-hero-from) 0%, var(--z-hero-to) 100%); }
body.zt-app-shop .hero-banner-placeholder { color: var(--z-hero-ink); }
body.zt-app-shop .hero-banner-placeholder h1 { text-shadow: none; }
body.zt-app-shop .shop-layout .promo-banner { background: linear-gradient(135deg, var(--z-hero-to) 0%, var(--z-hero-from) 100%); }
body.zt-app-shop .shop-layout .promo-banner-placeholder { color: var(--z-hero-ink); }
/* Over a photo the dark scrim + white words stay (fixed, readable on any image). */

/* ---- Sticky search bar ----------------------------------------------------------------- */
body.zt-app-shop .top-bar {
    background: var(--z-surface);
    border-bottom-color: var(--z-border);
    box-shadow: var(--z-shadow);
}
body.zt-app-shop .top-bar .search-bar input:focus { box-shadow: 0 0 0 3px var(--z-accent-soft); }
body.zt-app-shop .top-bar .search-bar button,
body.zt-app-shop .top-bar .mobile-filter-toggle { background: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .top-bar .search-bar button:hover { background: var(--z-accent-2); color: var(--z-accent-2-ink); }

/* ---- Filter sidebar --------------------------------------------------------------------- */
body.zt-app-shop .shop-layout .sidebar { background: var(--z-surface); color: var(--z-text); box-shadow: var(--z-shadow); }
body.zt-app-shop .shop-layout .sidebar::-webkit-scrollbar-thumb { background: var(--z-border); }
body.zt-app-shop .shop-layout .sidebar::-webkit-scrollbar-thumb:hover { background: var(--z-muted); }
body.zt-app-shop .shop-layout .sidebar-close-btn { background: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .shop-layout .filter-section { border-bottom-color: var(--z-border); }
body.zt-app-shop .shop-layout .filter-section h3 { color: var(--z-text); font-family: var(--z-font-body, inherit); }
body.zt-app-shop .shop-layout .filter-option:hover { color: var(--z-accent-text); }
body.zt-app-shop .shop-layout .filter-option input[type="radio"],
body.zt-app-shop .shop-layout .filter-option input[type="checkbox"] { accent-color: var(--z-accent); }
body.zt-app-shop .shop-layout .product-count { color: var(--z-muted); background: var(--z-surface-2); }
/* Status red: the legacy #ef4444 with white words is under 4.5:1 — one step deeper, same hue. */
body.zt-app-shop .shop-layout .clear-filters { background: #dc2626; }
body.zt-app-shop .shop-layout .clear-filters:hover { background: #b91c1c; }

/* Department tree */
body.zt-app-shop .shop-layout .dept-row:hover,
body.zt-app-shop .shop-layout .dept-child:hover,
body.zt-app-shop .shop-layout .dept-more:hover { background: var(--z-surface-2); }
body.zt-app-shop .shop-layout .dept-row.active,
body.zt-app-shop .shop-layout .dept-child.active { background: var(--z-accent-soft); }
body.zt-app-shop .shop-layout .dept-row.active { box-shadow: inset 2px 0 0 var(--z-accent); }
body.zt-app-shop .shop-layout .dept-icon { background: color-mix(in srgb, var(--dept-color, var(--z-muted)) 16%, var(--z-surface)); }
body.zt-app-shop .shop-layout .dept-label { color: var(--z-text); }
body.zt-app-shop .shop-layout .dept-child-label { color: var(--z-muted); }
body.zt-app-shop .shop-layout .dept-row.active .dept-label,
body.zt-app-shop .shop-layout .dept-child.active .dept-child-label,
body.zt-app-shop .shop-layout .dept-more,
body.zt-app-shop .shop-layout .dept-toggle:hover { color: var(--z-accent-text); }
body.zt-app-shop .shop-layout .dept-toggle { color: var(--z-muted); }
body.zt-app-shop .shop-layout .dept-children { border-left-color: var(--z-border); }

/* ---- Section heads, feed affordances ------------------------------------------------------ */
body.zt-app-shop .shop-layout .section-header h2 { color: var(--z-text); }
body.zt-app-shop .shop-layout .products-count,
body.zt-app-shop .shop-layout .feed-status { color: var(--z-muted); }
body.zt-app-shop .shop-layout .empty-state { color: var(--z-muted); }
body.zt-app-shop .shop-layout .empty-state h3 { color: var(--z-text); }
body.zt-app-shop .shop-layout .skeleton-card { background: var(--z-surface-2); }
body.zt-app-shop .shop-layout .load-more-btn { background: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .shop-layout .load-more-btn:hover { background: var(--z-accent-2); color: var(--z-accent-2-ink); }
body.zt-app-shop .shop-layout .load-more-btn:disabled { background: var(--z-surface-2); color: var(--z-muted); }

/* ---- Product card ------------------------------------------------------------------------ */
body.zt-app-shop .shop-layout .product-card {
    background: var(--z-surface);
    border-color: var(--z-border);
    box-shadow: var(--z-shadow);
}
body.zt-app-shop .shop-layout .product-card:hover { border-color: color-mix(in srgb, var(--z-border) 70%, var(--z-text)); box-shadow: var(--z-shadow-lg); }
body.zt-app-shop .shop-layout .product-link:focus-visible { outline-color: var(--z-focus, var(--z-accent)); }
body.zt-app-shop .shop-layout .product-image-wrapper { background: var(--z-surface-2); }
/* "% OFF" stays the sale red with white words (readable in both modes); NEW follows the 2nd brand colour. */
body.zt-app-shop .shop-layout .product-badge-new { background: var(--z-accent-2); color: var(--z-accent-2-ink); box-shadow: none; }
body.zt-app-shop .shop-layout .product-soldout { background: color-mix(in srgb, var(--z-surface) 72%, transparent); }
body.zt-app-shop .shop-layout .product-soldout span { background: var(--z-text); color: var(--z-bg); }
body.zt-app-shop .shop-layout .product-vendor { background: var(--z-surface-2); color: var(--z-muted); }
body.zt-app-shop .shop-layout .product-vendor:hover { background: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .shop-layout .vendor-initial { background: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .shop-layout .product-category { color: var(--z-muted); }
/* Small card titles read in the body face; the template's display face is for section heads. */
body.zt-app-shop .shop-layout .product-name { color: var(--z-text); font-family: var(--z-font-body, inherit); }
body.zt-app-shop .shop-layout .product-price-now { color: var(--z-text); }
body.zt-app-shop .shop-layout .product-price-was { color: var(--z-muted); }
body.zt-app-shop .shop-layout .product-card.is-sale .product-price-now { color: var(--zs-red-text, #dc2626); }

/* Buttons */
body.zt-app-shop .shop-layout .btn-primary { background: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .shop-layout .btn-secondary { background: var(--z-surface); color: var(--z-accent-text); border-color: var(--z-accent); }
body.zt-app-shop .shop-layout .btn-secondary:hover { background: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .shop-layout .btn-icon { background: var(--z-surface-2); color: var(--z-muted); }
body.zt-app-shop .shop-layout .btn-icon:hover { background: var(--z-border); color: var(--z-text); }
body.zt-app-shop .shop-layout .btn-disabled,
body.zt-app-shop .shop-layout .btn-disabled:hover { background: var(--z-surface-2); color: var(--z-muted); }

/* ---- Featured carousel ------------------------------------------------------------------- */
body.zt-app-shop .shop-layout .carousel-slide,
body.zt-app-shop .shop-layout .carousel-content { background: var(--z-surface); }
body.zt-app-shop .shop-layout .carousel-slide { box-shadow: var(--z-shadow); outline: 1px solid var(--z-border); outline-offset: -1px; }
body.zt-app-shop .shop-layout .carousel-slide:hover { box-shadow: var(--z-shadow-lg); }
body.zt-app-shop .shop-layout .carousel-slide-image { background: var(--z-surface-2); }
body.zt-app-shop .shop-layout .carousel-content h3 { color: var(--z-text); font-family: var(--z-font-body, inherit); }
body.zt-app-shop .shop-layout .carousel-content p { color: var(--z-muted); }
body.zt-app-shop .shop-layout .carousel-vendor,
body.zt-app-shop .shop-layout .carousel-price { color: var(--z-accent-text); }
/* The struck-through "was" price is an inline style. */
body.zt-app-shop .shop-layout .carousel-price > span[style*="line-through"] { color: var(--z-muted) !important; }
body.zt-app-shop .shop-layout .carousel-price > span[style*="#ef4444"] { background: #dc2626 !important; }
body.zt-app-shop .shop-layout .carousel-btn { background: var(--z-surface); border-color: var(--z-border); color: var(--z-text); box-shadow: var(--z-shadow); }
body.zt-app-shop .shop-layout .carousel-btn:hover { background: var(--z-accent); border-color: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .shop-layout .carousel-dot { background: var(--z-border); }
body.zt-app-shop .shop-layout .carousel-dot.active { background: var(--z-accent); }

/* ---- Notices painted with inline styles ------------------------------------------------- */
/* "Filtered Results" box (light-blue gradient, blue words) */
body.zt-app-shop .shop-layout > main > div[style*="#eff6ff"] {
    background: var(--z-accent-soft) !important;
    border-left-color: var(--z-accent) !important;
    box-shadow: none !important;
}
body.zt-app-shop .shop-layout > main > div[style*="#eff6ff"] i.fa-filter { color: var(--z-accent-text) !important; }
body.zt-app-shop .shop-layout > main > div[style*="#eff6ff"] p[style*="#1e40af"] { color: var(--z-text) !important; }
body.zt-app-shop .shop-layout > main > div[style*="#eff6ff"] p[style*="#3b82f6"] { color: var(--z-muted) !important; }
/* Its "Clear All" button (inline colours, and inline hover colours set from JS) */
body.zt-app-shop .shop-layout > main > div[style*="#eff6ff"] button[onclick="clearFilters()"] {
    background: var(--z-surface) !important;
    color: var(--z-accent-text) !important;
    border-color: var(--z-accent) !important;
}
body.zt-app-shop .shop-layout > main > div[style*="#eff6ff"] button[onclick="clearFilters()"]:hover {
    background: var(--z-accent) !important;
    color: var(--z-accent-ink) !important;
}
/* "Curated Selection" note (light-green gradient, dark-green words) */
body.zt-app-shop .shop-layout .products-section > div[style*="#f0fdf4"] {
    background: color-mix(in srgb, var(--z-accent-2) 12%, var(--z-surface)) !important;
    border-left-color: var(--z-accent-2) !important;
}
body.zt-app-shop .shop-layout .products-section > div[style*="#f0fdf4"] i { color: var(--z-text) !important; }
body.zt-app-shop .shop-layout .products-section > div[style*="#f0fdf4"] p { color: var(--z-text) !important; }

/* =========================================================================================
   MARKETPLACE layout (views/shop/template-2.php) — its palette is the --zs2-* variables
   ========================================================================================= */
body.zt-app-shop .zs2 {
    --zs2-p: var(--z-accent);
    --zs2-p-on: var(--z-accent-ink);
    --zs2-p-glass: color-mix(in srgb, var(--z-accent-ink) 15%, transparent);
    /* Department strip, drawer head, "Back to top": the 2nd brand colour where relative colour syntax
       is missing; a darker shade of the bar where it exists (below). */
    --zs2-deep: var(--z-accent-2);
    --zs2-deep-on: var(--z-accent-2-ink);
    --zs2-deep-glass: color-mix(in srgb, var(--zs2-deep-on) 15%, transparent);
    --zs2-s: var(--z-accent-2);
    --zs2-ink: var(--z-accent-text);
    --zs2-tint: var(--z-accent-soft);
    --zs2-cta: var(--z-accent-2);
    --zs2-cta-on: var(--z-accent-2-ink);
    --zs2-bg: var(--z-bg);
    --zs2-text: var(--z-text);
    --zs2-muted: var(--z-muted);
    --zs2-faint: var(--z-muted);
    --zs2-line: var(--z-border);
    font-family: var(--z-font-body, inherit);
}
@supports (color: oklch(from red l c h)) {
    body.zt-app-shop .zs2 {
        --zs2-deep: oklch(from var(--z-accent) calc(l * 0.8) calc(c * 0.8) h);
        /* White words below oklch L .565 (≈ equal contrast point), black above. */
        --zs2-deep-on: oklch(from var(--z-accent) clamp(0, (0.565 - l * 0.8) * 1000, 1) 0 0);
        /* Hover / active pills move AWAY from the words (darker under white, lighter under black),
           so a highlighted item never loses contrast. */
        --zs2-deep-glass: color-mix(in srgb, oklch(from var(--zs2-deep-on) calc(1 - l) 0 0) 18%, transparent);
        --zs2-p-glass: color-mix(in srgb, oklch(from var(--z-accent-ink) calc(1 - l) 0 0) 15%, transparent);
    }
}

/* Panels: page = --z-bg, panels = --z-surface with a hairline (some templates paint both white). */
body.zt-app-shop .zs2 :is(.zs2-quad, .zs2-row, .zs2-block, .zs2-empty) {
    background: var(--z-surface);
    box-shadow: 0 0 0 1px var(--z-border), var(--z-shadow);
}
body.zt-app-shop .zs2 .zs2-card { background: var(--z-surface); }
body.zt-app-shop .zs2 .zs2-card--grid:hover { border-color: color-mix(in srgb, var(--z-border) 70%, var(--z-text)); box-shadow: var(--z-shadow-lg); }

/* Shop bar search box */
body.zt-app-shop .zs2 .zs2-search form { background: var(--z-surface); }
body.zt-app-shop .zs2 select.zs2-scope {
    background-color: var(--z-surface-2) !important;
    color: var(--z-text) !important;
    border-color: var(--z-border) !important;
    /* The legacy chevron is a grey data-URI; draw it in the token colour instead. */
    background-image: linear-gradient(45deg, transparent 50%, var(--z-muted) 50%), linear-gradient(135deg, var(--z-muted) 50%, transparent 50%);
    background-position: right 15px center, right 10px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Search suggestions */
body.zt-app-shop .zs2 .zs2-suggest { background: var(--z-surface); box-shadow: var(--z-shadow-lg), 0 0 0 1px var(--z-border); }
body.zt-app-shop .zs2 .zs2-sg-item[aria-selected=true],
body.zt-app-shop .zs2 .zs2-sg-item:hover,
body.zt-app-shop .zs2 .zs2-sg-thumb { background: var(--z-surface-2); }

/* Hero: the template's brand band + ink; over a photo the dark scrim + white words stay. */
body.zt-app-shop .zs2 .zs2-hero { background: linear-gradient(120deg, var(--z-hero-from) 0%, var(--z-hero-to) 100%); }
body.zt-app-shop .zs2 .zs2-hero::after { background: linear-gradient(to bottom, transparent, var(--zs2-bg)); }
body.zt-app-shop .zs2 .zs2-hero:not(.has-img) .zs2-hero-copy { color: var(--z-hero-ink); }
body.zt-app-shop .zs2 .zs2-hero:not(.has-img) .zs2-hero-copy :is(h1, p) { text-shadow: none; }
/* Ghost pill: a hero-coloured glass (a white glass would wash out the ink on a light band). */
body.zt-app-shop .zs2 .zs2-hero:not(.has-img) .zs2-pill--ghost {
    background: color-mix(in srgb, var(--z-hero-from) 80%, transparent);
    color: var(--z-hero-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z-hero-ink) 55%, transparent);
}

/* Picture tiles, placeholders, initials */
body.zt-app-shop .zs2 .zs2-tile-img,
body.zt-app-shop .zs2 .zs2-card-media { background: var(--z-surface-2); }
body.zt-app-shop .zs2 .zs2-tile-vendor img,
body.zt-app-shop .zs2 .zs2-tile-vendor .zs2-initial { box-shadow: 0 0 0 4px var(--z-surface); }
body.zt-app-shop .zs2 .zs2-ph { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, var(--z-surface-2)), color-mix(in srgb, var(--c) 6%, var(--z-surface-2))); }
body.zt-app-shop .zs2 .zs2-initial { background: var(--z-accent); color: var(--z-accent-ink); }
body.zt-app-shop .zs2 .zs2-ficon { background: color-mix(in srgb, var(--c) 16%, var(--z-surface)); }

/* Row arrows */
body.zt-app-shop .zs2 .zs2-arrow { background: color-mix(in srgb, var(--z-surface) 96%, transparent); box-shadow: var(--z-shadow-lg); }
body.zt-app-shop .zs2 .zs2-scroller { scrollbar-color: var(--z-border) transparent; }

/* Card words; "-N%" and "Best seller" badges keep their fixed red/orange with white words. */
body.zt-app-shop .zs2 .zs2-badge--new { background: var(--z-surface); color: var(--z-text); }
body.zt-app-shop .zs2 .zs2-stock { color: var(--zs-stock-text, #B12704); }
body.zt-app-shop .zs2 .zs2-rcount strong { color: var(--zs-best-text, #C45500); }

/* Promo tiles: brand band + ink (photos keep their scrim + white words); the pill stays white. */
body.zt-app-shop .zs2 .zs2-promo { background: linear-gradient(120deg, var(--z-hero-from), var(--z-hero-to)); color: var(--z-hero-ink); }
body.zt-app-shop .zs2 .zs2-promo:nth-child(2) { background: linear-gradient(120deg, var(--z-hero-to), var(--z-hero-from)); }
body.zt-app-shop .zs2 .zs2-promo.has-img { color: #fff; }
body.zt-app-shop .zs2 .zs2-promo:not(.has-img) .zs2-promo-copy .zs2-pill { background: var(--z-hero-ink); color: var(--z-hero-from); }

/* Vendor tiles, chip buttons, buttons */
body.zt-app-shop .zs2 .zs2-vendor-logo { background: var(--z-chip, var(--z-surface)); }
body.zt-app-shop .zs2 .zs2-chip-btn { background: var(--z-surface); color: var(--z-text); }
body.zt-app-shop .zs2 .zs2-chip-btn:hover { background: var(--z-surface-2); border-color: color-mix(in srgb, var(--z-border) 70%, var(--z-text)); }
body.zt-app-shop .zs2 .zs2-chip-btn--solid,
body.zt-app-shop .zs2 .zs2-chip-btn--solid:hover { background: var(--z-accent-soft); color: var(--z-accent-text); border-color: transparent; }
body.zt-app-shop .zs2 .zs2-btn { background: var(--z-surface); color: var(--z-text); }
body.zt-app-shop .zs2 .zs2-btn:hover { background: var(--z-surface-2); }
body.zt-app-shop .zs2 .zs2-btn--primary,
body.zt-app-shop .zs2 .zs2-btn--primary:hover { background: var(--zs2-p); color: var(--zs2-p-on); }

/* ---- Results view -------------------------------------------------------------------------- */
body.zt-app-shop .zs2 .zs2-rbar { background: var(--z-surface); }
body.zt-app-shop .zs2 .zs2-sort select {
    background-color: var(--z-surface-2) !important;
    border-color: var(--z-border) !important;
    color: var(--z-text) !important;
    box-shadow: none;
}
body.zt-app-shop .zs2 .zs2-filter-btn { background: var(--z-surface); border-color: var(--z-border); color: var(--z-text); }
body.zt-app-shop .zs2 .zs2-fs { border-bottom-color: var(--z-border); }
body.zt-app-shop .zs2 .zs2-fs h3 { font-family: var(--z-font-body, inherit); }
/* Options with no matches stay visibly faded (they are not links), but readable. */
body.zt-app-shop .zs2 .zs2-fl.is-off { color: color-mix(in srgb, var(--z-muted) 78%, var(--z-bg)); }
body.zt-app-shop .zs2 .zs2-box { background: var(--z-surface); border-color: var(--z-muted); }
body.zt-app-shop .zs2 .zs2-fl.is-on .zs2-box { background: var(--zs2-p); border-color: var(--zs2-p); color: var(--zs2-p-on); }
body.zt-app-shop .zs2 .zs2-price-form button { background: var(--z-surface); border-color: var(--z-border); color: var(--z-text); }
body.zt-app-shop .zs2 .zs2-price-form button:hover { background: var(--z-surface-2); }
body.zt-app-shop .zs2 .zs2-chip { background: var(--z-surface); color: var(--z-text); }
body.zt-app-shop .zs2 .zs2-chip i { background: var(--z-surface-2); }
body.zt-app-shop .zs2 .zs2-chip:hover i { background: var(--z-border); }
body.zt-app-shop .zs2 .zs2-chip--clear { background: none; color: var(--zs2-ink); }
body.zt-app-shop .zs2 .zs2-pages > a,
body.zt-app-shop .zs2 .zs2-pages > span { background: var(--z-surface); }
body.zt-app-shop .zs2 .zs2-pages > a:hover { background: var(--z-surface-2); border-color: color-mix(in srgb, var(--z-border) 70%, var(--z-text)); }
body.zt-app-shop .zs2 .zs2-pages > .is-on { background: var(--zs2-p); color: var(--zs2-p-on); }
body.zt-app-shop .zs2 .zs2-pages > .is-gap { background: none; }
body.zt-app-shop .zs2 .zs2-pages > .is-dis { background: var(--z-surface-2); color: color-mix(in srgb, var(--z-muted) 70%, var(--z-surface-2)); }

/* Phone filter sheet */
@media (max-width: 1023px) {
    body.zt-app-shop .zs2 .zs2-side,
    body.zt-app-shop .zs2 .zs2-side-head,
    body.zt-app-shop .zs2 .zs2-side-foot { background: var(--z-surface); }
    body.zt-app-shop .zs2 .zs2-side-head .zs2-x { background: var(--z-surface-2); color: var(--z-text); }
}

/* ---- Department drawer ------------------------------------------------------------------- */
body.zt-app-shop .zs2 .zs2-drawer { background: var(--z-surface); color: var(--z-text); }
body.zt-app-shop .zs2 .zs2-dl:hover { background: var(--z-surface-2); }
body.zt-app-shop .zs2 .zs2-dsub { background: var(--z-surface-2); }
body.zt-app-shop .zs2 .zs2-dsub a { color: var(--z-text); }
body.zt-app-shop .zs2 .zs2-dsub a:hover { background: color-mix(in srgb, var(--z-border) 60%, var(--z-surface-2)); }