/* ============================================================
   KHADIZA DREAMS — Handmade Accessories
   styles.css
   ------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Utilities
   4.  Buttons & badges
   5.  Announcement bar
   6.  Header
   7.  Search panel
   8.  Hero
   9.  Trust strip
   10. Section heads
   11. Category grid
   12. Horizontal rail
   13. Product card
   14. Toolbar, tabs & select
   15. Product grid
   16. Empty state
   17. Story
   18. Process
   19. Testimonials
   20. Newsletter
   21. Footer
   22. Scrim & drawers
   23. Quick view modal
   24. Toast
   25. Scroll reveal
   26. Responsive
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* --- colour --- */
  --ink:        #171512;
  --ink-soft:   #3d3934;
  --paper:      #fffdfb;
  --soft:       #f7f2ea;
  --soft-2:     #efe7db;
  --line:       #e6ded3;
  --line-dark:  #d5c9b8;
  --muted:      #8b8378;
  --gold:       #b08d57;
  --gold-soft:  #d9c4a3;
  --rose:       #a4443c;

  /* --- type --- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- layout --- */
  --max-w:      1560px;
  --gutter:     clamp(18px, 4vw, 40px);
  --header-h:   78px;

  /* --- motion --- */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --dur:        .45s;
  --dur-slow:   .9s;

  /* --- misc --- */
  --radius:     2px;
  --shadow-sm:  0 2px 10px -4px rgba(23,21,18,.14);
  --shadow-md:  0 14px 40px -22px rgba(23,21,18,.32);
  --shadow-lg:  0 30px 70px -40px rgba(23,21,18,.5);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:300;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.005em;
  color:var(--ink);
}

p{ margin:0; }

a{
  color:inherit;
  text-decoration:none;
}

img,
picture,
svg,
video{
  display:block;
  max-width:100%;
}

img{ height:auto; }

ul,ol{
  margin:0;
  padding:0;
  list-style:none;
}

button,
input,
select,
textarea{
  font:inherit;
  color:inherit;
  margin:0;
}

button{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}

select{ cursor:pointer; }

em{ font-style:italic; }

::selection{
  background:var(--ink);
  color:var(--paper);
}

/* --- focus --- */
:focus-visible{
  outline:1.5px solid var(--gold);
  outline-offset:3px;
  border-radius:1px;
}

/* --- scrollbar --- */
* { scrollbar-width:thin; scrollbar-color:var(--line-dark) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:var(--line-dark);
  border-radius:99px;
  border:2px solid var(--paper);
}
*::-webkit-scrollbar-thumb:hover{ background:var(--muted); }


/* ============================================================
   3. UTILITIES
   ============================================================ */
.container{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  top:-100px;
  left:var(--gutter);
  z-index:999;
  padding:12px 22px;
  background:var(--ink);
  color:var(--paper);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:12px; }

