/* Fonts loaded locally via partials.site-font-head (Cairo/Tajawal/… + Outfit) */

/* ==================== 1. RESET ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible{ outline:2.5px solid var(--primary-dark, #c2410c); outline-offset:2px; }

/* ==================== 2. DESIGN TOKENS ==================== */
:root{
  --primary:#ff5a1f;
  --primary-dark:#c2410c;
  --primary-light:#ffe4d6;
  --secondary:#0b1f3a;
  --accent:#047857;
  --used:#b45309;
  --imported:#4f46e5;
  --danger:#dc2626;
  --star:#fbbf24;
  --accent-text:#c2410c;

  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#f0f2f7;
  --text:#12161c;
  --text-muted:#5b6472;
  --border:#e6e8ec;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 2px 8px rgba(18,22,28,.06);
  --shadow:0 8px 24px rgba(18,22,28,.08);
  --shadow-lg:0 20px 48px rgba(18,22,28,.14);

  --container:1240px;
  --header-h:64px;
  --topbar-h:42px;

  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#0a0d13;
  --surface:#131824;
  --surface-2:#1a2130;
  --text:#f1f4f9;
  --text-muted:#93a0b4;
  --border:#232b3a;
  --primary-light:#3a2113;
  --accent-text:#ff9a5c;
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --shadow-lg:0 24px 56px rgba(0,0,0,.55);
  color-scheme: dark;
}

html[dir="rtl"] body{ font-family: var(--font, 'Cairo', system-ui, sans-serif); }
html[dir="ltr"] body{ font-family: var(--font-display, 'Outfit', var(--font, 'Cairo'), system-ui, sans-serif); }

body{
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  transition:background .35s var(--ease), color .35s var(--ease);
  overflow-x:hidden;
}

.container{ max-width:var(--container); margin-inline:auto; padding-inline:20px; }

.skip-link{
  position:absolute; inset-inline-start:12px; top:-48px; z-index:200;
  background:var(--primary-dark); color:#fff; padding:10px 16px; border-radius:8px; font-weight:700;
  transition:top .2s;
}
.skip-link:focus{ top:12px; }

/* ==================== 3. UTILITIES ==================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:700; font-size:.95rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--primary-dark); color:#fff; box-shadow:0 10px 24px -8px rgba(255,90,31,.6); }
.btn-primary:hover{ background:color-mix(in srgb, var(--primary-dark) 85%, black); transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(255,90,31,.7); }
.btn-outline{ background:transparent; color:var(--text); border:1.5px solid var(--border); }
.btn-outline:hover{ border-color:var(--primary); color:var(--accent-text); transform:translateY(-2px); }
.btn-ghost-light{
  background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.22); transform:translateY(-2px); }
.btn-sm{ padding:8px 16px; font-size:.82rem; }
.btn-block{ width:100%; }

.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:var(--surface-2); color:var(--text); position:relative;
  transition:background .25s, color .25s, transform .25s var(--ease);
}
.icon-btn:hover{ background:var(--primary); color:#fff; transform:translateY(-2px); }
.icon-btn svg{ width:20px; height:20px; }

.badge-count{
  position:absolute; inset-block-start:-4px; inset-inline-end:-4px;
  background:var(--primary-dark); color:#fff; font-size:.65rem; font-weight:800;
  min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center;
  padding-inline:3px; border:2px solid var(--bg); transition:transform .25s var(--ease);
}
.badge-count.pulse{ animation:pop .35s var(--ease); }
@keyframes pop{ 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }

.chip{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--border);
  background:var(--surface); font-weight:600; font-size:.88rem; color:var(--text-muted);
  transition:all .25s var(--ease); white-space:nowrap;
}
.chip.active, .chip:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }

/* contain-intrinsic-size must stay tall enough for blog cards (image + body);
   800px was clipping .blog-body under content-visibility size containment. */
.section{ padding-block:64px; content-visibility:auto; contain-intrinsic-size:1px 1400px; }
.hero, .trust-strip{ content-visibility:visible; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:34px; flex-wrap:wrap;
}
.section-head.is-stack{
  flex-direction:column; align-items:start; justify-content:flex-start;
  text-align:start;
}
.section-head.is-stack .section-eyebrow{ justify-content:start; }
.section-head.is-stack .section-sub{ margin-inline:0; text-align:start; }
.section-head.is-centered{
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.section-head.is-centered .section-eyebrow{ justify-content:center; }
.section-head.is-centered .section-sub{ margin-inline:auto; text-align:center; }
.section-eyebrow{
  color:var(--accent-text); font-weight:800; font-size:.8rem; letter-spacing:.5px;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; margin-bottom:8px;
}
.section-eyebrow::before{ content:""; width:22px; height:3px; border-radius:3px; background:var(--primary); flex-shrink:0; }
.section-title{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; }
.section-sub{ color:var(--text-muted); margin-top:6px; max-width:520px; }
.link-more{ font-weight:700; color:var(--accent-text); display:flex; align-items:center; gap:6px; }
.link-more svg{ width:18px; height:18px; transition:transform .25s var(--ease); }
html[dir="rtl"] .link-more svg{ transform:scaleX(-1); }
.link-more:hover svg{ transform:translateX(4px); }
html[dir="rtl"] .link-more:hover svg{ transform:scaleX(-1) translateX(4px); }

/* scroll reveal */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(0) scale(.92); }
[data-reveal="scale"].in{ transform:scale(1); }

/* ==================== 4. TOPBAR + HEADER ==================== */
.topbar{
  --topbar-fg:#d5e0f2;
  background:
    linear-gradient(90deg, #06101d 0%, #0b1f3a 45%, #122a4d 100%);
  color:var(--topbar-fg); font-size:.8rem; min-height:var(--topbar-h);
  display:flex; align-items:center; position:relative; z-index:70;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--primary) 35%, #ff9a5c 65%, transparent 100%);
  opacity:.85; pointer-events:none;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%; padding-block:8px; min-height:42px;
}
.topbar-start,
.topbar-end{
  display:flex; align-items:center; gap:12px; min-width:0;
}
.topbar-start{ flex:1 1 auto; }
.topbar-end{ flex:0 0 auto; justify-content:flex-end; }
.topbar-item{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-weight:600; }
.topbar-text{ letter-spacing:.01em; }
.topbar-text-short{ display:none; }
.topbar-sep{
  width:1px; height:16px; flex-shrink:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent);
}
.topbar-ico{
  width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,90,31,.14); color:var(--primary); flex-shrink:0;
  border:1px solid rgba(255,90,31,.18);
}
.topbar-ico svg{ width:13px; height:13px; }
.currency-tag{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.07); padding:5px 12px; border-radius:999px;
  font-weight:700; border:1px solid rgba(255,255,255,.1); color:#e8eef8;
}
.currency-tag svg{ width:13px; height:13px; color:var(--primary); }
.topbar-hotline{
  display:inline-flex; align-items:center; gap:7px; color:#fff;
  padding:5px 12px 5px 8px; border-radius:999px;
  background:linear-gradient(135deg, rgba(255,90,31,.28), rgba(255,90,31,.12));
  border:1px solid rgba(255,90,31,.4);
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 6px 16px -10px rgba(255,90,31,.55);
}
.topbar-hotline svg{ width:14px; height:14px; color:var(--primary); flex-shrink:0; }
.topbar-hotline-label{ font-size:.72rem; font-weight:700; opacity:.85; }
.topbar-hotline strong{ font-weight:900; font-size:.92rem; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.topbar-hotline:hover{
  background:linear-gradient(135deg, rgba(255,90,31,.42), rgba(255,90,31,.2));
  transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(255,90,31,.65);
}

.auth-menu{ position:relative; }
.auth-trigger{
  display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 5px;
  border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:700; font-size:.78rem; transition:background .2s, border-color .2s, transform .2s;
}
.auth-trigger:hover, .auth-menu.open .auth-trigger{
  background:var(--primary); border-color:var(--primary); transform:translateY(-1px);
}
.auth-trigger-ico{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14);
}
.auth-trigger-ico svg{ width:13px; height:13px; }
.auth-caret{ width:14px; height:14px; opacity:.8; transition:transform .25s var(--ease); }
.auth-menu.open .auth-caret{ transform:rotate(180deg); }

.auth-dropdown{
  position:absolute; inset-inline-end:0; top:calc(100% + 10px); width:250px;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:8px; z-index:80;
  opacity:0; transform:translateY(8px) scale(.96); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.auth-menu.open .auth-dropdown{ opacity:1; transform:none; pointer-events:auto; }
.auth-dropdown[hidden]{ display:none; }
.auth-menu.open .auth-dropdown[hidden]{ display:block; }
.auth-option{
  width:100%; display:flex; align-items:center; gap:12px; text-align:start;
  padding:10px; border-radius:12px; transition:background .2s;
  border:0; background:transparent; color:inherit; cursor:pointer; font:inherit;
}
.auth-option:hover{ background:var(--surface-2); }
.auth-option-ico{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex-shrink:0;
  background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary-dark);
}
.auth-option-ico.register{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.auth-option-ico svg{ width:18px; height:18px; }
.auth-option strong{ display:block; font-size:.86rem; font-weight:800; }
.auth-option small{ display:block; font-size:.72rem; color:var(--text-muted); margin-top:2px; }

.auth-modal{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:16px;
  background:rgba(8,11,16,.62); backdrop-filter:blur(8px) saturate(1.05);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.auth-modal.show{ opacity:1; pointer-events:auto; }
.auth-dialog{
  position:relative;
  width:min(440px,100%);
  max-height:min(92svh, 720px);
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  padding:22px 20px 20px;
  transform:translateY(16px) scale(.97);
  transition:transform .3s var(--ease);
}
.auth-modal.show .auth-dialog{ transform:none; }
.auth-close{
  position:absolute; top:14px; inset-inline-end:14px; z-index:2;
  width:38px; height:38px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
}
.auth-brand{
  text-align:center;
  padding:8px 28px 18px;
}
.auth-brand img{
  height:48px; width:auto; margin-inline:auto; object-fit:contain;
}
.auth-brand h2{
  margin:14px 0 6px;
  font-size:1.2rem; font-weight:900; color:var(--text); line-height:1.35;
}
.auth-sub{
  margin:0; font-size:.86rem; color:var(--text-muted); line-height:1.6;
}
.auth-tabs{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--surface-2); border-radius:14px; padding:5px; gap:4px;
  margin-bottom:18px; border:1px solid var(--border);
}
.auth-tab{
  padding:11px 12px; border-radius:11px; font-weight:800; font-size:.86rem;
  color:var(--text-muted); transition:background .22s, color .22s, box-shadow .22s, transform .22s;
}
.auth-tab.active{
  background:var(--surface); color:var(--accent-text);
  box-shadow:0 8px 18px -14px rgba(18,22,28,.45);
}
.auth-form{
  display:none;
  flex-direction:column;
  gap:13px;
}
.auth-form.is-active,
.auth-form:not([hidden]){
  display:flex;
}
.auth-form[hidden]{ display:none !important; }
.auth-form label{
  display:flex; flex-direction:column; gap:7px;
  font-size:.8rem; font-weight:700; color:var(--text-muted);
}
.auth-label-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.auth-form input{
  border:1.5px solid var(--border); background:var(--surface-2); border-radius:14px;
  padding:13px 14px; color:var(--text); outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.auth-form input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
  background:var(--surface);
}
.auth-submit{
  min-height:50px; border-radius:14px; margin-top:4px;
  box-shadow:0 14px 26px -16px rgba(255,90,31,.65);
}
.auth-link{
  border:0; background:none; padding:0; color:var(--accent-text);
  font-weight:800; font-size:.78rem; cursor:pointer;
}
.auth-link:hover{ text-decoration:underline; }
.auth-switch{
  display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap;
  margin:4px 0 0; font-size:.82rem; color:var(--text-muted); text-align:center;
}
.auth-switch .auth-link{ font-size:.82rem; }

@media (max-width:560px){
  .auth-modal{ align-items:end; padding:0; }
  .auth-dialog{
    width:100%;
    max-height:92svh;
    border-radius:24px 24px 0 0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom,0));
  }
  .auth-brand{ padding-top:4px; padding-inline:22px; }
  .auth-brand img{ height:42px; }
  .auth-brand h2{ font-size:1.08rem; }
}

