/* =================== COLORS =================== */
:root{
  --navy:#0F3C68; --teal:#1F7A7A; --gold:#C9A646;
  --bg:#FFFFFF; --text:#2E2E2E; --line:#E6E7EB; --muted:#8C8C8C;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text)}
img{max-width:100%;height:auto;display:block}
.container-wide{max-width:1220px;margin-inline:auto;padding-inline:20px}

/* ===== HEADER ===== */
.header-sp{ background:var(--bg) }
.topbar-sp{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:12px }
.topbar-sp > *:first-child{ justify-self:start }
.topbar-sp > a.brand-center-mark{ justify-self:center }
.topbar-sp > *:last-child{ justify-self:end }

.btn-burger{ width:38px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;display:grid;place-items:center;padding:0 6px }
.btn-burger .burger-line{ width:18px;height:2px;background:#2f2f2f;margin:3px 0;border-radius:2px }

.brand-center-mark{ text-decoration:none;line-height:0 }
.brand-center-mark .brand-brackets{ display:inline-flex;align-items:center;gap:10px;height:36px }
.brand-center-mark .bracket-left,.brand-center-mark .bracket-right{ width:18px;height:32px;border:3px solid var(--navy);border-radius:6px }
.brand-center-mark .bracket-left{ border-right:none } .brand-center-mark .bracket-right{ border-left:none }
.brand-badge{ width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--navy);color:#fff }
.brand-badge img{ width:22px;height:22px;object-fit:contain }

.icon-btn{ color:var(--text);text-decoration:none;line-height:1 } .icon-btn:hover{ color:#000 }
.cart-badge{ font-size:.65rem }
.search-wrap{ border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;background:#fff }
.search-wrap .search-input{ border:0;outline:0;box-shadow:none;width:100%;font-size:.95rem }
.btn-outline-gold{ --bs-btn-color:var(--gold);--bs-btn-border-color:var(--gold);--bs-btn-hover-bg:var(--gold);--bs-btn-hover-border-color:var(--gold);--bs-btn-hover-color:#000 }

/* Navbar minimal */
.catsbar-sp{ border-top:1px solid var(--line);background:#fff }
.catsbar-sp .nav-minimal{ display:flex;justify-content:center;align-items:center;gap:2rem;padding:.55rem 0 }
.catsbar-sp .nav-minimal .nav-link{ color:var(--text);font-weight:600;padding:.25rem 0;display:inline-flex;align-items:center;line-height:1.1;opacity:.95 }
.catsbar-sp .nav-minimal .nav-link:hover,.catsbar-sp .nav-minimal .nav-link.active{ color:#000 }
.catsbar-sp .nav-minimal .nav-link::after{ content:" +";color:#9a9a9a;font-weight:700;margin-inline-start:.15rem;transform:translateY(-1px) }
[dir="rtl"] .catsbar-sp .nav-minimal .nav-link::after{ content:" +" }

/* Offcanvas */
.sp-offcanvas{ width:min(86vw,360px) }
.offcats .off-link{ display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);font-weight:600 }
.offcats .off-link span{ color:#9a9a9a;font-weight:700 }

/* ===== HERO ===== */
.hero-wrap{ position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line) }
.hero-img{ width:100%;height:auto;max-height:460px;object-fit:cover }
.hero-overlay{ position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,60,104,.25),rgba(15,60,104,.55));display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem }
.hero-content{ color:#fff;max-width:820px }
.hero-content h1{ font-size:2rem;margin:0 0 .5rem }
.hero-kpis{ display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:.75rem }
.hero-kpis .kpi{ background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.5rem .9rem;font-weight:700;backdrop-filter:blur(4px) }

/* ===== BRAND STRIP ===== */
.brand-strip{
  background:#efefef;border:0;border-radius:14px;padding:18px 20px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
}
.brand-strip img{ height:26px;filter:grayscale(1) opacity(.35);transition:filter .2s ease, transform .2s ease }
.brand-strip img:hover{ filter:grayscale(0) opacity(.8);transform:translateY(-1px) }

/* ===== PROMO TILES (Men/Women/Kids) ===== */
.promo-grid{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px }
.promo-card{ position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000;isolation:isolate;min-height:280px }
.promo-card img{ width:100%;height:100%;object-fit:cover;transition:transform .4s ease }
.promo-card:hover img{ transform:scale(1.03) }
.promo-overlay{ position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35)) }
.promo-badge{
  position:absolute;top:12px;left:12px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);color:#fff;font-size:.75rem;padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px);font-weight:700
}
[dir="rtl"] .promo-badge{ left:auto;right:12px }
.promo-dot{ position:absolute;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#000;font-weight:700;bottom:14px;right:14px;box-shadow:0 6px 18px rgba(0,0,0,.25) }
[dir="rtl"] .promo-dot{ right:auto;left:14px }
.promo-caption{ position:absolute;bottom:16px;left:16px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);font-weight:600 }
[dir="rtl"] .promo-caption{ left:auto;right:16px }
.promo-caption small{ opacity:.85;display:block;margin-bottom:2px;font-weight:700;letter-spacing:.04em }
.promo-caption span{ font-size:1.05rem }

/* ===== USP ===== */
.usp{ background:#fff;border:1px solid var(--line);border-radius:14px;padding:.9rem }
.usp .item{ display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--text) }
.usp .ico{ width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f6f9fc;border:1px solid #e9eef3;color:var(--navy) }

/* ===== SECTION HEAD ===== */
.section-head{ display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:12px }
.section-head a{ text-decoration:none;font-weight:700;border-bottom:2px solid #111 }

/* ===== CATEGORY CARDS ===== */
.co-card{ display:grid;grid-template-columns:100px 1fr;gap:1rem;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:14px;min-height:120px;transition:transform .15s ease, box-shadow .15s ease }
.co-card:hover{ transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,24,40,.09) }
.co-thumb{ width:100px;height:100px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff;align-self:center }
.co-thumb img{ width:100%;height:100%;object-fit:cover }
@media (max-width:576px){ .co-card{ grid-template-columns:1fr;text-align:center } .co-thumb{ width:100%;height:160px } }

/* ===== PRODUCT CARDS ===== */
.p-card{ display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:#fff;height:100%;transition:transform .15s ease, box-shadow .15s ease }
.p-card:hover{ transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.08) }
.p-thumb{ aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center }
.p-thumb img{ width:100%;height:100%;object-fit:contain }
.price .old{ text-decoration:line-through;color:#6c757d;font-size:.9rem }
.price .new{ font-weight:800;color:var(--navy) }

/* ===== DEAL & CTA ===== */
.deal{ background:#fff7e6;border:1px dashed #f0c36a;color:#8a6d1b;border-radius:12px }
.cta-band{ background:linear-gradient(90deg,var(--teal),var(--navy));color:#fff;border-radius:14px }

/* ===== FOOTER ===== */
.footer-sp .footer-link{ color:#6b7280;text-decoration:none }
.footer-sp .footer-link:hover{ color:#000 }

/* ===== Responsive ===== */
@media (max-width:1200px){ .catsbar-sp .nav-minimal{ gap:1.6rem } }
@media (max-width:992px){
  .catsbar-sp .nav-minimal{ gap:1.1rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none }
  .catsbar-sp .nav-minimal::-webkit-scrollbar{ display:none }
  .hero-img{ max-height:none;height:52vh;min-height:360px }
  .promo-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:576px){
  .topbar-sp{ column-gap:6px;padding-inline:.25rem }
  .promo-grid{ grid-template-columns:1fr }
  .promo-card{ min-height:240px }
  .hero-content h1{ font-size:1.5rem }
}

/* ===== RTL tweaks ===== */
[dir="rtl"] .brand-center-mark .brand-brackets{ flex-direction:row-reverse }
[dir="rtl"] .ms-2{ margin-left:0!important;margin-right:.5rem!important }