.eyebrow{
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

.section{
  padding-block:clamp(64px, 8vw, 120px);
}

.section--soft{
  background:var(--soft);
}

[hidden]{ display:none !important; }


/* ============================================================
   4. BUTTONS & BADGES
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 40px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  z-index:0;
  cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}

.btn::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .5s var(--ease-out);
}

.btn:hover{ color:var(--paper); }
.btn:hover::before{ transform:translateY(0); }

/* --- variants --- */
.btn--solid{
  background:var(--ink);
  color:var(--paper);
}
.btn--solid::before{ background:var(--gold); }
.btn--solid:hover{ color:var(--paper); border-color:var(--gold); }

.btn--light{
  border-color:rgba(255,255,255,.75);
  color:#fff;
}
.btn--light::before{ background:#fff; }
.btn--light:hover{ color:var(--ink); border-color:#fff; }

.btn--ghost{
  border-color:rgba(255,255,255,.42);
  color:rgba(255,255,255,.92);
}
.btn--ghost::before{ background:#fff; }
.btn--ghost:hover{ color:var(--ink); border-color:#fff; }

.btn--block{
  display:flex;
  width:100%;
}

.btn--sm{
  padding:11px 24px;
  font-size:9.5px;
}

/* --- badges --- */
.badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  display:inline-block;
  padding:6px 11px;
  background:var(--paper);
  color:var(--ink);
  font-size:9px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
  border-radius:var(--radius);
}

.badge--bestseller{
  background:var(--ink);
  color:var(--paper);
}

.badge--new{
  background:var(--gold);
  color:#fff;
}


/* ============================================================
   5. ANNOUNCEMENT BAR
   ============================================================ */
.announcement{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:11px 48px;
  overflow:hidden;
}

.announcement.is-hidden{ display:none; }

.announcement__viewport{
  position:relative;
  height:16px;
}

.announcement__msg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  font-size:10px;
  font-weight:300;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}

.announcement__msg.is-active{
  opacity:1;
  transform:none;
}

.announcement__close{
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  width:28px; height:28px;
  display:grid;
  place-items:center;
  font-size:17px;
  line-height:1;
  color:rgba(255,255,255,.65);
  transition:color .25s, transform .3s var(--ease);
}
.announcement__close:hover{
  color:#fff;
  transform:translateY(-50%) rotate(90deg);
}


/* ============================================================
   6. HEADER
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,253,251,.92);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}

.site-header.is-scrolled{
  border-bottom-color:var(--line);
  background:rgba(255,253,251,.97);
}

.site-header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"nav logo actions";
  align-items:center;
  gap:24px;
  height:var(--header-h);
}

/* --- logo --- */
.logo{
  grid-area:logo;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
  text-align:center;
  transition:opacity .3s;
}
.logo:hover{ opacity:.68; }

.logo__name{
  font-family:var(--font-display);
  font-size:clamp(21px, 2.3vw, 28px);
  font-weight:500;
  letter-spacing:.24em;
  text-indent:.24em;
  color:var(--ink);
}

.logo__sub{
  margin-top:4px;
  font-family:var(--font-body);
  font-size:8px;
  font-weight:400;
  letter-spacing:.5em;
  text-indent:.5em;
  text-transform:uppercase;
  color:var(--gold);
}

.logo--footer .logo__name{ font-size:26px; }
.logo--footer .logo__sub{ font-size:8.5px; }

/* --- primary nav --- */
.primary-nav{
  grid-area:nav;
  justify-self:start;
}

.primary-nav__list{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.8vw, 30px);
}

.primary-nav__link{
  position:relative;
  display:inline-block;
  padding:8px 0;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink-soft);
  transition:color .3s var(--ease);
}

.primary-nav__link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:3px;
  width:0;
  height:1px;
  background:currentColor;
  transition:width .4s var(--ease-out);
}

.primary-nav__link:hover{ color:var(--ink); }
.primary-nav__link:hover::after,
.primary-nav__link.is-active::after{ width:100%; }

.primary-nav__link.is-active{ color:var(--ink); }

/* --- header actions --- */
.header-actions{
  grid-area:actions;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:clamp(2px, .8vw, 8px);
}

.icon-btn{
  position:relative;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.icon-btn:hover{
  background:var(--soft);
  transform:translateY(-1px);
}

.icon-btn svg{
  width:19px;
  height:19px;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* --- cart / wishlist count --- */
.count-badge{
  position:absolute;
  top:2px;
  right:2px;
  display:grid;
  place-items:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  background:var(--gold);
  color:#fff;
  font-size:9px;
  font-weight:500;
  line-height:1;
  letter-spacing:0;
  border-radius:99px;
  border:1.5px solid var(--paper);
  transform:scale(0);
  transition:transform .35s var(--ease-out);
}

.count-badge:not([hidden]){ transform:scale(1); }

/* --- mobile burger --- */
.nav-toggle{
  grid-area:burger;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  border-radius:50%;
}
.nav-toggle:hover{ background:var(--soft); }

.nav-toggle__bar{
  display:block;
  width:19px;
  height:1.4px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){
  transform:translateY(6.4px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){
  transform:translateY(-6.4px) rotate(-45deg);
}


/* ============================================================
   7. SEARCH PANEL
   ============================================================ */
.search-panel{
  border-top:1px solid var(--line);
  background:var(--paper);
  animation:panelDrop .35s var(--ease-out);
}

@keyframes panelDrop{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:none; }
}

.search-panel__form{
  display:flex;
  align-items:center;
  gap:16px;
  padding-block:22px;
}

.search-panel__input{
  flex:1;
  min-width:0;
  padding:12px 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--line-dark);
  font-size:15px;
  font-weight:300;
  letter-spacing:.04em;
  outline:none;
  transition:border-color .3s var(--ease);
}

.search-panel__input::placeholder{ color:var(--muted); }
.search-panel__input:focus{ border-bottom-color:var(--ink); }

.search-panel__submit{
  padding:12px 4px;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:border-color .3s, opacity .3s;
}
.search-panel__submit:hover{
  border-bottom-color:var(--ink);
}


/* ============================================================
   8. HERO
   ============================================================ */
.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(540px, 82vh, 860px);
  overflow:hidden;
  background:#1a1714;
  isolation:isolate;
}

