/*
 * Chess Shop — soft modern theme.
 * Linen & sand surfaces, soft cocoa text (never pure black), one calm walnut-caramel accent,
 * rounded "pebble" shapes, gentle shadows instead of hard borders, and quiet chess details
 * (faded board patterns, piece glyphs, move notation).
 * Loaded after storefront.css; visual rules only.
 */
.cs-storefront {
    --bg: #f8f5f0;
    --bg-2: #f2ece3;
    --sand: #ece3d6;
    --surface: #fffdfa;
    --ink: #3a302a;
    --ink-2: #51463e;
    --muted: #7a6e63;
    --line: #ebe3d8;
    --line-strong: #ddd2c3;
    --accent: #946747;
    --accent-dark: #7c553a;
    --accent-soft: #f4ebe1;
    --accent-tint: #ead9c6;
    --sage: #7f8f78;
    --sage-soft: #eaefe6;
    --light-square: #f3ebdf;
    --dark-square: #dcc7ab;
    --night: #4a3e36;
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --shadow-xs: 0 1px 2px #5c40280d;
    --shadow-sm: 0 2px 6px #5c40280a, 0 8px 24px -12px #5c40281f;
    --shadow-md: 0 4px 10px #5c40280d, 0 22px 44px -22px #5c402840;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --display: "Lora", Georgia, "Times New Roman", serif;
    --text: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --piece-font: "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif;
    --cs-ink: var(--ink); --cs-muted: var(--muted); --cs-line: var(--line); --cs-accent: var(--accent);
    --theme-deafult: var(--accent);
    font-family: var(--text);
    font-size: 15.5px;
    font-weight: 450;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
html:has(.cs-storefront) { scroll-behavior: smooth; }
.cs-storefront * { font-variant-numeric: lining-nums; }
.cs-storefront h1, .cs-storefront h2, .cs-storefront h3, .cs-storefront h4, .cs-storefront h5 { color: var(--ink); }
.cs-storefront h1, .cs-storefront .section-heading h2, .cs-storefront .trend-head h2,
.cs-storefront .store-page-heading h1, .cs-storefront .cs-hero-title, .cs-storefront .bx-band-intro h2 {
    font-family: var(--display); font-weight: 600; letter-spacing: -.01em;
}
.cs-storefront a { transition: color .2s var(--ease); }
.cs-storefront a:focus-visible, .cs-storefront button:focus-visible, .cs-storefront summary:focus-visible,
.cs-storefront [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.cs-storefront ::selection { background: var(--accent-tint); color: var(--ink); }
.cs-storefront main a:not([class]) { color: var(--accent); }
.cs-storefront main a:not([class]):hover { color: var(--accent-dark); }

/* white product photos melt into the tinted frames behind them */
.cs-storefront .product-image-link img, .cs-storefront .cs-collection-media img,
.cs-storefront .trend-lead-image img, .cs-storefront .trend-tile-image img,
.cs-storefront .product-gallery-img, .cs-storefront .cart-item-image img, .cs-storefront .co-item-thumb img {
    mix-blend-mode: multiply;
}

/* ================= header ================= */
.cs-storefront .top-header.top-header-dark { background: var(--bg-2); border-bottom: 1px solid #e6ddd0; }
.cs-storefront .top-header .header-contact li,
.cs-storefront .top-header .header-dropdown > li,
.cs-storefront .top-header .header-dropdown > li > a,
.cs-storefront .top-header .contact-switch-current,
.cs-storefront .top-header .lang-switch-current,
.cs-storefront .top-header .account-switch-current { color: var(--ink-2) !important; font-size: 12.5px; font-weight: 500; }
.cs-storefront .top-header i, .cs-storefront .top-header .account-icon { color: var(--accent) !important; }
.cs-storefront .top-header .header-contact { padding: 6px 0; }
.cs-storefront .top-header .header-dropdown > li { padding: 6px 12px; }
.cs-storefront .top-header .onhover-show-div, .cs-storefront .top-header .contact-menu {
    border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden;
}

.cs-storefront header.header-style-5 {
    background: #f8f5f0e0; border-bottom: 1px solid #ece4d9;
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.cs-storefront .main-menu { padding: 14px 0; gap: 22px; }
/* desktop: the header stays at hand while scrolling (on phones it would eat the screen) */
@media (min-width: 992px) { .cs-storefront header.header-style-5 { position: sticky; top: 0; z-index: 50; } }
.cs-storefront .brand-logo > a { width: auto; height: auto; overflow: visible; }
.cs-storefront .brand-logo img { width: auto; height: 46px; max-width: none; object-fit: contain; }
.cs-storefront .form_search {
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px; max-width: 560px; box-shadow: var(--shadow-xs);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cs-storefront .form_search:focus-within { border-color: var(--accent-tint); box-shadow: 0 0 0 5px var(--accent-soft), var(--shadow-sm); }
.cs-storefront .form_search input { height: 46px; font-size: 14px; padding-left: 22px !important; background: transparent; }
.cs-storefront .form_search .btn-search {
    width: 38px; height: 38px; margin-right: 4px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent-dark); transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront .form_search .btn-search:hover { background: var(--accent); color: #fff; }
.cs-storefront .search-suggestions { border: 0; border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; }
.cs-storefront .header-list-link a, .cs-storefront .mobile-cart > a { color: var(--ink) !important; }
.cs-storefront .header-list-link a {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; transition: background .2s var(--ease);
}
.cs-storefront .header-list-link a:hover { background: var(--accent-soft); }
.cs-storefront .header-list-link span[data-list-count] { background: var(--accent-soft); color: var(--accent-dark); border-radius: 999px; }
.cs-storefront .mobile-cart > a {
    padding: 10px 18px !important; border-radius: 999px; background: var(--accent-soft); font-weight: 600;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront .mobile-cart > a:hover { background: var(--accent); color: #fff !important; }
.cs-storefront .cart_qty_cls { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 0 0 3px var(--bg); }

/* ================= buttons ================= */
.cs-storefront .cs-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px;
    font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: all .25s var(--ease);
}
.cs-storefront .cs-btn i { transition: transform .25s var(--ease); }
.cs-storefront .cs-btn:hover i, .cs-storefront .cs-hero-slide:hover .cs-btn i { transform: translateX(4px); }
.cs-storefront .cs-btn-primary { background: var(--accent); color: #fff; }
.cs-storefront .cs-btn-primary:hover { background: var(--accent-dark); color: #fff; }
.cs-storefront .cs-btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.cs-storefront .cs-btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }

.cs-storefront .btn { border-radius: 999px; font-weight: 600; transition: all .25s var(--ease); }
.cs-storefront .btn-solid, .cs-storefront .btn-primary, .cs-storefront .btn-dark,
.cs-storefront .filter-actions .btn, .cs-storefront .co-submit {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
    border-radius: 999px; text-transform: none; letter-spacing: 0; box-shadow: 0 8px 20px -10px #7c553a80;
}
.cs-storefront .btn-solid:hover, .cs-storefront .btn-primary:hover, .cs-storefront .btn-dark:hover,
.cs-storefront .filter-actions .btn:hover, .cs-storefront .co-submit:hover {
    background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; transform: translateY(-1px);
}
.cs-storefront .btn-outline-dark, .cs-storefront .btn-light {
    background: var(--surface); border-color: var(--line-strong); color: var(--ink); border-radius: 999px;
}
.cs-storefront .btn-outline-dark:hover, .cs-storefront .btn-light:hover { background: var(--accent-soft); border-color: var(--accent-tint); color: var(--accent-dark); }

/* ================= services ================= */
.cs-storefront .home-services {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
    margin: 0 0 64px; padding: 0; border: 0; background: transparent;
}
.cs-storefront .home-service {
    padding: 18px 20px; border: 0 !important; border-radius: var(--radius); background: var(--surface);
    display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-xs);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cs-storefront .home-service:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cs-storefront .home-service-icon {
    flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); font-size: 17px;
}
.cs-storefront .home-service:nth-child(2n) .home-service-icon { background: var(--sage-soft); color: var(--sage); }
.cs-storefront .home-service h2 { margin: 0; font-family: var(--text); font-size: 14.5px; font-weight: 600; }
.cs-storefront .home-service p { margin: 1px 0 0; font-size: 13px; color: var(--muted); font-weight: 500; }
@media (max-width: 991px) { .cs-storefront .home-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
    .cs-storefront .home-services { gap: 10px; margin-bottom: 48px; }
    .cs-storefront .home-service { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
}

/* ================= section headings ================= */
.cs-storefront .section-heading { align-items: flex-end; margin-bottom: 24px; gap: 16px; }
.cs-storefront .section-heading h2, .cs-storefront .trend-head h2 {
    font-size: clamp(24px, 2.4vw, 32px); margin: 0; display: flex; align-items: center; gap: 14px; line-height: 1.2;
}
/* a small soft board in front of each title */
.cs-storefront .section-heading h2::before, .cs-storefront .trend-head h2::before {
    content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px;
    background: repeating-conic-gradient(var(--dark-square) 0 25%, var(--light-square) 0 50%) 0 0 / 11px 11px;
    box-shadow: inset 0 0 0 1px #00000008;
}
.cs-storefront .section-heading > a, .cs-storefront .section-heading > span {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
    color: var(--ink-2); font-size: 14px; font-weight: 500; background: var(--surface); box-shadow: var(--shadow-xs);
    white-space: nowrap;
}
.cs-storefront .section-heading > span { background: transparent; box-shadow: none; padding: 0; color: var(--muted); }
.cs-storefront .section-heading > a:hover { color: var(--accent-dark); background: var(--accent-soft); }
.cs-storefront .section-heading > a i { transition: transform .25s var(--ease); }
.cs-storefront .section-heading > a:hover i { transform: translateX(3px); }
.cs-storefront .store-section { margin-top: 32px; }

/* ================= product cards ================= */
.cs-storefront .product-card {
    background: var(--surface); border: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cs-storefront .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.cs-storefront .product-card .product-image-link {
    margin: 10px 10px 0; border: 0 !important; border-radius: 16px; background: var(--bg-2); overflow: hidden;
}
.cs-storefront .product-card .product-image-link img { transition: transform .6s var(--ease); }
.cs-storefront .product-card:hover .product-image-link img { transform: scale(1.04); }
.cs-storefront .product-hover-action {
    background: #fffdfaeb; color: var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); font-weight: 600;
}
.cs-storefront .product-card .card-body { padding: 14px 18px 18px; }
.cs-storefront .product-card .card-title { font-family: var(--text); font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.cs-storefront .product-card a:hover .card-title { color: var(--accent-dark); }
.cs-storefront .product-card .product-options { font-size: 13.5px; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.cs-storefront .product-card-price { margin-bottom: 14px; }
.cs-storefront .product-card-price strong { font-family: var(--text); font-weight: 700; font-size: 19px; color: var(--ink); }
.cs-storefront .product-card-price del { color: var(--muted); }
.cs-storefront .product-sale-label { background: var(--accent); color: #fff; border-radius: 999px; padding: 4px 11px; font-weight: 600; box-shadow: var(--shadow-sm); }
.cs-storefront .product-unavailable-label { background: #fffdfaeb !important; color: var(--muted) !important; }
.cs-storefront .list-actions button, .cs-storefront .list-actions a {
    background: #fffdfaeb; border: 0 !important; color: var(--ink-2); box-shadow: var(--shadow-sm);
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.cs-storefront .list-actions button:hover, .cs-storefront .list-actions a:hover { background: var(--accent-soft); color: var(--accent-dark); transform: scale(1.06); }
.cs-storefront .list-actions [aria-pressed="true"], .cs-storefront .list-actions .is-active { background: var(--accent) !important; color: #fff !important; }
/* card button: a soft pill that warms up on hover */
.cs-storefront .card-cart-form .product-card-action, .cs-storefront .card-cart-link, .cs-storefront .product-card-action {
    background: var(--accent-soft) !important; border: 0 !important; color: var(--accent-dark) !important; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; min-height: 42px; box-shadow: none; transition: background .25s var(--ease), color .25s var(--ease);
}
.cs-storefront .card-cart-form .product-card-action:hover:not(:disabled), .cs-storefront .card-cart-link:hover,
.cs-storefront .product-card-action:hover:not(:disabled) { background: var(--accent) !important; color: #fff !important; }
.cs-storefront .card-cart-form .product-card-action.is-added { background: var(--sage) !important; color: #fff !important; }
.cs-storefront .product-card-action:disabled { background: var(--bg-2) !important; color: var(--muted) !important; }
.cs-storefront .product-card-colors[aria-hidden="true"] { display: none; }
.cs-storefront .product-color-swatch { box-shadow: 0 0 0 1px var(--line-strong); border: 2px solid #fff; }
.cs-storefront .product-color-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.cs-storefront .card-variant-select { border-radius: 12px; border-color: var(--line); background-color: var(--bg); }

/* ================= catalog button & panel ================= */
.cs-storefront .cs-catalog { margin: 0; }
.cs-storefront .cs-catalog > summary {
    display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 8px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; font-size: 14.5px; box-shadow: none;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.cs-storefront .cs-catalog > summary:hover, .cs-storefront .cs-catalog[open] > summary { background: var(--accent); color: #fff; }
.cs-storefront .cs-catalog-icon {
    width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface);
    font-family: var(--piece-font); font-size: 18px; line-height: 1; color: var(--accent);
}
.cs-storefront .cs-catalog .fa-angle-down { margin-left: 2px; transition: transform .3s var(--ease); }
.cs-storefront .cs-catalog[open] .fa-angle-down { transform: rotate(180deg); }
.cs-storefront .main-menu > .cs-catalog { position: relative; flex: 0 0 auto; }
.cs-storefront .cs-catalog .cs-catalog-panel {
    top: calc(100% + 12px); left: 0; width: 580px; height: auto; max-height: min(75dvh, 640px); overflow-y: auto;
    padding: 12px; border: 0; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-md), 0 0 0 1px #5c402808;
}
.cs-storefront .cs-catalog[open] .cs-catalog-panel { animation: cs-pop .28s var(--ease); }
.cs-storefront .cs-catalog .cs-catalog-panel nav { height: auto; }
.cs-storefront .cs-catalog-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 10px; }
.cs-storefront .cs-catalog-head span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cs-storefront .cs-catalog-head .catalog-close { border: 0; background: var(--bg); color: var(--muted); width: 32px; height: 32px; border-radius: 50%; }
.cs-storefront .cs-catalog-head .catalog-close:hover { background: var(--accent-soft); color: var(--accent-dark); }
.cs-storefront .cs-catalog-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cs-storefront .cs-catalog-list a {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 16px; color: var(--ink); font-size: 14px; font-weight: 500;
    transition: background .2s var(--ease);
}
.cs-storefront .cs-catalog-list a:hover { background: var(--bg); color: var(--ink); }
.cs-storefront .cs-catalog-piece {
    flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
    background: var(--accent-soft); border: 0; font-family: var(--piece-font); font-size: 19px; color: var(--accent);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront .cs-catalog-list a:hover .cs-catalog-piece { background: var(--accent); color: #fff; }
.cs-storefront .cs-catalog-name { flex: 1; min-width: 0; line-height: 1.3; }
.cs-storefront .cs-catalog-count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 2px 9px; }
.cs-storefront .cs-catalog-all {
    display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0; padding: 13px 16px;
    border-radius: 16px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 14px;
}
.cs-storefront .cs-catalog-all:hover { background: var(--accent-soft); color: var(--accent-dark); }
@media (max-width: 767px) {
    .cs-storefront .main-menu > .cs-catalog { position: static; }
    .cs-storefront .cs-catalog .cs-catalog-panel { left: 12px; right: 12px; width: auto; }
    .cs-storefront .cs-catalog-list { grid-template-columns: 1fr; }
}

/* ================= hero: wide slider ================= */
.cs-storefront .cs-hero { padding: 26px 0 10px; }
.cs-storefront .cs-hero > .container { max-width: 1240px; }
.cs-storefront .cs-hero-frame {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--night);
    box-shadow: 0 30px 60px -34px #5c402866; isolation: isolate;
}
.cs-storefront .cs-hero-slider > div:not(:first-child):not(.slick-list) { display: none; }
.cs-storefront .cs-hero-slide { position: relative; display: block; aspect-ratio: 1200 / 409; min-height: 320px; color: #fff; }
.cs-storefront .cs-hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s var(--ease); }
.cs-storefront .slick-active .cs-hero-slide img, .cs-storefront .cs-hero-slider:not(.slick-initialized) .cs-hero-slide img { transform: scale(1.04); }
/* readable side: a warm cocoa wash that fades softly to the right */
.cs-storefront .cs-hero-slide::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(95deg, #3a2e26d9 0%, #3a2e2699 32%, #3a2e2600 66%);
}
/* chess detail: a faded board pattern drifting in from the left edge */
.cs-storefront .cs-hero-slide::after {
    content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 46%; pointer-events: none;
    background: repeating-conic-gradient(#ffffff0f 0 25%, transparent 0 50%) 0 0 / 56px 56px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
}
.cs-storefront .cs-hero-frame::after { content: none; }
.cs-storefront .cs-hero-overlay {
    position: absolute; z-index: 2; left: clamp(24px, 5vw, 68px); top: 50%; transform: translateY(-50%);
    width: min(540px, 80%); display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.cs-storefront .slick-active .cs-hero-overlay > *, .cs-storefront .cs-hero-slider:not(.slick-initialized) .cs-hero-overlay > * {
    animation: cs-rise .8s var(--ease) both;
}
.cs-storefront .slick-active .cs-hero-overlay > :nth-child(2) { animation-delay: .1s; }
.cs-storefront .slick-active .cs-hero-overlay > :nth-child(3) { animation-delay: .2s; }
.cs-storefront .cs-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #f1e8dc;
}
.cs-storefront .cs-notation {
    padding: 4px 10px; border: 0; border-radius: 999px; letter-spacing: 0; text-transform: none;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: #fff; background: #ffffff26;
    backdrop-filter: blur(6px);
}
.cs-storefront .cs-hero-title {
    display: block; font-family: var(--display); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(28px, 3.4vw, 48px); line-height: 1.15; color: #fff; text-wrap: balance;
}
.cs-storefront .cs-btn-light { background: #fffdfa; color: var(--ink); box-shadow: 0 10px 24px -12px #00000066; }
.cs-storefront .cs-hero-slide:hover .cs-btn-light { background: var(--accent-soft); color: var(--accent-dark); }
.cs-storefront .cs-hero-controls {
    position: absolute; z-index: 4; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px;
    padding: 6px; border-radius: 999px; background: #fffdfa29; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px #ffffff26;
}
.cs-storefront .cs-hero-controls button {
    width: 36px; height: 36px; border-radius: 50%; border: 0; background: #ffffff1f; color: #fff;
    display: grid; place-items: center; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease);
}
.cs-storefront .cs-hero-controls button:hover { background: #fffdfa; color: var(--ink); }
.cs-storefront .cs-hero-counter { min-width: 60px; text-align: center; font-size: 13px; color: #ffffffb3; letter-spacing: .06em; }
.cs-storefront .cs-hero-counter b { color: #fff; font-weight: 600; }
.cs-storefront .cs-hero-static {
    position: relative; overflow: hidden; padding: 76px clamp(24px, 5vw, 68px); border-radius: var(--radius-lg);
    background: linear-gradient(120deg, #5a4a3f, #3f342d); display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
@media (max-width: 767px) {
    .cs-storefront .cs-hero { padding-top: 14px; }
    .cs-storefront .cs-hero-frame { border-radius: 22px; }
    .cs-storefront .cs-hero-slide { aspect-ratio: auto; min-height: 380px; }
    .cs-storefront .cs-hero-slide::before { background: linear-gradient(0deg, #3a2e26eb 0%, #3a2e2699 50%, #3a2e2622 100%); }
    .cs-storefront .cs-hero-slide::after { width: 100%; top: auto; height: 60%; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); }
    .cs-storefront .cs-hero-overlay { top: auto; bottom: 26px; transform: none; width: auto; right: 20px; left: 20px; gap: 14px; }
    .cs-storefront .cs-hero-controls { top: 14px; bottom: auto; right: 14px; }
}

/* ================= collections ================= */
.cs-storefront .cs-collections { margin: 0 0 72px; padding-top: 0; }
.cs-storefront .cs-collections .section-heading { margin-top: 0; }
.cs-storefront .cs-collection-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cs-storefront .cs-collection {
    position: relative; display: flex; flex-direction: column; padding: 10px; border: 0; border-radius: var(--radius);
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cs-storefront .cs-collection:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); color: var(--ink); }
.cs-storefront .cs-collection-media {
    position: relative; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--bg-2); border: 0; overflow: hidden;
}
.cs-storefront .cs-collection-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .6s var(--ease); }
.cs-storefront .cs-collection:hover .cs-collection-media img { transform: scale(1.06); }
.cs-storefront .cs-collection-fallback { display: grid; place-items: center; height: 100%; font-family: var(--piece-font); font-size: 72px; color: var(--dark-square); }
.cs-storefront .cs-collection-piece {
    position: absolute; left: 8px; top: 8px; width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 50%; background: #fffdfae6; color: var(--accent); font-family: var(--piece-font); font-size: 17px;
    box-shadow: var(--shadow-xs); transition: background .25s var(--ease), color .25s var(--ease);
}
.cs-storefront .cs-collection:hover .cs-collection-piece { background: var(--accent); color: #fff; }
.cs-storefront .cs-collection-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 6px; }
.cs-storefront .cs-collection-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.cs-storefront .cs-collection-count { font-size: 13px; font-weight: 500; color: var(--muted); }
@media (max-width: 1199px) { .cs-storefront .cs-collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px) { .cs-storefront .cs-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .cs-storefront .cs-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ================= trend ================= */
.cs-storefront section.trend { --trend-bg: var(--bg-2); margin-top: 40px; }
.cs-storefront .trend-eyebrow, .cs-storefront .bx-badge {
    background: var(--surface); border: 0; color: var(--accent-dark); border-radius: 999px; box-shadow: var(--shadow-xs);
}
.cs-storefront .trend-eyebrow .cs-piece { font-family: var(--piece-font); font-size: 14px; color: var(--accent); }
.cs-storefront .trend-head p { color: var(--muted); }
.cs-storefront .trend-lead, .cs-storefront .trend-tile {
    background: var(--surface); border: 0 !important; border-radius: var(--radius); box-shadow: var(--shadow-xs);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cs-storefront .trend-lead:hover, .cs-storefront .trend-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cs-storefront .trend-lead-image, .cs-storefront .trend-tile-image { background: var(--bg-2) !important; border: 0 !important; border-radius: 14px; }
.cs-storefront .trend-lead-copy { border-top: 0 !important; }
.cs-storefront .trend-rank { background: var(--surface); color: var(--accent-dark); border-radius: 999px; box-shadow: var(--shadow-sm); font-weight: 700; }
.cs-storefront .trend-rank-lead { background: var(--accent); color: #fff; }

/* ================= bundles band (was a dark block) ================= */
.cs-storefront .bx-band {
    background: linear-gradient(135deg, var(--sand) 0%, var(--bg-2) 60%, var(--accent-soft) 100%);
    color: var(--ink); border-radius: var(--radius-lg); box-shadow: none;
}
.cs-storefront .bx-band-intro h2, .cs-storefront .bx-band-intro p { color: var(--ink) !important; }
.cs-storefront .bx-band-intro p { color: var(--muted) !important; }
.cs-storefront .bx-band-all, .cs-storefront .bx-band-arrows button { border: 0 !important; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs); }
.cs-storefront .bx-band-arrows button:hover:not(:disabled) { background: var(--accent); color: #fff; }

/* ================= brands & blog ================= */
.cs-storefront .brand-tile { border: 0 !important; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-xs); transition: box-shadow .3s var(--ease); }
.cs-storefront a.brand-tile:hover { box-shadow: var(--shadow-sm); }
.cs-storefront .brand-controls button {
    width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-xs);
}
.cs-storefront .brand-controls button:hover { background: var(--accent); color: #fff; }
.cs-storefront .blog-card, .cs-storefront .bundle-card { border: 0 !important; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.cs-storefront .blog-card:hover, .cs-storefront .bundle-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ================= page headings, breadcrumbs ================= */
.cs-storefront .store-page-heading { border-bottom: 0 !important; padding-bottom: 8px; }
.cs-storefront .store-page-heading h1 { font-size: clamp(28px, 3vw, 42px); }
.cs-storefront .breadcrumb, .cs-storefront .store-breadcrumb .breadcrumb {
    display: inline-flex; flex-wrap: wrap; padding: 7px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs); font-size: 13px;
}
.cs-storefront .breadcrumb a { color: var(--ink-2); }
.cs-storefront .breadcrumb a:hover { color: var(--accent-dark); }
.cs-storefront .breadcrumb-item.active { color: var(--muted); }
.cs-storefront .store-page-count {
    background: var(--accent-soft) !important; color: var(--accent-dark) !important; border: 0 !important; border-radius: 999px; font-weight: 600;
}

/* ================= surfaces & forms ================= */
.cs-storefront .surface, .cs-storefront .filter-panel-content, .cs-storefront .responsive-filter,
.cs-storefront .product-overview .product-detail-panel, .cs-storefront .product-overview #product-gallery, .cs-storefront .product-information,
.cs-storefront .order-summary, .cs-storefront .cart-item, .cs-storefront .co-summary-card,
.cs-storefront .account-aside, .cs-storefront .account-main > .surface, .cs-storefront .account-profile-card {
    border: 0 !important; border-radius: var(--radius) !important; background: var(--surface); box-shadow: var(--shadow-xs);
}
.cs-storefront .form-control, .cs-storefront .form-select, .cs-storefront .co-select, .cs-storefront .city-select-button {
    border-radius: 14px; border-color: var(--line-strong); background-color: var(--surface); color: var(--ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-storefront .form-control:focus, .cs-storefront .form-select:focus, .cs-storefront .co-select:focus,
.cs-storefront .account-field .form-control:focus, .cs-storefront .co-field .form-control:focus {
    border-color: var(--accent-tint); box-shadow: 0 0 0 4px var(--accent-soft);
}
.cs-storefront input[type="checkbox"], .cs-storefront input[type="radio"] { accent-color: var(--accent); }
.cs-storefront .filter-group { border-color: var(--line) !important; }
.cs-storefront .filter-group h3, .cs-storefront .filter-group h4, .cs-storefront .filter-group legend { letter-spacing: .08em; color: var(--ink-2); }
.cs-storefront .filter-actions { border-top-color: var(--line) !important; }
.cs-storefront .filter-actions .btn { text-transform: none !important; font-size: 14px; }
.cs-storefront .listing-sort-form .form-select { border-radius: 999px; padding-left: 16px; }
.cs-storefront .table > :not(caption) > * > * { border-color: var(--line); }

/* ================= product page ================= */
.cs-storefront .product-zoom, .cs-storefront .zoom-stage { background: #fff; border-radius: 18px; }
.cs-storefront .product-highlights { background: var(--bg) !important; border: 0 !important; border-radius: 16px; }
.cs-storefront .gallery-thumbnails button { border-radius: 12px; border-color: var(--line) !important; background: var(--surface); overflow: hidden; }
.cs-storefront .gallery-thumbnails button[aria-current="true"], .cs-storefront .gallery-thumbnails button.is-active { border-color: var(--accent) !important; }
.cs-storefront .product-purchase #add-to-cart-btn {
    height: 54px; border-radius: 999px !important; background: var(--accent) !important; border-color: var(--accent) !important;
    box-shadow: 0 12px 24px -12px #7c553a99; transition: all .25s var(--ease);
}
.cs-storefront .product-purchase #add-to-cart-btn:hover { background: var(--accent-dark) !important; transform: translateY(-1px); }
.cs-storefront .product-purchase #product-cart-link { border-radius: 999px; color: var(--accent-dark) !important; border-color: var(--accent-tint) !important; background: var(--accent-soft) !important; }
.cs-storefront .quantity-field, .cs-storefront .quantity-field input, .cs-storefront .cart-quantity { border-radius: 999px !important; border-color: var(--line-strong) !important; }
.cs-storefront .product-stock, .cs-storefront .status-success { color: #5d7a55 !important; }
.cs-storefront .variant-option, .cs-storefront .variant-swatch { border-radius: 999px; }
.cs-storefront .variant-option.is-active { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent-dark) !important; }
.cs-storefront .product-sticky-bar { background: #fffdfaeb; backdrop-filter: blur(14px); border-top: 0; box-shadow: 0 -10px 30px -18px #5c402840; }
.cs-storefront .specification-tables tr:nth-child(odd) td, .cs-storefront .specification-tables tr:nth-child(odd) th { background: var(--bg); }
.cs-storefront .specification-tables td, .cs-storefront .specification-tables th { border-color: transparent !important; }
.cs-storefront .specification-tables tr td:first-child, .cs-storefront .specification-tables tr th:first-child { border-radius: 10px 0 0 10px; }
.cs-storefront .specification-tables tr td:last-child { border-radius: 0 10px 10px 0; }
.cs-storefront .product-gallery-thumbs img, .cs-storefront [class*="thumb"] img { border-radius: 10px; }

/* ================= account ================= */
.cs-storefront .account-nav a { border-radius: 14px; }
.cs-storefront .account-nav a.is-active, .cs-storefront .account-menu a:hover { background: var(--accent-soft); color: var(--accent-dark) !important; }
.cs-storefront .account-stat { border: 0 !important; border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.cs-storefront .account-stat:hover { box-shadow: var(--shadow-sm); }

/* ================= toast & feedback ================= */
.cs-storefront #toast-container > div, .cs-storefront #storefront-feedback {
    border-radius: 16px; box-shadow: var(--shadow-md); opacity: 1;
}

/* ================= footer: light sand, rounded top, faded board ================= */
.cs-storefront footer.dark-footer {
    position: relative; overflow: hidden; margin-top: 40px;
    background: var(--sand) !important; color: var(--ink-2); border-radius: 40px 40px 0 0;
}
.cs-storefront .dark-footer::before {
    content: ""; position: absolute; right: 0; top: 0; width: 46%; height: 100%; pointer-events: none;
    background: repeating-conic-gradient(#ffffff59 0 25%, transparent 0 50%) 0 0 / 48px 48px;
    -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 90%); mask-image: linear-gradient(270deg, #000 0%, transparent 90%);
}
.cs-storefront .dark-footer::after {
    content: "\265E\FE0E"; position: absolute; right: 4%; bottom: -40px; font-family: var(--piece-font);
    font-size: 260px; line-height: 1; color: #5c402812; pointer-events: none;
}
.cs-storefront .dark-footer > * { position: relative; z-index: 1; }
.cs-storefront .dark-footer h4 { font-family: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cs-storefront .dark-footer p, .cs-storefront .dark-footer span { color: var(--ink-2) !important; }
.cs-storefront .dark-footer a { color: var(--ink) !important; }
.cs-storefront .dark-footer a:hover { color: var(--accent-dark) !important; }
.cs-storefront .dark-footer i { color: var(--accent) !important; }
.cs-storefront .footer-logo { background: var(--surface); padding: 8px 12px; border-radius: 14px; box-shadow: var(--shadow-xs); }
.cs-storefront .dark-subfooter { background: #e4d9ca !important; border-top: 0; }
.cs-storefront .dark-subfooter p, .cs-storefront .dark-subfooter .footer-end p { color: var(--ink-2) !important; }
.cs-storefront .footer-social a {
    width: 40px; height: 40px; display: grid !important; place-items: center; border-radius: 50%;
    background: var(--surface) !important; color: var(--accent-dark) !important; box-shadow: var(--shadow-xs);
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.cs-storefront .footer-social a i { color: inherit !important; background: transparent !important; }
.cs-storefront .footer-social a:hover { background: var(--accent) !important; color: #fff !important; transform: translateY(-2px); }

/* ================= motion: soft entrances ================= */
@keyframes cs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cs-reveal { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes cs-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
    .cs-storefront .product-card, .cs-storefront .cs-collection, .cs-storefront .home-service,
    .cs-storefront .trend-lead, .cs-storefront .trend-tile, .cs-storefront .blog-card, .cs-storefront .section-heading {
        animation: cs-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cs-storefront *, .cs-storefront *::before, .cs-storefront *::after { animation: none !important; transition: none !important; }
    html:has(.cs-storefront) { scroll-behavior: auto; }
}

/* ================= mobile header: compact, one row of icons ================= */
@media (max-width: 575px) {
    .cs-storefront .mobile-cart > a { font-size: 0 !important; padding: 10px 12px !important; }
    .cs-storefront .mobile-cart > a i { font-size: 18px; }
    .cs-storefront .header-list-link a { padding: 8px; }
    .cs-storefront footer.dark-footer { margin-top: 24px; border-radius: 28px 28px 0 0; }
    .cs-storefront .dark-footer::after { font-size: 180px; bottom: -30px; }
}

/* ================= top bar: WhatsApp number shown directly ================= */
.cs-storefront .top-header .top-whatsapp {
    display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 999px;
    color: var(--ink-2) !important; font-size: 13px; font-weight: 600; letter-spacing: .01em;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront .top-header .top-whatsapp i {
    width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
    background: #e3efe6; color: #3f8a5a !important; font-size: 14px;
}
.cs-storefront .top-header .top-whatsapp:hover { background: var(--surface); color: var(--ink) !important; }

/* ================= hero: slider + side column ================= */
@media (min-width: 992px) {
    .cs-storefront .cs-hero-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
    .cs-storefront .cs-hero-grid .cs-hero-main, .cs-storefront .cs-hero-grid .cs-hero-frame,
    .cs-storefront .cs-hero-grid .cs-hero-static { height: 100%; }
    .cs-storefront .cs-hero-grid .cs-hero-slide { aspect-ratio: auto; height: 440px; min-height: 0; }
    .cs-storefront .cs-hero-grid .cs-hero-title { font-size: clamp(26px, 2.4vw, 36px); }
    .cs-storefront .cs-hero-grid .cs-hero-overlay { width: min(360px, 44%); }
}
.cs-storefront .cs-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.cs-storefront .cs-spot {
    position: relative; overflow: hidden; display: flex; align-items: stretch; gap: 10px; min-height: 0;
    padding: 22px; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cs-storefront .cs-spot:hover { color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cs-storefront .cs-spot-copy { position: relative; z-index: 1; flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cs-storefront .cs-spot-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-dark); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.cs-storefront .cs-spot-tag .cs-piece { font-family: var(--piece-font); font-size: 13px; letter-spacing: 0; }
.cs-storefront .cs-spot-title {
    font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.2; margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-storefront .cs-spot-price { display: flex; align-items: baseline; gap: 8px; }
.cs-storefront .cs-spot-price b { font-size: 18px; font-weight: 700; }
.cs-storefront .cs-spot-price del { font-size: 13px; color: var(--muted); }
.cs-storefront .cs-spot-meta { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.cs-storefront .cs-spot-link {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: var(--bg); font-size: 13px; font-weight: 600; color: var(--accent-dark); transition: background .25s var(--ease), color .25s var(--ease);
}
.cs-storefront .cs-spot-link i { transition: transform .25s var(--ease); }
.cs-storefront .cs-spot:hover .cs-spot-link { background: var(--accent); color: #fff; }
.cs-storefront .cs-spot:hover .cs-spot-link i { transform: translateX(3px); }
.cs-storefront .cs-spot-media { flex: 1 1 45%; min-width: 0; display: grid; place-items: center; border-radius: 18px; background: var(--bg-2); overflow: hidden; }
.cs-storefront .cs-spot-media img { width: 100%; height: 100%; max-height: 170px; object-fit: contain; padding: 8px; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.cs-storefront .cs-spot:hover .cs-spot-media img { transform: scale(1.06); }
/* collection tile: warm sand with a faded board and a large piece */
.cs-storefront .cs-spot-collection { background: linear-gradient(135deg, var(--sand), var(--accent-soft)); }
.cs-storefront .cs-spot-collection::before {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 60%; pointer-events: none;
    background: repeating-conic-gradient(#ffffff73 0 25%, transparent 0 50%) 0 0 / 36px 36px;
    -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent);
}
.cs-storefront .cs-spot-collection .cs-spot-tag, .cs-storefront .cs-spot-collection .cs-spot-link { background: #fffdfacc; }
.cs-storefront .cs-spot-glyph {
    position: relative; z-index: 1; align-self: center; flex: none; font-family: var(--piece-font); font-size: 112px; line-height: 1;
    color: var(--accent); opacity: .75; transition: transform .5s var(--ease);
}
.cs-storefront .cs-spot-collection:hover .cs-spot-glyph { transform: translateY(-4px) rotate(-6deg); }
@media (max-width: 991px) {
    .cs-storefront .cs-hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
    .cs-storefront .cs-spot { padding: 16px; border-radius: var(--radius); }
    .cs-storefront .cs-spot-title { font-size: 18px; }
}
@media (max-width: 575px) {
    .cs-storefront .cs-hero-side { grid-template-columns: 1fr; }
    .cs-storefront .cs-spot { min-height: 168px; }
    .cs-storefront .cs-spot-glyph { font-size: 84px; }
}
/* tablets: keep the WhatsApp number and the right-hand menus on one row */
@media (max-width: 991px) {
    .cs-storefront .top-header .row { display: flex; flex-wrap: nowrap; align-items: center; }
    .cs-storefront .top-header .row > div { width: auto; }
    .cs-storefront .top-header .row > div:last-child { margin-left: auto; }
    .cs-storefront .top-header .header-contact { display: block; }
    .cs-storefront .top-header .header-contact > ul { margin: 0; padding: 0; list-style: none; }
}

/* ================= photos with their own background: fill the frame edge to edge ================= */
.cs-storefront .has-photo-cover { padding: 0 !important; background: var(--bg-2); }
.cs-storefront .has-photo-cover img {
    width: 100% !important; height: 100% !important; max-height: none !important; padding: 0 !important;
    object-fit: cover !important; mix-blend-mode: normal !important;
}

/* ================= product page: gallery as tall as the info panel; thumbnails scroll ================= */
@media (min-width: 992px) {
    /* the gallery column takes the row height set by the info panel instead of setting its own */
    .cs-storefront .product-overview { align-items: stretch; }
    .cs-storefront .product-overview > div:first-child { contain: size; min-height: 520px; }
    .cs-storefront .product-overview #product-gallery {
        height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch;
    }
    .cs-storefront .product-overview .gallery-open { height: 100%; min-height: 0; align-self: stretch; display: grid; place-items: center; }
    .cs-storefront .product-overview .product-gallery-img { height: 100% !important; max-height: 100%; width: 100%; object-fit: contain; }
    .cs-storefront .product-overview .gallery-thumbnails {
        height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; flex-wrap: nowrap !important;
        padding: 2px 4px 2px 2px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
        overscroll-behavior: contain; scroll-snap-type: y proximity;
        -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
    }
    .cs-storefront .product-overview .gallery-thumbnails button { flex: none; scroll-snap-align: start; }
    .cs-storefront .product-overview .gallery-thumbnails::-webkit-scrollbar { width: 4px; }
    .cs-storefront .product-overview .gallery-thumbnails::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
}

/* banners keep their products on the right: keep that part in view when the frame crops the sides */
.cs-storefront .cs-hero-slide img { object-position: 100% center; }

/* ================= hero on light banners: no dark wash, cocoa text, true photo colours ================= */
.cs-storefront .cs-hero-frame { background: var(--bg-2); box-shadow: 0 24px 50px -34px #5c402859; }
.cs-storefront .cs-hero-slide { color: var(--ink); }
.cs-storefront .slick-active .cs-hero-slide img, .cs-storefront .cs-hero-slider:not(.slick-initialized) .cs-hero-slide img { transform: scale(1.02); }
.cs-storefront .cs-hero-slide::before {
    background: linear-gradient(90deg, #fbf6efeb 0%, #fbf6efb3 30%, #fbf6ef00 55%);
}
.cs-storefront .cs-hero-slide::after {
    background: repeating-conic-gradient(#5c40280d 0 25%, transparent 0 50%) 0 0 / 56px 56px;
}
.cs-storefront .cs-hero-title { color: var(--ink); }
.cs-storefront .cs-eyebrow { color: var(--accent-dark); }
.cs-storefront .cs-notation { background: #fffdfa; color: var(--accent-dark); box-shadow: var(--shadow-xs); }
.cs-storefront .cs-btn-light { background: var(--accent); color: #fff; box-shadow: 0 12px 24px -12px #7c553a99; }
.cs-storefront .cs-hero-slide:hover .cs-btn-light { background: var(--accent-dark); color: #fff; }
.cs-storefront .cs-hero-controls { background: #fffdfacc; box-shadow: var(--shadow-sm); }
.cs-storefront .cs-hero-controls button { background: var(--bg); color: var(--ink-2); }
.cs-storefront .cs-hero-controls button:hover { background: var(--accent); color: #fff; }
.cs-storefront .cs-hero-counter { color: var(--muted); }
.cs-storefront .cs-hero-counter b { color: var(--ink); }
@media (max-width: 767px) {
    .cs-storefront .cs-hero-slide::before { background: linear-gradient(0deg, #fbf6eff2 0%, #fbf6efcc 42%, #fbf6ef00 68%); }
}

/* =====================================================================
 * v3 — more depth & rhythm (same palette, less monotone):
 * warm walnut frame (top bar + footer), a dark walnut band mid-page,
 * a second accent (soft chess-club green), fuller accent fills, and a
 * slightly deeper page background so the light cards stand out.
 * ===================================================================== */
.cs-storefront {
    --bg: #f4eee5;
    --bg-2: #efe7db;
    --walnut-deep: #3d3029;
    --walnut-mid: #54423a;
    --cream: #f6eee3;
    --green: #4f6a58;
    --green-soft: #e3ebe4;
    --accent: #93623f;
    --accent-dark: #774d30;
    --accent-soft: #f1e4d6;
    --accent-tint: #e6cdb3;
    --sage: var(--green);
    --sage-soft: var(--green-soft);
    --shadow-xs: 0 1px 2px #5c40280f, 0 4px 14px -8px #5c402826;
}

.cs-storefront header.header-style-5 { background: #fbf8f3eb; border-bottom: 1px solid #e8dfd2; }

/* ---- header: catalog button carries the accent ---- */
.cs-storefront .cs-catalog > summary { background: var(--accent); color: #fff; box-shadow: 0 10px 22px -12px #774d3099; }
.cs-storefront .cs-catalog > summary:hover, .cs-storefront .cs-catalog[open] > summary { background: var(--accent-dark); color: #fff; }
.cs-storefront .cs-catalog-icon { background: #ffffff26; color: #fff; }

/* ---- section headings: a crisper little board ---- */
.cs-storefront .section-heading h2::before, .cs-storefront .trend-head h2::before {
    background: repeating-conic-gradient(var(--accent) 0 25%, var(--cream) 0 50%) 0 0 / 11px 11px;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px #5c402833;
}


/* ---- hero side: the collection tile becomes a rich caramel card ---- */
.cs-storefront .cs-spot-collection { background: linear-gradient(140deg, #a06c46 0%, #7f5236 100%); color: #fff; }
.cs-storefront .cs-spot-collection:hover { color: #fff; }
.cs-storefront .cs-spot-collection::before { background: repeating-conic-gradient(#ffffff1f 0 25%, transparent 0 50%) 0 0 / 36px 36px; }
.cs-storefront .cs-spot-collection .cs-spot-title { color: #fff; }
.cs-storefront .cs-spot-collection .cs-spot-meta { color: #f3e2d0; }
.cs-storefront .cs-spot-collection .cs-spot-tag { background: #ffffff26; color: #fff; }
.cs-storefront .cs-spot-collection .cs-spot-link { background: #fffdfa; color: var(--accent-dark); }
.cs-storefront .cs-spot-collection:hover .cs-spot-link { background: var(--walnut-deep); color: #fff; }
.cs-storefront .cs-spot-glyph { color: #fff; opacity: .9; text-shadow: 0 10px 24px #3d302966; }
.cs-storefront .cs-spot-tag { background: var(--green-soft); color: var(--green); }

/* ---- collections & cards: the piece badge in solid colours ---- */
.cs-storefront .cs-collection-piece { background: var(--walnut-deep); color: #f3e2c8; }
.cs-storefront .cs-collection:nth-child(3n+2) .cs-collection-piece { background: var(--accent); color: #fff; }
.cs-storefront .cs-collection:nth-child(3n) .cs-collection-piece { background: var(--green); color: #fff; }
.cs-storefront .product-card-price strong { color: var(--walnut-deep); }
.cs-storefront .product-sale-label { background: var(--green); }

/* =====================================================================
 * v4 — colours tuned to the new logo: copper plate + black knight.
 * Accent moves from walnut-caramel to a calm copper; the dark frame
 * becomes a neutral espresso that echoes the black knight.
 * ===================================================================== */
.cs-storefront {
    --ink: #352b26;
    --ink-2: #4c403a;
    --accent: #a05a30;
    --accent-dark: #83461f;
    --accent-soft: #f4e4d6;
    --accent-tint: #e9c6a8;
    --walnut-deep: #2f2723;
    --walnut-mid: #463a33;
    --cream: #f7efe5;
}
.cs-storefront .brand-logo img { height: 54px; }
@media (max-width: 575px) { .cs-storefront .brand-logo img { height: 44px; } }
.cs-storefront .cs-catalog > summary { box-shadow: 0 10px 22px -12px #83461f99; }
.cs-storefront .cs-spot-collection { background: linear-gradient(140deg, #b56a3a 0%, #8b4a24 100%); }
.cs-storefront .product-purchase #add-to-cart-btn, .cs-storefront .btn-solid, .cs-storefront .btn-primary, .cs-storefront .btn-dark,
.cs-storefront .filter-actions .btn, .cs-storefront .co-submit { box-shadow: 0 10px 22px -12px #83461f99; }
.cs-storefront ::selection { background: #ecd0b6; }

/* ================= v5: light footer (user: dark one was too heavy), logo without a plate ================= */
.cs-storefront footer.dark-footer {
    background: linear-gradient(180deg, #efe4d6 0%, #e8dac8 100%) !important; color: var(--ink-2);
    border-radius: 40px 40px 0 0;
}
.cs-storefront .dark-footer::before { background: repeating-conic-gradient(#ffffff59 0 25%, transparent 0 50%) 0 0 / 48px 48px; }
.cs-storefront .dark-footer::after { color: #a05a3014; }
.cs-storefront .dark-footer h4 { color: var(--accent) !important; }
.cs-storefront .dark-footer p, .cs-storefront .dark-footer span { color: var(--ink-2) !important; }
.cs-storefront .dark-footer a { color: var(--ink) !important; }
.cs-storefront .dark-footer a:hover { color: var(--accent-dark) !important; }
.cs-storefront .dark-footer i { color: var(--accent) !important; }
.cs-storefront .footer-logo {
    width: auto !important; height: 60px !important; padding: 0 !important; background: none !important;
    border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 6px 10px #5c402826);
}
.cs-storefront .dark-subfooter { background: #e0d0bc !important; }
.cs-storefront .dark-subfooter p, .cs-storefront .dark-subfooter .footer-end p { color: var(--ink-2) !important; }
.cs-storefront .footer-social a { background: var(--surface) !important; color: var(--accent-dark) !important; box-shadow: var(--shadow-xs); }
.cs-storefront .footer-social a:hover { background: var(--accent) !important; color: #fff !important; }

/* ================= product gallery: thumbnail arrows ================= */
.cs-storefront #product-gallery { position: relative; }
.cs-storefront .product-overview .gallery-thumbnails { scrollbar-width: none; }
.cs-storefront .product-overview .gallery-thumbnails::-webkit-scrollbar { display: none; }
/* fades only where there is more to see */
.cs-storefront .product-overview .has-thumb-arrows .gallery-thumbnails {
    padding-top: 22px; padding-bottom: 22px;
    -webkit-mask-image: linear-gradient(transparent 0, #000 26px, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(transparent 0, #000 26px, #000 calc(100% - 26px), transparent);
}
.cs-storefront .product-overview .has-thumb-arrows .gallery-thumbnails:not(.is-scrolled) {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
}
.cs-storefront .product-overview .has-thumb-arrows .gallery-thumbnails.is-at-end.is-scrolled {
    -webkit-mask-image: linear-gradient(transparent 0, #000 26px); mask-image: linear-gradient(transparent 0, #000 26px);
}
.cs-storefront .thumb-arrow {
    position: absolute; z-index: 5; width: 32px; height: 32px; margin-left: -16px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: var(--surface); color: var(--accent-dark); box-shadow: var(--shadow-sm);
    cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.cs-storefront .thumb-arrow-up { margin-top: -10px; }
.cs-storefront .thumb-arrow-down { margin-top: -22px; }
.cs-storefront .thumb-arrow:hover:not(:disabled) { background: var(--accent); color: #fff; transform: scale(1.08); }
.cs-storefront .thumb-arrow:disabled { opacity: 0; pointer-events: none; }
.cs-storefront .thumb-arrow[hidden] { display: none; }
/* WhatsApp glyph exactly centred in its disc */
.cs-storefront .top-header .top-whatsapp i {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin: 0 !important; padding: 0 !important;
    line-height: 1 !important; font-size: 15px !important; text-align: center;
}
.cs-storefront .top-header .top-whatsapp i::before { display: block; line-height: 1; margin: 0; }

/* ================= customer reviews (home) ================= */
.cs-storefront .cs-reviews { margin: 72px 0 56px; scroll-margin-top: 130px; }
.cs-storefront .cs-reviews-wrap {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 32px; align-items: center;
    padding: clamp(24px, 4vw, 48px); border-radius: 32px;
    background:
        radial-gradient(60% 90% at 0% 0%, #fff8ef 0%, transparent 60%),
        radial-gradient(50% 80% at 100% 100%, #f6e3d2 0%, transparent 65%),
        linear-gradient(135deg, #fbf3e9 0%, #f4e6d6 100%);
    box-shadow: inset 0 0 0 1px #ecdccb;
}
/* faded board pattern + a big knight in the corner */
.cs-storefront .cs-reviews-wrap::before {
    content: ""; position: absolute; inset: 0 0 0 45%; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(#ffffff80 0 25%, transparent 0 50%) 0 0 / 46px 46px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
    opacity: .7;
}
.cs-storefront .cs-reviews-deco {
    position: absolute; z-index: -1; left: -30px; bottom: -70px; font-family: var(--piece-font); font-size: 300px; line-height: 1;
    color: #a05a3012; pointer-events: none; transform: rotate(-8deg);
}

/* summary card */
.cs-storefront .cs-reviews-summary {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px;
    border-radius: 24px; background: #fffdfacc; backdrop-filter: blur(6px); box-shadow: 0 20px 40px -26px #5c402859;
}
.cs-storefront .cs-reviews-summary h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; }
.cs-storefront .cs-reviews-score { display: flex; align-items: center; gap: 14px; }
.cs-storefront .cs-reviews-score strong {
    font-family: var(--display); font-size: 56px; line-height: 1; font-weight: 600;
    background: linear-gradient(135deg, #c07a3e, #8b4a24); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-storefront .cs-reviews-score > span { display: flex; flex-direction: column; gap: 2px; }
.cs-storefront .cs-reviews-score small { color: var(--muted); font-size: 13.5px; }
.cs-storefront .cs-stars { color: #d39a46; letter-spacing: 2px; font-size: 17px; text-shadow: 0 1px 0 #fff; }
.cs-storefront .cs-reviews-bars { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.cs-storefront .cs-reviews-bars li { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.cs-storefront .cs-reviews-bars li > span:last-child { text-align: right; }
.cs-storefront .cs-reviews-bars i { display: block; height: 7px; border-radius: 99px; background: #efe3d4; overflow: hidden; }
.cs-storefront .cs-reviews-bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e2ad62, #b9672f); }
.cs-storefront .cs-reviews-lead { margin: 0; color: var(--ink-2); font-size: 15px; }
.cs-storefront .cs-reviews-summary .cs-review-open { margin-top: 4px; box-shadow: 0 14px 26px -14px #83461fb3; }
.cs-storefront .cs-reviews-summary .cs-review-open:hover { transform: translateY(-2px); }
.cs-storefront .cs-reviews-fineprint { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

/* the carousel */
.cs-storefront .cs-reviews-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cs-storefront .cs-review-thanks {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px;
    background: #e8f0e9; color: #3f5a48; font-weight: 500; box-shadow: inset 0 0 0 1px #d3e2d6;
}
.cs-storefront .cs-review-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 2); gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 14px 6px 22px; margin: -14px -6px -10px;
    scrollbar-width: none; overscroll-behavior-x: contain;
}
.cs-storefront .cs-review-track::-webkit-scrollbar { display: none; }
.cs-storefront .cs-review-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 24px; }
.cs-storefront .cs-review-card {
    --edge: linear-gradient(90deg, #c27a3f, #e8b06a);
    position: relative; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px;
    min-height: 260px; padding: 30px 26px 22px; border-radius: 24px; background: #fffdfa;
    box-shadow: 0 2px 6px #5c40280d, 0 18px 36px -24px #5c402866;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cs-storefront .cs-review-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--edge); }
.cs-storefront .cs-review-card:nth-child(3n+2) { --edge: linear-gradient(90deg, #5f8068, #a9c4ad); }
.cs-storefront .cs-review-card:nth-child(3n) { --edge: linear-gradient(90deg, #b48a3a, #e6c77d); }
.cs-storefront .cs-review-card:hover { transform: translateY(-6px) rotate(-.3deg); box-shadow: 0 4px 10px #5c40280f, 0 30px 50px -26px #5c40288c; }
.cs-storefront .cs-review-quote {
    position: absolute; right: 18px; top: 2px; font-family: var(--display); font-size: 130px; line-height: 1;
    color: #f3e4d4; pointer-events: none; transition: transform .4s var(--ease), color .4s var(--ease);
}
.cs-storefront .cs-review-card:hover .cs-review-quote { transform: translateY(4px) scale(1.06); color: #ecd3ba; }
.cs-storefront .cs-review-card > *:not(.cs-review-quote) { position: relative; }
.cs-storefront .cs-review-body {
    flex: 1; margin: 0; padding: 0; border: 0; font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.65; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-storefront .cs-review-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px dashed #e6d9c9; }
.cs-storefront .cs-review-avatar {
    flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, #f7e7d6, #ecd2b8); color: var(--accent-dark); font-weight: 700; font-size: 14.5px;
    box-shadow: 0 0 0 3px #fffdfa, 0 0 0 5px #e9c6a8;
}
.cs-storefront .cs-review-card:nth-child(3n+2) .cs-review-avatar { background: linear-gradient(135deg, #e7f0e8, #cfe0d2); color: #4f6a58; box-shadow: 0 0 0 3px #fffdfa, 0 0 0 5px #bcd3c0; }
.cs-storefront .cs-review-card:nth-child(3n) .cs-review-avatar { background: linear-gradient(135deg, #faf0d9, #efdcae); color: #8a6420; box-shadow: 0 0 0 3px #fffdfa, 0 0 0 5px #e6cd8f; }
.cs-storefront .cs-review-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cs-storefront .cs-review-who strong { font-size: 15px; color: var(--ink); }
.cs-storefront .cs-review-who small { font-size: 12.5px; color: var(--muted); }
.cs-storefront .cs-review-badge {
    margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
    background: #e8f0e9; color: #4f6a58; font-size: 12px; font-weight: 600;
}
.cs-storefront .cs-reviews-nav { display: flex; gap: 8px; justify-content: flex-end; }
.cs-storefront .cs-reviews-nav[hidden] { display: none; }
.cs-storefront .cs-reviews-nav button {
    width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center;
    background: #fffdfa; color: var(--ink-2); box-shadow: 0 6px 16px -10px #5c402880; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.cs-storefront .cs-reviews-nav button:hover:not(:disabled) { background: var(--accent); color: #fff; transform: translateY(-1px); }
.cs-storefront .cs-reviews-nav button:disabled { opacity: .45; }

/* no reviews yet */
.cs-storefront .cs-reviews-invite {
    position: relative; padding: 36px 34px; border-radius: 24px; background: #fffdfab3; border: 2px dashed #e4cdb4; text-align: center;
}
.cs-storefront .cs-reviews-invite-glyph { display: block; font-family: var(--display); font-size: 110px; line-height: .6; color: #e9c6a8; margin-top: 26px; }
.cs-storefront .cs-reviews-invite p { margin: 8px auto 0; max-width: 460px; font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 991px) {
    .cs-storefront .cs-reviews-wrap { grid-template-columns: 1fr; gap: 22px; }
    .cs-storefront .cs-reviews-summary { padding: 22px; }
}
@media (max-width: 575px) {
    .cs-storefront .cs-reviews-wrap { border-radius: 24px; padding: 16px; }
    .cs-storefront .cs-review-track { grid-auto-columns: 88%; gap: 14px; }
    .cs-storefront .cs-reviews-score strong { font-size: 46px; }
    .cs-storefront .cs-reviews-nav { justify-content: center; }
}

/* write-a-review dialog */
.cs-storefront .cs-review-dialog {
    width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px;
    background: var(--surface); color: var(--ink); box-shadow: 0 40px 80px -30px #2f272366;
}
.cs-storefront .cs-review-dialog::backdrop { background: #2f272366; backdrop-filter: blur(4px); }
.cs-storefront .cs-review-dialog[open] { animation: cs-pop .28s var(--ease); }
.cs-storefront .cs-review-form { padding: 24px 26px 26px; display: grid; gap: 14px; }
.cs-storefront .cs-review-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.cs-storefront .cs-review-dialog-head h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 24px; }
.cs-storefront .cs-review-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); }
.cs-storefront .cs-review-close:hover { background: var(--accent-soft); color: var(--accent-dark); }
.cs-storefront .cs-review-note { margin: -4px 0 0; font-size: 13.5px; color: var(--muted); }
.cs-storefront .cs-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 575px) { .cs-storefront .cs-review-grid { grid-template-columns: 1fr; } }
.cs-storefront .cs-field { display: grid; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.cs-storefront .cs-field small { font-weight: 500; color: var(--muted); }
.cs-storefront .cs-review-submit { justify-self: start; border: 0; }
.cs-storefront .cs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* star picker: radios 5→1 laid out right-to-left so :hover / :checked fill the stars before them */
.cs-storefront .cs-rate { margin: 0; padding: 0; border: 0; }
.cs-storefront .cs-rate legend { float: none; width: auto; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.cs-storefront .cs-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.cs-storefront .cs-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-storefront .cs-rate-stars label { cursor: pointer; font-size: 30px; line-height: 1; color: #e2d6c6; transition: color .15s var(--ease), transform .15s var(--ease); }
.cs-storefront .cs-rate-stars label:hover, .cs-storefront .cs-rate-stars label:hover ~ label,
.cs-storefront .cs-rate-stars input:checked ~ label { color: #c88a3c; }
.cs-storefront .cs-rate-stars label:hover { transform: scale(1.12); }
.cs-storefront .cs-rate-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* reviews summary without ratings: a row of customer initials + the count */
.cs-storefront .cs-reviews-count { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-2); font-size: 14.5px; }
.cs-storefront .cs-reviews-faces { display: inline-flex; }
.cs-storefront .cs-reviews-faces i {
    width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
    font-size: 11.5px; font-weight: 700; color: var(--accent-dark); background: linear-gradient(135deg, #f7e7d6, #ecd2b8);
    box-shadow: 0 0 0 3px #fffdfa;
}
.cs-storefront .cs-reviews-faces i:first-child { margin-left: 0; }
.cs-storefront .cs-reviews-faces i:nth-child(2) { background: linear-gradient(135deg, #e7f0e8, #cfe0d2); color: #4f6a58; }
.cs-storefront .cs-reviews-faces i:nth-child(3) { background: linear-gradient(135deg, #faf0d9, #efdcae); color: #8a6420; }
.cs-storefront .cs-reviews-summary .cs-reviews-lead { font-size: 15.5px; line-height: 1.6; }
.cs-storefront .cs-review-card { min-height: 220px; padding-top: 34px; }

/* ================= product page: warm info panel with the faded board detail ================= */
.cs-storefront .product-overview .product-detail-panel {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(70% 60% at 0% 0%, #fffaf3 0%, transparent 65%),
        radial-gradient(60% 70% at 100% 100%, #f6e3d2 0%, transparent 70%),
        linear-gradient(140deg, #fdf8f1 0%, #f6eadc 100%) !important;
    box-shadow: inset 0 0 0 1px #ecdccb, var(--shadow-xs);
}
.cs-storefront .product-overview .product-detail-panel::before {
    content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 55%; pointer-events: none;
    background: repeating-conic-gradient(#ffffffa6 0 25%, transparent 0 50%) 0 0 / 42px 42px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 75%); mask-image: linear-gradient(90deg, transparent 0%, #000 75%);
}
.cs-storefront .product-overview .product-detail-panel::after {
    content: "\265E\FE0E"; position: absolute; z-index: -1; right: -24px; bottom: -56px; pointer-events: none;
    font-family: var(--piece-font); font-size: 240px; line-height: 1; color: #a05a3014; transform: rotate(-8deg);
}
.cs-storefront .product-overview .product-detail-panel > * { position: relative; }
/* the purchase controls stay crisp on the patterned side */
.cs-storefront .product-overview .quantity-field input, .cs-storefront .product-overview .quantity-field { background: #fffdfa !important; }
.cs-storefront .product-overview .product-detail-heading .list-actions button,
.cs-storefront .product-overview .product-detail-heading .list-actions a { background: #fffdfa; }
/* purchase notes on the product page: plain lines, not links */
.cs-storefront .product-assurance-list > span { color: var(--ink-2); cursor: default; }
.cs-storefront .product-assurance-list > span i { color: var(--accent); }
/* the header (catalog panel, language / account menus) always stays above the page — also on phones,
   where it is not sticky and the hero slider would otherwise cover the open catalog */
.cs-storefront header.header-style-5 { position: relative; z-index: 60; }
@media (min-width: 992px) { .cs-storefront header.header-style-5 { position: sticky; } }
.cs-storefront .cs-catalog .cs-catalog-panel { z-index: 70; }
/* reviews: a little less air above and below */
.cs-storefront .cs-reviews { margin: 52px 0 40px; }
.cs-storefront .cs-reviews-wrap { padding: clamp(20px, 3vw, 36px); }
/* photo zoom popup: plain white, so the (white-background) product photos read best */
.cs-storefront .product-zoom { background: #fff !important; box-shadow: 0 40px 80px -30px #2f272366; }
.cs-storefront .product-zoom::backdrop { background: #2f2723cc; backdrop-filter: blur(4px); }
.cs-storefront .zoom-toolbar button, .cs-storefront .zoom-controls button {
    background: var(--bg) !important; border: 0 !important; border-radius: 999px !important; color: var(--ink-2);
}
.cs-storefront .zoom-toolbar button:hover, .cs-storefront .zoom-controls button:hover { background: var(--accent-soft) !important; color: var(--accent-dark); }

/* "Ən çox baxılan məhsullar": a queen in front instead of the little board */
.cs-storefront .trend-head h2::before {
    content: "\265B\FE0E"; width: auto; height: auto; border-radius: 0; box-shadow: none; background: none;
    font-family: var(--piece-font); font-size: .95em; line-height: 1; color: var(--accent);
}

/* ================= cart: select-all / remove-selected bar in the shop's warm tones ================= */
.cs-storefront .cart-bulk-bar {
    background: linear-gradient(135deg, #fbf3e9, #f4e6d6) !important; border-radius: 18px !important;
    box-shadow: inset 0 0 0 1px #ecdccb; padding: 12px 18px 12px 20px !important;
}
.cs-storefront .cart-select-all { font-size: 14px !important; font-weight: 500; color: var(--ink) !important; }
.cs-storefront #cart-bulk-remove-btn {
    border: 0 !important; border-radius: 999px !important; padding: 8px 16px !important; background: #fffdfa !important;
    color: #9b4a36 !important; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important;
    box-shadow: 0 4px 12px -8px #5c402880; transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront #cart-bulk-remove-btn:hover:not(:disabled) { background: #9b4a36 !important; color: #fff !important; }
.cs-storefront #cart-bulk-remove-btn:disabled { background: #fffdfa99 !important; color: var(--muted) !important; box-shadow: none; }
.cs-storefront .cart-remove, .cs-storefront .cart-remove-form button { color: #9b4a36; }

/* ================= sign-in / register: light warm side panel instead of the dark one ================= */
.cs-storefront .auth-shell { border: 0 !important; border-radius: 28px !important; box-shadow: 0 2px 6px #5c40280d, 0 30px 60px -36px #5c402866; background: #fffdfa; }
.cs-storefront .auth-intro {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(70% 60% at 0% 0%, #fffaf3 0%, transparent 65%),
        radial-gradient(60% 70% at 100% 100%, #f2dcc6 0%, transparent 70%),
        linear-gradient(150deg, #fbf3e9 0%, #f3e3d1 100%) !important;
    color: var(--ink);
}
.cs-storefront .auth-intro::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(#ffffff99 0 25%, transparent 0 50%) 0 0 / 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 85%); mask-image: linear-gradient(180deg, transparent 0%, #000 85%);
}
.cs-storefront .auth-intro::after {
    content: "\265E\FE0E"; position: absolute; z-index: -1; right: -30px; bottom: -60px; pointer-events: none;
    font-family: var(--piece-font); font-size: 260px; line-height: 1; color: #a05a301a; transform: rotate(-8deg);
}
.cs-storefront .auth-intro-mark { color: var(--accent) !important; background: #fffdfa; border: 0 !important; box-shadow: 0 10px 24px -14px #5c402880; }
.cs-storefront .auth-intro .eyebrow { color: var(--accent) !important; font-weight: 600; }
.cs-storefront .auth-intro h2 { color: var(--ink) !important; font-family: var(--display); font-weight: 600; }
.cs-storefront .auth-intro p { color: var(--ink-2) !important; font-size: 15px !important; }
/* the way back: a clear button-like link, not faint text */
.cs-storefront .auth-intro a {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
    background: #fffdfa; color: var(--accent-dark) !important; font-size: 14px !important; font-weight: 600;
    box-shadow: 0 6px 16px -10px #5c402880; transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront .auth-intro a:hover { background: var(--accent); color: #fff !important; }
.cs-storefront .auth-tabs a { color: var(--muted); }
.cs-storefront .auth-tabs a.active { color: var(--accent-dark) !important; border-color: var(--accent) !important; }
.cs-storefront .auth-form-panel a:not(.btn):not(.auth-tabs a) { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #e9c6a8; }
.cs-storefront .auth-form-panel a:not(.btn):hover { text-decoration-color: currentColor; }
/* browser autofill: warm instead of the default blue */
.cs-storefront input:-webkit-autofill, .cs-storefront input:-webkit-autofill:hover, .cs-storefront input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fbf3e9 inset !important; -webkit-text-fill-color: var(--ink) !important; transition: background-color 9999s;
}

/* search: the round button sits centred inside the field */
.cs-storefront .form_search { align-items: center; padding-right: 5px; }
.cs-storefront .form_search .btn-search { align-self: center; margin: 0 !important; flex: none; }
.cs-storefront .auth-tabs a { text-decoration: none !important; }
/* show / hide password: the eye button sits centred in the field, everywhere */
.cs-storefront .auth-input-wrap .password-toggle { top: 50%; transform: translateY(-50%); border-radius: 50%; color: var(--muted); }
.cs-storefront .auth-input-wrap .password-toggle:hover, .cs-storefront .auth-input-wrap .password-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-dark); }

/* ================= "Şahmatını tap" helper ================= */
.cs-storefront .cs-finder { margin: 8px 0 56px; scroll-margin-top: 130px; }
.cs-storefront .cs-finder-wrap {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 24px 32px; align-items: start;
    padding: clamp(20px, 3vw, 36px); border-radius: 32px;
    background:
        radial-gradient(60% 90% at 100% 0%, #fff8ef 0%, transparent 60%),
        radial-gradient(50% 80% at 0% 100%, #f6e3d2 0%, transparent 65%),
        linear-gradient(135deg, #fbf3e9 0%, #f4e6d6 100%);
    box-shadow: inset 0 0 0 1px #ecdccb;
}
.cs-storefront .cs-finder-wrap::before {
    content: ""; position: absolute; inset: 0 55% 0 0; z-index: -1; pointer-events: none; opacity: .7;
    background: repeating-conic-gradient(#ffffff80 0 25%, transparent 0 50%) 0 0 / 46px 46px;
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 75%); mask-image: linear-gradient(270deg, transparent, #000 75%);
}
.cs-storefront .cs-finder-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cs-storefront .cs-finder-intro h2 { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.cs-storefront .cs-finder-intro p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
/* progress: three squares and the queen */
.cs-storefront .cs-finder-progress { list-style: none; margin: 10px 0 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.cs-storefront .cs-finder-progress li span {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-weight: 700; font-size: 13px;
    background: #fffdfa; color: var(--muted); box-shadow: inset 0 0 0 1px #ead9c6; transition: all .3s var(--ease);
}
.cs-storefront .cs-finder-progress li.is-done span { background: var(--accent); color: #fff; box-shadow: none; }
.cs-storefront .cs-finder-progress .cs-finder-queen span { font-family: var(--piece-font); font-size: 20px; color: #d8c4ae; background: transparent; box-shadow: none; }
.cs-storefront .cs-finder.has-result .cs-finder-queen span { color: var(--accent); transform: scale(1.15); }
/* questions */
.cs-storefront .cs-finder-form { display: grid; gap: 14px; min-width: 0; }
.cs-storefront .cs-finder-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.cs-storefront .cs-finder-q legend { float: none; width: auto; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.cs-storefront .cs-finder-q legend span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; }
.cs-storefront .cs-finder-options { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-storefront .cs-finder-chip { margin: 0; cursor: pointer; }
.cs-storefront .cs-finder-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-storefront .cs-finder-chip > span {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
    background: #fffdfa; color: var(--ink-2); box-shadow: 0 2px 6px -3px #5c402840, inset 0 0 0 1px #ecdccb;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-storefront .cs-finder-chip > span i { font-style: normal; font-family: var(--piece-font); font-size: 17px; line-height: 1; color: var(--accent); }
.cs-storefront .cs-finder-chip:hover > span { transform: translateY(-1px); box-shadow: 0 8px 18px -10px #5c402880, inset 0 0 0 1px #e1c8ad; }
.cs-storefront .cs-finder-chip input:checked + span { background: var(--accent); color: #fff; box-shadow: 0 10px 20px -12px #83461fb3; }
.cs-storefront .cs-finder-chip input:checked + span i { color: #fff; }
.cs-storefront .cs-finder-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
/* result */
.cs-storefront .cs-finder-result { grid-column: 1 / -1; min-width: 0; transition: opacity .25s var(--ease); }
.cs-storefront .cs-finder-result.is-loading { opacity: .45; pointer-events: none; }
.cs-storefront .cs-finder-placeholder {
    display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px; border-radius: 22px;
    border: 2px dashed #e4cdb4; background: #fffdfa80; color: var(--muted); text-align: center;
}
.cs-storefront .cs-finder-placeholder span { font-family: var(--piece-font); font-size: 34px; color: #e2c6a8; }
.cs-storefront .cs-finder-placeholder p { margin: 0; font-family: var(--display); font-style: italic; font-size: 17px; color: var(--ink-2); }
.cs-storefront .cs-finder-note { margin: 0 0 12px; font-weight: 600; color: var(--accent-dark); }
.cs-storefront .cs-finder-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-storefront .cs-finder-pick { display: flex; flex-direction: column; gap: 8px; animation: cs-rise .5s var(--ease) both; }
.cs-storefront .cs-finder-pick:nth-child(2) { animation-delay: .08s; }
.cs-storefront .cs-finder-pick:nth-child(3) { animation-delay: .16s; }
.cs-storefront .cs-finder-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-storefront .cs-finder-role { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #fffdfa; color: var(--accent-dark); box-shadow: inset 0 0 0 1px #ead9c6; }
.cs-storefront .cs-finder-pick.is-best .cs-finder-role { background: var(--accent); color: #fff; box-shadow: none; }
.cs-storefront .cs-finder-outside { font-size: 12px; color: var(--muted); }
.cs-storefront .cs-finder-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cs-storefront .cs-finder-reasons li { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #fffdfacc; color: var(--ink-2); }
.cs-storefront .cs-finder-reasons li:first-child { background: #e8f0e9; color: #3f5a48; }
.cs-storefront .cs-finder-pick .product-card { flex: 1; }
.cs-storefront .cs-finder-clock {
    margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px;
    background: #fffdfa; color: var(--ink); box-shadow: 0 6px 18px -12px #5c402866; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cs-storefront .cs-finder-clock:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 28px -16px #5c402880; }
.cs-storefront .cs-finder-clock-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.cs-storefront .cs-finder-clock > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cs-storefront .cs-finder-clock small { color: var(--muted); font-size: 12.5px; }
.cs-storefront .cs-finder-clock b { white-space: nowrap; }
@media (max-width: 991px) {
    .cs-storefront .cs-finder-wrap { grid-template-columns: 1fr; }
    .cs-storefront .cs-finder-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .cs-storefront .cs-finder-wrap { border-radius: 24px; padding: 18px 16px; }
    .cs-storefront .cs-finder-picks { grid-template-columns: 1fr; }
    .cs-storefront .cs-finder-chip > span { padding: 9px 13px; font-size: 13.5px; }
}
/* hero side: the finder card (instead of a collection) */
.cs-storefront .cs-spot-finder { background: linear-gradient(140deg, #b56a3a 0%, #8b4a24 100%); color: #fff; cursor: pointer; }
.cs-storefront .cs-spot-finder:hover { color: #fff; }
.cs-storefront .cs-spot-finder::before {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 60%; pointer-events: none;
    background: repeating-conic-gradient(#ffffff1f 0 25%, transparent 0 50%) 0 0 / 36px 36px;
    -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent);
}
.cs-storefront .cs-spot-finder .cs-spot-title { color: #fff; }
.cs-storefront .cs-spot-finder .cs-spot-meta { color: #f3e2d0; }
.cs-storefront .cs-spot-finder .cs-spot-tag { background: #ffffff26; color: #fff; }
.cs-storefront .cs-spot-finder .cs-spot-link { background: #fffdfa; color: var(--accent-dark); }
.cs-storefront .cs-spot-finder:hover .cs-spot-link { background: #2f2723; color: #fff; }
.cs-storefront .cs-spot-finder .cs-spot-glyph { color: #fff; opacity: .9; text-shadow: 0 10px 24px #3d302966; }
.cs-storefront .cs-spot-finder:hover .cs-spot-glyph { transform: translateY(-4px) rotate(-6deg); }
.cs-storefront .home-content > .cs-finder:first-child { margin-top: -18px; }
/* finder result: more than three → a carousel */
.cs-storefront .cs-finder-picks.is-carousel {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 18px) / 3);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    padding: 6px 4px 14px; margin: -6px -4px 0; overscroll-behavior-x: contain;
}
.cs-storefront .cs-finder-picks.is-carousel::-webkit-scrollbar { display: none; }
.cs-storefront .cs-finder-picks.is-carousel > .cs-finder-pick { scroll-snap-align: start; }
.cs-storefront .cs-finder-picks:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 20px; }
.cs-storefront .cs-finder-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.cs-storefront .cs-finder-nav button {
    width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center;
    background: #fffdfa; color: var(--ink-2); box-shadow: 0 6px 16px -10px #5c402880; transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront .cs-finder-nav button:hover:not(:disabled) { background: var(--accent); color: #fff; }
.cs-storefront .cs-finder-nav button:disabled { opacity: .4; }
.cs-storefront .cs-finder-count { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.cs-storefront .cs-finder-pick.is-more .cs-finder-role { background: transparent; box-shadow: inset 0 0 0 1px #e2cdb6; color: var(--muted); }
@media (max-width: 991px) { .cs-storefront .cs-finder-picks.is-carousel { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 575px) { .cs-storefront .cs-finder-picks.is-carousel { grid-auto-columns: 86%; } }
/* hero side: two small jump tiles above the finder card */
.cs-storefront .cs-spot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-height: 0; }
.cs-storefront .cs-spot-mini {
    flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 18px; overflow: hidden;
    background: linear-gradient(150deg, #fffdfa 0%, #f6eadc 100%);
}
.cs-storefront .cs-spot-mini .cs-spot-title { font-size: 17px; margin: 0; position: relative; }
.cs-storefront .cs-spot-mini .cs-spot-meta { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-dark); font-weight: 600; font-size: 13px; }
.cs-storefront .cs-spot-mini-glyph {
    position: absolute; right: 10px; top: 4px; font-family: var(--piece-font); font-size: 62px; line-height: 1; color: #e9d3bb;
    transition: transform .4s var(--ease), color .4s var(--ease);
}
.cs-storefront .cs-spot-mini:nth-child(2) .cs-spot-mini-glyph { font-family: var(--display); font-size: 92px; top: -10px; }
.cs-storefront .cs-spot-mini:hover .cs-spot-mini-glyph { transform: translateY(-3px) rotate(-6deg); color: var(--accent-tint); }
@media (max-width: 575px) {
    .cs-storefront .cs-spot-pair { gap: 10px; }
    .cs-storefront .cs-spot-mini { min-height: 120px; padding: 14px; }
    .cs-storefront .cs-spot-mini .cs-spot-title { font-size: 15px; }
}
/* the services row now sits between the slider and the finder */
.cs-storefront .home-content > .home-services:first-child { margin-top: -18px; margin-bottom: 28px; }
.cs-storefront .home-content > .home-services + .cs-finder { margin-top: 0; }
.cs-storefront .cs-finder { padding: 0 !important; }
.cs-storefront #collections { scroll-margin-top: 130px; }
/* mini tiles: identical layout — same glyph size and place, one-line title, one-line note */
.cs-storefront .cs-spot-mini .cs-spot-mini-glyph,
.cs-storefront .cs-spot-mini:nth-child(2) .cs-spot-mini-glyph { font-family: var(--piece-font); font-size: 64px; top: 14px; right: 16px; }
.cs-storefront .cs-spot-mini .cs-spot-title { font-size: 19px; white-space: nowrap; }
.cs-storefront .cs-spot-mini .cs-spot-meta { white-space: nowrap; }

/* services: a full-width warm band, the same distance to the slider and to the finder */
.cs-storefront .home-content > .home-services:first-child {
    --band: #efe4d6;
    position: relative; margin: 8px 0 40px !important; padding: 22px 0;
    background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax);
    gap: 14px;
}
.cs-storefront .home-content > .home-services:first-child .home-service {
    padding: 14px 18px; gap: 12px; border-radius: 16px; box-shadow: 0 4px 14px -10px #5c402866;
}
.cs-storefront .home-content > .home-services:first-child .home-service-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 15px; }
.cs-storefront .home-content > .home-services:first-child .home-service h2 { font-size: 14px; }
.cs-storefront .home-content > .home-services:first-child .home-service p { font-size: 12.5px; }
.cs-storefront .cs-hero { padding-bottom: 32px; }
.cs-storefront .home-content { padding-top: 0 !important; }
@media (max-width: 575px) {
    .cs-storefront .home-content > .home-services:first-child { padding: 16px 0; margin-bottom: 28px !important; }
    .cs-storefront .cs-hero { padding-bottom: 24px; }
}

/* back to the top */
.cs-storefront .cs-to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 1030; width: 48px; height: 48px; border: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: 18px; color: #fff; background: var(--accent);
    box-shadow: 0 14px 28px -12px #83461fb3; cursor: pointer;
    opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
}
.cs-storefront .cs-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cs-storefront .cs-to-top:hover { background: var(--accent-dark); transform: translateY(-2px); }
.cs-storefront .cs-to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* above the product page's sticky "add to cart" bar on phones */
.cs-storefront:has(.product-sticky-bar:not([hidden])) .cs-to-top { bottom: 92px; }
@media (max-width: 575px) { .cs-storefront .cs-to-top { right: 14px; bottom: 16px; width: 44px; height: 44px; } }
/* collections: a full-width warm band as well */
.cs-storefront #collections {
    --band: #f3e9dc;
    position: relative; padding: 44px 0 48px !important; margin: 0 0 56px !important;
    background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax);
}
.cs-storefront #collections::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 45%; pointer-events: none; z-index: 0;
    background: repeating-conic-gradient(#ffffff59 0 25%, transparent 0 50%) 0 0 / 46px 46px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.cs-storefront #collections > * { position: relative; z-index: 1; }
@media (max-width: 575px) { .cs-storefront #collections { padding: 28px 0 32px !important; margin-bottom: 40px !important; } }
/* finder: the "see all" card at the end */
.cs-storefront .cs-finder-all {
    flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px;
    min-height: 300px; padding: 28px; border-radius: var(--radius); color: var(--ink);
    background: linear-gradient(150deg, #fffdfa 0%, #f3e3d1 100%); border: 2px dashed #e1c6a9;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cs-storefront .cs-finder-all:hover { color: var(--ink); transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 20px 40px -26px #5c402880; }
.cs-storefront .cs-finder-all-glyph { position: absolute; right: -10px; bottom: -30px; font-family: var(--piece-font); font-size: 180px; line-height: 1; color: #a05a3014; }
.cs-storefront .cs-finder-all strong { font-family: var(--display); font-size: 26px; line-height: 1.2; }
.cs-storefront .cs-finder-all > span:not(.cs-finder-all-glyph):not(.cs-finder-all-link) { color: var(--ink-2); font-size: 14.5px; max-width: 240px; }
.cs-storefront .cs-finder-all-link {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
    background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 12px 24px -14px #83461fb3;
}
.cs-storefront .cs-finder-pick.is-all .cs-finder-role { background: transparent; box-shadow: inset 0 0 0 1px #e2cdb6; color: var(--muted); }
/* collections: the band — colour and the faded board pattern — runs across the whole page width */
html:has(.cs-storefront), body.cs-storefront { overflow-x: clip; }
.cs-storefront #collections {
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50%) !important; padding-right: calc(50vw - 50%) !important;
    box-shadow: none; clip-path: none;
    background: var(--band);
}
/* the faded board on the right side of the page, as before — now reaching the screen edge */
.cs-storefront #collections::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 50%; z-index: 0; pointer-events: none;
    background: repeating-conic-gradient(#ffffff73 0 25%, transparent 0 50%) 0 0 / 46px 46px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
}

/* ================= info pages (Haqqımızda, Çatdırılma və Ödəmə …) ================= */
.cs-storefront .editorial-page { position: relative; overflow: hidden; isolation: isolate; padding: clamp(24px, 4vw, 48px) !important; }
.cs-storefront .editorial-page::after {
    content: "\265E\FE0E"; position: absolute; z-index: -1; right: -30px; bottom: -70px; pointer-events: none;
    font-family: var(--piece-font); font-size: 300px; line-height: 1; color: #a05a300f; transform: rotate(-8deg);
}
.cs-storefront .editorial-page .article-content { max-width: 780px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.cs-storefront .article-content .cs-page-lead {
    font-family: var(--display); font-size: 20px; line-height: 1.6; color: var(--ink); margin-bottom: 28px;
    padding-left: 18px; border-left: 3px solid var(--accent-tint);
}
.cs-storefront .article-content h2 {
    display: flex; align-items: center; gap: 12px; margin: 34px 0 12px; font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--ink);
}
.cs-storefront .article-content h2::before { content: "\265F\FE0E"; font-family: var(--piece-font); font-size: 20px; color: var(--accent); }
.cs-storefront .article-content ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.cs-storefront .article-content ul li { position: relative; padding: 12px 16px 12px 44px; border-radius: 14px; background: var(--bg); }
.cs-storefront .article-content ul li::before {
    content: ""; position: absolute; left: 16px; top: 19px; width: 12px; height: 12px; border-radius: 3px;
    background: repeating-conic-gradient(var(--accent) 0 25%, var(--cream, #f7efe5) 0 50%) 0 0 / 6px 6px;
}
.cs-storefront .article-content strong { color: var(--ink); }
.cs-storefront .article-content .cs-page-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 4px 0 14px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.cs-storefront .article-content .cs-page-table th { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; font-size: 14px; padding: 12px 18px; text-align: left; }
.cs-storefront .article-content .cs-page-table td { padding: 13px 18px; border-top: 1px solid var(--line); }
.cs-storefront .article-content .cs-page-table td:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cs-storefront .article-content .cs-page-contact {
    padding: 18px 22px; border-radius: 18px; line-height: 1.9;
    background: linear-gradient(135deg, #fbf3e9, #f4e6d6); box-shadow: inset 0 0 0 1px #ecdccb;
}
.cs-storefront .article-content .cs-page-contact a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.cs-storefront .article-content .cs-page-contact a:hover { text-decoration: underline; }
.cs-storefront .article-content .cs-page-table { display: table !important; table-layout: fixed; }
.cs-storefront .article-content .cs-page-table th:first-child, .cs-storefront .article-content .cs-page-table td:first-child { width: 65%; }
/* finder: a loading state while the answer is on its way (shown only if it takes a moment) */
.cs-storefront .cs-finder-result { position: relative; }
.cs-storefront .cs-finder-result.is-loading { opacity: 1 !important; min-height: 180px; }
.cs-storefront .cs-finder-result.is-loading > * { opacity: .35; transition: opacity .2s var(--ease); }
.cs-storefront .cs-finder-result.is-loading::before {
    content: "\265E\FE0E"; position: absolute; z-index: 3; left: 50%; top: 50%; width: 64px; height: 64px; margin: -52px 0 0 -32px;
    display: grid; place-items: center; border-radius: 50%; background: #fffdfa; color: var(--accent);
    font-family: var(--piece-font); font-size: 32px; line-height: 64px; text-align: center;
    box-shadow: 0 0 0 4px var(--accent-soft), 0 16px 30px -16px #5c402880;
    opacity: 0; animation: cs-finder-in .2s .2s forwards, cs-finder-bob 1s .2s ease-in-out infinite;
}
.cs-storefront .cs-finder-result.is-loading::after {
    content: attr(data-loading-text); position: absolute; z-index: 3; left: 0; right: 0; top: 50%; margin-top: 24px;
    text-align: center; font-weight: 600; color: var(--accent-dark); opacity: 0; animation: cs-finder-in .2s .2s forwards;
}
@keyframes cs-finder-in { to { opacity: 1; } }
@keyframes cs-finder-bob { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .cs-storefront .cs-finder-result.is-loading::before { animation: cs-finder-in .2s .2s forwards; } }
.cs-storefront .cs-finder-result.is-loading > * { opacity: .12; }
.cs-storefront .cs-finder-result.is-loading::before { font-size: 40px !important; line-height: 1 !important; }

/* ── account order: review of a bought product ── */
.cs-storefront .order-review-hint { margin: -4px 0 12px; font-size: 13.5px; }
.cs-storefront .order-review-thanks { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #eef4ef; color: #3c5545; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.cs-storefront .order-review-thanks i { margin-top: 3px; color: var(--green); }
.cs-storefront .order-review { margin-top: 8px; }
.cs-storefront .order-review summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
    padding: 5px 12px; border-radius: 99px; border: 1px solid #e3d3c0; background: #fffaf3;
    color: var(--accent-dark); font-size: 13px; font-weight: 600; transition: background .2s, border-color .2s;
}
.cs-storefront .order-review summary::-webkit-details-marker { display: none; }
.cs-storefront .order-review summary:hover, .cs-storefront .order-review[open] summary { background: var(--accent-soft, #f6e8da); border-color: var(--accent); }
.cs-storefront .order-review-form { margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
.cs-storefront .order-review-form textarea {
    width: 100%; min-width: min(420px, 100%); padding: 10px 12px; border-radius: 12px; border: 1px solid #e3d3c0;
    background: #fff; font: inherit; font-size: 14px; resize: vertical;
}
.cs-storefront .order-review-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #a05a3022; }
.cs-storefront .order-review-error { color: #b0412e; font-size: 12.5px; }
.cs-storefront .order-review-state { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cs-storefront .order-review-state.is-published { color: var(--green); }

/* ── product page: reviews of the product ── */
.cs-storefront .product-reviews .section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.cs-storefront .product-reviews-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.cs-storefront .product-reviews-list .cs-review-card { width: auto; }
/* home carousel: which product a review is about */
.cs-storefront .cs-review-product { display: inline-flex; align-items: center; gap: 6px; margin-top: -4px; font-size: 12.5px; color: var(--accent-dark); text-decoration: none; }
.cs-storefront a.cs-review-product:hover { text-decoration: underline; }

/* ── home: "since 2015 · Azerbaijan's first chess shop" ribbon (brass, quiet) ── */
.cs-storefront .cs-heritage {
    --brass: #b48a3a; --brass-light: #e6c77d;
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin: 6px auto 34px; max-width: 880px;
}
.cs-storefront .cs-heritage-rule { flex: 1 1 60px; height: 1px; background: linear-gradient(90deg, transparent, #d9bf8a); }
.cs-storefront .cs-heritage-rule:last-child { background: linear-gradient(90deg, #d9bf8a, transparent); }
.cs-storefront .cs-heritage-medal {
    flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%;
    display: grid; place-content: center; text-align: center; line-height: 1;
    font-family: var(--display); font-weight: 700; font-size: 18px; color: #7a5a1e;
    background: radial-gradient(circle at 35% 30%, #fffaf0, #f6ead2 70%);
    box-shadow: inset 0 0 0 2px var(--brass-light), 0 0 0 3px #fffaf3, 0 0 0 4px #d9bf8a, 0 10px 22px -12px #b48a3a99;
}
.cs-storefront .cs-heritage-medal small { display: block; margin-bottom: 3px; font-family: var(--text); font-weight: 600; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.cs-storefront .cs-heritage-text { display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; }
.cs-storefront .cs-heritage-text strong { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.6vw, 21px); color: var(--walnut-deep); line-height: 1.25; }
.cs-storefront .cs-heritage-text span { font-size: 14px; color: var(--muted); }
@media (max-width: 575px) {
    .cs-storefront .cs-heritage { gap: 12px; margin-bottom: 26px; }
    .cs-storefront .cs-heritage-rule { display: none; }
    .cs-storefront .cs-heritage-medal { width: 56px; height: 56px; font-size: 15px; }
}

/* ================= gold accents (premium products) =================
   Gold is an accent only: a thin metallic ring, a small badge, a soft glow on hover. */
.cs-storefront {
    --gold-1: #b48a3a; --gold-2: #e6c77d; --gold-3: #f7e7b8; --gold-ink: #6e5016;
    --gold-metal: linear-gradient(135deg, #a9802f 0%, #e6c77d 28%, #fff1c9 46%, #d2a955 64%, #9c7426 100%);
}
.cs-storefront .cs-premium-badge {
    position: absolute; left: 12px; top: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink);
    background: linear-gradient(#fffaf0, #fbf0d6) padding-box, var(--gold-metal) border-box;
    border: 1px solid transparent; box-shadow: 0 6px 14px -8px #9c742699;
}
.cs-storefront .cs-premium-badge > span { font-family: var(--piece-font, serif); font-size: 13px; line-height: 1; color: var(--gold-1); }
.cs-storefront .cs-premium-badge--inline { position: static; margin: 0 0 8px; align-self: flex-start; }

/* card: a thin metallic ring, glowing softly on hover */
.cs-storefront .product-card.is-premium {
    background: linear-gradient(#fffdfa, #fffdfa) padding-box, var(--gold-metal) border-box;
    border: 1.5px solid transparent;
}
.cs-storefront .product-card.is-premium:hover { box-shadow: 0 0 0 4px #e6c77d33, 0 24px 44px -24px #9c7426aa; }
/* a sale / stock label sits below the badge */
.cs-storefront .product-card.is-premium .product-sale-label { top: 46px; }

/* product page: a gold hairline on the info panel */
.cs-storefront .product-overview .product-detail-panel.is-premium { box-shadow: inset 0 3px 0 -1px var(--gold-2), 0 2px 6px #5c40280d, 0 18px 36px -24px #5c402866; }

/* ================= rhythm v1 (2026-11-11): less monotone, still soft =================
   Each numbered block can be removed on its own. */

/* 1 — alternate backgrounds: ivory bands between the warm ones */
.cs-storefront .cs-band-ivory,
.cs-storefront .cs-reviews {
    --band: #fffdf9;
    position: relative;
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding: 52px calc(50vw - 50%) 36px !important;
    background: var(--band);
    border-top: 1px solid #efe4d6; border-bottom: 1px solid #efe4d6;
}
.cs-storefront .cs-band-ivory { margin-bottom: 56px !important; }
.cs-storefront .cs-band-ivory > .section-heading { margin-top: 0; }
.cs-storefront .cs-reviews { margin-top: 56px !important; margin-bottom: 0 !important; padding-bottom: 56px !important; }
.cs-storefront .cs-reviews .cs-reviews-wrap { background: transparent; box-shadow: none; padding: 0; }
.cs-storefront .cs-reviews .cs-reviews-wrap::before { display: none; }
.cs-storefront .cs-band-ivory .product-card { box-shadow: 0 2px 8px #5c40280a, 0 16px 30px -22px #5c402859; }
@media (max-width: 575px) {
    .cs-storefront .cs-band-ivory, .cs-storefront .cs-reviews { padding-top: 32px !important; padding-bottom: 20px !important; }
}

/* 2 — chess green as a second accent (small places only) */
.cs-storefront .cs-spot-mini--reviews { background: linear-gradient(150deg, #fbfdfb 0%, #e5eee6 100%); }
.cs-storefront .cs-spot-mini--reviews .cs-spot-meta { color: var(--green); }
.cs-storefront .cs-reviews .cs-review-avatar { background: #e3ece4; color: #3c5545; }
.cs-storefront .cs-reviews .cs-review-badge { color: var(--green); }
.cs-storefront .product-stock:not(.is-unavailable) { color: var(--green); }

/* 3 — the hero tiles show something: collection photos, a customer's words */
.cs-storefront .cs-spot-thumbs { position: absolute; top: 16px; right: 16px; display: flex; }
.cs-storefront .cs-spot-thumbs img {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #fff;
    border: 3px solid #fffdfa; box-shadow: 0 6px 14px -8px #5c402899; margin-left: -14px;
    transition: transform .35s var(--ease);
}
.cs-storefront .cs-spot-mini:hover .cs-spot-thumbs img:nth-child(1) { transform: translateX(-4px); }
.cs-storefront .cs-spot-mini:hover .cs-spot-thumbs img:nth-child(3) { transform: translateX(4px); }
.cs-storefront .cs-spot-quote { position: absolute; top: 16px; left: 18px; right: 16px; display: flex; flex-direction: column; gap: 8px; }
.cs-storefront .cs-spot-quote-text {
    font-family: var(--display); font-style: italic; font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-storefront .cs-spot-quote-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #3c5545; }
.cs-storefront .cs-spot-quote-who i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 10px; box-shadow: 0 2px 6px -3px #3c554580; }
@media (max-width: 575px) {
    .cs-storefront .cs-spot-thumbs img { width: 34px; height: 34px; margin-left: -10px; }
    .cs-storefront .cs-spot-quote-text { -webkit-line-clamp: 2; font-size: 12.5px; }
    .cs-storefront .cs-spot-quote-who { display: none; }
}

/* 4 — gold, a little more: "since 2015" and a hairline under section titles */
.cs-storefront .cs-eyebrow-gold {
    background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-storefront .section-heading h2, .cs-storefront .trend-head h2 {
    padding-bottom: 10px;
    background: linear-gradient(90deg, var(--gold-2), #e6c77d00) no-repeat 36px 100% / 110px 2px;
}

/* 5 — premium showcase: the one dark spot on the page */
.cs-storefront .cs-premium-band {
    --band: #2f2723;
    position: relative; overflow: hidden; isolation: isolate;
    margin: 0 calc(50% - 50vw) 0 !important; padding: 56px calc(50vw - 50%) 36px !important;
    background:
        radial-gradient(60% 80% at 100% 0%, #b48a3a2e, transparent 70%),
        radial-gradient(50% 70% at 0% 100%, #a05a3026, transparent 70%),
        var(--band);
    color: #f3e9dc;
}
.cs-storefront .cs-premium-band::before {
    content: ""; position: absolute; inset: 0 0 0 55%; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(#ffffff08 0 25%, transparent 0 50%) 0 0 / 52px 52px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.cs-storefront .cs-premium-head { max-width: 640px; margin-bottom: 28px; }
.cs-storefront .cs-premium-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-storefront .cs-premium-eyebrow span { font-family: var(--piece-font); font-size: 15px; }
.cs-storefront .cs-premium-head h2 { margin: 10px 0 8px; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; color: #fbf3e6; }
.cs-storefront .cs-premium-head p { margin: 0; color: #d9c8b4; font-size: 15px; }
.cs-storefront .cs-premium-band .product-card.is-premium { box-shadow: 0 24px 44px -28px #000000b3; }
.cs-storefront .cs-premium-band .product-card.is-premium:hover { box-shadow: 0 0 0 4px #e6c77d40, 0 30px 50px -26px #000000cc; }
.cs-storefront .cs-premium-band + .cs-band-ivory { border-top: 0; }
@media (max-width: 575px) { .cs-storefront .cs-premium-band { padding-top: 36px !important; padding-bottom: 16px !important; } }
/* rhythm v1 fixes: gold text readable on light grounds, bands touch, bigger photo trio */
.cs-storefront .cs-eyebrow-gold { background: linear-gradient(90deg, #8f6a22, #b48a3a 60%, #9c7426); -webkit-background-clip: text; background-clip: text; }
.cs-storefront #collections:has(+ .cs-premium-band) { margin-bottom: 0 !important; }
.cs-storefront .cs-spot-thumbs img { width: 54px; height: 54px; margin-left: -16px; }
@media (max-width: 575px) {
    .cs-storefront .cs-spot-mini { min-height: 136px; }
    .cs-storefront .cs-spot-thumbs { top: 12px; right: 12px; }
    .cs-storefront .cs-spot-thumbs img { width: 36px; height: 36px; margin-left: -11px; border-width: 2px; }
}

/* ================= bundle page: member cards like product cards, palette colours ================= */
.cs-storefront .bundle-page .bx-members-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.cs-storefront .bundle-page .bx-member-card.product-card {
    border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs);
}
.cs-storefront .bundle-page .bx-member-card.product-card.is-premium {
    background: linear-gradient(#fffdfa, #fffdfa) padding-box, var(--gold-metal) border-box; border: 1.5px solid transparent;
}
.cs-storefront .bundle-page .bx-member-card.product-card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-4px); }
.cs-storefront .bundle-page .bx-member-card .bx-member-image {
    position: relative; display: block; width: auto; height: auto; aspect-ratio: 1 / 1; padding: 0; cursor: zoom-in;
    margin: 10px 10px 0; border: 0; border-radius: 16px; background: var(--bg-2); overflow: hidden;
}
.cs-storefront .bundle-page .bx-member-card .bx-member-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cs-storefront .bundle-page .bx-member-card:hover .bx-member-image img { transform: scale(1.04); }
.cs-storefront .bundle-page .bx-member-card .bx-member-number {
    top: 10px; left: 10px; z-index: 2; padding: 3px 9px; border-radius: 99px; background: #fffdfaeb; color: var(--accent-dark);
    font-size: 11.5px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.cs-storefront .bundle-page .bx-member-card .product-hover-action {
    position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); opacity: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; white-space: nowrap;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cs-storefront .bundle-page .bx-member-card:hover .product-hover-action,
.cs-storefront .bundle-page .bx-member-card .bx-member-image:focus-visible .product-hover-action { opacity: 1; transform: translate(-50%, 0); }
.cs-storefront .bundle-page .bx-member-card .card-body { display: flex; flex-direction: column; padding: 14px 18px 18px; }
.cs-storefront .bundle-page .bx-member-card .card-title { margin: 0 0 6px; }
.cs-storefront .bundle-page .bx-member-card .card-title button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.cs-storefront .bundle-page .bx-member-card .card-title button:hover { color: var(--accent-dark); }
.cs-storefront .bundle-page .bx-member-price { margin-top: auto; margin-bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.cs-storefront .bundle-page .bx-member-price small { color: var(--muted); font-size: 12px; }
.cs-storefront .bundle-page .bx-member-price strong { font-family: var(--text); font-weight: 700; font-size: 19px; color: var(--ink); }
.cs-storefront .bundle-page .bx-member-link { display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%; }
@media (max-width: 991px) { .cs-storefront .bundle-page .bx-members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* the sum-up bar: walnut with gold, not slate blue */
.cs-storefront .bundle-page .bx-summary-bar {
    background: radial-gradient(60% 120% at 100% 0%, #b48a3a2e, transparent 70%), #2f2723;
    border-radius: 20px; padding: 20px 26px; color: #f3e9dc;
}
.cs-storefront .bundle-page .bx-summary-bar > span i { color: var(--gold-2); }
.cs-storefront .bundle-page .bx-summary-bar del { color: #bfae99; }
.cs-storefront .bundle-page .bx-summary-bar strong { color: #fbf3e6; font-family: var(--text); }
.cs-storefront .bundle-page .bx-summary-bar div span { color: var(--gold-2); font-weight: 600; }
.cs-storefront .bundle-page .bx-summary-bar a {
    border: 0; border-radius: 999px; padding: 12px 20px; background: var(--accent); color: #fff; font-weight: 600;
    box-shadow: 0 12px 24px -14px #000000aa; transition: background .2s var(--ease), transform .2s var(--ease);
}
.cs-storefront .bundle-page .bx-summary-bar a:hover { background: var(--accent-dark); color: #fff; transform: translateY(-2px); }

/* "add the bundle to cart": the main action, solid like on the product page */
.cs-storefront .bundle-page .bx-buy .bx-buy-button.product-card-action,
.cs-storefront .bx-buy .bx-buy-button {
    background: var(--accent); color: #fff !important; border-radius: 999px; font-weight: 600;
    box-shadow: 0 14px 26px -14px #83461fb3;
}
.cs-storefront .bundle-page .bx-buy .bx-buy-button.product-card-action:hover,
.cs-storefront .bx-buy .bx-buy-button:hover { background: var(--accent-dark); }
.cs-storefront .bundle-page .bx-buy .bx-buy-button i { color: #fff; }
/* the bundle's buy button wins over the soft card-button pill (which uses !important) */
.cs-storefront .bundle-page .card-cart-form.bx-buy .bx-buy-button.product-card-action:not(:disabled):not(.is-added) {
    background: var(--accent) !important; color: #fff !important; min-height: 50px; font-size: 15px;
}
.cs-storefront .bundle-page .card-cart-form.bx-buy .bx-buy-button.product-card-action:hover:not(:disabled):not(.is-added) { background: var(--accent-dark) !important; }
.cs-storefront .bundle-page .bx-member-link { text-transform: none; letter-spacing: 0; }
.cs-storefront .bundle-page .bx-stage-collage { background: linear-gradient(145deg, #fbf6ef, #f1e6d8); }
.cs-storefront .bundle-page .bx-collage-item { box-shadow: 0 2px 6px #5c40280d, 0 14px 26px -20px #5c402866; border: 0; }

/* ================= bundles: the same format as product cards ================= */
/* card (home band + /bundles) */
.cs-storefront .bxc {
    border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cs-storefront .bxc:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-4px); }
.cs-storefront .bxc-visual {
    margin: 10px 10px 0; padding: 0; aspect-ratio: 1 / 1; border: 0; border-radius: 16px; background: var(--bg-2); overflow: hidden;
}
.cs-storefront .bxc-visual > img { object-fit: cover; transition: transform .6s var(--ease); }
.cs-storefront .bxc-collage { gap: 2px; }
.cs-storefront .bxc-collage > span { border-radius: 0; background: #fff; }
.cs-storefront .bxc-collage img { object-fit: cover; padding: 0; transition: transform .6s var(--ease); }
.cs-storefront .bxc:hover .bxc-visual img { transform: scale(1.04); }
/* the discount: the same pill as "Endirim" on product cards, top left */
.cs-storefront .bxc-ribbon {
    top: 12px; left: 12px; right: auto; padding: 4px 11px; border-radius: 999px; background: var(--accent);
    font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.cs-storefront .bxc-body { padding: 14px 18px 18px; gap: 6px; }
.cs-storefront .bxc-tag { color: var(--accent-dark); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.cs-storefront .bxc h3 { font-family: var(--text); font-size: 15.5px; font-weight: 600; }
.cs-storefront .bxc h3 a { color: var(--ink); }
.cs-storefront .bxc h3 a:hover { color: var(--accent-dark); }
.cs-storefront .bxc-members { display: none; }          /* the photos above already show the members */
.cs-storefront .bxc-price { margin-top: auto; padding-top: 6px; }
.cs-storefront .bxc-price strong { font-family: var(--text); font-size: 19px; font-weight: 700; color: var(--ink); }
.cs-storefront .bxc-price del { color: var(--muted); }
.cs-storefront .bxc-save { border-radius: 999px; background: #e7efe8; color: #3c5545; font-weight: 600; padding: 3px 10px; }
.cs-storefront .bxc-cta {
    justify-content: center; gap: 8px; margin-top: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-dark) !important; font-size: 13.5px; font-weight: 600;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.cs-storefront .bxc-cta:hover { background: var(--accent); color: #fff !important; }

/* bundle page: hero collage photos fill their tiles */
.cs-storefront .bundle-page .bx-collage-item { overflow: hidden; }
.cs-storefront .bundle-page .bx-collage-item img { width: 100%; height: 100%; object-fit: cover; padding: 0; }

/* member preview dialog */
.cs-storefront .bx-preview-dialog { width: min(860px, calc(100% - 32px)); border: 0; border-radius: 26px; background: var(--surface); box-shadow: 0 40px 80px -30px #2f272399; }
.cs-storefront .bx-preview-dialog::backdrop { background: #2f272399; backdrop-filter: blur(4px); }
.cs-storefront .bx-preview-toolbar { padding: 14px 18px 14px 24px; border-bottom: 1px solid #efe4d6; font-size: 14px; font-weight: 600; color: var(--ink); }
.cs-storefront .bx-preview-toolbar b { color: var(--muted); }
.cs-storefront .bx-preview-toolbar button { width: 42px; height: 42px; background: var(--bg-2); color: var(--ink); transition: background .2s var(--ease); }
.cs-storefront .bx-preview-toolbar button:hover { background: var(--accent-soft); }
.cs-storefront .bx-preview-content { gap: 32px; padding: 26px; align-items: center; }
.cs-storefront .bx-preview-gallery { border-radius: 18px; background: var(--bg-2); overflow: hidden; }
.cs-storefront .bx-preview-main { display: block; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.cs-storefront .bx-preview-thumbs { margin: 0; padding: 10px; background: var(--surface); }
.cs-storefront .bx-preview-thumbs button { border-color: #e9dccb; border-radius: 10px; }
.cs-storefront .bx-preview-copy h2 { margin: 14px 0 10px; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.25; }
.cs-storefront .bx-preview-price { margin: 16px 0 10px; padding: 14px 18px; border-radius: 16px; background: var(--bg-2); }
.cs-storefront .bx-preview-price strong { font-family: var(--text); font-size: 24px; font-weight: 700; color: var(--ink); }
.cs-storefront .bx-preview-note { margin-bottom: 14px; }
.cs-storefront .bx-preview-product-link {
    gap: 8px; padding: 0 18px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 13.5px; font-weight: 600;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront .bx-preview-product-link:hover { background: var(--accent); color: #fff; }
.cs-storefront .bx-preview-navigation { padding: 14px 18px; border-top: 1px solid #efe4d6; }
.cs-storefront .bx-preview-navigation button { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--bg-2); color: var(--ink); font-weight: 600; transition: background .2s var(--ease); }
.cs-storefront .bx-preview-navigation button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-dark); }
@media (max-width: 767px) {
    .cs-storefront .bx-preview-content { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}

/* hero collage: number and caption as soft pills over the photo */
.cs-storefront .bundle-page .bx-collage-item { border: 0; border-radius: 16px; box-shadow: 0 2px 6px #5c40280d, 0 14px 26px -20px #5c402866; }
.cs-storefront .bundle-page .bx-collage-item .bx-collage-index { z-index: 2; padding: 3px 9px; border-radius: 99px; background: #fffdfaeb; color: var(--accent-dark); }
.cs-storefront .bundle-page .bx-collage-item .bx-collage-caption { z-index: 2; margin: 8px; border-radius: 12px; background: #fffdfaeb; backdrop-filter: blur(4px); color: var(--ink); }

/* /bundles header: the faded board on the right, as on the collections band */
.cs-storefront .bxl-hero { position: relative; overflow: hidden; isolation: isolate; border: 0; box-shadow: var(--shadow-xs); }
.cs-storefront .bxl-hero::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 45%; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(#efe2d1 0 25%, transparent 0 50%) 0 0 / 46px 46px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%);
}
.cs-storefront .bxl-grid { gap: 22px; }
/* collages show the whole board (the photos are white cut-outs): contain on white tiles */
.cs-storefront .bundle-page .bx-collage-item img { object-fit: contain; padding: 34px 14px 64px; }
.cs-storefront .bxc-collage img { object-fit: contain; padding: 8px; }
.cs-storefront .bx-preview-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.cs-storefront .bx-preview-toolbar button:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
.cs-storefront .bxc-visual:has(.bxc-collage) { aspect-ratio: 4 / 3; }
.cs-storefront .bx-band-cards .bxc-visual:has(.bxc-collage) { aspect-ratio: 4 / 3; }
.cs-storefront .bxc-collage { background: #efe4d6; }
.cs-storefront .bxc-collage img { padding: 4px; }

/* ================= header v2 (2026-11-11): quieter top bar, useful counters, quick search, compact on scroll ================= */
.cs-storefront .top-header .header-contact ul { display: flex; align-items: center; gap: 6px; }
.cs-storefront .top-header .top-social {
    display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: #fffdfa; box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), background .2s var(--ease);
}
.cs-storefront .top-header .top-social i { color: #b4507a !important; font-size: 14px; }
.cs-storefront .top-header .top-social:hover { transform: translateY(-1px); background: #fff; }
.cs-storefront .top-header .top-admin {
    display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--accent);
    transition: background .2s var(--ease);
}
.cs-storefront .top-header .top-admin:hover { background: var(--accent-soft); }
.cs-storefront .top-header .header-dropdown > li:has(.top-admin) { padding-right: 4px; }

/* counters: nothing to count → no badge */
.cs-storefront [data-list-count].is-zero, .cs-storefront #cart-count.is-zero { display: none !important; }
.cs-storefront .mobile-cart .cart-total { margin-left: 8px; padding-left: 9px; border-left: 1px solid #d9c3aa; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.cs-storefront .mobile-cart .cart-total[hidden] { display: none; }
@media (max-width: 767px) { .cs-storefront .mobile-cart .cart-total { display: none; } }

/* quick searches under the empty, focused search box */
.cs-storefront .header-search { position: relative; }
.cs-storefront .search-quick {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80;
    display: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 18px;
    background: var(--surface); box-shadow: 0 24px 48px -24px #5c402880, 0 2px 8px #5c40280f;
}
.cs-storefront .header-search:focus-within:has(.nav-search-field:placeholder-shown) .search-quick { display: flex; }
.cs-storefront .search-quick > span { width: 100%; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cs-storefront .search-quick a {
    padding: 6px 14px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 13.5px; font-weight: 500;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-storefront .search-quick a:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* scrolled (desktop, sticky header): top bar folds away, the bar gets slimmer */
@media (min-width: 992px) {
    .cs-storefront header.header-style-5 .top-header { max-height: 60px; overflow: visible; transition: max-height .3s var(--ease), opacity .25s var(--ease); }
    .cs-storefront.cs-scrolled header.header-style-5 .top-header { max-height: 0; opacity: 0; overflow: hidden; border-bottom: 0; }
    .cs-storefront header.header-style-5 .main-menu { transition: padding .3s var(--ease); }
    .cs-storefront.cs-scrolled header.header-style-5 .main-menu { padding: 8px 0; }
    .cs-storefront header.header-style-5 .brand-logo img { transition: height .3s var(--ease); }
    .cs-storefront.cs-scrolled header.header-style-5 .brand-logo img { height: 42px; }
    .cs-storefront.cs-scrolled header.header-style-5 { box-shadow: 0 10px 30px -22px #5c402880; }
}
.cs-storefront .top-header .header-contact ul > li { padding-right: 0 !important; margin-right: 0 !important; }
.cs-storefront .top-header .header-contact ul { gap: 10px; }

/* ================= hero slider v2: own button, "from" price, progress line, gentle entrance ================= */
.cs-storefront .cs-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cs-storefront .cs-hero-from {
    display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 14px; border-radius: 999px;
    background: #fffdfacc; backdrop-filter: blur(6px); box-shadow: var(--shadow-xs);
    font-size: 13.5px; color: var(--ink-2);
}
.cs-storefront .cs-hero-from b { font-size: 16px; font-weight: 700; color: var(--ink); }

/* progress: a thin gold line under the counter */
.cs-storefront .cs-hero-counter { position: relative; }
.cs-storefront .cs-hero-progress { position: absolute; left: 6px; right: 6px; bottom: -7px; height: 2px; border-radius: 2px; background: #e9dccb; overflow: hidden; font-style: normal; }
.cs-storefront .cs-hero-progress > i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); }
.cs-storefront .cs-hero-frame.is-timing .cs-hero-progress > i { animation: cs-hero-progress var(--hero-delay, 5500ms) linear forwards; }
.cs-storefront .cs-hero-frame.is-paused .cs-hero-progress > i { animation-play-state: paused; }
@keyframes cs-hero-progress { to { transform: scaleX(1); } }

/* entrance: eyebrow, title, actions rise in one after another on the shown slide */
@media (prefers-reduced-motion: no-preference) {
    .cs-storefront .slick-initialized .cs-hero-overlay > * { opacity: 0; translate: 0 14px; }
    .cs-storefront .slick-initialized .slick-active .cs-hero-overlay > * { animation: cs-hero-rise .7s var(--ease) forwards; }
    .cs-storefront .slick-initialized .slick-active .cs-hero-overlay > :nth-child(2) { animation-delay: .12s; }
    .cs-storefront .slick-initialized .slick-active .cs-hero-overlay > :nth-child(3) { animation-delay: .24s; }
    @keyframes cs-hero-rise { to { opacity: 1; translate: 0 0; } }
}
.cs-storefront .cs-hero-from { display: inline-block; }
@media (max-width: 575px) {
    /* phones: the text sits on a soft linen wash so long titles stay readable over the photo */
    .cs-storefront .cs-hero-slide::after {
        content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(0deg, #f6eee4f2 0%, #f6eee4d9 45%, #f6eee400 78%);
    }
    .cs-storefront .cs-hero-overlay { z-index: 2; }
    .cs-storefront .cs-hero-actions { gap: 8px; flex-wrap: nowrap; }
    .cs-storefront .cs-hero-actions .cs-btn { padding: 11px 16px; font-size: 13.5px; white-space: nowrap; }
    .cs-storefront .cs-hero-from { padding: 7px 11px; font-size: 12px; white-space: nowrap; }
    .cs-storefront .cs-hero-from b { font-size: 14px; }
}
/* the theme pads top-bar icons on the right — none inside the round Instagram / admin buttons */
.cs-storefront .top-header .top-social i, .cs-storefront .top-header .top-admin i { padding: 0 !important; margin: 0 !important; width: auto; line-height: 1; }
/* admin link: icon + text as a small soft pill */
.cs-storefront .top-header .top-admin {
    display: inline-flex; align-items: center; gap: 6px; width: auto; height: 28px; padding: 0 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 500; color: var(--ink-2) !important;
}
.cs-storefront .top-header .top-admin span { color: var(--ink-2); }

/* ================= catalog button: soft pill like the cart, so the copper logo leads ================= */
.cs-storefront .cs-catalog > summary {
    background: var(--accent-soft); color: var(--accent-dark); box-shadow: none; padding-left: 16px; gap: 8px;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.cs-storefront .cs-catalog > summary:hover { background: #efd9c4; color: var(--accent-dark); }
.cs-storefront .cs-catalog[open] > summary { background: var(--accent); color: #fff; }
.cs-storefront .cs-catalog-icon { background: none; color: var(--accent); width: auto; height: auto; font-size: 20px; }
.cs-storefront .cs-catalog[open] .cs-catalog-icon { color: #fff; }
/* a hairline between the logo and the menu */
@media (min-width: 992px) {
    .cs-storefront .main-menu .menu-left { display: flex; align-items: center; align-self: stretch; padding-right: 24px; border-right: 1px solid #e6d8c6; margin: 6px 0; }
}
/* catalog button: the same soft pill as "Səbət", in gold — a soft gold fill with a fine gold edge */
.cs-storefront .cs-catalog > summary {
    background: #f4e7c9; border: 1px solid #e3c98f; color: #6b4e14; box-shadow: none;
}
.cs-storefront .cs-catalog > summary:hover { background: #efdcb2; border-color: #d2a955; color: #5a410f; }
.cs-storefront .cs-catalog[open] > summary { background: #e9d19c; border-color: #c9a04e; color: #4f390c; }
.cs-storefront .cs-catalog-icon, .cs-storefront .cs-catalog[open] .cs-catalog-icon { color: #a8792a; }

/* ================= top bar: walnut with gold, like the premium showcase band ================= */
.cs-storefront .top-header.top-header-dark {
    background: radial-gradient(40% 220% at 100% 0%, #b48a3a2e, transparent 70%), radial-gradient(35% 200% at 0% 100%, #a05a3026, transparent 70%), #2f2723;
    border-bottom: 0;
}
.cs-storefront .top-header .header-contact li,
.cs-storefront .top-header .header-dropdown > li,
.cs-storefront .top-header .header-dropdown > li > a,
.cs-storefront .top-header .lang-switch-current,
.cs-storefront .top-header .account-switch-current,
.cs-storefront .top-header .top-whatsapp,
.cs-storefront .top-header .top-admin,
.cs-storefront .top-header .top-admin span { color: #efe3d3 !important; }
.cs-storefront .top-header > .container i, .cs-storefront .top-header .account-icon { color: var(--gold-2) !important; }
.cs-storefront .top-header .top-whatsapp:hover, .cs-storefront .top-header .top-admin:hover { background: #ffffff14; color: #fff !important; }
.cs-storefront .top-header .top-whatsapp i { background: #ffffff14; color: #7fd19c !important; }   /* WhatsApp stays green */
.cs-storefront .top-header .top-social { background: #ffffff14; box-shadow: none; }
.cs-storefront .top-header .top-social:hover { background: #ffffff26; }
.cs-storefront .top-header .top-social i { color: var(--gold-2) !important; }
/* the dropdowns (language, account) stay light with dark text */
.cs-storefront .top-header .onhover-show-div, .cs-storefront .top-header .onhover-show-div * { color: var(--ink-2) !important; }
.cs-storefront .top-header .onhover-show-div i { color: var(--accent) !important; }
.cs-storefront .top-header .onhover-show-div .is-current, .cs-storefront .top-header .onhover-show-div .is-current * { color: var(--accent-dark) !important; }
.cs-storefront .top-header .onhover-show-div .is-current .lang-menu-code { color: #fff !important; }

/* services band (Çatdırılma, Hədiyyəlik dəstlər …): walnut with gold behind the light cards */
.cs-storefront .home-content > .home-services:first-child {
    --band: #2f2723;
    background: radial-gradient(40% 160% at 100% 0%, #b48a3a2e, transparent 70%), radial-gradient(35% 160% at 0% 100%, #a05a3026, transparent 70%), var(--band);
    box-shadow: 0 0 0 100vmax var(--band);
}
.cs-storefront .home-content > .home-services:first-child .home-service { box-shadow: 0 14px 28px -18px #000000b3; }
.cs-storefront .home-content > .home-services:first-child {
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50% + 12px); padding-right: calc(50vw - 50% + 12px);
    box-shadow: none; clip-path: none;
}
/* services band: walnut wood — long grain from an SVG noise, lit softly from the top, gold glow on the right */
.cs-storefront .home-content > .home-services:first-child {
    background:
        radial-gradient(40% 160% at 100% 0%, #c9a04e24, transparent 70%),
        linear-gradient(180deg, #ffffff10, transparent 35%, #00000026),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0012 0.11' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 1.25 -0.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") center 0 / 2800px 240px repeat-y,
        linear-gradient(90deg, #3d2a1e, #4d3423 30%, #463020 60%, #3d2a1e);
}

/* ================= "Azərbaycanın ilk şahmat mağazası": a plaque, not a section heading ================= */
.cs-storefront .cs-heritage--plaque {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
    max-width: 760px; margin: 18px auto 52px; padding: 58px 40px 30px;
    border-radius: 26px; background: radial-gradient(80% 120% at 50% 0%, #fffaf0, #fbf3e6 70%);
    box-shadow: 0 2px 6px #5c40280d, 0 26px 50px -34px #5c402880;
}
/* the double gold frame */
.cs-storefront .cs-heritage--plaque::before, .cs-storefront .cs-heritage--plaque::after {
    content: ""; position: absolute; pointer-events: none; z-index: -1; border-radius: 20px;
}
.cs-storefront .cs-heritage--plaque::before { inset: 8px; border: 1.5px solid #dcc08a; }
.cs-storefront .cs-heritage--plaque::after { inset: 13px; border: 1px solid #ecdcb8; border-radius: 16px; }
/* the medal sits on the top edge */
.cs-storefront .cs-heritage--plaque .cs-heritage-medal {
    position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
    width: 84px; height: 84px; font-size: 23px;
}
.cs-storefront .cs-heritage--plaque .cs-heritage-medal small { font-size: 10px; }
.cs-storefront .cs-heritage-eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    background: linear-gradient(90deg, #8f6a22, #b48a3a 60%, #9c7426); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-storefront .cs-heritage--plaque h2 {
    margin: 10px 0 6px; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; color: var(--walnut-deep);
}
.cs-storefront .cs-heritage--plaque p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.cs-storefront .cs-heritage-facts {
    list-style: none; margin: 22px 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px;
    border-top: 1px solid #ecdcb8; width: min(560px, 100%);
}
.cs-storefront .cs-heritage-facts li { position: relative; font-size: 14px; color: var(--muted); }
.cs-storefront .cs-heritage-facts li + li::before { content: "◆"; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); font-size: 7px; color: var(--gold-2); }
.cs-storefront .cs-heritage-facts b { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--walnut-deep); margin-right: 4px; }
@media (max-width: 575px) {
    .cs-storefront .cs-heritage--plaque { margin: 52px 0 40px; padding: 52px 20px 22px; }
    .cs-storefront .cs-heritage-facts { gap: 4px 22px; }
}

.cs-storefront .cs-heritage--plaque { margin-top: 64px; }
@media (max-width: 575px) { .cs-storefront .cs-heritage-facts li + li::before { display: none; } .cs-storefront .cs-heritage--plaque { margin-top: 60px; } }

/* top bar: the same walnut wood as the services band */
.cs-storefront .top-header.top-header-dark {
    background:
        radial-gradient(40% 220% at 100% 0%, #c9a04e24, transparent 70%),
        linear-gradient(180deg, #ffffff0d, #00000033),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0012 0.11' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 1.25 -0.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") center 0 / 2800px 240px repeat-y,
        linear-gradient(90deg, #3d2a1e, #4d3423 30%, #463020 60%, #3d2a1e);
}

/* ================= telling the middle sections apart ================= */
/* "Şahmatını tap": a light ivory card with a copper edge, apart from the sand collections band */
.cs-storefront .cs-finder-wrap {
    background:
        radial-gradient(60% 90% at 100% 0%, #fffaf2 0%, transparent 60%),
        linear-gradient(135deg, #fffdf9 0%, #fbf5ec 100%);
    box-shadow: inset 0 0 0 1px #ecdcc8, 0 2px 6px #5c40280d, 0 26px 48px -34px #5c402880;
}
.cs-storefront .cs-finder-wrap::before { background: repeating-conic-gradient(#f1e5d4 0 25%, transparent 0 50%) 0 0 / 46px 46px; opacity: .6; }
.cs-storefront .cs-finder-wrap .cs-finder-placeholder { border-color: #e3cfb6 !important; background: #fbf6efb3 !important; }

/* bundles band: a light ivory card, after the sand collections band */
.cs-storefront .bx-band { background: linear-gradient(135deg, #fffdf9 0%, #fbf6ef 100%) !important; border: 0; box-shadow: 0 2px 6px #5c40280d, 0 22px 40px -30px #5c402866; }
.cs-storefront #collections { --band: #ecdfcc; }


/* ================= footer signature: a small gold seal + "Azərbaycanın ilk şahmat mağazası" under the logo ================= */
.cs-storefront .cs-signature { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 7px 18px 7px 7px; border-radius: 999px;
    background: linear-gradient(#fffaf0, #fbf1dc) padding-box, var(--gold-metal) border-box; border: 1px solid transparent;
    box-shadow: 0 12px 26px -18px #9c742699; }
.cs-storefront .cs-signature-seal {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1;
    font-family: var(--display); font-weight: 700; font-size: 13px; color: #6e5016;
    background: radial-gradient(circle at 35% 30%, #fffaf0, #f3e2bd 75%);
    box-shadow: inset 0 0 0 1.5px var(--gold-2), 0 0 0 2px #fffaf0, 0 0 0 3px #d9bf8a;
}
.cs-storefront .cs-signature-seal small { display: block; margin-bottom: 2px; font-family: var(--text); font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-1); }
.cs-storefront .cs-signature-text { display: flex; flex-direction: column; gap: 1px; }
.cs-storefront footer .cs-signature-text strong { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 15.5px; color: var(--walnut-deep) !important; line-height: 1.2; }
.cs-storefront footer .cs-signature-text span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-1) !important; }

/* hero "Rəylər" tile: warm cream instead of green (no green on larger surfaces) */
.cs-storefront .cs-spot-mini--reviews { background: linear-gradient(150deg, #fffdfa 0%, #f6ead6 100%); }
.cs-storefront .cs-spot-mini--reviews .cs-spot-meta { color: var(--accent-dark); }
.cs-storefront .cs-spot-quote-who { color: var(--accent-dark); }

/* ================= services: one quiet line between hairlines — no band, no boxes ================= */
.cs-storefront .home-content > .home-services:first-child {
    background: none; box-shadow: none; clip-path: none;
    margin: 6px 0 40px !important; padding: 4px 0 !important; gap: 0;
    border-top: 1px solid #e7dccd; border-bottom: 1px solid #e7dccd;
}
.cs-storefront .home-content > .home-services:first-child .home-service {
    background: none; box-shadow: none; border-radius: 0; padding: 16px 22px;
}
.cs-storefront .home-content > .home-services:first-child .home-service + .home-service { border-left: 1px solid #e7dccd; }
.cs-storefront .home-content > .home-services:first-child .home-service-icon { background: none; color: var(--accent); }
.cs-storefront .home-content > .home-services:first-child .home-service-icon i { color: var(--accent); }
@media (max-width: 991px) {
    /* two by two: dividers between the columns and between the rows */
    .cs-storefront .home-content > .home-services:first-child .home-service:nth-child(odd) { border-left: 0; }
    .cs-storefront .home-content > .home-services:first-child .home-service:nth-child(n+3) { border-top: 1px solid #e7dccd; }
}
@media (max-width: 575px) {
    .cs-storefront .home-content > .home-services:first-child .home-service { padding: 12px 10px; }
}
@media (max-width: 575px) {
    .cs-storefront .home-content > .home-services:first-child { gap: 0 !important; }
    .cs-storefront .home-content > .home-services:first-child .home-service { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
    .cs-storefront .home-content > .home-services:first-child .home-service-icon { flex-basis: 22px !important; width: 22px !important; height: 22px !important; }
    .cs-storefront .home-content > .home-services:first-child .home-service:nth-child(n+3) { border-top: 1px solid #e7dccd !important; }
}

/* ================= top bar: the logo's copper plate — the same gradient, top light to bottom dark ================= */
.cs-storefront .top-header.top-header-dark {
    background: linear-gradient(180deg, #984310 0%, #8a3909 30%, #6b2803 68%, #4d1a01 100%);
    border-bottom: 0; box-shadow: inset 0 1px 0 #ffffff1f;
}
.cs-storefront .top-header > .container i, .cs-storefront .top-header .account-icon { color: #f6dfa6 !important; }
.cs-storefront .top-header .header-contact li, .cs-storefront .top-header .header-dropdown > li,
.cs-storefront .top-header .header-dropdown > li > a, .cs-storefront .top-header .lang-switch-current,
.cs-storefront .top-header .account-switch-current, .cs-storefront .top-header .top-whatsapp,
.cs-storefront .top-header .top-admin, .cs-storefront .top-header .top-admin span { color: #fff4e6 !important; }
.cs-storefront .top-header .top-whatsapp i { background: #ffffff1f; color: #9be0b2 !important; }
.cs-storefront .top-header .top-social { background: #ffffff1f; }
.cs-storefront .top-header .top-social i { color: #f6dfa6 !important; }
.cs-storefront .top-header .top-whatsapp:hover, .cs-storefront .top-header .top-admin:hover { background: #ffffff1f; }
/* language + account: one line, vertically centred */
.cs-storefront .top-header .header-dropdown { display: flex; align-items: center; justify-content: flex-end; margin: 0; height: 100%; }
.cs-storefront .top-header .header-dropdown > li { display: flex; align-items: center; padding-top: 6px; padding-bottom: 6px; }
.cs-storefront .top-header .lang-switch-current, .cs-storefront .top-header .account-switch-current { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.cs-storefront .top-header .account-switch-current .account-icon { display: block; width: 15px; height: 15px; margin: 0; }

/* ================= official partners (Manopoulos, Madon, DGT) ================= */
.cs-storefront .cs-partners { margin: 64px 0 56px; }
.cs-storefront .cs-partners-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.cs-storefront .cs-partners-eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    background: linear-gradient(90deg, #8f6a22, #b48a3a 60%, #9c7426); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-storefront .cs-partners-head h2 { margin: 8px 0 6px; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.5vw, 32px); color: var(--ink); }
.cs-storefront .cs-partners-head p { margin: 0; color: var(--muted); font-size: 15px; }
.cs-storefront .cs-partners-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cs-storefront .cs-partner {
    display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); overflow: hidden;
    box-shadow: var(--shadow-xs); transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cs-storefront .cs-partner:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.cs-storefront .cs-partner-logo {
    display: grid; place-items: center; height: 150px; margin: 10px 10px 0; padding: 26px 34px; border-radius: 16px;
    background: radial-gradient(80% 100% at 50% 30%, #fffdf9, #f4ebdf);
}
.cs-storefront .cs-partner-logo img { max-width: 100%; max-height: 92px; width: auto; height: auto; object-fit: contain; transition: transform .5s var(--ease); }
.cs-storefront .cs-partner:hover .cs-partner-logo img { transform: scale(1.04); }
.cs-storefront .cs-partner-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 20px 20px; }
.cs-storefront .cs-partner-body h3 { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); }
.cs-storefront .cs-partner-body h3 small { font-family: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-1); }
.cs-storefront .cs-partner-body p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.cs-storefront .cs-partner-body a {
    margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-dark); font-size: 13.5px; font-weight: 600; transition: background .25s var(--ease), color .25s var(--ease);
}
.cs-storefront .cs-partner-body a:hover { background: var(--accent); color: #fff; }
@media (max-width: 991px) { .cs-storefront .cs-partners-grid { grid-template-columns: 1fr; gap: 14px; } .cs-storefront .cs-partner { flex-direction: row; } .cs-storefront .cs-partner-logo { flex: 0 0 40%; height: auto; min-height: 130px; margin: 10px 0 10px 10px; padding: 18px; } }
@media (max-width: 575px) { .cs-storefront .cs-partner { flex-direction: column; } .cs-storefront .cs-partner-logo { flex: none; margin: 10px 10px 0; height: 120px; min-height: 0; } }
.cs-storefront .cs-partner-links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cs-storefront .cs-partner-body .cs-partner-links a { margin-top: 0; }
.cs-storefront .cs-partner-body a.cs-partner-site { padding: 8px 4px; background: none; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-decoration-color: #d9c3aa; text-underline-offset: 4px; }
.cs-storefront .cs-partner-body a.cs-partner-site:hover { background: none; color: var(--accent-dark); text-decoration-color: var(--accent); }

/* ================= product page: "official partner" block ================= */
.cs-storefront .product-partner {
    display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 10px 16px 10px 10px; border-radius: 18px;
    background: linear-gradient(#fffdf9, #fbf4e8) padding-box, linear-gradient(135deg, #e6cf9c, #f5e8c8 50%, #d9bb7c) border-box; border: 1px solid transparent;
}
.cs-storefront .product-partner-logo { flex: 0 0 96px; height: 58px; display: grid; place-items: center; padding: 8px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-xs); }
.cs-storefront .product-partner-logo img { max-width: 100%; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.cs-storefront .product-partner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-storefront .product-partner-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-1); }
.cs-storefront .product-partner-text strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cs-storefront .product-partner-text small { font-size: 12.5px; color: var(--muted); }

/* ================= brand page ================= */
.cs-storefront .cs-brand-hero {
    display: flex; align-items: center; gap: 32px; margin: 18px 0 30px; padding: 28px 32px; border-radius: var(--radius-lg, 28px);
    background: radial-gradient(70% 120% at 100% 0%, #fffaf2, transparent 60%), linear-gradient(135deg, #fffdf9, #f8efe3); box-shadow: var(--shadow-xs);
}
.cs-storefront .cs-brand-hero-logo { flex: 0 0 260px; height: 150px; display: grid; place-items: center; padding: 20px 26px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-xs); }
.cs-storefront .cs-brand-hero-logo img { max-width: 100%; max-height: 104px; width: auto; height: auto; object-fit: contain; }
.cs-storefront .cs-brand-hero-text h1 { margin: 8px 0 8px; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3vw, 40px); color: var(--ink); }
.cs-storefront .cs-brand-hero-text p { margin: 0 0 12px; max-width: 620px; color: var(--ink-2); font-size: 15.5px; }
.cs-storefront .cs-brand-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 14px; color: var(--muted); }
.cs-storefront .cs-brand-hero-meta a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; text-decoration-color: #d9c3aa; text-underline-offset: 4px; }
.cs-storefront .product-partner-text strong a { color: inherit; text-decoration: underline; text-decoration-color: #d9c3aa; text-underline-offset: 3px; }
@media (max-width: 767px) {
    .cs-storefront .cs-brand-hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px; }
    .cs-storefront .cs-brand-hero-logo { flex: none; width: 100%; height: 120px; }
}

/* ================= product page: a clean info panel — no board pattern, no knight behind the text ================= */
.cs-storefront .product-overview .product-detail-panel { background: var(--surface) !important; box-shadow: var(--shadow-xs); }
.cs-storefront .product-overview .product-detail-panel::before,
.cs-storefront .product-overview .product-detail-panel::after { content: none; }
.cs-storefront .product-overview .product-detail-panel.is-premium { box-shadow: inset 0 3px 0 -1px var(--gold-2), var(--shadow-xs); }

/* ================= top bar: one flat colour — the logo plate copper-brown, muted, no gradient ================= */
.cs-storefront .top-header.top-header-dark {
    background: #7a3714;
    border-bottom: 0; box-shadow: none;
}

/* ================= top bar: language and account menus open on click only (not hover / focus) ================= */
.cs-storefront .top-header .lang-switch > .onhover-show-div,
.cs-storefront .top-header .mobile-account > .onhover-show-div { opacity: 0 !important; visibility: hidden !important; transform: translateY(8px) !important; pointer-events: none; }
.cs-storefront .top-header .lang-switch.is-open > .onhover-show-div,
.cs-storefront .top-header .mobile-account.is-open > .onhover-show-div { opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto; }
.cs-storefront .top-header .lang-switch, .cs-storefront .top-header .mobile-account { cursor: pointer; }
.cs-storefront .top-header .lang-switch:focus-within:not(.is-open) .fa-angle-down { transform: none; }
.cs-storefront .top-header .is-open .fa-angle-down { transform: rotate(180deg); }
.cs-storefront .top-header .lang-switch:not(.is-open):not(:hover),
.cs-storefront .top-header .mobile-account:not(.is-open):not(:hover) { background: transparent; }
.cs-storefront .top-header .lang-switch.is-open, .cs-storefront .top-header .mobile-account.is-open { background: #ffffff1a; }

/* ================= product page: tall (portrait) photos stay inside the gallery box ================= */
@media (min-width: 992px) {
    .cs-storefront .product-overview .gallery-open { position: relative; overflow: hidden; }
    .cs-storefront .product-overview .gallery-open > .product-gallery-img {
        position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none; object-fit: contain;
    }
}

/* ================= finder: readable — plain card (no chequer behind the text), clearer chips and text ================= */
.cs-storefront .cs-finder-wrap {
    background: #fffdf9 !important;
    box-shadow: inset 0 0 0 1px #e2cfb5, 0 18px 40px -28px #5c402866 !important;
}
.cs-storefront .cs-finder-wrap::before { display: none !important; }
.cs-storefront .cs-finder-intro { padding-right: 24px; border-right: 1px solid #ecdcc8; align-self: stretch; }
.cs-storefront .cs-finder-intro h2 { color: #2a1f18; }
.cs-storefront .cs-finder-intro p { color: #4a3c32; }
.cs-storefront .cs-finder-q legend { color: #2a1f18; font-size: 15.5px; }
.cs-storefront .cs-finder-q legend span { background: #8a3909; color: #fff; }
.cs-storefront .cs-finder-chip > span { background: #f6eee3 !important; color: #2f241c !important; box-shadow: inset 0 0 0 1px #d9c2a3 !important; }
.cs-storefront .cs-finder-chip:hover > span { background: #f1e3d0 !important; box-shadow: inset 0 0 0 1px #b98f5f !important; }
.cs-storefront .cs-finder-chip > span i { color: #8a3909; }
.cs-storefront .cs-finder-chip input:checked + span { background: #8a3909 !important; color: #fff !important; box-shadow: none !important; }
.cs-storefront .cs-finder-chip input:checked + span i { color: #fff; }
.cs-storefront .cs-finder-progress li span { color: #4a3c32; }
.cs-storefront .cs-finder-wrap .cs-finder-placeholder { background: #faf5ee !important; border-color: #dcc7aa !important; }
.cs-storefront .cs-finder-placeholder p { color: #4a3c32; }
@media (max-width: 991px) { .cs-storefront .cs-finder-intro { padding-right: 0; border-right: 0; } }

/* ================= finder: its own full-width band (copper from the logo) so the section change is clear ================= */
.cs-storefront .cs-finder {
    position: relative; margin: 24px 0 0 !important; padding: 56px 0 !important;
    background: #8f4f2c;
    box-shadow: 0 0 0 100vmax #8f4f2c; clip-path: inset(0 -100vmax);
}
.cs-storefront .cs-finder-wrap { box-shadow: 0 24px 50px -30px #2a120580 !important; }
@media (max-width: 575px) { .cs-storefront .cs-finder { padding: 32px 0 !important; } }

/* finder band: quiet details — soft light, very faint grain, gold hairlines with a small ornament (no chequer) */
.cs-storefront .cs-finder::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: 0; pointer-events: none;
    background:
        linear-gradient(90deg, transparent 4%, #e2c79b8c 30%, #e2c79b8c 70%, transparent 96%) center 18px / 100% 1px no-repeat,
        linear-gradient(90deg, transparent 4%, #e2c79b8c 30%, #e2c79b8c 70%, transparent 96%) center calc(100% - 18px) / 100% 1px no-repeat,
        radial-gradient(38% 70% at 12% 0%, #ffffff1c, transparent 70%),
        radial-gradient(42% 80% at 92% 100%, #e2b07a29, transparent 70%),
        radial-gradient(30% 60% at 70% 10%, #00000012, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0015 0.09' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.86  0 0 0 0 0.7  0 0 0 0.22 -0.09'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") center 0 / 2800px 300px repeat-y;
}
.cs-storefront .cs-finder::after {
    content: "◆"; position: absolute; z-index: 0; pointer-events: none;
    left: 50%; top: 18px; transform: translate(-50%, -50%);
    padding: 0; font-size: 9px; line-height: 1; color: #e2c79b; text-shadow: -10px 0 0 #8f4f2c, 10px 0 0 #8f4f2c;
}
.cs-storefront .cs-finder > .cs-finder-wrap { position: relative; z-index: 1; }
.cs-storefront .cs-finder-wrap { box-shadow: 0 0 0 1px #ffffff26, 0 24px 50px -30px #2a120580 !important; }

/* ================= catalog button: knight and border in the top bar colour ================= */
.cs-storefront .cs-catalog > summary, .cs-storefront .cs-catalog > summary:hover, .cs-storefront .cs-catalog[open] > summary { border-color: #7a3714; }
.cs-storefront .cs-catalog-icon, .cs-storefront .cs-catalog[open] .cs-catalog-icon { color: #7a3714; }
/* hover / open: a touch lighter, not darker; text keeps its colour */
.cs-storefront .cs-catalog > summary:hover { background: #f9f0dc; color: #6b4e14; }
.cs-storefront .cs-catalog[open] > summary { background: #f9f0dc; color: #6b4e14; }

/* ================= chess motion ================= */
/* add to cart: the flying knight */
.cs-fly-knight {
    position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%);
    font-family: var(--piece-font, serif); font-size: 30px; line-height: 1; color: #7a3714;
    text-shadow: 0 0 0 #fff, 0 2px 6px #fff, 0 6px 14px #5c402866;
}
/* section titles: a piece steps one square on the little board */
.cs-storefront .cs-move-title { position: relative; }
.cs-storefront .cs-move-piece {
    position: absolute; left: 11px; top: calc(50% - 5px); z-index: 1; pointer-events: none;
    font-family: var(--piece-font, serif); font-size: 17px; line-height: 1; color: #2a1f18;
    text-shadow: 0 0 2px #fff, 0 0 4px #fff;
    transform: translate(-50%, -10%); opacity: 0;
}
.cs-storefront .cs-move-title.is-moved .cs-move-piece { animation: cs-piece-step .9s cubic-bezier(.3,.7,.3,1) .15s both; }
@keyframes cs-piece-step {
    0% { transform: translate(-50%, 25%); opacity: 0; }
    35% { transform: translate(-50%, 25%); opacity: 1; }
    70% { transform: translate(-50%, -75%); }
    100% { transform: translate(-50%, -60%); opacity: 1; }
}
/* collections: the knight's tour over the faded board */
.cs-storefront #collections > .cs-tour {
    position: absolute; top: 0; bottom: 0; right: 0; width: 50%; z-index: 0; pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.cs-storefront .cs-tour i {
    position: absolute; width: 46px; height: 46px; background: #fffaf2; border-radius: 2px;
    animation: cs-tour-glow 3.2s ease-out both;
}
@keyframes cs-tour-glow { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }
.cs-storefront .cs-tour-knight {
    position: absolute; left: 0; top: 0; width: 46px; height: 46px; display: grid; place-items: center; z-index: 1;
    font-family: var(--piece-font, serif); font-size: 30px; line-height: 1; color: #a0603a59;
    transition: transform .55s cubic-bezier(.45,.05,.35,1);
}
@media (prefers-reduced-motion: reduce) {
    .cs-storefront .cs-move-title .cs-move-piece{ animation: none !important; transition: none !important; opacity: 1; }
    .cs-storefront .cs-move-title .cs-move-piece { transform: translate(-50%, -60%); }
}
/* finder: the knight above the steps, and the queen's promotion */
.cs-storefront .cs-finder-progress { position: relative; margin-top: 34px; }
.cs-storefront .cs-finder-progress .cs-finder-knight {
    position: absolute; left: 0; bottom: 100%; margin-bottom: 2px; pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
}
.cs-storefront .cs-finder-progress .cs-finder-knight span {
    width: auto; height: auto; background: none !important; box-shadow: none !important;
    font-family: var(--piece-font, serif); font-size: 24px; line-height: 1; color: #7a3714 !important;
}
.cs-storefront .cs-finder-progress .cs-finder-knight.is-waiting { opacity: .45; }
.cs-storefront .cs-finder-progress .cs-finder-knight.is-waiting span { animation: cs-knight-wait 2.4s ease-in-out infinite; display: inline-block; }
@keyframes cs-knight-wait { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.cs-storefront .cs-finder.has-result .cs-finder-queen span { animation: cs-promote .9s cubic-bezier(.3,.7,.3,1) .45s both; }
@keyframes cs-promote {
    0% { transform: scale(1) rotateY(0); color: #d8c4ae; text-shadow: none; }
    50% { transform: scale(1.5) rotateY(180deg); }
    100% { transform: scale(1.2) rotateY(360deg); color: #b8862f; text-shadow: 0 0 10px #e2c79b, 0 0 2px #fff; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-storefront .cs-finder-progress .cs-finder-knight.is-waiting span, .cs-storefront .cs-finder.has-result .cs-finder-queen span { animation: none !important; }
}
/* header cart: on hover / focus the button turns copper — the total and its divider go light with it */
.cs-storefront .mobile-cart > a:hover .cart-total, .cs-storefront .mobile-cart > a:focus-visible .cart-total,
.cs-storefront .mobile-cart:hover .cart-total { color: #fff; border-left-color: #ffffff66; }

/* ================= home bundles band: no empty half when there are only one or two bundles ================= */
.cs-storefront .bxc-save { background: #f6e8da; color: #8a3909; }                 /* the saving pill in copper, not green */
@media (min-width: 992px) {
    .cs-storefront .bx-band-cards:has(> .bxc:nth-child(2):last-child) { grid-auto-columns: calc((100% - 18px) / 2); }
    /* one bundle: a wide card — photos on the left, details on the right */
    .cs-storefront .bx-band-cards:has(> .bxc:only-child) { grid-auto-columns: 100%; overflow: visible; }
    .cs-storefront .bx-band-cards > .bxc:only-child { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
    .cs-storefront .bx-band-cards > .bxc:only-child .bxc-visual { margin: 12px; aspect-ratio: 16 / 10; }
    .cs-storefront .bx-band-cards > .bxc:only-child .bxc-body { justify-content: center; padding: 28px 36px 28px 20px; gap: 10px; }
    .cs-storefront .bx-band-cards > .bxc:only-child h3 { font-family: var(--display); font-size: 28px; font-weight: 600; }
    .cs-storefront .bx-band-cards > .bxc:only-child .bxc-members { display: flex; gap: 8px; }
    .cs-storefront .bx-band-cards > .bxc:only-child .bxc-price { margin-top: 6px; }
    .cs-storefront .bx-band-cards > .bxc:only-child .bxc-price strong { font-size: 28px; }
    .cs-storefront .bx-band-cards > .bxc:only-child .bxc-save { align-self: flex-start; }
    .cs-storefront .bx-band-cards > .bxc:only-child .bxc-cta { align-self: flex-start; min-width: 220px; min-height: 48px; background: var(--accent); color: #fff !important; }
    .cs-storefront .bx-band-cards > .bxc:only-child .bxc-cta:hover { background: var(--accent-dark); }
}
/* a two-piece bundle: a small "+" where the two photos meet */
.cs-storefront .bxc-visual:has(.bxc-collage > span:nth-child(2):last-child) { position: relative; }
.cs-storefront .bxc-visual:has(.bxc-collage > span:nth-child(2):last-child)::after {
    content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
    background: #fffdf9; color: #7a3714; font-size: 22px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 4px #efe4d6, 0 6px 14px -6px #5c402866;
}

/* ================= top bar menus: compact rows, icons clearly visible ================= */
.cs-storefront .top-header .header-dropdown .account-menu, .cs-storefront .top-header .header-dropdown .mobile-account .account-menu { min-width: 200px; padding: 6px !important; }
.cs-storefront .top-header .lang-menu { min-width: 180px; padding: 6px !important; }
.cs-storefront .top-header .account-menu a, .cs-storefront .top-header .account-menu-logout,
.cs-storefront .top-header .lang-menu a { min-height: 38px !important; padding: 7px 12px !important; font-size: 14px; }
.cs-storefront .top-header .onhover-show-div.account-menu a i, .cs-storefront .top-header .onhover-show-div .account-menu-logout i,
.cs-storefront .top-header > .container .onhover-show-div i { color: #8a5a2e !important; }
.cs-storefront .top-header > .container .onhover-show-div a:hover i { color: #7a3714 !important; }
.cs-storefront .top-header .lang-switch:focus:not(:focus-visible), .cs-storefront .top-header .mobile-account:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
.cs-storefront .top-header .account-menu li, .cs-storefront .top-header .lang-menu li { padding: 0 !important; margin: 0 !important; line-height: 1.3; }
.cs-storefront .top-header .account-menu a, .cs-storefront .top-header .account-menu-logout,
.cs-storefront .top-header .lang-menu a { min-height: 34px !important; padding: 6px 10px !important; line-height: 1.3 !important; }
.cs-storefront .top-header .header-dropdown .account-menu, .cs-storefront .top-header .header-dropdown .mobile-account .account-menu { min-width: 170px !important; width: max-content; }

/* ================= bundle cards: clear edges, tidy photo tiles ================= */
.cs-storefront .bxc { border: 1px solid #e3d2bc !important; box-shadow: 0 1px 2px #5c40280f, 0 14px 30px -22px #5c402873 !important; }
.cs-storefront .bxc:hover { border-color: #cfb391 !important; box-shadow: 0 2px 4px #5c402814, 0 22px 40px -24px #5c402880 !important; }
.cs-storefront .bxc-visual { border: 1px solid #ecdfcf; }
.cs-storefront .bxc-collage { gap: 1px; background: #ecdfcf; grid-auto-rows: minmax(0, 1fr); }
.cs-storefront .bxc-collage > span { background: #fff; border-radius: 0; }
.cs-storefront .bxc-collage img { object-fit: contain; padding: 10px; }
/* three pieces: the first photo takes the whole left side, the other two stack on the right */
.cs-storefront .bxc-collage:has(> span:nth-child(3):last-child) > span:first-child { grid-row: span 2; }

/* ================= bundle page: the saving as a bright, inviting copper-and-gold coupon ================= */
.cs-storefront .bx-ticket-save {
    overflow: hidden; min-width: 170px;
    background: radial-gradient(120% 90% at 0% 0%, #c0662a 0%, transparent 60%), linear-gradient(140deg, #a24d16 0%, #8a3909 55%, #6e2c06 100%) !important;
    box-shadow: inset 0 1px 0 #ffffff33;
}
.cs-storefront .bx-ticket-save::after {          /* a slow shine passing over the coupon */
    content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, #ffffff40, transparent); transform: skewX(-18deg);
    animation: cs-coupon-shine 4.5s ease-in-out 1s infinite;
}
@keyframes cs-coupon-shine { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.cs-storefront .bx-ticket-save span { color: #f6dfa6 !important; letter-spacing: .14em; font-weight: 700; }
.cs-storefront .bx-ticket-save strong { color: #fff !important; font-size: clamp(30px, 3vw, 36px) !important; text-shadow: 0 2px 10px #00000033; }
.cs-storefront .bx-ticket-save em {
    margin-top: 4px; padding: 3px 12px; border-radius: 999px; font-style: normal; font-weight: 800;
    background: linear-gradient(135deg, #f6dfa6, #e2b766) !important; color: #5a2a06 !important; box-shadow: 0 4px 10px -4px #00000059;
}
.cs-storefront .bx-ticket-old del { color: #9a5a33; text-decoration-color: #c0662a; text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { .cs-storefront .bx-ticket-save::after { animation: none; display: none; } }
/* the "−18%" ribbon on the photos: the same copper as the coupon */
.cs-storefront .bundle-page .bx-stage-ribbon::before { background: linear-gradient(115deg, #b0581c 0%, #8a3909 60%, #7a3207 100%) !important; }
.cs-storefront .bundle-page .bx-stage-ribbon::after { background: #4f1f03 !important; }

/* ================= logo: the knight turns once in 3D every few seconds (and on hover) ================= */
.cs-storefront .cs-logo { position: relative; display: inline-block; line-height: 0; perspective: 420px; }
.cs-storefront .cs-logo-knight {
    position: absolute; top: 0; bottom: 0; left: 34.583%; width: 27.78%;
    transform-style: preserve-3d; transform-origin: 50% 60%;
    /* moves only on hover (no automatic turn) */
}
.cs-storefront .brand-logo .cs-logo-knight img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; }
/* a real figure: the face in front, its mirror image on the back, and thin slices in between for the body */
.cs-storefront .brand-logo .cs-logo-knight .cs-logo-face { transform: translateZ(4.5px); backface-visibility: hidden; }
.cs-storefront .brand-logo .cs-logo-knight .cs-logo-back { transform: rotateY(180deg) translateZ(4.5px); }
.cs-storefront .brand-logo .cs-logo-knight .cs-logo-depth { transform: translateZ(calc(var(--d) * 1.3px)); filter: brightness(.8) contrast(.9); }
.cs-storefront .cs-logo:hover .cs-logo-knight { animation: cs-knight-turn-now 1.4s cubic-bezier(.45,.05,.3,1); }
/* the knight rises, turns its head to one side and the other in 3D (never edge-on, so it keeps its volume) and lands */
@keyframes cs-knight-turn {
    0%, 76%, 100% { transform: translateY(0) rotateY(0) rotateZ(0); filter: drop-shadow(0 0 0 #0000); }
    80% { transform: translateY(-9%) rotateY(-38deg) rotateZ(-3deg); filter: drop-shadow(0 8px 6px #00000047); }
    88% { transform: translateY(-9%) rotateY(38deg) rotateZ(3deg); filter: drop-shadow(0 8px 6px #00000047); }
    94% { transform: translateY(-3%) rotateY(-8deg); filter: drop-shadow(0 3px 3px #00000030); }
    97% { transform: translateY(0) rotateY(0); }
}
@keyframes cs-knight-turn-now {
    0%, 100% { transform: translateY(0) rotateY(0) rotateZ(0); }
    25% { transform: translateY(-9%) rotateY(-38deg) rotateZ(-3deg); }
    65% { transform: translateY(-9%) rotateY(38deg) rotateZ(3deg); }
    85% { transform: translateY(-3%) rotateY(-8deg); }
}
@media (prefers-reduced-motion: reduce) { .cs-storefront .cs-logo-knight, .cs-storefront .cs-logo:hover .cs-logo-knight { animation: none; } }

/* ================= white page background (user: only the body behind sections — header untouched) ================= */
body.cs-storefront, html:has(.cs-storefront) { background: #ffffff; }
.cs-storefront .cs-hero, .cs-storefront .cs-hero-frame { background: #ffffff; }   /* slider */
.cs-storefront .bx-band { background: #ffffff !important; }                       /* Məhsul dəstləri */
.cs-storefront .cs-band-ivory { --band: #ffffff; }                                  /* Yeni məhsullar */
.cs-storefront section.trend { --trend-bg: #ffffff; }
/* on white the ivory cards/panels melt into the page: a soft warm hairline gives them an edge */
.cs-storefront .product-card,
.cs-storefront .filter-panel-content, .cs-storefront .responsive-filter,
.cs-storefront .surface, .cs-storefront .order-summary, .cs-storefront .cart-item, .cs-storefront .co-summary-card,
.cs-storefront .account-aside, .cs-storefront .account-profile-card, .cs-storefront .product-information {
    border: 1px solid #ebe1d4 !important;
    box-shadow: 0 1px 2px #5c40280a, 0 10px 24px -18px #5c402833;
}
.cs-storefront .product-card:hover { border-color: #dfcfbb !important; }
/* brands block: less empty space above it (the reviews band already ends with its own padding) */
.cs-storefront .cs-partners { margin-top: 28px; }
/* cards & filter panel: white like the page; the filter's inner content is flat (no box-in-a-box radius) */
.cs-storefront .product-card, .cs-storefront .responsive-filter, .cs-storefront .filter-panel-content { background: #ffffff; }
.cs-storefront .responsive-filter .filter-panel-content { border: 0 !important; border-radius: 0 !important; box-shadow: none; }
/* "Kataloq" button: solid walnut with white text (stands out on the white header) */
.cs-storefront .cs-catalog > summary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 22px -12px #774d3099; }
.cs-storefront .cs-catalog > summary:hover, .cs-storefront .cs-catalog[open] > summary { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.cs-storefront .cs-catalog-icon, .cs-storefront .cs-catalog[open] .cs-catalog-icon { color: #fff; }
/* collections: white band; the board on the right in soft grey & white (not black) */
.cs-storefront #collections { --band: #ffffff; }
.cs-storefront #collections::before { background: repeating-conic-gradient(#d6d6d6 0 25%, #ffffff 0 50%) 0 0 / 46px 46px; }
.cs-storefront .cs-tour i { background: #f2f2f2; }
.cs-storefront .cs-tour-knight { color: #3d3d3dd9; }
/* collection cards: white with a clear warm edge so they read over the grey board */
.cs-storefront .cs-collection { background: #ffffff; border: 1px solid #e3d6c5 !important; box-shadow: 0 1px 2px #5c40280f, 0 12px 26px -18px #5c402840; }
.cs-storefront .cs-collection:hover { border-color: #d2bfa6 !important; }
/* bundles band: on the white page it vanished — a soft sand panel with an edge; the bundle cards stay white on it */
.cs-storefront .bx-band { background: linear-gradient(135deg, #f5ece0 0%, #f9f3ea 100%) !important; border: 1px solid #e6d8c6 !important; box-shadow: 0 2px 6px #5c40280d, 0 22px 40px -30px #5c402866; }
.cs-storefront .bx-band .bxc { background: #ffffff; }
.cs-storefront .bx-band .bx-badge, .cs-storefront .bx-band .bx-band-all { background: #ffffff; }
/* bundles band: the sand background runs across the whole page width (content stays in the container) */
.cs-storefront .bx-band {
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding: 48px calc(50vw - 50%) !important;
    border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none;
}
@media (max-width: 575px) { .cs-storefront .bx-band { padding-top: 28px !important; padding-bottom: 28px !important; } }
/* footer: the same knight tour over the board on the right (layer matches the ::before board: right 46%, 48px squares) */
.cs-storefront footer.dark-footer > .cs-tour {
    position: absolute; top: 0; bottom: 0; right: 0; width: 46%; z-index: 0; pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 90%); mask-image: linear-gradient(270deg, #000 0%, transparent 90%);
}
.cs-storefront footer.dark-footer .cs-tour i { width: 48px; height: 48px; background: #fffaf2; }
.cs-storefront footer.dark-footer .cs-tour-knight { width: 48px; height: 48px; font-size: 32px; color: #7c553ab3; }
/* collections: "Bütün məhsullar" as a solid walnut button so it reads over the grey board */
.cs-storefront #collections .section-heading > a { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; box-shadow: 0 10px 22px -12px #774d3099; }
.cs-storefront #collections .section-heading > a:hover { background: var(--accent-dark) !important; color: #fff !important; }
.cs-storefront #collections .section-heading > a i { color: #fff !important; }
/* >>> TRIAL: dark top bar in the colour of a dark wooden chess piece, white text & icons (remove this whole block to go back) */
.cs-storefront .top-header.top-header-dark { background: linear-gradient(180deg, #45291b 0%, #3a2216 100%); border-bottom-color: #2e1a10; }
.cs-storefront .top-header .header-contact li,
.cs-storefront .top-header .header-dropdown > li,
.cs-storefront .top-header .header-dropdown > li > a,
.cs-storefront .top-header .contact-switch-current,
.cs-storefront .top-header .lang-switch-current,
.cs-storefront .top-header .account-switch-current,
.cs-storefront .top-header .top-whatsapp { color: #ffffff !important; }
.cs-storefront .top-header i, .cs-storefront .top-header .account-icon, .cs-storefront .top-header .top-admin,
.cs-storefront .top-header .top-whatsapp i, .cs-storefront .top-header .top-social i { color: #ffffff !important; }
.cs-storefront .top-header .top-whatsapp i, .cs-storefront .top-header .top-social { background: #ffffff1f; box-shadow: none; }
.cs-storefront .top-header .top-whatsapp:hover, .cs-storefront .top-header .top-admin:hover, .cs-storefront .top-header .top-social:hover { background: #ffffff26; color: #fff !important; }
/* dropdowns that open from the bar stay light with dark text */
.cs-storefront .top-header .onhover-show-div, .cs-storefront .top-header .onhover-show-div *,
.cs-storefront .top-header .contact-menu, .cs-storefront .top-header .contact-menu * { color: var(--ink-2) !important; }
.cs-storefront .top-header .onhover-show-div i, .cs-storefront .top-header .contact-menu i { color: var(--accent) !important; }
/* <<< TRIAL: dark top bar */
/* "Şahmatını tap" band: the dark chess-piece wood of the top bar; the grain, light and gold hairlines (::before) stay */
.cs-storefront .cs-finder { background: #3e2518; box-shadow: 0 0 0 100vmax #3e2518; }
.cs-storefront .cs-finder::after { text-shadow: -10px 0 0 #3e2518, 10px 0 0 #3e2518; }
/* "Şahmatını tap" hero box: the same dark chess-piece wood (light from the top-left), chequer kept */
.cs-storefront .cs-spot-finder { background: linear-gradient(140deg, #5a3624 0%, #3e2518 55%, #2e1a10 100%) !important; }
.cs-storefront .cs-spot-finder .cs-spot-meta { color: #ecdccb; }
.cs-storefront .cs-spot-finder:hover .cs-spot-link { background: #d9b48f; color: #2e1a10; }
/* collections board: dark-wood squares (soft, see-through) instead of grey; the touring knight in the same wood */
.cs-storefront #collections::before { background: repeating-conic-gradient(#ecdfcd 0 25%, #ffffff 0 50%) 0 0 / 46px 46px; }
.cs-storefront #collections .cs-tour i { background: #f7ede1; }
.cs-storefront #collections .cs-tour-knight { color: #5a3624; text-shadow: 0 1px 3px #ffffff80; }
/* inputs: white fields (search bar, forms, filters, selects) */
.cs-storefront .form_search, .cs-storefront .form_search input,
.cs-storefront input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
.cs-storefront select, .cs-storefront textarea, .cs-storefront .form-control, .cs-storefront .form-select { background-color: #ffffff !important; }
/* search dropdowns (quick searches + live suggestions): white inside, soft edge */
.cs-storefront .search-quick, .cs-storefront .search-suggestions { background: #ffffff !important; border: 1px solid #ebe1d4 !important; }
.cs-storefront .search-quick a { background: #f7f1e9; }
.cs-storefront .search-suggestions-all { background: #ffffff; }
.cs-storefront .search-suggestion-thumbnail { background: #faf6f0; }
/* ================= footer polish: text that reads clearly on the sand ================= */
.cs-storefront .dark-footer h4 {
    position: relative; padding-bottom: 12px; margin-bottom: 18px;
    color: #8a4a24 !important; font-weight: 700; font-size: 12.5px; letter-spacing: .16em;
}
.cs-storefront .dark-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: #c9a04e; }
.cs-storefront .dark-footer .footer-brand p, .cs-storefront .dark-footer .footer-brand > span { color: #3f342d !important; font-size: 15px; }
.cs-storefront .dark-footer .footer-col a, .cs-storefront .dark-footer .footer-contact-links span {
    color: #2a201b !important; font-weight: 500; font-size: 15.5px;
    transition: color .2s var(--ease), transform .2s var(--ease);
}
.cs-storefront .dark-footer nav.footer-col a:hover { color: #8a4a24 !important; transform: translateX(3px); }
.cs-storefront .dark-footer .footer-contact-links a:hover { color: #8a4a24 !important; }
.cs-storefront .dark-footer .footer-contact-links i {
    display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border-radius: 50%;
    background: #fffaf2; color: #8a4a24 !important; font-size: 14px; box-shadow: 0 1px 2px #5c40281a;
}
/* the board and the touring knight stay at the far right, away from the link column */
.cs-storefront .dark-footer::before, .cs-storefront footer.dark-footer > .cs-tour { width: 26%; }
.cs-storefront .dark-footer::before { background: repeating-conic-gradient(#ffffff73 0 25%, transparent 0 50%) 0 0 / 48px 48px; }
.cs-storefront footer.dark-footer .cs-tour-knight { color: #5a3624cc; }
.cs-storefront .dark-footer::after { color: #a05a300f; }
/* wishlist & compare: the selected state is a solid walnut disc with a white icon (heart turns filled) — cards and product page */
.cs-storefront .product-list-actions button[aria-pressed="true"] {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
    box-shadow: 0 6px 14px -6px #774d30b3;
}
.cs-storefront .product-list-actions button[aria-pressed="true"] i { color: #fff !important; }
.cs-storefront .product-list-actions button[aria-pressed="true"] .fa-heart-o::before { content: "\f004"; }
.cs-storefront .product-list-actions button[aria-pressed="true"]:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; }
.cs-storefront .product-list-actions button[aria-pressed="true"] i { animation: cs-list-pop .35s var(--ease); }
@keyframes cs-list-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cs-storefront .product-list-actions button[aria-pressed="true"] i { animation: none; } }

/* ================= page loader v2: progress line on top + a knight touring a 3×3 board =================
   Fades in only if loading takes longer than .35s (no flash on fast pages); storefront.js finishes it on load
   and shows it again (same delay) when leaving for another shop page. Fails safe: hides itself after 8s. */
.cs-loader {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: none;
    background: radial-gradient(60% 60% at 50% 50%, #ffffffeb, #ffffffc7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    animation: cs-loader-in .35s ease .35s forwards, cs-loader-out .3s ease 8s forwards;
}
.cs-loader.is-leaving { animation: cs-loader-in .35s ease .25s forwards; }
.cs-loader.is-done { animation: none; opacity: 0; visibility: hidden; transition: opacity .3s ease .15s, visibility 0s linear .45s; }
@keyframes cs-loader-in { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }
@keyframes cs-loader-out { to { opacity: 0; visibility: hidden; } }

/* top progress line: creeps towards 85% while loading, runs to 100% when done */
.cs-loader-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #8a3909, #b56a3a 45%, #e2c79b); box-shadow: 0 0 10px #c9a04e99;
    animation: cs-loader-progress 6s cubic-bezier(.1,.7,.2,1) .35s forwards;
}
.cs-loader.is-leaving .cs-loader-bar { animation-delay: .25s; }
.cs-loader.is-done .cs-loader-bar { animation: none; width: 100%; transition: width .2s ease; }
@keyframes cs-loader-progress { from { width: 0; } to { width: 85%; } }

.cs-loader-card {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 30px 20px; border-radius: 24px;
    background: #ffffff; box-shadow: 0 0 0 1px #5c40280f, 0 2px 6px #5c40280d, 0 30px 60px -30px #5c402873;
    transform: translateY(6px) scale(.96); animation: cs-loader-card .45s cubic-bezier(.22,.61,.36,1) .35s forwards;
}
.cs-loader.is-leaving .cs-loader-card { animation-delay: .25s; }
@keyframes cs-loader-card { to { transform: none; } }

.cs-loader-board {
    position: relative; display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px);
    border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 3px #5a3624, 0 0 0 4px #c9a04e, 0 10px 20px -8px #2e1a1066;
}
.cs-loader-board i { position: relative; background: #f3e6d4; }
.cs-loader-board i:nth-child(even) { background: #c9a27c; }
/* the square the knight lands on lights up with a gold edge (8 outer squares, .5s apart) */
.cs-loader-board i::after {
    content: ""; position: absolute; inset: 0; opacity: 0;
    background: #fff3d633; box-shadow: inset 0 0 0 2px #c9a04e;
    animation: cs-loader-glow 4s ease-out infinite; animation-delay: inherit;
}
.cs-loader-board i { animation-delay: 99s; }
.cs-loader-board i:nth-child(7) { animation-delay: 0.0s; }
.cs-loader-board i:nth-child(2) { animation-delay: 0.5s; }
.cs-loader-board i:nth-child(9) { animation-delay: 1.0s; }
.cs-loader-board i:nth-child(4) { animation-delay: 1.5s; }
.cs-loader-board i:nth-child(3) { animation-delay: 2.0s; }
.cs-loader-board i:nth-child(8) { animation-delay: 2.5s; }
.cs-loader-board i:nth-child(1) { animation-delay: 3.0s; }
.cs-loader-board i:nth-child(6) { animation-delay: 3.5s; }
@keyframes cs-loader-glow { 0% { opacity: 0; } 4% { opacity: 1; } 10% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } }
/* the knight never reaches the centre: a small gold star sits there */
.cs-loader-board i:nth-child(5)::before {
    content: "\2726"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: #c9a04e;
}
.cs-loader-board i:nth-child(5)::after { display: none; }
.cs-loader-knight {
    position: absolute; left: 0; top: 0; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center;
    font-family: var(--piece-font, serif); font-size: 24px; line-height: 1; color: #2e1a10;
    text-shadow: 0 2px 4px #2e1a1040; animation: cs-loader-hop 4s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes cs-loader-hop {
    0.00%, 6.88% { transform: translate(0px, 60px) scale(1); }
    9.75% { transform: translate(15px, 20px) scale(1.25); }
    12.50%, 19.38% { transform: translate(30px, 0px) scale(1); }
    22.25% { transform: translate(45px, 20px) scale(1.25); }
    25.00%, 31.88% { transform: translate(60px, 60px) scale(1); }
    34.75% { transform: translate(30px, 35px) scale(1.25); }
    37.50%, 44.38% { transform: translate(0px, 30px) scale(1); }
    47.25% { transform: translate(30px, 5px) scale(1.25); }
    50.00%, 56.88% { transform: translate(60px, 0px) scale(1); }
    59.75% { transform: translate(45px, 20px) scale(1.25); }
    62.50%, 69.38% { transform: translate(30px, 60px) scale(1); }
    72.25% { transform: translate(15px, 20px) scale(1.25); }
    75.00%, 81.88% { transform: translate(0px, 0px) scale(1); }
    84.75% { transform: translate(30px, 5px) scale(1.25); }
    87.50%, 94.38% { transform: translate(60px, 30px) scale(1); }
    97.25% { transform: translate(30px, 35px) scale(1.25); }
    100% { transform: translate(0px, 60px) scale(1); }
}
.cs-loader-text { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cs-loader-brand { font-family: var(--display, Georgia, serif); font-size: 17px; font-weight: 600; letter-spacing: .02em; color: #2e1a10; }
.cs-loader-dots { display: flex; gap: 5px; }
.cs-loader-dots b { width: 5px; height: 5px; border-radius: 50%; background: #b56a3a; opacity: .25; animation: cs-loader-dot 1.2s ease-in-out infinite; }
.cs-loader-dots b:nth-child(2) { animation-delay: .2s; }
.cs-loader-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes cs-loader-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
    .cs-loader-knight, .cs-loader-board i::after, .cs-loader-dots b, .cs-loader-card { animation: none; }
    .cs-loader-knight { transform: translate(30px, 0); }
    .cs-loader-card { transform: none; }
}
/* brands: "N məhsul" button — white text on hover (a class-less link rule was winning and kept the text walnut) */
.cs-storefront .cs-partner-body a:not(.cs-partner-site):hover,
.cs-storefront .cs-partner-body a:not(.cs-partner-site):hover i { background: var(--accent); color: #fff !important; }
.cs-storefront .cs-partner-body a:not(.cs-partner-site):hover i { background: none; }
/* top bar: the globe / account / arrow icons white too (an older ".top-header > .container i" gold rule was winning) */
.cs-storefront .top-header > .container .lang-switch-current i,
.cs-storefront .top-header > .container .account-switch-current i,
.cs-storefront .top-header > .container .account-icon,
.cs-storefront .top-header > .container .header-dropdown > li > a i { color: #ffffff !important; }
/* loader intro (first page of a visit): visible at once, no delay */
.cs-loader.is-intro { animation: cs-loader-in .2s ease 0s forwards, cs-loader-out .3s ease 8s forwards; }
.cs-loader.is-intro .cs-loader-bar { animation-delay: 0s; }
.cs-loader.is-intro .cs-loader-card { animation-delay: 0s; }

/* ---------- blog cards (one style: home, blog list, related) + home journal band ---------- */
.cs-storefront .cs-journal {
    position: relative; overflow: hidden;
    margin: 56px calc(50% - 50vw) 0 !important;
    padding: 52px calc(50vw - 50%) 56px !important;
    background: #f6efe5;
    border-top: 1px solid #ecdfcd; border-bottom: 1px solid #ecdfcd;
}
.cs-storefront .cs-journal + .cs-reviews { margin-top: 0 !important; border-top: 0; }
.cs-storefront .cs-journal > .section-heading { margin-top: 0; }
.cs-storefront .cs-journal-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cs-storefront .cs-post-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; margin-bottom: 40px; }

.cs-storefront .cs-post > a { display: flex; flex-direction: column; height: 100%; color: inherit; background: #ffffff; border: 1px solid #ebe1d4; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px #5c40280a, 0 10px 24px -18px #5c402833; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.cs-storefront .cs-post > a:hover { border-color: #dfcfbb; box-shadow: 0 2px 6px #5c40280f, 0 18px 34px -20px #5c402852; transform: translateY(-3px); }
.cs-storefront .cs-post-media { margin: 12px 12px 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--sand); }
.cs-storefront .cs-post-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.cs-storefront .cs-post > a:hover .cs-post-media img { transform: scale(1.04); }
.cs-storefront .cs-post-kicker { margin: 16px 20px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cs-storefront .cs-post-kicker span { font-family: var(--piece-font); font-size: 13px; letter-spacing: 0; }
.cs-storefront .cs-post-kicker i { font-style: normal; margin: 0 4px; opacity: .6; }
.cs-storefront .cs-post h3 { margin: 0 20px 12px; font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--ink); transition: color .25s var(--ease); }
.cs-storefront .cs-post > a:hover h3 { color: var(--accent-dark); }
.cs-storefront .cs-post time { margin: auto 20px 0; padding: 12px 0 18px; border-top: 1px dashed #ebe1d4; font-size: 13px; color: var(--muted); }

/* article page: the cover is a plain photo (no blurred side fills) */
.cs-storefront .article-cover { width: 100%; aspect-ratio: auto !important; height: clamp(220px, 34vw, 440px); max-height: none !important; background: var(--sand) !important; border-radius: 18px; }
.cs-storefront .article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1199px) { .cs-storefront .cs-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-storefront .cs-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .cs-storefront .cs-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
    .cs-storefront .cs-journal { padding-top: 34px !important; padding-bottom: 36px !important; }
    .cs-storefront .cs-journal-grid, .cs-storefront .cs-post-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* =====================================================================
 * mobile polish (≤767px / ≤575px): calm hero, tighter product grids,
 * compact blog list, article images that fit the screen
 * ===================================================================== */
@media (max-width: 767px) {
    /* hero: the banner on top, the text under it (no text laid over the photo) */
    .cs-storefront .cs-hero-slide { display: flex; flex-direction: column; aspect-ratio: auto; min-height: 0; height: auto !important; }
    .cs-storefront .cs-hero-slide img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; object-position: 92% center; transform: none !important; }
    .cs-storefront .cs-hero-slide::before, .cs-storefront .cs-hero-slide::after { display: none; }
    .cs-storefront .cs-hero-overlay { position: static; transform: none; width: auto !important; padding: 16px 18px 20px; gap: 10px; }
    .cs-storefront .cs-hero-overlay .cs-eyebrow { font-size: 11px; }
    .cs-storefront .cs-hero-title { font-size: 22px !important; line-height: 1.25; }
    .cs-storefront .cs-hero-actions { gap: 10px; }
    .cs-storefront .cs-hero-actions .cs-btn { padding: 10px 16px; font-size: 14px; }
    .cs-storefront .cs-hero-controls { top: 10px; right: 10px; bottom: auto; padding: 4px; gap: 4px; transform: scale(.88); transform-origin: top right; }
    .cs-storefront .cs-hero-progress { display: none; }
}

@media (max-width: 575px) {
    /* product grids (home, categories, search): 12px between cards instead of 30px */
    .cs-storefront .row:has(> [class*="col"] > .product-card) { margin-left: -6px; margin-right: -6px; }
    .cs-storefront .row > [class*="col"]:has(> .product-card) { padding-left: 6px; padding-right: 6px; margin-bottom: 12px !important; }
    .cs-storefront .product-card .product-image-link { margin: 6px 6px 0; border-radius: 12px; }
    .cs-storefront .product-card .card-body { padding: 10px 10px 10px; }
    .cs-storefront .product-card .card-title { font-size: 13.5px; margin-bottom: 3px; }
    .cs-storefront .product-card .product-options { font-size: 12px; margin-bottom: 6px; }
    .cs-storefront .product-card-price { margin-bottom: 8px; }
    .cs-storefront .product-card-price strong { font-size: 17px; }
    .cs-storefront .card-cart-form .product-card-action, .cs-storefront .card-cart-link, .cs-storefront .product-card-action { padding: 8px 6px !important; font-size: 12px !important; white-space: nowrap; justify-content: center; gap: 5px; }

    /* blog list / home blog / related: a compact row — small photo left, text right */
    .cs-storefront .cs-journal-grid, .cs-storefront .cs-post-grid { grid-template-columns: 1fr; gap: 12px; }
    .cs-storefront .cs-post > a { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; padding: 10px; }
    .cs-storefront .cs-post-media { grid-row: 1 / 4; margin: 0; aspect-ratio: 1 / 1; border-radius: 10px; }
    .cs-storefront .cs-post-kicker { margin: 2px 0 4px; font-size: 10px; letter-spacing: .08em; }
    .cs-storefront .cs-post h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .cs-storefront .cs-post time { margin: 0; padding: 0; border: 0; font-size: 12px; align-self: end; }

    /* article: cover and inline pictures fit the screen */
    .cs-storefront .article-cover { height: 210px; margin-bottom: 18px; border-radius: 14px; }
    .cs-storefront .article-content figure { margin: 18px 0; }
    .cs-storefront .article-content img { display: block; width: auto; max-width: 100%; max-height: 260px; margin: 0 auto; border-radius: 10px; object-fit: contain; }
    .cs-storefront .article-content figcaption { font-size: 12.5px; text-align: center; margin-top: 6px; }
    .cs-storefront .article-content table { display: block; overflow-x: auto; font-size: 13px; white-space: normal; }
    .cs-storefront .article-content th, .cs-storefront .article-content td { min-width: 110px; }
}