.header{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--border);
  transition:box-shadow .3s var(--ease), background .3s, border-color .3s;
}
.header.scrolled{ box-shadow:var(--shadow-sm); }
.header-main{ display:flex; align-items:center; gap:22px; padding-block:14px; }

.logo{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  line-height:0; padding:0; border-radius:0; background:transparent; border:none; box-shadow:none;
  transition:transform .25s var(--ease), opacity .25s;
}
.logo:hover{ transform:translateY(-1px); opacity:.92; }
.brand-logo{
  display:block; height:50px; width:auto; max-width:132px;
  object-fit:contain; object-position:center;
}
.footer .logo{ padding:0; }
.footer .brand-logo{ height:58px; max-width:150px; }
.mobile-nav .brand-logo{ height:42px; max-width:112px; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ font-weight:600; font-size:.95rem; position:relative; padding-block:6px; color:var(--text); }
.nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:2px; width:0;
  background:var(--primary); transition:width .3s var(--ease);
}
.nav a:hover::after, .nav a.active::after{ width:100%; }
.nav a.active{ color:var(--accent-text); }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-inline-start:auto; }
.lang-toggle{
  display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px;
  background:var(--surface-2); font-weight:700; font-size:.85rem;
  transition:background .25s, color .25s, transform .2s var(--ease);
}
.lang-toggle:hover{ background:var(--secondary); color:#fff; transform:translateY(-2px); }
.lang-toggle svg{ width:16px; height:16px; }

.theme-toggle{ position:relative; overflow:hidden; }
.theme-toggle svg{ position:absolute; transition:transform .45s var(--ease), opacity .45s var(--ease); }
.theme-toggle .i-sun{ opacity:0; transform:rotate(90deg) scale(.4); }
.theme-toggle .i-moon{ opacity:1; transform:rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .i-sun{ opacity:1; transform:rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .i-moon{ opacity:0; transform:rotate(-90deg) scale(.4); }

.burger{ display:none; }
.burger-box{ width:20px; height:14px; position:relative; display:inline-block; }
.burger-bar{ position:absolute; inset-inline-start:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease); }
.burger-bar:nth-child(1){ top:0; }
.burger-bar:nth-child(2){ top:6px; }
.burger-bar:nth-child(3){ top:12px; }
.burger.open .burger-bar:nth-child(1){ top:6px; transform:rotate(45deg); }
.burger.open .burger-bar:nth-child(2){ opacity:0; }
.burger.open .burger-bar:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* ==================== 5. HERO ==================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(520px, 88svh, 760px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center center;
  display:block; transform:scale(1.08);
}
.hero-slide.is-active img{ animation:hero-ken 7.5s ease-out forwards; }
@keyframes hero-ken{
  from{ transform:scale(1.08) translate3d(0,0,0); }
  to{ transform:scale(1) translate3d(-1%, -0.5%, 0); }
}
.hero-shade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(7,10,16,.55) 0%, rgba(7,10,16,.72) 55%, rgba(7,10,16,.88) 100%),
    linear-gradient(180deg, rgba(7,10,16,.45) 0%, rgba(7,10,16,.25) 30%, rgba(7,10,16,.45) 70%, rgba(7,10,16,.9) 100%),
    radial-gradient(circle at 50% 40%, rgba(255,90,31,.18), transparent 48%);
}
html[dir="ltr"] .hero-shade{
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(7,10,16,.55) 0%, rgba(7,10,16,.72) 55%, rgba(7,10,16,.88) 100%),
    linear-gradient(180deg, rgba(7,10,16,.45) 0%, rgba(7,10,16,.25) 30%, rgba(7,10,16,.45) 70%, rgba(7,10,16,.9) 100%),
    radial-gradient(circle at 50% 40%, rgba(255,90,31,.18), transparent 48%);
}
.hero-content{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  padding-block:clamp(80px, 12vw, 130px) clamp(88px, 11vw, 120px);
  max-width:760px; margin-inline:auto; width:100%;
}
.hero-brand-block{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:hero-rise .85s var(--ease) both;
}
.hero-logo{
  display:block; height:clamp(64px, 10vw, 92px); width:auto; max-width:min(280px, 72vw);
  object-fit:contain; object-position:center;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
}
.hero-brand-sub{
  margin:0; font-size:.72rem; font-weight:800; letter-spacing:.28em;
  color:rgba(255,255,255,.72); text-transform:uppercase;
}
.hero-brand-sub::after{
  content:""; display:block; width:48px; height:2px; margin:12px auto 0;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  border-radius:2px;
}
.hero h1{
  font-size:clamp(1.45rem, 3.2vw, 2.2rem); font-weight:750; line-height:1.35;
  color:rgba(255,255,255,.96); max-width:18ch; margin:18px 0 0;
  letter-spacing:-.01em;
  animation:hero-rise .85s .14s var(--ease) both;
}
.hero h1 em{
  font-style:normal; display:block; margin-top:6px;
  color:var(--primary); font-weight:800;
  text-shadow:0 0 40px rgba(255,90,31,.35);
}
.hero-desc{
  color:rgba(241,244,249,.84); font-size:clamp(.95rem, 1.45vw, 1.1rem);
  margin:18px 0 0; max-width:38ch; line-height:1.75; font-weight:500;
  animation:hero-rise .85s .22s var(--ease) both;
}
.hero-cta{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top:28px;
  animation:hero-rise .85s .3s var(--ease) both;
}
.hero-cta .btn{ min-width:148px; }
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}