.hero__media{
  position:absolute;
  inset:0;
  z-index:-1;
}

.hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.55) brightness(.78) contrast(1.06);
  animation:heroDrift 18s var(--ease) forwards;
}

@keyframes heroDrift{
  from{ transform:scale(1.03); }
  to  { transform:scale(1.13); }
}

.hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to top,
      rgba(12,10,8,.76) 0%,
      rgba(12,10,8,.30) 42%,
      rgba(12,10,8,.14) 68%,
      rgba(12,10,8,.40) 100%);
}

.hero__content{
  position:relative;
  z-index:2;
  padding-block:clamp(56px, 8vw, 104px);
  color:#fff;
  max-width:min(760px, 92%);
}

.hero__content .eyebrow{
  color:rgba(255,255,255,.82);
}

.hero__title{
  margin:16px 0 20px;
  font-size:clamp(40px, 7vw, 96px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.012em;
  color:#fff;
  text-wrap:balance;
}

.hero__title em{
  font-style:italic;
  font-weight:400;
  color:var(--gold-soft);
}

.hero__text{
  max-width:46ch;
  margin-bottom:34px;
  font-size:clamp(14px, 1.15vw, 16px);
  font-weight:300;
  line-height:1.75;
  color:rgba(255,255,255,.84);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.hero__scroll{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(56px, 8vw, 104px);
  z-index:3;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  writing-mode:vertical-rl;
  font-size:9px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

.hero__scroll::after{
  content:'';
  width:1px;
  height:54px;
  background:rgba(255,255,255,.4);
  transform-origin:top;
  animation:scrollPulse 2.6s var(--ease) infinite;
}

@keyframes scrollPulse{
  0%  { transform:scaleY(0); opacity:0; }
  35% { transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}


/* ============================================================
   9. TRUST STRIP
   ============================================================ */
.trust-strip{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.trust-strip__list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}

.trust-strip__item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:26px 12px;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:center;
  border-right:1px solid var(--line);
}

.trust-strip__item:last-child{ border-right:0; }

.trust-strip__item svg{
  flex-shrink:0;
  width:20px;
  height:20px;
  color:var(--gold);
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ============================================================
   10. SECTION HEADS
   ============================================================ */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:clamp(32px, 4vw, 56px);
}

.section-head__title{
  margin-top:10px;
  font-size:clamp(30px, 4vw, 50px);
  font-weight:300;
  line-height:1.06;
}

.section-head__link{
  position:relative;
  padding-bottom:3px;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  border-bottom:1px solid var(--line-dark);
  transition:border-color .35s var(--ease), opacity .3s;
}

.section-head__link:hover{
  border-bottom-color:var(--ink);
}

.section-head--center{
  justify-content:center;
  text-align:center;
}

.section-head--center > div{
  display:flex;
  flex-direction:column;
  align-items:center;
}


/* ============================================================
   11. CATEGORY GRID
   ============================================================ */
.category-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.6vw, 22px);
}

.category-card{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:3 / 4;
  background:var(--soft);
  border-radius:var(--radius);
}

.category-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.65) brightness(.9);
  transition:transform 1.2s var(--ease-out), filter .7s var(--ease);
}

.category-card:hover .category-card__img{
  transform:scale(1.07);
  filter:grayscale(.1) brightness(.92);
}

.category-card__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(12,10,8,.72) 0%,
    rgba(12,10,8,.22) 45%,
    rgba(12,10,8,0) 72%);
  transition:opacity .5s var(--ease);
}

.category-card:hover .category-card__overlay{
  opacity:.85;
}

.category-card__label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:clamp(18px, 2.2vw, 30px);
  color:#fff;
}

.category-card__title{
  font-family:var(--font-display);
  font-size:clamp(21px, 2.3vw, 30px);
  font-weight:400;
  line-height:1.1;
}

.category-card__cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
}

.category-card__cta::after{
  content:'';
  width:18px;
  height:1px;
  background:currentColor;
  transition:width .45s var(--ease-out);
}

.category-card:hover .category-card__cta::after{
  width:34px;
}


/* ============================================================
   12. HORIZONTAL RAIL
   ============================================================ */
.bestsellers{ overflow:hidden; }

.rail-wrap{
  position:relative;
}

.rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * clamp(12px, 1.6vw, 22px)) / 4);
  gap:clamp(12px, 1.6vw, 22px);
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:4px;
}

.rail::-webkit-scrollbar{ display:none; }

.rail__item{
  scroll-snap-align:start;
  min-width:0;
}

