/* BOSSTECH storefront. Colours and fonts live in :root. */
:root {
  --ink: #0F0E14; --ink-2: #2A2530; --muted: #6B6570;
  --paper: #F7F5F2; --surface: #fff; --line: #E7E1DA;
  --copper: #A9552F; --copper-lt: #E8A877; --mocha: #4A2C20; --slate: #4D5C80;
  --sand: #EEE3D6; --mist: #E6EBF2; --blush: #F4E4DA; --sage: #E4EAE1;
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
  --head: "Alexandria", "Segoe UI", Tahoma, sans-serif;
  --body: "IBM Plex Sans Arabic", "Alexandria", "Segoe UI", Tahoma, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --steam: #BBAA9A;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.65 var(--body); overflow-x: clip; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; border-radius: 6px; }
.wrap { width: min(1320px, 100% - 48px); margin-inline: auto; }
.skip { position: fixed; inset-block-start: -60px; inset-inline-start: 16px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { inset-block-start: 10px; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.800; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.arrow { display: inline-block; width: 9px; height: 9px; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); }
[dir="rtl"] .arrow { transform: rotate(-45deg); }
.arrow--back { transform: rotate(-135deg); }
[dir="rtl"] .arrow--back { transform: rotate(135deg); }
.art { width: 100%; height: 100%; display: block; overflow: visible; }

/* Scroll progress and top strips */
.progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, var(--copper), var(--copper-lt)); transform: scaleX(var(--p, 0)); transform-origin: left; z-index: 120; }
.preview-strip { background: #FFF1C9; color: #5B4300; text-align: center; font-size: 13px; padding: 5px 16px; }
.ticker { background: var(--ink); color: #EFE7DE; font-size: 13px; overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: slide 36s linear infinite; }
.ticker__track span { padding: 8px 28px; white-space: nowrap; position: relative; }
.ticker__track span::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--copper-lt); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Header */
.header { position: sticky; inset-block-start: 0; z-index: 60; background: rgba(247, 245, 242, .88); backdrop-filter: blur(14px); border-block-end: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.header.is-stuck { border-color: var(--line); box-shadow: 0 8px 30px -22px rgba(15, 14, 20, .5); }
.header__row { display: grid; grid-template-columns: auto minmax(200px, 1fr) auto auto; gap: 22px; align-items: center; padding-block: 14px 10px; }
.logo { display: inline-flex; align-items: center; gap: 2px; font: 800 24px/1 var(--head); letter-spacing: .02em; }
.logo span:last-child { font-weight: 400; color: var(--copper); }
.logo__mark { width: 11px; height: 26px; border-radius: 3px; background: linear-gradient(180deg, var(--copper-lt), var(--copper)); margin-inline-end: 8px; }
.logo--light { color: #fff; }
.logo--light span:last-child { color: var(--copper-lt); }

.search { position: relative; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; height: 48px; transition: border-color .25s, box-shadow .25s; }
.search:focus-within { border-color: var(--copper); box-shadow: 0 0 0 4px rgba(169, 85, 47, .12); }
.search .ico { color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 100%; }
.search input::-webkit-search-cancel-button { display: none; }
.search__results { position: absolute; inset-block-start: calc(100% + 10px); inset-inline: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 30px 60px -28px rgba(15, 14, 20, .45); padding: 8px; z-index: 70; max-height: 380px; overflow: auto; text-align: start; animation: pop .22s var(--ease); }
.search__results button { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 12px; text-align: start; }
.search__results button:hover, .search__results button.is-sel { background: var(--paper); }
.search__results .thumb { width: 52px; height: 52px; border-radius: 10px; flex: none; padding: 4px; overflow: hidden; }
.search__results b { display: block; font-weight: 500; }
.search__results small { color: var(--muted); }
.search__results p { padding: 14px; color: var(--muted); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }

.city { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.city__txt { display: grid; line-height: 1.2; }
.city small { font-size: 11px; color: var(--muted); }
.city select { border: 0; background: none; font-weight: 600; font-size: 14px; cursor: pointer; max-width: 130px; padding: 0; outline-offset: 2px; }
.header__actions { display: flex; align-items: center; gap: 6px; }
.pill-btn { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.pill-btn:hover { background: var(--ink); color: #fff; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: background .2s; }
.icon-btn:hover { background: var(--sand); }
.count { position: absolute; inset-block-start: 2px; inset-inline-end: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--copper); color: #fff; font: 600 11px/19px var(--head); text-align: center; }
.count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }
.catnav { display: flex; gap: 6px; padding-block-end: 10px; overflow-x: auto; scrollbar-width: none; }
.catnav::-webkit-scrollbar { display: none; }
.catnav a { position: relative; white-space: nowrap; padding: 6px 12px; font-size: 14px; font-weight: 500; color: var(--ink-2); border-radius: 999px; transition: background .2s; }
.catnav a:hover { background: var(--sand); }
.catnav a.is-strong { font-weight: 600; color: var(--copper); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 2.300fr) minmax(0, 1fr); gap: 18px; padding-block: 16px 22px; }
.slider { position: relative; height: clamp(440px, 66vh, 590px); border-radius: var(--r-lg); overflow: hidden; background: #1A100C; color: #fff; --steam: #fff; }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.050fr 1fr; align-items: center; padding: clamp(28px, 4.500vw, 64px); gap: 12px; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.slide--espresso { background: radial-gradient(90% 120% at 22% 30%, #8C4F2F 0%, #4A2616 45%, #1A0F0B 100%); }
.slide--midnight { background: radial-gradient(90% 120% at 22% 30%, #55648B 0%, #27304C 48%, #0F1220 100%); }
.slide--copper { background: radial-gradient(90% 120% at 22% 30%, #D98E5E 0%, #A5532C 50%, #4E2413 100%); }
[dir="rtl"] .slide--espresso, [dir="rtl"] .slide--midnight, [dir="rtl"] .slide--copper { background-position: center; }
.slide__txt > * { opacity: 0; transform: translateY(26px); }
.slide.is-active .slide__txt > * { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.slide.is-active .slide__txt > :nth-child(2) { transition-delay: .1s; }
.slide.is-active .slide__txt > :nth-child(3) { transition-delay: .2s; }
.slide.is-active .slide__txt > :nth-child(4) { transition-delay: .3s; }
.eyebrow { display: inline-block; font: 600 13px/1.4 var(--head); letter-spacing: .04em; color: var(--copper); }
.slider .eyebrow { color: #F4C6A0; }
.slide__h { font-size: clamp(30px, 4vw, 56px); margin-block: 12px 14px; font-weight: 800; }
.slide p { max-width: 44ch; color: rgba(255, 255, 255, .84); font-size: clamp(15px, 1.300vw, 18px); }
.slide .btn { margin-block-start: 26px; }
.slide__art { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; transform: translate(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 12px)); transition: transform .4s ease-out; }
.slide__art::before { content: ""; position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); animation: breathe 5s ease-in-out infinite; }
.slide__art .art { position: relative; max-height: 100%; opacity: 0; transform: translateY(50px) scale(.86) rotate(-3deg); }
.slide.is-active .slide__art .art { opacity: 1; transform: none; transition: opacity .9s var(--ease) .1s, transform 1.100s var(--ease) .1s; }
@keyframes breathe { 50% { transform: scale(1.12); } }
.slider__bars { position: absolute; inset-block-end: 22px; inset-inline-start: clamp(28px, 4.500vw, 64px); display: flex; gap: 8px; z-index: 3; }
.slider__bars button { width: 52px; height: 24px; display: grid; align-items: center; }
.slider__bars span { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.slider__bars i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: var(--origin, left); }
[dir="rtl"] .slider__bars i { --origin: right; }
.slider__bars .is-active i { animation: fillbar 6.500s linear forwards; }
.slider.is-paused .slider__bars .is-active i { animation-play-state: paused; }
@keyframes fillbar { to { transform: scaleX(1); } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; font: 600 15px/1 var(--head); background: var(--ink); color: #fff; transition: transform .25s var(--ease), background .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(15, 14, 20, .7); }
.btn:hover .arrow { transform: translateX(3px) rotate(45deg); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-3px) rotate(-45deg); }
.btn--light { background: #fff; color: var(--ink); }
.btn--copper { background: var(--copper); }
.btn--block { width: 100%; }
.btn--wa { background: #1B7A4B; }
.wa-fab { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 70; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #1B7A4B; color: #fff; box-shadow: 0 14px 30px -12px rgba(15, 14, 20, .6); transition: transform .25s var(--ease); }
.wa-fab:hover { transform: scale(1.08); }
.wa-fab .ico { width: 28px; height: 28px; }
@media (max-width: 900px) { .wa-fab { inset-block-end: 80px; inset-inline-end: 16px; width: 52px; height: 52px; } }

.side-promo { position: relative; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(170deg, #F2E6D8, #D7C7B7); padding: 28px; display: flex; flex-direction: column; min-height: 320px; isolation: isolate; }
.side-promo h2 { font-size: clamp(22px, 2vw, 30px); margin-block: 8px 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--head); }
.side-promo__art { flex: 1; min-height: 0; margin-block-start: 8px; transition: transform .7s var(--ease); }
.side-promo:hover .side-promo__art { transform: translateY(-8px) scale(1.04); }
.side-promo__orb { position: absolute; z-index: -1; inset-block-end: -18%; inset-inline-end: -16%; width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent); animation: breathe 6s ease-in-out infinite; }

/* Trust */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.trust div { display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-inline-end: 1px solid var(--line); }
.trust div:last-child { border: 0; }
.trust .ico { width: 30px; height: 30px; color: var(--copper); }
.trust b { display: block; font: 600 14px/1.4 var(--head); }
.trust small { color: var(--muted); }

/* Finder */
.finder { padding-block: 64px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; overflow: clip; }
.finder__center { text-align: center; position: relative; z-index: 5; }
.finder h2 { font-size: clamp(26px, 3.400vw, 44px); margin-block: 6px 22px; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ring { position: relative; max-width: 640px; margin-inline: auto; padding: 3px; border-radius: 999px; background: conic-gradient(from var(--angle), #E8A877, #A9552F, #4D5C80, #D7C7B7, #E8A877); animation: spin 5s linear infinite; }
.ring::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: inherit; filter: blur(16px); opacity: .55; }
@keyframes spin { to { --angle: 360deg; } }
.search--big { height: 62px; border: 0; padding-inline: 24px; font-size: 17px; }
.search--big:focus-within { box-shadow: none; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 20px; }
.chips a { padding: 7px 16px; font-size: 14px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; transition: background .2s, color .2s, transform .2s; }
.chips a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: slide 46s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.tile { width: clamp(130px, 13vw, 180px); aspect-ratio: 1; border-radius: var(--r-md); padding: 14px; flex: none; }
.tile img { width: 100%; height: 100%; object-fit: contain; }
.marquee .steam, .marquee .pour, .marquee .pulse { animation: none; }
.tone-sand { background: var(--sand); } .tone-mist { background: var(--mist); } .tone-blush { background: var(--blush); } .tone-sage { background: var(--sage); }

/* Sections */
.section { padding-block: 44px; }
.section__head { display: flex; justify-content: space-between; align-items: center; margin-block-end: 22px; gap: 16px; }
.section__head h2 { font-size: clamp(24px, 2.600vw, 36px); }
.round-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 22px; line-height: 1; transition: background .2s, color .2s; }
.round-btn:hover { background: var(--ink); color: #fff; }
.rail-ctrl { display: flex; gap: 8px; }

.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat { position: relative; overflow: hidden; border-radius: var(--r-md); padding: 22px; min-height: 290px; display: flex; flex-direction: column; justify-content: space-between; }
.cat h3 { font-size: clamp(17px, 1.500vw, 22px); position: relative; z-index: 2; }
.cat__art { position: absolute; inset-block-end: -6%; inset-inline: 12%; aspect-ratio: 1; transition: transform .7s var(--ease); }
.cat:hover .cat__art { transform: translateY(-14px) scale(1.06); }

/* Product cards */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 64px) / 5)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 8px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 16px; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__media { position: relative; width: 100%; display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; padding: 11%; cursor: pointer; }
.card__media .art, .card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease); }
.card:hover .card__media .art, .card:hover .card__media img { transform: scale(1.08) translateY(-4px); }
.badge { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12px/1.6 var(--head); pointer-events: none; }
.fav { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .86); transition: transform .25s var(--ease); }
.fav:hover { transform: scale(1.12); }
.fav .ico { width: 19px; height: 19px; }
.fav.is-on { color: var(--copper); }
.fav.is-on .ico { fill: currentColor; animation: bump .4s var(--ease); }
.card__body { padding: 12px 4px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__name { font: 500 15px/1.45 var(--head); text-align: start; cursor: pointer; }
.card__name:hover { color: var(--copper); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: auto; }
.price { font: 700 17px/1.2 var(--head); }
.price small { font-size: 12px; font-weight: 500; }
.price s { display: block; font: 400 13px var(--body); color: var(--muted); }
.add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px var(--head); transition: background .25s, transform .2s; white-space: nowrap; flex: none; }
.add:hover { background: var(--copper); }
.add:active { transform: scale(.94); }
.add .ico { width: 19px; height: 19px; }
.add.is-done { background: #2F6B48; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 270px); gap: 16px; }
.promo { position: relative; overflow: hidden; border-radius: var(--r-md); padding: 26px; display: block; isolation: isolate; }
.promo h3 { font-size: clamp(19px, 1.800vw, 26px); max-width: 15ch; }
.promo p { font-size: 14px; margin-block: 6px 12px; max-width: 24ch; opacity: .82; }
.promo__art { position: absolute; z-index: -1; inset-block-end: -8%; inset-inline-end: -4%; width: 58%; aspect-ratio: 1; transition: transform .8s var(--ease); }
.promo:hover .promo__art { transform: translateY(-10px) scale(1.07) rotate(-2deg); }
.promo--big { grid-column: span 2; grid-row: span 2; background: radial-gradient(90% 100% at 80% 90%, #9B5A37, #3B2015 70%); color: #fff; padding: clamp(26px, 3vw, 44px); --steam: #fff; }
.promo--big h3 { font-size: clamp(28px, 3.400vw, 48px); font-weight: 800; }
.promo--big p { font-size: 16px; }
.promo--big .promo__art { width: 66%; }
.promo--mist { background: var(--mist); }
.promo--sage { background: var(--sage); }
.promo--mist, .promo--sage { grid-column: 3; }
.promo--tall { grid-column: 4; grid-row: 1 / span 2; background: linear-gradient(180deg, #F3DCCB, #E2B494); }
.promo--tall .promo__art { width: 104%; inset-inline-end: -2%; inset-block-end: 2%; }

.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-block-end: 24px; padding-block: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { padding: 9px 20px; min-height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; font-size: 14px; white-space: nowrap; transition: background .25s, color .25s; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* FAQ, CTA, footer */
.faq-wrap { max-width: 880px; }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; font: 600 16px/1.5 var(--head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 16px; height: 16px; flex: none; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; inset-block-start: 7px; inset-inline-start: 0; width: 16px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { padding-block-end: 18px; color: var(--ink-2); max-width: 66ch; animation: pop .3s var(--ease); }

.cta-wrap { padding-block: 22px 64px; }
.cta { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-lg); background: radial-gradient(70% 180% at 90% 0%, #A9552F, #1B1411 66%); color: #fff; }
.cta h2 { font-size: clamp(24px, 3vw, 40px); margin-block-end: 8px; }
.cta p { color: rgba(255, 255, 255, .84); max-width: 50ch; }

.footer { background: var(--ink); color: #D9D3CC; padding-block: 54px 28px; }
.footer__grid { display: grid; grid-template-columns: 1.600fr 1fr 1fr 1fr; gap: 32px; }
.footer__brand p { margin-block-start: 14px; max-width: 34ch; font-size: 14px; }
.footer h3 { color: #fff; font-size: 15px; margin-block-end: 12px; }
.footer li { padding-block: 4px; font-size: 14px; }
.footer a:hover { color: var(--copper-lt); }
.footer__pay { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; margin-block-start: 36px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, .13); font-size: 13px; }
.pay { display: flex; flex-wrap: wrap; gap: 6px; }
.pay span { padding: 4px 10px; font: 600 12px var(--head); background: #fff; color: var(--ink); border-radius: 6px; }

/* Mobile bottom nav */
.bottom-nav { display: none; }

/* Cart drawer */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(15, 14, 20, .5); opacity: 0; transition: opacity .3s; }
.scrim.is-open { opacity: 1; }
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(440px, 100%); z-index: 100; background: var(--surface); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--ease); }
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.is-open, [dir="rtl"] .drawer.is-open { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-block-end: 1px solid var(--line); }
.drawer__head h2 { font-size: 20px; }
.drawer__body { flex: 1; overflow: auto; padding: 16px 22px; }
.drawer__foot { padding: 16px 22px 22px; border-block-start: 1px solid var(--line); }
.drawer__empty { text-align: center; padding-block: 60px; color: var(--muted); }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding-block: 12px; border-block-end: 1px solid var(--line); }
.line__thumb { width: 76px; height: 76px; border-radius: 12px; padding: 6px; overflow: hidden; }
.line__thumb img { width: 100%; height: 100%; object-fit: contain; }
.line b { font: 500 14px/1.4 var(--head); display: block; }
.qty { display: inline-flex; align-items: center; gap: 2px; margin-block-start: 6px; border: 1px solid var(--line); border-radius: 999px; }
.qty button { width: 32px; height: 32px; font-size: 16px; }
.qty span { min-width: 22px; text-align: center; font-size: 14px; }
.line__rm { font-size: 12px; color: var(--muted); text-decoration: underline; min-height: 32px; }
.total { display: flex; justify-content: space-between; font: 700 18px var(--head); }
.drawer__foot small { display: block; color: var(--muted); margin-block: 2px 12px; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; overflow: auto; pointer-events: none; }
.modal__card { position: relative; pointer-events: auto; width: min(880px, 100%); background: var(--surface); border-radius: var(--r-lg); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .3s, transform .4s var(--ease); }
.modal.is-open .modal__card { opacity: 1; transform: none; }
.modal__art { padding: 34px; min-height: 340px; display: grid; place-items: center; }
.modal__art img { max-height: 420px; object-fit: contain; }
.modal__info { padding: 34px; display: flex; flex-direction: column; gap: 12px; }
.modal__info h2 { font-size: 26px; padding-inline-end: 44px; }
.modal__info ul { display: grid; gap: 6px; font-size: 15px; }
.modal__info li { display: flex; gap: 10px; align-items: baseline; }
.modal__info li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); flex: none; transform: translateY(-2px); }
.modal__info .price { font-size: 26px; margin-block-start: auto; padding-block-start: 10px; }
.modal__close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 2; }

.toast { position: fixed; inset-block-end: 26px; inset-inline-start: 50%; translate: -50% 0; z-index: 130; background: var(--ink); color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 14px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); max-width: calc(100% - 32px); text-align: center; }
[dir="rtl"] .toast { translate: 50% 0; }
.toast.is-on { opacity: 1; transform: none; }

/* Illustration life */
.steam { stroke: var(--steam); }
.steam path { stroke-dasharray: 12 60; animation: steam 3.400s ease-in-out infinite; opacity: 0; }
.steam path:nth-child(2) { animation-delay: .9s; }
.steam path:nth-child(3) { animation-delay: 1.800s; }
@keyframes steam { 0% { stroke-dashoffset: 0; opacity: 0; transform: translateY(14px); } 30% { opacity: .85; } 100% { stroke-dashoffset: -72; opacity: 0; transform: translateY(-18px); } }
.pour { stroke-dasharray: 10 8; animation: pour 1.100s linear infinite; }
@keyframes pour { to { stroke-dashoffset: -18; } }
.pulse path { animation: blink 2.400s ease-in-out infinite; }
.pulse path:nth-child(2) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .15; } }

/* Scroll reveal, only when JS is running */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1180px) {
  .header__row { grid-template-columns: auto 1fr auto; }
  .city { display: none; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .rail { grid-auto-columns: minmax(230px, 30%); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 16px; }
  .wrap { width: calc(100% - 32px); }
  body { padding-block-end: 66px; }
  .header { position: static; backdrop-filter: none; }
  .header__row { grid-template-columns: 1fr auto; gap: 10px; padding-block: 12px 8px; }
  .header .search { grid-column: 1 / -1; order: 3; }
  .logo { font-size: 21px; }
  .hero { grid-template-columns: 1fr; }
  .slider { height: 560px; }
  .slide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 26px 22px 54px; }
  .slider__bars { inset-inline-start: 22px; inset-block-end: 14px; }
  .side-promo { min-height: 0; display: grid; grid-template-columns: 1fr 42%; align-items: center; padding: 22px; gap: 8px; }
  .side-promo__art { aspect-ratio: 1; margin: 0; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust div { padding: 14px; gap: 10px; border: 0; }
  .finder { padding-block: 40px; gap: 22px; }
  .cats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat { min-height: 200px; padding: 16px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 20px 10px; }
  .rail { grid-auto-columns: 62%; gap: 10px; }
  .rail-ctrl { display: none; }
  .add__label { display: none; }
  .section { padding-block: 30px; }
  .story { height: 400vh; }
  .story__pin { padding-block: 20px 76px; }
  .story__grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 4px; }
  .story__text { height: auto; }
  .chapter__time { font-size: 52px; }
  .chapter p { margin-block-end: 12px; font-size: 15px; }
  .chapter .btn { min-height: 44px; }
  .story__timeline { font-size: 12px; padding-block: 12px 0; }
  .card__media { padding: 16%; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 270px; gap: 10px; }
  .promo { padding: 18px; }
  .promo--big { grid-column: span 2; grid-row: span 2; }
  .promo--mist, .promo--sage { grid-column: auto; }
  .promo--tall { grid-column: span 2; grid-row: auto; }
  .promo--tall .promo__art { width: 48%; inset-block-end: -8%; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .footer__brand { grid-column: 1 / -1; }
  .bottom-nav { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 80; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, .96); border-block-start: 1px solid var(--line); padding-block-end: env(safe-area-inset-bottom); }
  .bottom-nav a, .bottom-nav button { position: relative; display: grid; justify-items: center; gap: 1px; padding-block: 8px 6px; font-size: 11px; font-weight: 500; }
  .bottom-nav .count { inset-inline-end: calc(50% - 22px); inset-block-start: 3px; }
  .toast { inset-block-end: 80px; }
  .modal { align-items: end; padding: 0; }
  .modal__card { grid-template-columns: 1fr; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; overflow: auto; }
  .modal__art { min-height: 0; height: 250px; padding: 16px; display: flex; justify-content: center; flex: none; }
  .modal__art .art, .modal__art img { height: 100%; width: auto; aspect-ratio: 1; }
  .modal__info { padding: 20px 20px 26px; }
  .modal__info .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee__track, .ticker__track { animation: none; }
  .steam path { opacity: .5; }
}

/* ===== Real product photos, product page, checkout ===== */
.frame { width: min(100%, 460px); aspect-ratio: 1; max-height: 100%; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .65); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__art .frame { position: relative; opacity: 0; transform: translateY(40px) scale(.92); }
.slide.is-active .slide__art .frame { opacity: 1; transform: none; transition: opacity .9s var(--ease) .1s, transform 1.100s var(--ease) .1s; }
.scene .frame { width: auto; height: min(100%, 520px); }
.side-promo__art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tile { background: #fff; border: 1px solid var(--line); padding: 8px; overflow: hidden; }
.cats { grid-template-columns: repeat(5, 1fr); }
.cat { background: var(--surface); border: 1px solid var(--line); min-height: 280px; transition: box-shadow .35s, transform .35s var(--ease); }
.cat:hover { box-shadow: 0 24px 40px -28px rgba(15, 14, 20, .5); transform: translateY(-3px); }
.cat__art { inset-block-end: 6px; inset-inline: 10%; }
.cat__art img { width: 100%; height: 100%; object-fit: contain; }
.card__media { background: #fff; border: 1px solid var(--line); padding: 6%; }
.card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__name:hover { color: var(--copper); }
.price--soon { font: 500 14px/1.3 var(--head); color: var(--muted); }
.add--ask { background: #1B7A4B; } .add--ask:hover { background: #15603B; }
.add--off { background: var(--line); color: var(--muted); cursor: default; height: auto; min-height: 44px; font-size: 12px; }
.btn--off { background: var(--line); color: var(--muted); cursor: default; }
.btn .ico { width: 20px; height: 20px; }
.promo__art { border-radius: 16px; overflow: hidden; width: 46%; inset-block-end: 16px; inset-inline-end: 16px; z-index: 0; }
.promo__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo > h3, .promo > p, .promo > .link-arrow { position: relative; z-index: 1; }
.promo--big .promo__art { width: 58%; inset-block-end: 24px; inset-inline-end: 24px; }
.promo--tall .promo__art { width: calc(100% - 32px); inset-inline-end: 16px; inset-block-end: 16px; }
.promo--mist .promo__art, .promo--sage .promo__art { width: 42%; }
.search__results a { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 12px; text-align: start; }
.search__results a:hover, .search__results a.is-sel { background: var(--paper); }
.thumb-s { width: 52px; height: 52px; border-radius: 10px; flex: none; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.thumb-s img { width: 100%; height: 100%; object-fit: contain; }
.search__results b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.4; }
.line__thumb { background: #fff; border: 1px solid var(--line); display: block; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Product page */
.pdp { padding-block: 16px 56px; }
.pdp-missing { padding-block: 90px; text-align: center; display: grid; gap: 20px; justify-items: center; }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--muted); padding-block-end: 14px; }
.crumbs a:hover { color: var(--copper); }
.pdp__top { display: grid; grid-template-columns: minmax(0, 1.050fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
.gallery { position: sticky; inset-block-start: 130px; display: grid; gap: 12px; min-width: 0; }
.gallery__main { position: relative; aspect-ratio: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
@media (hover: hover) { .gallery__main:hover img { transform: scale(1.6); cursor: zoom-in; } }
.gallery__nav { position: absolute; inset-block-start: 50%; margin-block-start: -22px; z-index: 2; background: rgba(255, 255, 255, .92); }
.gallery__nav--prev { inset-inline-start: 12px; } .gallery__nav--next { inset-inline-end: 12px; }
.gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-block-end: 4px; }
.thumb { width: 76px; height: 76px; flex: none; border-radius: 12px; overflow: hidden; background: #fff; border: 2px solid var(--line); transition: border-color .2s; }
.thumb.is-on { border-color: var(--copper); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.buy { display: grid; gap: 14px; min-width: 0; }
.buy h1 { font-size: clamp(22px, 2.400vw, 32px); line-height: 1.35; }
.buy__short { color: var(--ink-2); font-size: 16px; }
.buy__price { display: grid; gap: 2px; padding-block: 6px; border-block: 1px solid var(--line); padding: 14px 0; }
.buy__price .price { font-size: 30px; }
.buy__price .price s { font-size: 15px; margin-block-start: 2px; }
.buy__price .price--soon { font-size: 20px; color: var(--copper); }
.buy__price > small { color: var(--muted); font-size: 12px; }
.buy__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.buy__add { flex: 1; min-width: 170px; }
.qty--big { margin: 0; height: 48px; }
.qty--big button { width: 42px; height: 46px; font-size: 18px; }
.fav-inline { flex: none; width: 48px; height: 48px; }
.fav-inline .ico { width: 20px; height: 20px; }
.fav-inline.is-on { color: var(--copper); } .fav-inline.is-on .ico { fill: currentColor; }
.fav-inline:hover { color: #fff; }
.buy__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.buy__chips li { padding: 4px 12px; border-radius: 999px; background: var(--sand); font-size: 13px; font-weight: 500; }
.buy__h { font-size: 18px; margin-block-start: 8px; }
.buy__bullets { display: grid; gap: 9px; }
.buy__bullets li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.buy__bullets li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); flex: none; transform: translateY(-2px); }
.pdp__info { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 56px); margin-block-start: 56px; }
.pdp__info h2, .pdp__faq h2, .pdp__related h2 { font-size: clamp(20px, 2vw, 26px); margin-block-end: 14px; }
.pdp__info p { font-size: 16px; line-height: 1.85; max-width: 62ch; }
.specs { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.specs th, .specs td { padding: 11px 16px; text-align: start; font-size: 14px; border-block-end: 1px solid var(--line); vertical-align: top; }
.specs tr:last-child th, .specs tr:last-child td { border: 0; }
.specs th { width: 42%; font-weight: 600; background: var(--paper); }
.pdp__faq { margin-block-start: 48px; max-width: 880px; }
.pdp__related { margin-block-start: 48px; }

/* Checkout */
.link-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin-block-end: 14px; min-height: 32px; }
.fld { display: grid; gap: 4px; margin-block-end: 12px; font-size: 14px; font-weight: 500; }
.fld input, .fld select, .fld textarea { font-weight: 400; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: #fff; font-size: 16px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(169, 85, 47, .13); }
.fld input[dir="ltr"] { text-align: start; }
[dir="rtl"] .fld input[dir="ltr"] { text-align: end; }
.fld em { font-style: normal; font-size: 12px; color: #B3261E; min-height: 0; }
.fld [aria-invalid="true"] { border-color: #B3261E; }
.pay-set { border: 0; padding: 0; margin: 4px 0 0; }
.pay-set legend { font-size: 14px; font-weight: 600; padding: 0 0 8px; }
.pay-opt { display: flex; gap: 10px; align-items: center; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; margin-block-end: 8px; cursor: pointer; font-size: 14px; }
.pay-opt:has(input:checked) { border-color: var(--copper); background: #FBF4EE; }
.pay-opt input { accent-color: var(--copper); width: 18px; height: 18px; flex: none; }
.sums { margin: 0; display: grid; gap: 4px; font-size: 14px; }
.sums div { display: flex; justify-content: space-between; }
.sums dd { margin: 0; }
.sums__total { font: 700 18px var(--head); padding-block-start: 6px; }
.done { display: grid; gap: 12px; text-align: center; justify-items: center; padding-block: 28px; }
.done__tick { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: #1B7A4B; color: #fff; }
.done__tick .ico { width: 30px; height: 30px; }
.done h3 { font-size: 22px; }
.done__no { background: var(--paper); padding: 10px 16px; border-radius: 12px; font-size: 14px; }
.done .btn--wa, .done .btn--copper { width: 100%; }

@media (max-width: 1180px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .frame { width: 100%; aspect-ratio: auto; height: 100%; }
  .frame img { object-fit: contain; }
  .scene .frame { width: 100%; height: 100%; background: transparent; box-shadow: none; }
  .scene .frame img { border-radius: 20px; }
  .slide__art .frame { background: #fff; }
  .cats { grid-template-columns: 1fr 1fr; }
  .card__media { padding: 4%; }
  .add--off { font-size: 11px; padding-inline: 8px; }
  .pdp__top { grid-template-columns: minmax(0, 1fr); }
  .gallery { position: static; }
  .pdp__info { grid-template-columns: minmax(0, 1fr); margin-block-start: 36px; }
  .promo--big .promo__art { width: 64%; }
  .promo--tall .promo__art { width: 44%; }
  .promo--mist .promo__art, .promo--sage .promo__art { width: 56%; }
}

/* ===== Saudi offers theme ===== */
:root { --copper: #0F6B50; --copper-lt: #D9B95C; --gold: #C8A24A; --gold-lt: #EBD48E; --green-d: #07382B; --mist: #E8EFEA; --blush: #F4EBDA; --sand: #F1E7D3;
  --najdi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23D9B95C' stroke-opacity='.22' stroke-width='1.5'%3E%3Cpath d='M48 4 92 48 48 92 4 48Z'/%3E%3Cpath d='M48 22 74 48 48 74 22 48Z'/%3E%3Cpath d='M0 0 24 24M96 0 72 24M0 96 24 72M96 96 72 72'/%3E%3C/g%3E%3Cpath d='M48 40 56 48 48 56 40 48Z' fill='%23D9B95C' fill-opacity='.28'/%3E%3C/svg%3E");
  --sadu: repeating-linear-gradient(90deg, #C8A24A 0 14px, #07382B 14px 18px, #8A2C2C 18px 32px, #07382B 32px 36px); }
.ticker { background: var(--green-d); }
.ticker::after { content: ""; display: block; height: 4px; background: var(--sadu); }
.slide--green { background: radial-gradient(90% 130% at 80% 20%, #17805F 0%, #0B4F3C 50%, #07382B 100%); }
.slide--night { background: radial-gradient(90% 130% at 80% 20%, #36405F 0%, #1A2238 55%, #0E1322 100%); }
.slide--sand { background: radial-gradient(90% 130% at 80% 20%, #A9472F 0%, #6E2A1F 55%, #3E1610 100%); }
.slide::before { content: ""; position: absolute; inset: 0; background: var(--najdi); animation: drift 40s linear infinite; pointer-events: none; }
@keyframes drift { to { background-position: 480px 480px; } }
.slide__txt, .slide__art { position: relative; z-index: 2; }
.slider .eyebrow { color: var(--gold-lt); }
.slide__h { background: linear-gradient(100deg, #fff 30%, var(--gold-lt) 50%, #fff 70%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; line-height: 1.3; }
@keyframes shimmer { to { background-position: -240% 0; } }
.btn--gold { background: linear-gradient(120deg, #EBD48E, #C8A24A); color: #1B1408; }
.arch { width: min(78%, 360px); aspect-ratio: 4 / 5; max-height: 100%; padding: 8px; border-radius: 999px 999px 22px 22px; background: linear-gradient(160deg, var(--gold-lt), var(--gold)); opacity: 0; transform: translateY(44px) scale(.92); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
.slide.is-active .arch { opacity: 1; transform: none; transition: opacity .9s var(--ease) .1s, transform 1.100s var(--ease) .1s; }
.arch__in { width: 100%; height: 100%; border-radius: inherit; background: #fff; overflow: hidden; display: grid; place-items: center; padding: 34px 12px 12px; }
.arch__in img { width: 100%; height: 100%; object-fit: contain; animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lantern { position: absolute; inset-block-start: 0; width: 34px; height: 92px; transform-origin: top center; animation: swing 4.500s ease-in-out infinite; background: linear-gradient(var(--gold-lt), var(--gold-lt)) center top / 2px 44px no-repeat; }
.lantern::after { content: ""; position: absolute; inset-block-start: 44px; inset-inline-start: 5px; width: 24px; height: 42px; border-radius: 12px 12px 5px 5px; background: linear-gradient(180deg, var(--gold), #FFE9A8 55%, var(--gold)); box-shadow: 0 0 26px 7px rgba(235, 212, 142, .55); }
.lantern--a { inset-inline-end: 7%; } .lantern--b { inset-inline-end: 15%; height: 62px; background-size: 2px 20px; animation-delay: -1.700s; animation-duration: 5.200s; }
.lantern--b::after { inset-block-start: 20px; }
@keyframes swing { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
.spark { position: absolute; inset-block-start: var(--y); inset-inline-start: var(--x); width: 12px; height: 12px; background: var(--gold-lt); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: twinkle 3s ease-in-out infinite var(--t, 0s); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
.side-offer { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #F6EEDC var(--najdi); padding: 26px; display: flex; flex-direction: column; gap: 10px; min-height: 320px; border: 1px solid #E6D7B4; }
.side-offer__txt { display: grid; gap: 6px; justify-items: start; }
.side-offer h2 { font-size: clamp(26px, 2.800vw, 40px); color: var(--green-d); font-weight: 800; }
.side-offer p { font-size: 14px; }
.side-offer__art { flex: 1; min-height: 0; display: block; }
.side-offer__art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--ease); }
.side-offer:hover img { transform: scale(1.05); }
.code { display: inline-flex; align-items: center; gap: 10px; border: 2px dashed var(--gold); border-radius: 12px; padding: 7px 12px; background: #fff; min-height: 44px; font-size: 13px; }
.code b { font: 800 15px var(--head); letter-spacing: .06em; color: var(--green-d); }
.code span { color: var(--copper); font-weight: 600; }
.coupons-wrap { background: var(--green-d) var(--najdi); padding-block: 40px; color: #fff; position: relative; margin-block-end: 22px; }
.coupons-wrap::before, .coupons-wrap::after { content: ""; position: absolute; inset-inline: 0; height: 4px; background: var(--sadu); }
.coupons-wrap::before { inset-block-start: 0; } .coupons-wrap::after { inset-block-end: 0; }
.coupons-wrap .section__head { flex-wrap: wrap; }
.section__sub { color: rgba(255, 255, 255, .82); margin-block-start: 4px; }
.coupons { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.ticket { display: flex; color: var(--ink); min-height: 136px; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .28)); transition: transform .3s var(--ease); }
.js .ticket.reveal.is-in:hover { transform: translateY(-5px); }
.ticket__main { flex: 1; min-width: 0; background: #FFFBF1; padding: 16px 20px; display: grid; gap: 2px; align-content: center; border-start-start-radius: 18px; border-end-start-radius: 18px; }
.ticket__tag { font-size: 12px; font-weight: 600; color: var(--copper); }
.ticket strong { font: 800 clamp(24px, 2.400vw, 32px)/1.2 var(--head); color: var(--green-d); }
.ticket small { font-size: 12px; color: var(--muted); }
.ticket__cut { position: relative; width: 122px; flex: none; display: grid; gap: 3px; place-content: center; text-align: center; color: #1B1408; background: linear-gradient(150deg, #EBD48E, #C8A24A); border-start-end-radius: 18px; border-end-end-radius: 18px; border-inline-start: 2px dashed rgba(27, 20, 8, .45); overflow: hidden; }
.ticket__cut b { font: 800 14px var(--head); letter-spacing: .05em; }
.ticket__cut span { font-size: 11px; font-weight: 600; }
.ticket__cut::after { content: ""; position: absolute; inset-block: 0; width: 40%; inset-inline-start: -60%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: glint 4s ease-in-out infinite; }
@keyframes glint { 60%, 100% { inset-inline-start: 130%; } }
.license { font-size: 13px; margin: 14px 0 0; color: var(--gold-lt); }
.countdown { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.countdown div { display: grid; justify-items: center; min-width: 52px; padding: 5px 6px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(235, 212, 142, .4); }
.countdown b { font: 800 19px/1.1 var(--head); color: var(--gold-lt); }
.countdown small { font-size: 10px; }
.cta { background: radial-gradient(70% 180% at 90% 0%, #17805F, #07382B 66%); }
.footer { background: var(--green-d); border-block-start: 4px solid var(--gold); }
.footer__grid { grid-template-columns: 1.500fr 1fr 1fr 1fr; }
.promo--big { background: radial-gradient(90% 100% at 80% 90%, #17805F, #07382B 70%); }
.promo--tall { background: linear-gradient(180deg, #F6EEDC, #E7D3A4); }
.add--ask { background: var(--copper); }
.btn--wa { background: #128C5E; }
.wa-fab { background: #128C5E; }
.coupon-box { margin-block-end: 10px; }
.coupon-box em { display: block; font-style: normal; font-size: 12px; color: #B3261E; margin-block-start: 4px; }
.coupon-in { display: flex; gap: 6px; }
.coupon-in input { flex: 1; min-width: 0; border: 1px dashed var(--gold); border-radius: 12px; padding: 0 12px; height: 44px; font-size: 16px; text-transform: uppercase; }
.coupon-in .btn { min-height: 44px; padding: 0 16px; }
.coupon-on { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--mist); border-radius: 12px; font-size: 14px; }
.coupon-on button { text-decoration: underline; font-size: 13px; min-height: 28px; }
.sums__disc { color: var(--copper); font-weight: 600; }
.drawer__foot > .sums { margin-block-end: 6px; }
.pay-form { width: 100%; text-align: start; margin-block-start: 8px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.pay-form h4 { margin: 0 0 10px; font: 600 15px var(--head); }
.consent { position: fixed; inset-block-end: 16px; inset-inline: 16px; z-index: 125; max-width: 680px; margin-inline: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 24px 50px -22px rgba(15, 14, 20, .6); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14px; }
.consent p { margin: 0; flex: 1 1 240px; }
.consent > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.consent a { text-decoration: underline; font-size: 13px; }
.consent .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.consent .btn--light { border: 1px solid var(--line); }
.policy { padding-block: 24px 64px; max-width: 800px; }
.policy h1 { font-size: clamp(26px, 3vw, 38px); margin-block-end: 18px; }
.policy p { margin-block-end: 12px; font-size: 16px; line-height: 1.85; }
.policy.done { justify-items: center; padding-block-start: 60px; }
@media (max-width: 900px) {
  .slider { height: 600px; }
  .arch { width: auto; height: 100%; }
  .slide__art { display: flex; justify-content: center; min-height: 0; }
  .lantern--b { display: none; } .lantern--a { inset-inline-end: 5%; }
  .side-offer { flex-direction: row; align-items: center; min-height: 0; }
  .side-offer__txt { flex: 1; min-width: 0; } .side-offer__art { flex: 0 0 38%; aspect-ratio: 1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .wa-fab { inset-block-end: 80px; }
  .consent { inset-block-end: 76px; }
}
@media (prefers-reduced-motion: reduce) { .slide::before, .slide__h, .lantern, .spark, .arch__in img, .ticket__cut::after { animation: none; } .slide__h { color: #fff; background: none; -webkit-text-fill-color: #fff; } }

/* ===== Marketplace layout ===== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.header { background: var(--green-d); color: #fff; backdrop-filter: none; }
.header .logo b { color: #fff; } .header .logo span:last-child { color: var(--gold-lt); }
.header .city small { color: rgba(255,255,255,.75); }
.header .city select { color: #fff; } .header .city select option { color: var(--ink); }
.header .pill-btn { border-color: rgba(255,255,255,.35); } .header .pill-btn:hover { background: #fff; color: var(--ink); }
.header .icon-btn:hover { background: rgba(255,255,255,.14); }
.header .search { color: var(--ink); border: 0; height: 44px; border-radius: 10px; }
.header .count { background: var(--gold); color: #1B1408; }
.catnav { width: 100%; max-width: none; background: #fff; padding-inline: max(24px, calc((100% - 1320px) / 2)); padding-block: 4px; margin: 0; border-block-end: 1px solid var(--line); }
.catnav a { font-size: 13px; color: var(--ink); }
.hero--market { grid-template-columns: minmax(0, 1fr) minmax(0, 2.600fr) minmax(0, 1fr); gap: 12px; padding-block: 12px; }
.hero--market .slider { height: clamp(360px, 44vw, 480px); border-radius: 16px; }
.hero--market .side-offer, .side-promo2 { min-height: 0; border-radius: 16px; }
.hero--market .slide { padding: clamp(20px, 3vw, 40px); }
.hero--market .slide__h { font-size: clamp(24px, 2.800vw, 40px); }
.hero--market .arch { width: min(90%, 270px); }
.side-offer h2 { font-size: clamp(22px, 2.200vw, 32px); }
.side-offer { padding: 18px; }
.side-promo2 { background: #E8EFEA var(--najdi); border: 1px solid var(--line); overflow: hidden; }
.side-promo2 a { display: flex; flex-direction: column; height: 100%; padding: 18px; gap: 6px; }
.side-promo2 h2 { font-size: clamp(18px, 1.700vw, 24px); }
.side-promo2__img { flex: 1; min-height: 0; }
.side-promo2__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.side-promo2:hover img { transform: scale(1.06); }
.rounds { padding-block: 10px 16px; }
.rounds__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; }
.rounds__row::-webkit-scrollbar { display: none; }
.round { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.3; }
.round__img { width: 88px; height: 88px; border-radius: 50%; background: #fff; border: 2px solid var(--line); overflow: hidden; padding: 10px; transition: border-color .25s, transform .3s var(--ease); }
.round__img img { width: 100%; height: 100%; object-fit: contain; }
.round:hover .round__img { border-color: var(--gold); transform: translateY(-3px); }
.trust { margin-block-end: 18px; border-radius: 12px; }
.trust div { padding: 12px 16px; }
.coupons-wrap { padding-block: 26px; margin-block-end: 4px; }
.ticket { min-height: 110px; }
.section { padding-block: 22px; }
.rail-sec { padding-block: 16px; }
.rail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; margin-block-end: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--green-d), #0F6B50); color: #fff; }
.rail-head h2 { font-size: clamp(16px, 1.700vw, 21px); }
.rail-head .round-btn { width: 34px; height: 34px; color: var(--ink); }
.rail-ctrl { align-items: center; }
.view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding-inline: 8px; }
.rail { grid-auto-columns: minmax(190px, calc((100% - 60px) / 6)); gap: 12px; }
.grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 12px; }
.card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); transition: box-shadow .25s, transform .25s var(--ease); }
.card:hover { box-shadow: 0 14px 28px -18px rgba(15,14,20,.5); transform: translateY(-2px); }
.card__box { position: relative; }
.card__media { border: 0; border-radius: 0; padding: 8%; }
.card .fav { inset-block-start: 6px; inset-inline-end: 6px; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; }
.plus { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--green-d); color: #fff; transition: transform .2s, background .2s; z-index: 2; }
.plus:hover { background: var(--copper); transform: scale(1.08); }
.plus.is-done { background: #128C5E; }
.plus .add__label { display: none; }
.plus .ico { width: 19px; height: 19px; }
.plus--ask { background: #128C5E; }
.plus--off { background: var(--line); color: var(--muted); }
.card__body { padding: 8px 10px 12px; gap: 5px; }
.card__name { font: 400 13px/1.45 var(--head); min-height: 38px; -webkit-line-clamp: 2; }
.card .price { font-size: 16px; display: grid; gap: 1px; }
.price__was { font: 400 12px var(--body); color: var(--muted); } .price__was s { display: inline; font-size: 12px; } .price__was em { font-style: normal; font-weight: 700; color: #128C5E; margin-inline-start: 4px; }
.card__rate { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; color: #DDD6CC; }
.stars::before { content: "★★★★★"; }
.stars i { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; color: var(--gold); white-space: nowrap; font-style: normal; }
.stars i::before { content: "★★★★★"; }
.wide-banner { padding-block: 8px; }
.wide-banner a { display: grid; grid-template-columns: 1.300fr 1fr; align-items: stretch; border-radius: 16px; overflow: hidden; min-height: 180px; }
.wide-banner a > div:first-child { padding: clamp(18px, 3vw, 36px); display: grid; align-content: center; justify-items: start; gap: 8px; }
.wide-banner h2 { font-size: clamp(20px, 2.600vw, 34px); font-weight: 800; }
.wide-banner--green a { background: var(--green-d) var(--najdi); color: #fff; }
.wide-banner--sand a { background: #F6EEDC var(--najdi); }
.wide-banner__img { max-height: 280px; overflow: hidden; }
.wide-banner__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wide-banner a:hover img { transform: scale(1.04); }
.bento { grid-template-rows: repeat(2, 220px); }
.footer__brand ul { margin-block-start: 10px; }
.company li { display: grid; gap: 1px; padding-block: 5px; font-size: 13px; }
.company span { color: var(--gold-lt); font-size: 12px; }
.footer__grid { grid-template-columns: 1.200fr .8fr .9fr 1.500fr; }

/* Product page */
.pdp { padding-block: 10px 90px; }
.pdp3 { display: grid; grid-template-columns: minmax(0, 1.250fr) minmax(0, 1.150fr) 290px; gap: 22px; align-items: start; }
.pdp3 .gallery { position: sticky; inset-block-start: 110px; grid-template-columns: 70px minmax(0, 1fr); }
.pdp3 .gallery:has(> .gallery__main:only-child) { grid-template-columns: minmax(0, 1fr); }
.pdp3 .gallery__thumbs { flex-direction: column; overflow-y: auto; overflow-x: hidden; max-height: 520px; scrollbar-width: none; }
.pdp3 .thumb { width: 66px; height: 66px; }
.gallery__main { border-radius: 14px; }
.pinfo { display: grid; gap: 10px; min-width: 0; }
.pinfo__brand { font-size: 13px; font-weight: 600; color: var(--copper); }
.pinfo h1 { font-size: clamp(18px, 1.700vw, 22px); line-height: 1.5; font-weight: 600; }
.pinfo__rate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pinfo__price { padding-block: 8px; border-block: 1px solid var(--line); display: grid; gap: 2px; }
.pinfo__price .price { font-size: 26px; display: grid; }
.pinfo__price small { font-size: 12px; color: var(--muted); }
.sample { color: #A15C00; font-weight: 600; }
.tabby-box { display: flex; gap: 10px; align-items: center; padding: 9px 12px; background: #EFFBF5; border: 1px solid #BDEBD3; border-radius: 10px; font-size: 13px; }
.tabby-box b { padding: 2px 8px; border-radius: 6px; background: #3BFFC1; color: #111; font-weight: 800; }
.pinfo__block { display: grid; gap: 6px; padding-block-end: 8px; }
.pinfo__block h2 { font: 600 12px var(--head); color: var(--muted); letter-spacing: .03em; }
.pinfo__block p { font-size: 14px; }
.pcoupons { display: flex; flex-wrap: wrap; gap: 8px; }
.pcoupons .code { min-height: 40px; }
.together { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.together > i { font-style: normal; color: var(--muted); }
.tg { display: grid; gap: 3px; justify-items: center; position: relative; font-size: 12px; cursor: pointer; }
.tg input { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 17px; height: 17px; accent-color: var(--copper); }
.tg__img { width: 76px; height: 76px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px; }
.tg__img img { width: 100%; height: 100%; object-fit: contain; }
.btn--line { background: #fff; color: var(--copper); border: 1.5px solid var(--copper); }
.btn--ghost { background: none; color: var(--ink); }
.fav-inline2.is-on { color: var(--copper); } .fav-inline2.is-on .ico { fill: currentColor; }
.buybox { position: sticky; inset-block-start: 110px; display: grid; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.buybox__seller { display: flex; justify-content: space-between; font-size: 13px; padding-block-end: 8px; border-block-end: 1px solid var(--line); }
.buybox__seller b { color: var(--copper); }
.buybox__list { display: grid; gap: 7px; font-size: 13px; padding-block-end: 4px; }
.buybox__list li { display: flex; gap: 8px; align-items: baseline; }
.buybox__list li::before { content: "✓"; color: var(--copper); font-weight: 700; }
.buybox .qty--big { justify-self: start; margin: 0; }
.psec { margin-block-start: 28px; padding-block-start: 22px; border-block-start: 1px solid var(--line); }
.psec > h2 { font-size: clamp(18px, 1.800vw, 22px); margin-block-end: 12px; }
.psec > p { max-width: 90ch; line-height: 1.85; }
.spec-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.spec-grid div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.spec-grid dt { font-size: 12px; color: var(--muted); } .spec-grid dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.rv { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.rv__sum { display: grid; gap: 8px; }
.rv__sum > strong { font: 800 42px/1 var(--head); }
.rv-bar { display: grid; grid-template-columns: 14px 1fr 24px; gap: 8px; align-items: center; font-size: 12px; }
.rv-bar i { height: 7px; border-radius: 7px; background: var(--line); overflow: hidden; } .rv-bar b { display: block; height: 100%; background: var(--gold); }
.rv__form { display: grid; gap: 8px; margin-block-start: 8px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.rv__form h3 { font-size: 15px; } .rv__form small { color: var(--muted); font-size: 12px; }
.rv__pick button { font-size: 26px; line-height: 1; color: #DDD6CC; padding: 2px; min-width: 32px; min-height: 36px; } .rv__pick button.on { color: var(--gold); }
.rv__item { padding-block: 12px; border-block-end: 1px solid var(--line); display: grid; gap: 3px; }
.rv__item header { display: flex; gap: 10px; align-items: center; } .rv__item small { color: var(--muted); font-size: 12px; }
.pdp__related .rail { display: grid; }
.stickybuy { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 75; display: flex; align-items: center; gap: 12px; padding: 8px max(16px, calc((100% - 1320px) / 2)); background: #fff; border-block-start: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(15,14,20,.5); transform: translateY(110%); transition: transform .35s var(--ease); }
.stickybuy.is-on { transform: none; }
.stickybuy__img { width: 44px; height: 44px; flex: none; } .stickybuy__img img { width: 100%; height: 100%; object-fit: contain; }
.stickybuy__name { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybuy__price { font: 700 16px var(--head); white-space: nowrap; }
.stickybuy .btn { min-height: 42px; padding-inline: 26px; }

@media (max-width: 1180px) {
  .hero--market { grid-template-columns: minmax(0, 2.400fr) minmax(0, 1fr); }
  .side-promo2 { display: none; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail { grid-auto-columns: minmax(170px, 23%); }
  .pdp3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .buybox { grid-column: 1 / -1; position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero--market { grid-template-columns: minmax(0, 1fr); }
  .hero--market .slider { height: 560px; order: -1; }
  .header { position: static; }
  .catnav { padding-inline: 12px; }
  .round__img { width: 70px; height: 70px; }
  .rounds__row { grid-auto-columns: 82px; }
  .round { font-size: 11px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rail { grid-auto-columns: 44%; gap: 8px; }
  .rail-head .round-btn { display: none; }
  .wide-banner a { grid-template-columns: 1fr; }
  .wide-banner__img { max-height: 220px; order: -1; }
  .pdp { padding-block-end: 130px; }
  .pdp3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pdp3 .gallery { position: static; grid-template-columns: minmax(0, 1fr); }
  .pdp3 .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; max-height: none; }
  .rv { grid-template-columns: minmax(0, 1fr); }
  .stickybuy { inset-block-end: 62px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-rows: none; }
}
.rv:has(.rv__list:empty) { grid-template-columns: minmax(0, 560px); }
body:has(.stickybuy.is-on) .wa-fab { inset-block-end: 78px; transition: inset-block-end .3s; }
@media (max-width: 900px) { body:has(.stickybuy.is-on) .wa-fab { inset-block-end: 136px; } body:has(.stickybuy.is-on) .toast { inset-block-end: 140px; } }

/* ===== Wholesale site ===== */
.logo { gap: 5px; font-size: 19px; white-space: nowrap; }
.logo b { font-weight: 800; }
.logo span:last-child { font-size: 12px; letter-spacing: .08em; font-weight: 600; padding: 3px 6px; border: 1px solid currentColor; border-radius: 5px; }
.intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; text-align: center; color: #fff; background: radial-gradient(70% 70% at 50% 40%, #0F6B50, #07382B 75%) ; overflow: hidden; transition: opacity .55s ease, transform .55s ease; padding: 24px; }
.intro::before { content: ""; position: absolute; inset: 0; background: var(--najdi); animation: drift 40s linear infinite; }
.intro.is-out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.intro__in { position: relative; display: grid; gap: 12px; justify-items: center; }
.intro__welcome { font: 600 clamp(18px, 3vw, 28px) var(--head); color: var(--gold-lt); animation: introUp .7s var(--ease) both; }
.intro__name { font: 800 clamp(28px, 7vw, 76px)/1.1 var(--head); display: flex; flex-wrap: wrap; justify-content: center; }
.intro__name span { display: inline-block; animation: introLetter .55s var(--ease) both; animation-delay: calc(.35s + var(--i) * .035s); }
.intro__sub { font-size: clamp(14px, 2vw, 18px); opacity: 0; animation: introUp .7s var(--ease) 1.300s forwards; }
.intro__skip { position: absolute; inset-block-end: 22px; inset-inline-end: 22px; color: #fff; min-height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; }
@keyframes introUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes introLetter { from { opacity: 0; transform: translateY(40px) rotate(8deg); color: var(--gold); } to { opacity: 1; transform: none; } }
.ws-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(70% 110% at 85% 15%, #17805F, #0B4F3C 50%, #07382B 100%); }
.ws-hero::before { content: ""; position: absolute; inset: 0; background: var(--najdi); opacity: .7; animation: drift 50s linear infinite; }
.ws-hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.050fr) minmax(0, 1fr); gap: 24px; align-items: center; padding-block: clamp(24px, 4vw, 52px) 10px; }
.ws-hero .eyebrow { color: var(--gold-lt); }
.ws-hero h1 { font-size: clamp(27px, 3.800vw, 52px); font-weight: 800; line-height: 1.25; margin-block: 8px 12px; }
.ws-hero p { font-size: clamp(15px, 1.400vw, 18px); max-width: 52ch; color: rgba(255,255,255,.88); }
.ws-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 20px; }
.btn--glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); }
.ws-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-stats div { min-width: 104px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(235,212,142,.35); display: grid; }
.ws-stats b { font: 800 24px/1.2 var(--head); color: var(--gold-lt); }
.ws-stats span { font-size: 12px; }
.ws-scene svg { width: 100%; height: auto; display: block; }
.forklift { animation: fork 9s ease-in-out infinite; }
.fork { animation: forkup 9s ease-in-out infinite; }
@keyframes fork { 0%, 100% { transform: translate(290px, 412px); } 45%, 55% { transform: translate(180px, 412px); } }
@keyframes forkup { 0%, 40%, 60%, 100% { transform: none; } 50% { transform: translateY(-34px); } }
.truck { animation: truck 11s cubic-bezier(.5,.1,.4,1) infinite; }
@keyframes truck { 0% { transform: translate(680px, 412px); } 35%, 62% { transform: translate(420px, 412px); } 100% { transform: translate(-200px, 412px); opacity: 1; } }
.crate { animation: crate 4s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); transform-box: fill-box; }
@keyframes crate { 50% { transform: translateY(-2px); } }
.door { animation: door 11s ease-in-out infinite; transform-box: fill-box; transform-origin: top; }
@keyframes door { 0%, 25%, 75%, 100% { transform: scaleY(1); } 35%, 62% { transform: scaleY(.35); } }
.merchant { animation: none; }
.markets { position: relative; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-block: 12px 18px; font-size: 14px; }
.market { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; background: rgba(0,0,0,.2); border-radius: 12px; }
.ribbon { width: 56px; height: 26px; display: block; border-radius: 3px; background-size: 200% 100%; animation: wave 3.200s linear infinite; clip-path: polygon(0 12%, 18% 0, 36% 12%, 54% 0, 72% 12%, 100% 0, 100% 86%, 72% 100%, 54% 88%, 36% 100%, 18% 88%, 0 100%); }
.ribbon--sa { background-image: linear-gradient(90deg, #006C35, #1E9A5F, #006C35, #1E9A5F, #006C35); }
.ribbon--ae { background-image: linear-gradient(90deg, #00732F, #F7F7F7, #1A1A1A, #C8102E, #00732F); }
@keyframes wave { to { background-position: -200% 0; } }
.sellers { background: #fff; border-block-end: 1px solid var(--line); overflow: hidden; }
.sellers__in { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; padding-block: 12px; font-size: 14px; font-weight: 500; }
.sellers__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sellers__row b { padding: 4px 14px; border-radius: 999px; background: var(--sand); font: 700 14px var(--head); color: var(--green-d); transition: transform .25s; }
.sellers__row b:hover { transform: translateY(-3px); }
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: s; }
.how li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 4px; }
.how i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 800 15px var(--head); font-style: normal; color: #1B1408; background: linear-gradient(140deg, #EBD48E, #C8A24A); }
.how b { font: 700 15px var(--head); } .how span { font-size: 13px; color: var(--muted); }
#categories .rounds__row { grid-auto-columns: minmax(120px, 1fr); }
.round small { color: var(--muted); font-size: 11px; }
.round__img { width: 96px; height: 96px; }
.services { background: var(--green-d) var(--najdi); color: #fff; padding-block: 34px; margin-block: 18px; }
.section__sub2 { color: var(--muted); margin-block-start: 4px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.svc { background: rgba(255,255,255,.08); border: 1px solid rgba(235,212,142,.3); border-radius: 14px; padding: 16px; display: grid; gap: 5px; transition: background .25s, transform .3s var(--ease); }
.js .svc.reveal.is-in:hover { background: rgba(255,255,255,.15); transform: translateY(-4px); }
.svc .ico { width: 30px; height: 30px; color: var(--gold-lt); }
.svc b { font: 700 15px var(--head); } .svc span { font-size: 13px; color: rgba(255,255,255,.82); }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.src { background: #fff; border: 1px dashed #D7C9A8; border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; transition: border-color .2s, transform .25s; }
.src:hover { border-color: var(--copper); transform: translateY(-2px); }
.src b { font: 600 14px var(--head); } .src span { font-size: 12px; color: var(--copper); }
.card__sku { display: block; font: 600 11px var(--head); color: var(--muted); letter-spacing: .03em; }
[dir="rtl"] .card__sku { text-align: end; }
.perpc { font: 400 12px var(--body); color: var(--muted); font-style: normal; margin-inline-start: 3px; }
.moq-tag { justify-self: start; align-self: start; display: inline-block; width: fit-content; padding: 2px 8px; font: 600 11px var(--head); color: var(--green-d); background: #E3F0E9; border-radius: 6px; }
.moq-tag--soft { color: #7A5E12; background: #F6EEDC; }
.card .price--soon { font-size: 13px; color: var(--copper); font-weight: 600; }
.pinfo__price { justify-items: start; gap: 6px; }
.pinfo__price .moq-tag { font-size: 13px; padding: 4px 10px; }
.tier-hint { font-size: 13px; color: var(--muted); }
.tiers { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); }
.tiers th, .tiers td { padding: 7px 10px; text-align: start; border-block-end: 1px solid var(--line); }
.tiers th { background: var(--paper); font-size: 12px; }
.tier-row.is-on { background: #E3F0E9; font-weight: 700; }
.tabby-box--t { background: #FFF3EA; border-color: #FBD5B5; } .tabby-box--t b { background: #FFB88C; }
.mini-svcs { display: flex; flex-wrap: wrap; gap: 6px; } .mini-svcs li { padding: 3px 10px; background: var(--sand); border-radius: 999px; font-size: 12px; }
.pinfo__brand b { color: var(--ink); }
.buybox__st { font: 600 14px var(--head); color: #128C5E; } .buybox__st.soft { color: #7A5E12; }
.qtyfld { margin: 0; } .qtyfld small { font-weight: 400; color: var(--muted); }
.qty input { width: 76px; border: 0; text-align: center; background: none; font-weight: 600; font-size: 16px; padding: 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--big input { height: 46px; }
.qty:not(.qty--big) input { width: 54px; font-size: 14px; }
.line-total { display: flex; justify-content: space-between; font-size: 14px; } .line-total b { font: 800 18px var(--head); color: var(--green-d); } .line-total:empty { display: none; }
.line__min, .line__unit { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.svc-check { display: grid; gap: 6px; } .svc-check label { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 30px; } .svc-check input { width: 18px; height: 18px; accent-color: var(--copper); flex: none; }
.done__docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } .done__docs .btn { padding-inline: 8px; font-size: 13px; }
.bank-box { width: 100%; text-align: start; padding: 12px; background: var(--paper); border-radius: 12px; font-size: 14px; white-space: pre-line; } .bank-box h4 { margin: 0 0 4px; }
@media (max-width: 1180px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .how { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .ws-hero__in { grid-template-columns: minmax(0, 1fr); }
  .ws-scene { order: 2; }
  .how, .svc-grid { gap: 8px; }
  .how li, .svc { padding: 12px; }
  .logo { font-size: 16px; }
  #categories .rounds__row { grid-auto-columns: 96px; }
  .round__img { width: 74px; height: 74px; }
}
@media (prefers-reduced-motion: reduce) { .intro { display: none; } .forklift { transform: translate(180px, 412px); animation: none; } .truck { transform: translate(420px, 412px); animation: none; } .fork, .door, .crate, .ribbon, .ws-hero::before { animation: none; } }
@media (max-width: 480px) { .header__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; } .logo { font-size: 13px; gap: 3px; min-width: 0; } .logo__mark { width: 7px; height: 20px; margin-inline-end: 3px; } .logo span:last-child { font-size: 8px; padding: 2px 3px; letter-spacing: .03em; } .header__actions { gap: 0; } .header .pill-btn { height: 34px; padding: 0 9px; font-size: 12px; } .header .icon-btn { width: 36px; height: 40px; } .header .icon-btn .ico { width: 19px; height: 19px; } }

.shop-more { display: flex; justify-content: center; padding-block-start: 20px; }

.spec-grid dd, .spec-grid dt, .buy__bullets li { unicode-bidi: plaintext; }

/* Order page, bank accounts and payment proof */
.logo__img { height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.hero-pic { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: 18px; display: block; }
.bank-box, .proof-box { text-align: start; margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 10px; }
.bank-box h4, .proof-box h4 { margin: 0; }
.bank-acct { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bank-iban { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; word-break: break-all; }
.bank-iban span { font-weight: 400; color: var(--muted); font-size: 13px; }
.bank-iban .btn { min-height: 32px; padding: 3px 12px; font-size: 13px; }
.proof-msg { margin: 0; font-size: 14px; color: var(--muted); }
.order-page { max-width: 720px; padding-block: 32px 60px; display: grid; gap: 14px; }
.order-page h1 { margin: 0; }
.order-status { color: var(--copper); }
.order-lines { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 14px; }
.order-lines > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.order-lines > div:last-child { border-bottom: 0; }
.order-lines b { white-space: nowrap; }

/* Motion graphics */
.ws-scene { position: relative; }
.intro__fly { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fly { position: absolute; left: 50%; top: 50%; width: clamp(54px, 8vw, 104px); aspect-ratio: 1; margin: calc(clamp(54px, 8vw, 104px) / -2) 0 0 calc(clamp(54px, 8vw, 104px) / -2); padding: 7px; background: #fff; border-radius: 16px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); animation: flyIn 1s var(--ease) calc(var(--i) * .05s) both, flyBob 2.6s ease-in-out calc(1.2s + var(--i) * .05s) infinite alternate; }
.fly img { width: 100%; height: 100%; object-fit: contain; }
.intro.is-out .fly { transition: transform .55s ease-in; transform: translate(calc(var(--sx) * 1.2), calc(var(--sy) * 1.2)); animation: none; }
@keyframes flyIn { from { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--r)) scale(.5); } to { opacity: 1; transform: translate(var(--ex), var(--ey)) rotate(calc(var(--r) / 5)); } }
@keyframes flyBob { from { transform: translate(var(--ex), var(--ey)) rotate(calc(var(--r) / 5)); } to { transform: translate(var(--ex), calc(var(--ey) - 12px)) rotate(calc(var(--r) / -6)); } }
.bubble { transform-box: fill-box; transform-origin: 50% 100%; animation: bubblePop 7s var(--ease) 1s infinite both; }
@keyframes bubblePop { 0%, 72%, 100% { opacity: 0; transform: scale(.4); } 8%, 62% { opacity: 1; transform: none; } }
.scene-tiles { position: absolute; inset: 0; pointer-events: none; }
.scene-tile { position: absolute; width: clamp(58px, 17%, 96px); aspect-ratio: 1; padding: 6px; background: #fff; border-radius: 16px; box-shadow: 0 16px 28px -14px rgba(0,0,0,.65); animation: tileBob 3.4s ease-in-out infinite alternate; }
.scene-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.scene-tile--0 { top: 2%; left: 0; } .scene-tile--1 { top: 6%; right: 0; animation-delay: -1s; } .scene-tile--2 { top: 42%; left: -2%; animation-delay: -2s; } .scene-tile--3 { top: 50%; right: -2%; animation-delay: -1.5s; }
.scene-tile.is-pop img { animation: tilePop .6s var(--ease); }
@keyframes tileBob { to { translate: 0 -14px; rotate: 3deg; } }
@keyframes tilePop { from { opacity: 0; transform: scale(.4) rotate(-14deg); } to { opacity: 1; transform: none; } }
.conveyor { background: var(--green-d); padding: 16px 0 18px; overflow: hidden; display: grid; gap: 10px; }
.conveyor__t { margin: 0 auto; width: min(1280px, 100% - 32px); color: var(--gold-lt); font-weight: 600; font-size: 15px; }
.conveyor__row { overflow: hidden; }
.conveyor__track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.conveyor__i { flex: none; width: 120px; height: 120px; padding: 8px; background: #fff; border-radius: 14px; transition: scale .25s var(--ease); }
.conveyor__i:hover { scale: 1.07; }
.conveyor__i img { width: 100%; height: 100%; object-fit: contain; }
.card__box { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease); }
.section__head.reveal h2::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 8px; background: var(--gold); transform: scaleX(0); transform-origin: inline-start; transition: transform .8s var(--ease) .25s; }
.section__head.reveal.is-in h2::after { transform: none; }
.is-tap { animation: tapPulse .35s var(--ease); }
@keyframes tapPulse { 40% { transform: scale(.93); } }
.gallery { animation: slideA .7s var(--ease) both; } .pinfo { animation: slideB .7s var(--ease) .08s both; }
@keyframes slideA { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes slideB { from { opacity: 0; transform: translateY(34px); } }
/* Tags and sales */
.tag-badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700; line-height: 1.4; color: #fff; background: var(--green-d); position: relative; overflow: hidden; }
.card__box > .tag-badge { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2; pointer-events: none; }
.tag-badge--best { background: #C4561B; } .tag-badge--limited { background: #A32020; } .tag-badge--new { background: #1F5FBF; }
.tag-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); animation: badgeShine 4.5s ease-in-out infinite; }
@keyframes badgeShine { 30%, 100% { transform: translateX(120%); } }
.sold-line { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #B4481A; }
.pinfo__tags { margin-bottom: 6px; }
/* Suggestions */
.suggest { position: fixed; z-index: 90; inset-block-end: 16px; left: 50%; width: min(780px, calc(100% - 24px)); padding: 12px 14px 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); transform: translate(-50%, 130%); opacity: 0; visibility: hidden; transition: transform .5s var(--ease), opacity .3s, visibility .5s; }
.suggest.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.suggest__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 14px; }
.suggest__head b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.suggest__x { flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; background: var(--paper); }
.suggest__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.suggest.is-on .sug { animation: sugIn .5s var(--ease) calc(var(--i) * .07s + .1s) both; }
@keyframes sugIn { from { opacity: 0; transform: translateY(18px); } }
.sug { display: grid; gap: 4px; min-width: 0; align-content: start; }
.sug__img { display: block; aspect-ratio: 1; max-height: 104px; width: 100%; }
.sug__img img { width: 100%; height: 100%; object-fit: contain; }
.sug__name { font-size: 12px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sug__foot { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 12px; }
.sug__add { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--copper); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; }
.cart-sug { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cart-sug__i { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; }
.cart-sug__i img { width: 52px; height: 52px; object-fit: contain; }
@media (max-width: 900px) { .suggest { inset-block-end: 76px; } .suggest__row { display: flex; overflow-x: auto; scrollbar-width: none; } .sug { flex: 0 0 118px; } .scene-tile--2, .scene-tile--3 { display: none; } .conveyor__i { width: 96px; height: 96px; } }
@media (prefers-reduced-motion: reduce) { .fly, .bubble, .scene-tile, .tag-badge::after, .gallery, .pinfo, .suggest.is-on .sug, .is-tap { animation: none; } .bubble { opacity: 1; } .card__box { transform: none; } .conveyor__row { overflow-x: auto; } .suggest { transition: none; } }
.intro__name { font-size: clamp(26px, 5.4vw, 62px); max-width: 70vw; }
.intro__in { z-index: 1; }

/* Banners */
.banners { margin-block: 26px 8px; position: relative; }
.bn-track { position: relative; min-height: 300px; border-radius: 22px; overflow: hidden; background: linear-gradient(120deg, var(--green-d), var(--copper)); }
.bn { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 12px; padding: 22px 30px; color: #fff; opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
.bn.is-on { opacity: 1; visibility: visible; }
.bn__txt { display: grid; gap: 8px; }
.bn__txt h2 { margin: 0; color: #fff; font: 800 clamp(22px, 3.2vw, 38px)/1.2 var(--head); }
.bn__txt p { margin: 0; font-size: clamp(14px, 1.5vw, 17px); opacity: .92; }
.bn__txt small { font-size: 11.5px; opacity: .75; }
.bn.is-on .bn__txt > * { animation: bnUp .7s var(--ease) both; } .bn.is-on .bn__txt > :nth-child(2) { animation-delay: .12s; } .bn.is-on .bn__txt > :nth-child(3) { animation-delay: .24s; }
.bn.is-on .bn__art { animation: bnArt .9s var(--ease) both; }
@keyframes bnUp { from { opacity: 0; transform: translateY(20px); } }
@keyframes bnArt { from { opacity: 0; transform: translateX(26px) scale(.96); } }
.bn__art { height: 256px; min-width: 0; }
.bn__art svg, .bn__art img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 14px; }
.bn-dots { position: absolute; inset-block-end: 12px; inset-inline-start: 30px; display: flex; gap: 2px; }
.bn-dots button { width: 26px; height: 26px; display: grid; place-items: center; background: none; cursor: pointer; }
.bn-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .3s, scale .3s; }
.bn-dots button.is-on::before { background: var(--gold-lt); scale: 1.3; }
.art-box { animation: artBob 3.2s ease-in-out calc(var(--i, 0) * -.6s) infinite alternate; }
@keyframes artBob { to { transform: translateY(-5px); } }
.art-pulse { transform-box: fill-box; transform-origin: center; animation: artPulse 2.4s ease-in-out infinite; }
@keyframes artPulse { 50% { transform: scale(1.06); } }
.art-spark { animation: artSpark 2.6s ease-in-out calc(var(--i) * .4s) infinite; }
@keyframes artSpark { 50% { opacity: .15; } }
.art-drive { animation: artDrive 5s ease-in-out infinite alternate; }
@keyframes artDrive { from { transform: translateX(-26px); } to { transform: translateX(22px); } }
.art-grow { transform-box: fill-box; transform-origin: bottom; animation: artGrow 3.6s var(--ease) calc(var(--i) * .22s) infinite; }
@keyframes artGrow { 0% { transform: scaleY(.1); } 40%, 100% { transform: none; } }
/* Story */
.story { background: linear-gradient(180deg, #07382B, var(--green-d)); color: #fff; padding: 56px 0; margin-top: 26px; }
.story__title { margin: 8px 0 12px; color: #fff; font: 800 clamp(30px, 5vw, 58px)/1.15 var(--head); }
.story__lead { max-width: 720px; font-size: clamp(15px, 1.7vw, 19px); opacity: .92; margin: 0 0 28px; }
.story__list { list-style: none; margin: 0 0 26px; padding: 0; position: relative; display: grid; gap: 22px; }
.story__line { position: absolute; inset-block: 0; inset-inline-start: 16px; width: 3px; background: rgba(255,255,255,.14); border-radius: 3px; }
.story__line b { display: block; height: 100%; background: var(--gold); transform: scaleY(0); transform-origin: top; border-radius: 3px; }
.story__ch { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; margin-inline-start: 42px; padding: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; }
.story__art { background: #F7F1E2; border-radius: 12px; }
.story__art svg { display: block; width: 100%; height: auto; }
.story__txt em { font: 800 15px var(--head); color: var(--gold-lt); font-style: normal; }
.story__txt h3 { margin: 2px 0 5px; color: #fff; font-size: clamp(18px, 2.2vw, 24px); }
.story__txt p { margin: 0; opacity: .9; }
.story__note { font-size: 12.5px; opacity: .72; margin: 14px 0 0; }
.sellers__row img { height: 24px; max-width: 100px; object-fit: contain; display: block; }
/* Product page motion */
.pi { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 45%, #0F6B50, #07382B); transition: background-color .4s; cursor: pointer; overflow: hidden; }
.pi::after { content: ""; position: absolute; inset: 0; background: inherit; z-index: -1; }
.pi.is-out { background: transparent; pointer-events: none; }
.pi.is-out .pi__ring, .pi.is-out .pi__rays, .pi.is-out .pi__txt { opacity: 0; transition: opacity .25s; }
.pi__img { grid-area: 1 / 1; width: min(52vw, 340px); aspect-ratio: 1; object-fit: contain; padding: 18px; background: #fff; border-radius: 26px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); animation: piIn .7s var(--ease) both; }
@keyframes piIn { from { opacity: 0; transform: scale(.35) rotate(-10deg); } }
.pi__ring { grid-area: 1 / 1; width: min(70vw, 460px); aspect-ratio: 1; border-radius: 50%; border: 3px dashed var(--gold-lt); animation: piSpin 6s linear infinite, piFade .6s both; }
@keyframes piSpin { to { rotate: 360deg; } }
@keyframes piFade { from { opacity: 0; transform: scale(.6); } }
.pi__rays { grid-area: 1 / 1; width: 0; height: 0; }
.pi__rays i { position: absolute; width: 4px; height: 26px; margin: -13px 0 0 -2px; background: var(--gold-lt); border-radius: 3px; animation: piRay .9s var(--ease) .15s both; rotate: var(--a); }
@keyframes piRay { from { opacity: 0; transform: translateY(-40px) scaleY(.3); } 50% { opacity: 1; } to { opacity: 0; transform: translateY(min(-46vw, -300px)) scaleY(1); } }
.pi__txt { position: absolute; inset-block-end: 12%; inset-inline: 18px; text-align: center; color: #fff; display: grid; gap: 4px; animation: bnUp .6s var(--ease) .3s both; }
.pi__txt small { color: var(--gold-lt); font-weight: 700; }
.pi__txt b { font: 700 clamp(17px, 2.6vw, 26px)/1.3 var(--head); }
#galleryMain { position: relative; }
.pt-chips { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: grid; gap: 6px; justify-items: start; pointer-events: none; z-index: 2; }
.pt-chip { display: flex; gap: 6px; align-items: baseline; padding: 4px 10px; font-size: 12px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.6); animation: chipIn .55s var(--ease) calc(var(--i) * .12s + .1s) both; }
.pt-chip small { color: var(--muted); }
@keyframes chipIn { from { opacity: 0; transform: translateX(-16px) scale(.85); } }
#mainPhoto { animation: photoFloat 5s ease-in-out 1s infinite alternate; }
@keyframes photoFloat { to { transform: translateY(-6px); } }
.card__media, .conveyor__i { background: linear-gradient(100deg, #f4f3ef 30%, #fbfaf7 50%, #f4f3ef 70%) 0 0 / 200% 100%; }
.card__media:has(img:not(.img-failed)) { background-image: none; background-color: #fff; }
img.img-failed { opacity: 0; }
@media (max-width: 760px) {
  .bn-track { min-height: 400px; }
  .bn { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 18px 16px 38px; align-items: start; }
  .bn__art { height: 210px; }
  .bn-dots { inset-inline-start: 12px; inset-block-end: 6px; }
  .story__ch { grid-template-columns: 1fr; margin-inline-start: 26px; }
  .story__line { inset-inline-start: 6px; }
  .story__art { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .art-box, .art-pulse, .art-spark, .art-drive, .art-grow, .bn.is-on .bn__txt > *, .bn.is-on .bn__art, #mainPhoto, .pt-chip { animation: none; } .story__line b { transform: none; } }
.story .eyebrow { color: var(--gold-lt); }

/* Welcome band */
.wb { padding: 44px 0 34px; background: radial-gradient(90% 120% at 50% 0%, #fff, var(--paper)); text-align: center; }
.wb__title { margin: 0; font: 800 clamp(26px, 4.4vw, 46px)/1.25 var(--head); color: var(--green-d); }
.wb__title span { display: inline-block; animation: wbWord .7s var(--ease) calc(var(--i) * .1s) both; }
@keyframes wbWord { from { opacity: 0; transform: translateY(22px) scale(.9); } }
.wb__sub { margin: 8px auto 24px; max-width: 620px; color: var(--muted); font-size: clamp(14px, 1.6vw, 17px); }
.wb__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: start; }
.wb__card { display: grid; gap: 7px; align-content: start; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: box-shadow .3s, translate .3s; }
.wb__card:hover { translate: 0 -5px; box-shadow: 0 20px 34px -24px rgba(7,56,43,.6); }
.wb__card b { font: 700 18px/1.3 var(--head); color: var(--green-d); }
.wb__card > span:not(.wb__ico) { color: var(--muted); font-size: 14px; }
.wb__card em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--copper); margin-top: 4px; }
.wb__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--green-d); color: var(--gold-lt); animation: wbPulse 3s ease-in-out infinite; }
@keyframes wbPulse { 50% { scale: 1.08; } }
/* Platform logos */
.sellers__row { flex-wrap: wrap; justify-content: center; }
.plat { display: inline-grid; place-items: center; min-width: 84px; height: 46px; padding: 7px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; animation: chipIn .55s var(--ease) calc(var(--i) * .05s) both; transition: translate .25s, box-shadow .25s; }
.plat:hover { translate: 0 -3px; box-shadow: 0 12px 20px -16px rgba(0,0,0,.5); }
.plat img { height: 26px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.plat b { background: none !important; padding: 0 !important; font: 700 14px var(--head); }
.sellers__note { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 11.5px; }
/* Theme blocks */
.tb-list { display: grid; gap: 34px; }
.tb { scroll-margin-top: 150px; --a: #0F6B50; --b: #07382B; --soft: #EDF4F0; }
.tb--1 { --a: #A9682B; --b: #5A3413; --soft: #F8EFE3; } .tb--2 { --a: #1F5FBF; --b: #123A7A; --soft: #E9F0FB; } .tb--3 { --a: #A32E4B; --b: #5E1730; --soft: #F9E9EE; } .tb--4 { --a: #5C4FB3; --b: #322A72; --soft: #EEECFA; } .tb--5 { --a: #0B7E8A; --b: #07474F; --soft: #E5F4F6; }
.tb__head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: #fff; border-radius: 16px 16px 0 0; background: linear-gradient(110deg, var(--b), var(--a)); }
.tb__head h3 { margin: 0; color: #fff; font: 800 clamp(18px, 2.4vw, 25px)/1.25 var(--head); }
.tb__head small { opacity: .85; }
.tb__icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: rgba(255,255,255,.16); border-radius: 13px; animation: tbIcon 4s ease-in-out infinite; }
@keyframes tbIcon { 50% { rotate: 6deg; scale: 1.06; } }
.tb__orb { position: absolute; inset-inline-end: 8%; top: -36px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.1); animation: tbOrb 7s ease-in-out infinite alternate; }
.tb__orb--2 { inset-inline-end: 26%; top: 24px; width: 54px; height: 54px; animation-duration: 5s; }
@keyframes tbOrb { to { translate: -26px 16px; } }
.tb__grid { padding: 14px; background: var(--soft); }
.tb__more { padding: 0 14px 14px; text-align: center; background: var(--soft); }
.tb__quote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--a); border-radius: 0 0 16px 16px; }
.tb__quote div { display: grid; gap: 2px; min-width: 0; } .tb__quote b { font: 700 16px var(--head); color: var(--b); } .tb__quote span { font-size: 13.5px; color: var(--muted); }
.tb__quote .btn span { color: inherit; font-size: inherit; }
.card__quote { margin-top: 7px; width: 100%; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--green-d); background: #fff; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: background .2s, color .2s; }
.card__quote:hover { background: var(--green-d); color: #fff; }
/* Service center */
.svc__how { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13px; opacity: .92; }
@media (max-width: 760px) { .wb__cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wb__title span, .wb__ico, .plat, .tb__icon, .tb__orb { animation: none; } }

/* Logos and e-commerce motion replace product pictures on the home page */
.fly { display: grid; place-items: center; color: var(--green-d); }
.fly .ico { width: 62%; height: 62%; }
.scene-tile { display: grid; place-items: center; color: var(--green-d); }
.scene-tile__in { display: grid; place-items: center; width: 100%; height: 100%; }
.scene-tile__in img { width: 100%; height: 100%; object-fit: contain; }
.scene-tile__in .ico { width: 58%; height: 58%; }
.scene-tile__in.is-pop { animation: tilePop .6s var(--ease); }
.plat { position: relative; overflow: hidden; animation: chipIn .55s var(--ease) calc(var(--i) * .06s) both, platFloat 3.4s ease-in-out calc(var(--i) * .22s + .7s) infinite alternate; }
@keyframes platFloat { to { translate: 0 -6px; box-shadow: 0 12px 20px -14px rgba(7,56,43,.55); } }
.plat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%); transform: translateX(-130%); animation: badgeShine 5s ease-in-out calc(var(--i) * .35s) infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .plat, .plat::after, .scene-tile__in.is-pop { animation: none; } }

/* Photo bands */
.pb { position: relative; display: block; overflow: hidden; min-height: clamp(240px, 34vw, 400px); border-radius: 20px; background: var(--green-d); color: #fff; }
.pb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s ease-out; }
.pb.is-in img { transform: none; }
.pb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,30,23,.85), rgba(4,30,23,.1) 65%); }
.pb__txt { position: absolute; z-index: 1; inset-inline: clamp(16px, 3vw, 34px); inset-block-end: clamp(14px, 2.6vw, 28px); display: grid; gap: 5px; max-width: 640px; }
.pb__txt b { font: 800 clamp(22px, 3.4vw, 40px)/1.2 var(--head); }
.pb__txt span { font-size: clamp(14px, 1.5vw, 17px); }
.pb__txt small { font-size: 11px; opacity: .75; }
.tb-list > .sellers { border-radius: 18px; }
.story__art { overflow: hidden; aspect-ratio: 4 / 3; }
.story__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-pic { aspect-ratio: 4 / 3; height: auto; max-height: 480px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) { .pb img { transform: none; transition: none; } }

/* City hero */
.ws-hero { background: #05251C; }
.ws-hero::before { opacity: .12; z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 1.4s ease, transform 8s linear; }
.hero-bg img.is-on { opacity: 1; transform: scale(1); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4,30,23,.92) 12%, rgba(4,30,23,.62) 55%, rgba(4,30,23,.42)); }
[dir="rtl"] .hero-bg::after { background: linear-gradient(260deg, rgba(4,30,23,.92) 12%, rgba(4,30,23,.62) 55%, rgba(4,30,23,.42)); }
.hero-bg__tag { position: absolute; z-index: 1; inset-block-end: 12px; inset-inline-end: 16px; padding: 3px 12px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); border-radius: 999px; }
.ws-hero__in, .ws-hero .markets { position: relative; z-index: 2; }
.hs { position: relative; padding-block-end: 30px; }
.hs__office { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 20px; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); animation: bnArt 1s var(--ease) both; }
.hs__city { position: absolute; width: 24%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 18px 32px -14px rgba(0,0,0,.8); animation: tileBob 3.8s ease-in-out infinite alternate; }
.hs__city img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs__city b { position: absolute; inset: auto 0 0; padding: 12px 6px 5px; font-size: 13px; color: #fff; text-align: center; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); }
.hs__city--a { inset-block-end: 0; inset-inline-start: -10px; }
.hs__city--b { inset-block-end: 0; inset-inline-end: -10px; animation-delay: -1.6s; }
/* Vision 2030 */
.vision { background: linear-gradient(120deg, #07382B, #0F6B50); color: #fff; padding: 34px 0; }
.v30 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: center; }
.v30__txt { display: grid; gap: 8px; justify-items: start; }
.v30__txt .eyebrow { color: var(--gold-lt); }
.v30__txt h2 { margin: 0; color: #fff; font: 800 clamp(22px, 3vw, 34px)/1.25 var(--head); }
.v30__txt p { margin: 0; max-width: 62ch; opacity: .92; }
.v30__txt a { color: var(--gold-lt); font-weight: 700; }
.v30__txt small { font-size: 11.5px; opacity: .72; }
.v30__art { padding: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; display: grid; gap: 10px; }
.v30__year { font: 800 clamp(48px, 7vw, 82px)/1 var(--head); text-align: center; background: linear-gradient(90deg, var(--gold-lt), #fff, var(--gold-lt)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: v30Shine 5s linear infinite; }
@keyframes v30Shine { to { background-position: 200% 0; } }
.v30__bar { height: 12px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; direction: ltr; }
.v30__bar i { display: block; height: 100%; width: 57%; background: var(--gold); border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease) .3s; }
.v30__art.is-in .v30__bar i { transform: none; }
.v30__nums { display: flex; justify-content: space-between; font-size: 12.5px; }
.v30__nums span { display: grid; gap: 1px; }
.v30__nums span:last-child { text-align: end; }
.v30__nums b { font: 800 22px var(--head); color: var(--gold-lt); }
.v30__art > small { text-align: center; opacity: .8; }
@media (max-width: 760px) { .v30 { grid-template-columns: 1fr; } .hs__city--a { inset-inline-start: 2px; } .hs__city--b { inset-inline-end: 2px; } .hs__city { width: 22%; } }
@media (prefers-reduced-motion: reduce) { .hero-bg img { transition: none; transform: none; } .hs__office, .hs__city, .v30__year { animation: none; } .v30__bar i { transform: none; transition: none; } }

/* Business hub */
.ws-scene { min-width: 0; }
.hub { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__line { fill: none; stroke: rgba(255,255,255,.4); stroke-width: .35; stroke-dasharray: 1.4 1.4; animation: hubFlow 2s linear infinite; }
.hub__line.is-on { stroke: var(--gold-lt); stroke-width: .7; }
@keyframes hubFlow { to { stroke-dashoffset: -5.6; } }
.hub__dot { fill: var(--gold-lt); }
.hub__core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-content: center; gap: 2px; text-align: center; color: var(--green-d); background: #fff; border: 3px solid var(--gold); border-radius: 50%; box-shadow: 0 16px 34px -10px rgba(0,0,0,.7); z-index: 2; }
.hub__core b { font: 800 clamp(11px, 1.35vw, 17px)/1.2 var(--head); }
.hub__core small { font-size: clamp(9px, .95vw, 12px); color: var(--muted); }
.hub__ring { position: absolute; inset: -9%; border: 2px solid var(--gold-lt); border-radius: 50%; animation: hubRing 2.8s ease-out infinite; }
.hub__ring--2 { animation-delay: 1.4s; }
@keyframes hubRing { from { opacity: .8; transform: scale(.95); } to { opacity: 0; transform: scale(1.5); } }
.hub__node { position: absolute; width: 21%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; padding: 0; background: none; color: #fff; cursor: pointer; z-index: 3; animation: hubIn .7s var(--ease) calc(var(--i) * .1s) both; }
@keyframes hubIn { from { opacity: 0; scale: .4; } }
.hub__node img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 12px 24px -10px rgba(0,0,0,.8); transition: scale .35s var(--ease), border-color .35s; }
.hub__node span { font-size: clamp(11px, 1.05vw, 13.5px); font-weight: 700; white-space: nowrap; padding: 1px 9px; background: rgba(4,30,23,.72); border-radius: 999px; transition: background .35s, color .35s; }
.hub__node:hover img, .hub__node.is-on img { scale: 1.14; border-color: var(--gold-lt); }
.hub__node.is-on span { background: var(--gold); color: #1B1408; }
.hub__node:focus-visible img { outline: 3px solid var(--gold-lt); outline-offset: 2px; }
@media (max-width: 900px) { .hub { width: min(100%, 440px); } .hub__node { width: 22%; } .hub__core b { font-size: 13px; } .hub__core small { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .hub__line, .hub__ring, .hub__node { animation: none; } .hub__ring { display: none; } }
.hub { margin-block-end: 34px; }
.hero-bg__tag { inset-block: 12px auto; }


/* Trust and payment strip */
.trust { display: flex; align-items: center; gap: 14px; padding: 6px clamp(10px, 2vw, 22px); background: #fff; border-bottom: 1px solid var(--line); }
.trust__fixed { flex: none; display: flex; align-items: center; gap: 12px; }
.trust__v img { height: 38px; width: auto; display: block; }
.trust__vat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--green-d); white-space: nowrap; }
.trust__vat small { font-weight: 400; color: var(--muted); }
.trust__vat img { height: 26px; width: auto; }
.trust__pay { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.trust__pay::-webkit-scrollbar { display: none; }
#payChips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm { position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 58px; height: 38px; padding: 3px 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.pm img { height: 18px; width: auto; max-width: 64px; object-fit: contain; display: block; }
.pm b { font-size: 12px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.pm small { font-size: 9px; line-height: 1; color: #8A5A00; white-space: nowrap; }
.pm.is-soon img, .pm.is-soon b { opacity: .62; }
.pm--txt { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.pay-logos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-inline-start: auto; }
.pay-logos img { height: 16px; width: auto; max-width: 54px; object-fit: contain; }
.pay-logos b { font-size: 12px; }
.pay-opt--soon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); opacity: .85; cursor: not-allowed; }
.pay-opt--soon em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 8px; color: #7A5200; background: #FFF0CC; border-radius: 999px; }
.bank-acct__logo img { height: 26px; width: auto; max-width: 110px; object-fit: contain; display: block; }
.bank-acct .btn { justify-self: start; min-height: 36px; padding: 4px 16px; }
/* Vision logo and people */
.v30__logo { height: clamp(64px, 8vw, 96px); width: auto; padding: 8px 12px; background: #fff; border-radius: 12px; }
.v30__goal { padding-inline-start: 11px; border-inline-start: 3px solid var(--gold); }
.v30__people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.v30__people img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; display: block; }
.v30__people small { grid-column: 1 / -1; font-size: 11px; opacity: .72; }
@media (max-width: 760px) { .trust { flex-wrap: wrap; gap: 6px; } .trust__fixed { width: 100%; justify-content: space-between; } .trust__pay { flex-basis: 100%; } .v30__people { gap: 7px; } }

/* Header strip: Vision and VAT only. Payment logos live in the footer. */
.trust { justify-content: space-between; padding-block: 4px; }
.trust__fixed { width: 100%; justify-content: space-between; }
#payChips { justify-content: center; gap: 8px; }
#payChips .pm { height: 40px; min-width: 66px; }
#payChips .pm img { height: 20px; }

.v30__people { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.v30__people img { aspect-ratio: 1; object-position: top; }

/* Vision and VAT in the footer */
.foot-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.foot-trust__v img { height: 62px; width: auto; display: block; padding: 6px 10px; background: #fff; border-radius: 10px; }
.foot-trust__vat { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; }
.foot-trust__vat small { font-weight: 400; opacity: .8; }
.foot-trust__vat img { height: 30px; width: auto; }
/* Larger animated store name in the header */
.header .logo { gap: 10px; align-items: center; font-size: clamp(24px, 2.5vw, 34px); line-height: 1; white-space: nowrap; }
.header .logo__mark { width: 13px; height: 38px; border-radius: 4px; background: linear-gradient(180deg, var(--gold-lt), var(--gold) 55%, #fff); background-size: 100% 200%; animation: logoMark 2.8s ease-in-out infinite alternate; }
@keyframes logoMark { from { background-position: 0 0; transform: scaleY(.86); } to { background-position: 0 100%; transform: scaleY(1.06); } }
.header .logo b { font-weight: 800; letter-spacing: .01em; color: transparent; background: linear-gradient(100deg, #fff 35%, var(--gold-lt) 50%, #fff 65%) 0 0 / 240% 100%; -webkit-background-clip: text; background-clip: text; animation: logoShine 4.5s linear infinite; }
@keyframes logoShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.header .logo span:last-child { font-size: .5em; font-weight: 700; letter-spacing: .1em; padding: 5px 9px; color: var(--gold-lt); border: 1.5px solid var(--gold-lt); border-radius: 7px; animation: logoTag 3.2s ease-in-out infinite; }
@keyframes logoTag { 50% { box-shadow: 0 0 0 4px rgba(235,212,142,.2); } }
.header .logo:hover span:last-child { background: var(--gold-lt); color: var(--green-d); }
.header .logo__img { height: 54px; max-width: 240px; }
@media (max-width: 480px) { .header .logo { font-size: 21px; gap: 6px; } .header .logo__mark { width: 9px; height: 28px; } .header .logo span:last-child { font-size: 10.5px; padding: 3px 5px; letter-spacing: .06em; } .header .logo__img { height: 38px; max-width: 150px; } }
@media (prefers-reduced-motion: reduce) { .header .logo__mark, .header .logo b, .header .logo span:last-child { animation: none; } .header .logo b { color: #fff; background: none; } }

/* Story: fill the empty space */
.story__ch { grid-template-columns: 170px 1fr auto; }
.story__ico { width: 62px; height: 62px; margin-inline-end: 12px; display: grid; place-items: center; color: var(--gold-lt); background: rgba(255,255,255,.08); border: 1px solid rgba(235,212,142,.35); border-radius: 50%; animation: wbPulse 3.2s ease-in-out calc(var(--i) * .3s) infinite; }
.story__ico .ico { width: 28px; height: 28px; }
.story__end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: center; }
.story__go { display: grid; gap: 12px; justify-items: start; }
.story__go .story__note { margin: 0; }
.story__sell { display: grid; gap: 12px; padding: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; }
.story__sell > b { font: 700 16px var(--head); color: var(--gold-lt); }
.story__logos { display: flex; flex-wrap: wrap; gap: 8px; }
.story__logos .plat b { color: var(--green-d); }
.story__svc { display: flex; flex-wrap: wrap; gap: 8px; }
.story__svc span { padding: 5px 13px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; animation: chipIn .55s var(--ease) calc(var(--i) * .08s) both; }
@media (max-width: 900px) { .story__end { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .story__ch { grid-template-columns: 1fr; } .story__ico { display: none; } }
@media (prefers-reduced-motion: reduce) { .story__ico, .story__svc span { animation: none; } }

/* Retail and wholesale */
.acct-link { font-weight: 700; color: var(--copper) !important; }
.mode-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-block: 10px 14px; padding: 10px 14px; font-size: 14px; background: #FFF8E6; border: 1px solid #EAD48F; border-radius: 12px; }
.mode-note .btn { min-height: 36px; padding: 4px 16px; }
.mode-note--w { background: #E7F4EC; border-color: #A8D6BC; }
.mode-note a:not(.btn) { font-weight: 700; color: var(--copper); }
.price--soon a { color: var(--copper); font-size: 12.5px; font-weight: 700; }
.acct { padding-block: 30px 60px; display: grid; gap: 14px; }
.acct h1 { margin: 0; }
.acct__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.acct__card { display: grid; gap: 10px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.acct__card h2 { margin: 0; font-size: 20px; }
.acct__err { margin: 0; min-height: 1em; font-size: 13.5px; color: #B3261E; }
.acct__status { padding: 12px 14px; font-weight: 600; background: #FFF0CC; border-radius: 12px; }
.acct__status--approved { background: #CFF1DE; } .acct__status--rejected { background: #FBE3E1; }
.acct__dl { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; margin: 0; } .acct__dl dt { color: var(--muted); } .acct__dl dd { margin: 0; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .acct__grid { grid-template-columns: 1fr; } }

@media print { .ticker, .header, #catnav, .footer, .wa-fab, .no-print, .bank-box, .proof-box, .progress, .consent { display: none !important; } }

/* Quotation and invoice sheet */
.doc-wrap { padding-block: 22px 50px; display: grid; gap: 14px; justify-items: center; }
.doc-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.doc { width: min(100%, 780px); padding: 30px; background: #fff; color: #111; border: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; display: grid; gap: 18px; }
.doc__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 3px solid #C8A24A; }
.doc__brand { display: grid; gap: 8px; min-width: 0; flex: 1 1 280px; }
.doc__brand img { height: 56px; width: auto; max-width: 240px; object-fit: contain; }
.doc__logo { display: inline-flex; align-items: center; gap: 8px; color: #07382B; }
.doc__logo i { width: 11px; height: 32px; border-radius: 3px; background: #C8A24A; }
.doc__logo b { font: 800 26px/1 Arial, sans-serif; }
.doc__logo span { padding: 3px 7px; font: 700 12px/1 Arial, sans-serif; letter-spacing: .08em; color: #8A6A1F; border: 1.5px solid #C8A24A; border-radius: 5px; }
.doc__co, .doc__to { font-size: 12.5px; }
.doc__co > div, .doc__to > div, .doc__title > div, .doc__sum > div { display: flex; flex-wrap: wrap; gap: 8px; }
.doc__co span, .doc__to span, .doc__title span { color: #555; }
.doc__title { display: grid; gap: 2px; align-content: start; }
.doc__title h1 { margin: 0 0 4px; font-size: 24px; color: #07382B; }
.doc__to h2 { margin: 0 0 3px; font-size: 13px; color: #555; }
.doc table { width: 100%; border-collapse: collapse; }
.doc th, .doc td { padding: 7px 8px; border: 1px solid #BBB; text-align: start; }
.doc th { background: #EDF3EF; font-size: 12.5px; }
.doc__sum { display: grid; gap: 3px; justify-self: end; min-width: 260px; }
.doc__sum > div { justify-content: space-between; }
.doc__total { padding-top: 6px; font-size: 16px; font-weight: 800; color: #07382B; border-top: 2px solid #07382B; }
.doc__foot { font-size: 11.5px; color: #555; border-top: 1px solid #DDD; padding-top: 8px; }
.doc__foot p { margin: 2px 0; }
.vat-tick { display: flex; align-items: center; gap: 8px; margin-block: 8px; font-size: 14px; }
.vat-tick input { width: 18px; height: 18px; }
@media (max-width: 560px) { .doc { padding: 16px; font-size: 12.5px; } .doc th, .doc td { padding: 5px; } }
@media print { .doc { border: 0; width: 100%; padding: 0; } .doc-wrap { padding: 0; } }

.doc__stamp { justify-self: start; margin-block: 2px 6px; padding: 3px 14px; font: 800 18px/1.3 Arial, sans-serif; letter-spacing: .06em; color: #0B7A4B; border: 3px solid #0B7A4B; border-radius: 6px; transform: rotate(-4deg); }

.doc__banner { margin: -30px -30px 0; padding: 16px 30px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; color: #fff; background: #07382B; border-bottom: 4px solid #C8A24A; }
.doc__banner h1 { margin: 0; color: #fff; font: 800 28px/1.2 Arial, Tahoma, sans-serif; letter-spacing: .01em; }
.doc__banner span { font: 700 13px/1.3 Arial, Tahoma, sans-serif; letter-spacing: .08em; color: #EBD48E; }
@media (max-width: 560px) { .doc__banner { margin: -16px -16px 0; padding: 12px 16px; } .doc__banner h1 { font-size: 22px; } }
@media print { .doc__banner { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

.doc-ok { display: grid; gap: 2px; width: min(100%, 780px); padding: 12px 16px; text-align: center; background: #E7F4EC; border: 1px solid #A8D6BC; border-radius: 12px; }
.doc-ok b { font-size: 17px; color: #07382B; }

/* Cart, quotations and orders */
.cart-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.q-answer { display: grid; gap: 10px; padding: 16px; background: #FFF8E6; border: 1px solid #EAD48F; border-radius: 14px; }
.q-answer h2 { margin: 0; font-size: 19px; }
.q-answer h3 { margin: 0; }
.my-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.my-tabs a { padding: 8px 18px; font-weight: 700; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.my-tabs a.is-on { color: #fff; background: var(--green-d); border-color: var(--green-d); }
.my-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.my-row small { display: block; color: var(--muted); }
.my-cart { display: grid; gap: 10px; justify-items: start; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }

/* Saudi Arabia and Dubai markets */
.mkt-bar { background: #fff; border-block-end: 1px solid var(--line); }
.mkt-bar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding-block: 7px; }
.mkt-bar__sw { display: inline-flex; gap: 4px; padding: 3px; background: #EEF3F0; border-radius: 999px; }
.mkt-bar__sw button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; font: 700 13.5px var(--body, inherit); color: var(--green-d); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.mkt-bar__sw button i { font-style: normal; }
.mkt-bar__sw button small { font-size: 11px; font-weight: 600; opacity: .72; }
.mkt-bar__sw button.is-on { color: #fff; background: var(--green-d); }
.mkt-bar__n { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.av-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-block: 4px; }
.av-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; font-size: 11px; font-weight: 700; color: var(--green-d); background: #E8F2EE; border-radius: 999px; }
.av-tag i { font-style: normal; }
.av-note { display: block; margin-block: 4px; font-size: 13px; font-weight: 700; color: #A23B1E; text-decoration: underline; }
.bottom-nav { background: #fff; }
/* Phones: the old pinned story height left a blank screen */
.story { height: auto; }
.heritage { margin-top: 28px; display: grid; gap: 12px; }
.heritage h3 { margin: 0; font: 800 clamp(19px, 2.4vw, 26px)/1.3 var(--head); color: var(--gold-lt); }
.heritage__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.heritage figure { position: relative; margin: 0; overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 4; }
.heritage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s linear; }
.heritage figure:hover img, .heritage figure.is-in img { transform: scale(1.07); }
.heritage figcaption { position: absolute; inset: auto 0 0; display: flex; gap: 6px; padding: 26px 10px 9px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.heritage figcaption i { font-style: normal; }
/* Vision 2030 infographic */
.v30x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 28px; align-items: center; }
.v30x__logo { position: relative; display: grid; place-items: center; padding: clamp(22px, 4vw, 40px); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0,0,0,.8); }
.v30x__logo img { position: relative; width: min(100%, 330px); height: auto; display: block; animation: v30Pop 1.1s var(--ease) both; }
.v30x__ring { position: absolute; width: 150%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(26,155,120,.22) 82%, rgba(201,162,75,.3) 92%, transparent); animation: v30Spin 9s linear infinite; }
@keyframes v30Pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes v30Spin { to { transform: rotate(360deg); } }
.v30s__t { margin: 30px 0 4px; font: 800 clamp(20px, 2.6vw, 28px)/1.3 var(--head); color: var(--gold-lt); }
.v30s__s { margin: 0 0 14px; opacity: .88; }
.v30s { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.v30s__i { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; }
.v30s__i > em { display: grid; place-items: center; width: 42px; height: 42px; font: 800 18px var(--head); font-style: normal; color: #07382B; background: var(--gold-lt); border-radius: 50%; box-shadow: 0 0 0 0 rgba(233,205,134,.55); }
.v30s__i.is-count > em { animation: v30Ping 1.5s ease-out 1; }
@keyframes v30Ping { to { box-shadow: 0 0 0 16px rgba(233,205,134,0); } }
.v30s__b h4 { margin: 0 0 3px; font: 800 17px var(--head); color: #fff; }
.v30s__b p { margin: 0 0 10px; font-size: 14px; opacity: .9; }
.v30s__kpi { padding-top: 9px; border-top: 1px dashed rgba(255,255,255,.26); }
.v30s__kpi > small { display: block; font-size: 12px; opacity: .84; }
.v30s__nums { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 5px; }
.v30s__nums span { display: grid; font-size: 11px; opacity: .92; }
.v30s__nums span:last-child { text-align: end; }
.v30s__nums b { font: 800 23px/1.15 var(--head); color: #fff; }
.v30s__nums span:last-child b { color: var(--gold-lt); font-size: 30px; }
.v30s__bar { position: relative; height: 9px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.v30s__bar i, .v30s__bar u { position: absolute; inset-block: 0; left: 0; border-radius: inherit; }
.v30s__bar i { width: var(--z); background: var(--gold); transform-origin: left; transform: scaleX(calc(var(--scale, 1))); transition: width 1.5s var(--ease); }
.v30s__bar u { width: var(--a); background: rgba(255,255,255,.62); }
.v30s__i:not(.is-count) .v30s__bar i { width: var(--a); }
.sell-pics { margin-top: 12px; display: grid; gap: 10px; }
.sell-pics .v30s__t { margin-top: 18px; }
.sell-pics__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sell-pics figure { margin: 0; overflow: hidden; background: #fff; color: var(--ink, #14211C); border-radius: 16px; }
.sell-pics figure > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sell-pics figcaption { display: grid; gap: 6px; padding: 10px 12px 12px; }
.sell-pics figcaption b { font-size: 14px; }
.sell-pics__logos { display: flex; align-items: center; gap: 10px; height: 22px; }
.sell-pics__logos img { height: 20px; width: auto; max-width: 84px; object-fit: contain; }
.sell-pics > small { font-size: 11px; opacity: .72; }
@media (max-width: 760px) {
  .mkt-bar__n { font-size: 11.5px; }
  .heritage__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v30x, .v30s { grid-template-columns: minmax(0, 1fr); }
  .sell-pics__g { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .v30x__logo img, .v30x__ring, .v30s__i.is-count > em { animation: none; } .v30s__bar i, .heritage img { transition: none; } .v30s__i:not(.is-count) .v30s__bar i { width: var(--z); } .heritage figure.is-in img { transform: none; } }

.intro__name { flex-wrap: nowrap; white-space: nowrap; max-width: none; font-size: clamp(22px, 6vw, 62px); }
.intro__name ~ * { max-width: 62vw; margin-inline: auto; text-align: center; }

/* Logo */
.logo__mark { display: none; }
.header .logo { position: relative; display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px; font-size: clamp(27px, 2.900vw, 40px); }
.header .logo b { position: relative; display: inline-flex; color: #fff; background: none; animation: none; font-weight: 900; letter-spacing: .015em; text-shadow: 0 2px 0 rgba(0,0,0,.28), 0 0 18px rgba(233,205,134,.28); -webkit-text-fill-color: #fff; }
.logo b .l { display: inline-block; transform-origin: 50% 100%; }
.header .logo b .l { animation: logoHop 8s var(--i, 0) infinite; animation-delay: calc(.6s + var(--i) * .13s); }
@keyframes logoHop { 0%, 11%, 100% { transform: none; } 2.500% { transform: translateY(-.34em) scale(.97, 1.04); } 5% { transform: translateY(0) scale(1.08, .88); } 7% { transform: translateY(-.13em); } 9% { transform: translateY(0) scale(1.03, .96); } }
.logo__ball { position: absolute; left: -4%; top: 60%; width: .3em; height: .3em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFF4C9, var(--gold) 62%, #94701F); box-shadow: 0 2px 5px rgba(0,0,0,.4); opacity: 0; pointer-events: none; }
.header .logo__ball { animation: logoBall 8s linear .6s infinite; z-index: 2; }
@keyframes logoBall { 0% { left: -4%; top: 62%; opacity: 0; } 1% { opacity: 1; } 2.500% { left: 9%; top: -32%; } 4% { left: 22%; top: -2%; } 5.500% { left: 34%; top: -32%; } 7% { left: 47%; top: -2%; } 8.500% { left: 60%; top: -32%; } 10% { left: 73%; top: -2%; } 11.500% { left: 86%; top: -32%; } 13% { left: 100%; top: 62%; opacity: 1; } 13.500%, 100% { left: 100%; top: 62%; opacity: 0; } }
.logo__flags { display: inline-flex; align-items: center; gap: 4px; }
.logo__flags img { display: block; height: .62em; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.logo .mk { display: inline-grid; place-items: center; min-width: 2.300em; padding: .24em .34em; font: 800 clamp(9.500px, .9vw, 12.500px)/1 var(--head); font-style: normal; letter-spacing: .04em; color: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.logo .mk--sa { background: #006C35; }
.logo .mk--ae { background: linear-gradient(90deg, #CE1126 0 22%, #0A0A0A 22%); padding-inline-start: .72em; }
.logo b .l { font-style: normal; }
.header .logo span.logo__sa:last-child, .header .logo:hover span.logo__sa:last-child { color: #082F24; background: linear-gradient(120deg, var(--gold-lt), var(--gold)); }
.header .logo .logo__sa { font-size: .46em; font-weight: 800; letter-spacing: .08em; padding: .42em .62em; color: #082F24; background: linear-gradient(120deg, var(--gold-lt), var(--gold)); border: 0; border-radius: 7px; animation: none; }
.logo--light .logo__sa { font-size: 12px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 5px; }
.logo--light b .l { display: inline-block; }
.logo--light .logo__flags { margin-inline: 4px; }
@media (max-width: 560px) {
  .header .logo { grid-auto-flow: row; grid-template-columns: auto 1fr; gap: 3px 6px; justify-items: start; font-size: clamp(23px, 7.700vw, 29px); }
  .header .logo b { grid-column: 1 / -1; }
  .header .logo .logo__sa { font-size: 10.500px; padding: 3px 7px; }
  .logo .mk { font-size: 8.500px; }
  .logo__flags img { height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .header .logo b .l, .header .logo__ball { animation: none; } }
/* Wholesale access */
.is-guest .qtyfld { display: none; }
.lock-tag { display: inline-block; margin-block: 3px; padding: 2px 8px; font-size: 11.500px; font-weight: 700; color: #7A5A12; background: #FFF4D6; border-radius: 999px; text-decoration: underline; }
/* Agree dialog */
dialog.agree { width: min(92vw, 470px); max-height: 88vh; overflow: auto; padding: 22px 20px; border: 0; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
dialog.agree::backdrop { background: rgba(4,30,23,.62); }
dialog.agree h2 { margin: 0 26px 6px 0; font: 800 21px/1.3 var(--head); }
[dir="rtl"] dialog.agree h2 { margin: 0 0 6px 26px; }
dialog.agree fieldset { margin: 8px 0 12px; padding: 0; border: 0; display: grid; gap: 6px; }
dialog.agree legend { margin-bottom: 6px; font-weight: 700; }
.agree__x { position: absolute; top: 10px; inset-inline-end: 12px; width: 34px; height: 34px; font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer; }
.agree__two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.agree__two .btn { text-align: center; }
.agree__later { display: block; margin: 10px auto 0; padding: 6px 12px; font-size: 13.500px; color: var(--muted); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.agree__r { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.agree__r:has(input:checked) { background: #E8F2EE; border-color: var(--green-d); }
.qnote { position: fixed; z-index: 85; inset-block-start: 14px; inset-inline-end: 14px; display: grid; gap: 4px; width: min(86vw, 300px); padding: 14px 16px; background: #fff; border-inline-start: 5px solid var(--gold); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.28); animation: qnIn .5s var(--ease) both; }
.qnote > button { position: absolute; top: 4px; inset-inline-end: 8px; font-size: 20px; background: none; border: 0; cursor: pointer; }
.qnote .btn { justify-self: start; margin-top: 6px; }
@keyframes qnIn { from { opacity: 0; transform: translateY(-16px); } }
/* Product files */
.pfiles { display: grid; gap: 10px; padding: 16px; background: #EFF7F3; border: 1px solid #BFDDD0; border-radius: 14px; }
.pfiles h2 { margin: 0; font-size: 19px; }
.pfiles p { margin: 0; }
.pfiles__steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.pfiles__steps li { counter-increment: st; padding: 3px 10px; font-size: 13px; font-weight: 700; background: #fff; border-radius: 999px; }
.pfiles__steps li::before { content: counter(st) ". "; color: var(--green-d); }
.pfiles__list { display: grid; gap: 8px; }
.pfiles__list > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #fff; border-radius: 10px; }
.pfiles__list small { display: block; color: var(--muted); }
.pfiles__list em { font-size: 13px; color: var(--muted); }
/* Greeter */
.gr { position: fixed; z-index: 65; inset-block-end: 14px; inset-inline-start: 12px; display: flex; align-items: flex-end; flex-direction: row-reverse; gap: 2px; pointer-events: none; opacity: 0; transform: translateY(140%); transition: transform .7s var(--ease), opacity .4s; }
[dir="rtl"] .gr { flex-direction: row-reverse; }
.gr.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gr svg { width: 104px; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
.gr.is-on .gr__arm { transform-origin: 94px 116px; animation: grWave 1s ease-in-out 5 alternate; }
@keyframes grWave { from { transform: rotate(-9deg); } to { transform: rotate(13deg); } }
.gr__bubble { position: relative; display: grid; gap: 4px; max-width: 176px; margin-bottom: 58px; padding: 10px 12px; font-size: 13.500px; line-height: 1.35; background: #fff; border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.gr__bubble a { font-size: 12.500px; font-weight: 700; color: var(--green-d); text-decoration: underline; }
.gr__x { position: absolute; z-index: 1; top: -8px; inset-inline-end: -4px; width: 26px; height: 26px; color: #fff; background: #0A3D2E; border: 0; border-radius: 50%; cursor: pointer; }
@media (max-width: 900px) { .gr { inset-block-end: 68px; } .gr svg { width: 84px; } .gr__bubble { margin-bottom: 44px; max-width: 160px; } }
.gr svg { width: 112px; }
@media (max-width: 900px) { .gr svg { width: 96px; } }
.agree__two { grid-template-columns: 1fr; }
.header .logo { justify-self: start; width: max-content; grid-auto-columns: max-content; }

/* Real numbers at the top of the store */
.lstats { background: linear-gradient(100deg, #07382B, #0F6B50); color: #fff; }
.lstats .wrap { padding-block: 10px; display: grid; gap: 6px; }
.lstats__g { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding-inline-start: 16px; }
.lstats__dot { position: absolute; inset-inline-start: 0; top: 7px; width: 9px; height: 9px; background: #4CE28D; border-radius: 50%; animation: lsPulse 1.8s ease-out infinite; }
@keyframes lsPulse { 0% { box-shadow: 0 0 0 0 rgba(76,226,141,.65); } 100% { box-shadow: 0 0 0 11px rgba(76,226,141,0); } }
.lstats__i { display: grid; flex: 1 1 96px; padding: 5px 10px; background: rgba(255,255,255,.1); border-radius: 10px; }
.lstats__i b { font: 800 20px/1.15 var(--head); color: var(--gold-lt); }
.lstats__i small { font-size: 11.500px; opacity: .92; }
.lstats__from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 12.500px; }
.lstats__from em { font-style: normal; opacity: .8; }
.lstats__from b { color: var(--gold-lt); }
.lstats__from small { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .lstats__dot { animation: none; } }
#acctUp { order: -1; }

/* Thank-you page */
.thanks { position: relative; display: grid; gap: 18px; padding-block: 26px 40px; overflow: hidden; }
.thanks__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: center; padding: 18px; background: linear-gradient(120deg, #07382B, #0F6B50); color: #fff; border-radius: 22px; }
.thanks__hero img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; animation: tyGift 3s ease-in-out infinite; }
@keyframes tyGift { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-8px); } }
.thanks__txt h1 { margin: 6px 0 8px; font: 800 clamp(24px, 3.400vw, 38px)/1.2 var(--head); color: #fff; }
.thanks__txt p { margin: 0 0 8px; opacity: .94; }
.thanks__tag { display: inline-block; padding: 4px 12px; font-size: 13px; font-weight: 700; color: #082F24; background: var(--gold-lt); border-radius: 999px; }
.thanks__no b { color: var(--gold-lt); }
.thanks__gift { padding: 14px 16px; background: #FFF8E6; border: 2px dashed var(--gold); border-radius: 14px; }
.thanks__gift p { margin: 4px 0 0; white-space: pre-line; }
.thanks__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.thanks__steps li { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.thanks__steps em { display: grid; place-items: center; flex: none; width: 32px; height: 32px; font-style: normal; font-weight: 800; color: var(--green-d); background: #E8F2EE; border-radius: 50%; }
.thanks__steps li.is-done em { color: #fff; background: var(--green-d); }
.thanks__fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.thanks__fx b { position: absolute; top: -12px; left: calc(var(--i) * 5.600%); width: 8px; height: 13px; border-radius: 2px; background: var(--gold); opacity: 0; animation: tyFall 2.800s ease-in calc(var(--i) * .11s) 2 both; }
.thanks__fx b:nth-child(3n) { background: #0F6B50; } .thanks__fx b:nth-child(3n+1) { background: #E9CD86; }
@keyframes tyFall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(520px) rotate(540deg); } }
@media (max-width: 700px) { .thanks__hero, .thanks__steps { grid-template-columns: minmax(0, 1fr); } .thanks__hero img { max-height: 260px; } }
@media (prefers-reduced-motion: reduce) { .thanks__hero img, .thanks__fx b { animation: none; } .thanks__fx { display: none; } }

/* Order progress and payment check */
.otrack { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: none; }
.otrack li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 11.500px; line-height: 1.25; color: var(--muted); }
.otrack li::before { content: ""; position: absolute; top: 14px; inset-inline-start: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.otrack li:first-child::before { display: none; }
.otrack li.is-done::before, .otrack li.is-now::before { background: var(--green-d); }
.otrack em { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; font-style: normal; font-weight: 800; color: var(--muted); background: #fff; border: 2px solid var(--line); border-radius: 50%; }
.otrack li.is-done em { color: #fff; background: var(--green-d); border-color: var(--green-d); }
.otrack li.is-now { color: var(--ink, #14211C); font-weight: 700; }
.otrack li.is-now em { color: var(--green-d); border-color: var(--green-d); animation: otPulse 1.6s ease-out infinite; }
@keyframes otPulse { 0% { box-shadow: 0 0 0 0 rgba(15,107,80,.45); } 100% { box-shadow: 0 0 0 10px rgba(15,107,80,0); } }
.pay-note { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; }
.pay-note--wait { background: #FFF8E6; border: 1px solid #EAD48F; }
.pay-note--bad { background: #FDECEA; border: 1px solid #F1B5AC; }
.pay-note--ok { background: #E8F5EE; border: 1px solid #A9D8BF; }
.qnote--ok { border-inline-start-color: #1B7A4B; }
@media (prefers-reduced-motion: reduce) { .otrack li.is-now em { animation: none; } }

/* Categories under the main picture */
.wb__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.wb__cat { display: grid; justify-items: center; gap: 4px; padding: 12px 10px 14px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform .25s var(--ease), box-shadow .25s; }
.wb__cat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(7,56,43,.55); }
.wb__catimg { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; background: #F4F6F3; border-radius: 12px; }
.wb__catimg img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.wb__catimg--all { color: var(--green-d); background: #E8F2EE; }
.wb__catimg--all .ico { width: 44%; height: 44%; }
.wb__cat b { font-size: 14px; line-height: 1.3; color: var(--ink, #14211C); }
.wb__cat small { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .wb__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .wb__cat { padding: 8px 6px 10px; } .wb__cat b { font-size: 12.500px; } }

.opt-in { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0; font-size: 14px; cursor: pointer; }
.opt-in input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.prefs { margin-block: 14px; display: grid; gap: 6px; justify-items: start; }
.prefs h2 { margin: 0 0 4px; font-size: 18px; }
.acct, .acct > *, .acct__dl, .acct__dl dt, .acct__dl dd { min-width: 0; }
.acct__dl dd, .order-page b, .doc__to, .my-row b { overflow-wrap: anywhere; }
.logo__ball { display: none; }
.header .logo__ball { display: block; }
.header { overflow-x: clip; }

/* Order summary, payment and cash on delivery */
.ord-h { margin: 14px 0 4px; font-size: 17px; }
.ord-sum { padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 13.500px; }
.ord-sum__t { width: 100%; border-collapse: collapse; }
.ord-sum__t th, .ord-sum__t td { padding: 6px 4px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.ord-sum__t th { font-size: 12px; color: var(--muted); }
.ord-sum__t small { display: block; color: var(--muted); }
.ord-sum .sums { margin: 8px 0 0; }
.cod-box { display: grid; gap: 8px; padding: 14px; background: #E8F5EE; border: 1px solid #A9D8BF; border-radius: 12px; }
.cod-box h4 { margin: 0; }
.cod-box p { margin: 0; }
.cod-box__wa { font-weight: 800; color: #128C5E; display: flex; align-items: center; gap: 6px; }
.otrack--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Real flags with a gentle wave */
.markets .mflag { position: relative; display: inline-block; width: 38px; height: 25px; overflow: hidden; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.35); transform-origin: left center; animation: flagWave 3.200s ease-in-out infinite; }
.markets .market:nth-child(3) .mflag { animation-delay: -1.600s; }
.markets .mflag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.markets .mflag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.35) 40%, rgba(0,0,0,.12) 60%, rgba(255,255,255,0) 80%) 0 0 / 250% 100%; animation: flagShine 3.200s linear infinite; }
@keyframes flagWave { 0%, 100% { transform: perspective(120px) rotateY(0deg) skewY(0deg); } 50% { transform: perspective(120px) rotateY(-14deg) skewY(-2deg); } }
@keyframes flagShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .markets .mflag, .markets .mflag::after { animation: none; } }