:root {
  --black: #000;
  --ink: #1c1c1c;
  --muted: #6b6b6b;
  --line: #e5e5e5;
  --soft: #f4f4f4;
  --white: #fff;
  --accent: #d6202a;
  --blue: #2189ff;
  --radius: 20px;
  --head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --body: "Inter", "Segoe UI", Arial, sans-serif;
  --max: 1440px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { font-family: var(--body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.no-scroll { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 26px; border-radius: 999px;
  font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: .2px;
  border: 1.5px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: #333; }
.btn-light { background: var(--white); color: var(--black); }
.btn-light:hover { background: #e8e8e8; }
.btn-outline-dark { border-color: var(--black); color: var(--black); }
.btn-outline-dark:hover { background: var(--black); color: var(--white); }
.btn-outline-light { border-color: var(--white); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--black); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .3px; margin-bottom: 12px; }
.lead { font-size: 17px; line-height: 1.5; max-width: 460px; margin-bottom: 28px; opacity: .9; }

/* ---------- Promo bar ---------- */
.promo-bar { background: var(--black); color: var(--white); text-align: center; font-size: 13px; padding: 10px 16px; }
.promo-bar a { text-decoration: underline; font-weight: 600; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .3s; }
.header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.header.hide { transform: translateY(-100%); }
.header-inner { max-width: var(--max); margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 32px; }
.logo { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -.5px; }
.logo span { color: var(--accent); }
.nav { display: flex; gap: 28px; flex: 1; justify-content: center; }
.nav a { font-size: 14px; font-weight: 700; padding: 22px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: var(--black); transform: scaleX(0); transition: transform .2s; }
.nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative; transition: background .2s; }
.icon-btn:hover { background: var(--soft); }
.menu-toggle { display: none; }
.cart-count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--blue); color: var(--white); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; transform: scale(0); transition: transform .2s;
}
.cart-count.show { transform: scale(1); }
.cart-count.bump { animation: bump .35s; }
@keyframes bump { 50% { transform: scale(1.35); } }

.search-panel { max-height: 0; overflow: hidden; transition: max-height .25s; border-top: 1px solid transparent; }
.search-panel.open { max-height: 640px; overflow: visible; border-top-color: var(--line); }
.search-inner { max-width: 760px; margin: 16px auto; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--black); }
.search-inner input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 18px; padding: 12px 0; background: transparent; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--soft); }
.hero-track { display: flex; transition: transform .7s cubic-bezier(.65,0,.35,1); }
.slide { position: relative; flex: 0 0 100%; height: min(78vh, 720px); min-height: 520px; overflow: hidden; background: var(--bg, #111); }
.slide-dark { color: var(--white); }
.slide-light { color: var(--black); }
.slide-text { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; height: 100%; padding: 0 6vw; display: flex; flex-direction: column; justify-content: center; }
.slide h1 { font-family: var(--head); font-weight: 800; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -1.2px; margin-bottom: 18px; }
.slide-split .slide-text { padding-right: 52%; }
.slide-split .slide-media { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; display: flex; align-items: center; justify-content: center; }
.slide-split .slide-media img { height: 100%; width: 100%; object-fit: cover; }
.slide-dark.slide-split .slide-media::before { content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, var(--bg), transparent); z-index: 1; }
.slide-light.slide-split .slide-media img { object-fit: contain; padding: 40px 0; }
.slide-cover .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, transparent 100%); }

.hero-controls { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; z-index: 5;
  background: rgba(255,255,255,.75); backdrop-filter: blur(8px); padding: 8px 10px 8px 16px; border-radius: 999px; }
.hero-dots { display: flex; gap: 8px; }
.hero-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(0,0,0,.3); transition: width .3s, background .3s; }
.hero-dot.active { width: 28px; background: var(--black); }
.hero-pause { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.hero-pause svg { width: 16px; height: 16px; stroke-width: 2.4; }
.hero-pause .i-play { display: none; fill: currentColor; }
.hero-pause.paused .i-play { display: block; }
.hero-pause.paused .i-pause { display: none; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.8); display: grid; place-items: center; z-index: 5; opacity: 0; transition: opacity .2s; }
.hero:hover .hero-arrow { opacity: 1; }
.hero-arrow.prev { left: 20px; } .hero-arrow.next { right: 20px; }

/* ---------- Sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: 80px 24px 0; }
.section-title { font-family: var(--head); font-weight: 800; font-size: clamp(28px, 3vw, 40px); text-align: center; letter-spacing: -.6px; margin-bottom: 36px; }

/* Categories */
.cat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 14px; font-weight: 700; font-size: 14px; text-align: center; }
.cat-img { width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 50%; background: var(--soft); overflow: hidden; display: grid; place-items: center; transition: transform .25s; }
.cat-img img { width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; }
.cat:hover .cat-img { transform: translateY(-4px); }

/* Showcase */
.tabs { display: flex; justify-content: center; gap: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.tab { font-weight: 700; font-size: 16px; color: var(--muted); padding: 10px 0 14px; position: relative; }
.tab.active { color: var(--black); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--black); }
.showcase-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 300px); gap: 20px; }
.tile { position: relative; background: var(--soft); border-radius: var(--radius); overflow: hidden; padding: 28px; display: flex; flex-direction: column; cursor: pointer; }
.tile:first-child { grid-row: span 2; }
.tile img { position: absolute; right: 0; bottom: 0; width: 100%; height: 72%; object-fit: contain; padding: 16px; mix-blend-mode: multiply; transition: transform .4s; }
.tile:first-child img { height: 72%; }
.tile:hover img { transform: scale(1.04); }
.tile h3 { font-family: var(--head); font-size: 20px; font-weight: 800; position: relative; z-index: 1; }
.tile:first-child h3 { font-size: 30px; }
.tile .tile-price { font-size: 14px; color: var(--muted); margin-top: 6px; position: relative; z-index: 1; }
.tile .btn-row { margin-top: 14px; position: relative; z-index: 1; }
.tile .btn { min-height: 36px; padding: 0 18px; font-size: 13px; }
.tile:not(:first-child) .btn-row { display: none; }