/* --- arrow buttons --- */
.rail-nav{
  position:absolute;
  top:clamp(140px, 22vw, 250px);
  z-index:6;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:50%;
  box-shadow:var(--shadow-sm);
  color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease),
             opacity .35s var(--ease), transform .35s var(--ease);
}

.rail-nav:hover{
  background:var(--ink);
  color:var(--paper);
  transform:scale(1.06);
}

.rail-nav svg{
  width:15px;
  height:15px;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rail-nav--prev{ left:-23px; }
.rail-nav--next{ right:-23px; }

.rail-nav[disabled]{
  opacity:0;
  pointer-events:none;
}


/* ============================================================
   13. PRODUCT CARD
   ============================================================ */
.product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.product-card__media{
  position:relative;
  overflow:hidden;
  aspect-ratio:3 / 4;
  background:var(--soft);
  border-radius:var(--radius);
}

.product-card__link{
  display:block;
  height:100%;
}

.product-card__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.45) contrast(1.03);
  transition:opacity .65s var(--ease),
             transform 1.2s var(--ease-out),
             filter .65s var(--ease);
}

.product-card:hover .product-card__img{
  transform:scale(1.05);
  filter:grayscale(0) contrast(1.03);
}

.product-card__img--alt{ opacity:0; }

.product-card:hover .product-card__img--alt{ opacity:1; }
.product-card:hover .product-card__img:not(.product-card__img--alt){ opacity:0; }

/* --- wishlist heart --- */
.product-card__wish{
  position:absolute;
  top:11px;
  right:11px;
  z-index:4;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:rgba(255,253,251,.88);
  border-radius:50%;
  color:var(--ink);
  opacity:0;
  transform:translateY(-5px);
  backdrop-filter:blur(4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             background .3s var(--ease), color .3s var(--ease);
}

.product-card:hover .product-card__wish,
.product-card__wish[aria-pressed="true"]{
  opacity:1;
  transform:none;
}

.product-card__wish:hover{
  background:var(--ink);
  color:var(--paper);
}

.product-card__wish svg{
  width:17px;
  height:17px;
  transition:fill .3s var(--ease), stroke .3s var(--ease);
}

.product-card__wish[aria-pressed="true"] svg{
  fill:var(--rose);
  stroke:var(--rose);
}

/* --- quick add --- */
.product-card__quick{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  padding:16px 10px;
  background:rgba(23,21,18,.94);
  color:var(--paper);
  font-size:10px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
  transform:translateY(101%);
  transition:transform .45s var(--ease-out), background .3s;
}

.product-card:hover .product-card__quick{
  transform:translateY(0);
}

.product-card__quick:hover{
  background:var(--gold);
}

/* --- info --- */
.product-card__info{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:17px 2px 0;
}

.product-card__name{
  margin:0;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:.01em;
  color:var(--ink);
}

.product-card__name a{
  transition:color .3s var(--ease);
}
.product-card__name a:hover{ color:var(--gold); }

.product-card__meta{
  font-size:11.5px;
  font-weight:300;
  line-height:1.5;
  color:var(--muted);
}

.product-card__price{
  margin-top:2px;
  font-size:14px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--ink);
}

.price--sale{ color:var(--rose); }

.price--was{
  margin-left:9px;
  font-size:12.5px;
  color:var(--muted);
  text-decoration:line-through;
}


/* ============================================================
   14. TOOLBAR, TABS & SELECT
   ============================================================ */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
  padding-bottom:20px;
  margin-bottom:clamp(28px, 3.4vw, 44px);
  border-bottom:1px solid var(--line);
}

.toolbar__filters{ min-width:0; }

.tabs{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2vw, 30px);
  overflow-x:auto;
  scrollbar-width:none;
}

.tabs::-webkit-scrollbar{ display:none; }

.tab{
  position:relative;
  padding-bottom:6px;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--muted);
  transition:color .3s var(--ease);
}

.tab::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-21px;
  width:0;
  height:1px;
  background:var(--ink);
  transition:width .45s var(--ease-out);
}

.tab:hover{ color:var(--ink); }
.tab.is-active{ color:var(--ink); }
.tab.is-active::after{ width:100%; }

.toolbar__right{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.8vw, 28px);
}

