/*
 * Public storefront ("dokan") — Dazzle-style design system.
 * Plain CSS on purpose: the Tailwind bundle is prebuilt, so classes it never
 * saw would silently do nothing. Colours come from the shop theme through the
 * --shop-* custom properties the layout sets; --dz-* are derived from them.
 */
:root {
    --dz-brown: var(--shop-primary, #6d3f0e);
    --dz-gold: var(--shop-accent, #c99a4e);
    --dz-soft: var(--shop-soft, color-mix(in srgb, var(--dz-brown) 26%, #fff));
    --dz-cream: var(--shop-bg, #fffbf6);
    --dz-ink: var(--shop-ink, #222);
    --dz-muted: var(--shop-muted, #6b6b6b);
    --dz-line: #ececec;
    --dz-panel: #f5f5f7;
    --dz-dark: #1b1916;
    --dz-green: #16a34a;
    --dz-red: #dc2626;
    --dz-radius: 15.3px;
    --dz-shadow: 0 5.1px 18.7px -10px rgba(40, 24, 8, .22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.dz {
    margin: 0;
    font-family: 'Urbanist', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--dz-cream);
    color: var(--dz-ink);
    min-height: 100dvh;
    font-size: 12.8px;
    line-height: 1.45;
}
:where(.dz) a { color: inherit; text-decoration: none; }
:where(.dz) img { max-width: 100%; }
.dz button { font-family: inherit; cursor: pointer; }
.dz input, .dz select, .dz textarea { font-family: inherit; }
[x-cloak] { display: none !important; }

.dz-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .dz-wrap { padding: 0 20.4px; } }
.dz-hide-m { display: none !important; }
@media (min-width: 1024px) {
    .dz-hide-m { display: block !important; }
    .dz-mainbar.dz-hide-m, .dz-navrow.dz-hide-m { display: flex !important; }
    .dz-hide-d { display: none !important; }
}
.dz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dz-ico { width: 17px; height: 17px; flex-shrink: 0; }
.dz-ico-sm { width: 13.6px; height: 13.6px; flex-shrink: 0; }

/* ================= Header ================= */
.dz-header {
    position: relative;
    color: #fff;
    background:
        radial-gradient(80% 140% at 50% 130%, rgba(160, 104, 44, .55) 0%, rgba(160, 104, 44, 0) 60%),
        linear-gradient(180deg, #2c2824 0%, #141210 100%);
    border-radius: 0 0 22.1px 22.1px;
    padding-bottom: 11.9px;
}
.dz-util {
    background: #fff; color: var(--dz-ink);
    border-radius: 0 0 13.6px 13.6px;
    font-size: 10.6px; font-weight: 500;
}
.dz-util .dz-wrap { display: flex; align-items: center; gap: 18.7px; height: 28.9px; }
.dz-util a { display: inline-flex; align-items: center; gap: 5.1px; }
.dz-util b { color: var(--dz-gold); font-weight: 600; }
.dz-util .dz-util-r { margin-left: auto; display: flex; align-items: center; gap: 18.7px; }

.dz-mainbar { display: flex; align-items: center; gap: 11.9px; padding-top: 13.6px; }
.dz-logo { display: flex; align-items: center; gap: 8.5px; flex-shrink: 0; min-width: 0; }
.dz-logo img { height: 34px; width: auto; max-width: 136px; object-fit: contain; border-radius: 8.5px; }
.dz-logo-mark {
    height: 34px; width: 34px; border-radius: 10.2px; display: grid; place-items: center;
    background: var(--dz-soft); color: var(--dz-brown); font-weight: 800;
}
.dz-logo-name { font-weight: 800; font-size: 22.1px; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 187px; }
.dz-toplinks { display: flex; align-items: center; gap: 5.1px; margin-left: 17px; font-size: 11.9px; font-weight: 500; }
.dz-toplinks a { padding: 6px 10.2px; border-radius: 8.5px; color: rgba(255, 255, 255, .85); }
.dz-toplinks a:hover { color: #fff; }
.dz-toplinks a.is-pill { border: 1px solid var(--dz-gold); background: rgba(201, 154, 78, .35); color: #fff; }
.dz-search { flex: 1; display: flex; align-items: center; gap: 8.5px; background: #fff; border-radius: 11.9px; height: 42.5px; padding: 0 13.6px; color: var(--dz-muted); }
.dz-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 12.8px; color: var(--dz-ink); min-width: 0; height: 100%; }
.dz-search input::placeholder { color: #9a9a9a; }
.dz-hbtn {
    position: relative; height: 42.5px; width: 42.5px; border-radius: 11.9px; background: #fff; color: var(--dz-ink);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0;
}
.dz-hbtn.is-ghost { background: rgba(201, 154, 78, .35); border: 1px solid rgba(201, 154, 78, .6); color: #f3c969; }
.dz-badge.is-inline { position: static; border: 0; }
.dz-badge {
    position: absolute; top: -5px; right: -5px; min-width: 16.1px; height: 16.1px; padding: 0 4.2px;
    border-radius: 84.1px; background: var(--dz-brown); color: #fff; font-size: 9.3px; font-weight: 700;
    display: grid; place-items: center; border: 2px solid #fff;
}
.dz-actions { display: flex; align-items: center; gap: 8.5px; margin-left: 3.4px; }
.dz-actions .dz-lang { margin-left: 5.1px; }
.dz-lang summary { height: 42.5px !important; border-radius: 11.9px !important; background: rgba(201, 154, 78, .3) !important; border-color: rgba(201, 154, 78, .6) !important; color: #fff !important; padding: 0 11.9px !important; }
.dz-mhead .dz-lang summary { height: 37.4px !important; border-radius: 11px !important; }

.dz-navrow { display: flex; align-items: center; gap: 10.2px; margin-top: 11.9px; }
.dz-explore {
    display: inline-flex; align-items: center; gap: 8.5px; height: 39.1px; padding: 0 15.3px; border-radius: 10.2px; border: 0;
    background: var(--dz-soft); color: #3a2a18; font-size: 10.6px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; flex-shrink: 0;
}
.dz-navsep { width: 1px; height: 25.5px; background: rgba(255, 255, 255, .35); flex-shrink: 0; }
.dz-catbar {
    flex: 1; min-width: 0; height: 39.1px; background: #fff; border-radius: 10.2px; color: var(--dz-ink);
    display: flex; align-items: center; gap: 3.4px; padding: 0 8.5px; font-size: 11.9px; font-weight: 600;
}
.dz-catscroll > .dz-catitem { position: relative; height: 100%; display: flex; align-items: center; }
.dz-catscroll > .dz-catitem > a { display: inline-flex; align-items: center; gap: 3.4px; padding: 0 10.2px; height: 100%; white-space: nowrap; }
.dz-catscroll > .dz-catitem > a:hover { color: var(--dz-brown); }
.dz-catscroll { display: flex; align-items: center; height: 100%; overflow-x: auto; scrollbar-width: none; }
.dz-catscroll::-webkit-scrollbar { display: none; }
.dz-drop {
    position: fixed; z-index: 60; min-width: 187px; background: #fff; border-radius: 11.9px; box-shadow: 0 15.3px 34px -12px rgba(0, 0, 0, .3);
    padding: 6.8px;
}
.dz-drop a { display: block; padding: 6.8px 10.2px; border-radius: 7.6px; font-weight: 500; font-size: 11.9px; color: var(--dz-ink); }
.dz-drop a:hover { background: var(--dz-cream); color: var(--dz-brown); }
.dz-drop .dz-drop-all { color: var(--dz-brown); font-weight: 700; }

/* Mobile header */
.dz-mhead { display: flex; align-items: center; gap: 8.5px; padding-top: 11.9px; }
.dz-mhead .dz-logo-name { font-size: 20.4px; max-width: 144.5px; }
.dz-mhead .dz-hbtn { height: 37.4px; width: 37.4px; border-radius: 11px; }
.dz-msearch { display: flex; gap: 8.5px; margin-top: 10.2px; }
.dz-msearch .dz-search { height: 39.1px; border-radius: 11px; }
.dz-msearch .dz-hbtn { height: 39.1px; width: 39.1px; border-radius: 11px; }

/* Notice marquee */
.dz-notice { margin-top: 10.2px; }
.dz-notice-in { background: #f7f3ee; border-radius: 8.5px; overflow: hidden; white-space: nowrap; font-size: 11.9px; font-weight: 500; padding: 6.8px 0; }
@keyframes dz-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dz-marquee { display: inline-block; animation: dz-marquee 28s linear infinite; }
.dz-marquee span { padding: 0 40.8px; }

/* Drawer */
.dz-drawer { position: fixed; inset: 0; z-index: 70; }
.dz-drawer-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.dz-drawer-panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: 263.5px; max-width: 86%; background: #fff; display: flex; flex-direction: column;
    box-shadow: 0 0 34px rgba(0, 0, 0, .3);
}
.dz-drawer-panel.is-right { left: auto; right: 0; }
.dz-drawer-head { display: flex; align-items: center; gap: 8.5px; padding: 13.6px; color: #fff; background: linear-gradient(180deg, #2c2824, #141210); }
.dz-drawer-head .dz-x { margin-left: auto; height: 28.9px; width: 28.9px; border-radius: 8.5px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13.6px; }
.dz-drawer-body { flex: 1; overflow-y: auto; padding: 10.2px; }
.dz-dlabel { padding: 11.9px 8.5px 5.1px; font-size: 9.8px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--dz-muted); }
.dz-dlink { display: flex; align-items: center; gap: 8.5px; padding: 8.5px; border-radius: 9.3px; font-weight: 600; font-size: 12.3px; }
.dz-dlink:hover { background: var(--dz-cream); }
.dz-dlink .dz-count { margin-left: auto; font-size: 10.2px; color: var(--dz-muted); font-weight: 500; }

/* Bottom nav — mobile */
.dz-bnav {
    position: fixed; left: 8.5px; right: 8.5px; bottom: 8.5px; z-index: 40; height: 56.1px; border-radius: 18.7px;
    background: rgba(28, 25, 22, .96); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px;
    box-shadow: 0 8.5px 25.5px -8px rgba(0, 0, 0, .5);
}
.dz-bnav a, .dz-bnav button { position: relative; background: none; border: 0; color: rgba(255, 255, 255, .7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5px; font-size: 9.3px; font-weight: 500; border-radius: 12.8px; }
.dz-bnav .is-on { background: rgba(255, 255, 255, .1); color: var(--dz-soft); }
.dz-bnav .dz-badge { top: 2px; right: 50%; margin-right: -22px; border-color: #1c1916; }
@media (min-width: 1024px) { .dz-bnav { display: none; } }

/* ================= Section scaffolding ================= */
.dz-main { padding-bottom: 17px; }
.dz-sec { margin-top: 28.9px; }
@media (min-width: 768px) { .dz-sec { margin-top: 40.8px; } }
.dz-band { padding: 30.6px 0 25.5px; color: #fff; background: var(--dz-brown); }
.dz-band.is-dark { background: linear-gradient(180deg, #211e1b, #151311); }
.dz-band.is-beige { background: color-mix(in srgb, var(--dz-soft) 70%, var(--dz-cream)); color: var(--dz-ink); }
@media (min-width: 768px) { .dz-band { padding: 39.1px 0 32.3px; } }
.dz-sechead { display: flex; align-items: center; gap: 10.2px; margin-bottom: 15.3px; }
.dz-h2 {
    margin: 0; font-size: 20.4px; font-weight: 700; letter-spacing: -.3px; line-height: 1.15;
    background: linear-gradient(90deg, var(--dz-ink) 0%, var(--dz-ink) 22%, var(--dz-gold) 48%, color-mix(in srgb, var(--dz-gold) 70%, #fff) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: inline-block;
}
.dz-band .dz-h2 { background: none; color: #fff; }
.dz-band.is-beige .dz-h2 { background: linear-gradient(90deg, var(--dz-ink) 0 30%, var(--dz-brown) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dz-h2 .dz-gold { color: var(--dz-gold); }
@media (min-width: 768px) { .dz-h2 { font-size: 25.5px; } }
.dz-seeall { margin-left: auto; font-size: 11px; font-weight: 600; padding: 6.8px 11.9px; border-radius: 8.5px; background: #f6efe6; color: var(--dz-ink); white-space: nowrap; }
.dz-band .dz-seeall { background: #fff; color: var(--dz-ink); }
.dz-countdown { display: flex; align-items: center; gap: 4.2px; font-weight: 700; font-size: 10.6px; }
.dz-countdown span.box { min-width: 22.1px; height: 22.1px; padding: 0 4.2px; border-radius: 7.6px; display: grid; place-items: center; background: rgba(233, 204, 174, .35); color: #fff; }
.dz-tabs { display: flex; gap: 6.8px; margin-bottom: 15.3px; flex-wrap: wrap; }
.dz-tab { border: 0; padding: 7.6px 13.6px; border-radius: 8.5px; font-size: 11.5px; font-weight: 600; background: #f4ede5; color: var(--dz-ink); }
.dz-tab.is-on { background: var(--dz-soft); color: #2c1c0b; }
.dz-band .dz-tab { background: #fff; }
.dz-band .dz-tab.is-on { background: color-mix(in srgb, var(--dz-soft) 70%, var(--dz-brown)); color: #fff; }

/* Horizontal carousel of cards */
.dz-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 10.2px) / 2); gap: 10.2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6.8px; margin: 0 -2px; }
.dz-rail::-webkit-scrollbar { display: none; }
.dz-rail > * { scroll-snap-align: start; }
@media (min-width: 640px) { .dz-rail { grid-auto-columns: calc((100% - 20.4px) / 3); } }
@media (min-width: 1024px) { .dz-rail { grid-auto-columns: calc((100% - 54.4px) / 5); gap: 13.6px; } }
.dz-dots { display: flex; justify-content: center; gap: 5.1px; margin-top: 13.6px; }
.dz-dots button { width: 6.8px; height: 6.8px; border-radius: 84.1px; border: 0; padding: 0; background: #d6d3cf; transition: width .2s; }
.dz-dots button.is-on { width: 22.1px; background: linear-gradient(90deg, #e2b23c, #f3cf6a); }
.dz-band .dz-dots button { background: rgba(255, 255, 255, .6); }
.dz-band .dz-dots button.is-on { background: linear-gradient(90deg, #e2b23c, #f3cf6a); }

/* ================= Hero ================= */
.dz-hero { display: grid; gap: 11.9px; margin-top: 15.3px; }
@media (min-width: 1024px) { .dz-hero { grid-template-columns: 2fr 1fr; gap: 13.6px; } .dz-hero.is-solo { grid-template-columns: 1fr; } .dz-hero.is-solo .dz-slide-box { min-height: 0; aspect-ratio: 3.2; } }
.dz-hero-main { position: relative; }
.dz-hero-main .dz-dots { position: absolute; left: 0; right: 0; bottom: 11.9px; margin: 0; z-index: 2; }
.dz-hero-main .dz-dots button { background: rgba(255, 255, 255, .55); }
.dz-slide-box { position: relative; border-radius: 17px; overflow: hidden; background: var(--dz-dark); aspect-ratio: 1.6; }
@media (min-width: 1024px) { .dz-slide-box { aspect-ratio: auto; height: 100%; min-height: 323px; } }
.dz-slide { position: absolute; inset: 0; }
.dz-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dz-slide-txt {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8.5px; padding: 20.4px 23.8px; color: #fff;
    background: radial-gradient(70% 90% at 80% 60%, rgba(201, 154, 78, .45), transparent 70%), linear-gradient(120deg, #1d1a17 0%, #3a2610 100%);
}
.dz-slide-txt.on-img { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); }
.dz-slide-txt p { margin: 0; }
.dz-slide-t { font-size: 22.1px; font-weight: 800; line-height: 1.1; max-width: 80%; }
.dz-slide-s { font-size: 12.8px; opacity: .9; max-width: 80%; }
@media (min-width: 768px) { .dz-slide-t { font-size: 37.4px; } .dz-slide-s { font-size: 15.3px; } .dz-slide-txt { padding: 34px 40.8px; } }
.dz-slide-cta { align-self: flex-start; margin-top: 6.8px; background: #f3b872; color: #2a1a08; font-weight: 700; font-size: 11.9px; padding: 7.6px 15.3px; border-radius: 8.5px; }
.dz-side { position: relative; border-radius: 17px; overflow: hidden; background: var(--dz-dark); min-height: 170px; display: block; }
.dz-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Category tiles */
.dz-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11.9px 8.5px; }
@media (min-width: 768px) { .dz-cats { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .dz-cats { grid-template-columns: repeat(8, 1fr); gap: 15.3px 13.6px; } }
.dz-cat { display: flex; flex-direction: column; align-items: center; gap: 8.5px; text-align: center; font-size: 11.5px; font-weight: 500; }
.dz-cat-img {
    width: 100%; aspect-ratio: 1; border-radius: 22.1px; background: #f4f4f4; display: grid; place-items: center; overflow: hidden;
    box-shadow: inset 0 -6px 10.2px rgba(0, 0, 0, .03), 0 3.4px 11.9px -8px rgba(0, 0, 0, .18); transition: transform .2s;
}
.dz-cat:hover .dz-cat-img { transform: translateY(-3px); }
.dz-cat-img img { width: 68%; height: 68%; object-fit: contain; mix-blend-mode: multiply; }
.dz-cat-img .dz-cat-ph { font-size: 22.1px; font-weight: 800; color: var(--dz-gold); }

/* Banners */
.dz-banners { display: grid; gap: 10.2px; }
@media (min-width: 768px) {
    .dz-banners.n2 { grid-template-columns: 1fr 1fr; gap: 13.6px; }
    .dz-banners.n3 { grid-template-columns: repeat(3, 1fr); gap: 10.2px; }
}
.dz-banner { display: block; border-radius: 15.3px; overflow: hidden; background: #eee; }
.dz-banner img { display: block; width: 100%; height: auto; }

/* ================= Product card ================= */
.dz-card { position: relative; display: flex; flex-direction: column; color: var(--dz-ink); background: var(--dz-panel); border-radius: var(--dz-radius); overflow: hidden; box-shadow: var(--dz-shadow); min-width: 0; }
.dz-card-media { position: relative; display: block; background: #fff; border-radius: 0 0 18.7px 18.7px; aspect-ratio: 1 / .92; }
.dz-card-media img { position: absolute; inset: 12% 14% 14%; width: 72%; height: 74%; object-fit: contain; transition: transform .3s; }
.dz-card:hover .dz-card-media img { transform: scale(1.04); }
.dz-off { position: absolute; top: 8.5px; left: 8.5px; font-size: 9.8px; font-weight: 700; color: #b42318; background: #fcd9d4; padding: 2.5px 7.6px; border-radius: 84.1px; }
.dz-tag { position: absolute; top: 8.5px; right: 8.5px; font-size: 9.3px; font-weight: 600; color: #fff; background: #3b2412; padding: 3.4px 7.6px; border-radius: 84.1px; white-space: nowrap; }
.dz-tag.is-green { background: #1f6b2e; left: 8.5px; right: auto; top: auto; bottom: 8.5px; }
.dz-card-tools { position: absolute; right: 6.8px; bottom: 6.8px; display: flex; gap: 5.1px; }
.dz-circ { height: 25.5px; width: 25.5px; border-radius: 84.1px; background: #fff; border: 1px solid var(--dz-line); display: grid; place-items: center; color: var(--dz-ink); padding: 0; }
.dz-circ svg { width: 12.8px; height: 12.8px; }
.dz-card-body { padding: 10.2px 10.2px 10.2px; display: flex; flex-direction: column; flex: 1; }
.dz-card-name { font-size: 11.9px; font-weight: 500; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dz-instock { color: var(--dz-green); font-weight: 600; }
.dz-outstock { color: var(--dz-red); font-weight: 600; }
.dz-price { margin-top: 6.8px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dz-price b { font-size: 15.3px; font-weight: 700; letter-spacing: -.2px; }
.dz-price s { font-size: 10.6px; color: #9a9a9a; }
@media (min-width: 768px) { .dz-price b { font-size: 17px; } .dz-card-body { padding: 11.9px 11.9px 11.9px; } }
.dz-card-actions { margin-top: auto; padding-top: 10.2px; display: flex; gap: 6.8px; align-items: center; }
.dz-addbtn {
    flex: 1; min-width: 0; height: 34px; border-radius: 11px; background: #fff; border: 1px solid var(--dz-soft); color: var(--dz-brown);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 11.5px; white-space: nowrap;
}
.dz-addbtn:hover { background: color-mix(in srgb, var(--dz-soft) 25%, #fff); }
.dz-addbtn:disabled { opacity: .5; cursor: not-allowed; }
.dz-eye { height: 34px; width: 34px; border-radius: 84.1px; background: #fff; border: 1px solid var(--dz-line); display: grid; place-items: center; flex-shrink: 0; }
.dz-eye svg { width: 14.4px; height: 14.4px; }
.dz-tba { align-self: flex-start; margin-top: 6.8px; font-size: 9.8px; font-weight: 600; color: #fff; background: var(--dz-brown); padding: 3.4px 8.5px; border-radius: 84.1px; }
@media (max-width: 420px) { .dz-addbtn .dz-addtxt-long { display: none; } .dz-eye { display: none; } }

/* ================= Value props ================= */
.dz-props { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8.5px; }
@media (min-width: 768px) { .dz-props { grid-template-columns: repeat(5, 1fr); gap: 11.9px; } }
.dz-prop { background: #fff; border-radius: 15.3px; border: 1px solid #f0ebe4; padding: 18.7px 10.2px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10.2px; font-size: 11.9px; font-weight: 500; }
.dz-prop-ic { height: 40.8px; width: 40.8px; border-radius: 84.1px; background: #f3ede6; display: grid; place-items: center; font-size: 17px; }

/* ================= Footer ================= */
.dz-foot-wrap { margin-top: 59.5px; position: relative; }
.dz-cta-card {
    position: relative; z-index: 2; max-width: 578px; margin: 0 auto -70px; background: #fff; border-radius: 20.4px; padding: 20.4px 18.7px;
    box-shadow: 0 15.3px 34px -20px rgba(0, 0, 0, .35); text-align: center;
}
.dz-cta-card h3 { margin: 0; font-size: 16.1px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.dz-cta-card p { margin: 5.1px 0 13.6px; color: var(--dz-muted); font-size: 11.5px; }
.dz-cta-row { display: flex; gap: 8.5px; justify-content: center; flex-wrap: wrap; }
.dz-cta-row a { display: inline-flex; align-items: center; gap: 6.8px; height: 39.1px; padding: 0 17px; border-radius: 11px; border: 1px solid #ececec; font-weight: 600; font-size: 11.9px; }
.dz-cta-row a.is-dark { background: #222; color: #fff; border-color: #222; }
.dz-footer {
    color: #fff; border-radius: 23.8px 23.8px 0 0; padding: 85px 0 22.1px;
    background: radial-gradient(60% 80% at 50% 110%, rgba(120, 90, 50, .55), transparent 70%), linear-gradient(180deg, #1d1b19 0%, #2a2521 100%);
}
.dz-fgrid { display: grid; gap: 23.8px; }
@media (min-width: 768px) { .dz-fgrid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 25.5px; } }
@media (min-width: 1100px) { .dz-fgrid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; } }
.dz-fbrand p { color: rgba(255, 255, 255, .72); font-size: 11.5px; line-height: 1.8; margin: 10.2px 0 0; }
.dz-fh { font-size: 13.2px; font-weight: 500; padding-bottom: 10.2px; margin-bottom: 11.9px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dz-flinks { display: flex; flex-direction: column; gap: 9.3px; font-size: 11.5px; color: rgba(255, 255, 255, .78); }
.dz-flinks a:hover { color: #fff; }
.dz-socials { display: flex; gap: 8.5px; margin-top: 15.3px; flex-wrap: wrap; }
.dz-socials a { height: 32.3px; min-width: 32.3px; padding: 0 8.5px; border-radius: 84.1px; background: rgba(255, 255, 255, .07); display: grid; place-items: center; font-size: 10.2px; font-weight: 600; text-transform: capitalize; }
.dz-fbottom { margin-top: 28.9px; position: relative; text-align: center; font-size: 11px; color: rgba(255, 255, 255, .7); }
.dz-fbottom::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .12); }
.dz-fbottom span { position: relative; display: inline-block; padding: 10.2px 34px; border-radius: 34px 34px 0 0; border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; background: #27231f; }
@media (max-width: 1023px) { .dz-footer { padding-bottom: 85px; } }

/* ================= Breadcrumb + common ================= */
.dz-crumbs { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dz-muted); margin: 15.3px 0 13.6px; flex-wrap: wrap; }
.dz-crumbs a:hover { color: var(--dz-brown); }
.dz-crumbs b { color: var(--dz-ink); font-weight: 600; }
.dz-box { background: #fff; border-radius: 17px; border: 1px solid #f0ebe4; }
.dz-btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 6.8px; height: 40.8px; padding: 0 22.1px; border-radius: 84.1px; border: 0; background: #222; color: #fff !important; font-weight: 700; font-size: 12.8px; }
.dz-btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 6.8px; height: 40.8px; padding: 0 22.1px; border-radius: 84.1px; border: 0; background: var(--dz-soft); color: #1d1206 !important; font-weight: 700; font-size: 12.8px; }
.dz-btn-dark:disabled, .dz-btn-soft:disabled { opacity: .5; cursor: not-allowed; }
.dz-empty { text-align: center; padding: 51px 13.6px; color: var(--dz-muted); }
.dz-empty .big { font-size: 35.7px; margin-bottom: 6.8px; }

/* ================= Listing / filters ================= */
.dz-pills { display: flex; gap: 6.8px; flex-wrap: wrap; margin-bottom: 15.3px; }
.dz-pill { border: 1px solid #ece6df; background: #fff; padding: 6px 12.8px; border-radius: 84.1px; font-size: 11.5px; font-weight: 500; color: var(--dz-ink); }
.dz-pill.is-on { background: var(--dz-brown); border-color: var(--dz-brown); color: #fff; }
@media (max-width: 767px) { .dz-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 13.6px; padding: 0 13.6px; } .dz-pill { flex-shrink: 0; } }
.dz-shop { display: grid; gap: 15.3px; align-items: start; }
@media (min-width: 1024px) { .dz-shop { grid-template-columns: 229.5px 1fr; } }
.dz-filters { background: #fff; border-radius: 17px; border: 1px solid #f0ebe4; padding: 11.9px; }
@media (min-width: 1024px) { .dz-filters { position: sticky; top: 11.9px; max-height: calc(100vh - 23.8px); overflow-y: auto; scrollbar-width: thin; } }
.dz-filters.dz-drawer-panel { display: block; border-radius: 0; border: 0; overflow-y: auto; padding: 13.6px; }
.dz-fgroup + .dz-fgroup { margin-top: 10.2px; padding-top: 10.2px; border-top: 1px solid #f2eee9; }
.dz-fgroup-h { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: #fbf3ea; border-radius: 8.5px; padding: 8.5px 10.2px; font-size: 11.9px; font-weight: 600; color: var(--dz-ink); }
.dz-fgroup-b { padding: 10.2px 3.4px 2px; }
.dz-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7.6px 6.8px; }
.dz-checks.one { grid-template-columns: 1fr; }
.dz-check { display: flex; align-items: center; gap: 6.8px; font-size: 11.5px; color: #3d3d3d; cursor: pointer; min-width: 0; }
.dz-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-check input { appearance: none; -webkit-appearance: none; width: 13.6px; height: 13.6px; border: 1.5px solid #cfc8c0; border-radius: 3.4px; flex-shrink: 0; margin: 0; display: grid; place-items: center; background: #fff; }
.dz-check input:checked { background: var(--dz-brown); border-color: var(--dz-brown); }
.dz-check input:checked::after { content: ''; width: 6.8px; height: 3.4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.dz-range { position: relative; height: 25.5px; margin: 3.4px 6.8px 11.9px; }
.dz-range .track { position: absolute; left: 0; right: 0; top: 50%; height: 13.6px; margin-top: -8px; border-radius: 3.4px; background: repeating-linear-gradient(90deg, #222 0 2.5px, #fff 2.5px 5.1px); }
.dz-range .fill { position: absolute; top: 50%; height: 13.6px; margin-top: -8px; background: repeating-linear-gradient(90deg, #222 0 2.5px, #fff 2.5px 5.1px); border-radius: 3.4px; }
.dz-range .track.dim { opacity: .18; }
.dz-range input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dz-range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; height: 17px; width: 17px; border-radius: 84.1px; background: #222; border: 2.5px solid #fff; box-shadow: 0 0 0 1px #222; cursor: pointer; }
.dz-range input::-moz-range-thumb { pointer-events: auto; height: 13.6px; width: 13.6px; border-radius: 84.1px; background: #222; border: 2.5px solid #fff; box-shadow: 0 0 0 1px #222; cursor: pointer; }
.dz-range input::-webkit-slider-runnable-track { background: none; }
.dz-range input::-moz-range-track { background: none; }
.dz-minmax { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6.8px; align-items: center; }
.dz-minmax label { border: 1px solid #ece6df; border-radius: 10.2px; padding: 4.2px 8.5px; text-align: center; box-shadow: 0 2px 5.1px -4px rgba(0, 0, 0, .2); }
.dz-minmax small { display: block; font-size: 8.9px; color: #9a9a9a; }
.dz-minmax input { width: 100%; border: 0; outline: 0; text-align: center; font-weight: 600; font-size: 11.9px; background: transparent; color: var(--dz-ink); }
.dz-toolbar { display: flex; align-items: center; gap: 8.5px; margin-bottom: 11.9px; flex-wrap: wrap; }
.dz-toolbar .count { font-size: 11.9px; color: var(--dz-muted); }
.dz-toolbar .count b { color: var(--dz-ink); }
.dz-select { margin-left: auto; height: 34px; border: 1px solid #ece6df; border-radius: 10.2px; background: #fff; padding: 0 10.2px; font-size: 11.5px; font-weight: 500; color: var(--dz-ink); }
.dz-filterbtn { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11.9px; border-radius: 10.2px; border: 1px solid #ece6df; background: #fff; font-weight: 600; font-size: 11.5px; color: var(--dz-ink); }
.dz-chipsel { display: flex; flex-wrap: wrap; gap: 5.1px; margin-bottom: 10.2px; }
.dz-chipsel button { border: 0; background: #f3ede6; border-radius: 84.1px; padding: 4.2px 8.5px; font-size: 10.6px; font-weight: 500; color: var(--dz-ink); }
.dz-chipsel .clear { background: none; color: var(--dz-brown); font-weight: 700; }
.dz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10.2px; }
@media (min-width: 640px) { .dz-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .dz-grid { grid-template-columns: repeat(4, 1fr); gap: 13.6px; } }
.dz-grid.wide { }
@media (min-width: 1024px) { .dz-grid.wide { grid-template-columns: repeat(5, 1fr); gap: 13.6px; } }
.dz-pager { margin-top: 20.4px; display: flex; justify-content: center; gap: 5.1px; flex-wrap: wrap; }
.dz-pager button, .dz-pager span { min-width: 34px; height: 34px; padding: 0 8.5px; border-radius: 10.2px; border: 1px solid #ece6df; background: #fff; font-weight: 600; font-size: 11.9px; color: var(--dz-ink); display: grid; place-items: center; }
.dz-pager .is-on { background: var(--dz-brown); color: #fff; border-color: var(--dz-brown); }
.dz-pager button:disabled { opacity: .4; }
.dz-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* ================= Product page ================= */
.dz-pd { display: grid; gap: 15.3px; align-items: start; }
@media (min-width: 1024px) { .dz-pd { grid-template-columns: 5fr 7fr; gap: 17px; } }
.dz-gallery { padding: 11.9px; }
@media (min-width: 1024px) { .dz-gallery-col { position: sticky; top: 11.9px; } }
.dz-gal-main { position: relative; aspect-ratio: 1; border-radius: 13.6px; background: #fff; overflow: hidden; }
.dz-gal-main img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.dz-thumbs { display: flex; gap: 8.5px; margin-top: 10.2px; overflow-x: auto; scrollbar-width: none; }
.dz-thumb { flex-shrink: 0; height: 56.1px; width: 56.1px; border-radius: 10.2px; border: 1.5px solid #ece6df; background: #fff; padding: 4.2px; }
.dz-thumb.is-on { border-color: #d98c3b; box-shadow: 0 0 0 1px #d98c3b; }
.dz-thumb img { width: 100%; height: 100%; object-fit: contain; }
.dz-also h4 { margin: 17px 0 10.2px; font-size: 14.4px; font-weight: 700; }
.dz-also-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8.5px; }
.dz-also-row a { background: #faf3ea; border-radius: 11.9px; padding: 11.9px 5.1px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; }
.dz-also-row .ic { height: 25.5px; width: 25.5px; border-radius: 84.1px; display: grid; place-items: center; color: #fff; }
.dz-pd-title { display: flex; gap: 10.2px; align-items: flex-start; }
.dz-pd-title h1 { margin: 0; font-size: 18.7px; font-weight: 700; line-height: 1.25; flex: 1; }
@media (min-width: 768px) { .dz-pd-title h1 { font-size: 22.1px; } }
.dz-by { margin-top: 3.4px; font-size: 11.9px; color: var(--dz-muted); }
.dz-by a { color: var(--dz-gold); font-weight: 600; }
.dz-stockline { margin-top: 10.2px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 5.1px 10.2px; border-radius: 8.5px; background: #f1faf3; color: var(--dz-green); }
.dz-stockline.is-out { background: #fdf0ef; color: var(--dz-red); }
.dz-stockline i { height: 6px; width: 6px; border-radius: 84.1px; background: currentColor; }
.dz-pricebox { margin-top: 13.6px; background: #fdf8f2; border: 1px solid #f1e6d8; border-radius: 15.3px; padding: 15.3px; }
.dz-pricerow { display: flex; align-items: center; gap: 10.2px; flex-wrap: wrap; }
.dz-bigprice { font-size: 22.1px; font-weight: 800; color: var(--dz-gold); letter-spacing: -.3px; }
.dz-bigprice + s { color: #b8a58f; font-size: 12.8px; font-weight: 600; }
.dz-save { font-size: 10.2px; font-weight: 700; color: #b42318; background: #fcd9d4; padding: 2.5px 7.6px; border-radius: 84.1px; }
.dz-qty { margin-left: auto; display: flex; align-items: center; gap: 8.5px; font-size: 11.9px; font-weight: 500; }
.dz-stepper { display: inline-flex; align-items: center; border: 1px solid #ece6df; border-radius: 8.5px; background: #fff; overflow: hidden; }
.dz-stepper button { height: 28.9px; width: 28.9px; border: 0; background: #fff; font-size: 14.4px; color: #555; }
.dz-stepper button.plus { background: #222; color: #fff; border-radius: 7.6px; }
.dz-stepper span { min-width: 28.9px; text-align: center; font-weight: 600; font-size: 11.9px; }
.dz-keyspecs { margin-top: 11.9px; padding-top: 11.9px; border-top: 1px dashed #eadccb; display: grid; gap: 4.2px; font-size: 11.5px; color: #3c3c3c; }
.dz-keyspecs b { color: var(--dz-ink); font-weight: 700; }
.dz-perks { margin-top: 10.2px; display: grid; gap: 6px; font-size: 11.5px; }
.dz-perks div { display: flex; gap: 6.8px; align-items: center; }
.dz-variants { margin-top: 13.6px; padding: 15.3px; }
.dz-vrow { display: flex; align-items: center; gap: 10.2px; flex-wrap: wrap; }
.dz-vrow + .dz-vrow { margin-top: 11.9px; }
.dz-vrow > span { font-size: 11.9px; font-weight: 500; min-width: 93.5px; }
.dz-vrow > span em { font-style: normal; color: var(--dz-muted); }
.dz-vchip { border: 1px solid #ece6df; background: #fff; border-radius: 8.5px; padding: 6px 11px; font-size: 11px; font-weight: 500; }
.dz-vchip.is-on { background: var(--dz-soft); border-color: var(--dz-soft); }
.dz-darkcard { margin-top: 13.6px; background: #1f1c19; color: #fff; border-radius: 15.3px; padding: 13.6px; }
.dz-darkcard h5 { margin: 0 0 10.2px; font-size: 12.8px; font-weight: 600; display: flex; align-items: center; gap: 6.8px; }
.dz-darkcard .rows { display: grid; gap: 6.8px; }
.dz-darkcard .row { background: #fff; color: var(--dz-ink); border-radius: 10.2px; padding: 9.3px 10.2px; display: flex; gap: 8.5px; align-items: center; font-size: 11.5px; }
.dz-darkcard .row .ic { height: 25.5px; width: 25.5px; border-radius: 6.8px; background: #5c3a17; color: #fff; display: grid; place-items: center; flex-shrink: 0; font-size: 12.8px; }
.dz-ptabs { margin-top: 25.5px; }
.dz-ptab-h { display: flex; gap: 6.8px; margin-bottom: 11.9px; }
.dz-ptab-h button { border: 0; padding: 9.3px 17px; border-radius: 10.2px; background: #fff; font-weight: 600; font-size: 12.3px; color: var(--dz-ink); border: 1px solid #f0ebe4; }
.dz-ptab-h button.is-on { background: #222; color: #fff; border-color: #222; }
.dz-specgroup { background: #f7f5f2; border-radius: 13.6px; padding: 3.4px 6.8px 6.8px; }
.dz-specgroup + .dz-specgroup { margin-top: 10.2px; }
.dz-specgroup h3 { margin: 0; padding: 10.2px 5.1px; font-size: 12.3px; font-weight: 600; }
.dz-specrow { background: #fff; border-radius: 8.5px; display: grid; grid-template-columns: 102px 1fr; gap: 10.2px; padding: 9.3px 10.2px; font-size: 11.5px; }
.dz-specrow + .dz-specrow { margin-top: 5.1px; }
.dz-specrow span:first-child { color: var(--dz-muted); }
@media (min-width: 768px) { .dz-specrow { grid-template-columns: 170px 1fr; padding: 10.2px 15.3px; } }
.dz-desc { padding: 18.7px; font-size: 12.3px; line-height: 1.75; white-space: pre-line; color: #3a3a3a; }
.dz-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #fff; box-shadow: 0 -8px 25.5px -12px rgba(0, 0, 0, .25);
    border-radius: 15.3px 15.3px 0 0;
}
.dz-buybar .dz-wrap { display: flex; align-items: center; gap: 10.2px; height: 64.6px; }
.dz-bb-info { display: none; align-items: center; gap: 10.2px; font-size: 11px; }
.dz-bb-info div + div { padding-left: 18.7px; margin-left: 8.5px; border-left: 1px solid #eee; }
.dz-bb-info b { display: flex; align-items: center; gap: 6px; font-size: 11.9px; font-weight: 600; }
.dz-bb-info small { color: var(--dz-muted); font-size: 10.2px; }
.dz-bb-info small.hi { color: #d97706; }
.dz-bb-price { font-size: 14.4px; font-weight: 800; line-height: 1.1; }
.dz-bb-price small { display: block; font-size: 10.2px; font-weight: 500; color: var(--dz-muted); }
.dz-bb-btns { margin-left: auto; display: flex; gap: 6.8px; align-items: center; }
.dz-bb-btns .dz-btn-dark, .dz-bb-btns .dz-btn-soft { height: 37.4px; padding: 0 15.3px; font-size: 11.9px; }
@media (min-width: 1024px) { .dz-bb-info { display: flex; } .dz-bb-price { margin-left: auto; padding-left: 17px; } .dz-bb-btns { margin-left: 13.6px; } .dz-bb-btns .dz-btn-dark, .dz-bb-btns .dz-btn-soft { height: 40.8px; padding: 0 22.1px; } }
.dz-toast { max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 80; background: #1f1c19; color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 14px; font-weight: 500; display: flex; gap: 12px; align-items: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); white-space: nowrap; }
.dz-toast a { color: var(--dz-soft); font-weight: 700; text-decoration: underline; }

/* ================= Cart / checkout ================= */
.dz-cartgrid { display: grid; gap: 15.3px; align-items: start; }
@media (min-width: 1024px) { .dz-cartgrid { grid-template-columns: 1fr 323px; gap: 18.7px; } }
.dz-h1 { margin: 0 0 13.6px; font-size: 20.4px; font-weight: 700; }
.dz-line { display: flex; gap: 11.9px; padding: 11.9px; align-items: center; }
.dz-line + .dz-line { border-top: 1px solid #f2eee9; }
.dz-line-img { height: 71.4px; width: 71.4px; flex-shrink: 0; border-radius: 11.9px; background: var(--dz-panel); display: grid; place-items: center; overflow: hidden; }
.dz-line-img img { width: 80%; height: 80%; object-fit: contain; }
.dz-line-name { font-weight: 600; font-size: 12.3px; line-height: 1.3; }
.dz-line-price { margin-top: 3.4px; font-weight: 700; color: var(--dz-gold); }
.dz-line-tools { margin-top: 8.5px; display: flex; align-items: center; gap: 11.9px; }
.dz-remove { border: 0; background: none; color: var(--dz-muted); font-size: 11px; font-weight: 500; padding: 0; }
.dz-remove:hover { color: var(--dz-red); }
.dz-summary { padding: 15.3px; }
.dz-summary h3 { margin: 0 0 11.9px; font-size: 14.4px; font-weight: 700; }
.dz-sumrow { display: flex; justify-content: space-between; gap: 8.5px; font-size: 11.9px; padding: 5.1px 0; }
.dz-sumrow span:first-child { color: var(--dz-muted); }
.dz-sumrow.total { border-top: 1px dashed #e6dccf; margin-top: 6.8px; padding-top: 10.2px; font-size: 14.4px; font-weight: 800; }
.dz-sumrow.total span:first-child { color: var(--dz-ink); }
.dz-note { font-size: 10.6px; color: var(--dz-muted); margin: 8.5px 0 0; line-height: 1.5; }
.dz-field { display: block; }
.dz-field + .dz-field { margin-top: 11.9px; }
.dz-field > span { display: block; font-size: 11px; font-weight: 600; margin-bottom: 5.1px; }
.dz-field > span i { color: var(--dz-red); font-style: normal; }
.dz-input { width: 100%; border: 1px solid #e9e2d9; border-radius: 10.2px; padding: 10.2px 11.9px; font-size: 12.3px; background: #fff; color: var(--dz-ink); outline: 0; }
.dz-input:focus { border-color: var(--dz-gold); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--dz-gold) 18%, transparent); }
.dz-err { color: var(--dz-red); font-size: 10.6px; margin-top: 4.2px; }
.dz-done { text-align: center; padding: 42.5px 15.3px; }
.dz-done .tick { margin: 0 auto 13.6px; height: 59.5px; width: 59.5px; border-radius: 84.1px; background: var(--dz-brown); color: #fff; display: grid; place-items: center; font-size: 27.2px; }
.dz-policy { padding: 18.7px; font-size: 12.3px; line-height: 1.8; white-space: pre-line; }

/* Legacy utility classes still used by a few partials (cart badge, ads, banner). */
.shop-btn { background: var(--shop-primary); color: #fff; }
.shop-grad { background: linear-gradient(120deg, var(--shop-primary), var(--shop-accent)); }
.shop-card { background: var(--shop-surface); }
.shop-chip { background: color-mix(in srgb, var(--shop-primary) 12%, transparent); color: var(--shop-primary); }

/* Phones zoom into any input under 16px — keep form text at 16px there. */
@media (max-width: 767px) { .dz-input, .dz-search input, .dz-minmax input { font-size: 16px; } }