/* Zawda: white, navy from the logo (#17307A), logo ring blue (#1790C9) as accent */
:root {
  --bg: #FFFFFF;
  --soft: #F6F3EE;
  --img-bg: #F2EFEA;
  --surface: #FFFFFF;
  --ink: #141414;
  --muted: #6E6A64;
  --line: #E7E2DA;
  --brand: #17307A;
  --brand-ink: #FFFFFF;
  --brand-soft: #E8ECF6;
  --accent: #1790C9;
  --accent-soft: #E3F2FA;
  --ok: #2F7A4F;
  --bad: #B3261E;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 12px 32px rgba(20, 20, 20, .07);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Instrument Serif", Georgia, serif;
  --logo-mark: #1790C9;
}
.rtl { --font: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; --display: "IBM Plex Sans Arabic", Georgia, serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ic { flex: none; vertical-align: -0.2em; }
.err { color: var(--bad); font-size: .9rem; display: block; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

/* bars */
.topbar { background: var(--ink); color: #EDEAE4; font-size: .8rem; letter-spacing: .02em; }
.topbar-in { display: flex; gap: 28px; justify-content: center; padding: 8px 16px; }
.topbar-in span { display: inline-flex; gap: 7px; align-items: center; }
.soon-bar { background: var(--soft); color: var(--ink); font-size: .85rem; padding: 9px 0; text-align: center; border-bottom: 1px solid var(--line); }
.soon-bar a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.notice-bar { background: #FFF6DC; font-size: .88rem; padding: 9px 0; }
.notice-bar .wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* header */
.site-head { background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.head-in { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand { color: var(--ink); display: inline-flex; }
.brand:hover { text-decoration: none; }
.search { flex: 1; display: flex; max-width: 460px; margin-inline: auto; background: var(--soft); border: 1px solid transparent; border-radius: 999px; overflow: hidden; transition: border-color .15s, background .15s; }
.search input { flex: 1; border: 0; background: transparent; padding: 10px 18px; min-width: 0; outline: none; font-size: .92rem; }
.search button { border: 0; background: transparent; padding: 0 16px; cursor: pointer; color: var(--muted); }
.search:focus-within { border-color: var(--ink); background: #fff; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 7px 13px; cursor: pointer; font-size: .82rem; font-weight: 500; white-space: nowrap; }
.pill:hover { border-color: var(--ink); }
.cart-btn { position: relative; display: inline-flex; padding: 9px; color: var(--ink); border-radius: 999px; }
.cart-btn:hover { background: var(--soft); }
.badge { position: absolute; top: 2px; inset-inline-end: 0; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.cat-nav-in { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; padding-top: 0; padding-bottom: 12px; font-size: .88rem; font-weight: 500; }
.cat-nav-in::-webkit-scrollbar { display: none; }
.cat-nav-in a { color: var(--muted); white-space: nowrap; transition: color .15s; }
.cat-nav-in a:hover, .cat-nav-in a.on { color: var(--ink); text-decoration: none; }
.gift-link { color: var(--accent) !important; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 999px; padding: 11px 22px; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none !important; transition: background .15s, transform .08s; }
.btn:hover { background: #333; border-color: #333; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }
.btn-grow { flex: 1; }
.icon-btn { background: none; border: 0; cursor: pointer; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: var(--soft); }

/* hero: headline + mosaic of studio product shots */
.hero { padding: 56px 0 40px; }
.hero-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.kicker { display: inline-flex; gap: 7px; align-items: center; color: var(--accent); font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -0.02em; line-height: .98; margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p { font-size: 1.1rem; color: var(--muted); max-width: 30em; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { display: flex; gap: 10px; align-items: center; margin-top: 28px; font-size: .88rem; color: var(--muted); }
.hero-note strong { color: var(--ink); }
.hero-note .ic { color: var(--ok); }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / 1; }
.mosaic a { position: relative; background: var(--img-bg); border-radius: var(--radius); overflow: hidden; display: block; }
.mosaic a:first-child { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.mosaic a:hover img { transform: scale(1.04); }
.mosaic span { position: absolute; inset-inline-start: 12px; bottom: 12px; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 600; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* trust */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.trust-in > div { display: flex; gap: 12px; align-items: center; }
.trust-in .ic { color: var(--ink); }
.trust-in strong { display: block; font-size: .9rem; font-weight: 600; }
.trust-in span { color: var(--muted); font-size: .82rem; }

/* sections */
.section { padding-top: 56px; padding-bottom: 8px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.sec-head a { font-size: .9rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sec-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.01em; margin: 0 0 22px; }
.sec-head .sec-title { margin: 0; }
.page-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 3.2rem); letter-spacing: -0.01em; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 44em; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.cat-tile { display: flex; flex-direction: column; gap: 10px; color: var(--ink); font-weight: 500; font-size: .9rem; }
.cat-tile:hover { text-decoration: none; }
.cat-ic { aspect-ratio: 1; border-radius: var(--radius); background: var(--img-bg); color: var(--ink); display: grid; place-items: center; overflow: hidden; transition: background .2s; }
.cat-ic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat-tile:hover .cat-ic img { transform: scale(1.05); }
.cat-tile:hover .cat-ic { background: #ECE7E0; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 18px; }
.card { color: var(--ink); display: flex; flex-direction: column; }
.card:hover { text-decoration: none; }
.card-img { aspect-ratio: 1; background: var(--img-bg); position: relative; border-radius: var(--radius); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.tag-sale { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--accent); color: #fff; border-radius: 999px; font-size: .74rem; font-weight: 700; padding: 4px 10px; }
.card-body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-body h3 { font-size: .95rem; font-weight: 500; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price-row { display: flex; gap: 8px; align-items: baseline; }
.price { font-weight: 600; font-size: 1rem; }
.was { color: var(--muted); font-size: .88rem; }
.eta { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); }
.eta .ic { color: var(--ok); }

.empty { background: var(--soft); border-radius: var(--radius); padding: 48px 24px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty h3 { color: var(--ink); margin-top: 8px; font-family: var(--display); font-weight: 400; font-size: 1.7rem; }
.empty p { max-width: 36em; margin: 0 0 14px; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 36px; }

/* budget chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 28px; }
.chips a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: .9rem; font-weight: 500; }
.chips a:hover { border-color: var(--ink); text-decoration: none; }
.chips a.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* promise band */
.band { background: var(--ink); color: #F2EFEA; margin-top: 72px; }
.band li span { color: #A9A49C !important; }
.band .num { border-color: #F2EFEA !important; }
.band-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.band h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin: 0; }
.band ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.band li { display: flex; gap: 14px; align-items: flex-start; }
.band li strong { display: block; }
.band li span { color: var(--muted); font-size: .92rem; }
.band .num { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-size: .85rem; font-weight: 600; }

/* product page */
.crumbs { font-size: .85rem; display: flex; gap: 8px; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); }
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.gallery { position: sticky; top: 120px; }
.gallery-main { background: var(--img-bg); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main { position: relative; }
.gallery-main video { width: 100%; height: 100%; object-fit: contain; background: #111; display: block; }
.gallery-main [hidden] { display: none; }
.video-credit { margin: 6px 0 0; text-align: center; }
.thumb-video { position: relative; width: 80px; height: 80px; background: #111; }
.thumb-video .play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); }
.thumb-video .play::after { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #141414; }
.thumb-video .thumb-label { position: absolute; left: 0; right: 0; bottom: 3px; font-size: 11px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.thumb { border: 1.5px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: var(--img-bg); cursor: pointer; flex: none; }
.thumb.on { border-color: var(--ink); }
.thumb img { width: 76px; height: 76px; object-fit: cover; }
.buy h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -0.01em; line-height: 1.05; }
.price-row.big { margin: 4px 0 6px; }
.price-row.big .price { font-size: 1.6rem; font-weight: 600; }
.eta-box { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 20px 0; }
.eta-box .ic { color: var(--ok); }
.eta-box strong { display: block; }
.eta-box span { color: var(--muted); font-size: .86rem; }
.eta-box.off { background: #FFF6DC; border-color: #F3E2A6; }
.eta-box.off .ic { color: #8a6a00; }
.variants { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.variants legend { font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
.variant input { position: absolute; opacity: 0; }
.variant span { display: inline-block; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; cursor: pointer; font-size: .9rem; transition: border-color .15s; }
.variant span:hover { border-color: var(--muted); }
.variant input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.variant input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.buy-row { display: flex; gap: 10px; }
.qty select { height: 100%; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; background: #fff; }
.perks { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; font-size: .9rem; color: var(--muted); }
.perks li { display: flex; gap: 10px; align-items: center; }
.perks .ic { color: var(--ink); }
.desc { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; color: #33302C; }
.acc { border-top: 1px solid var(--line); padding: 16px 0; }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.acc summary::after { content: "+"; font-weight: 400; font-size: 1.2rem; line-height: 1; }
.acc[open] summary::after { content: "\2212"; }
.acc summary::-webkit-details-marker { display: none; }
.acc p { color: var(--muted); margin: 10px 0 0; }
.sticky-buy { display: none; }

/* cart & checkout */
.flash { border-radius: 12px; padding: 12px 16px; margin: 16px 0; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.flash.ok { background: #E6F2EA; color: var(--ok); }
.flash.bad { background: #FCEBE8; color: var(--bad); display: block; }
.flash ul { margin: 6px 0 0; padding-inline-start: 18px; }
.lines { border-top: 1px solid var(--line); }
.line { display: grid; grid-template-columns: 88px 1fr auto auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; background: var(--img-bg); }
.line-main { display: flex; flex-direction: column; gap: 3px; }
.line-name { font-weight: 500; }
.line select { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; background: #fff; }
.totals { background: var(--soft); border-radius: var(--radius); padding: 22px; margin-top: 22px; display: grid; gap: 10px; }
.totals.flat { background: none; padding: 0; margin: 16px 0; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; }
.totals .grand { font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }

.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.co-main h2, .co-side h2 { font-size: 1.15rem; margin-top: 8px; }
.co-side { background: var(--soft); border-radius: var(--radius); padding: 24px; position: sticky; top: 120px; }
.mini-line { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; padding: 4px 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > span { font-weight: 500; font-size: .9rem; }
.field em { color: var(--muted); font-style: normal; font-weight: 400; }
.field small { color: var(--muted); font-size: .8rem; }
.field input, .field select, .field textarea { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 12px 14px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 20, 20, .08); }
.pay-opts { display: grid; gap: 10px; margin-bottom: 16px; }
.pay-opt { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; cursor: pointer; }
.pay-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pay-opt strong { display: block; }
.pay-opt small { color: var(--muted); }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--muted); margin: 10px 0; }
.consent input { margin-top: 4px; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }

.thanks { background: var(--soft); border-radius: var(--radius); padding: 40px 32px; text-align: center; }
.thanks h1 { font-family: var(--display); font-weight: 400; font-size: 2.6rem; }
.thanks .totals { text-align: start; }
.ok-ring { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ok); display: inline-grid; place-items: center; margin-bottom: 14px; }

/* text pages */
.prose { max-width: 720px; }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: 6px; }
.prose .todo { background: #FFF1C2; padding: 1px 6px; border-radius: 4px; }

/* newsletter & footer */
.newsletter { background: var(--soft); }
.news-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 56px; align-items: center; }
.newsletter h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.05; }
.newsletter p { color: var(--muted); margin: 0; }
.news-form { display: flex; flex-wrap: wrap; gap: 10px; }
.news-form input[type=email] { flex: 1; min-width: 200px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 13px 20px; }
.news-form input[type=email]:focus { outline: none; border-color: var(--ink); }
.news-form .consent { width: 100%; margin: 0; }
.site-foot { background: #10225A; color: #BDB8B0; padding: 56px 0 24px; font-size: .9rem; }
.site-foot a { color: #F2EFEA; }
.site-foot .muted, .site-foot .muted a { color: #8A857D; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 28px; }
.foot-grid h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #8A857D; font-weight: 600; }
.foot-grid > div > a { display: block; margin-bottom: 8px; }
.foot-brand { color: #fff; margin-bottom: 14px; --logo-mark: #1790C9; }
.site-foot .pill { color: #F2EFEA; border-color: #3B3833; }
.langs { display: flex; gap: 14px; margin-top: 14px; }
.langs a.on { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.foot-base { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #2E2B27; margin-top: 40px; padding-top: 18px; flex-wrap: wrap; font-size: .82rem; }

/* dialog */
.popup { width: min(460px, calc(100vw - 32px)); }
.popup .news-form input[type=email] { border: 1px solid var(--line); flex-basis: 100%; }
.popup .news-form .btn { width: 100%; }
.dialog { border: 0; border-radius: 20px; padding: 28px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 70px rgba(0, 0, 0, .25); }
.dialog::backdrop { background: rgba(20, 20, 20, .45); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dialog h2 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; margin: 0; }

.rtl .hero h1, .rtl .sec-title, .rtl .page-title, .rtl .buy h1, .rtl .newsletter h2, .rtl .band h2, .rtl .prose h2, .rtl .thanks h1, .rtl .dialog h2, .rtl .empty h3 { font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.rtl .hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.rtl .kicker { letter-spacing: 0; text-transform: none; }

/* phones */
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .trust-in { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-in { gap: 32px; }
}
@media (max-width: 760px) {
  .hide-sm { display: none !important; }
  .head-in { flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 10px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .head-actions { margin-inline-start: auto; }
  .hero { padding: 28px 0 24px; }
  .hero-in { grid-template-columns: 1fr; gap: 28px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .trust-in { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pdp, .checkout, .news-in, .band-in { grid-template-columns: 1fr; gap: 24px; }
  .gallery { position: static; }
  .co-side { position: static; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .line { grid-template-columns: 72px 1fr auto; }
  .line img { width: 72px; height: 72px; }
  .line-total { grid-column: 2 / 4; justify-self: end; }
  .sticky-buy { display: flex; position: fixed; inset-inline: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px; gap: 12px; align-items: center; justify-content: space-between; z-index: 15; }
  .sticky-buy .btn { flex: 1; max-width: 240px; }
  .section { padding-top: 40px; }
}

/* Batch 1 (2026-10-21): account, saved products, discount codes, reviews */
.narrow-sm { max-width: 460px; }
.stack { display: grid; gap: 12px; }
.acc-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin: -6px 0 18px; }
.acc-nav a { font-weight: 500; color: var(--muted); padding: 4px 0; }
.acc-nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.acc-nav form { margin-inline-start: auto; }
.order-line { grid-template-columns: 64px 1fr auto auto; color: var(--ink); }
.order-line:hover { text-decoration: none; background: var(--soft); }
.order-line img, .line img[width="64"] { width: 64px; height: 64px; }
.line-main { display: grid; gap: 2px; }
.st { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 600; background: var(--soft); color: var(--muted); white-space: nowrap; }
.st-shipped { background: #E8EEF8; color: #2B4C7E; }
.st-delivered { background: #E6F2EA; color: var(--ok); }
.st-cod_to_confirm { background: var(--accent-soft); color: var(--accent); }
.st-cancelled, .st-refunded { background: #F1F0EE; color: var(--muted); }
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 14px 0 28px; }
.addr { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 6px; align-content: start; }
.addr p { margin: 0; }
.addr-act { display: flex; gap: 16px; font-size: .9rem; }
.code-input { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.danger-zone { margin-top: 40px; }
.inline { display: inline; }
.disc { color: var(--ok); }
.ok-text { color: var(--ok); margin: 0; display: flex; gap: 6px; align-items: center; }
.coupon summary { cursor: pointer; font-size: .92rem; color: var(--muted); }
.coupon-form { display: flex; gap: 8px; margin-top: 10px; }
.coupon-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; text-transform: uppercase; background: #fff; font: inherit; }
.wish-btn { border: 1px solid var(--line); border-radius: 999px; padding: 12px; color: var(--ink); display: inline-grid; place-items: center; }
.wish-btn.on { color: var(--accent); border-color: var(--accent); }
.wish-btn.on svg { fill: currentColor; }
.stars { --sz: 16px; position: relative; display: inline-block; font-size: var(--sz); line-height: 1; letter-spacing: 1px; color: #D8D2C8; white-space: nowrap; }
.stars-on { position: absolute; inset-inline-start: 0; top: 0; width: var(--pct); overflow: hidden; color: #E0A526; }
.rating-line { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); margin: 2px 0 6px; }
.rating-line.big { font-size: 1.05rem; flex-wrap: wrap; }
.card .rating-line { margin: 0 0 4px; }
.reviews { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.review { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.review p { margin: 8px 0; }
.review-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.review-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.review-photos img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
.review-photos label { display: grid; gap: 4px; }
.review-reply { background: var(--soft); border-radius: 10px; padding: 10px 14px; font-size: .92rem; }
.rate { border: 0; padding: 0; margin: 0; }
.rate legend { font-weight: 600; margin-bottom: 6px; }
.rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rtl .rate-stars { flex-direction: row-reverse; }
.rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-stars label { cursor: pointer; color: #D8D2C8; }
.rate-stars label svg { fill: currentColor; stroke: none; }
.rate-stars input:checked ~ label, .rate-stars label:hover, .rate-stars label:hover ~ label { color: #E0A526; }
.rate-stars input:focus-visible + label { outline: 2px solid var(--ink); border-radius: 6px; }
@media (max-width: 760px) {
  .order-line { grid-template-columns: 52px 1fr auto; }
  .order-line .line-total { grid-column: 2 / -1; justify-self: end; }
  .order-line img { width: 52px; height: 52px; }
}

/* ---- Batch 2: flash sales, banners, returns ---- */
.promo-strip { background: var(--accent); color: #fff; font-size: .88rem; text-align: center; padding: 8px 0; }
.promo-strip a { color: #fff; font-weight: 600; }
.promo-strip span { opacity: .9; font-weight: 400; margin-inline-start: 6px; }
.tag-flash { display: inline-flex; gap: 4px; align-items: center; background: #141414; }
.tag-flash .ic { color: #FFC24B; }
.flash-box { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--accent-soft); border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 14px; color: var(--accent); }
.flash-box strong { color: var(--ink); }
.flash-box > span { font-weight: 700; }
.countdown { font-size: .9rem; color: var(--ink); margin-inline-start: auto; }
.countdown b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }
.flash-box.ended, .flash-head.ended { opacity: .5; }
.flash-sec { background: var(--accent-soft); border-radius: calc(var(--radius) * 1.5); padding-top: 28px; padding-bottom: 28px; }
.flash-head .sec-title { display: inline-flex; gap: 10px; align-items: center; }
.flash-head .sec-title .ic { color: var(--accent); }
.flash-pct { background: var(--accent); color: #fff; border-radius: 999px; font-family: var(--font); font-size: .9rem; font-weight: 700; padding: 3px 10px; }
.banner-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.banner-tile { position: relative; display: flex; align-items: flex-end; min-height: 180px; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.banner-tile:hover { text-decoration: none; }
.banner-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-tile div { position: relative; margin: 14px; background: rgba(255, 255, 255, .94); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.banner-tile strong { font-size: 1.05rem; }
.banner-tile span { color: var(--muted); font-size: .9rem; }
.ret-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 20px 0; }
.ret-box h2 { font-size: 1.1rem; margin: 0 0 6px; }
.ret-form { display: grid; gap: 12px; margin-top: 12px; }
.ret-form label { display: grid; gap: 4px; font-size: .92rem; }
.ret-form select, .ret-form textarea, .ret-form input[type=number] { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; }
.ret-items { display: grid; gap: 6px; }
.ret-items label { display: flex; gap: 10px; align-items: center; }
.ret-items input[type=number] { width: 70px; }
@media (max-width: 640px) { .countdown { margin-inline-start: 0; } }
.banner-tile:not(:has(img)) { min-height: 0; background: var(--accent-soft); }
.banner-tile:not(:has(img)) div { background: transparent; margin: 0; padding: 18px 20px; }
/* Sell on Zawda band on the home page (shown when sellers are switched on) */
.sell-band{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:28px}
.sell-band p{max-width:640px;margin:8px 0 0}
@media (max-width:700px){.sell-band{flex-direction:column;align-items:flex-start;padding:20px}}

/* Zawda balance at checkout */
.wallet-opt { margin-bottom: 12px; }
.pay-opts[hidden], .wallet-line[hidden] { display: none; }
.wallet-row { grid-template-columns: 1fr auto; }
.cashback-note { display: flex; gap: 6px; align-items: flex-start; color: var(--ink); margin: 0 0 12px; }
.invite-share { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* ---- Messages (customer, seller and admin share these) ---- */
.badge-inline { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; vertical-align: 1px; }
.conv-list { display: grid; gap: 8px; margin: 12px 0; }
.conv { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.conv:hover { border-color: var(--accent); }
.conv.unread { border-color: var(--accent); background: var(--accent-soft); }
.conv-main { display: grid; gap: 2px; min-width: 0; }
.conv-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-side { display: grid; justify-items: end; gap: 4px; flex: none; }
.conv-side .badge { position: static; }
.chat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); overflow: hidden; margin-top: 12px; }
.chat-list { max-height: 60vh; min-height: 160px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { margin: auto; }
.msg { max-width: min(78%, 560px); align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 8px 12px; }
.msg.mine { align-self: flex-end; background: var(--brand-soft); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.msg.zawda { border-color: var(--accent); }
.msg-who { font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
.msg-body { white-space: pre-line; overflow-wrap: anywhere; }
.msg-img { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin-top: 6px; }
.msg-note { font-size: .75rem; color: var(--muted); margin-top: 4px; font-style: italic; }
.msg-about { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); background: var(--soft); border-radius: 10px; padding: 4px 8px 4px 4px; margin: 2px 0 6px; text-decoration: none; }
.msg-about span { padding-inline-start: 4px; }
.msg-about img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: var(--img-bg); }
.chat-form { border-top: 1px solid var(--line); background: var(--surface); padding: 10px; display: grid; gap: 8px; }
.chat-form textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; }
.chat-actions { display: flex; align-items: center; gap: 10px; }
.chat-actions .btn { margin-inline-start: auto; }
.chat-photo { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--brand); font-size: .9rem; }
.chat-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.order-chat { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }
.order-chat a, .buy p.small a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .msg { max-width: 90%; } .chat-list { max-height: 55vh; } .chat-photo span { display: none; } }
.msg.alt { align-self: flex-end; border-radius: 14px 14px 4px 14px; }

/* ---- Seller hours and holidays ---- */
.seller-holiday { margin: 12px 0; }
.seller-hours { margin: 12px 0 20px; }
.seller-hours summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seller-hours summary::-webkit-details-marker { display: none; }
.open-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); flex: none; }
.open-dot.on { background: var(--ok); }
.hours-week { margin-top: 8px; border-collapse: collapse; font-size: .9rem; }
.hours-week td { padding: 3px 18px 3px 0; }
.hours-tbl input[type=time] { width: 110px; }
@media (max-width: 600px) {
  .hours-tbl tr:first-child { display: none; }
  .hours-tbl, .hours-tbl tbody, .hours-tbl tr, .hours-tbl td { display: block; width: auto; }
  .hours-tbl tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .hours-tbl td { border: 0; padding: 2px 12px; }
  .hours-tbl td.hours-day { font-weight: 600; }
  .hours-tbl td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted); }
}

/* ---- Sponsored products ---- */
.ad-label { display: block; font-size: .72rem; color: var(--muted); letter-spacing: .02em; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sponsored-grid { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }

/* ---- Brands, characteristics, filters ---- */
.pdp-brand { display: inline-block; font-size: .85rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); text-decoration: none; margin-bottom: 4px; }
.pdp-brand:hover { color: var(--accent); }
.specs-title { font-size: 1.05rem; margin: 22px 0 8px; }
.specs { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 18px; }
.specs th, .specs td { text-align: start; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 40%; color: var(--muted); font-weight: 500; }
.filters { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 18px; background: var(--surface); }
.filters summary { cursor: pointer; padding: 10px 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters-form { display: flex; flex-wrap: wrap; gap: 14px 28px; padding: 4px 14px 14px; align-items: flex-start; }
.filters-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; min-width: 150px; max-height: 220px; overflow-y: auto; }
.filters-form legend { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.price-range { display: flex; align-items: center; gap: 6px; }
.price-range input { width: 90px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.filters-actions { flex-basis: 100%; display: flex; align-items: center; gap: 16px; }

/* ---- Push notifications opt-in ---- */
.push-optin { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0 18px; text-align: start; }
.push-optin[hidden] { display: none; }
.push-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.push-optin .btn { flex: none; }

/* ---- Live selling ---- */
.live-badge { display: inline-block; background: #D92D20; color: #fff; font-weight: 700; font-size: .75rem; letter-spacing: .04em; border-radius: 6px; padding: 3px 8px; }
.live-badge.soon { background: var(--brand); }
.live-badge.ended { background: var(--muted); }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #D92D20; animation: livepulse 1.4s infinite; }
@keyframes livepulse { 50% { opacity: .35; } }
.live-head .page-title { margin: 6px 0 2px; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; margin-top: 14px; align-items: start; }
.live-video { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: var(--radius); overflow: hidden; }
.live-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #fff; text-align: center; padding: 16px; background: linear-gradient(135deg, var(--brand), #0d1d4d); }
.live-wait .muted, .live-wait .ok-text { color: #fff; }
.live-when { font-size: 1.2rem; font-weight: 600; text-transform: capitalize; margin: 0; }
.live-desc { margin: 12px 0; }
.live-now { margin-top: 14px; border: 2px solid #D92D20; border-radius: var(--radius); padding: 10px; background: var(--surface); }
.live-now-label { font-size: .75rem; font-weight: 700; color: #D92D20; text-transform: uppercase; letter-spacing: .05em; }
.live-side-title { font-size: 1rem; margin: 0 0 8px; }
.live-products { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; margin-bottom: 18px; }
.live-prod { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; background: var(--surface); }
.live-prod img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--img-bg); flex: none; }
.live-prod span { display: grid; gap: 2px; }
.live-prod.pinned { border-color: #D92D20; box-shadow: 0 0 0 2px rgba(217, 45, 32, .15); }
.live-comments { height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--soft); font-size: .92rem; }
.live-comments p { margin: 0 0 6px; overflow-wrap: anywhere; }
.live-comments p.seller strong { color: #D92D20; }
.live-say { display: flex; gap: 8px; margin-top: 8px; }
.live-say input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; }
.live-band a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--radius); background: #FDECEA; color: var(--ink); text-decoration: none; }
.live-go { margin-inline-start: auto; font-weight: 600; color: #D92D20; }
.live-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.live-card { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.live-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--brand), #0d1d4d); }
.live-thumb img { width: 100%; height: 100%; object-fit: cover; }
.live-thumb .live-badge { position: absolute; top: 8px; inset-inline-start: 8px; }
.live-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; max-height: 260px; overflow-y: auto; margin: 6px 0 12px; }
.live-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.live-pin { display: grid; justify-items: center; gap: 6px; padding: 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); font: inherit; cursor: pointer; text-align: center; }
.live-pin img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.live-pin.on { border-color: #D92D20; background: #FDECEA; }
.live-comments.ctl { height: auto; max-height: 420px; }
.live-c { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.live-c p.gone { text-decoration: line-through; opacity: .5; }
.live-steps { padding-inline-start: 18px; }
@media (max-width: 860px) { .live-grid { grid-template-columns: 1fr; } }

/* ---- UI pass 2026-10-24 ---- */
/* Product cards: names keep two lines, prices line up across a row whether or not a card has ratings */
.card-body h3 { line-height: 1.35; min-height: 2.7em; }
.card-body .price-row { margin-top: auto; padding-top: 2px; }
.flash.ok { flex-wrap: nowrap; align-items: center; }
/* Home before the first products: what is coming, as plain text (nothing to click) */
.hero-aside { background: var(--img-bg); border-radius: calc(var(--radius) * 1.5); padding: 36px 40px; }
.hero-aside h2 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; margin: 0 0 18px; }
.hero-aside ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 4px; }
.hero-aside li { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.hero-aside li:last-child { border-bottom: 0; }
.hero-aside p { color: var(--muted); font-size: .9rem; margin: 0; }
@media (max-width: 760px) {
  /* Phones: products show sooner */
  .hero h1 { font-size: 2.4rem; margin-bottom: 14px; }
  .hero p { font-size: 1rem; margin-bottom: 20px; }
  .hero-cta { flex-wrap: nowrap; gap: 10px; }
  .hero-cta .btn-lg { flex: 1 1 0; min-width: 0; padding: 12px 10px; font-size: .92rem; line-height: 1.25; white-space: normal; text-align: center; justify-content: center; }
  .hero-note { margin-top: 16px; }
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; aspect-ratio: auto; gap: 10px; }
  .mosaic a { aspect-ratio: 1; }
  .mosaic a:first-child { grid-row: auto; }
  .mosaic span { display: none; }
  .trust-in { gap: 14px 12px; padding-top: 16px; padding-bottom: 16px; }
  .trust-in > div { gap: 8px; align-items: flex-start; }
  .trust-in span { display: none; }
  .trust-in strong { font-size: .85rem; line-height: 1.3; }
  .hero-aside { padding: 24px 22px; }
  .hero-aside h2 { font-size: 1.5rem; }
  .hero-aside li { padding: 9px 0; font-size: .98rem; }
}
/* Lists: count + sort above the grid, room before the newsletter */
.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; font-size: .92rem; }
.sort-pick { display: flex; align-items: center; gap: 8px; }
.sort-pick span { color: var(--muted); }
.sort-pick select { border: 1px solid var(--line); border-radius: 999px; padding: 8px 32px 8px 14px; background: #fff; font: inherit; color: var(--ink); }
main > .section:last-child { padding-bottom: 64px; }
/* Seller shop header */
.shop-head { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: start; margin-bottom: 28px; }
.shop-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--navy, #17307A); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 2.4rem; }
.shop-id .page-title { margin-bottom: 8px; }
.shop-id .lead { margin: 0 0 14px; }
.shop-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: var(--muted); }
.shop-facts li { display: flex; align-items: center; gap: 7px; }
.shop-facts strong { color: var(--ink); }
.shop-msg { white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .shop-head { grid-template-columns: auto 1fr; gap: 14px 16px; }
  .shop-avatar { width: 56px; height: 56px; font-size: 1.6rem; }
  .shop-msg { grid-column: 1 / -1; justify-self: start; }
  .shop-facts { flex-direction: column; gap: 6px; }
  .list-bar { font-size: .86rem; }
  .sort-pick span { display: none; }
}
/* Account tabs: one line that scrolls sideways on phones */
@media (max-width: 760px) {
  .acc-nav { flex-wrap: nowrap; overflow-x: auto; gap: 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: -16px; padding-inline: 16px; }
  .acc-nav::-webkit-scrollbar { display: none; }
  .acc-nav a, .acc-nav form { flex: 0 0 auto; white-space: nowrap; }
  .acc-nav form { margin-inline-start: 0; }
}
/* Account tabs on computers: sign out stays at the end of the first row, tabs wrap on its left */
.acc-nav { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 6px 18px; }
.acc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.acc-nav form { margin-inline-start: 0; padding-top: 4px; }
@media (max-width: 760px) {
  .acc-nav { display: flex; }
  .acc-links { display: contents; }
}
.back-link { font-weight: 500; color: var(--muted); }
/* Empty search: category links */
.chips-center { justify-content: center; margin: 18px 0 0; }
.chips-center a { background: #fff; }
/* Reviews: count per number of stars */
.star-bars { list-style: none; padding: 0; margin: 4px 0 22px; max-width: 360px; display: grid; gap: 6px; font-size: .9rem; }
.star-bars li { display: grid; grid-template-columns: 70px 1fr 28px; align-items: center; gap: 10px; }
.star-bars .bar { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.star-bars .bar i { display: block; height: 100%; background: #E0A526; border-radius: 999px; }
.star-bars li > span:last-child { text-align: end; }
.review-reply + .review-reply { margin-top: 8px; } /* Zawda answer then the shop answer (root-69) */
/* Account notifications (root-69) */
.note-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 14px 12px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; border-radius: 10px; }
.note-row:hover { background: var(--soft); text-decoration: none; }
.note-row.unread { background: var(--soft); }
.note-row.unread strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #1790C9); margin-inline-end: 6px; vertical-align: 2px; }
.note-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.note-txt { display: grid; gap: 2px; }
.note-when { white-space: nowrap; }
@media (max-width: 520px) { .note-row { grid-template-columns: 30px 1fr; } .note-when { grid-column: 2; } }
/* Seller shop page: cover, logo, announcement (root-69) */
.shop-cover { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; border-radius: 16px; margin-bottom: 14px; }
.shop-logo { object-fit: cover; padding: 0; background: #fff; border: 1px solid var(--line); }
.shop-announce { background: var(--soft); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-weight: 500; }
@media (max-width: 600px) { .shop-cover { aspect-ratio: 3 / 1; border-radius: 12px; } }
/* Social sign-in (root-69) */
.social-login { display: grid; gap: 10px; margin: 18px 0 6px; }
.or-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; margin: 14px 0; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ---- Shop extras 2026-10-24 (root-11): search in a shop, popular shops, interests, account offer, referral cookie notice ---- */
.shop-search { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 16px; background: #fff; }
.shop-search svg { color: var(--muted); flex: 0 0 auto; }
.shop-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; background: transparent; padding: 8px 0; }
.shop-search .btn { padding: 8px 18px; }
.shop-search-clear { font-size: .9rem; margin: -10px 0 18px; }
.shop-search-clear a, .ref-consent p a { text-decoration: underline; }
.shop-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.shop-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--ink); background: #fff; }
.shop-card:hover { text-decoration: none; border-color: var(--ink); }
.shop-card .shop-avatar { width: 56px; height: 56px; font-size: 1.5rem; flex: 0 0 auto; }
.shop-card-body { display: grid; gap: 2px; min-width: 0; }
.shop-card-body strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-card .rating-line { margin: 0; font-size: .88rem; }
.pick-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; }
.pick span { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-weight: 500; background: #fff; }
.pick input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #EEF6FB; }
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.account-offer { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 22px 0; text-align: start; display: grid; gap: 6px; justify-items: start; }
.account-offer p { margin: 0 0 6px; }
.ref-consent { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin-inline: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: 14px 16px; display: grid; gap: 10px; font-size: .9rem; }
.ref-consent p { margin: 0; }
.ref-consent-btns { display: flex; gap: 8px; justify-content: flex-end; }
.ref-consent .btn { padding: 8px 16px; font-size: .9rem; }
@media (max-width: 760px) {
  .shop-search { max-width: none; }
  .shop-cards { grid-template-columns: 1fr; }
  .pick-grid { grid-template-columns: 1fr 1fr; }
}
/* Statistics / ads cookie question (root-69) */
.track-consent { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin-inline: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.track-consent p { margin: 0 0 10px; font-size: .92rem; }
/* One consent question at a time: the reseller-link one first (root-69) */
.ref-consent ~ .track-consent { display: none; }
/* No left offset: in Arabic (right to left) it made every page with a form scroll sideways on phones (root-11) */
.hp-field { position: absolute !important; display: block !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
/* Seller legal information (root-69) */
.trader-info { margin: 6px 0 10px; }
.trader-info summary { cursor: pointer; color: var(--muted); }
.trader-info dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; }
.trader-info dt { color: var(--muted); }
.trader-info dd { margin: 0; }
/* Guest order tracking (root-69) */
.track-items { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.track-items li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }

/* Product page on phones 2026-10-24 (root-11): swipe, full screen photo, many options, sticky bar */
.gallery-main img { cursor: zoom-in; }
.gallery-main iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #111; }
.gallery-count { position: absolute; inset-inline-start: 10px; bottom: 10px; background: rgba(20, 20, 20, .65); color: #fff; font-size: .78rem; padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.gallery-zoom { position: absolute; inset-inline-end: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.gallery-main img[hidden] ~ .gallery-count, .gallery-main img[hidden] ~ .gallery-zoom { display: none; }
.photo-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0d0d0d; }
.photo-viewer::backdrop { background: rgba(0, 0, 0, .9); }
.photo-viewer[open] { display: grid; place-items: center; }
.photo-viewer img { max-width: 100%; max-height: 100dvh; object-fit: contain; touch-action: pinch-zoom; }
.pv-close, .pv-nav { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; font-size: 30px; line-height: 1; }
.pv-close { top: 14px; inset-inline-end: 14px; }
.pv-nav { top: 50%; margin-top: -22px; }
.pv-prev { inset-inline-start: 12px; }
.pv-next { inset-inline-end: 12px; }
[dir=rtl] .pv-nav { transform: scaleX(-1); }
.pv-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #ddd; font-size: .85rem; }
.variant-chosen { font-weight: 400; color: var(--muted); }
.variant span { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; border-radius: 20px; }
.variant span img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-block: -4px; margin-inline-start: -8px; }
.variants-many:not(.open) .variant-more { display: none; }
.variants-all { flex-basis: 100%; text-align: start; background: none; border: 0; padding: 4px 0; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; }
@media (max-width: 760px) {
  .variant span { padding: 10px 14px; min-height: 44px; }
  .sticky-buy { padding-bottom: calc(10px + env(safe-area-inset-bottom)); transition: transform .2s; }
  .sticky-buy.off { transform: translateY(110%); }
  body.has-sticky { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .pv-nav { display: none; }
}

/* Live page: offer band, buy button, option picker, basket toast */
.live-offer { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius); background: #FEF3F2; border: 1px solid #FDA29B; color: #912018; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: center; }
.live-prod { flex-wrap: wrap; }
.live-prod-link { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.live-prod-link span { display: grid; gap: 2px; }
.live-buy { flex: none; }
.live-opts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.live-opts button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: .85rem; }
.live-opts button:hover { border-color: var(--brand); }
.live-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 420px; margin: 0 auto; padding: 12px 14px; border-radius: 12px; background: #101828; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.live-toast a { color: #fff; font-weight: 700; margin-inline-start: 8px; }
@media (max-width: 760px) { .live-products { max-height: none; overflow: visible; } }

/* Lives on air from the shop pages 2026-10-24 (root-11) */
.pdp-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 14px; padding: 10px 14px; border-radius: 12px; background: #FEF3F2; border: 1px solid #FECDCA; color: #B42318; text-decoration: none; font-size: .92rem; }
.pdp-live:hover { border-color: #D92D20; }
.pdp-live-offer { background: #D92D20; color: #fff; border-radius: 6px; padding: 2px 8px; font-weight: 700; font-size: .82rem; }
.card-live { position: absolute; top: 10px; inset-inline-end: 10px; font-size: .7rem; padding: 2px 7px; }

/* Proof of delivery thumbnails in an order line: in a row at 56px (the .line img rule made them 72-88px, one per line) (root-11) */
.proof-thumbs { display: flex !important; flex-wrap: wrap; gap: 6px; }
.proof-thumbs img, .line .proof-thumbs img { width: 56px; height: 56px; margin: 0 !important; display: block; object-fit: cover; border-radius: 8px; background: var(--img-bg); }

/* Lives listing cards: product photos when there is no video yet, live offer (root-11) */
.live-pics { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; background: var(--img-bg); }
.live-pics img { width: 100%; height: 100%; object-fit: cover; }
.live-card-offer { position: absolute; bottom: 8px; inset-inline-start: 8px; background: #D92D20; color: #fff; font-weight: 700; font-size: .75rem; border-radius: 6px; padding: 3px 8px; }
.live-ytchat { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--surface); }
.live-ytchat summary { cursor: pointer; font-weight: 700; }
.live-ytchat iframe { display: block; width: 100%; height: 440px; border: 0; margin-top: 8px; border-radius: 8px; }

/* .panel and .chip on customer pages (shops near you, codes, balance, track, following): same look as admin.css, which the shop pages do not load (root-11) */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 12px; }
.chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 600; background: #eee; color: var(--ink); white-space: nowrap; text-decoration: none; }
a.chip:hover { background: #e2e2e2; }
.chip.green { background: #e3f3ea; color: #1e7a46; }
.chip.orange { background: var(--accent-soft); color: #8a3218; }
.chip.grey { background: #ececec; color: #555; }
.chip.blue { background: #e4ecfb; color: #234a9a; }
.chip.red { background: #fde8e8; color: #b42318; }
.live-seek { flex-basis: 100%; text-align: start; font-size: .85rem; color: var(--brand); padding: 2px 0 0; }
/* Why sell on Zawda: what you receive */
.sl-calc { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 460px; }
.sl-calc h3 { margin: 0 0 10px; }
.sl-calc label { display: grid; gap: 6px; font-weight: 600; }
.sl-calc input { max-width: 180px; font-size: 1.1rem; }
.sl-calc table { width: 100%; margin: 12px 0 6px; border-collapse: collapse; }
.sl-calc td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.sl-calc td:last-child { text-align: end; white-space: nowrap; }
.sl-calc .sl-calc-you td { font-weight: 800; font-size: 1.15rem; border-bottom: 0; color: var(--brand); }

/* My orders on phones: a long status ("En attente de votre virement") wraps instead of pushing the total off the screen (root-11) */
@media (max-width: 760px) {
  .order-line > * { min-width: 0; }
  .order-line .st { white-space: normal; max-width: 9.5em; text-align: center; line-height: 1.25; }
}

/* Contrast (WCAG AA, checked with axe, root-11): footer small grey text 4.1 -> 5.6 on the navy, sale badge white text 3.6 -> 4.8 */
.site-foot .muted, .site-foot .muted a, .foot-grid h3 { color: #A39E95; }
.tag-sale { background: #127AAB; }
/* Keyboard focus: one clear ring on links, buttons and fields (mouse and touch clicks do not show it) */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #127AAB; outline-offset: 2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .news-form input:focus-visible { box-shadow: 0 0 0 3px rgba(18, 122, 171, .35); }
.search:focus-within, .shop-search:focus-within { box-shadow: 0 0 0 3px rgba(18, 122, 171, .35); }
.sl-open { display: inline-block; margin-top: 6px; font-size: .9rem; font-weight: 600; }

/* Home while the store is closed: opening soon + waiting list */
.waitlist { background: var(--brand, #17307A); color: #fff; padding: 22px 0; }
.waitlist-in { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .waitlist-in { grid-template-columns: 1fr 1fr; align-items: center; } }
.waitlist h2 { margin: 0 0 4px; color: #fff; }
.waitlist p { margin: 0; color: rgba(255,255,255,.85); }
.waitlist .consent, .waitlist .consent a { color: rgba(255,255,255,.85); }
.waitlist .ok-text { color: #fff; font-weight: 600; }

/* My orders: tabs with counts, search, order cards with photos + next step + actions (root-ef, lane D, 2026-10-26) */
.ord-actions .btn, .ord-search .btn, .ord-tools ~ .empty .btn { padding: 7px 14px; font-size: .85rem; gap: 6px; }
.ord-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 8px 0 18px; }
.ord-tabs { margin: 0; }
.ord-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.ord-n { font-size: .75rem; font-weight: 600; background: var(--soft); color: var(--ink); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.ord-tabs a.on .ord-n { background: rgba(255,255,255,.22); color: #fff; }
.ord-search { display: flex; gap: 8px; flex: 1 1 240px; max-width: 340px; }
.ord-search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: inherit; background: #fff; }
.ord-cards { display: grid; gap: 14px; }
.ord-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.ord-head { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--soft); color: var(--ink); }
.ord-head:hover { text-decoration: none; background: #eeece8; }
.ord-id { display: grid; gap: 2px; }
.ord-total { white-space: nowrap; }
.ord-body { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 14px 16px 6px; align-items: start; }
.ord-thumbs { display: flex; gap: 6px; align-items: center; }
.ord-thumbs img, .ord-noimg, .ord-more { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--img-bg); flex: none; }
.ord-noimg, .ord-more { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; font-size: .9rem; }
.ord-info { display: grid; gap: 3px; min-width: 0; }
.ord-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-next { color: var(--ink); }
.ord-req { color: var(--accent); font-weight: 500; }
.ord-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 16px; }
.ord-actions form { margin: 0; }
@media (max-width: 640px) {
  .ord-search { max-width: none; }
  .ord-head { grid-template-columns: 1fr auto; }
  .ord-head .ord-total { grid-column: 1 / -1; justify-self: start; }
  .ord-body { grid-template-columns: 1fr; }
  .ord-thumbs img, .ord-noimg, .ord-more { width: 52px; height: 52px; }
  .ord-name { white-space: normal; }
}

/* ===== Full-width marketplace home + edge-to-edge header/footer (root-ef, lane P, 2026-10-26) ===== */
:root { --gutter: clamp(16px, 3vw, 48px); --page-max: 2200px; }
.topbar .wrap, .soon-bar .wrap, .site-head .wrap, .cat-nav .wrap, .notice-bar .wrap, .newsletter .wrap, .site-foot .wrap { max-width: var(--page-max); padding-inline: var(--gutter); }
.site-head .search { max-width: 760px; }
.mk-in { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); }
.mk-sec { padding-top: 48px; }
/* Hero: categories | slides | aside */
.mk-hero { background: linear-gradient(180deg, var(--soft) 0, var(--soft) 70%, var(--bg) 100%); padding: 20px 0 28px; }
.mk-hero-in { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 20px; align-items: stretch; }
.mk-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 10px; }
.mk-side-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 4px 10px 8px; font-weight: 600; }
.mk-side ul { list-style: none; margin: 0; padding: 0; }
.mk-side a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; font-weight: 500; font-size: .95rem; }
.mk-side a:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.mk-side .ic { color: var(--brand); flex: none; }
.mk-slides { position: relative; min-width: 0; border-radius: calc(var(--radius) * 1.3); overflow: hidden; background: var(--brand); }
.mk-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%; position: relative; }
.mk-track::-webkit-scrollbar { display: none; }
.mk-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(28px, 4vw, 56px); min-height: 440px; color: #fff; position: relative; }
.mk-slide:hover { text-decoration: none; }
.mk-slide-brand { background: radial-gradient(120% 140% at 100% 0, #1790C9 0, #17307A 55%, #0F2257 100%); }
.mk-slide-flash { background: linear-gradient(135deg, #B3261E, #E0572B); }
.mk-slide-sell { background: linear-gradient(135deg, #141414, #2B3A55); }
.mk-slide-banner { background: var(--brand); overflow: hidden; }
.mk-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.mk-slide-banner .mk-slide-text { position: relative; }
.mk-slide-text { display: grid; gap: 14px; align-content: center; }
.mk-slide h1, .mk-slide h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 4.4rem); line-height: 1; letter-spacing: -.02em; margin: 0; color: #fff; }
.mk-slide h1 em { font-style: italic; color: #8FD3F2; }
.mk-slide p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.05rem; max-width: 34em; }
.mk-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: rgba(255, 255, 255, .8) !important; }
.mk-slide .countdown { color: #fff; }
.mk-slide .flash-pct { background: #fff; color: #B3261E; }
.mk-btn-light { background: #fff; color: var(--brand); border-color: #fff; }
.mk-btn-light:hover { background: #E8ECF6; border-color: #E8ECF6; color: var(--brand); }
.mk-btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.mk-btn-line:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.mk-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: stretch; max-height: 380px; }
.mk-collage > * { background: #fff; border-radius: 14px; overflow: hidden; display: block; min-height: 0; }
.mk-collage img { width: 100%; height: 100%; object-fit: contain; padding: 8px; aspect-ratio: 1 / 1; }
.mk-collage a:hover img { transform: scale(1.04); transition: transform .4s; }
.mk-shop-stack { display: grid; gap: 10px; }
.mk-shop-stack span { display: grid; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 14px 16px; }
.mk-shop-stack small { color: rgba(255, 255, 255, .7); }
.mk-dots { position: absolute; bottom: 14px; inset-inline-start: 0; inset-inline-end: 0; display: flex; justify-content: center; gap: 8px; }
.mk-dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .2s, background .2s; }
.mk-dots button[aria-selected="true"] { width: 26px; background: #fff; }
.mk-aside { display: grid; gap: 14px; align-content: start; }
.mk-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 8px; color: var(--ink); }
a.mk-card:hover { text-decoration: none; border-color: var(--brand); }
.mk-card p { margin: 0; }
.mk-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.mk-quick a { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: .78rem; font-weight: 500; padding: 10px 4px; border-radius: 10px; background: var(--soft); }
.mk-quick a:hover { background: var(--brand-soft); text-decoration: none; }
.mk-quick .ic { color: var(--brand); }
.mk-promise { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.mk-promise .ic { color: var(--ok); }
.mk-promise div { display: grid; gap: 2px; }
.mk-sell { background: var(--brand-soft); border-color: transparent; }
.mk-go { font-weight: 600; color: var(--brand); font-size: .9rem; }
.mk-hero + .trust { border-top: 0; }
.trust-in { padding-inline: var(--gutter); }
/* Category circles */
.mk-cats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 170px); justify-content: start; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.mk-cats::-webkit-scrollbar { display: none; }
.mk-cat { display: grid; justify-items: center; gap: 10px; text-align: center; font-weight: 500; font-size: .92rem; }
.mk-cat:hover { text-decoration: none; }
.mk-cat-img { width: min(150px, 100%); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--img-bg); display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.mk-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.mk-cat:hover .mk-cat-img { box-shadow: 0 0 0 2px var(--brand); transform: translateY(-2px); }
.mk-cat-img .ic { color: var(--brand); }
/* Rails: sideways rows of product cards */
.mk-rail { position: relative; }
.mk-rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(160px, calc((100% - 5 * 18px) / 6), 260px); gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 6px; }
.mk-rail-track::-webkit-scrollbar { display: none; }
.mk-rail-item { scroll-snap-align: start; min-width: 0; }
.mk-arrow { position: absolute; top: 34%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.mk-arrow:hover { border-color: var(--ink); }
.mk-prev { inset-inline-start: -14px; }
.mk-next { inset-inline-end: -14px; }
.rtl .mk-arrow { transform: scaleX(-1); }
/* Shops band */
.mk-band-soft { background: var(--soft); margin-top: 48px; padding-bottom: 48px; }
.mk-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mk-shop { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; color: var(--ink); }
.mk-shop:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow); }
.mk-shop-top { display: flex; gap: 12px; align-items: center; }
.mk-shop-name { display: grid; gap: 2px; min-width: 0; }
.mk-shop-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-shop-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-shop-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--img-bg); }
/* Discover grid: as many columns as the screen holds */
.mk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
@media (min-width: 1300px) { .mk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mk-sell-band { background: var(--brand-soft); border: 0; }
/* Large screens: bigger cards rhythm */
@media (min-width: 1700px) { .mk-hero-in { grid-template-columns: 280px minmax(0, 1fr) 340px; } .mk-slide { min-height: 500px; } .mk-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* Tablet: aside goes under the slides as a row */
@media (max-width: 1180px) {
  .mk-hero-in { grid-template-columns: 220px minmax(0, 1fr); }
  .mk-aside { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* Phone: categories become a chip row above the slides, slides stack text over pictures */
@media (max-width: 860px) {
  .mk-hero { padding-top: 12px; }
  .mk-hero-in { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mk-side { background: transparent; border: 0; padding: 0; }
  .mk-side-title { display: none; }
  .mk-side ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .mk-side ul::-webkit-scrollbar { display: none; }
  .mk-side a { white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: .88rem; gap: 8px; }
  .mk-slide { grid-template-columns: 1fr; min-height: 0; padding: 26px 22px 40px; gap: 20px; }
  .mk-slide h1, .mk-slide h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .mk-slide p { font-size: .98rem; }
  .mk-collage { grid-template-columns: repeat(4, 1fr); max-height: none; gap: 8px; }
  .mk-collage img { padding: 4px; }
  .mk-shop-stack { display: none; }
  .mk-aside { grid-template-columns: 1fr; }
  .mk-sec { padding-top: 36px; }
  .mk-cats { grid-auto-columns: 96px; gap: 12px; }
  .mk-cat { font-size: .82rem; }
  .mk-rail-track { grid-auto-columns: 46%; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .mk-arrow { display: none; }
  .mk-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .mk-shops { grid-template-columns: 1fr; }
  .mk-band-soft { margin-top: 36px; padding-bottom: 36px; }
}
/* Home on phones: the header already lists the categories, so no chip row; shorter cards before the products (root-ef, lane P) */
@media (max-width: 860px) {
  .mk-side { display: none; }
  .mk-slide .btn-lg { padding: 12px 18px; font-size: .92rem; white-space: nowrap; }
  .mk-aside { gap: 10px; }
  .mk-sell { display: none; }
  .mk-card { padding: 14px 16px; }
  .mk-hello p { display: none; }
}
.mk-slide { min-width: 0; } .mk-slide > * { min-width: 0; }
.mk-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .mk-collage { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mk-slide .hero-cta { gap: 8px; } }
@media (max-width: 400px) { .mk-slide .btn-lg { padding: 11px 14px; font-size: .88rem; } }
@media (max-width: 400px) { .mk-slide .btn-lg { white-space: normal; flex: 1 1 0; text-align: center; } }

/* Saved products: price at saving + drop, add to basket, remove, no-longer-on-sale block (root-ef, lane D) */
.wl-tools { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; margin: 8px 0 20px; }
.wl-tools p { margin: 0; }
.wl-sort { margin: 0; }
.wl-drop-note { color: var(--ok); }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.wl-item { display: grid; grid-template-columns: 150px 1fr; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: #fff; }
.wl-img { position: relative; display: block; align-self: start; }
.wl-img img { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; background: var(--img-bg); }
.wl-img .tag-sale { position: absolute; top: 8px; inset-inline-start: 8px; }
.wl-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.wl-name { font-weight: 600; color: var(--ink); }
.wl-drop { color: var(--ok); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.wl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wl-actions form { margin: 0; }
.wl-actions .btn { padding: 8px 16px; font-size: .88rem; }
.wl-gone-title { font-size: 1.1rem; margin: 36px 0 12px; }
.wl-gone .wl-item { background: var(--soft); }
.wl-gone img { filter: grayscale(1); opacity: .6; }
@media (max-width: 520px) {
  .wl-item { grid-template-columns: 96px 1fr; gap: 12px; padding: 12px; }
  .wl-img img { width: 96px; height: 96px; }
}

/* Order steps (tracking page + account order page): ordered > confirmed > prepared > shipped > delivered, with dates (root-ef, lane D) */
.steps { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: st; }
.steps li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: .82rem; color: var(--muted); }
.steps li::before { content: ""; position: absolute; top: 13px; inset-inline-start: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.steps li:first-child::before { display: none; }
.steps li.done::before { background: var(--ok); }
.steps-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--line); display: grid; place-items: center; color: #fff; }
.steps li.done .steps-dot { background: var(--ok); border-color: var(--ok); }
.steps li.now .steps-dot { box-shadow: 0 0 0 5px rgba(47, 122, 79, .18); }
.steps li.done .steps-name { color: var(--ink); font-weight: 600; }
.steps-date { font-size: .76rem; min-height: 1.2em; }
.steps-eta { display: flex; gap: 10px; align-items: center; background: var(--soft); border-radius: 10px; padding: 10px 14px; margin: 12px 0 0; }
.steps-eta .ic { color: var(--ok); flex: none; }
.steps-eta.late { background: #FCEDEB; color: var(--bad); }
.steps-eta.late .ic { color: var(--bad); }
.steps-stop { background: #F1F0EE; border-radius: 10px; padding: 10px 14px; color: var(--muted); }
.trk-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.trk-head p { margin: 0; }
.trk-parcel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.trk-items { display: grid; gap: 10px; margin: 14px 0; }
.trk-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.trk-item img, .trk-item .ord-noimg { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--img-bg); }
.trk-item .track-items { margin: 0; padding: 0; }
.trk-steps-box { margin: 12px 0 18px; }
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; gap: 0; justify-items: stretch; }
  .steps li { grid-template-columns: 28px 1fr auto; justify-items: start; align-items: center; text-align: start; gap: 12px; padding: 6px 0; }
  .steps li::before { top: -50%; inset-inline-start: 12.5px; width: 3px; height: 100%; }
}

/* All shops directory /stores (root-ef, lane D) */
.st-head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; }
.st-head p { margin: 0; }
.st-search { flex: 0 1 420px; }
.st-filters { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 22px 0 20px; }
.st-filters .chips { margin: 0; }
.st-sort { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--muted); }
.st-sort select { border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; background: #fff; color: var(--ink); }
.st-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.st-thumbs { grid-template-columns: repeat(4, 1fr); }
.st-badges { display: flex; gap: 6px; flex-wrap: wrap; min-height: 0; }
.st-badges:empty { display: none; }
@media (max-width: 860px) { .st-filters .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .st-filters .chips a { white-space: nowrap; } }
.st-search { min-width: 0; } .st-search input { min-width: 0; flex: 1; } .st-head > div { min-width: 0; }
@media (max-width: 860px) { .st-search { flex: 1 1 100%; } .st-filters { flex-direction: column; align-items: stretch; } }
.mk-arrow[hidden] { display: none; }

/* Category / search / gift lists: full width, side column with categories + filters, chips of filters in use (root-ef, lane P2) */
.ls-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.ls-side { position: sticky; top: 130px; max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; display: grid; gap: 18px; }
.ls-cats h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.ls-cats ul { list-style: none; margin: 0; padding: 0; }
.ls-cats ul ul { margin: 2px 0 6px; padding-inline-start: 34px; }
.ls-cats a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: .93rem; color: var(--ink); }
.ls-cats ul ul a { padding: 6px 10px; font-size: .88rem; color: var(--muted); }
.ls-cats a:hover { background: var(--soft); text-decoration: none; }
.ls-cats a.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ls-cats .ic { color: var(--brand); flex: none; }
.ls-side .filters { margin: 0; }
.ls-main { min-width: 0; }
.ls-main .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ls-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.ls-chip { display: inline-flex; gap: 8px; align-items: center; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 500; }
.ls-chip:hover { text-decoration: none; background: #d9e0f1; }
.ls-chip span { font-size: 1.1rem; line-height: 1; }
.ls-clear { font-size: .85rem; text-decoration: underline; }
@media (min-width: 1000px) {
  .ls-side .filters > summary { pointer-events: none; list-style: none; font-weight: 600; }
  .ls-side .filters > summary::-webkit-details-marker { display: none; }
}
@media (max-width: 999px) {
  .ls-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ls-side { position: static; max-height: none; overflow: visible; }
  .ls-cats { display: none; }
  .ls-main .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 760px) { .ls-main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Seller shop page: storefront band (cover or brand colours) + side column with the shop's categories and search (root-ef, lane S) */
.sf { margin-bottom: 8px; }
.sf .shop-cover { width: 100%; height: auto; aspect-ratio: 5 / 1; object-fit: cover; border-radius: 18px; margin: 0 0 -36px; }
.sf .shop-head { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; margin: 0 clamp(0px, 2vw, 28px) 14px; box-shadow: var(--shadow); align-items: center; }
.sf-plain .shop-head { margin-inline: 0; background: radial-gradient(120% 160% at 100% 0, #1790C9 0, #17307A 60%, #0F2257 100%); border: 0; color: #fff; }
.sf-plain .shop-head .page-title, .sf-plain .shop-head .lead, .sf-plain .shop-head .shop-facts, .sf-plain .shop-head .shop-facts span, .sf-plain .shop-head .muted { color: #fff; }
.sf-plain .shop-head .lead { opacity: .85; }
.sf-plain .shop-head .ic { color: #8FD3F2; }
.sf-plain .shop-head .shop-avatar { background: #fff; color: var(--brand); }
.sf-plain .shop-msg { background: #fff; color: var(--brand); border-color: #fff; }
.sf .shop-follow { margin-inline: clamp(0px, 2vw, 28px) !important; }
.ls-n { margin-inline-start: auto; font-size: .78rem; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 1px 8px; }
.ls-cats a.on .ls-n { background: #fff; }
.ls-side .shop-search { margin: 0; max-width: none; }
.ls-side .shop-search-clear { margin: -8px 0 0; }
@media (max-width: 999px) {
  .ls-side .ls-cats { display: block; }
  .ls-side .ls-cats h2 { display: none; }
  .ls-side .ls-cats > ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .ls-side .ls-cats > ul > li > a { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
}
@media (max-width: 760px) { .sf .shop-cover { aspect-ratio: 3 / 1; margin-bottom: 10px; } .sf .shop-head { margin-inline: 0; padding: 18px; } }
.ls-side, .ls-side > * { min-width: 0; }
.ls-side .shop-search .btn { padding: 7px 12px; font-size: .82rem; flex: none; }
/* Product page, wide (lane T root-b5): photos | buy box that stays in view | the rest under the photos; seller card; zoom */
.pdp-page .crumbs { margin-top: 4px; }
.pdp-info { min-width: 0; }
.pdp-seller { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; }
.pdp-seller-top { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.pdp-seller-top .shop-avatar { width: 52px; height: 52px; font-size: 1.5rem; flex: none; }
.pdp-seller-id { display: grid; gap: 2px; min-width: 0; }
.pdp-seller-id strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.pdp-seller-top:hover strong { color: var(--accent); }
.pdp-seller-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-seller-acts form { margin: 0; }
.gallery-main img { transition: transform .12s ease-out; }
.gallery-main.zoom img { transform: scale(2.2); }
.photo-viewer img { cursor: zoom-in; transition: transform .15s ease-out; }
.photo-viewer img.pv-zoomed { transform: scale(2.4); cursor: zoom-out; touch-action: none; }
@media (min-width: 761px) {
  .pdp-page .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); grid-template-areas: "g b" "i b"; column-gap: 40px; row-gap: 28px; }
  .pdp-page .gallery { grid-area: g; position: static; }
  .pdp-page .buy { grid-area: b; position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 4px; }
  .pdp-page .pdp-info { grid-area: i; }
  .pdp-page .buy .perks { margin-bottom: 4px; }
}
@media (min-width: 1100px) {
  /* Photo column no wider than the photo can be (screen height), so no empty band on very wide screens */
  .pdp-page .pdp { grid-template-columns: minmax(0, calc(100vh - 52px)) minmax(380px, 560px); column-gap: 56px; justify-content: center; }
  /* Photos beside a column of small photos, as high as the screen allows */
  .pdp-page .gallery:has(.thumbs) { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .pdp-page .gallery > * { grid-column: -2; }
  /* As high as the big photo (the row's height), scrolling inside when there are more */
  .pdp-page .gallery .thumbs { grid-column: 1; grid-row: 1; align-self: stretch; height: 0; min-height: 100%; flex-direction: column; margin-top: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
  .pdp-page .gallery-main { aspect-ratio: 1; max-height: calc(100vh - 150px); }
  .pdp-page .gallery-main img { object-fit: contain; }
  .pdp-page .pdp-info { max-width: 900px; }
}

/* Basket + checkout: steps, basket in two columns grouped by shop, trust list (root-ef, lane U) */
.co-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--muted); }
.co-steps li { display: inline-flex; align-items: center; gap: 8px; }
.co-steps li + li::before { content: ""; width: 28px; height: 2px; background: var(--line); margin-inline-end: 8px; }
.co-steps li.done + li::before, .co-steps li.now::before { background: var(--ok); }
.co-steps a { color: inherit; }
.co-n { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; }
.co-steps li.done .co-n { background: var(--ok); border-color: var(--ok); color: #fff; }
.co-steps li.now { color: var(--ink); font-weight: 600; }
.co-steps li.now .co-n { border-color: var(--ink); background: var(--ink); color: #fff; }
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.co-layout > .co-side { background: none; padding: 0; position: sticky; top: 120px; display: grid; gap: 14px; }
.co-layout > .co-side .totals { margin: 0; }
.co-sum-title { font-size: 1.05rem; margin: 0 0 8px; }
.co-shop { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px 0; margin-bottom: 16px; background: #fff; }
.co-shop .lines { border-top: 0; }
.co-shop .line:last-child { border-bottom: 0; }
.co-shop-name { display: flex; gap: 8px; align-items: center; font-size: .95rem; margin: 12px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.co-shop-name .ic { color: var(--brand); }
.co-line-acts { display: flex; gap: 16px; margin-top: 4px; }
.co-line-acts .linkish { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); }
.co-trust { list-style: none; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 10px; font-size: .86rem; }
.co-side .co-trust { margin-top: 14px; background: #fff; }
.co-trust li { display: flex; gap: 10px; align-items: center; }
.co-trust .ic { color: var(--ok); flex: none; }
.mini-line { display: grid !important; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.mini-line img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--img-bg); }
@media (max-width: 900px) {
  .co-layout { grid-template-columns: minmax(0, 1fr); }
  .co-layout > .co-side { position: static; }
  .co-shop { padding: 2px 12px 0; }
}
@media (max-width: 600px) {
  .co-steps { font-size: .8rem; gap: 4px; }
  .co-steps li + li::before { width: 14px; margin-inline-end: 4px; }
  .co-shop .line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img main main" "img qty total"; gap: 8px 12px; }
  .co-shop .line img { grid-area: img; width: 64px; height: 64px; }
  .co-shop .line .line-main { grid-area: main; }
  .co-shop .line select { grid-area: qty; justify-self: start; }
  .co-shop .line .line-total { grid-area: total; align-self: center; }
  .co-line-acts { flex-wrap: wrap; gap: 4px 14px; }
}

/* Header search suggestions (root-ef, lane V) */
.site-head .search { overflow: visible; }
.sg-box { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(20, 20, 20, .14); padding: 8px; max-height: min(70vh, 560px); overflow-y: auto; text-align: start; }
.sg-box[hidden] { display: none; }
.sg-sec { padding: 4px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.sg-sec:last-of-type { border-bottom: 0; }
.sg-head { flex-basis: 100%; display: flex; justify-content: space-between; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 4px 8px; }
.sg-head .linkish { font-size: .75rem; text-transform: none; letter-spacing: 0; }
.sg-item { color: var(--ink); text-decoration: none !important; border-radius: 10px; }
.sg-chip { display: inline-block; padding: 6px 12px; background: var(--soft); border-radius: 999px; font-size: .88rem; }
.sg-prod { flex-basis: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; font-size: .9rem; }
.sg-prod img, .sg-noimg { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--img-bg); }
.sg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-price { font-weight: 600; white-space: nowrap; }
.sg-all { flex-basis: 100%; display: block; padding: 10px 8px; font-size: .9rem; color: var(--brand); }
.sg-item:hover, .sg-item.on { background: var(--brand-soft); }
.sg-none { margin: 6px 8px; color: var(--muted); font-size: .88rem; }
/* Product reviews (lane W root-b5): bars that filter, customer photos, with-photos + sort */
.rv-top { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: flex-start; }
.star-bars li > a { display: contents; color: inherit; text-decoration: none; }
.star-bars li:has(> a):hover span:first-child, .star-bars li.on span:first-child { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.star-bars li.on .bar { outline: 2px solid var(--accent); outline-offset: 1px; }
.rv-photos { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; margin-bottom: 18px; }
.rv-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--img-bg); display: block; }
.rv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 14px; padding: 10px 0; border-block: 1px solid var(--line); }
.rv-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.rv-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; }
.rv-sort select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: #fff; color: var(--ink); font: inherit; }
.rv-top .star-bars { flex: 1 1 300px; width: 100%; max-width: 380px; }
.rv-top .star-bars li { grid-template-columns: 88px 1fr 28px; }
.star-bars li > a > span:last-child { text-align: end; }

/* Product cards: save heart on the photo + shop name (root-ef, lane Y) */
.card-box { position: relative; min-width: 0; display: flex; flex-direction: column; }
.card-box > .card { flex: 1; }
.card-wish-f { position: absolute; top: 8px; inset-inline-end: 8px; margin: 0; z-index: 2; }
.card-wish { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); transition: transform .12s; }
.card-wish:hover { transform: scale(1.08); }
.card-wish.on { color: #D93A4A; }
.card-wish.on svg { fill: currentColor; }
.card-shop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Deals page (root-ef, lane AA) */
.dl-pct { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #B3261E; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.dl-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.dl-code { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px dashed var(--brand); border-radius: var(--radius); padding: 14px 16px; background: var(--brand-soft); }
.dl-code p { margin: 2px 0 0; }
.dl-copy { flex: none; display: inline-flex; gap: 8px; align-items: center; border: 0; border-radius: 999px; background: var(--brand); color: #fff; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.dl-copy code { font-family: ui-monospace, monospace; letter-spacing: .05em; }
.cat-nav-in .nav-extra { color: var(--brand); font-weight: 600; }
.cat-nav-in .nav-extra:first-of-type { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.site-head .search { min-width: 0; }
.stack > *, .field input, .field select, .field textarea { min-width: 0; }
/* Newsletter on narrow phones: the grid column may shrink below the email box's 200 px (Arabic at 360 px scrolled 16 px sideways) (root-ef) */
.news-in > * { min-width: 0; }
@media (max-width: 420px) { .news-form input[type=email] { min-width: 0; flex-basis: 100%; } .news-form .btn { flex: 1; } }
/* Order page from the emails (root-b5): lines by shop, dates, return deadline, review buttons */
.trk-shop { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.trk-shop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 6px; }
.trk-shop-head a { display: inline-flex; align-items: center; gap: 5px; }
.trk-return { display: flex; align-items: center; gap: 8px; background: var(--soft, #F6F3EE); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.trk-review { margin-top: 6px; }

/* Lane AC (root-q7, 2026-10-27): questions and answers under a product */
.qa .qa-list { display: grid; gap: 14px; margin: 10px 0 14px; max-width: 860px; }
.qa-item { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.qa-item p { margin: 0 0 6px; overflow-wrap: anywhere; }
.qa-q, .qa-a { display: flex; gap: 10px; align-items: flex-start; }
.qa-tag { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 700; }
.qa-tag.a { background: var(--soft, #F6F3EE); color: var(--ink); border: 1px solid var(--line); }
.qa-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; max-width: 560px; }
.qa-search input { flex: 1 1 200px; min-width: 0; }
.qa-mine { display: flex; gap: 8px; align-items: center; background: var(--soft, #F6F3EE); border-radius: 10px; padding: 9px 12px; max-width: 860px; }
.qa-ask { max-width: 640px; margin-top: 10px; }
.qa-ask textarea { width: 100%; box-sizing: border-box; }

/* Lane AG (root-q7, 2026-10-27): codes that work on this product, under the price */
.pdp-offers { border: 1px dashed var(--accent); background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 8px; }
.pdp-offer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pdp-offer > svg { flex: 0 0 auto; color: var(--accent); }
.pdp-offer-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pdp-offer .dl-copy { flex: 0 0 auto; }
.pdp-offers > p { margin: 0; }
@media (max-width: 520px) { .pdp-offer { flex-wrap: wrap; } .pdp-offer-txt { flex-basis: calc(100% - 28px); } .pdp-offer .dl-copy { margin-inline-start: 28px; } }

/* lane AH (root-58): product description tidied by App\Support\Seo: small titles + characteristics as a list */
.desc p { margin: 0 0 8px; line-height: 1.55; }
.desc .desc-h { font-weight: 700; margin: 18px 0 6px; color: var(--ink, #1d1b18); }
.desc-pairs { margin: 4px 0 14px; border-top: 1px solid var(--line); }
.desc-pairs > div { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.desc-pairs dt { color: #6b665f; font-size: .92em; }
.desc-pairs dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .desc-pairs > div { grid-template-columns: minmax(90px, 40%) 1fr; gap: 10px; } }

/* lane AK: size guide link + dialog on the product page (root-44) */
.sg-link-row { margin: 6px 0 4px; }
.sg-open { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sg-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); border: 0; border-radius: var(--radius); padding: 18px 18px 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.sg-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.sg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sg-head h2 { margin: 0; font-size: 1.2rem; }
.sg-close { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; min-width: 44px; min-height: 44px; }
.sg-table-wrap { overflow-x: auto; margin: 8px 0; }
.sg-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.sg-table th, .sg-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: center; white-space: nowrap; }
.sg-table thead th { background: var(--brand-soft); font-weight: 600; }
.sg-table tbody th { font-weight: 700; }
.sg-table thead small { font-weight: 400; color: var(--muted); }
.sg-table tr.sg-picked th, .sg-table tr.sg-picked td { background: #FFF4D6; }
.sg-measure { font-size: .9rem; margin: 6px 0; }
@media (max-width: 480px) { .sg-dialog { padding: 14px 12px 10px; } .sg-table { font-size: .85rem; } .sg-table th, .sg-table td { padding: 7px 5px; } .sg-table thead th { white-space: normal; } .sg-table thead small { display: block; } }

/* lane BA (root-c5): shop message between cover and card. The cover's -36px bottom margin is meant for the card;
   with a message it slid under the cover edge (dark covers made it unreadable). The message now takes the card's place. */
.sf .shop-cover + .shop-announce { position: relative; z-index: 1; margin: 0 clamp(0px, 2vw, 28px) 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
/* lane BF (root-7d): Christmas season. Gifts bar + category chips on the gifts page, 'order by' line on cards and the
   product page, home band with the last days to order. Red kept for Christmas only, on the brand's light surfaces. */
:root { --xmas: #B3261E; --xmas-soft: #FBECEA; }
.xmas-bar { display: flex; gap: 12px; align-items: center; background: var(--xmas-soft); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 14px; }
.xmas-bar .ic { color: var(--xmas); flex: none; }
.xmas-bar p { margin: 0; }
.xmas-bar a { font-weight: 600; white-space: nowrap; }
.chips.chips-cats { margin-top: -16px; }
.chips.chips-cats a { padding: 6px 12px; font-size: .85rem; }
.chips a.on .muted { color: rgba(255, 255, 255, .7); }
.eta.xmas-eta { color: var(--xmas); font-weight: 600; }
.eta.xmas-eta .ic { color: var(--xmas); }
.eta-box .xmas-line { display: flex; gap: 6px; align-items: center; margin-top: 4px; color: var(--xmas); font-weight: 600; }
.eta-box .xmas-line.late { color: var(--muted); font-weight: 400; }
.xmas-band { display: flex; gap: 18px; align-items: center; background: var(--xmas-soft); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 18px; }
.xmas-ico { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--xmas); }
.xmas-txt { flex: 1; min-width: 0; }
.xmas-txt h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 1.7rem; }
.xmas-txt p { margin: 0; }
.xmas-dates { list-style: none; margin: 6px 0; padding: 0; display: flex; gap: 6px 22px; flex-wrap: wrap; }
.xmas-dates strong { color: var(--xmas); }
.xmas-band .btn { flex: none; }
@media (max-width: 700px) {
  .xmas-band { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .xmas-ico { width: 44px; height: 44px; }
  .xmas-band .btn { width: 100%; text-align: center; }
  .xmas-bar { align-items: flex-start; }
}
@media (max-width: 700px) { .xmas-ico { display: none; } .xmas-txt h2 { font-size: 1.45rem; } }

/* lane BI: product price and delivery shown apart */
.price-split{display:block}
.price-split[hidden]{display:none}