.toolbar__count{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

.toolbar__sort{ position:relative; }

.select{
  appearance:none;
  -webkit-appearance:none;
  padding:9px 32px 9px 14px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  outline:none;
  transition:border-color .3s var(--ease), background .3s;
}

.select:hover{ border-color:var(--line-dark); background:var(--soft); }
.select:focus{ border-color:var(--ink); }

.toolbar__sort::after{
  content:'';
  position:absolute;
  top:50%;
  right:14px;
  width:6px;
  height:6px;
  border-right:1.2px solid var(--ink);
  border-bottom:1.2px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}


/* ============================================================
   15. PRODUCT GRID
   ============================================================ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(30px, 3.6vw, 52px) clamp(12px, 1.6vw, 22px);
}

.product-grid__item{ min-width:0; }

.shop__more{
  display:flex;
  justify-content:center;
  margin-top:clamp(44px, 5vw, 70px);
}


/* ============================================================
   16. EMPTY STATE
   ============================================================ */
.empty-state{
  padding:clamp(60px, 8vw, 110px) 20px;
  text-align:center;
}

.empty-state__title{
  margin-bottom:10px;
  font-family:var(--font-display);
  font-size:clamp(24px, 3vw, 34px);
  font-weight:400;
}

.empty-state__text{
  margin-bottom:28px;
  color:var(--muted);
}


/* ============================================================
   17. STORY
   ============================================================ */
.story{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  background:var(--soft);
}

.story__media{
  position:relative;
  overflow:hidden;
  min-height:clamp(400px, 52vw, 680px);
}

.story__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.55) contrast(1.04);
  transition:transform 1.4s var(--ease-out), filter .8s var(--ease);
}

.story:hover .story__media img{
  transform:scale(1.045);
  filter:grayscale(.15) contrast(1.04);
}

.story__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:clamp(40px, 6vw, 100px);
}

.story__title{
  font-size:clamp(32px, 4.2vw, 56px);
  font-weight:300;
  line-height:1.06;
  max-width:14ch;
}

.story__title em{
  font-style:italic;
  color:var(--gold);
}

.story__text{
  max-width:46ch;
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:var(--ink-soft);
}

.story__body .btn{
  align-self:flex-start;
  margin-top:12px;
}


/* ============================================================
   18. PROCESS
   ============================================================ */
.process__steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3.4vw, 56px);
  counter-reset:step;
}

.process-step{
  position:relative;
  padding-top:30px;
  border-top:1px solid var(--line-dark);
}

.process-step__num{
  display:block;
  margin-bottom:16px;
  font-family:var(--font-display);
  font-size:clamp(32px, 3.6vw, 48px);
  font-weight:300;
  line-height:1;
  color:var(--gold);
}

.process-step__title{
  margin-bottom:10px;
  font-size:clamp(19px, 2vw, 24px);
  font-weight:400;
}

.process-step__text{
  max-width:34ch;
  font-size:14px;
  font-weight:300;
  line-height:1.75;
  color:var(--muted);
}


/* ============================================================
   19. TESTIMONIALS
   ============================================================ */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.4vw, 34px);
}

.testimonial{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
  padding:clamp(28px, 3vw, 44px);
  background:var(--soft);
  border-radius:var(--radius);
  transition:background .4s var(--ease), transform .5s var(--ease);
}

.testimonial:hover{
  background:var(--soft-2);
  transform:translateY(-4px);
}

.testimonial__text{
  font-family:var(--font-display);
  font-size:clamp(18px, 1.7vw, 22px);
  font-style:italic;
  font-weight:400;
  line-height:1.55;
  color:var(--ink);
}

.testimonial__author{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
}

.testimonial__author span{
  color:var(--muted);
  letter-spacing:.12em;
}


/* ============================================================
   20. NEWSLETTER
   ============================================================ */
.newsletter{
  padding-block:clamp(72px, 9vw, 130px);
  background:var(--ink);
  color:var(--paper);
  text-align:center;
}

.newsletter .eyebrow{ color:rgba(255,253,251,.55); }

.newsletter__title{
  margin:16px 0 16px;
  font-size:clamp(30px, 4vw, 52px);
  font-weight:300;
  color:var(--paper);
}

.newsletter__text{
  max-width:48ch;
  margin:0 auto 36px;
  font-size:14.5px;
  font-weight:300;
  line-height:1.75;
  color:rgba(255,253,251,.68);
}

.newsletter__form{
  display:flex;
  align-items:center;
  gap:14px;
  width:min(560px, 100%);
  margin-inline:auto;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,253,251,.32);
  transition:border-color .35s var(--ease);
}

.newsletter__form:focus-within{
  border-bottom-color:var(--gold);
}

.newsletter__input{
  flex:1;
  min-width:0;
  padding:14px 2px;
  background:none;
  border:0;
  outline:none;
  font-size:14px;
  font-weight:300;
  letter-spacing:.05em;
  color:var(--paper);
}