/* Banner */
.banner { position: relative; margin: 80px auto 0; max-width: var(--max); height: 560px; overflow: hidden; color: var(--white); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.2) 70%); }
.banner-text { position: relative; z-index: 1; height: 100%; padding: 0 6vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.banner h2 { font-family: var(--head); font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -1px; margin-bottom: 18px; }

/* Products */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; transition: all .2s; }
.chip:hover { border-color: var(--black); }
.chip.active { background: var(--black); color: var(--white); border-color: var(--black); }
.sort { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sort select { font: inherit; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.results-count { font-size: 14px; color: var(--muted); margin-bottom: 20px; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card { background: var(--soft); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; position: relative; }
.card-media { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 16px; cursor: pointer; border-radius: 12px; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s; }
.card-media.photo img { object-fit: cover; mix-blend-mode: normal; }
.card:hover .card-media img { transform: scale(1.05); }
.badge { position: absolute; top: 16px; left: 16px; z-index: 1; background: var(--white); font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; letter-spacing: .3px; }
.badge.sale { background: var(--accent); color: var(--white); }
.badge.new { background: var(--blue); color: var(--white); }
.card-brand { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.card h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 4px 0 8px; min-height: 42px; cursor: pointer; }
.rating { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.stars { color: var(--black); letter-spacing: 1px; }
.price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.price strong { font-size: 20px; font-weight: 800; font-family: var(--head); }
.price s { font-size: 13px; color: var(--muted); }
.card .btn { min-height: 40px; }
.empty { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: var(--muted); }

/* Benefits */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.benefit { text-align: center; padding: 32px 16px; border-radius: var(--radius); background: var(--soft); }
.benefit svg { width: 36px; height: 36px; margin: 0 auto 14px; }
.benefit h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.benefit p { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* Stores */
.store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.store-card { background: var(--black); color: var(--white); border-radius: var(--radius); padding: 40px; }
.store-card h3 { font-family: var(--head); font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.store-card p { color: #bdbdbd; line-height: 1.5; margin-bottom: 20px; }
.store-phone { display: block; font-family: var(--head); font-size: 28px; font-weight: 700; margin-bottom: 24px; }
.store-card .btn-dark { background: var(--white); color: var(--black); }
.store-card .btn-outline-dark { border-color: var(--white); color: var(--white); }
.store-card .btn-outline-dark:hover { background: var(--white); color: var(--black); }

/* Newsletter */
.newsletter { max-width: var(--max); margin: 80px auto 0; padding: 64px 24px; background: var(--soft); text-align: center; }
.newsletter h2 { font-family: var(--head); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin-bottom: 24px; }
.newsletter form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.newsletter input { flex: 1; min-width: 0; font: inherit; padding: 0 20px; height: 48px; border-radius: 999px; border: 1px solid #cfcfcf; outline: 0; }
.newsletter input:focus { border-color: var(--black); }
.newsletter .btn { min-height: 48px; }
.form-note { margin-top: 12px; font-size: 14px; color: var(--muted); min-height: 20px; }

/* Footer */
.footer { max-width: var(--max); margin: 0 auto; padding: 56px 24px 32px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer h4 { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.footer-cols a, .footer-cols p { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.footer-cols a:hover { color: var(--black); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: 12px; color: var(--muted); }

/* Drawer */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.overlay.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--white); z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.65,0,.35,1); }
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-family: var(--head); font-size: 20px; font-weight: 800; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 72px; height: 72px; object-fit: contain; background: var(--soft); border-radius: 12px; padding: 6px; mix-blend-mode: multiply; }
.cart-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; line-height: 1.3; }
.cart-item .ci-price { font-size: 13px; color: var(--muted); }
.cart-item .qty { margin-top: 8px; }
.ci-remove { font-size: 12px; color: var(--muted); text-decoration: underline; align-self: start; }
.cart-empty { text-align: center; color: var(--muted); padding: 60px 0; }
.drawer-foot { padding: 20px 24px; border-top: 1px solid var(--line); }
.total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.total-row strong { font-family: var(--head); font-size: 22px; }
.drawer-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.qty button { width: 32px; height: 32px; font-size: 18px; }
.qty span { min-width: 24px; text-align: center; font-weight: 700; font-size: 14px; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card { position: relative; background: var(--white); border-radius: 24px; width: min(920px, 100%); max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; transform: translateY(16px); transition: transform .25s; }
.modal.open .modal-card { transform: none; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--white); }
.modal-media { background: var(--soft); display: grid; place-items: center; padding: 32px; min-height: 360px; }
.modal-media img { max-height: 420px; object-fit: contain; mix-blend-mode: multiply; }
.modal-info { padding: 40px 32px; display: flex; flex-direction: column; }
.modal-info h3 { font-family: var(--head); font-size: 26px; font-weight: 800; line-height: 1.15; margin-bottom: 10px; }
.modal-price { font-family: var(--head); font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.modal-info ul { list-style: none; margin-bottom: 24px; }
.modal-info li { font-size: 14px; line-height: 1.5; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--line); position: relative; }
.modal-info li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 10px; height: 6px; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: rotate(-45deg); }
.qty-row { display: flex; justify-content: space-between; align-items: center; margin: auto 0 16px; font-weight: 600; font-size: 14px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--black); color: var(--white); padding: 14px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .3s; z-index: 120; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Dynamic store additions ---------- */
[hidden] { display: none !important; }
body.loading main, body.loading footer, body.loading .header-inner { visibility: hidden; }
.logo img { display: block; width: auto; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.tile img.photo { mix-blend-mode: normal; object-fit: cover; padding: 0; }
.price small { font-size: 12px; color: var(--muted); font-weight: 600; width: 100%; margin-bottom: -6px; }

.drawer-step { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.back-btn { margin-inline-end: auto; margin-inline-start: -10px; }
.drawer-head h3 { margin-inline-end: auto; }
.ci-variant { font-size: 12px; color: var(--muted); }
.ci-max { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.wa-btn { margin-top: 10px; }

.checkout { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; padding-bottom: 20px; }
.checkout label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.checkout input, .checkout select, .checkout textarea {
  font: inherit; font-weight: 400; font-size: 15px; padding: 12px 14px; border: 1px solid #cfcfcf; border-radius: 12px; background: var(--white); outline: 0; width: 100%;
}
.checkout input:focus, .checkout select:focus, .checkout textarea:focus { border-color: var(--black); }
.delivery-choice { border: 0; display: flex; flex-direction: column; gap: 8px; }
.delivery-choice legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.checkout .radio { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #cfcfcf; border-radius: 12px; cursor: pointer; font-weight: 500; font-size: 14px; }
.checkout .radio:has(input:checked) { border-color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.checkout .radio input { width: auto; accent-color: var(--black); }
.checkout .radio span { flex: 1; }
.form-error { color: var(--accent); font-size: 14px; font-weight: 600; min-height: 1em; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-bottom: 8px; }

.done { align-items: center; justify-content: center; text-align: center; padding: 40px 32px; gap: 12px; }
.done-icon { width: 64px; height: 64px; stroke-width: 1.4; }
.done h3 { font-family: var(--head); font-size: 24px; font-weight: 800; }
.done p { color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.done strong { color: var(--black); }

.modal-media { flex-direction: column; gap: 16px; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.thumb { width: 56px; height: 56px; border-radius: 10px; background: var(--white); border: 2px solid transparent; padding: 4px; }
.thumb.active { border-color: var(--black); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.modal-price s { font-size: 15px; color: var(--muted); font-weight: 500; }
.modal-desc { font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 18px; }
.variant-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.variant-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.variant { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; border: 1px solid #cfcfcf; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: left; }
.variant small { font-size: 12px; color: var(--muted); font-weight: 500; }
.variant.active { border-color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.variant:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* ---------- Card actions ---------- */
.card h3 a:hover { text-decoration: underline; }
.card-actions { display: flex; gap: 8px; }
.card-actions .btn-dark { flex: 1; }
.btn-icon { width: 40px; min-height: 40px; padding: 0; flex-shrink: 0; }
.btn-icon svg { width: 20px; height: 20px; }
.btn-lg { min-height: 52px; font-size: 15px; padding: 0 30px; }
.btn.disabled { opacity: .4; pointer-events: none; }

/* ---------- Product page ---------- */
.pdp-main { max-width: var(--max); margin: 0 auto; padding: 0 24px; min-height: 60vh; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); padding: 20px 0; }
.crumbs a:hover { color: var(--black); text-decoration: underline; }
.crumbs [aria-current] { color: var(--black); font-weight: 600; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pdp-gallery { position: sticky; top: 84px; }
.pdp-main-img { background: var(--soft); border-radius: 24px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.pdp-main-img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-main-img.photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pdp-thumbs .thumb { width: 72px; height: 72px; background: var(--soft); border-radius: 12px; }
.pdp-thumbs .thumb img { mix-blend-mode: multiply; }
.pdp-info h1 { font-family: var(--head); font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.8px; margin-bottom: 12px; }
.pdp-info .rating { font-size: 14px; margin-bottom: 18px; }
.pdp-price { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.pdp-price strong { font-family: var(--head); font-size: 30px; font-weight: 800; }
.pdp-price s { color: var(--muted); font-size: 16px; }
.pdp-price .badge { position: static; }
.pdp-lead { font-size: 16px; line-height: 1.6; color: #444; margin-bottom: 24px; }
.pdp-qty { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.pdp-qty .variant-label { margin: 0; }
.pdp-qty .qty button { width: 40px; height: 40px; }
.pdp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.pdp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 32px; font-size: 13px; font-weight: 600; }
.pdp-trust li { display: flex; align-items: center; gap: 8px; }
.pdp-trust svg { width: 22px; height: 22px; }

.pdp-order { background: var(--soft); border-radius: 24px; padding: 28px; scroll-margin-top: 20px; }
.pdp-order h2 { font-family: var(--head); font-size: 24px; font-weight: 800; }
.pdp-order .hint { color: var(--muted); font-size: 14px; margin: 4px 0 18px; }
.pdp-order .checkout { padding: 0; }
.pdp-order .checkout input, .pdp-order .checkout select, .pdp-order .checkout textarea, .pdp-order .radio { background: var(--white); }
.pdp-order-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: var(--white); border-radius: 14px; padding: 10px 14px 10px 10px; margin-bottom: 18px; font-size: 14px; }
.pdp-order-item img { width: 56px; height: 56px; object-fit: contain; background: var(--soft); border-radius: 10px; mix-blend-mode: multiply; }
.pdp-order-item small { display: block; color: var(--muted); }
.pdp-order-item span { font-weight: 700; white-space: nowrap; }
.pdp-sum { border-top: 1px solid #ddd; margin: 18px 0; padding-top: 16px; }
.pdp-done { background: var(--soft); border-radius: 24px; padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pdp-done h2 { font-family: var(--head); font-size: 26px; font-weight: 800; }
.pdp-done p { color: var(--muted); line-height: 1.5; }
.pdp-done strong { color: var(--black); }

.pdp-features { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pdp-features li { display: flex; gap: 12px; align-items: flex-start; background: var(--soft); border-radius: 16px; padding: 18px; font-weight: 600; line-height: 1.4; }
.pdp-features svg { flex-shrink: 0; width: 22px; height: 22px; stroke-width: 2.2; }
.pdp-main .section { padding-left: 0; padding-right: 0; }
.pdp-main + .footer { margin-top: 40px; }

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 28px; }
  .pdp-gallery { position: static; }
}
@media (max-width: 760px) {
  .pdp-main { padding: 0 16px; }
  .crumbs { padding: 14px 0; }
  .pdp-order { padding: 22px 16px; border-radius: 20px; }
  .pdp-actions { grid-template-columns: 1fr; }
  .pdp-thumbs .thumb { width: 60px; height: 60px; }
}

/* ---------- Scroll effects ---------- */
/* Fade-up reveal as elements enter the viewport */
.reveal { opacity: 0; transform: translateY(48px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal-zoom.in { opacity: 1; transform: none; }

/* Hero parallax: --p is the page scroll in px, set from JS */
.hero .slide-media img, .hero .cover-img { transform: translateY(calc(var(--p, 0) * .35px)) scale(calc(1 + var(--p, 0) * .00015)); will-change: transform; }
.hero .slide-text { transform: translateY(calc(var(--p, 0) * .18px)); opacity: calc(1 - var(--p, 0) / 550); will-change: transform, opacity; }

/* Banner parallax: --bp goes from -1 (below) to 1 (above) */
.banner img { top: -15%; height: 130%; transform: translateY(calc(var(--bp, 0) * 70px)); will-change: transform; }

/* Back to top */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 52px; height: 52px; border-radius: 50%; background: var(--white); box-shadow: 0 6px 24px rgba(0,0,0,.15); display: grid; place-items: center; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--black); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-zoom { opacity: 1; transform: none; transition: none; }
  .hero .slide-media img, .hero .cover-img, .hero .slide-text, .banner img { transform: none; opacity: 1; }
  .header { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .showcase-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 260px 260px; }
  .tile:first-child { grid-row: auto; grid-column: span 2; }
}

@media (max-width: 900px) {
  .menu-toggle { display: grid; }
  .header-inner { gap: 8px; padding: 0 12px; }
  .nav { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: var(--white); flex-direction: column; justify-content: flex-start; gap: 0; padding: 12px 24px; transform: translateX(-100%); transition: transform .3s; z-index: 60; }
  .nav.open { transform: none; }
  .nav a { padding: 18px 0; font-size: 20px; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .cat-row { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .benefits { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero-arrow { display: none; }
}

@media (max-width: 760px) {
  .slide { height: auto; min-height: 640px; }
  .slide-split .slide-text { padding: 40px 16px 0; justify-content: flex-start; height: auto; }
  .slide-split .slide-media { position: absolute; top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 52%; }
  .slide-dark.slide-split .slide-media::before { width: 100%; height: 40%; background: linear-gradient(180deg, var(--bg), transparent); }
  .slide-light.slide-split .slide-media img { padding: 0 0 70px; }
  .slide-cover .slide-text { padding: 40px 16px 80px; justify-content: flex-end; }
  .slide-cover::after { background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 70%, transparent); }
  .lead { font-size: 15px; margin-bottom: 20px; }
  .section { padding: 56px 16px 0; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { padding: 14px; border-radius: 16px; }
  .card h3 { font-size: 14px; min-height: 36px; }
  .price strong { font-size: 16px; }
  .card .btn { padding: 0 10px; font-size: 13px; }
  .badge { top: 10px; left: 10px; }
  /* Phones: each tile sizes to its content, picture under the text and buttons (never on top of them). */
  .showcase-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 14px; }
  .tile, .tile:first-child { grid-column: auto; padding: 22px; }
  .tile:first-child h3 { font-size: 24px; }
  .tile img, .tile:first-child img { position: static; order: 1; width: 100%; height: 190px; margin-top: 14px; padding: 0; }
  .tile:first-child img { height: 240px; }
  .tile img.photo { border-radius: 14px; }
  .tile:not(:first-child) .btn-row { display: flex; }
  .tabs { gap: 20px; overflow-x: auto; justify-content: flex-start; }
  .tab { white-space: nowrap; }
  .banner { height: 480px; }
  .banner::after { background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.25)); }
  .banner-text { padding: 0 16px 40px; justify-content: flex-end; }
  .store-grid { grid-template-columns: 1fr; }
  .store-card { padding: 28px 20px; }
  .toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chip { white-space: nowrap; }
  .modal-card { grid-template-columns: 1fr; }
  .modal-media { min-height: 260px; padding: 20px; }
  .modal-media img { max-height: 260px; }
  .modal-info { padding: 24px 20px; }
  .newsletter { padding: 48px 16px; }
  .newsletter form { flex-direction: column; }
}

@media (max-width: 420px) {
  .cat-row { grid-template-columns: 1fr 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .logo { font-size: 19px; }
}

/* ---------- Language picker ---------- */
.lang-switch { position: relative; }
.lang-btn { height: 40px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; }
.lang-btn:hover { background: var(--soft); }
.lang-btn svg { width: 20px; height: 20px; }
.lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 70; background: var(--white); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; min-width: 160px; display: flex; flex-direction: column; }
.lang-menu button { text-align: start; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; }
.lang-menu button:hover { background: var(--soft); }
.lang-menu button.active { font-weight: 700; }
.lang-menu button.active::after { content: " ✓"; }
.lang-menu [lang="ar"] { font-family: "Cairo", var(--body); }
@media (max-width: 420px) {
  .hide-xs { display: none !important; }
  .lang-btn { padding: 0 6px; }
  .lang-btn svg { display: none; }
}

/* ---------- Arabic (right-to-left) ---------- */
:root[lang="ar"] { --head: "Cairo", "Segoe UI", Tahoma, sans-serif; --body: "Cairo", "Segoe UI", Tahoma, sans-serif; }
:root[lang="ar"] body, :root[lang="ar"] body * { letter-spacing: 0 !important; } /* letter-spacing breaks Arabic joining */
[dir="rtl"] .slide h1, [dir="rtl"] .banner h2 { line-height: 1.3; }
[dir="rtl"] .pdp-info h1 { line-height: 1.35; }
[dir="rtl"] .card-brand { text-transform: none; }
[dir="rtl"] .hero-track { direction: ltr; }          /* keeps the slide movement the same… */
[dir="rtl"] .slide { direction: rtl; }               /* …while each slide reads right-to-left */
[dir="rtl"] .slide-split .slide-text { padding-right: 6vw; padding-left: 52%; }
[dir="rtl"] .slide-split .slide-media { right: auto; left: 0; }
[dir="rtl"] .slide-dark.slide-split .slide-media::before { inset: 0 0 0 auto; background: linear-gradient(270deg, var(--bg), transparent); }
[dir="rtl"] .slide-cover::after { background: linear-gradient(270deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, transparent 100%); }
[dir="rtl"] .banner::after { background: linear-gradient(270deg, rgba(0,0,0,.82), rgba(0,0,0,.2) 70%); }
[dir="rtl"] .badge { left: auto; right: 16px; }
[dir="rtl"] .modal-close { right: auto; left: 12px; }
[dir="rtl"] .modal-info li { padding: 8px 26px 8px 0; }
[dir="rtl"] .modal-info li::before { left: auto; right: 4px; }
[dir="rtl"] .cart-count { right: auto; left: 0; }
[dir="rtl"] .crumb-sep, [dir="rtl"] .back-btn svg { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .to-top { right: auto; left: 24px; }
@media (max-width: 900px) {
  [dir="rtl"] .nav { transform: translateX(100%); }
  [dir="rtl"] .nav.open { transform: none; }
}
@media (max-width: 760px) {
  [dir="rtl"] .slide-split .slide-text { padding: 40px 16px 0; }
  [dir="rtl"] .slide-split .slide-media { left: 0; right: 0; }
  [dir="rtl"] .slide-dark.slide-split .slide-media::before { inset: 0; width: 100%; height: 40%; background: linear-gradient(180deg, var(--bg), transparent); }
  [dir="rtl"] .slide-cover::after { background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 70%, transparent); }
  [dir="rtl"] .banner::after { background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.25)); }
  [dir="rtl"] .badge { right: 10px; }
}

/* ---------- Store maps ---------- */
.store-grid:has(> .store-card:only-child) { grid-template-columns: 1fr; }
.store-card { overflow: hidden; }
.store-map { margin: -40px -40px 28px; height: 280px; background: #222; }
.store-grid:has(> .store-card:only-child) .store-map { height: 360px; }
.store-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15); }
@media (max-width: 760px) {
  .store-map { margin: -28px -20px 22px; height: 240px; }
  .store-grid:has(> .store-card:only-child) .store-map { height: 260px; }
}

/* ---------- Search suggestions ---------- */
.search-suggest { max-width: 760px; margin: -6px auto 16px; padding: 6px; background: var(--white); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.12); max-height: min(520px, 70vh); overflow-y: auto; }
.sg-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px 6px; }
.sg-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; }
.sg-item:hover, .sg-item.active { background: var(--soft); }
.sg-img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: var(--soft); display: grid; place-items: center; overflow: hidden; }
.sg-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sg-cat .sg-img { border-radius: 50%; }
.sg-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.sg-name small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.sg-name mark { background: none; color: var(--accent); }
.sg-price { font-family: var(--head); font-weight: 700; font-size: 14px; white-space: nowrap; text-align: end; }
.sg-price small { display: block; font-family: var(--body); font-size: 11px; color: var(--muted); font-weight: 500; }
.sg-all { justify-content: center; font-weight: 700; font-size: 14px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: 4px; padding: 12px; }
.sg-empty { padding: 16px 12px; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  .search-suggest { margin: -6px 12px 12px; }
  .sg-price { font-size: 13px; }
}

/* ---------- Social media buttons (official logos) ---------- */
.social { display: flex; flex-wrap: wrap; gap: 12px; }
.social a { display: block; width: 42px; height: 42px; border-radius: 12px; transition: transform .15s, box-shadow .2s; }
.social a:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.social svg { width: 100%; height: 100%; stroke: none; display: block; }
.social-light { margin-top: 22px; padding-top: 20px; border-top: 1px solid #2a2a2a; }
.social-light a[title="TikTok"] svg rect { stroke: #333; stroke-width: 1; }
.social-dark { margin-top: 14px; gap: 10px; }
.social-dark a { width: 34px; height: 34px; border-radius: 10px; margin: 0 !important; }
.social-dark a[title="YouTube"] svg rect { stroke: var(--line); stroke-width: 1; }

/* ---------- Stars & reviews ---------- */
.stars-ui { display: inline-flex; gap: 1px; color: #d6d6d6; font-size: 15px; line-height: 1; letter-spacing: 0; direction: ltr; }
.stars-ui i { font-style: normal; }
.stars-ui i.on { color: #f5a623; }
.stars-ui i.half { background: linear-gradient(90deg, #f5a623 50%, #d6d6d6 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars-ui.lg { font-size: 22px; }
.pdp-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.pdp-rating b { color: var(--black); }
.pdp-rating:hover { color: var(--black); }
.star-input { display: inline-flex; gap: 2px; direction: ltr; margin-bottom: 14px; }
.star-input button { font-size: 32px; line-height: 1; color: #d6d6d6; padding: 2px; transition: transform .1s, color .1s; }
.star-input button.on { color: #f5a623; }
.star-input button:hover { transform: scale(1.12); }
.review-form { display: flex; flex-direction: column; margin-top: 16px; }
.rf-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.review-form textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 12px 14px; border: 1px solid #cfcfcf; border-radius: 12px; outline: 0; resize: vertical; }
.review-form textarea:focus { border-color: var(--black); }
.review-form .btn { align-self: flex-start; }

.pdp-reviews { border-top: 1px solid var(--line); }
.rv-layout { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.rv-summary { position: sticky; top: 84px; background: var(--soft); border-radius: 20px; padding: 24px; }
.rv-score { font-family: var(--head); font-size: 52px; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.rv-based { color: var(--muted); font-size: 14px; margin: 8px 0 16px; }
.rv-bars { display: grid; gap: 6px; margin-bottom: 18px; }
.rv-bar { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.rv-bar span:last-child { text-align: end; }
.rv-track { height: 8px; background: #e4e4e4; border-radius: 99px; overflow: hidden; }
.rv-track i { display: block; height: 100%; background: #f5a623; border-radius: 99px; }
.rv-note { font-size: 14px; color: var(--muted); line-height: 1.5; }
.rv-list { display: flex; flex-direction: column; }
.rv-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.rv-item:first-child { padding-top: 0; }
.rv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.rv-verified { font-size: 12px; font-weight: 600; color: #1b7f45; background: #e3f6ea; padding: 2px 8px; border-radius: 999px; }
.rv-top time { margin-inline-start: auto; color: var(--muted); font-size: 13px; }
.rv-text { font-size: 15px; line-height: 1.6; white-space: pre-line; }
.rv-reply { margin-top: 12px; background: var(--soft); border-inline-start: 3px solid var(--black); border-radius: 0 12px 12px 0; padding: 12px 14px; font-size: 14px; }
[dir="rtl"] .rv-reply { border-radius: 12px 0 0 12px; }
.rv-reply p { margin-top: 4px; line-height: 1.5; white-space: pre-line; }

/* ---------- My account ---------- */
.account-main { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; min-height: 60vh; }
.acc-auth { max-width: 440px; margin: 20px auto; }
.acc-auth h1, .acc-head h1 { font-family: var(--head); font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -.5px; }
.acc-intro { color: var(--muted); margin: 6px 0 22px; line-height: 1.5; }
.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.acc-tabs button { padding: 10px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); }
.acc-tabs button.active { background: var(--white); color: var(--black); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.acc-form { padding: 0; }
.acc-hint { font-size: 13px; color: var(--muted); line-height: 1.5; }
.acc-staff { text-align: center; margin-top: 22px; font-size: 13px; }
.acc-staff a { color: var(--muted); text-decoration: underline; }
.acc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.acc-head .acc-intro { margin-bottom: 0; text-align: start; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.acc-card { background: var(--soft); border-radius: 20px; padding: 24px; }
.acc-card h2 { font-family: var(--head); font-size: 20px; font-weight: 800; margin-bottom: 10px; }
#reviewBox { grid-column: 1 / -1; }
.muted-p { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.acc-order { background: var(--white); border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
.ao-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; margin-bottom: 8px; }
.ao-chan { font-size: 12px; color: var(--muted); }
.ao-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--soft); }
.st-delivered, .st-paid { background: #e3f6ea; color: #1b7f45; }
.st-shipped { background: #efe8ff; color: #6a3fd1; }
.st-confirmed { background: #fff4e0; color: #b46200; }
.st-cancelled, .st-returned, .st-refunded { background: #fdeaea; color: #c0262f; }
.ao-date { margin-inline-start: auto; color: var(--muted); font-size: 13px; }
.acc-order ul { list-style: none; font-size: 14px; display: grid; gap: 4px; }
.acc-order small { color: var(--muted); }
.ao-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ao-foot b { color: var(--black); font-size: 15px; }
.acc-review { display: grid; grid-template-columns: 72px 1fr; gap: 14px; background: var(--white); border-radius: 14px; padding: 14px; margin-top: 12px; }
.ar-img { width: 72px; height: 72px; background: var(--soft); border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.ar-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ar-body > a b { font-size: 15px; }
.ar-body > a:hover b { text-decoration: underline; }
.ar-mine { margin-top: 6px; font-size: 14px; }
.ar-mine p { margin-top: 6px; line-height: 1.5; }
.ar-status { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-inline-start: 8px; background: var(--soft); }
.rs-approved { background: #e3f6ea; color: #1b7f45; }
.rs-pending { background: #fff4e0; color: #8a4b00; }
.rs-hidden { background: #fdeaea; color: #c0262f; }
.ar-reply { background: var(--soft); border-radius: 10px; padding: 8px 10px; }
.ar-actions { margin-top: 8px; font-size: 13px; color: var(--muted); }
.link-btn { text-decoration: underline; color: inherit; font-size: inherit; }
.btn-sm-store { min-height: 38px; padding: 0 18px; font-size: 13px; margin-top: 8px; }
#accountLink.signed-in { position: relative; }
#accountLink.signed-in::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #1baf7a; border: 2px solid var(--white); }

@media (max-width: 860px) {
  .rv-layout { grid-template-columns: 1fr; gap: 24px; }
  .rv-summary { position: static; }
  .acc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .account-main { padding: 20px 16px 60px; }
  .acc-card { padding: 18px 16px; }
}
/* ----- Waiting list (out of stock) ----- */
.variant.out { opacity: .55; }
.variant.out small { color: var(--accent); }
.variant.out.active { opacity: 1; }
.wait-already { background: #e3f6ea; color: #1b7f45; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.back-notice { position: fixed; right: 20px; bottom: 20px; z-index: 110; width: min(380px, calc(100vw - 32px)); display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border-radius: 18px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.18); transform: translateY(20px); opacity: 0; transition: all .35s; }
.back-notice.show { transform: none; opacity: 1; }
.back-notice img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--soft); flex: none; }
.back-notice b { display: block; font-size: 16px; margin-bottom: 2px; }
.back-notice p { font-size: 14px; color: var(--muted); line-height: 1.4; margin-bottom: 10px; }
.back-notice > div { flex: 1; min-width: 0; }
.back-close { font-size: 16px; color: var(--muted); padding: 2px 4px; }
[dir="rtl"] .back-notice { right: auto; left: 20px; }
@media (max-width: 600px) { .back-notice, [dir="rtl"] .back-notice { left: 16px; right: 16px; bottom: 16px; width: auto; } }
.acc-wait { display: flex; gap: 12px; align-items: center; }
.acc-wait img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: var(--soft); flex: none; }
.acc-wait > div:first-of-type { flex: 1; min-width: 0; }
.acc-wait .ao-head { margin-top: 6px; }
.acc-wait-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.acc-wait .link-btn { font-size: 13px; color: var(--muted); text-decoration: underline; }
.ws-back { background: #e3f6ea !important; color: #1b7f45; }
.ws-contacted { background: #fff4e0 !important; color: #b46200; }
.ws-ordered { background: #e8f0ff !important; color: #1f4fbf; }
/* Order form pre-filled from the customer's account */
.co-prefill { background: #e3f6ea; color: #1b7f45; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.co-remember { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; font-weight: 500 !important; font-size: 14px; cursor: pointer; }
.co-remember input { width: 18px; height: 18px; accent-color: var(--black); flex: none; }
.acc-small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Login: forgot password, show password, reset */
.acc-forgot { text-align: right; margin: -4px 0 4px; font-size: 13.5px; }
[dir="rtl"] .acc-forgot { text-align: left; }
.acc-forgot a { color: var(--black); text-decoration: underline; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 46px !important; width: 100%; }
[dir="rtl"] .pw-wrap input { padding-right: 14px !important; padding-left: 46px !important; }
.pw-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; font-size: 15px; opacity: .45; }
[dir="rtl"] .pw-eye { right: auto; left: 8px; }
.pw-eye.on, .pw-eye:hover { opacity: 1; }
.pw-meter { height: 5px; border-radius: 99px; background: #e5e5e5; overflow: hidden; margin: -6px 0 6px; }
.pw-meter i { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }
.pw-meter[data-level="weak"] i { width: 33%; background: #d6202a; }
.pw-meter[data-level="ok"] i { width: 66%; background: #f59e0b; }
.pw-meter[data-level="strong"] i { width: 100%; background: #1baf7a; }
.acc-done { text-align: center; }
.acc-done-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: #e3f6ea; color: #1b7f45; }
.acc-done-icon.warn { background: #fff4e0; color: #b46200; font-weight: 800; }
.acc-small-p { font-size: 13px; color: var(--muted); margin: 6px 0 16px; }
.acc-notice { background: #fff4e0; color: #8a4b00; border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; line-height: 1.45; }
.acc-notice a { color: inherit; font-weight: 700; text-decoration: underline; }
.newsletter-text { color: var(--muted); max-width: 520px; margin: -10px auto 22px; line-height: 1.5; }
.newsletter #signupBtn { min-width: 200px; }

/* Download / Software & Activation pages */
.nav a.current { text-decoration: underline; text-underline-offset: 6px; }
.info-head { max-width: 760px; margin: 8px 0 24px; }
.info-head h1 { font-family: var(--head); font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin-bottom: 8px; }
.info-tools { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.info-tools .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.info-search { font: inherit; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #cfcfcf; min-width: 240px; outline: 0; }
.info-search:focus { border-color: var(--black); }
.dl-list { display: flex; flex-direction: column; gap: 12px; }
.dl-item { display: flex; align-items: center; gap: 18px; background: var(--soft); border-radius: 20px; padding: 18px 20px; }
.dl-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--white); display: grid; place-items: center; flex: none; }
.dl-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dl-body { flex: 1; min-width: 0; }
.dl-body h2 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.dl-body p { color: var(--muted); font-size: 14px; line-height: 1.45; }
.dl-meta { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sw-card { background: var(--soft); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.sw-card h2 { font-size: 18px; font-weight: 700; }
.sw-card p { color: var(--muted); font-size: 14px; line-height: 1.5; flex: 1; }
.sw-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 0; }
.sw-foot b { font-size: 18px; }
.sw-foot small { color: var(--muted); }
.sw-note { margin-top: 20px; line-height: 1.55; }
.sw-contact { text-align: center; margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); }
.info-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .dl-item { flex-wrap: wrap; }
  .dl-item .btn { width: 100%; }
  .info-search { min-width: 0; width: 100%; }
}/* Menu on one line + "More" dropdown */
.nav { min-width: 0; align-items: center; }
.nav a { white-space: nowrap; }
.nav-more { position: relative; flex: none; }
.nav-more-btn { font: inherit; font-size: 14px; font-weight: 700; padding: 22px 0; white-space: nowrap; }
.nav-more-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 220px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 6px; z-index: 70; }
[dir="rtl"] .nav-more-menu { right: auto; left: 0; }
.nav-more.open .nav-more-menu { display: flex; flex-direction: column; }
.nav-more-menu a { padding: 10px 14px !important; border-radius: 10px; font-size: 14px; }
.nav-more-menu a:hover { background: var(--soft); }
.nav-more-menu a::after { display: none; }
@media (max-width: 900px) { .nav-more { display: none !important; } }/* Images of software / services */
.dl-icon.has-img { width: 64px; height: 64px; padding: 6px; overflow: hidden; }
.dl-icon.has-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.sw-head { display: flex; align-items: center; gap: 14px; }
.sw-thumb.has-img { width: 72px; height: 72px; }
.sw-card .dl-icon { background: var(--white); }.dl-item .dl-icon { width: 64px; height: 64px; }
.sw-card .dl-icon { width: 72px; height: 72px; }
/* Software & Activation: order a service */
.sw-wa { text-align: center; font-size: 13px; color: var(--muted); text-decoration: underline; }
.sw-modal { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.sw-dialog { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--white); border-radius: 24px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.sw-dialog h2 { font-family: var(--head); font-size: 22px; font-weight: 800; padding-right: 30px; }
.sw-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; }
[dir="rtl"] .sw-close { right: auto; left: 14px; }
.sw-close:hover { background: var(--soft); }
.sw-total { display: flex; justify-content: space-between; align-items: baseline; background: var(--soft); border-radius: 12px; padding: 12px 14px; }
.sw-total b { font-size: 18px; }/* Products / Categories / Contact pages */
.pg-right { display: flex; gap: 10px; flex-wrap: wrap; }
.info-sort { font: inherit; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #cfcfcf; background: var(--white); }
.pg-count { color: var(--muted); font-size: 14px; margin: -4px 0 16px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cat-tile { display: flex; align-items: center; gap: 16px; background: var(--soft); border-radius: 20px; padding: 16px; transition: transform .2s, box-shadow .2s; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.cat-tile-img { width: 84px; height: 84px; border-radius: 16px; background: var(--white); display: grid; place-items: center; flex: none; overflow: hidden; }
.cat-tile-img img { width: 100%; height: 100%; object-fit: contain; }
.cat-tile-img svg { width: 38px; height: 38px; fill: none; stroke: var(--black); stroke-width: 1.6; }
.cat-tile-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cat-tile-body b { font-size: 17px; }
.cat-tile-body small { color: var(--muted); }
.cat-tile-go { font-size: 20px; opacity: .5; }
[dir="rtl"] .cat-tile-go { transform: scaleX(-1); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.contact-card { background: var(--soft); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.contact-map iframe { width: 100%; height: 240px; border: 0; display: block; }
.contact-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.contact-body h2 { font-family: var(--head); font-size: 22px; font-weight: 800; }
.contact-phone { font-size: 24px; font-weight: 800; }
.contact-social { text-align: center; margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.contact-social h2 { font-family: var(--head); font-size: 20px; font-weight: 800; }
/* ----- Products page: category sidebar + toolbar ----- */
.pg-page { max-width: 1320px; }
.pg-head { margin-bottom: 20px; }
.pg-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.pg-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 4px; }
.pg-main { min-width: 0; }
.pg-side-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 10px 6px; }
.pg-cats { display: flex; flex-direction: column; gap: 4px; }
.pg-cat { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 14px; font: inherit; font-size: 14.5px; font-weight: 600; text-align: start; color: var(--black); transition: background .15s; }
.pg-cat:hover { background: var(--soft); }
.pg-cat.active { background: var(--black); color: var(--white); }
.pg-cat-img { width: 38px; height: 38px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; }
.pg-cat.active .pg-cat-img { border-color: transparent; }
.pg-cat-img img { width: 100%; height: 100%; object-fit: contain; }
.pg-cat-img svg { width: 20px; height: 20px; fill: none; stroke: var(--black); stroke-width: 1.8; }
.pg-cat-name { flex: 1; min-width: 0; }
.pg-cat-n { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 2px 8px; }
.pg-cat.active .pg-cat-n { background: rgba(255,255,255,.18); color: var(--white); }
.pg-side-link { margin: 14px 10px 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.pg-side-link:hover { color: var(--black); }
[dir="rtl"] .pg-side { padding-right: 0; padding-left: 4px; }

.pg-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.pg-search { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; height: 52px; padding: 0 14px 0 48px; border-radius: 999px; background: var(--soft); border: 1.5px solid transparent; transition: border-color .2s, background .2s, box-shadow .2s; cursor: text; }
.pg-search:focus-within { background: var(--white); border-color: var(--black); box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.pg-search svg { position: absolute; left: 18px; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
[dir="rtl"] .pg-search { padding: 0 48px 0 14px; }
[dir="rtl"] .pg-search svg { left: auto; right: 18px; }
.pg-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; }
.pg-search input::-webkit-search-cancel-button { display: none; }
.pg-clear { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; color: var(--muted); background: rgba(0,0,0,.06); flex: none; }
.pg-clear:hover { background: rgba(0,0,0,.12); color: var(--black); }
.pg-kbd { font: 600 12px/1 Inter, sans-serif; color: var(--muted); border: 1px solid #cfcfcf; border-bottom-width: 2px; border-radius: 6px; padding: 4px 7px; margin-inline-start: 6px; }
.pg-search:focus-within .pg-kbd, .pg-clear:not([hidden]) + .pg-kbd { display: none; }
.pg-sort { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 6px 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); flex: none; }
.pg-sort span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pg-sort select { font: inherit; font-weight: 600; font-size: 14.5px; border: 0; outline: 0; background: transparent; height: 100%; padding-right: 10px; cursor: pointer; }
.pg-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: 14px; }
.pg-count { margin: 0; color: var(--muted); font-size: 14px; }
.pg-count b { color: var(--black); }
.pg-reset { font-size: 13.5px; font-weight: 600; text-decoration: underline; color: var(--black); }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.pg-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; background: var(--soft); border-radius: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); }

/* Tablet / phone: the sidebar becomes a scrollable row of pills, search full width */
@media (max-width: 900px) {
  .pg-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pg-side, .pg-main { min-width: 0; }
  .pg-side { position: static; max-height: none; overflow: visible; padding: 0; }
  .pg-side-title, .pg-side-link { display: none; }
  .pg-cats { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; }
  .pg-cats::-webkit-scrollbar { display: none; }
  .pg-cat { width: auto; flex: none; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
  .pg-cat-img { width: 30px; height: 30px; border-radius: 50%; }
  .pg-kbd { display: none; }
}
@media (max-width: 560px) {
  .pg-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .pg-search { flex: none; height: 50px; }
  .pg-sort { height: 46px; }
  .pg-sort { justify-content: space-between; }
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* ----- Menu: "Categories" dropdown ----- */
.nav-drop { position: relative; flex: none; display: flex; align-items: center; }
.nav-drop-link { display: inline-flex; align-items: center; gap: 5px; }
.nd-caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.nav-drop.open .nd-caret { transform: rotate(180deg); }
.nav-drop-panel { position: absolute; top: 100%; left: 50%; width: min(620px, 92vw); padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 48px rgba(0,0,0,.14); z-index: 80;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .18s, transform .18s, visibility .18s; }
.nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* bridge so the pointer can reach the panel */
.nav-drop.open .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.nav-drop-panel a { padding: 0; font-weight: 600; }
.nav-drop-panel a::after { display: none; }
.nd-item { display: flex; align-items: center; gap: 12px; padding: 8px !important; border-radius: 14px; transition: background .15s; }
.nd-item:hover, .nd-item:focus-visible { background: var(--soft); }
.nd-img { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--soft); display: grid; place-items: center; overflow: hidden; transition: transform .2s; }
.nd-item:hover .nd-img { transform: scale(1.06); background: var(--white); }
.nd-img img { width: 100%; height: 100%; object-fit: contain; }
.nd-img svg { width: 22px; height: 22px; fill: none; stroke: var(--black); stroke-width: 1.8; }
.nd-text { display: flex; flex-direction: column; min-width: 0; }
.nd-text b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-text small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.nd-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 8px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.nd-foot a { padding: 0 !important; }
.nd-foot a b { font-size: 12px; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 2px 8px; margin-inline-start: 4px; }
.nd-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nd-all { color: var(--accent); }
/* Inside "More ▾" and on phones: just the link. */
.nav-more-menu .nav-drop-panel, .nav-more-menu .nd-caret { display: none; }
.nav-more-menu .nav-drop { display: block; }
.nav-more-menu .nav-drop-link { display: block; }
@media (max-width: 900px) { .nav-drop-panel, .nd-caret { display: none; } .nav-drop { display: block; } }