/* ==========================================================
   DUKKAN — Global Stylesheet (shared across all pages)
   Color: #4B1212
   Fonts: Acumin Pro Wide + Acumin Variable Concept (Regular)
   ========================================================== */

/* ---------- Fonts ----------
   ضيف ملفات الخطوط داخل مجلد /fonts بهاي الأسماء بالضبط.
   (Acumin خطوط Adobe، لازم يكون عندك الترخيص/الملفات) */
   @font-face {
    font-family: "Acumin Pro Wide";
    src: local("Acumin Pro Wide"),
         url("fonts/AcuminProWide-Regular.woff2") format("woff2"),
         url("fonts/AcuminProWide-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Acumin Pro Wide";
    src: local("Acumin Pro Wide Black"),
         url("fonts/AcuminProWide-Black.woff2") format("woff2"),
         url("fonts/AcuminProWide-Black.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Acumin Variable Concept";
    src: local("Acumin Variable Concept"),
         url("fonts/AcuminVariableConcept.woff2") format("woff2"),
         url("fonts/AcuminVariableConcept.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  
  /* ---------- Tokens ---------- */
  :root {
    --brand: #4B1212;
    --cream: #F6EBDC;
    --white: #FFFFFF;
    --ink: #4B1212;
  
    --font-wide: "Acumin Pro Wide", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Acumin Variable Concept", "Helvetica Neue", Arial, sans-serif;
  
    --gutter: clamp(20px, 3.9vw, 56px);
    --max: 1600px;
    --radius: 10px;
    --ease: cubic-bezier(.22, .61, .36, 1);
  }
  
  /* ---------- Reset ---------- */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--brand);
    background: var(--white);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
  
  .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
  
  /* ==========================================================
     HEADER
     ========================================================== */
  /* الهيدر ثابت فوق بكل الصفحات، وبيصغّر شوي لما تعمل سكرول */
  .site-header {
    position: sticky; top: 0;
    z-index: 50;
    background: var(--white);
    transition: box-shadow .3s var(--ease);
  }
  .site-header.is-stuck { box-shadow: 0 2px 18px rgba(75, 18, 18, .08); }
  .site-header.is-stuck .header-inner { padding-top: clamp(10px, 1.1vw, 14px); padding-bottom: clamp(8px, .9vw, 12px); }
  .site-header.is-stuck .logo { width: clamp(104px, 10.5vw, 150px); }
  .site-header.no-tr, .site-header.no-tr * { transition: none !important; }
  html { scroll-padding-top: var(--header-stuck-h, 64px); }   /* الروابط الداخلية (#trending) ما بتنخبي تحت الهيدر */
  
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(18px, 2.1vw, 30px) var(--gutter) clamp(8px, 1vw, 14px);
    transition: padding .3s var(--ease);
  }
  .nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); font-size: clamp(11px, .95vw, 13px); }
  .nav--right { justify-content: flex-end; }
  .nav a { position: relative; padding-block: 4px; transition: opacity .2s; }
  .nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  
  .logo { display: block; width: clamp(130px, 14vw, 200px); transition: width .3s var(--ease); }
  .logo img { width: 100%; }
  
  .menu-toggle { display: none; width: 22px; height: 14px; position: relative; justify-self: start; }
  .menu-toggle span, .menu-toggle::before, .menu-toggle::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--brand);
    transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease);
  }
  .menu-toggle::before { top: 0; }
  .menu-toggle span { top: 6px; }
  .menu-toggle::after { top: 12px; }
  .menu-toggle[aria-expanded="true"]::before { top: 6px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span { opacity: 0; }
  .menu-toggle[aria-expanded="true"]::after { top: 6px; transform: rotate(-45deg); }
  
  /* ==========================================================
     HERO
     ========================================================== */
  /* الهيدر + الصورة = ارتفاع الشاشة بالضبط، وباقي الصفحة بتظهر بالسكرول بس */
  .hero {
    --hero-gap: clamp(10px, 1.4vw, 20px);          /* مسافة صغيرة بين الهيدر والصورة */
    position: relative;
    width: 100%;
    margin-top: var(--hero-gap);
    height: calc(100vh - var(--header-h, 72px) - var(--hero-gap));
    height: calc(100svh - var(--header-h, 72px) - var(--hero-gap));   /* svh = ارتفاع الشاشة الحقيقي على الموبايل (بدون شريط المتصفح) */
    min-height: 220px;
    background: #E3E3E3;
    overflow: hidden;
  }
  /* الهيرو ثابت: لما تعمل سكرول باقي الصفحة بتطلع فوقه وبتغطيه */
  .hero { position: sticky; top: var(--header-stuck-h, 0px); z-index: 0; }
  .hero ~ section, .site-footer { position: relative; z-index: 1; background: var(--white); }
  @media (prefers-reduced-motion: reduce) { .hero { position: relative; } }
  .hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;          /* الصورة بتغطي الشاشة كلها بدون تمطيط */
    object-position: center;
    display: block;
  }
  .hero-scroll {
    position: absolute; left: 50%; bottom: clamp(16px, 3vw, 34px); z-index: 2;
    width: 42px; height: 42px; margin-left: -21px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45));
    animation: hero-bob 1.8s ease-in-out infinite;
  }
  .hero-scroll svg { width: 22px; height: 22px; }
  @keyframes hero-bob { 50% { transform: translateY(8px); } }
  @media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }
  
  /* ==========================================================
     TRENDING
     ========================================================== */
  .section { padding-block: clamp(48px, 7vw, 100px) 0; }
  .section-title {
    font-family: var(--font-wide);
    font-weight: 800;
    font-size: clamp(26px, 3.1vw, 46px);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: clamp(20px, 2.4vw, 36px);
  }
  
  /* ---------- Trending conveyor belt ---------- */
  .section-head { margin-bottom: clamp(20px, 2.4vw, 36px); }
  .section-head .section-title { margin-bottom: 0; }
  
  .slider {
    --gap: clamp(10px, 1.6vw, 24px);
    --visible: 4;
    container-type: inline-size;
    overflow: hidden;
  }
  .slider__track {
    display: flex;
    width: max-content;
    animation: belt var(--belt-duration, 40s) linear infinite;
    will-change: transform;
  }
  .slider:hover .slider__track { animation-play-state: paused; }
  .slider__track .product-card {
    flex: 0 0 auto;
    width: calc((100cqw - (var(--visible) - 1) * var(--gap)) / var(--visible));
    margin-right: var(--gap);
  }
  @keyframes belt { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .slider { overflow-x: auto; }
    .slider__track { animation: none; }
  }
  .product-card { display: block; }
  .product-card__media {
    aspect-ratio: 253 / 353;
    border-radius: var(--radius);
    overflow: hidden;
    background: #ECEAE8;
  }
  .product-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ease);
  }
  .product-card:hover .product-card__media img { transform: scale(1.04); }
  .product-card__name {
    font-family: var(--font-wide);
    font-weight: 800;
    font-size: clamp(12px, 1.3vw, 18px);
    letter-spacing: .2em;
    margin-top: clamp(8px, .9vw, 14px);
    padding-left: 2px;
  }
  .product-card__price {
    font-family: var(--font-body);
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: .28em;
    margin-top: clamp(6px, .8vw, 12px);
  }
  
  /* ==========================================================
     SHOP BY CATEGORY
     ========================================================== */
  .category-head { text-align: center; padding-top: clamp(60px, 9vw, 130px); }
  .eyebrow {
    font-size: clamp(11px, 1.05vw, 15px);
    letter-spacing: .3em;
    text-transform: uppercase;
  }
  .category-head .section-title { margin: 6px 0 clamp(18px, 2vw, 30px); }
  
  .category-banner {
    position: relative;
    width: 100%;
    height: 100vh; height: 100svh;     /* البانر = ارتفاع الشاشة بالضبط */
    min-height: 420px;
    overflow: hidden;
    background: #FCFCFC;               /* بنفس لون خلفية الصورة (إذا بدلتها بصورة بخلفية ثانية غيّر هاللون) */
    color: var(--brand);               /* نص غامق لأن الصورة فاتحة */
  }
  /* الصورة كاملة بدون قص ولا تمطيط، وبتتوسّط، وبيضل حواليها لون الخلفية */
  .category-banner__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    display: block;
  }
  .category-banner__content {
    position: absolute; inset: 0; z-index: 1;
    height: 100%; width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(36px, 5.8vw, 84px) var(--gutter);
    padding-left: clamp(var(--gutter), 11.7vw, 190px);
  }
  .category-banner__title {
    font-family: var(--font-wide);
    font-weight: 800;
    font-size: clamp(24px, 2.4vw, 36px);
    margin-bottom: clamp(6px, .6vw, 10px);
  }
  .category-banner__list { display: flex; flex-direction: column; }
  .category-banner__list a {
    display: inline-block;
    font-size: clamp(14px, 1.3vw, 19px);
    padding-block: clamp(8px, 1.05vw, 15px);
    transition: transform .25s var(--ease), opacity .2s;
  }
  .category-banner__list a:hover { transform: translateX(6px); }
  
  /* ==========================================================
     FOOTER
     ========================================================== */
  .site-footer {
    margin-top: clamp(60px, 7.5vw, 110px);
    background: var(--brand);
    color: var(--cream);
  }
  .footer-inner {
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(40px, 5.5vw, 80px) var(--gutter) 0;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
  }
  .footer-brand img { width: clamp(220px, 28vw, 400px); }
  .footer-brand p { font-size: clamp(12px, 1vw, 14px); margin-top: 10px; }
  .social { display: flex; gap: 14px; margin-top: 12px; padding-left: 6px; }
  .social a { display: inline-flex; width: 24px; height: 24px; transition: transform .25s var(--ease); }
  .social a:hover { transform: translateY(-3px); }
  .social svg { width: 100%; height: 100%; }
  
  .footer-col h4 {
    font-family: var(--font-wide);
    font-weight: 800;
    font-size: clamp(16px, 1.6vw, 22px);
    margin-bottom: clamp(10px, 1.2vw, 18px);
  }
  .footer-col li { margin-bottom: clamp(10px, 1.3vw, 18px); }
  .footer-col a { font-size: clamp(13px, 1.1vw, 15px); transition: opacity .2s; }
  .footer-col a:hover { opacity: .65; }
  
  .footer-bottom {
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(24px, 4vw, 56px) var(--gutter) 28px;
  }
  .footer-bottom hr { border: 0; height: 1px; background: rgba(246, 235, 220, .45); margin-bottom: clamp(20px, 2.6vw, 36px); }
  .footer-bottom small { font-size: 11px; }
  
  /* ==========================================================
     REVEAL ANIMATION
     ========================================================== */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }
  
  /* ==========================================================
     RESPONSIVE
     ========================================================== */
  @media (max-width: 1024px) {
    .slider { --visible: 3; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
  }
  
  @media (max-width: 767px) {
    .header-inner { padding-top: 24px; grid-template-columns: 1fr auto 1fr; }
    .menu-toggle { display: block; }
    .logo { justify-self: center; width: 130px; }
    .site-header.is-stuck .logo { width: 104px; }
  
    .nav--left {
      position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
      background: var(--white);
      flex-direction: column; align-items: flex-start; justify-content: flex-start;
      gap: 22px; padding: 90px 28px 28px;
      font-size: 18px;
      transform: translateX(100%);
      transition: transform .4s var(--ease), visibility 0s .4s;
      box-shadow: none;
      visibility: hidden;
      z-index: 60;
    }
    .nav--left.is-open { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; box-shadow: -10px 0 40px rgba(75, 18, 18, .15); }
    .nav--right { grid-column: 3; gap: 12px; font-size: 11px; flex-direction: row; align-items: center; justify-content: flex-end; white-space: nowrap; }
    .menu-toggle { position: relative; z-index: 70; }
    .menu-toggle[aria-expanded="true"] { position: fixed; top: 24px; left: auto; right: 24px; }
  
    .slider { --visible: 2; }
    .product-card__name { letter-spacing: .14em; }
  
    .category-banner__content { padding-left: var(--gutter); padding-top: 28px; }
  
    .footer-inner { grid-template-columns: 1fr 1fr; }
  }
  
  @media (max-width: 420px) {
    .footer-inner { grid-template-columns: 1fr; }
  }
  
  @media (max-width: 360px) {
    .logo { width: 110px; }
    .nav--right { gap: 8px; }
  }
  
  @media (min-width: 1800px) {
    html { font-size: 112.5%; }
  }
  
  /* ==========================================================
     SHOP PAGE
     ========================================================== */
  .shop-page { --shop-ink: #111111; }
  
  .shop-head {
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(14px, 1.6vw, 22px) var(--gutter) 0;
  }
  .shop-title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(12px, 1vw, 14px);
    color: var(--brand);
    display: flex; align-items: baseline; gap: 6px;
  }
  .shop-title__count { font-size: .8em; color: #8a8a8a; }
  
  .shop-filters {
    display: flex; flex-wrap: wrap;
    gap: clamp(14px, 1.7vw, 26px);
    margin-top: clamp(22px, 2.8vw, 40px);
  }
  .shop-filter {
    font-family: var(--font-body);
    font-size: clamp(12px, 1vw, 14px);
    color: var(--shop-ink);
    padding-block: 4px;
    border-bottom: 1px solid transparent;
    transition: opacity .2s, border-color .2s;
    white-space: nowrap;
  }
  .shop-filter:hover { opacity: .6; }
  .shop-filter.is-active { border-bottom-color: currentColor; }
  
  .shop-grid {
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(22px, 2.6vw, 38px) var(--gutter) clamp(90px, 14vw, 200px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: clamp(12px, 1.3vw, 20px);
    row-gap: clamp(36px, 4.5vw, 64px);
    min-height: 60vh;
  }
  .shop-card { display: block; color: var(--shop-ink); }
  .shop-card__media {
    aspect-ratio: 320 / 385;
    background: #D9D9D9;
    overflow: hidden;
  }
  .shop-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ease);
  }
  .shop-card:hover .shop-card__media img { transform: scale(1.04); }
  .shop-card__info {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    margin-top: clamp(8px, .9vw, 14px);
    padding-right: clamp(8px, 4%, 40px);
  }
  .shop-card__name {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(11px, .95vw, 13px);
    line-height: 1.3;
  }
  .shop-card__pieces { display: block; margin-top: 2px; font-size: .92em; opacity: .6; }
  .shop-card__price {
    font-family: var(--font-wide);
    font-weight: 800;
    font-size: clamp(11px, .95vw, 13px);
    white-space: nowrap;
  }
  .shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding-block: 60px;
    font-size: 14px;
  }
  
  @media (max-width: 1024px) {
    .shop-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 767px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .shop-filters {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .shop-filters::-webkit-scrollbar { display: none; }
    .shop-card__info { flex-direction: column; gap: 4px; padding-right: 0; }
  }
  
  /* ==========================================================
     PRODUCT PAGE
     ========================================================== */
  .product-page { --shop-ink: #111111; }
  
  .pd {
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(14px, 1.9vw, 26px) var(--gutter) clamp(50px, 6.6vw, 96px);
  }
  .pd-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, 29.8vw) 1fr;
    column-gap: clamp(14px, 1.9vw, 26px);
    align-items: stretch;
  }
  
  /* ----- left column ----- */
  .pd-left { display: flex; flex-direction: column; min-width: 0; }
  .pd-head { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .pd-title {
    font-family: var(--font-wide);
    font-weight: 800;
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--shop-ink);
  }
  .pd-colors { display: flex; gap: clamp(8px, .75vw, 12px); margin-top: clamp(12px, 1.3vw, 20px); }
  .pd-color {
    width: clamp(18px, 1.5vw, 22px); height: clamp(18px, 1.5vw, 22px);
    border-radius: 50%;
    background: var(--c);
    outline: 1.5px solid transparent;
    outline-offset: 3px;
    transition: outline-color .2s, transform .2s var(--ease);
  }
  .pd-color:hover { transform: scale(1.1); }
  .pd-color.is-active { outline-color: var(--shop-ink); }
  .pd-desc {
    font-size: clamp(14px, 1.19vw, 18px);
    line-height: 1.35;
    color: var(--shop-ink);
    margin-bottom: 0;                       /* آخر سطر بيتساوى مع نهاية الصورة */
    max-width: 30em;
  }
  
  /* ----- image ----- */
  .pd-media {
    aspect-ratio: 402 / 580;
    background: #E3E3E3;
    overflow: hidden;
  }
  .pd-media { position: relative; }
  .pd-gallery {
    display: flex; width: 100%; height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .pd-gallery::-webkit-scrollbar { display: none; }
  .pd-gallery:focus-visible { outline-offset: -3px; }
  .pd-gallery img {
    flex: 0 0 100%; width: 100%; height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    user-select: none; -webkit-user-drag: none;
  }
  
  .pd-gbtn {
    position: absolute; top: 50%; z-index: 2;
    width: 32px; height: 32px; margin-top: -16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s, background .25s, color .25s;
  }
  .pd-gbtn svg { width: 13px; height: 13px; }
  .pd-gbtn--prev { left: 10px; }
  .pd-gbtn--next { right: 10px; }
  .pd-media:hover .pd-gbtn, .pd-gbtn:focus-visible { opacity: 1; }
  .pd-gbtn:hover { background: var(--brand); color: var(--cream); }
  .pd-gbtn[hidden], .pd-dots[hidden] { display: none; }
  @media (hover: none) { .pd-gbtn { display: none; } }
  
  .pd-dots {
    position: absolute; left: 50%; bottom: 12px; z-index: 2;
    transform: translateX(-50%);
    display: flex; gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
  }
  .pd-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition: width .25s var(--ease), background .25s;
  }
  .pd-dot.is-active { width: 16px; border-radius: 3px; background: #fff; }
  
  /* ----- right column ----- */
  .pd-right {
    display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(0px, 3.4vw, 46px);
    min-width: 0;
  }
  .pd-buy { width: 74%; min-width: 260px; max-width: 100%; }
  .pd-sizes { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.7vw, 24px); }
  .pd-size {
    position: relative;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.05vw, 15px);
    color: var(--shop-ink);
    padding: 4px 0;
    min-width: 18px;
    transition: opacity .2s;
  }
  .pd-size:hover { opacity: .6; }
  .pd-size::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .pd-size.is-active::after { transform: scaleX(1); }
  .pd-sizes.is-error { animation: pd-shake .4s; }
  @keyframes pd-shake {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
  }
  .pd-error { display: none; font-size: 12px; margin-top: 8px; }
  .pd-error.is-visible { display: block; }
  
  .pd-cart {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    height: clamp(34px, 2.5vw, 42px);
    padding-inline: clamp(10px, .9vw, 14px) clamp(14px, 2.6vw, 38px);
    margin-top: clamp(12px, 1.2vw, 18px);
    background: var(--brand);
    color: var(--white);
    transition: background .25s, transform .15s;
  }
  .pd-cart:hover { background: #3a0d0d; }
  .pd-cart:active { transform: scale(.985); }
  .pd-cart__price { font-family: var(--font-wide); font-weight: 800; font-size: clamp(11px, .9vw, 13px); }
  .pd-cart__label { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(11px, .9vw, 13px); }
  .pd-cart__label svg { width: clamp(14px, 1.1vw, 17px); height: clamp(14px, 1.1vw, 17px); flex: none; }
  
  .pd-perks { margin-top: clamp(16px, 1.9vw, 28px); display: grid; gap: 6px; }
  .pd-perks li { display: flex; align-items: center; gap: 6px; font-size: clamp(10px, .8vw, 12px); }
  .pd-perks svg { width: 9px; height: 9px; flex: none; }
  
  /* ----- related ----- */
  .pd-related { border-top: 1px solid #D9D9D9; }
  .pd-related__inner {
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(24px, 3vw, 44px) var(--gutter) clamp(40px, 8vw, 120px);
  }
  .pd-related__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: clamp(18px, 2.6vw, 38px);
  }
  .pd-related__title {
    font-family: var(--font-body); font-weight: 400;
    font-size: clamp(14px, 1.19vw, 18px);
    color: var(--shop-ink);
  }
  .pd-arrows { display: flex; gap: 8px; }
  .pd-arrow {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .25s var(--ease), color .25s var(--ease), opacity .25s;
  }
  .pd-arrow svg { width: 12px; height: 12px; }
  .pd-arrow:hover:not(:disabled) { background: var(--brand); color: var(--cream); }
  .pd-arrow:disabled { opacity: .3; cursor: default; }
  
  .pd-track {
    --gap: clamp(10px, 1.3vw, 18px);
    --visible: 6;
    display: flex; gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pd-track::-webkit-scrollbar { display: none; }
  .pd-card {
    flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
    scroll-snap-align: start;
    color: var(--shop-ink);
  }
  .pd-card__media { aspect-ratio: 192 / 278; background: #D9D9D9; overflow: hidden; }
  .pd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  .pd-card:hover .pd-card__media img { transform: scale(1.04); }
  .pd-card__name { display: block; font-size: clamp(11px, .95vw, 13px); margin-top: clamp(8px, .9vw, 12px); line-height: 1.3; }
  .pd-card__price { display: block; font-family: var(--font-wide); font-weight: 800; font-size: clamp(11px, .95vw, 13px); margin-top: 2px; }
  
  /* ----- responsive ----- */
  @media (max-width: 1024px) {
    .pd-track { --visible: 4; }
  }
  @media (max-width: 900px) {
    .pd-layout { display: flex; flex-direction: column; max-width: 560px; margin-inline: auto; }
    .pd-left, .pd-right { display: contents; }
    .pd-media { order: 1; width: 100%; }
    .pd-head { order: 2; flex: none; margin-top: 22px; }
    .pd-desc { order: 3; margin: 16px 0 0; font-size: 14px; line-height: 1.55; }
    .pd-right > .pd-buy { order: 4; width: 100%; min-width: 0; margin-top: 24px; }
    .pd-title { font-size: 26px; }
    .pd-color { width: 22px; height: 22px; }
    .pd-size { font-size: 15px; }
    .pd-cart { height: 46px; margin-top: 16px; }
    .pd-cart__price, .pd-cart__label { font-size: 13px; }
    .pd-perks li { font-size: 12px; }
  }
  @media (max-width: 767px) {
    .pd-track { --visible: 2.35; }
    .pd-arrow { width: 32px; height: 32px; }
  }
  
  /* ==========================================================
     CART DRAWER (slides from the right, every page)
     ========================================================== */
  .cart-lock, .cart-lock body { overflow: hidden; }
  
  .cart-backdrop {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(20, 5, 5, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s .35s;
  }
  .cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
    width: clamp(380px, 33vw, 540px);
    max-width: 100%;
    background: var(--white);
    color: var(--shop-ink, #111);
    display: flex; flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s .45s;
    box-shadow: -12px 0 50px rgba(0, 0, 0, .12);
    outline: none;
  }
  .cart-root.is-open .cart-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  .cart-root.is-open .cart-drawer { transform: none; visibility: visible; transition-delay: 0s; }
  
  .cart-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(22px, 2.4vw, 34px) clamp(20px, 5vw, 30px) 0;
    padding-bottom: clamp(16px, 2vw, 24px);
    background: var(--white);
  }
  .cart-title { font-family: var(--font-body); font-weight: 400; font-size: 16px; }
  .cart-close {
    width: 34px; height: 34px; margin-right: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .3s var(--ease), opacity .2s;
  }
  .cart-close svg { width: 22px; height: 22px; }
  .cart-close:hover { transform: rotate(90deg); opacity: .7; }
  
  .cart-body { padding: 0 clamp(20px, 5vw, 30px); }
  .cart-item {
    display: grid;
    grid-template-columns: minmax(0, 36%) 1fr;
    gap: clamp(14px, 3vw, 18px);
    padding-block: clamp(14px, 2vw, 18px);
  }
  .cart-item + .cart-item { border-top: 1px solid #E6E6E6; }
  .cart-item.is-new { animation: cart-in .5s var(--ease); }
  @keyframes cart-in { from { opacity: 0; transform: translateY(14px); } }
  
  .cart-item__media {
    display: block;
    aspect-ratio: 4 / 5;
    background: #ECEAE8;
    overflow: hidden;
  }
  .cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
  .cart-item__info { font-size: 15px; line-height: 1; min-width: 0; }
  .cart-item__info > p { margin: 0 0 clamp(10px, 1.1vw, 14px); line-height: 1.25; overflow-wrap: anywhere; }
  .cart-item__info > p:first-child { margin-top: clamp(4px, 1vw, 10px); }
  
  .cart-item__actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding-left: 4px; }
  .cart-qty { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
  .cart-qty button {
    width: 20px; height: 20px; border-radius: 50%;
    background: #E4E4E4;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1;
    transition: background .2s, color .2s, opacity .2s;
  }
  .cart-qty button:hover:not(:disabled) { background: var(--brand); color: var(--cream); }
  .cart-qty button:disabled { opacity: .4; cursor: default; }
  .cart-qty span { min-width: 14px; text-align: center; }
  .cart-remove { font-size: 11px; padding-block: 4px; border-bottom: 1px solid transparent; transition: border-color .2s; }
  .cart-remove:hover { border-bottom-color: currentColor; }
  
  .cart-empty { padding-block: 40px; font-size: 15px; }
  .cart-empty a { display: inline-block; margin-top: 14px; font-size: 13px; border-bottom: 1px solid currentColor; }
  
  .cart-checkout {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: clamp(28px, 5vw, 64px);
    display: flex; align-items: center; justify-content: space-between;
    height: clamp(46px, 4vw, 54px);
    padding-inline: clamp(20px, 5vw, 30px);
    background: var(--brand);
    color: var(--white);
    flex: none;
    transition: background .25s;
  }
  .cart-checkout[hidden] { display: none; }
  .cart-checkout:hover { background: #3a0d0d; }
  .cart-checkout__total { font-family: var(--font-wide); font-weight: 800; font-size: 14px; }
  .cart-checkout__label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
  .cart-checkout__label svg { width: 12px; height: 12px; }
  
  @media (max-width: 767px) {
    .cart-drawer { width: 100%; box-shadow: none; }
    .cart-item__info { font-size: 16px; }
    .cart-item { grid-template-columns: minmax(0, 40%) 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-drawer, .cart-backdrop { transition-duration: .01s; }
    .cart-item.is-new { animation: none; }
  }
  
  /* ==========================================================
     CHECKOUT PAGE
     ========================================================== */
  .checkout-page {
    --co-head: clamp(84px, 13.2vw, 200px);
    --co-gray: #F4F4F4;
    --co-ink: #111111;
    --co-muted: #8A8A8A;
    --co-err: #B3261E;
    --co-imgw: clamp(72px, 6.5vw, 98px);
    --co-pricew: clamp(84px, 6.5vw, 98px);
    color: var(--co-ink);
  }
  
  /* ----- header ----- */
  .co-header {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: var(--co-head);
    border-bottom: 1px solid #D9D9D9;
    background: var(--white);
  }
  .co-logo { display: block; width: clamp(120px, 17.3vw, 262px); }
  .co-logo img { width: 100%; }
  .co-bag {
    position: absolute; right: clamp(20px, 6.6vw, 100px); top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--co-ink);
    transition: opacity .2s;
  }
  .co-bag:hover { opacity: .6; }
  .co-bag svg { width: 26px; height: 26px; }
  
  /* ----- layout ----- */
  .co-layout {
    display: grid;
    grid-template-columns: 58.5fr 41.5fr;
    min-height: calc(100vh - var(--co-head));
    min-height: calc(100dvh - var(--co-head));
  }
  
  /* ----- form ----- */
  .co-form-wrap { padding: clamp(32px, 3.2vw, 48px) clamp(20px, 9vw, 138px) 60px clamp(20px, 4vw, 60px); }
  .co-form { max-width: 686px; }
  .co-title { font-family: var(--font-body); font-weight: 400; font-size: clamp(20px, 1.5vw, 24px); margin-bottom: clamp(22px, 2.2vw, 32px); }
  
  .co-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: clamp(42px, 3.6vw, 52px); }
  .co-field { position: relative; min-width: 0; }
  .co-field--full { grid-column: 1 / -1; }
  
  .co-input, .co-select__btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    min-height: 36px;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--co-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid #CFCFCF;
    border-radius: 0;
    text-align: left;
    transition: border-color .2s;
  }
  .co-input::placeholder, .co-select__value.is-placeholder { color: var(--co-muted); opacity: 1; }
  .co-input:hover, .co-select__btn:hover { border-bottom-color: #8f8f8f; }
  
  /* لما يكبس عالحقل بيصير مربع */
  .co-input:focus, .co-select__btn:focus-visible, .co-select.is-open .co-select__btn {
    outline: 1px solid var(--brand);
    outline-offset: 7px;
    border-bottom-color: transparent;
  }
  .co-field.has-error .co-input, .co-field.has-error .co-select__btn { border-bottom-color: var(--co-err); }
  .co-field.has-error .co-input:focus, .co-field.has-error .co-select__btn:focus-visible { outline-color: var(--co-err); }
  .co-error { position: absolute; left: 0; top: calc(100% + 12px); font-size: 11px; color: var(--co-err); }
  
  /* ----- city dropdown ----- */
  .co-select { position: relative; }
  .co-select__btn { cursor: pointer; gap: 12px; }
  .co-select__btn svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
  .co-select.is-open .co-select__btn svg { transform: rotate(180deg); }
  .co-select__list {
    position: absolute; left: -7px; right: -7px; top: calc(100% + 14px); z-index: 30;
    max-height: 290px; overflow-y: auto;
    background: var(--white);
    border: 1px solid #D9D9D9;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
    padding: 6px 0;
    outline: none;
  }
  .co-select__list[hidden] { display: none; }
  .co-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
  }
  .co-option.is-active { background: var(--co-gray); }
  .co-option[aria-selected="true"] { color: var(--brand); font-weight: 500; }
  .co-option svg { width: 14px; height: 14px; opacity: 0; flex: none; }
  .co-option[aria-selected="true"] svg { opacity: 1; }
  .co-option__fee { color: var(--co-muted); }
  
  /* ----- note + button ----- */
  .co-note { display: flex; align-items: center; gap: 8px; margin-top: clamp(34px, 3.6vw, 52px); font-size: 11px; color: var(--co-muted); }
  .co-note svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
  
  .co-submit {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    height: clamp(42px, 3vw, 46px);
    margin-top: clamp(18px, 1.8vw, 26px);
    background: var(--brand); color: var(--white);
    font-family: var(--font-wide); font-weight: 800; font-size: 14px;
    transition: background .25s, transform .15s, opacity .2s;
  }
  .co-submit:hover:not(:disabled) { background: #3a0d0d; }
  .co-submit:active:not(:disabled) { transform: scale(.99); }
  .co-submit:disabled { opacity: .45; cursor: not-allowed; }
  .co-submit__total { display: none; }
  
  /* ----- summary ----- */
  .co-summary {
    background: var(--co-gray);
    padding: clamp(28px, 6.1vw, 92px) clamp(20px, 4vw, 60px) 48px clamp(20px, 7.7vw, 117px);
  }
  .co-items { display: grid; gap: clamp(16px, 1.6vw, 24px); }
  .co-item {
    display: grid;
    grid-template-columns: var(--co-imgw) 1fr var(--co-pricew);
    column-gap: 20px;
    align-items: start;
  }
  .co-item__media { position: relative; aspect-ratio: 98 / 142; background: #E1E1E1; }
  .co-item__media img { width: 100%; height: 100%; object-fit: cover; }
  .co-item__qty {
    position: absolute; top: -7px; right: -2px;
    min-width: 16px; height: 16px; padding-inline: 4px;
    border-radius: 8px;
    background: #000; color: #fff;
    font-size: 9px; line-height: 16px; text-align: center;
  }
  .co-item__name { font-size: 14px; line-height: 1.35; margin-top: 2px; }
  .co-item__meta { font-size: 12px; color: var(--co-muted); margin-top: 6px; }
  .co-item__price { font-family: var(--font-wide); font-weight: 800; font-size: clamp(14px, 1.2vw, 18px); white-space: nowrap; }
  
  .co-totals { margin-top: clamp(18px, 1.8vw, 26px); }
  .co-row {
    display: grid;
    grid-template-columns: var(--co-imgw) 1fr var(--co-pricew);
    column-gap: 20px;
    align-items: center;
    font-size: 14px;
    min-height: 28px;
  }
  .co-row__label { grid-column: 1; text-align: right; white-space: nowrap; }
  .co-row__value { grid-column: 3; }
  .co-row__value.is-empty::before { content: ""; display: block; width: 50px; height: 1px; background: var(--co-ink); }
  .co-total {
    display: grid;
    grid-template-columns: var(--co-imgw) 1fr var(--co-pricew);
    column-gap: 20px;
    align-items: center;
    height: clamp(36px, 2.6vw, 44px);
    margin-top: 14px;
    background: var(--brand); color: var(--white);
    font-family: var(--font-wide); font-weight: 800; font-size: 14px;
  }
  .co-total span:first-child { grid-column: 1; text-align: right; padding-right: 29px; box-sizing: content-box; margin-right: -29px; }
  .co-total span:last-child { grid-column: 3; }
  .co-empty { font-size: 14px; }
  .co-empty a { display: inline-block; margin-top: 12px; border-bottom: 1px solid currentColor; }
  
  /* ----- thank you ----- */
  .co-thanks {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: var(--white);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility 0s .4s;
  }
  .co-thanks.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .co-thanks__box { max-width: 460px; text-align: center; outline: none; transform: translateY(16px); transition: transform .5s var(--ease); }
  .co-thanks.is-open .co-thanks__box { transform: none; }
  .co-thanks__icon {
    width: 64px; height: 64px; margin: 0 auto 26px;
    border-radius: 50%; background: var(--brand); color: var(--cream);
    display: flex; align-items: center; justify-content: center;
  }
  .co-thanks__icon svg { width: 28px; height: 28px; }
  .co-thanks__title { font-family: var(--font-wide); font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; color: var(--brand); }
  .co-thanks__text { margin-top: 16px; font-size: 15px; line-height: 1.5; }
  .co-thanks__total { margin-top: 14px; font-size: 14px; color: var(--co-muted); }
  .co-thanks__btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 46px; padding-inline: 34px; margin-top: 30px;
    background: var(--brand); color: var(--white);
    font-family: var(--font-wide); font-weight: 800; font-size: 13px;
    transition: background .25s;
  }
  .co-thanks__btn:hover { background: #3a0d0d; }
  
  /* ----- responsive ----- */
  @media (max-width: 900px) {
    .co-layout { grid-template-columns: 1fr; min-height: 0; }
    .co-summary { order: -1; padding: 24px var(--gutter) 28px; }
    .co-form-wrap { padding: 30px var(--gutter) 48px; }
    .co-item { grid-template-columns: 72px 1fr auto; column-gap: 14px; }
    .co-row { display: flex; justify-content: space-between; }
    .co-row__label { text-align: left; }
    .co-row__value.is-empty::before { margin-left: auto; }
    .co-total { display: flex; justify-content: space-between; padding-inline: 16px; height: 42px; }
    .co-total span:first-child { padding: 0; margin: 0; }
    .co-submit__total { display: inline; }
    .co-input, .co-select__btn, .co-option { font-size: 16px; }   /* يمنع زوم iOS */
  }
  @media (max-width: 520px) {
    .co-grid { grid-template-columns: 1fr; }
    .co-bag { right: var(--gutter); }
  }
  @media (prefers-reduced-motion: reduce) {
    .co-thanks, .co-thanks__box { transition-duration: .01s; }
  }
  
  /* ==========================================================
     SEARCH BAR (slides down from the top, every page)
     ========================================================== */
  .srch-root { --shop-ink: #111111; --srch-muted: #8A8A8A; }
  
  .srch-backdrop { position: fixed; inset: 0; z-index: 205; visibility: hidden; }
  .srch-root.is-open .srch-backdrop { visibility: visible; }
  
  .srch-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 210;
    display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
    height: clamp(68px, 6.4vw, 96px);
    padding-inline: var(--gutter);
    background: var(--white);
    border-bottom: 1px solid #D9D9D9;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
    transform: translateY(-105%);
    visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s .45s;
  }
  .srch-root.is-open .srch-bar { transform: none; visibility: visible; transition-delay: 0s; }
  
  .srch-field {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px);
    height: 100%;
    cursor: text;
  }
  .srch-icon { width: clamp(18px, 1.5vw, 22px); height: clamp(18px, 1.5vw, 22px); flex: none; color: var(--brand); }
  .srch-input {
    flex: 1; min-width: 0; height: 100%;
    font-family: var(--font-body); font-weight: 400;
    font-size: clamp(16px, 1.45vw, 22px);
    color: var(--shop-ink);
    background: transparent; border: 0; outline: 0; border-radius: 0;
    -webkit-appearance: none; appearance: none;
  }
  .srch-input::placeholder { color: var(--srch-muted); opacity: 1; }
  .srch-input::-webkit-search-cancel-button,
  .srch-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
  .srch-close {
    width: 36px; height: 36px; flex: none; margin-right: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .3s var(--ease), opacity .2s;
  }
  .srch-close svg { width: 22px; height: 22px; }
  .srch-close:hover { transform: rotate(90deg); opacity: .7; }
  
  @media (prefers-reduced-motion: reduce) {
    .srch-bar { transition-duration: .01s; }
  }
  
  /* ----- shop page: search query line ----- */
  .shop-query { margin-top: 10px; font-size: clamp(12px, 1vw, 14px); color: #8A8A8A; }
  .shop-query a { color: var(--brand); border-bottom: 1px solid currentColor; margin-left: 8px; }
  .shop-query[hidden] { display: none; }
  
  /* ==========================================================
     FOOTER — Help column (4 columns)
     ========================================================== */
  .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  @media (max-width: 1024px) { .footer-inner { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 767px)  { .footer-inner { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 420px)  { .footer-inner { grid-template-columns: 1fr; } }
  
  /* ==========================================================
     SHOP FILTERS
     ========================================================== */
  .shop-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  
  .shop-bar { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 32px); margin-top: clamp(22px, 2.8vw, 40px); }
  .shop-bar .shop-filters { margin-top: 0; flex: 1; min-width: 0; }
  
  .flt-btn {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 0;
    font-family: var(--font-body); font-size: clamp(12px, .95vw, 13px);
    color: var(--shop-ink, #111);
    transition: opacity .2s;
  }
  .flt-btn svg { width: 14px; height: 14px; }
  .flt-btn:hover { opacity: .6; }
  .flt-btn__count {
    min-width: 16px; height: 16px; margin-left: 2px; padding-inline: 4px; border-radius: 8px;
    background: var(--brand); color: var(--cream);
    font-size: 9px; line-height: 16px; text-align: center;
  }
  .flt-btn__count[hidden] { display: none; }
  
  .flt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
  .flt-chips[hidden] { display: none; }
  .flt-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 12px;
    background: var(--co-gray, #F4F4F4);
    font-size: 12px; color: var(--shop-ink);
  }
  .flt-chip button { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
  .flt-chip button:hover { background: var(--brand); color: var(--cream); }
  .flt-chip svg { width: 8px; height: 8px; }
  .flt-clear-all { font-size: 12px; color: var(--brand); border-bottom: 1px solid currentColor; margin-left: 6px; }
  
  /* drawer */
  .flt-backdrop {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(20, 5, 5, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s .35s;
  }
  .flt-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
    width: clamp(360px, 30vw, 460px); max-width: 100%;
    display: flex; flex-direction: column;
    background: var(--white); color: var(--shop-ink);
    transform: translateX(100%); visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s .45s;
    box-shadow: -12px 0 50px rgba(0, 0, 0, .12);
  }
  .flt-root.is-open .flt-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  .flt-root.is-open .flt-drawer { transform: none; visibility: visible; transition-delay: 0s; }
  
  .flt-head { display: flex; align-items: center; justify-content: space-between; padding: clamp(20px, 2.2vw, 30px) clamp(20px, 5vw, 30px) 14px; }
  .flt-head h2 { font-family: var(--font-body); font-weight: 400; font-size: 16px; }
  .flt-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(20px, 5vw, 30px) 24px; }
  .flt-group { padding-block: 22px; border-top: 1px solid #E6E6E6; }
  .flt-group[hidden] { display: none; }
  .flt-group h3 { font-family: var(--font-wide); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
  
  /* sort radios */
  .flt-radio { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 0; font-size: 14px; text-align: left; }
  .flt-radio::before {
    content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid #9a9a9a; background: #fff;
    box-shadow: inset 0 0 0 3px #fff; transition: background .2s, border-color .2s;
  }
  .flt-radio:hover::before { border-color: var(--brand); }
  .flt-radio.is-active::before { background: var(--brand); border-color: var(--brand); }
  
  /* price */
  .flt-range { --lo: 0; --hi: 1; position: relative; height: 28px; margin-bottom: 14px; }
  .flt-range__track, .flt-range__fill { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); }
  .flt-range__track { left: 9px; right: 9px; background: #D9D9D9; }
  .flt-range__fill { left: calc(9px + (100% - 18px) * var(--lo)); width: calc((100% - 18px) * (var(--hi) - var(--lo))); background: var(--brand); }
  .flt-range input[type="range"] {
    position: absolute; inset: 0; width: 100%; height: 28px; margin: 0;
    background: none; pointer-events: none;
    -webkit-appearance: none; appearance: none;
  }
  .flt-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
  .flt-range input[type="range"]::-moz-range-track { background: transparent; height: 28px; }
  .flt-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; cursor: grab;
    width: 18px; height: 18px; margin-top: 5px; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand);
  }
  .flt-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto; cursor: grab;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand);
  }
  .flt-prices { display: flex; align-items: center; gap: 12px; }
  .flt-num {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding-inline: 12px;
    border: 1px solid #CFCFCF; font-size: 13px; color: #8A8A8A;
    transition: border-color .2s;
  }
  .flt-num:focus-within { border-color: var(--brand); }
  .flt-num input { flex: 1; width: 0; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--shop-ink); -moz-appearance: textfield; -webkit-user-select: text; user-select: text; cursor: text; }
  .flt-num { cursor: text; }
  .flt-num input::-webkit-outer-spin-button, .flt-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .flt-num em { font-style: normal; font-size: 11px; }
  
  /* colors */
  .flt-swatches { display: flex; flex-wrap: wrap; gap: 16px 14px; }
  .flt-swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 48px; font-size: 11px; color: #5b5b5b; }
  .flt-swatch__dot {
    position: relative; width: 30px; height: 30px; border-radius: 50%;
    background: var(--c); border: 1px solid #D0D0D0;
    outline: 1.5px solid transparent; outline-offset: 3px;
    transition: outline-color .2s, transform .2s var(--ease);
  }
  .flt-swatch:hover .flt-swatch__dot { transform: scale(1.08); }
  .flt-swatch.is-active .flt-swatch__dot { outline-color: var(--brand); }
  .flt-swatch.is-active { color: var(--shop-ink); }
  
  /* sizes */
  .flt-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
  .flt-size {
    min-width: 50px; height: 40px; padding-inline: 10px;
    border: 1px solid #CFCFCF; font-size: 13px;
    transition: background .2s, color .2s, border-color .2s;
  }
  .flt-size:hover { border-color: var(--brand); }
  .flt-size.is-active { background: var(--brand); border-color: var(--brand); color: var(--cream); }
  
  /* footer bar */
  .flt-foot { display: flex; align-items: center; gap: 18px; padding: 14px clamp(20px, 5vw, 30px); border-top: 1px solid #E6E6E6; background: var(--white); }
  .flt-clear { font-size: 13px; border-bottom: 1px solid currentColor; padding-block: 2px; white-space: nowrap; transition: opacity .2s; }
  .flt-clear:hover { opacity: .6; }
  .flt-apply {
    flex: 1; height: clamp(44px, 3.4vw, 50px);
    background: var(--brand); color: var(--white);
    font-family: var(--font-wide); font-weight: 800; font-size: 13px;
    transition: background .25s;
  }
  .flt-apply:hover { background: #3a0d0d; }
  
  .shop-empty a, .shop-empty button { display: inline-block; margin-top: 14px; border-bottom: 1px solid currentColor; font-size: 13px; }
  
  @media (max-width: 767px) {
    .flt-drawer { width: 100%; box-shadow: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .flt-drawer, .flt-backdrop { transition-duration: .01s; }
  }
  
  /* ==========================================================
     INFO PAGES (Returns / Terms / FAQ) + ERROR PAGE
     ========================================================== */
  .doc-page { --shop-ink: #111111; --doc-muted: #8A8A8A; color: var(--shop-ink); }
  .doc {
    max-width: 880px; margin-inline: auto;
    padding: clamp(32px, 4.5vw, 68px) var(--gutter) clamp(60px, 8vw, 120px);
  }
  .doc-nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.7vw, 26px); margin-bottom: clamp(26px, 3.2vw, 46px); }
  .doc-nav a {
    font-size: clamp(12px, 1vw, 14px); padding-block: 4px;
    border-bottom: 1px solid transparent;
    transition: opacity .2s, border-color .2s;
  }
  .doc-nav a:hover { opacity: .6; }
  .doc-nav a[aria-current="page"] { border-bottom-color: currentColor; }
  
  .doc-title { font-family: var(--font-wide); font-weight: 800; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.01em; color: var(--brand); }
  .doc-meta { margin-top: 12px; font-size: 13px; color: var(--doc-muted); }
  .doc-lead { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; max-width: 40em; }
  
  .doc-section { margin-top: clamp(28px, 3.4vw, 48px); padding-top: clamp(22px, 2.6vw, 34px); border-top: 1px solid #E6E6E6; scroll-margin-top: 24px; }
  .doc-section h2 { font-family: var(--font-wide); font-weight: 800; font-size: clamp(15px, 1.3vw, 19px); color: var(--brand); margin-bottom: 14px; }
  .doc-section p, .doc-section li { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.75; max-width: 44em; }
  .doc-section p + p, .doc-section p + ul, .doc-section ul + p, .doc-section ol + p { margin-top: 12px; }
  .doc-section ul { list-style: disc; padding-left: 20px; }
  .doc-section ol { list-style: decimal; padding-left: 22px; }
  .doc-section li + li { margin-top: 6px; }
  .doc-section li::marker { color: var(--brand); }
  .doc-section a, .doc-contact a { color: var(--brand); border-bottom: 1px solid currentColor; }
  .doc-section strong { font-weight: 600; }
  .doc-contact { margin-top: clamp(30px, 3.6vw, 52px); padding: clamp(18px, 2vw, 26px); background: #F4F4F4; font-size: 14px; line-height: 1.6; }
  
  /* FAQ */
  .faq-group { margin-top: clamp(30px, 3.6vw, 52px); }
  .faq-group > h2 { font-family: var(--font-wide); font-weight: 800; font-size: clamp(15px, 1.3vw, 19px); color: var(--brand); margin-bottom: 8px; }
  .faq-item { border-bottom: 1px solid #E6E6E6; }
  .faq-group > h2 + .faq-item { border-top: 1px solid #E6E6E6; }
  .faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding-block: clamp(16px, 1.6vw, 22px);
    font-size: clamp(14px, 1.15vw, 16px);
    cursor: pointer; list-style: none;
    transition: color .2s;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--brand);
    transition: transform .3s var(--ease);
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item summary:hover { color: var(--brand); }
  .faq-a { padding: 0 clamp(0px, 4vw, 48px) clamp(18px, 2vw, 26px) 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.75; animation: faq-in .35s var(--ease); }
  .faq-a a { color: var(--brand); border-bottom: 1px solid currentColor; }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
  
  /* Error page */
  .err {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: calc(100vh - 240px); min-height: calc(100dvh - 240px);
    padding: clamp(40px, 6vw, 90px) var(--gutter);
  }
  .err-code { font-family: var(--font-wide); font-weight: 800; font-size: clamp(96px, 17vw, 240px); line-height: .9; letter-spacing: -.04em; color: var(--brand); }
  .err-title { margin-top: clamp(18px, 2.4vw, 34px); font-family: var(--font-wide); font-weight: 800; font-size: clamp(18px, 2vw, 30px); color: var(--shop-ink); }
  .err-text { margin-top: 12px; max-width: 30em; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.6; color: #555; }
  .err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: clamp(44px, 3.4vw, 50px); padding-inline: clamp(24px, 2.6vw, 38px);
    font-family: var(--font-wide); font-weight: 800; font-size: 13px;
    border: 1px solid var(--brand);
    transition: background .25s var(--ease), color .25s var(--ease);
  }
  .btn--solid { background: var(--brand); color: var(--white); }
  .btn--solid:hover { background: #3a0d0d; }
  .btn--line { color: var(--brand); }
  .btn--line:hover { background: var(--brand); color: var(--cream); }
  
  /* checkout: agreement line */
  .co-agree { margin-top: 14px; font-size: 11px; line-height: 1.5; color: var(--co-muted); text-align: start; }
  .co-agree a { color: var(--brand); border-bottom: 1px solid currentColor; }
  
  /* ==========================================================
     OUTFIT PAGE  (يستعمل نفس ستايل صفحة المنتج: .pd-*)
     الصورة دايماً كاملة بالشاشة بدون سكرول: ارتفاعها = أصغر من (نسبتها للعرض) و(ارتفاع الشاشة - الهيدر)
     ========================================================== */
  .outfit-page { --shop-ink: #111111; }
  .of {
    max-width: var(--max); margin-inline: auto;
    padding: clamp(10px, 1.4vw, 20px) var(--gutter) clamp(40px, 5vw, 80px);
    --of-h: min(calc(29.8vw * 580 / 402), calc(100vh - var(--header-h, 72px) - 104px));
    --of-h: min(calc(29.8vw * 580 / 402), calc(100svh - var(--header-h, 72px) - 104px));
  }
  .of-back {
    display: inline-block; font-size: clamp(12px, .95vw, 14px); color: var(--brand);
    padding-bottom: 3px; border-bottom: 1px solid currentColor; margin-bottom: clamp(12px, 1.4vw, 20px);
  }
  .of-back:hover { opacity: .65; }
  .of-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--of-h) * 402 / 580) minmax(0, 1fr);
    column-gap: clamp(14px, 1.9vw, 26px);
    align-items: stretch;
  }
  .of-left { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .of-eyebrow { font-size: clamp(10px, .8vw, 12px); letter-spacing: .16em; text-transform: uppercase; color: var(--shop-ink); margin-bottom: clamp(6px, .7vw, 10px); }
  .of-left .pd-desc { margin-top: clamp(12px, 1.3vw, 20px); max-width: 26em; }
  .of-media { height: var(--of-h); width: 100%; aspect-ratio: auto; }
  
  .of-right { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .of-pieces { width: 82%; min-width: 280px; max-width: 100%; }
  .of-piece { display: grid; grid-template-columns: clamp(44px, 4.4vw, 68px) minmax(0, 1fr); column-gap: clamp(10px, 1vw, 14px); padding: clamp(10px, 1.1vw, 16px) 0; border-top: 1px solid #D9D9D9; }
  .of-piece:first-child { border-top: 0; padding-top: 0; }
  .of-piece__img { aspect-ratio: 3 / 4; background: #E3E3E3; overflow: hidden; }
  .of-piece__img img { width: 100%; height: 100%; object-fit: cover; }
  .of-piece__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .of-piece__name { font-size: clamp(13px, 1.05vw, 15px); color: var(--shop-ink); }
  .of-piece__price { font-family: var(--font-wide); font-weight: 800; font-size: clamp(11px, .9vw, 13px); }
  .of-piece .pd-colors { margin-top: clamp(8px, .8vw, 12px); }
  .of-piece .pd-sizes { margin-top: clamp(8px, .8vw, 12px); gap: clamp(12px, 1.3vw, 18px); }
  .of-piece__add { margin-top: clamp(6px, .7vw, 10px); font-size: clamp(11px, .9vw, 13px); color: var(--brand); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
  .of-piece__add:hover { opacity: .65; }
  .of-piece .pd-error { margin-top: 6px; }
  .of-piece.is-error .pd-sizes { animation: pd-shake .4s; }
  .of-full { margin-top: clamp(8px, 1vw, 14px); }
  .of-full .pd-cart { margin-top: 0; }
  .of-note { font-size: clamp(10px, .8vw, 12px); margin-top: 8px; color: var(--shop-ink); opacity: .7; }
  
  @media (max-width: 900px) {
    .of { --of-h: min(calc((100vw - 2 * var(--gutter)) * 580 / 402), calc(100vh - var(--header-h, 64px) - 84px));
          --of-h: min(calc((100vw - 2 * var(--gutter)) * 580 / 402), calc(100svh - var(--header-h, 64px) - 84px)); }
    .of-layout { display: flex; flex-direction: column; max-width: 560px; margin-inline: auto; }
    .of-media { order: 1; height: auto; aspect-ratio: 402 / 580; width: min(100%, calc(var(--of-h) * 402 / 580)); align-self: center; }
    .of-left { order: 2; margin-top: 22px; justify-content: flex-start; }
    .of-left .pd-title { font-size: 26px; }
    .of-left .pd-desc { font-size: 14px; line-height: 1.55; }
    .of-right { order: 3; margin-top: 22px; }
    .of-pieces { width: 100%; min-width: 0; }
    .of-piece__name { font-size: 15px; }
    .of-piece .pd-size { font-size: 15px; }
    .of-piece .pd-color { width: 22px; height: 22px; }
    .of-full .pd-cart { height: 46px; }
  }

/* ==========================================================
   ===  ASP.NET INTEGRATION ADDITIONS  ======================
   Everything below was added when the design was wired into
   the Dokkan MVC site (account, saved items, stock, contact…)
   ========================================================== */

body { background: var(--white); }
[hidden] { display: none !important; }

/* ---------- Header: extra links ---------- */
.nav-mobile-only { display: none; }
.nav-count { margin-left: 2px; }
@media (max-width: 767px) {
  .nav-desktop-only { display: none; }
  .nav-mobile-only { display: inline-block; }
  .nav-sep { display: block; width: 40px; height: 1px; background: rgba(75, 18, 18, .25); margin-block: 4px; }
}

/* ---------- Home ---------- */
.section-head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-link {
  font-size: clamp(12px, 1vw, 14px); padding-bottom: 2px;
  border-bottom: 1px solid currentColor; white-space: nowrap; transition: opacity .2s;
}
.section-link:hover { opacity: .6; }

/* ---------- Toast ---------- */
.dk-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 400;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  background: var(--brand); color: var(--cream);
  font-size: 13px; line-height: 1.4; text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.dk-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* ---------- Shop cards: sold out ---------- */
.shop-card__media { position: relative; }
.shop-card__badge, .pd-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 5px 9px;
  background: rgba(255, 255, 255, .92); color: var(--brand);
  font-family: var(--font-wide); font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.shop-card.is-sold .shop-card__media img { opacity: .55; }
.shop-card__name { color: inherit; }

/* ---------- Product page ---------- */
.pd-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: clamp(12px, 1.4vw, 20px);
  font-size: clamp(11px, .9vw, 13px); color: #8A8A8A;
}
.pd-crumbs a { transition: color .2s; }
.pd-crumbs a:hover { color: var(--brand); }

.pd-color-name { margin-top: clamp(10px, 1vw, 14px); font-size: clamp(12px, .95vw, 13px); color: #6b6b6b; min-height: 1em; }
.pd-color-name + .pd-colors { margin-top: 8px; }
.pd-color.is-light { box-shadow: inset 0 0 0 1px #cfcfcf; }
.pd-color.is-out { position: relative; opacity: .45; }
.pd-color.is-out::after {
  content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px;
  background: var(--shop-ink); transform: rotate(45deg);
}

.pd-desc p + p { margin-top: 10px; }
.pd-specs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: clamp(12px, 1.3vw, 18px); font-size: clamp(12px, .95vw, 13px); }
.pd-specs div { display: flex; gap: 6px; }
.pd-specs dt { color: #8A8A8A; }
.pd-specs dd { color: var(--shop-ink); }

.pd-size.is-out { opacity: .32; text-decoration: line-through; cursor: not-allowed; }
.pd-size.is-out:hover { opacity: .32; }
.pd-size:disabled { cursor: not-allowed; }

.pd-cart:disabled { opacity: .5; cursor: not-allowed; }
.pd-cart:disabled:hover { background: var(--brand); }
.pd-cart.is-loading { opacity: .7; cursor: progress; }

.pd-save {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  font-size: clamp(11px, .9vw, 13px); color: var(--shop-ink);
  transition: opacity .2s;
}
.pd-save svg { width: 16px; height: 16px; transition: fill .2s, color .2s; }
.pd-save:hover { opacity: .65; }
.pd-save.is-active svg { fill: var(--brand); color: var(--brand); }

.pd-perks a { border-bottom: 1px solid transparent; transition: border-color .2s; }
.pd-perks a:hover { border-bottom-color: currentColor; }
.pd-media .pd-badge { left: 12px; top: 12px; }

/* ---------- Outfit page ---------- */
.of-hint { font-size: clamp(12px, .95vw, 14px) !important; opacity: .7; margin-top: 10px !important; }
.of-piece__name { transition: opacity .2s; }
a.of-piece__name:hover { opacity: .65; }
.of-piece__img { display: block; }
.of-piece__sold { margin-top: 8px; font-size: 12px; color: #8A8A8A; }
.of-piece.is-sold .of-piece__img img { opacity: .5; }
.of-piece__add:disabled { opacity: .5; cursor: progress; }
.of-media { background: #ECEAE8; }
/* transparent cut-out PNGs (like the outfit photos) are shown whole instead of cropped */
.pd-gallery img[src$=".png"], .shop-card__media img[src$=".png"], .product-card__media img[src$=".png"],
.pd-card__media img[src$=".png"], .of-piece__img img[src$=".png"] { object-fit: contain; }

/* ---------- Cart drawer: busy state ---------- */
.cart-body.is-busy { opacity: .6; pointer-events: none; transition: opacity .2s; }

/* ---------- Checkout extras ---------- */
.co-back {
  position: absolute; left: clamp(20px, 6.6vw, 100px); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--co-ink); transition: opacity .2s;
}
.co-back svg { width: 16px; height: 16px; }
.co-back:hover { opacity: .6; }
.co-signin { margin: -10px 0 clamp(26px, 2.6vw, 36px); font-size: 13px; color: var(--co-muted); }
.co-signin a { color: var(--brand); border-bottom: 1px solid currentColor; }
.co-form-error { margin-top: 18px; padding: 12px 14px; background: #FBEDEC; color: var(--co-err); font-size: 13px; }
.co-thanks__order { margin-top: 18px; font-family: var(--font-wide); font-weight: 800; font-size: 14px; color: var(--brand); }
.co-select__btn:disabled { cursor: not-allowed; opacity: .6; }
@media (max-width: 520px) {
  .co-back span { display: none; }
  .co-back { left: var(--gutter); }
}

/* ---------- Forms on content pages (contact / sign in / register) ---------- */
.form-page { --co-gray: #F4F4F4; --co-ink: #111111; --co-muted: #8A8A8A; --co-err: #B3261E; }
.dk-form { margin-top: clamp(30px, 3.4vw, 48px); }
.dk-form .co-submit { margin-top: clamp(44px, 4vw, 56px); }
.co-grid--single { grid-template-columns: 1fr; }
.co-textarea { display: block; min-height: 120px; resize: vertical; line-height: 1.5; }
.dk-form-ok { margin-top: 18px; padding: 12px 14px; background: #F4F4F4; font-size: 14px; color: var(--brand); }
.dk-form-foot { margin-top: 18px; font-size: 13px; color: var(--co-muted); }
.dk-form-foot a { color: var(--brand); border-bottom: 1px solid currentColor; }
.dk-alert { margin-top: 24px; padding: 12px 14px; background: #FBEDEC; color: var(--co-err); font-size: 13px; line-height: 1.5; }
.doc--narrow { max-width: 620px; }
@media (max-width: 900px) {
  .form-page .co-input { font-size: 16px; }   /* stops iOS zoom */
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-side { margin-top: clamp(30px, 3.4vw, 48px); display: grid; gap: 26px; padding: clamp(20px, 2.2vw, 30px); background: #F4F4F4; }
.contact-block h2 { font-family: var(--font-wide); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.contact-block a, .contact-block p { font-size: 14px; line-height: 1.7; }
.contact-block a { border-bottom: 1px solid currentColor; }
@media (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; } .contact-side { margin-top: 0; } }

/* ---------- About ---------- */
.about-hero {
  background: var(--cream);
  margin-top: clamp(10px, 1.4vw, 20px);
  padding: clamp(50px, 8vw, 120px) var(--gutter) clamp(44px, 6vw, 90px);
  text-align: center;
}
.about-hero__mark { width: min(78vw, 720px); margin: 0 auto clamp(26px, 3vw, 40px); }
.about-hero__lead { max-width: 34em; margin: 14px auto 0; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.6; }
.doc--about { max-width: 1040px; }
.about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 60px); align-items: start; }
.about-split > p { font-size: clamp(15px, 1.25vw, 18px) !important; line-height: 1.7; }
.about-split .eyebrow { font-size: 11px; color: #8A8A8A; margin-bottom: 8px; }
.about-h { font-family: var(--font-wide); font-weight: 800; font-size: clamp(20px, 2vw, 30px) !important; line-height: 1.15; color: var(--brand); margin: 0 !important; }
.about-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(36px, 4vw, 56px); }
@media (max-width: 767px) { .about-split { grid-template-columns: 1fr; } }

/* ---------- Saved items ---------- */
.fav-user { font-size: 12px; color: #8A8A8A; }
.fav-user a { color: var(--brand); border-bottom: 1px solid currentColor; }
.fav-card .shop-card__info { padding-right: 0; }
.fav-remove { margin-top: 8px; font-size: 11px; color: #8A8A8A; border-bottom: 1px solid currentColor; transition: color .2s; }
.fav-remove:hover { color: var(--brand); }

/* ---------- Cart page ---------- */
.cart-page { min-height: calc(100vh - 420px); }

/* ---------- Home category banner: background = the photo's own off-white ---------- */
.category-banner { background: #F8F8F8; }

/* ---------- Product codes ---------- */
.pd-code { margin-top: 8px; font-size: clamp(11px, .85vw, 12px); letter-spacing: .08em; text-transform: uppercase; color: #8A8A8A; }
.pd-code span { color: var(--shop-ink); user-select: all; }
.cart-item__info > p.cart-item__code { font-size: 11px; letter-spacing: .08em; color: #8A8A8A; margin-top: -6px; }

/* ==========================================================
   ===  POLISH PASS — sticky header, mobile UX, home sections
   ========================================================== */
:root { --announce-h: 32px; }

/* ---------- Announcement bar ---------- */
.announce {
  height: var(--announce-h);
  background: var(--brand); color: var(--cream);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  overflow: hidden;
}
.announce__items { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px); }
.announce__items span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.announce__items span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; margin-right: clamp(18px, 3vw, 62px); }

/* ---------- Hero height also leaves room for the announcement bar ---------- */
.hero {
  height: calc(100vh - var(--header-h, 72px) - var(--hero-gap) - var(--announce-h));
  height: calc(100svh - var(--header-h, 72px) - var(--hero-gap) - var(--announce-h));
}

/* header icons (phones) / text links (desktop) */
.menu-backdrop { display: none; }
.nav-icon { display: none; }
.nav-count:empty { display: none; }
.nav-count::before { content: "("; }
.nav-count::after { content: ")"; }
@keyframes nav-bump { 40% { transform: scale(1.35); } }
.nav-count.is-bump { display: inline-block; animation: nav-bump .45s var(--ease); }

/* ---------- Trust strip ---------- */
.perks-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(18px, 2vw, 28px) var(--gutter);
  border-bottom: 1px solid #EEE;
}
.perks-strip__item { display: flex; align-items: center; justify-content: center; gap: 12px; }
.perks-strip__item svg { width: 28px; height: 28px; flex: none; color: var(--brand); }
.perks-strip__item strong { display: block; font-family: var(--font-wide); font-weight: 800; font-size: clamp(12px, .95vw, 14px); color: var(--brand); }
.perks-strip__item span { display: block; margin-top: 2px; font-size: 12px; color: #7a7a7a; }

/* ---------- Home: section heads, full outfits ---------- */
.section-head--row { align-items: flex-end; }
.section-head .eyebrow { margin-bottom: 6px; font-size: 11px; color: #8A8A8A; }
.outfit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 22px); }
.outfit-card { display: block; color: var(--shop-ink, #111); }
.outfit-card__media { position: relative; aspect-ratio: 3 / 4; background: #ECEAE8; border-radius: var(--radius); overflow: hidden; }
.outfit-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.outfit-card__media img[src$=".png"] { object-fit: contain; }
.outfit-card:hover .outfit-card__media img { transform: scale(1.04); }
.outfit-card__tag {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 9px; background: rgba(255, 255, 255, .92); color: var(--brand);
  font-family: var(--font-wide); font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.outfit-card__info { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; }
.outfit-card__name { font-size: clamp(12px, 1vw, 14px); }
.outfit-card__price { font-family: var(--font-wide); font-weight: 800; font-size: clamp(12px, 1vw, 14px); color: var(--brand); white-space: nowrap; }

/* ---------- Shop cards: hover photo + color dots ---------- */
.shop-card__media img { position: relative; }
.shop-card__alt { position: absolute !important; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
@media (hover: hover) {
  .shop-card.has-alt:hover .shop-card__alt { opacity: 1; }
  .shop-card.has-alt:hover .shop-card__media img { transform: none; }
}
.shop-card__badge--dark { top: auto; bottom: 10px; background: var(--brand); color: var(--cream); }
.shop-card__swatches { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.shop-card__swatches i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.shop-card__swatches i.is-light { box-shadow: inset 0 0 0 1px #cfcfcf; }
.shop-card__swatches em { font-style: normal; font-size: 10px; color: #8A8A8A; margin-left: 2px; }

/* ---------- Product: info accordions + sticky bar ---------- */
.pd-acc { margin-top: clamp(18px, 2vw, 26px); border-top: 1px solid #E6E6E6; }
.pd-acc details { border-bottom: 1px solid #E6E6E6; }
.pd-acc summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 0; font-size: clamp(12px, .95vw, 13px); color: var(--shop-ink);
  cursor: pointer; list-style: none;
}
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--brand); transition: transform .3s var(--ease); }
.pd-acc details[open] summary::after { transform: rotate(45deg); }
.pd-acc p { padding-bottom: 14px; font-size: 12.5px; line-height: 1.65; color: #555; }
.pd-acc a { color: var(--brand); border-bottom: 1px solid currentColor; }

.pd-sticky { display: none; }

/* ==========================================================
   PHONES & TABLETS
   ========================================================== */
@media (max-width: 900px) {
  /* product page: big tap-friendly chips */
  .pd-colors { gap: 12px; }
  .pd .pd-color, .of-piece .pd-color { width: 30px; height: 30px; }
  .pd-sizes { gap: 8px; }
  .pd-size, .of-piece .pd-size {
    min-width: 50px; height: 46px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #D0D0D0; font-size: 14px;
    transition: background .2s, color .2s, border-color .2s;
  }
  .pd-size::after { display: none; }
  .pd-size:hover { opacity: 1; border-color: var(--brand); }
  .pd-size.is-active { background: var(--brand); border-color: var(--brand); color: var(--cream); }
  .pd-size.is-out { background: #F6F6F6; border-color: #EEE; }
  .pd-cart { height: 54px; font-size: 14px; }
  .pd-save { margin-top: 16px; font-size: 13px; }

  /* sticky add-to-cart bar */
  .pd-sticky {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #E6E6E6;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .06);
    transform: translateY(110%);
    transition: transform .35s var(--ease);
  }
  .pd-sticky.is-visible { transform: none; }
  .pd-sticky__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pd-sticky__name { font-size: 13px; color: var(--shop-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-sticky__meta { font-size: 12px; color: #7a7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-sticky__btn {
    flex: none; height: 46px; padding-inline: 22px;
    background: var(--brand); color: var(--white);
    font-family: var(--font-wide); font-weight: 800; font-size: 13px;
  }
  .pd-sticky__btn:disabled { opacity: .5; }
  .product-page .site-footer { padding-bottom: 76px; }
  .product-page .dk-toast { bottom: 92px; }
}

@media (max-width: 767px) {
  /* announcement: one message at a time */
  .announce { font-size: 10px; letter-spacing: .14em; }
  .announce__items span {
    position: absolute; inset: 0; justify-content: center;
    opacity: 0; animation: announce-cycle 9s infinite;
  }
  .announce__items span + span::before { display: none; }
  .announce__items span:nth-child(2) { animation-delay: 3s; }
  .announce__items span:nth-child(3) { animation-delay: 6s; }
  @keyframes announce-cycle {
    0% { opacity: 0; transform: translateY(8px); }
    4%, 30% { opacity: 1; transform: none; }
    34%, 100% { opacity: 0; transform: translateY(-8px); }
  }

  /* header: compact, icons */
  .header-inner { padding: 8px var(--gutter); }
  .logo { width: 124px; }
  .nav--right { gap: 0; margin-right: -8px; }
  .nav-icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; }
  .nav-icon-link::after { display: none; }
  .nav-icon { display: block; width: 23px; height: 23px; }
  .nav-label { display: none; }
  .nav-count {
    position: absolute; top: 4px; right: 3px;
    min-width: 17px; height: 17px; padding-inline: 4px; border-radius: 9px;
    background: var(--brand); color: var(--cream);
    font-size: 10px; line-height: 17px; text-align: center;
  }
  .nav-count::before, .nav-count::after { content: none; }

  /* menu: slides in from the left (same side as its button) */
  .nav--left {
    inset: 0 auto 0 0; width: min(84vw, 340px);
    transform: translateX(-100%);
    padding: 104px 28px 36px;
    gap: 16px; overflow-y: auto; overscroll-behavior: contain;
  }
  .nav--left > a { font-family: var(--font-wide); font-weight: 800; font-size: 26px; letter-spacing: -.01em; }
  .nav--left.is-open { box-shadow: 10px 0 40px rgba(75, 18, 18, .15); }
  .menu-toggle[aria-expanded="true"] { position: relative; top: auto; left: auto; right: auto; }   /* the X stays where the ☰ was */
  .menu-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 55;
    background: rgba(20, 5, 5, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s .35s;
  }
  .menu-open .menu-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu-group { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; width: 100%; margin-top: 10px; padding-top: 20px; border-top: 1px solid #EEE; }
  .menu-group a { font-size: 17px; }
  .menu-group--small a { font-size: 14px; color: #6b6b6b; }
  .menu-group__title { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #9a9a9a; }

  /* hero: portrait crop shown whole, the grey around it matches the photo */
  .hero { height: auto; aspect-ratio: 900 / 1080; max-height: calc(100svh - var(--header-h, 58px) - var(--announce-h) - var(--hero-gap)); background: #E6E6E6; }
  .hero-img { object-fit: contain; }

  /* trust strip */
  .perks-strip { gap: 8px; padding: 16px 12px; }
  .perks-strip__item { flex-direction: column; text-align: center; gap: 6px; }
  .perks-strip__item svg { width: 22px; height: 22px; }
  .perks-strip__item strong { font-size: 10.5px; line-height: 1.25; }
  .perks-strip__item span { font-size: 10px; }

  /* trending: swipe by hand instead of the auto belt */
  .section { padding-top: 44px; }
  .slider {
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .slider::-webkit-scrollbar { display: none; }
  .slider__track { animation: none; }
  .slider__track > [aria-hidden="true"] { display: none; }
  .slider__track .product-card { width: 60vw; margin-right: 12px; scroll-snap-align: start; }
  .product-card__name { font-size: 13px; letter-spacing: .04em; }
  .product-card__price { font-size: 12px; letter-spacing: .12em; }

  /* full outfits: swipe row */
  .outfit-row {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .outfit-row::-webkit-scrollbar { display: none; }
  .outfit-card { flex: 0 0 64vw; scroll-snap-align: start; }

  /* category banner: keep the designer's full-height contained photo */
  .category-banner__list a { font-size: 17px; padding-block: 10px; }

  /* shop: sticky category bar with pill buttons */
  .shop-bar {
    position: sticky; top: var(--header-stuck-h, 58px); z-index: 30;
    margin: 14px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter);
    background: var(--white); border-bottom: 1px solid #EEE;
  }
  .shop-filters { gap: 8px; margin-top: 0; }
  .shop-filter { padding: 8px 14px; border: 1px solid #DDD; border-radius: 999px; font-size: 13px; }
  .shop-filter.is-active { background: var(--brand); border-color: var(--brand); color: var(--cream); }
  .shop-filter:hover { opacity: 1; }
  .flt-btn { padding: 8px 12px; border: 1px solid #DDD; border-radius: 999px; font-size: 13px; }
  .shop-grid { column-gap: 10px; padding-top: 18px; }
  .shop-card__name { font-size: 12.5px; }
  .shop-card__price { font-size: 12.5px; }

  /* product: edge-to-edge photos */
  .pd { padding-top: 0; }
  .pd-crumbs { padding-top: 12px; margin-bottom: 10px; }
  .pd-media { width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; }
  .pd-title { font-size: 24px; }

  /* footer: compact */
  .site-footer { margin-top: 56px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-top: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 190px; }
  .footer-col h4 { font-size: 15px; margin-bottom: 12px; }
  .footer-col li { margin-bottom: 10px; }
  .footer-col a { font-size: 13.5px; }
}
@media (max-width: 420px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .announce__items span { animation: none; }
  .announce__items span:first-child { opacity: 1; }
  .pd-sticky { transition: none; }
}

/* ---------- Shop bar wrapper (sticky on phones) ---------- */
.shop-bar-wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 767px) {
  .shop-bar-wrap {
    position: sticky; top: var(--header-stuck-h, 58px); z-index: 30;
    background: var(--white); border-bottom: 1px solid #EEE;
    padding-block: 10px; margin-top: 14px;
  }
  .shop-bar-wrap .shop-bar { position: static; margin: 0; padding: 0; border: 0; }
  .shop-bar-wrap .flt-chips { margin-top: 10px; }
}

/* ---------- Header shrink on phones: stays compact ---------- */
@media (max-width: 767px) {
  .site-header.is-stuck .header-inner { padding: 6px var(--gutter); }
}