.newsletter__input::placeholder{
  color:rgba(255,253,251,.42);
}

.newsletter__submit{
  padding:14px 4px;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper);
  white-space:nowrap;
  transition:color .3s var(--ease);
}

.newsletter__submit:hover{ color:var(--gold-soft); }

.newsletter__note{
  margin-top:20px;
  font-size:11.5px;
  letter-spacing:.06em;
  color:rgba(255,253,251,.38);
}


/* ============================================================
   21. FOOTER
   ============================================================ */
.site-footer{
  padding-top:clamp(56px, 7vw, 96px);
  background:var(--paper);
  border-top:1px solid var(--line);
}

.site-footer__grid{
  display:grid;
  grid-template-columns:1.6fr repeat(3, 1fr);
  gap:clamp(30px, 3.6vw, 60px);
  padding-bottom:clamp(44px, 5vw, 72px);
}

/* --- brand column --- */
.site-footer__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.site-footer__brand .logo{
  align-items:flex-start;
}

.site-footer__about{
  max-width:32ch;
  font-size:13.5px;
  font-weight:300;
  line-height:1.75;
  color:var(--muted);
}

/* --- socials --- */
.socials{
  display:flex;
  gap:10px;
  margin-top:4px;
}

.socials__link{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}

.socials__link:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
  transform:translateY(-2px);
}

.socials__link svg{
  width:16px;
  height:16px;
}

/* --- link columns --- */
.site-footer__heading{
  margin-bottom:20px;
  font-family:var(--font-body);
  font-size:10px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
}

.site-footer__list{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.site-footer__list a{
  display:inline-block;
  font-size:13.5px;
  font-weight:300;
  color:var(--muted);
  transition:color .3s var(--ease), transform .3s var(--ease);
}

.site-footer__list a:hover{
  color:var(--ink);
  transform:translateX(4px);
}

/* --- bottom bar --- */
.site-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-block:26px;
  border-top:1px solid var(--line);
}

.site-footer__copy,
.site-footer__made{
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.06em;
  color:var(--muted);
}


/* ============================================================
   22. SCRIM & DRAWERS
   ============================================================ */
.scrim{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(12,10,8,.52);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}

.scrim.is-open{
  opacity:1;
  visibility:visible;
}

/* --- drawer shell --- */
.drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  width:min(440px, 100%);
  height:100%;
  background:var(--paper);
  box-shadow:var(--shadow-lg);
  transform:translateX(101%);
  transition:transform .55s var(--ease-out);
  will-change:transform;
}

.drawer.is-open{ transform:none; }

.drawer--nav{
  left:0;
  right:auto;
  width:min(380px, 88%);
  transform:translateX(-101%);
}

/* --- drawer head --- */
.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-shrink:0;
  padding:22px clamp(20px, 3vw, 28px);
  border-bottom:1px solid var(--line);
}

.drawer__title{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
}

.drawer__close{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  font-size:22px;
  line-height:1;
  color:var(--ink);
  opacity:.6;
  transition:opacity .3s, transform .4s var(--ease);
}

.drawer__close:hover{
  opacity:1;
  transform:rotate(90deg);
}

/* --- drawer body --- */
.drawer__body{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(20px, 3vw, 28px);
}

/* --- empty states --- */
.drawer__empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:70px 16px;
  text-align:center;
}

.drawer__empty-title{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:400;
  color:var(--ink);
}

.drawer__empty-text{
  max-width:28ch;
  margin-bottom:14px;
  font-size:13.5px;
  font-weight:300;
  color:var(--muted);
}

/* --- drawer footer --- */
.drawer__foot{
  flex-shrink:0;
  padding:22px clamp(20px, 3vw, 28px) 28px;
  background:var(--paper);
  border-top:1px solid var(--line);
}

.drawer__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}