.hero-controls{
  position:absolute; z-index:4; inset-inline:0;
  bottom:clamp(22px,4vw,36px); display:flex; align-items:center; justify-content:center; gap:12px;
}
.hero-nav{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff;
  backdrop-filter:blur(8px); transition:background .25s, transform .25s var(--ease);
}
.hero-nav:hover{ background:var(--primary); border-color:var(--primary); transform:scale(1.06); }
.hero-nav svg{ width:18px; height:18px; }
html[dir="rtl"] .hero-prev svg{ transform:none; }
html[dir="ltr"] .hero-prev svg{ transform:scaleX(-1); }
html[dir="rtl"] .hero-next svg{ transform:scaleX(-1); }
html[dir="ltr"] .hero-next svg{ transform:none; }
.hero-dots{ display:flex; gap:8px; align-items:center; }
.hero-dot{
  width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.35);
  transition:width .35s var(--ease), background .25s;
}
.hero-dot.active{ width:28px; background:var(--primary); }
.hero-progress{
  position:absolute; inset-inline:0; bottom:0; height:3px; z-index:4;
  background:rgba(255,255,255,.12);
}
.hero-progress span{
  display:block; height:100%; width:0; background:linear-gradient(90deg,var(--primary),#ff9a5c);
  transform-origin:left center;
}
html[dir="rtl"] .hero-progress span{ transform-origin:right center; }

.trust-strip{
  background:linear-gradient(180deg, #0a1a31 0%, var(--secondary) 100%);
  color:#cdd8ec; border-bottom:1px solid rgba(255,255,255,.06);
  position:relative; z-index:4;
}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding-block:26px 54px; text-align:start;
}
.trust-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  transition:transform .25s var(--ease), background .25s, border-color .25s;
}
.trust-item:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,90,31,.28);
}
.trust-ico{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(145deg, rgba(255,90,31,.28), rgba(255,90,31,.08));
  color:var(--primary); border:1px solid rgba(255,90,31,.22);
}
.trust-ico svg{ width:20px; height:20px; }
.trust-item strong{ display:block; color:#fff; font-size:1.2rem; font-weight:900; line-height:1.15; }
.trust-item span{ display:block; font-size:.78rem; color:#9fb0cc; margin-top:3px; font-weight:600; }

/* ==================== 5b. FINDER SEARCH ==================== */
.finder-wrap{ position:relative; z-index:5; margin-top:-42px; margin-bottom:8px; }
.finder{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:24px;
  box-shadow:0 28px 60px -28px rgba(8,21,38,.45), var(--shadow-lg);
  padding:22px;
  background-image:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff), var(--surface));
}
.finder:has(.cselect.is-open){ z-index:35; }
.finder::before{
  content:""; position:absolute; inset-inline:22px; top:0; height:3px; border-radius:0 0 8px 8px;
  background:linear-gradient(90deg, var(--primary), #ff9a5c, transparent);
}
.finder-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
.finder-head-copy{ min-width:0; }
.finder-eyebrow{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:6px;
  padding:4px 10px; border-radius:999px; font-size:.7rem; font-weight:800;
  color:var(--primary-dark); background:color-mix(in srgb, var(--primary) 14%, transparent);
  letter-spacing:.04em;
}
.finder-head strong{ display:block; font-size:1.12rem; font-weight:800; color:var(--text); }
.finder-head-copy > span:last-child{ display:block; color:var(--text-muted); font-size:.84rem; margin-top:4px; }
.finder-quick{
  display:flex; align-items:center; gap:10px; min-width:min(100%,280px); flex:1; max-width:380px;
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:14px; padding:12px 14px;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.finder-quick:focus-within{
  border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.finder-quick svg{ width:18px; height:18px; color:var(--primary); flex-shrink:0; }
.finder-quick input{ border:none; outline:none; background:transparent; width:100%; font-size:.92rem; color:var(--text); }

/* Smart search suggestions */
.smart-search, .finder-quick, form.hdr-search{ position:relative; }
.smart-suggest{
  position:absolute; inset-inline:0; top:calc(100% + 8px); z-index:60;
  background:var(--surface, #fff); border:1px solid var(--border, #e5e7eb);
  border-radius:16px; box-shadow:0 22px 40px -18px rgba(8,21,38,.42);
  padding:8px; max-height:min(420px, 60svh); overflow:auto;
}
.smart-suggest-section{ margin-bottom:6px; }
.smart-suggest-label{
  font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted, #64748b); padding:6px 10px 4px;
}
.smart-suggest-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
  color:inherit; text-decoration:none; transition:background .15s;
}
.smart-suggest-item:hover, .smart-suggest-item:focus-visible{
  background:color-mix(in srgb, var(--primary, #ff5a1f) 10%, transparent);
  outline:none;
}
.smart-suggest-thumb{
  width:44px; height:44px; border-radius:10px; overflow:hidden; flex-shrink:0;
  background:var(--surface-2, #f1f5f9); display:grid; place-items:center;
}
.smart-suggest-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.smart-suggest-ph{ width:18px; height:18px; border-radius:4px; background:#cbd5e1; display:block; }
.smart-suggest-ico{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background:color-mix(in srgb, var(--primary, #ff5a1f) 12%, transparent); color:var(--primary, #ff5a1f);
  font-size:.85rem; font-weight:800;
}
.smart-suggest-meta{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.smart-suggest-meta strong{
  font-size:.86rem; font-weight:800; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.smart-suggest-meta small{ font-size:.72rem; color:var(--text-muted, #64748b); }
.smart-suggest-price{ font-size:.82rem; font-weight:900; color:var(--primary, #ff5a1f); white-space:nowrap; }
.smart-suggest-all{
  display:block; text-align:center; margin-top:4px; padding:10px;
  border-radius:12px; font-weight:800; font-size:.84rem;
  color:var(--accent-text, #c2410c); background:var(--surface-2, #f8fafc);
}
.smart-suggest-all:hover{ background:color-mix(in srgb, var(--primary, #ff5a1f) 12%, transparent); }
.smart-suggest-empty{
  padding:16px 12px; text-align:center; color:var(--text-muted, #64748b);
  font-size:.84rem; font-weight:700;
}
.finder-quick .smart-suggest{ inset-inline:0; }
form.hdr-search .smart-suggest{
  inset-inline:12px; top:calc(100% + 6px);
}

.finder-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:12px; align-items:stretch;
}
.finder-field{
  display:flex; flex-direction:column; gap:8px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:16px; padding:12px 14px; min-height:74px;
  transition:border-color .25s, box-shadow .25s, transform .2s;
}
.finder-field:focus-within{
  border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  background:var(--surface); transform:translateY(-1px);
}
.finder-label{ display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; color:var(--text-muted); }
.finder-label svg{ width:14px; height:14px; color:var(--primary); }
.finder-field select{
  border:none; outline:none; background:transparent; font-weight:700; font-size:.92rem; color:var(--text);
  appearance:none; -webkit-appearance:none; cursor:pointer; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:14px; background-position:right center; padding-inline-end:18px;
}
html[dir="rtl"] .finder-field select{ background-position:left center; }
.finder-field select.cselect-native{
  position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important;
  pointer-events:none !important; margin:0 !important; padding:0 !important; border:0 !important;
}
.finder-field{ position:relative; }
.cselect{ position:relative; width:100%; }
.cselect-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:transparent; border:0; padding:0; cursor:pointer; text-align:start; color:var(--text); font:inherit;
}
.cselect-trigger-main{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.cselect-trigger-main img,
.cselect-option-media img{
  width:28px; height:18px; object-fit:contain; display:block; flex-shrink:0;
}
.cselect-ico{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;
  background:color-mix(in srgb, var(--primary) 12%, var(--surface)); color:var(--primary);
}
.cselect-ico svg{ width:15px; height:15px; }
.cselect-label{
  font-weight:800; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cselect-label.is-placeholder{ color:var(--text-muted); font-weight:700; }
.cselect-caret{
  width:16px; height:16px; color:var(--text-muted); flex-shrink:0; transition:transform .2s var(--ease);
}
.cselect.is-open .cselect-caret{ transform:rotate(180deg); color:var(--primary); }
.cselect-panel{
  position:absolute; inset-inline:0; top:calc(100% + 10px); z-index:40;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 22px 40px -18px rgba(8,21,38,.45), var(--shadow);
  padding:10px; max-height:min(320px, 55svh); overflow:auto;
  opacity:0; transform:translateY(8px) scale(.98); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.cselect.is-open .cselect-panel{
  opacity:1; transform:none; pointer-events:auto;
}
.cselect-search{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:8px 10px;
}
.cselect-search svg{ width:15px; height:15px; color:var(--text-muted); flex-shrink:0; }
.cselect-search input{
  border:0; outline:0; background:transparent; width:100%; font:inherit; color:var(--text); font-size:.84rem;
}
.cselect-list{ display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.cselect-panel.is-brands .cselect-list{
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.cselect-option{
  width:100%; display:flex; align-items:center; gap:10px; padding:10px;
  border:1px solid transparent; border-radius:12px; background:transparent;
  color:var(--text); font:inherit; font-weight:700; font-size:.84rem; cursor:pointer; text-align:start;
  transition:background .15s, border-color .15s, transform .15s;
}
.cselect-panel.is-brands .cselect-option{
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:78px; padding:12px 8px; background:var(--surface-2); border-color:var(--border);
}
.cselect-option:hover,
.cselect-option.is-active{
  background:color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-color:color-mix(in srgb, var(--primary) 35%, var(--border));
}
.cselect-panel.is-brands .cselect-option:hover,
.cselect-panel.is-brands .cselect-option.is-active{
  transform:translateY(-1px);
  box-shadow:0 10px 18px -14px rgba(255,90,31,.55);
}
.cselect-option-media{
  width:36px; height:28px; display:grid; place-items:center; flex-shrink:0;
}
.cselect-panel.is-brands .cselect-option-media{ width:56px; height:30px; }
.cselect-panel.is-brands .cselect-option-media img{ width:52px; height:28px; }
.cselect-option-text{ min-width:0; flex:1; line-height:1.3; }
.cselect-panel.is-brands .cselect-option-text{ flex:0; text-align:center; font-size:.78rem; }
.cselect-check{
  width:18px; height:18px; border-radius:999px; display:none; place-items:center; flex-shrink:0;
  background:var(--primary); color:#fff;
}
.cselect-option.is-active .cselect-check{ display:grid; }
.cselect-check svg{ width:11px; height:11px; }
.cselect-empty{
  padding:16px 10px; text-align:center; color:var(--text-muted); font-size:.82rem; font-weight:700;
}
.cselect-panel.is-brands .cselect-option.is-clear{
  grid-column:1 / -1; flex-direction:row; justify-content:flex-start;
  min-height:auto; padding:10px 12px;
}
.finder-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:74px; padding-inline:30px; border-radius:16px;
  background:linear-gradient(145deg, var(--primary), var(--primary-dark)); color:#fff;
  font-weight:800; white-space:nowrap; transition:transform .25s var(--ease), box-shadow .25s, filter .25s;
  box-shadow:0 16px 30px -12px rgba(255,90,31,.7);
}
.finder-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }

@media (max-width:700px){
  .cselect-panel.is-brands .cselect-list{ grid-template-columns:1fr 1fr; }
}

/* ==================== 6. FILTER / SHOP TOOLBAR ==================== */
.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-block:4px 18px; margin-bottom:4px;
}
.filter-strip{ display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; padding-block:4px; }
.filter-strip::-webkit-scrollbar{ display:none; }
.chip{
  padding:9px 16px; border-radius:999px; border:1.5px solid var(--border);
  background:var(--surface); font-weight:700; font-size:.84rem; color:var(--text-muted);
  transition:all .25s var(--ease); white-space:nowrap; position:relative;
  cursor:pointer; font-family:inherit; line-height:1.2;
}
.chip.active, .chip:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.chip.active{ box-shadow:0 8px 18px -10px rgba(11,31,58,.55); }
.shop-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.results-count{ font-size:.84rem; color:var(--text-muted); white-space:nowrap; }
.results-count strong{ color:var(--text); font-weight:800; }
.sort-field{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:6px 12px; font-size:.8rem; font-weight:700; color:var(--text-muted);
}
.sort-field select{
  border:none; outline:none; background:transparent; font-weight:800; color:var(--text); cursor:pointer;
  appearance:none; -webkit-appearance:none;
}
.view-toggle{ display:flex; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.view-btn{ width:38px; height:34px; display:grid; place-items:center; color:var(--text-muted); transition:background .2s, color .2s; }
.view-btn svg{ width:16px; height:16px; }
.view-btn.active, .view-btn:hover{ background:var(--secondary); color:#fff; }

/* ==================== 7. CATEGORIES ==================== */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 16px; text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative; overflow:hidden;
}
.cat-card::before{
  content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(160deg, var(--primary-light), transparent 60%);
  transition:opacity .3s;
}
.cat-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.cat-card:hover::before{ opacity:1; }
.cat-icon{
  width:58px; height:58px; margin-inline:auto; border-radius:16px; display:grid; place-items:center;
  background:var(--primary-light); color:var(--primary-dark); margin-bottom:14px; position:relative; z-index:1;
  transition:transform .35s var(--ease), background .3s, color .3s;
}
.cat-card:hover .cat-icon{ transform:rotate(-8deg) scale(1.08); background:var(--primary); color:#fff; }
.cat-icon svg{ width:28px; height:28px; }
.cat-card h3{ font-size:.95rem; font-weight:700; position:relative; z-index:1; }
.cat-card p{ font-size:.78rem; color:var(--text-muted); margin-top:4px; position:relative; z-index:1; }

/* ==================== 8. FLASH DEALS ==================== */
.deals{ background:var(--secondary); border-radius:var(--radius-lg); padding:34px; position:relative; overflow:hidden; }
.deals::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 90% 10%, rgba(255,90,31,.25), transparent 60%); }
.deals-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:26px; position:relative; }
.deals-head h2{ color:#fff; font-size:1.5rem; font-weight:800; display:flex; align-items:center; gap:10px; }
.deals-head h2 svg{ width:26px; height:26px; color:var(--primary); }
.deals-timer{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.deals-timer-label{ color:#9fb0cc; font-size:.85rem; font-weight:600; }
.countdown{ display:flex; gap:10px; }
.countdown div{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:8px 12px; text-align:center; min-width:58px; }
.countdown strong{ display:block; color:#fff; font-size:1.2rem; font-weight:800; }
.countdown span{ color:#9fb0cc; font-size:.68rem; }
.deals-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; }

/* ==================== 9. PRODUCT CARD ==================== */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prod-grid.is-list{ grid-template-columns:1fr; }
.prod-grid.is-list .card{
  display:grid; grid-template-columns:180px 1fr; align-items:stretch;
}
.prod-grid.is-list .card-media{ aspect-ratio:auto; min-height:150px; }
.prod-grid.is-list .card-body{
  display:grid; grid-template-columns:1fr auto; gap:8px 18px; align-content:center;
}
.prod-grid.is-list .card-title{ min-height:0; grid-column:1 / -1; }
.prod-grid.is-list .add-cart-btn, .prod-grid.is-list .qty-stepper{ min-width:160px; align-self:end; }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  overflow:hidden; position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }
.card-media{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:
    linear-gradient(160deg, var(--surface-2), color-mix(in srgb, var(--primary-light) 35%, var(--surface-2)));
}
.card-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .55s var(--ease); display:block;
}
.card:hover .card-media img{ transform:scale(1.07); }
.card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(8,11,16,.22));
  pointer-events:none;
}
.card-quick{
  position:absolute; inset-inline:12px; bottom:12px; z-index:2;
  display:flex; gap:8px; opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card-quick{ opacity:1; transform:translateY(0); }
.tile-1,.tile-2,.tile-3,.tile-4,.tile-5,.tile-6,.tile-7,.tile-8{ background:var(--surface-2); }

.card-badges{ position:absolute; top:10px; inset-inline-start:10px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.tag{ font-size:.68rem; font-weight:800; padding:4px 10px; border-radius:999px; color:#fff; backdrop-filter:blur(4px); }
.tag-new{ background:var(--accent); }
.tag-used{ background:var(--used); }
.tag-imported{ background:var(--imported); }
.tag-off{ background:var(--danger); }
.tag-hot{ background:var(--primary-dark); display:inline-flex; align-items:center; gap:4px; }
.tag-hot svg{ width:11px; height:11px; }

.wish-btn{
  position:absolute; top:10px; inset-inline-end:10px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.94); color:#94a3b8; display:grid; place-items:center; z-index:2;
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), color .25s;
}
.wish-btn:hover{ transform:scale(1.12); }
.wish-btn.active, .wish-btn.is-wished{ color:var(--danger); }
.wish-btn.active svg, .wish-btn.is-wished svg{ fill:currentColor; }
.wish-btn svg{ width:17px; height:17px; }

.share-btn{
  position:absolute; top:52px; inset-inline-end:10px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--secondary); display:grid; place-items:center; z-index:2;
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), background .25s, color .25s;
}
.share-btn:hover{ transform:scale(1.12); background:var(--primary); color:#fff; }
.share-btn svg{ width:16px; height:16px; }

.blog-share{
  margin-top:8px; display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:700; color:var(--accent-text);
}
.blog-share svg{ width:15px; height:15px; }

/* ==================== SHARE MODAL ==================== */
.share-modal{
  position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:18px;
  background:rgba(8,11,16,.55); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.share-modal.show{ opacity:1; pointer-events:auto; }
.share-dialog{
  width:min(460px,100%); background:var(--surface); border:1px solid var(--border);
  border-radius:22px; box-shadow:var(--shadow-lg); padding:18px; transform:translateY(18px) scale(.96);
  transition:transform .35s var(--ease); max-height:min(92svh,720px); overflow:auto;
}
.share-modal.show .share-dialog{ transform:none; }
.share-dialog-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.share-dialog-head h3{ font-size:1.1rem; font-weight:800; }
.share-preview{
  border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface-2); margin-bottom:16px;
}
.share-preview-media{ aspect-ratio:16/9; overflow:hidden; background:#0b1220; }
.share-preview-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.share-preview-body{ padding:14px; }
.share-preview-body strong{ display:block; font-size:.98rem; font-weight:800; margin-bottom:6px; line-height:1.45; }
.share-preview-body p{ font-size:.84rem; color:var(--text-muted); line-height:1.65; margin-bottom:8px; }
.share-preview-url{
  display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.72rem; color:var(--primary); font-weight:700; direction:ltr;
}
.share-networks{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.share-net{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px;
  border-radius:14px; border:1px solid var(--border); background:var(--surface);
  font-size:.72rem; font-weight:800; color:var(--text);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s;
}
.share-net svg{ width:22px; height:22px; color:var(--sc, var(--primary)); }
.share-net:hover{
  transform:translateY(-3px); border-color:var(--sc, var(--primary));
  box-shadow:0 12px 22px -14px color-mix(in srgb, var(--sc, var(--primary)) 70%, transparent);
  background:color-mix(in srgb, var(--sc, var(--primary)) 8%, var(--surface));
}
.share-native{ display:inline-flex; gap:8px; }
.share-native[hidden]{ display:none !important; }

@media (max-width:480px){
  .share-networks{ grid-template-columns:repeat(2,1fr); }
}

.card-body{ padding:16px; }
.card-compat{ font-size:.72rem; color:var(--text-muted); margin-bottom:4px; }
.card-title{ font-weight:700; font-size:.94rem; margin-bottom:8px; min-height:2.6em; line-height:1.45; }
.rating{ display:flex; align-items:center; gap:4px; margin-bottom:10px; }
.rating svg{ width:14px; height:14px; color:var(--star); }
.rating span{ font-size:.75rem; color:var(--text-muted); margin-inline-start:4px; }
.price-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
.price{ font-weight:900; font-size:1.15rem; color:var(--primary); }
.price-old{ font-size:.82rem; color:var(--text-muted); text-decoration:line-through; }
.currency{ font-size:.68rem; font-weight:700; }

.add-cart-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:12px; background:var(--secondary); color:#fff; font-weight:700; font-size:.88rem;
  transition:background .25s, transform .2s var(--ease), box-shadow .25s;
}
.add-cart-btn:hover{ background:var(--primary-dark); box-shadow:0 10px 20px -10px rgba(255,90,31,.55); }
.add-cart-btn:active{ transform:scale(.97); }
.add-cart-btn svg{ width:17px; height:17px; }

.qty-stepper{ display:none; align-items:center; justify-content:space-between; background:var(--surface-2); border-radius:12px; overflow:hidden; }
.qty-stepper.show{ display:flex; }
.qty-stepper button{ width:38px; height:38px; font-weight:800; font-size:1.1rem; transition:background .2s; }
.qty-stepper button:hover{ background:var(--border); }
.qty-stepper span{ font-weight:800; }

/* ==================== 10. WHY US ==================== */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why-card{ text-align:center; padding:28px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.why-icon{ width:64px; height:64px; margin-inline:auto; margin-bottom:16px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--primary-light),transparent); color:var(--primary); }
.why-icon svg{ width:30px; height:30px; }
.why-card h3{ font-weight:700; margin-bottom:6px; font-size:1rem; }
.why-card p{ font-size:.84rem; color:var(--text-muted); }

/* ==================== 11. BRAND LOGOS ==================== */
.brands-section{
  background:
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--surface-2) 55%, var(--bg)) 100%);
  overflow:hidden;
}
.brands-orbit{
  position:relative;
  margin-top:10px;
  isolation:isolate;
  --ax:50%;
  --ay:50%;
}
.brands-aurora{
  position:absolute;
  width:min(420px, 55%);
  aspect-ratio:1;
  left:var(--ax);
  top:var(--ay);
  translate:-50% -50%;
  border-radius:50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 28%, transparent) 0%, transparent 68%);
  filter:blur(8px);
  pointer-events:none;
  z-index:0;
  opacity:.9;
  transition:left .9s var(--ease), top .9s var(--ease), opacity .4s;
}
.brands-wall{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.brand-tile{
  --rx:0deg;
  --ry:0deg;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:126px;
  padding:22px 16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid #e8eaef;
  box-shadow:0 1px 2px rgba(18,22,28,.04);
  color:#12161c;
  overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1);
  transition:
    transform .35s var(--ease),
    border-color .35s,
    box-shadow .35s,
    background .35s;
}
[data-theme="dark"] .brand-tile{
  background:rgba(244,246,250,.96);
  border-color:rgba(255,255,255,.08);
}
.brand-tile-glow{
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at center, color-mix(in srgb, var(--primary) 22%, transparent), transparent 62%);
  opacity:0;
  transform:scale(.6);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
  pointer-events:none;
}
.brand-tile img{
  position:relative;
  z-index:1;
  width:auto;
  max-width:88px;
  height:40px;
  object-fit:contain;
  animation:brand-logo-bob 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -0.48s);
  transition:transform .35s var(--ease), filter .35s;
}
.brand-tile > span:not(.brand-tile-glow){
  position:relative;
  z-index:1;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.03em;
  color:#5b6472;
  transition:color .25s, letter-spacing .35s;
}
@keyframes brand-logo-bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

.brand-tile.is-lit{
  border-color:color-mix(in srgb, var(--primary) 50%, #e8eaef);
  box-shadow:
    0 18px 34px -20px rgba(255,90,31,.55),
    0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
  background:color-mix(in srgb, var(--primary-light) 42%, #fff);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) scale(1.04);
  z-index:2;
}
.brand-tile.is-lit .brand-tile-glow{
  opacity:1;
  transform:scale(1);
}
.brand-tile.is-lit img{
  animation-play-state:paused;
  transform:translateY(0) scale(1.08);
  filter:drop-shadow(0 8px 10px rgba(18,22,28,.12));
}
.brand-tile.is-lit > span:not(.brand-tile-glow){
  color:var(--primary-dark);
  letter-spacing:.06em;
}

.brand-tile.is-near,
.brand-tile:hover,
.brand-tile.is-active{
  border-color:color-mix(in srgb, var(--primary) 45%, #e8eaef);
  box-shadow:0 16px 30px -18px rgba(255,90,31,.48);
  background:color-mix(in srgb, var(--primary-light) 35%, #fff);
  z-index:2;
}
.brand-tile:hover,
.brand-tile.is-active{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.03);
}
.brand-tile:hover img,
.brand-tile.is-active img{
  transform:translateY(0) scale(1.07);
  animation-play-state:paused;
}
.brand-tile:hover > span:not(.brand-tile-glow),
.brand-tile.is-active > span:not(.brand-tile-glow){
  color:var(--primary-dark);
}
.brand-tile.is-active{
  outline:2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset:0;
}
.brands-orbit.is-paused .brands-aurora{ opacity:.35; }

@media (max-width:980px){
  .brands-wall{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .brand-tile{ min-height:112px; padding:18px 12px 14px; }
}
@media (max-width:560px){
  .brands-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .brand-tile{ min-height:104px; border-radius:14px; }
  .brand-tile img{ max-width:72px; height:34px; }
  .brand-tile > span:not(.brand-tile-glow){ font-size:.72rem; }
  .brands-aurora{ width:70%; }
}

/* ==================== 12. TESTIMONIALS ==================== */
.test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.test-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative; transition:transform .3s var(--ease), box-shadow .3s; }
.test-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.test-quote{ color:var(--primary); opacity:.25; width:34px; height:34px; margin-bottom:10px; }
.test-text{ font-size:.9rem; color:var(--text-muted); margin-bottom:16px; min-height:4.4em; }
.test-user{ display:flex; align-items:center; gap:10px; }
.test-avatar{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; }
.test-user strong{ display:block; font-size:.88rem; }
.test-user span{ font-size:.75rem; color:var(--text-muted); }

/* ==================== 12b. LOYALTY PROGRAM ==================== */
.loyalty-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:44px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.loyalty-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 90% 12%, var(--primary-light), transparent 55%); }
.loyalty-info{ position:relative; max-width:420px; }
.loyalty-info .btn{ margin-top:20px; }
.loyalty-steps{ display:flex; align-items:center; gap:14px; position:relative; flex-wrap:wrap; justify-content:center; }
.loyalty-step{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; width:112px; }
.loyalty-step-icon{ width:56px; height:56px; border-radius:50%; background:var(--primary-light); color:var(--primary-dark); display:grid; place-items:center; }
.loyalty-step-icon svg{ width:26px; height:26px; }
.loyalty-step strong{ font-size:.8rem; font-weight:700; }
.loyalty-arrow{ width:22px; height:22px; color:var(--text-muted); flex-shrink:0; }
html[dir="rtl"] .loyalty-arrow{ transform:scaleX(-1); }

/* ==================== 13. NEWSLETTER ==================== */
.newsletter{ background:linear-gradient(120deg,var(--secondary),#122a4d); border-radius:var(--radius-lg); padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }

/* ==================== HOME FAQ ==================== */
.home-faq{ position:relative; }
.home-faq-layout{
  display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.35fr); gap:34px; align-items:start;
}
.home-faq-intro{
  position:sticky; top:96px;
  padding:28px; border-radius:24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,90,31,.18), transparent 45%),
    linear-gradient(160deg, #0b1f3a 0%, #122a4d 55%, #0f2748 100%);
  color:#fff; box-shadow:0 18px 40px rgba(11,31,58,.22);
  overflow:hidden;
}
.home-faq-intro::after{
  content:""; position:absolute; inset:auto -40px -50px auto; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,31,.35), transparent 70%); pointer-events:none;
}
.home-faq-intro .section-eyebrow{ color:rgba(255,255,255,.72); }
.home-faq-intro .section-title{ color:#fff; margin-block:10px 12px; font-size:clamp(1.45rem,2.4vw,1.9rem); }
.home-faq-intro .section-sub{ color:#b9c6dd; margin:0; max-width:36ch; }
.home-faq-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 20px; }
.home-faq-stat{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:12px 10px; text-align:center;
}
.home-faq-stat strong{ display:block; font-size:1.15rem; font-weight:800; color:#fff; }
.home-faq-stat span{ font-size:.72rem; color:#b9c6dd; }
.home-faq-cta{ display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:1; }
.home-faq-cta .btn-ghost{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16);
}
.home-faq-cta .btn-ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }
.home-faq-panel{ min-width:0; }
.home-faq-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.home-faq-filter{
  border:1px solid var(--border,#e6e8ec); background:var(--surface,#fff); color:var(--text,#1a2333);
  border-radius:999px; padding:8px 14px; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.home-faq-filter:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }
.home-faq-filter.is-active{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 8px 18px rgba(255,90,31,.25);
}
.home-faq-acc{ display:flex; flex-direction:column; gap:10px; }
.home-faq-item{
  background:var(--surface,#fff); border:1px solid var(--border,#e6e8ec); border-radius:18px;
  overflow:hidden; transition:border-color .25s,box-shadow .25s,transform .25s;
}
.home-faq-item:hover{ border-color:rgba(255,90,31,.35); }
.home-faq-item.is-open{
  border-color:rgba(255,90,31,.45);
  box-shadow:0 14px 34px rgba(11,31,58,.1);
}
.home-faq-q{
  width:100%; display:flex; align-items:center; gap:14px; text-align:start;
  padding:16px 18px; background:transparent; border:0; cursor:pointer; color:inherit; font:inherit;
}
.home-faq-ico{
  width:42px; height:42px; border-radius:14px; flex-shrink:0; display:grid; place-items:center;
  background:rgba(255,90,31,.1); color:var(--primary); font-size:.95rem;
}
.home-faq-ico svg{ width:20px; height:20px; }
.home-faq-q-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.home-faq-q-text strong{ font-size:.98rem; font-weight:800; color:var(--text,#1a2333); line-height:1.4; }
.home-faq-q-text small{ font-size:.72rem; font-weight:700; color:var(--text-muted,#6b7280); letter-spacing:.02em; }
.home-faq-chev{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:var(--surface-2,#f3f5f8); color:var(--text-muted,#6b7280); transition:transform .3s,background .2s,color .2s;
}
.home-faq-chev svg{ width:16px; height:16px; }
.home-faq-item.is-open .home-faq-chev{ transform:rotate(180deg); background:var(--primary); color:#fff; }
.home-faq-a{ display:block; overflow:hidden; }
.home-faq-a[hidden]{ display:none; }
.home-faq-a-inner{
  padding:0 18px 18px 74px; color:var(--text-muted,#5b6472); font-size:.92rem; line-height:1.8;
  animation:homeFaqIn .28s ease;
}
@keyframes homeFaqIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.home-faq-foot{ margin:16px 2px 0; font-size:.86rem; color:var(--text-muted,#6b7280); }
.home-faq-foot a{ color:var(--primary); font-weight:700; text-decoration:none; }
.home-faq-foot a:hover{ text-decoration:underline; }
[data-theme="dark"] .home-faq-item,
[data-theme="dark"] .home-faq-filter{ background:var(--surface,#131824); border-color:var(--border,#232b3a); color:var(--text,#f1f4f9); }
[data-theme="dark"] .home-faq-q-text strong{ color:var(--text,#f1f4f9); }
[data-theme="dark"] .home-faq-a-inner{ color:var(--text-muted,#93a0b4); }
[data-theme="dark"] .home-faq-chev{ background:#1a2130; }
@media(max-width:980px){
  .home-faq-layout{ grid-template-columns:1fr; gap:22px; }
  .home-faq-intro{ position:static; }
}
@media(max-width:640px){
  .home-faq-stats{ grid-template-columns:1fr; }
  .home-faq-a-inner{ padding-inline-start:18px; }
  .home-faq-q{ gap:10px; padding:14px; }
}
.newsletter::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 90%, rgba(255,90,31,.25), transparent 55%); }
.newsletter h3{ color:#fff; font-size:1.4rem; font-weight:800; position:relative; }
.newsletter p{ color:#b9c6dd; margin-top:6px; position:relative; }
.newsletter-form{ display:flex; gap:10px; position:relative; }
.newsletter-form input{ padding:13px 18px; border-radius:999px; border:none; outline:none; width:260px; }

/* ==================== 13b. BLOG ==================== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.blog-media{
  display:block; aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--surface-2); flex-shrink:0;
}
.blog-media > a{ display:block; width:100%; height:100%; }
.blog-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--ease);
}
.blog-card:hover .blog-media img{ transform:scale(1.05); }
.blog-body{ padding:20px; color:var(--text); flex:1; display:flex; flex-direction:column; }
.blog-meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.blog-cat{ background:var(--primary-light); color:var(--accent-text); font-size:.68rem; font-weight:800; padding:4px 10px; border-radius:999px; }
.blog-date{ font-size:.72rem; color:var(--text-muted); }
.blog-body h3{ font-size:1rem; font-weight:800; margin-bottom:8px; line-height:1.5; color:var(--text); }
.blog-body h3 a{ color:inherit; }
.blog-body h3 a:hover{ color:var(--accent-text); }
.blog-body p{ font-size:.85rem; color:var(--text-muted); margin-bottom:14px; line-height:1.7; }
.blog-share{
  margin-top:8px; display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:700; color:var(--accent-text); cursor:pointer;
  background:none; border:none; padding:0; font:inherit;
}
.blog-share svg{ width:15px; height:15px; flex-shrink:0; }

/* ==================== 14. FOOTER ==================== */
.footer{ background:var(--secondary); color:#b9c6dd; padding-block:56px 26px; margin-top:70px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:34px; margin-bottom:28px; align-items:start; }
.footer-desc{ font-size:.85rem; margin-block:14px 18px; line-height:1.8; max-width:36ch; }
.footer h4{ color:#fff; font-weight:700; margin-bottom:16px; font-size:.95rem; }
.footer li{ margin-bottom:10px; }
.footer a{ font-size:.86rem; transition:color .2s, padding .2s; }
.footer a:hover{ color:var(--primary); padding-inline-start:4px; }
.footer-contact li{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.footer-contact svg{ width:16px; height:16px; color:var(--primary); flex-shrink:0; }
.social-row{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.social-btn,
.social-row a,
.footer-share-btn{
  --social-bg:#1877f2;
  position:relative;
  width:40px; height:40px; border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  display:grid; place-items:center;
  color:#d7e0ef;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .3s var(--ease),
    background .3s var(--ease),
    border-color .3s var(--ease),
    color .25s var(--ease),
    box-shadow .3s var(--ease);
}
.social-btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--social-bg);
  opacity:0;
  z-index:-1;
  transition:opacity .3s var(--ease);
}
.social-btn svg,
.social-row a svg,
.footer-share-btn svg{
  width:17px; height:17px;
  position:relative;
  z-index:1;
  transition:transform .3s var(--ease);
}
.social-btn:hover,
.social-btn:focus-visible,
.footer-share-btn:hover,
.footer-share-btn:focus-visible{
  color:#fff;
  transform:translateY(-4px) scale(1.06);
  border-color:transparent;
  box-shadow:0 12px 22px -10px color-mix(in srgb, var(--social-bg) 75%, transparent);
}
.social-btn:hover::before,
.social-btn:focus-visible::before{
  opacity:1;
}
.social-btn:hover svg,
.social-btn:focus-visible svg{
  transform:scale(1.08);
}

.social-facebook{ --social-bg:#1877F2; }
.social-instagram{ --social-bg:#E1306C; }
.social-instagram::before{
  background:linear-gradient(135deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%);
}
.social-x{ --social-bg:#111111; }
.social-youtube{ --social-bg:#FF0000; }
.social-whatsapp{ --social-bg:#25D366; }
.social-tiktok{ --social-bg:#010101; }
.social-tiktok:hover,
.social-tiktok:focus-visible{
  box-shadow:
    -4px 10px 18px -10px #25F4EE,
    4px 10px 18px -10px #FE2C55;
}
.social-share{ --social-bg:var(--primary); }
.pay-row span, .footer .pay-row > span:not(.pay-badge){ background:rgba(255,255,255,.08); padding:5px 10px; border-radius:6px; font-size:.72rem; font-weight:700; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 16px; font-size:.8rem; }
.footer-legal{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 2px; margin:0; padding:0; }
.footer-legal a{ font-size:.78rem; color:rgba(185,198,221,.72); text-decoration:none; white-space:nowrap; padding:0 !important; transition:color .2s; }
.footer-legal a:hover{ color:var(--primary,#ff5a1f) !important; padding:0 !important; }
.footer-legal-sep{ display:inline-block; margin-inline:8px; color:rgba(185,198,221,.35); font-weight:700; user-select:none; }
.footer-made{ display:inline-flex; align-items:center; gap:6px; }
.footer-heart{ color:#ef4444; font-size:1em; line-height:1; }
@media(max-width:720px){
  .footer-bottom{ flex-direction:column; text-align:center; justify-content:center; }
  .footer-legal{ justify-content:center; }
}

/* ==================== 15. WHATSAPP WIDGET ==================== */
.wa-widget{ position:fixed; bottom:26px; inset-inline-end:26px; z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.wa-fab{
  position:relative; width:58px; height:58px; border-radius:50%; flex-shrink:0;
  background:#25d366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(37,211,102,.7);
  animation:wa-pulse 2.4s infinite; transition:transform .25s var(--ease);
}
.wa-fab:hover{ transform:scale(1.05); }
.wa-fab svg{ width:28px; height:28px; position:absolute; transition:opacity .25s var(--ease), transform .3s var(--ease); }
.wa-fab .wa-icon-close{ opacity:0; transform:rotate(-45deg) scale(.5); }
.wa-fab .wa-icon-chat{ opacity:1; transform:rotate(0) scale(1); }
.wa-fab.open .wa-icon-close{ opacity:1; transform:rotate(0) scale(1); }
.wa-fab.open .wa-icon-chat{ opacity:0; transform:rotate(45deg) scale(.5); }
@keyframes wa-pulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }

.wa-menu{ display:flex; flex-direction:column; gap:10px; opacity:0; pointer-events:none; transform:translateY(12px) scale(.94); transform-origin:bottom; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.wa-menu.show{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.wa-menu-item{
  display:flex; align-items:center; gap:12px; background:var(--surface); padding:11px 16px; border-radius:14px;
  box-shadow:var(--shadow-lg); border:1px solid var(--border); white-space:nowrap;
  transition:transform .25s var(--ease), border-color .25s;
}
.wa-menu-item:hover{ transform:translateX(-4px); border-color:#25d366; }
html[dir="rtl"] .wa-menu-item:hover{ transform:translateX(4px); }
.wa-menu-icon{ width:36px; height:36px; border-radius:50%; background:rgba(37,211,102,.14); color:#25d366; display:grid; place-items:center; flex-shrink:0; }
.wa-menu-icon svg{ width:18px; height:18px; }
.wa-menu-text{ display:flex; flex-direction:column; }
.wa-menu-text strong{ font-size:.85rem; font-weight:700; }
.wa-menu-text small{ font-size:.72rem; color:var(--text-muted); direction:ltr; text-align:start; }

/* ==================== 16. MOBILE BOTTOM NAV ==================== */
.bottom-nav{
  display:none; position:fixed; bottom:0; inset-inline:0; z-index:65; background:var(--surface);
  border-top:1px solid var(--border); padding:8px 6px calc(env(safe-area-inset-bottom,0) + 8px);
  box-shadow:0 -8px 20px rgba(0,0,0,.06);
  transition:opacity .25s, transform .3s var(--ease);
}
.bottom-nav ul{ display:flex; justify-content:space-around; }
.bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.65rem; font-weight:700; color:var(--text-muted); position:relative; padding:4px 10px; }
.bottom-nav a svg{ width:21px; height:21px; }
.bottom-nav a.active{ color:var(--accent-text); }
.bottom-nav a.active::before{ content:""; position:absolute; top:-8px; width:18px; height:3px; border-radius:3px; background:var(--primary); }
.bottom-nav .badge-count{ inset-block-start:-2px; inset-inline-end:2px; }

/* ==================== 17. CART DRAWER ==================== */
.overlay{
  position:fixed; inset:0; background:rgba(6,12,22,.62); backdrop-filter:blur(8px) saturate(1.1);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease); z-index:80;
}
.overlay.show{ opacity:1; pointer-events:auto; }
.sheet-grab{
  display:none; justify-content:center; padding:10px 0 2px; cursor:grab; touch-action:none;
}
.sheet-grab span{
  width:46px; height:5px; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,90,31,.35), rgba(148,163,184,.55), rgba(255,90,31,.35));
}
.drawer-handle{ display:none; }
.drawer{
  position:fixed; top:0; inset-inline-end:0; height:100%; width:min(420px,92vw); background:var(--surface);
  z-index:90; display:flex; flex-direction:column; transform:translateX(110%);
  transition:transform .42s cubic-bezier(.22,1,.36,1); box-shadow:var(--shadow-lg);
}
html[dir="rtl"] .drawer{ transform:translateX(-110%); }
.drawer.show,
html[dir="rtl"] .drawer.show{ transform:translateX(0); }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.drawer-head-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.drawer-head-ico{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(145deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--secondary) 12%, transparent));
  color:var(--primary-dark); border:1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.drawer-head-ico svg{ width:20px; height:20px; }
.drawer-head h3{ font-weight:800; font-size:1.05rem; line-height:1.2; margin:0; }
.drawer-head-meta{ margin:3px 0 0; font-size:.75rem; color:var(--text-muted); font-weight:650; }
.drawer-body{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; overscroll-behavior:contain; }
.drawer-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; color:var(--text-muted); gap:10px; padding:24px 12px; }
.drawer-empty svg{ width:70px; height:70px; opacity:.3; }
.cart-item{
  display:flex; gap:12px; align-items:center; background:var(--surface-2); padding:12px;
  border-radius:16px; animation:slideIn .35s var(--ease); border:1px solid transparent;
}
.cart-item:hover{ border-color:var(--border); }
@keyframes slideIn{ from{ opacity:0; transform:translateY(-10px)} to{ opacity:1; transform:translateY(0)} }
.cart-item-media{ width:64px; height:64px; border-radius:12px; flex-shrink:0; overflow:hidden; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.cart-item-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-item-media svg{ width:28px; height:28px; color:#fff; margin:auto; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{ font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-info .price{ font-size:.85rem; }
.cart-item-actions{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.mini-stepper{ display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:10px; padding:4px 10px; border:1px solid var(--border); }
.mini-stepper button{ font-weight:800; min-width:22px; }
.cart-remove{ color:var(--danger); }
.cart-remove svg{ width:16px; height:16px; }
.drawer-foot{
  padding:14px 18px calc(16px + env(safe-area-inset-bottom,0));
  border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(12px); box-shadow:0 -12px 30px -22px rgba(8,21,38,.35);
}
.drawer-totals{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.drawer-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.88rem; color:var(--text-muted); font-weight:600;
}
.drawer-row span:last-child, .drawer-row strong{ color:var(--text); font-variant-numeric:tabular-nums; }
.drawer-row-total{
  margin-top:4px; padding-top:10px; border-top:1px dashed var(--border);
  font-size:1.05rem; color:var(--text); font-weight:800;
}
.drawer-row-total strong{ font-size:1.12rem; color:var(--accent-text); }
.drawer-totals-note{
  margin:2px 0 0; font-size:.72rem; color:var(--text-muted); font-weight:600; opacity:.9;
}
.drawer-totals-note.is-free{ color:var(--success, #16a34a); }
.drawer-checkout{ min-height:50px; font-weight:800; border-radius:14px; }

/* mobile nav drawer */
.mobile-nav{
  position:fixed; top:0; inset-inline-start:0; height:100%; width:min(320px,86vw); background:var(--surface);
  z-index:95; transform:translateX(-110%); transition:transform .42s cubic-bezier(.22,1,.36,1);
  padding:0; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
}
html[dir="rtl"] .mobile-nav{ transform:translateX(110%); }
.mobile-nav.show,
html[dir="rtl"] .mobile-nav.show{ transform:translateX(0); }
.mobile-nav-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:16px 18px 14px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.mobile-nav-brand{ min-width:0; }
.mobile-nav-tag{ margin:6px 0 0; font-size:.72rem; color:var(--text-muted); font-weight:700; letter-spacing:.04em; }
.mobile-nav-scroll{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mobile-nav-links{ padding:10px 12px 8px; display:flex; flex-direction:column; gap:6px; }
.mobile-nav-links a{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; font-weight:700;
  transition:background .2s, color .2s, transform .2s;
}
.mobile-nav-links a:hover, .mobile-nav-links a:focus-visible{ background:var(--primary-light); color:var(--accent-text); }
.mnav-ico{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--primary-dark); flex-shrink:0;
  border:1px solid var(--border);
}
.mnav-ico svg{ width:18px; height:18px; }
.mobile-nav-meta{
  margin:4px 12px 14px;
  padding:12px;
  border-radius:16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px;
}
.mnav-call{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
}
.mnav-call-ico{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--primary) 14%, var(--surface));
  color:var(--primary-dark); flex-shrink:0;
}
.mnav-call-ico svg{ width:18px; height:18px; }
.mnav-call small{ display:block; font-size:.68rem; color:var(--text-muted); font-weight:700; }
.mnav-call strong{ display:block; font-size:.95rem; font-weight:900; letter-spacing:.02em; color:var(--text); }
.mnav-wa{ display:grid; gap:6px; }
.mnav-wa a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:color-mix(in srgb, #25d366 10%, var(--surface));
  border:1px solid color-mix(in srgb, #25d366 22%, var(--border));
  font-weight:800; font-size:.82rem; color:var(--text);
}
.mnav-wa a small{ font-size:.72rem; font-weight:700; color:#128c7e; font-variant-numeric:tabular-nums; }
.mobile-nav-foot{
  flex-shrink:0;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom,0));
  border-top:1px solid var(--border);
  background:var(--surface);
}
.mobile-nav-cart{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  min-height:52px; border-radius:14px; font-weight:800; width:100%;
  line-height:1.2; padding-block:14px;
}
.mobile-nav-cart-count{
  display:inline-grid; place-items:center;
  min-width:22px; height:22px; padding-inline:6px; border-radius:999px;
  background:rgba(255,255,255,.22); color:#fff; font-size:.72rem; font-weight:900;
}
body.sheet-open .bottom-nav{
  opacity:0; pointer-events:none; transform:translateY(110%);
  transition:opacity .25s, transform .3s var(--ease);
}

.footer-trust{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:0;
  margin:0 0 28px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.footer-trust-block{
  padding:0 8px;
  min-width:0;
  background:transparent;
  border:0;
  border-radius:0;
}
.footer-trust-block + .footer-trust-block{
  padding-inline-start:18px;
  border-inline-start:1px solid rgba(255,255,255,.1);
}
.footer-trust-label{
  margin:0 0 12px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(219,228,243,.72);
}
.trust-logos{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.trust-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:2px;
  border-radius:10px;
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 16px -12px rgba(0,0,0,.65);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  overflow:hidden;
}
.trust-logo img{
  height:36px;
  width:auto;
  max-width:90px;
  object-fit:contain;
  display:block;
  border-radius:8px;
}
.trust-logo:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 22px -12px rgba(255,90,31,.55);
}

.pay-row, .ship-row, .footer-pay, .footer-ship{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pay-badge{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08);
  padding:7px 10px; border-radius:10px; font-size:.72rem; font-weight:700; color:#dbe4f3;
  border:1px solid rgba(255,255,255,.08); transition:transform .2s, background .2s, border-color .2s;
}
.pay-badge:hover{ transform:translateY(-2px); background:rgba(255,90,31,.16); border-color:rgba(255,90,31,.35); }
.pay-badge svg{ width:22px; height:16px; flex-shrink:0; }

/* ==================== 18. TOAST ==================== */
.toast-wrap{ position:fixed; top:20px; inset-inline-end:20px; z-index:100; display:flex; flex-direction:column; gap:10px; }
.toast{
  background:var(--secondary); color:#fff; padding:14px 18px; border-radius:12px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:10px; font-size:.86rem; font-weight:600;
  transform:translateX(120%); transition:transform .4s var(--ease); min-width:240px;
}
html[dir="rtl"] .toast{ transform:translateX(-120%); }
.toast.show{ transform:translateX(0); }
.toast svg{ width:20px; height:20px; color:var(--accent); flex-shrink:0; }

/* ==================== 19. BACK TO TOP ==================== */
.top-btn{
  position:fixed; bottom:26px; inset-inline-start:26px; width:44px; height:44px; border-radius:50%;
  background:var(--secondary); color:#fff; display:grid; place-items:center; z-index:70;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:all .3s var(--ease);
}
.top-btn.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.top-btn svg{ width:18px; height:18px; }

/* ==================== 20. SKELETON ==================== */
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2); }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation:shimmer 1.3s infinite;
}
[data-theme="dark"] .skeleton::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
@keyframes shimmer{ 100%{ transform:translateX(100%)} }

/* ==================== 21. RESPONSIVE ==================== */
@media (max-width:1080px){
  .prod-grid{ grid-template-columns:repeat(3,1fr); }
  .cat-grid{ grid-template-columns:repeat(4,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-trust{ grid-template-columns:1fr; gap:16px; }
  .footer-trust-block + .footer-trust-block{
    padding-inline-start:8px;
    padding-top:14px;
    border-inline-start:0;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .trust-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
}
@media (max-width:940px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .topbar-item-desk .topbar-text{ max-width:18ch; overflow:hidden; text-overflow:ellipsis; }
  .currency-tag span{ max-width:10ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-hotline-label{ display:none; }
  .hero{ min-height:min(78svh, 640px); align-items:center; }
  .hero-slide img{ object-position:center center; }
  .hero-content{ padding-block:72px 80px; max-width:100%; }
  .hero-controls{ bottom:16px; }
  .finder-wrap{ margin-top:-28px; }
  .finder{ margin-top:0; padding:18px; }
  .finder-grid{ grid-template-columns:1fr 1fr; }
  .finder-btn{ grid-column:1 / -1; min-height:52px; width:100%; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); gap:10px; padding-block:20px 42px; }
  .hero-shade{
    background:
      radial-gradient(ellipse 90% 60% at 50% 45%, rgba(7,10,16,.5) 0%, rgba(7,10,16,.78) 70%, rgba(7,10,16,.92) 100%),
      linear-gradient(180deg, rgba(7,10,16,.4) 0%, rgba(7,10,16,.3) 35%, rgba(7,10,16,.75) 78%, rgba(7,10,16,.92) 100%),
      radial-gradient(circle at 50% 35%, rgba(255,90,31,.18), transparent 50%);
  }
  html[dir="ltr"] .hero-shade{
    background:
      radial-gradient(ellipse 90% 60% at 50% 45%, rgba(7,10,16,.5) 0%, rgba(7,10,16,.78) 70%, rgba(7,10,16,.92) 100%),
      linear-gradient(180deg, rgba(7,10,16,.4) 0%, rgba(7,10,16,.3) 35%, rgba(7,10,16,.75) 78%, rgba(7,10,16,.92) 100%),
      radial-gradient(circle at 50% 35%, rgba(255,90,31,.18), transparent 50%);
  }
}
@media (max-width:720px){
  .topbar{ font-size:.74rem; }
  .topbar-inner{ padding-block:6px; gap:10px; min-height:36px; }
  .topbar-start, .topbar-end{ gap:8px; }
  .topbar-item-desk,
  .topbar-sep,
  .topbar-hotline-label,
  .topbar-text-full{ display:none; }
  .topbar-text-short{ display:inline; }
  .topbar-ico{ width:22px; height:22px; border-radius:7px; }
  .topbar-hotline{ padding:4px 10px; gap:5px; }
  .topbar-hotline strong{ font-size:.84rem; }
  .auth-trigger-text,
  .auth-caret{ display:none; }
  .auth-trigger{ padding:3px; }
  .auth-trigger-ico{ width:28px; height:28px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .deals-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .why-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .test-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .loyalty-card{ flex-direction:column; text-align:center; padding:28px 20px; }
  .loyalty-info{ max-width:none; }
  .loyalty-arrow{ display:none; }
  .newsletter{ flex-direction:column; text-align:center; padding:28px 20px; }
  .newsletter-form{ width:100%; flex-direction:column; }
  .newsletter-form input{ flex:1; width:100%; }
  .search-bar{ flex-direction:column; border-radius:var(--radius-lg); margin-top:16px; }
  .search-bar-divider{ width:auto; height:1px; margin-inline:16px; margin-block:0; }
  .search-bar-field select{ padding-block:14px; }
  .search-bar-btn{ padding-block:16px; width:100%; }
  .finder-grid{ grid-template-columns:1fr; }
  .finder-quick{ max-width:none; min-width:0; }
  .finder-head{ align-items:stretch; }
  .trust-grid{ grid-template-columns:1fr 1fr; gap:10px; padding-block:18px 36px; }
  .trust-item{ padding:12px; gap:10px; }
  .trust-ico{ width:38px; height:38px; border-radius:12px; }
  .trust-item strong{ font-size:1.05rem; }
  .shop-toolbar{ flex-direction:column; align-items:stretch; gap:10px; }
  .shop-tools{ justify-content:space-between; }
  .prod-grid.is-list .card{ grid-template-columns:110px 1fr; }
  .prod-grid.is-list .card-body{ grid-template-columns:1fr; }
  .drawer, .mobile-nav{
    inset:auto 0 0 0; top:auto; width:100%;
    height:min(92svh, 780px); max-height:92svh;
    border-radius:28px 28px 0 0;
    transform:translateY(110%);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, var(--surface)) 0%, var(--surface) 72px, var(--surface) 100%);
    box-shadow:0 -24px 60px -20px rgba(8,21,38,.45);
    overflow:hidden;
  }
  html[dir="rtl"] .drawer, html[dir="rtl"] .mobile-nav{ transform:translateY(110%); }
  .drawer.show,
  .mobile-nav.show,
  html[dir="rtl"] .drawer.show,
  html[dir="rtl"] .mobile-nav.show{ transform:translateY(0); }
  .sheet-grab{ display:flex; }
  .drawer-handle{ display:none; }
  .sheet-close{
    width:40px; height:40px; border-radius:12px;
    background:var(--surface-2); border:1px solid var(--border);
  }
  .drawer-head{
    padding:6px 18px 14px;
    background:transparent; border-bottom-color:color-mix(in srgb, var(--border) 80%, transparent);
  }
  .drawer-head-ico{
    width:46px; height:46px; border-radius:16px;
    background:linear-gradient(145deg, var(--primary), var(--primary-dark));
    color:#fff; border:none;
    box-shadow:0 10px 22px -12px rgba(255,90,31,.7);
  }
  .drawer-body{ padding:12px 16px 18px; gap:10px; }
  .cart-item{
    padding:12px; border-radius:18px;
    box-shadow:0 8px 20px -18px rgba(8,21,38,.5);
    border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  }
  .drawer-foot{
    padding:12px 16px calc(14px + env(safe-area-inset-bottom,0));
    border-radius:20px 20px 0 0;
    background:color-mix(in srgb, var(--surface) 94%, #081526 6%);
  }
  .drawer-totals{
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:16px; padding:12px 14px; gap:9px; margin-bottom:12px;
  }
  .drawer-row-total{ border-top-style:solid; }
  .drawer-checkout{
    min-height:52px; border-radius:16px;
    box-shadow:0 14px 28px -16px rgba(255,90,31,.65);
  }
  .mobile-nav{ padding-top:0; }
  .mobile-nav-head{
    padding:4px 16px 14px;
    background:transparent;
  }
  .mobile-nav-scroll{ padding-bottom:4px; }
  .mobile-nav-links{ padding:8px 12px 10px; gap:6px; }
  .mobile-nav-links a{
    padding:13px 12px; border-radius:16px;
    border:1px solid transparent; background:color-mix(in srgb, var(--surface-2) 70%, transparent);
  }
  .mobile-nav-links a:active{
    transform:scale(.985);
    border-color:color-mix(in srgb, var(--primary) 28%, transparent);
    background:color-mix(in srgb, var(--primary) 10%, var(--surface));
  }
  .mnav-ico{
    width:40px; height:40px; border-radius:13px;
    background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), var(--surface));
  }
  .mobile-nav-foot{
    padding:12px 16px calc(18px + env(safe-area-inset-bottom,0));
    border-top:1px solid var(--border);
    background:color-mix(in srgb, var(--surface) 96%, #081526 4%);
    box-shadow:0 -10px 24px -18px rgba(8,21,38,.35);
  }
  .mobile-nav-cart{
    min-height:54px; border-radius:16px;
    box-shadow:0 14px 28px -16px rgba(255,90,31,.65);
  }
  .bottom-nav{ display:block; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0)); }
  .wa-widget{ bottom:calc(82px + env(safe-area-inset-bottom,0)); inset-inline-end:16px; }
  .wa-fab{ width:50px; height:50px; }
  .wa-fab svg{ width:24px; height:24px; }
  .top-btn{ bottom:calc(82px + env(safe-area-inset-bottom,0)); inset-inline-start:16px; }
  .section{ padding-block:40px; }
  .container{ padding-inline:16px; }
  .header-main{ gap:10px; padding-block:10px; }
  .brand-logo{ height:42px; max-width:112px; }
  .logo{ padding:0; border-radius:0; background:transparent; }
  .deals{ padding:20px 16px; border-radius:18px; }
  .deals-head h2{ font-size:1.15rem; }
  .card-body{ padding:12px; }
  .card-title{ font-size:.86rem; min-height:2.4em; }
  .price{ font-size:1rem; }
  .add-cart-btn{ padding:10px; font-size:.8rem; }
  .hero{ min-height:min(72svh, 580px); }
  .hero-content{ padding-block:64px 76px; }
  .hero-logo{ height:clamp(56px, 16vw, 74px); }
  .hero-brand-sub{ letter-spacing:.2em; font-size:.68rem; }
  .hero-brand-sub::after{ margin-top:10px; }
  .hero h1{ font-size:clamp(1.28rem, 5.2vw, 1.65rem); max-width:16ch; margin-top:16px; }
  .hero-desc{ font-size:.9rem; margin-top:14px; max-width:30ch; }
  .hero-cta{ margin-top:22px; width:100%; }
  .hero-cta .btn{ flex:1 1 auto; min-width:130px; padding:12px 16px; }
  .trust-grid{ padding-block:16px 34px; gap:8px; }
  .trust-item strong{ font-size:1rem; }
  .trust-item span{ font-size:.72rem; }
  .filter-strip{ padding-block:14px; gap:8px; }
  .chip{ padding:8px 14px; font-size:.8rem; }
  .toast-wrap{ inset-inline:12px; top:12px; }
  .toast{ min-width:0; width:100%; }
}
@media (max-width:480px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .deals-grid{ grid-template-columns:1fr; }
  .prod-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .countdown{ gap:6px; }
  .countdown div{ min-width:46px; padding:6px 8px; }
  .why-card{ padding:18px 12px; }
  .why-icon{ width:52px; height:52px; }
  .header-actions{ gap:6px; }
  .lang-toggle{ padding:8px 10px; font-size:.78rem; }
  .icon-btn{ width:38px; height:38px; }
  .mobile-nav{ width:100%; }
}

/* ==================== 22. REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .hero-slide img{ animation:none !important; transform:none !important; }
}

.card-title a{ color:inherit; text-decoration:none; }
.card-title a:hover{ color:var(--accent-text); }
.card-media > a{ display:block; height:100%; }
.cat-card{ cursor:pointer; text-decoration:none; color:inherit; }
a.cat-card:hover{ transform:translateY(-4px); }
.prod-grid#catalogGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1100px){ .prod-grid#catalogGrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .prod-grid#catalogGrid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
@media (max-width:420px){ .prod-grid#catalogGrid{ grid-template-columns:1fr; } }

.page-inner .header{ background:var(--surface); }
.page-hero{
  padding:28px 0 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--bg)) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; color:var(--text-muted); margin-bottom:14px;
}
.breadcrumb a{ color:var(--text-muted); transition:color .2s; }
.breadcrumb a:hover{ color:var(--accent-text); }
.breadcrumb .sep{ opacity:.45; }
.breadcrumb .current{ color:var(--text); }
.page-hero h1{
  font-size:clamp(1.45rem, 2.6vw, 2rem); font-weight:900; margin:0 0 8px; line-height:1.3;
}
.page-hero .page-lead{
  margin:0; max-width:54ch; color:var(--text-muted); font-size:.95rem; line-height:1.7;
}
.page-section{ padding-block:36px 56px; }
.page-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; box-shadow:var(--shadow-sm);
}

.product-detail{
  display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start;
}
.product-gallery{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.product-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.product-info h1{ font-size:clamp(1.25rem, 2.2vw, 1.7rem); font-weight:900; margin:0 0 10px; }
.product-compat{ color:var(--text-muted); font-size:.9rem; margin-bottom:14px; }
.product-meta-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.product-price-row{ display:flex; align-items:baseline; gap:12px; margin:18px 0; }
.product-price-row .price{ font-size:1.6rem; font-weight:900; color:var(--accent-text); }
.product-price-row .old{ color:var(--text-muted); text-decoration:line-through; font-weight:700; }
.product-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.product-actions .btn{ min-height:48px; }
.product-specs{
  margin-top:22px; display:grid; gap:10px;
}
.product-specs div{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);
  font-size:.86rem; font-weight:700;
}
.product-specs span:last-child{ color:var(--text-muted); font-weight:650; }

.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }
.contact-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:18px; display:flex; flex-direction:column; gap:12px;
}
.contact-card h3{ margin:0; font-size:1rem; }
.contact-list{ display:grid; gap:10px; }
.contact-list a, .contact-list span{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border); font-weight:700; font-size:.9rem;
}
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:.8rem; font-weight:700; color:var(--text-muted); margin-bottom:12px; }
.contact-form input, .contact-form textarea, .checkout-form input, .checkout-form select, .checkout-form textarea{
  border:1.5px solid var(--border); background:var(--surface-2); border-radius:12px;
  padding:12px 14px; color:var(--text); outline:none; font:inherit;
}
.contact-form textarea, .checkout-form textarea{ min-height:120px; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus,
.checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); background:var(--surface);
}

.checkout-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:start; }
.checkout-summary-item{
  display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border);
}
.checkout-summary-item img{ width:64px; height:64px; border-radius:12px; object-fit:cover; }
.checkout-summary-item strong{ display:block; font-size:.88rem; }
.checkout-summary-item span{ font-size:.78rem; color:var(--text-muted); }
.checkout-totals{ display:grid; gap:8px; margin-top:14px; font-size:.9rem; font-weight:700; }
.checkout-totals div{ display:flex; justify-content:space-between; gap:12px; }
.checkout-totals .grand{ padding-top:10px; border-top:1px dashed var(--border); font-size:1.05rem; color:var(--accent-text); }

.article-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:28px;
  align-items:start;
}
.article-main{ min-width:0; }
.article-layout{ max-width:none; margin-inline:0; }
.article-sidebar{ min-width:0; }
.article-sidebar-sticky{
  position:sticky;
  top:calc(var(--header-h, 64px) + 18px);
  display:grid;
  gap:14px;
}
.aside-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.aside-card-title{
  margin:0 0 12px;
  font-size:.92rem;
  font-weight:900;
  color:var(--text);
}
.aside-meta-list{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.aside-meta-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:8px; border-bottom:1px dashed var(--border); font-size:.82rem;
}
.aside-meta-list li:last-child{ border-bottom:0; padding-bottom:0; }
.aside-meta-list span{ color:var(--text-muted); font-weight:600; }
.aside-meta-list strong{ color:var(--text); font-weight:800; text-align:end; }
.aside-meta-list a{ color:var(--accent-text); }
.aside-share{ display:flex; flex-wrap:wrap; gap:8px; }
.aside-related{ display:grid; gap:12px; }
.aside-related-item{
  display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:center;
  text-decoration:none; color:inherit; padding:6px; margin:-6px; border-radius:12px;
  transition:background .2s var(--ease);
}
.aside-related-item:hover{ background:var(--surface-2); }
.aside-related-item img{
  width:72px; height:54px; object-fit:cover; border-radius:10px; border:1px solid var(--border); display:block;
}
.aside-related-item small{
  display:block; color:var(--text-muted); font-size:.68rem; font-weight:700; margin-bottom:3px;
}
.aside-related-item strong{
  display:block; font-size:.82rem; font-weight:800; line-height:1.45; color:var(--text);
}
.aside-card--cta p{
  margin:0 0 12px; color:var(--text-muted); font-size:.84rem; line-height:1.65;
}
.aside-link{
  display:inline-flex; margin-top:10px; font-size:.84rem; font-weight:800; color:var(--accent-text);
}
.article-stats--mobile{ display:none; }
.article-share-bar--mobile{ display:none; }
.article-related-full{ display:none; }

.article-cover{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:22px; border:1px solid var(--border); }
.article-cover img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.page-hero--compact{ padding-bottom:4px; }
.page-hero--compact .breadcrumb{ margin-bottom:0; }
.article-meta-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-bottom:14px;
}
.article-stats{ display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:.78rem; font-weight:700; }
.article-title{
  margin:0 0 18px; font-size:clamp(1.35rem,2.5vw,1.9rem); font-weight:900; line-height:1.35; color:var(--text);
}
.article-body{ font-size:1.02rem; line-height:1.85; color:var(--text); }
.article-body p{ margin:0 0 1em; color:var(--text-muted); }
.article-body h2{ font-size:1.2rem; margin:1.4em 0 .6em; color:var(--text); }
.article-body img{ max-width:100%; height:auto; border-radius:12px; margin:8px 0 16px; }
.article-body ul, .article-body ol{ margin:0 0 1em; padding-inline-start:1.2em; color:var(--text-muted); }
.article-body a{ color:var(--accent-text); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

.article-share-bar{
  margin-top:28px; padding:16px 18px; border:1px solid var(--border); border-radius:16px;
  background:var(--surface-2); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.article-share-label{ font-weight:800; font-size:.9rem; }
.article-share-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.article-share-btn{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; color:var(--sc, var(--primary));
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.article-share-btn svg{ width:18px; height:18px; }
.article-share-btn:hover{
  transform:translateY(-2px); border-color:var(--sc, var(--primary));
  box-shadow:0 10px 18px -12px color-mix(in srgb, var(--sc, var(--primary)) 70%, transparent);
}

.article-comments{ margin-top:34px; padding-top:28px; border-top:1px dashed var(--border); }
.article-comments-head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.article-comments-head h2{ margin:0; font-size:1.2rem; font-weight:900; }
.article-comments-count{
  min-width:28px; height:28px; padding-inline:8px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--primary-light); color:var(--accent-text); font-size:.78rem; font-weight:800;
}
.article-comment-flash{
  margin-bottom:16px; padding:12px 14px; border-radius:12px;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.28); color:#166534; font-weight:700; font-size:.9rem;
}
.article-comment-form{ display:grid; gap:14px; margin-bottom:24px; }
.article-comment-form label{ display:grid; gap:6px; font-weight:700; font-size:.86rem; }
.article-comment-form input, .article-comment-form textarea{
  border:1.5px solid var(--border); background:var(--surface-2); border-radius:12px;
  padding:12px 14px; color:var(--text); outline:none; font:inherit; width:100%;
}
.article-comment-form textarea{ min-height:110px; resize:vertical; }
.article-comment-form input:focus, .article-comment-form textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); background:var(--surface);
}
.article-comment-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.article-comment-as{ margin:0; color:var(--text-muted); font-size:.9rem; }
.article-comment-as strong{ color:var(--text); }
.article-comment-list{ display:grid; gap:14px; }
.article-comment{
  display:flex; gap:12px; padding:14px; border:1px solid var(--border); border-radius:16px; background:var(--surface);
}
.article-comment-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--primary-light); color:var(--accent-text); font-weight:900;
}
.article-comment-body{ min-width:0; flex:1; }
.article-comment-meta{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; margin-bottom:6px; }
.article-comment-meta strong{ font-size:.92rem; }
.article-comment-meta time{ font-size:.75rem; color:var(--text-muted); font-weight:600; }
.article-comment-body p{ margin:0; color:var(--text); font-size:.92rem; line-height:1.7; white-space:pre-wrap; }
.article-comments-empty{
  padding:22px; text-align:center; color:var(--text-muted); border:1px dashed var(--border); border-radius:14px; background:var(--surface-2);
}
.field-error{ color:var(--danger); font-size:.75rem; font-weight:700; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }

@media (max-width:980px){
  .article-shell{ grid-template-columns:1fr; }
  .article-sidebar{ order:2; }
  .article-sidebar-sticky{ position:static; }
  .article-stats--mobile{ display:flex; }
  .article-share-bar--mobile{ display:flex; }
  .article-related-full{ display:block; }
  .aside-card--share,
  .aside-card--related{ display:none; }
}

@media (max-width:700px){
  .article-comment-grid{ grid-template-columns:1fr; }
}

/* ==================== BLOG INDEX ==================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.blog-index-shell{ margin-top:4px; }
.blog-filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:18px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface);
}
.blog-filter-tag{
  display:inline-flex; align-items:center; gap:6px; margin-inline-end:10px;
  color:var(--text-muted); font-size:.84rem; font-weight:700;
}
.blog-filter-tag strong{ color:var(--text); }
.blog-empty{
  text-align:center; padding:48px 20px; border:1px dashed var(--border); border-radius:var(--radius-lg);
  background:var(--surface);
}
.blog-empty h3{ margin:0 0 8px; font-size:1.2rem; font-weight:900; }
.blog-empty p{ margin:0 0 16px; color:var(--text-muted); }
.blog-featured{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0; overflow:hidden; margin-bottom:24px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.blog-featured-media{ display:block; min-height:100%; background:var(--surface-2); }
.blog-featured-media img{ width:100%; height:100%; min-height:280px; object-fit:cover; display:block; }
.blog-featured-body{ padding:24px; display:flex; flex-direction:column; justify-content:center; }
.blog-featured-body h2{ margin:0 0 10px; font-size:clamp(1.2rem,2vw,1.55rem); font-weight:900; line-height:1.4; }
.blog-featured-body h2 a{ color:inherit; }
.blog-featured-body h2 a:hover{ color:var(--accent-text); }
.blog-featured-body p{ margin:0 0 18px; color:var(--text-muted); line-height:1.75; font-size:.92rem; }
.blog-featured-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.blog-grid--index{ margin-top:4px; grid-template-columns:repeat(2,1fr); }
.blog-pagination{ margin-top:28px; }
.blog-pagination nav,
.blog-pagination .pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.blog-search-form{ margin-bottom:10px; }
.blog-search-field{
  display:flex; align-items:center; gap:6px; border:1.5px solid var(--border); border-radius:12px;
  background:var(--surface-2); padding:4px 4px 4px 12px;
}
.blog-search-field input{
  flex:1; border:0; background:transparent; outline:none; min-width:0; color:var(--text); font:inherit; padding:8px 0;
}
.blog-search-field .icon-btn{ width:38px; height:38px; border-radius:10px; }
.aside-muted{ margin:8px 0 0; color:var(--text-muted); font-size:.8rem; font-weight:600; }
.aside-muted strong{ color:var(--text); }
.blog-cat-list{ display:flex; flex-wrap:wrap; gap:8px; }
.blog-cat-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  font-size:.78rem; font-weight:800; transition:border-color .2s, background .2s, color .2s;
}
.blog-cat-chip em{
  font-style:normal; min-width:20px; height:20px; padding-inline:6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--text-muted); font-size:.7rem;
}
.blog-cat-chip:hover,
.blog-cat-chip.is-active{
  border-color:var(--primary); background:var(--primary-light); color:var(--accent-text);
}
.blog-cat-chip.is-active em,
.blog-cat-chip:hover em{ background:var(--surface); color:var(--accent-text); }

@media (max-width:980px){
  .blog-featured{ grid-template-columns:1fr; }
  .blog-featured-media img{ min-height:220px; max-height:280px; }
  .blog-grid--index{ grid-template-columns:1fr; }
}

.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
.about-points{ display:grid; gap:12px; }
.about-point{
  display:flex; gap:12px; padding:16px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border);
}
.about-point strong{ display:block; margin-bottom:4px; }
.about-point p{ margin:0; color:var(--text-muted); font-size:.88rem; }

.empty-state{
  text-align:center; padding:48px 20px; color:var(--text-muted);
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-lg);
}
.empty-state .btn{ margin-top:16px; }

@media (max-width:900px){
  .product-detail, .contact-grid, .checkout-grid, .about-grid{ grid-template-columns:1fr; }
}

/* ── Page-load fade-in + language-switch fade-out ──
   Added for Puppo: gives a smooth arrival on every page load, and a brief
   fade-out before navigating away on a language switch, instead of an
   abrupt white flash mid-reload. */
body{ animation:puppoFadeIn .35s ease both; }
@keyframes puppoFadeIn{ from{ opacity:0 } to{ opacity:1 } }
html.lang-switching body{ opacity:0 !important; transition:opacity .2s ease; animation:none; }