.drawer__row strong{
  font-family:var(--font-display);
  font-size:25px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.drawer__note{
  margin-bottom:20px;
  font-size:11.5px;
  font-weight:300;
  color:var(--muted);
}

.drawer__link{
  display:block;
  width:100%;
  margin-top:14px;
  padding:6px 0;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  color:var(--muted);
  transition:color .3s;
}

.drawer__link:hover{ color:var(--ink); }

.drawer__section{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.drawer__section .drawer__link{
  margin-top:0;
  text-align:left;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}

/* --- mobile nav list --- */
.mobile-nav{
  display:flex;
  flex-direction:column;
}

.mobile-nav li{
  border-bottom:1px solid var(--line);
}

.mobile-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 0;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  transition:padding-left .35s var(--ease), color .3s;
}

.mobile-nav a::after{
  content:'→';
  font-size:14px;
  letter-spacing:0;
  opacity:.3;
  transition:opacity .3s, transform .35s var(--ease);
}

.mobile-nav a:hover{
  padding-left:6px;
  color:var(--gold);
}

.mobile-nav a:hover::after{
  opacity:1;
  transform:translateX(3px);
}

/* ------------------------------------------------------------
   Cart line items
   (styled here so the JS can inject them without extra CSS)
   ------------------------------------------------------------ */
.line{
  display:flex;
  gap:16px;
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}

.line:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0;
}

.line__img{
  flex-shrink:0;
  width:86px;
  aspect-ratio:3 / 4;
  object-fit:cover;
  background:var(--soft);
  border-radius:var(--radius);
}

.line__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.line__name{
  font-size:13px;
  font-weight:400;
  line-height:1.45;
  color:var(--ink);
}

.line__meta{
  font-size:11px;
  font-weight:300;
  color:var(--muted);
}

.line__price{
  font-size:13.5px;
  font-weight:400;
  color:var(--ink);
}

.line__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}

.qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.qty button{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:14px;
  line-height:1;
  transition:background .25s, color .25s;
}

.qty button:hover{
  background:var(--soft);
  color:var(--gold);
}

.qty span{
  min-width:28px;
  text-align:center;
  font-size:12.5px;
}

.line__remove{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}

.line__remove:hover{
  color:var(--rose);
  border-bottom-color:currentColor;
}


/* ============================================================
   23. QUICK VIEW MODAL
   ============================================================ */
.modal{
  position:fixed;
  inset:0;
  z-index:110;
  display:grid;
  place-items:center;
  padding:var(--gutter);
  background:rgba(12,10,8,.58);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}

.modal.is-open{
  opacity:1;
  visibility:visible;
}

.modal__panel{
  position:relative;
  width:min(940px, 100%);
  max-height:min(88vh, 720px);
  overflow-y:auto;
  background:var(--paper);
  box-shadow:var(--shadow-lg);
  border-radius:var(--radius);
  transform:translateY(18px) scale(.985);
  transition:transform .5s var(--ease-out);
}

.modal.is-open .modal__panel{
  transform:none;
}

.modal__close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:5;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  background:rgba(255,253,251,.9);
  border-radius:50%;
  font-size:22px;
  line-height:1;
  color:var(--ink);
  transition:background .3s, transform .4s var(--ease);
}

.modal__close:hover{
  background:var(--ink);
  color:var(--paper);
  transform:rotate(90deg);
}

.modal__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
}

.modal__media{
  background:var(--soft);
}

.modal__media img{
  width:100%;
  height:100%;
  min-height:340px;
  object-fit:cover;
}

.modal__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:clamp(30px, 4vw, 56px);
}

.modal__title{
  font-size:clamp(26px, 3vw, 38px);
  font-weight:400;
  line-height:1.1;
}

.modal__price{
  font-size:20px;
  font-weight:400;
  color:var(--gold);
}

.modal__text{
  max-width:38ch;
  font-size:14px;
  font-weight:300;
  line-height:1.8;
  color:var(--muted);
}

.modal__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}


/* ============================================================
   24. TOAST
   ============================================================ */
.toast{
  position:fixed;
  left:50%;
  bottom:34px;
  z-index:200;
  padding:15px 30px;
  background:var(--ink);
  color:var(--paper);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  transform:translate(-50%, 160%);
  opacity:0;
  pointer-events:none;
  transition:transform .55s var(--ease-out), opacity .4s var(--ease);
}

.toast.is-on{
  transform:translate(-50%, 0);
  opacity:1;
}


/* ============================================================
   25. SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}

.reveal.is-in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* --- global reduced motion --- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============================================================
   26. RESPONSIVE
   ============================================================ */

/* ---------- ≤ 1280px ---------- */
@media (max-width:1280px){
  .product-grid{ grid-template-columns:repeat(3, 1fr); }
  .rail{ grid-auto-columns:calc((100% - 2 * 20px) / 3); }
  .rail-nav{ top:clamp(120px, 20vw, 210px); }
}

/* ---------- ≤ 1080px ---------- */
@media (max-width:1080px){

  :root{ --header-h:70px; }

  /* header collapses to burger */
  .site-header__inner{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"burger logo actions";
    gap:12px;
  }

  .nav-toggle{ display:flex; }
  .primary-nav{ display:none; }

  /* category grid → 2 cols */
  .category-grid{ grid-template-columns:repeat(2, 1fr); }

  /* footer → 2 cols */
  .site-footer__grid{
    grid-template-columns:repeat(2, 1fr);
    gap:36px 24px;
  }
  .site-footer__brand{ grid-column:1 / -1; }

  /* story stacks */
  .story{ grid-template-columns:1fr; }
  .story__media{ min-height:58vw; }
  .story__body{ padding:clamp(36px, 6vw, 64px) var(--gutter); }
}

/* ---------- ≤ 900px ---------- */
@media (max-width:900px){

  .trust-strip__list{
    grid-template-columns:repeat(2, 1fr);
  }
  .trust-strip__item:nth-child(2){ border-right:0; }
  .trust-strip__item:nth-child(-n+2){ border-bottom:1px solid var(--line); }

  .process__steps{ grid-template-columns:1fr; gap:34px; }

  .testimonial-grid{ grid-template-columns:1fr; }

  .modal__grid{ grid-template-columns:1fr; }
  .modal__media img{ min-height:280px; max-height:340px; }

  .toolbar{ gap:16px; }
  .toolbar__right{ width:100%; justify-content:space-between; }
}

/* ---------- ≤ 760px ---------- */
@media (max-width:760px){

  body{ font-size:14.5px; }

  .announcement{ padding:10px 40px; }
  .announcement__msg{ font-size:9px; letter-spacing:.18em; }

  .hero{
    min-height:74vh;
    align-items:flex-end;
  }
  .hero__title{ font-size:clamp(34px, 10vw, 52px); }
  .hero__text{ font-size:14px; }
  .hero__scroll{ display:none; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ flex:1; min-width:0; }

  .product-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:30px 12px;
  }

  /* rail becomes wider cards */
  .rail{ grid-auto-columns:74%; }
  .rail-nav{ display:none; }

  /* quick-add + heart always visible on touch */
  .product-card__quick{ transform:none; position:static; margin-top:0; }
  .product-card__wish{
    opacity:1;
    transform:none;
    width:32px;
    height:32px;
  }
  .product-card__wish svg{ width:15px; height:15px; }

  .product-card__name{ font-size:13px; }
  .product-card__meta{ font-size:11px; }

  .section-head{ align-items:flex-start; }
  .section-head__title{ font-size:clamp(26px, 7vw, 36px); }

  .newsletter__form{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border:0;
  }
  .newsletter__input{
    padding:15px 4px;
    border-bottom:1px solid rgba(255,253,251,.32);
    text-align:center;
  }
  .newsletter__submit{
    margin-top:18px;
    padding:16px 30px;
    border:1px solid rgba(255,253,251,.4);
  }

  .site-footer__bottom{
    justify-content:center;
    text-align:center;
  }
}

/* ---------- ≤ 560px ---------- */
@media (max-width:560px){

  .trust-strip__list{ grid-template-columns:1fr; }
  .trust-strip__item{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:20px 12px;
  }
  .trust-strip__item:last-child{ border-bottom:0; }

  .category-grid{ gap:10px; }
  .category-card__title{ font-size:18px; }
  .category-card__cta{ font-size:8.5px; letter-spacing:.16em; }

  .btn{
    padding:15px 28px;
    font-size:10px;
    letter-spacing:.18em;
  }

  .drawer{ width:100%; }

  .toast{
    left:var(--gutter);
    right:var(--gutter);
    bottom:20px;
    padding:14px 18px;
    transform:translateY(160%);
    font-size:9.5px;
    letter-spacing:.14em;
  }
  .toast.is-on{ transform:translateY(0); }
}

/* ---------- ≤ 420px ---------- */
@media (max-width:420px){
  .product-grid{ gap:26px 10px; }
  .product-card__info{ padding-top:13px; }
  .product-card__name{ font-size:12.5px; }
  .product-card__price{ font-size:13px; }

  .logo__name{ font-size:19px; letter-spacing:.2em; text-indent:.2em; }
  .logo__sub{ font-size:7px; letter-spacing:.42em; text-indent:.42em; }

  .header-actions{ gap:0; }
  .icon-btn{ width:36px; height:36px; }
  .icon-btn svg{ width:17px; height:17px; }
}

/* ---------- print ---------- */
@media print{
  .site-header,
  .announcement,
  .drawer,
  .scrim,
  .modal,
  .toast,
  .rail-nav,
  .product-card__quick,
  .product-card__wish,
  .newsletter{ display:none !important; }

  body{ background:#fff; }
}