/* ═══════════════════════════════════════════════════════
   KIRA COLLECTION — CSS Unifié
   Un seul fichier pour tout le site.
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

/* ══ VARIABLES GLOBALES ══════════════════════════════ */
:root{
  --bg:        #faf8f5;
  --cream:     #faf8f5;
  --ink:       #1c1c1e;
  --muted:     #8e8579;
  --mut:       rgba(28,28,30,.52);
  --mut2:      rgba(28,28,30,.34);
  --line:      rgba(28,28,30,.09);
  --border:    rgba(28,28,30,.16);
  --serif:     'Cormorant Garamond', Georgia, serif;
  --sans:      'Inter', system-ui, -apple-system, sans-serif;
  --max:       1160px;
  --h:         96px;
  --headerH:   96px;
  --track:     .28em;
}

/* ══ RESET ═══════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  letter-spacing:.2px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--headerH);
}
a{color:inherit;text-decoration:none}
img{display:block}
p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.02em}
h1{font-size:56px;line-height:1.02}
h2{font-size:34px;line-height:1.12}

/* ══ UTILITAIRES ════════════════════════════════════ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.hr{height:1px;background:var(--line);border:0;margin:40px 0}
.smallcaps{text-transform:uppercase;letter-spacing:var(--track);font-size:11px;color:var(--mut2)}
.link{display:inline-block;padding-bottom:4px;border-bottom:1px solid var(--border)}
.link:hover{opacity:.88}
.btnline{display:inline-flex;align-items:center;gap:20px;font-family:var(--sans);font-size:12px;letter-spacing:var(--track);text-transform:uppercase;padding:8px 0}
.btnline:hover{opacity:.88}

/* ══ HEADER — identique homepage et toutes pages ════ */
.kira-header,
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:var(--h);
  display:flex;align-items:center;
  background:rgba(250,248,245,.95);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:none;
}
.kira-header__inner,
.topbar .wrap,
.topbar__inner{
  width:100%;max-width:var(--max);margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:var(--h);
  overflow:visible;
}
/* Header inner — burger | logo | icons */
.kira-header__left{display:flex;align-items:center;justify-content:flex-start}
.kira-header__right{display:flex;align-items:center;justify-content:flex-end;gap:16px}
/* Topbar nav (legacy topbar system) */
.topbar-nav{display:flex;gap:32px;align-items:center}
.topbar-nav a{
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted,var(--mut));font-weight:400;transition:color .2s;
}
.topbar-nav a:hover{color:var(--ink)}
/* Logo centré */
.kira-logo-link,
.brand{display:flex;justify-content:center;align-items:center;line-height:1}
.kira-logo-link img,
.brand img,
.topbar .brand img{
  height:72px;width:auto;
  mix-blend-mode:multiply;
  object-fit:contain;display:block;
}
.brand .tag{display:none}
/* Icônes droite */
.kira-icons,
.kira-header__right,
.topbar__left,.topbar__right{display:flex;gap:16px;align-items:center}
.topbar__right,.kira-icons,.kira-header__right{justify-content:flex-end}
.topbar__left{justify-content:flex-start}
.kira-icons a,.kira-icons button,.kira-header__right a,.kira-header__right button,
.header-icon{
  background:none;border:none;cursor:pointer;
  color:var(--muted,var(--mut));padding:4px;transition:color .2s;position:relative;
}
.kira-icons a:hover,.kira-icons button:hover,
.kira-header__right a:hover,.kira-header__right button:hover,
.header-icon:hover{color:var(--ink)}
/* Compteur panier */
.kira-cart-dot,.count{
  position:absolute;top:-3px;right:-3px;
  width:14px;height:14px;border-radius:50%;
  background:var(--ink);color:#fff;
  font-size:8.5px;font-weight:500;
  display:none;align-items:center;justify-content:center;
  font-family:var(--sans);
}
/* Legacy */
.navtext{display:none}
/* Hamburger — toujours visible */
.kira-hamburger{
  display:flex;flex-direction:column;gap:5px;
  padding:5px;background:none;border:none;cursor:pointer;
}
.kira-hamburger span{
  display:block;width:20px;height:1.5px;
  background:var(--muted,var(--ink));transition:all .3s;
}
.topbar-hamburger{
  display:none;flex-direction:column;gap:5px;
  padding:5px;background:none;border:none;cursor:pointer;
}
.topbar-hamburger span{
  display:block;width:20px;height:1.5px;
  background:var(--ink);transition:all .3s;
}

/* ══ SIDE MENU (LEFT DRAWER) ═════════════════════════*/
.kira-side-menu{
  position:fixed;top:0;left:0;bottom:0;
  width:min(300px,85vw);
  background:var(--bg);
  z-index:300;
  transform:translateX(-100%);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  padding:80px 40px 48px;
  box-shadow:4px 0 32px rgba(0,0,0,.06);
}
.kira-side-menu.is-open{transform:translateX(0)}
.kira-side-menu__close{
  position:absolute;top:24px;right:24px;
  background:none;border:none;cursor:pointer;
  font-size:22px;color:var(--mut);line-height:1;
  transition:color .2s;
}
.kira-side-menu__close:hover{color:var(--ink)}
.kira-side-menu nav{display:flex;flex-direction:column}
.kira-side-menu nav a{
  font-family:var(--serif);font-size:26px;
  font-weight:300;font-style:italic;
  color:var(--ink);letter-spacing:.02em;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  transition:opacity .2s;
}
.kira-side-menu nav a:last-child{border-bottom:none}
.kira-side-menu nav a:hover{opacity:.45}
/* Overlay bg behind side menu */
.kira-menu-overlay-bg{
  position:fixed;inset:0;
  background:rgba(0,0,0,.3);
  z-index:299;
  opacity:0;pointer-events:none;
  transition:opacity .38s;
}
.kira-menu-overlay-bg.is-open{opacity:1;pointer-events:auto}

/* ══ HERO (homepage) ════════════════════════════════ */
.kira-hero{
  margin-top:var(--h);
  padding:40px 24px 32px;
  text-align:center;
  position:relative;
  overflow:visible;
  background:linear-gradient(155deg,#fdf4ee 0%,#faf8f5 55%,#f5f0eb 100%);
  display:flex;align-items:center;justify-content:center;
  min-height:30vh;max-height:40vh;
}
.kira-hero__content{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.kira-hero__kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:400}
.kira-hero__title{
  font-family:var(--serif);
  font-size:clamp(30px,4.8vw,56px);
  font-weight:300;font-style:italic;
  color:var(--ink);letter-spacing:.03em;line-height:1.05;
}
.kira-hero__sub{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(13px,1.6vw,16px);
  color:var(--muted);letter-spacing:.01em;opacity:.85;max-width:44ch;
}
.kira-petal{position:absolute;pointer-events:none;opacity:0}

/* ── Fleurs décoratives (nouveau système) ── */
.kf{
  position:absolute;pointer-events:none;opacity:0;
  will-change:transform;transform-origin:center center;
  transform:scale(0.82);
}
.kf-bg{
  pointer-events:none;opacity:0;
  will-change:transform;
  transform:scale(0.88);
}

/* ── Séparateur floral ── */
.kira-floral-sep{
  width:100%;max-width:820px;margin:0 auto;
  padding:4px 24px 0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.kira-floral-sep svg{width:100%;height:auto;display:block;overflow:visible}

/* ── Décoration florale footer ── */
.kira-footer-floral{
  text-align:center;margin-bottom:12px;pointer-events:none;
}
.kira-footer-floral svg{width:clamp(160px,30vw,280px);height:auto;overflow:visible;display:inline-block}

/* ══ HERO VIDÉO — visible sur tous écrans ══════════ */

/* ══ GRILLE PRODUITS (homepage) ═════════════════════ */
.kira-collection{
  max-width:var(--max);margin:0 auto;padding:36px 28px 80px;
  position:relative;overflow:visible;
}
.kira-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:28px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.kira-section-head h2{
  font-family:var(--serif);font-size:clamp(14px,2vw,18px);
  font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.kira-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 20px}
.kira-card{display:block;cursor:pointer;transition:transform .35s ease}
.kira-card:hover{transform:translateY(-6px)}
.kira-card__img{position:relative;overflow:hidden;background:#ede8e2;aspect-ratio:4/5}
.kira-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.kira-card:hover .kira-card__img img{transform:scale(1.06)}
.kira-card__badge{position:absolute;top:12px;left:12px;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:4px 10px;border-radius:20px;pointer-events:none}
.kira-card__badge--out{background:rgba(28,28,30,.7);color:#fff}
.kira-card__badge--low{background:rgba(180,130,40,.88);color:#fff}
.kira-card__info{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.kira-card__name{font-family:var(--serif);font-size:clamp(15px,1.4vw,18px);font-weight:400;font-style:italic;color:var(--ink);line-height:1.3}
.kira-card__price{font-size:12px;color:var(--muted);letter-spacing:.05em}
.kira-card__cta{display:inline-block;margin-top:8px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:1px;transition:color .2s,border-color .2s;width:fit-content}
.kira-card:hover .kira-card__cta{color:var(--ink);border-color:var(--ink)}
.kira-skeleton{background:linear-gradient(90deg,#ede8e2 25%,#e4dfd8 50%,#ede8e2 75%);background-size:200% 100%;animation:shimmer 1.4s ease infinite;aspect-ratio:4/5}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ══ PANIER DRAWER ══════════════════════════════════ */
.kira-cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.36);z-index:150;opacity:0;pointer-events:none;transition:opacity .28s}
.kira-cart-overlay.is-open{opacity:1;pointer-events:all}
.kira-cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);background:var(--bg);z-index:160;transform:translateX(100%);transition:transform .42s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column}
.kira-cart-drawer.is-open{transform:translateX(0)}
.kira-cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.kira-cart-head h3{font-family:var(--serif);font-size:22px;font-weight:400;font-style:italic}
.kira-cart-head button{background:none;border:none;cursor:pointer;font-size:24px;color:var(--mut)}
.kira-cart-body{flex:1;overflow-y:auto;padding:18px 24px}
.kira-cart-empty{text-align:center;color:var(--mut);font-family:var(--serif);font-size:17px;font-style:italic;padding:48px 0}
.kira-cart-footer{padding:18px 24px;border-top:1px solid var(--line)}
.kira-cart-total{display:flex;justify-content:space-between;margin-bottom:16px;font-size:13px}
.kira-btn-checkout{display:block;width:100%;padding:15px;text-align:center;background:var(--ink);color:#fff;border:none;cursor:pointer;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--sans);font-weight:500;transition:opacity .18s}
.kira-btn-checkout:hover{opacity:.82}

/* ══ TOAST ══════════════════════════════════════════ */
.toast,.kira-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--ink);color:#fff;padding:11px 22px;border-radius:30px;font-size:12.5px;opacity:0;pointer-events:none;transition:all .26s;z-index:500;white-space:nowrap}
.toast.show,.kira-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══ FOOTER ═════════════════════════════════════════ */
.kira-footer,.site-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px 32px;
  padding:28px 40px;
  background:transparent;
  border-top:0.5px solid rgba(180,60,100,.10);
  margin-top:60px;
}
/* Brand */
.kf-brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.kf-brand img{height:44px;width:auto;opacity:.75}
.kf-brand span{font-family:'Inter',sans-serif;font-size:8.5px;letter-spacing:.13em;color:#a07080;line-height:1.4}
/* Nav center */
.kf-nav{display:flex;flex-direction:column;align-items:center;gap:8px}
.kf-nav a{font-family:'Inter',sans-serif;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#a07080;transition:color .2s}
.kf-nav a:hover{color:#3d0e28}
/* Social right */
.kf-social{display:flex;align-items:center;gap:16px;justify-content:flex-end}
.kf-social a{color:#a07080;transition:color .2s;display:flex;align-items:center}
.kf-social a:hover{color:#3d0e28}
.kira-copyright{
  text-align:center;font-family:'Inter',sans-serif;
  font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(160,112,128,.55);padding:10px 0 16px;background:transparent;
}
@media(max-width:680px){
  .kira-footer,.site-footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
    padding:24px 20px;
    margin-top:40px;
  }
  .kf-brand{align-items:center}
  .kf-brand img{height:36px}
  .kf-brand span{font-size:7.5px;max-width:140px}
  .kf-nav{align-items:center}
  .kf-social{justify-content:center;gap:14px}
  .kf-social a svg{width:16px;height:16px}
}
.kira-footer__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.kira-footer__brand img{height:44px;width:auto;margin-bottom:14px;object-fit:contain;display:block}
.kira-footer__brand p,.kira-footer p{font-size:12px;color:var(--muted,var(--mut));line-height:1.75;max-width:200px}
.kira-footer__col h4{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted,var(--mut));margin-bottom:16px;font-weight:500}
.kira-footer__col ul{list-style:none}
.kira-footer__col li{margin-bottom:10px}
.kira-footer__col a,.kira-footer__social a{font-size:13px;color:var(--ink);transition:color .18s}
.kira-footer__col a:hover,.kira-footer__social a:hover{color:var(--muted,var(--mut))}
.kira-footer__social{display:flex;flex-direction:column;gap:10px}
.kira-footer__bottom{max-width:var(--max);margin:28px auto 0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.kira-footer__bottom p{font-size:11px;color:var(--muted,var(--mut))}

/* ══ STYLES SITE COMPLETS (ex-magazine.css) ═════════ */
/* =========================
   HERO (UNCHANGED)
   ========================= */
.hero--chanel{
  height: 82vh;         
  min-height: 600px;
  max-height: 860px;
}

.hero--chanel .hero-image{
  object-fit: cover;
  object-position: 80% 30%;           /* desktop: droite + remonté pour voir les têtes */
}
@media (max-width: 768px){
  .hero--chanel .hero-image{
    object-position: 77% center;      /* mobile: plus à droite */
  }
}
.hero-content {
  position: absolute;
  bottom: 12%;
  left: 8%;
  max-width: 520px;
  color: #111;
}

.hero-content h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 24px;
}

.hero-cta {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111;
  padding-bottom: 4px;
}


/* Langue dans le menu burger (sous Contact) */
.menu-lang-selector{ display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; }
.menu-lang-btn{
  background:transparent;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:var(--track);
  font-size:12px;
  opacity:.7;
}
.menu-lang-btn:focus,
.menu-lang-btn:focus-visible{
  outline:none;
}
.menu-lang-btn:hover{ opacity:1; }
.menu-lang-btn.active{ opacity:1; font-weight:500; }
/* HERO overlay (Capsule Ramadan + button) */
.hero { position: relative; }

.hero-overlay{
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  color: #fff;
}

.hero-overlay .smallcaps{
  color: rgba(255,255,255,.75);
}

.hero-overlay h1{
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.2;
  margin: 10px 0 18px;
}

.btn-primary{
  display: inline-block;
  background:var(--bg);
  color: #0b0b0b;
  border: 1px solid rgba(11,11,11,.18);
  padding: 12px 22px;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.btn-primary:hover{ opacity: .92; }
/* =========================
   HOME FULL-WIDTH IMAGE + CAPTION
   ========================= */
.home-fullimg{
  width:100%;
  overflow:hidden;
  position:relative;
  line-height:0;
}
.home-fullimg__img{
  width:100%;
  height:clamp(380px,56vw,700px);
  object-fit:cover;
  object-position:center 18%;
  display:block;
}
.home-fullimg__caption{
  position:absolute;
  bottom:28px;
  right:32px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  text-align:right;
}
.home-fullimg__season{
  font-size:9px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}
.home-fullimg__line{
  font-family:var(--ser);
  font-size:clamp(13px,1.4vw,17px);
  font-weight:400;
  color:rgba(255,255,255,.72);
  letter-spacing:.01em;
  line-height:1.4;
  max-width:28ch;
}
@media(max-width:640px){
  .home-fullimg__img{
    height:clamp(280px,100vw,480px);
    object-position:center 12%;
  }
  .home-fullimg__caption{
    bottom:20px;
    right:20px;
  }
  .home-fullimg__line{ font-size:13px; }
}

/* =========================
   HOME BRAND MOMENT — bottom
   ========================= */
.home-brand{
  padding:64px 0 56px;
  text-align:center;
}
.home-brand__text{
  font-family:var(--ser);
  font-size:clamp(22px,3.2vw,36px);
  font-weight:400;
  line-height:1.35;
  color:rgba(11,11,11,.72);
  margin:0 0 28px;
}

/* =========================
   TOPBAR (FIXED WHITE, PRO)
   ========================= */
.topbar{
  position:fixed;top:0;left:0;right:0;
  z-index:90;
  height:96px;
  display:flex;align-items:center;
  background:rgba(250,248,245,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:none;
}
.topbar .wrap{
  max-width:1160px;
  padding-left:28px;
  padding-right:28px;
  width:100%;
  overflow:visible;
}
.topbar .brand img{ height:88px;width:88px;object-fit:contain;display:block; }

.topbar__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:96px;
  padding:0;
  overflow:visible;
}

.topbar__left,.topbar__right{
  display:flex;gap:22px;align-items:center;
}
.topbar__right{justify-content:flex-end}

.brand{
  display:flex;flex-direction:column;align-items:center;
  line-height:1;
}
.brand img{height:88px;width:88px;display:block;object-fit:contain}
.brand .tag{ display:none; }

/* Nav liens directs (desktop) */
.topbar-nav{
  display:flex;gap:32px;align-items:center;
}
.topbar-nav a{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);font-weight:400;transition:color .18s;
}
.topbar-nav a:hover{color:var(--ink)}

/* Hamburger mobile */
.topbar-hamburger{
  display:none;
  flex-direction:column;gap:5px;
  padding:5px;background:none;border:none;cursor:pointer;
}
.topbar-hamburger span{
  display:block;width:20px;height:1.5px;
  background:var(--ink);transition:all .3s;
}

/* Legacy navtext — caché */
.navtext{ display:none; }

.count{
  font-family:var(--sans);
  font-size:12px;
  color:var(--mut);
}

.drawerOverlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.28);
  display:none;
}
.drawer{
  position:fixed; top:0; right:0; height:100%;
  width:min(420px, 92vw);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-left:1px solid var(--line);
  z-index:70;
  transform:translateX(110%);
  transition:transform .22s ease;
}
.drawer[data-open="true"]{transform:translateX(0)}
.drawerOverlay[data-open="true"]{display:block}


.drawer__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px;
  border-bottom:1px solid var(--line);
}
.drawer__body{padding:18px; overflow:auto; height:calc(100% - 66px)}
.x{cursor:pointer; letter-spacing:var(--track); text-transform:uppercase; font-size:12px}
.x:hover{opacity:.85}

.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  border:1px solid rgba(11,11,11,.18);
  background:var(--bg);
  padding:10px 14px;
  font-size:12px;
  letter-spacing:var(--track);
  text-transform:uppercase;
  display:none;
  z-index:90;
}
.toast[data-show="true"]{display:block}
.toast[data-type="error"]{background:#1A1814;color:#fff;border-color:#1A1814}

.pagehead{padding:36px 0 14px}
.pagehead .desc{
  margin-top:16px;
  color:var(--mut);
  font-size:14px;
  line-height:1.8;
  max-width:74ch;
}

.tabs{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:24px;
}
.tab{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:var(--track);
  color:var(--mut);
  border-bottom:1px solid transparent;
  padding-bottom:8px;
  cursor:pointer;
}
.tab[aria-current="true"]{
  color:var(--ink);
  border-bottom-color:rgba(11,11,11,.24);
}
.tab:hover{opacity:.85}

.tabs-layout{
  display:flex;
  gap:0;
  margin-left:auto;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
.layout-btn--icon{
  padding:8px 10px;
}
.layout-btn--icon i{
  font-size:18px;
}
.layout-btn--icon .layout-label{ display:none; }

.grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px 18px;
}

/* Vue collection : 1 colonne (liste) ou 3 colonnes (grille) */
.grid--cols-1{
  grid-template-columns: 1fr;
  gap: 14px 0;
}
.grid--cols-1 .item{
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  text-align: left;
}
.grid--cols-1 .item__img{
  width: 200px;
  flex-shrink: 0;
  aspect-ratio: auto;
  height: 240px;
}
.grid--cols-1 .item .meta{
  margin-top: 0;
}
.grid--cols-2{
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 14px;
}
.grid--cols-2 .item__img{
  aspect-ratio: 3/4;
}
.grid--cols-2 .item .meta{
  margin-top: 8px;
}
@media (max-width: 640px){
  .grid--cols-1 .item{
    flex-direction: column;
    text-align: left;
  }
  .grid--cols-1 .item__img{
    width: 100%;
    height: 280px;
  }
  .grid--cols-2{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }
  .grid--cols-2 .item__img{
    aspect-ratio: 3/4;
  }
  .grid--cols-2 .item .meta{
    margin-top: 6px;
  }
}

/* Boutons vue liste / grille (icônes seules, même ligne que les onglets) */
.layout-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  background:var(--bg);
  color: var(--mut);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.layout-btn i{
  font-size: 18px;
}
.layout-btn:hover{
  color: var(--ink);
  background: rgba(11,11,11,.04);
}
.layout-btn.active{
  background: var(--ink);
  color: var(--bg);
}
.layout-label{
  white-space: nowrap;
}

.item{
  cursor:pointer;
  position:relative;
}
.stock-badge{
  position:absolute;
  top:8px;
  left:8px;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:20px;
  font-weight:600;
  pointer-events:none;
}
.stock-badge.out{
  background:rgba(0,0,0,.65);
  color:#fff;
}
.stock-badge.low{
  background:rgba(180,120,0,.85);
  color:#fff;
}

.stock-info{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.stock-info--in { color:#3a7a3a; }
.stock-info--low{ color:#b47800; }
.stock-info--out{ color:#a00; }

/* ── Image wrapper (nouvelle structure) ── */
.item__img{
  position:relative;
  overflow:hidden;
  background:#F0EDE8;
  aspect-ratio:3/4;
}
.item__img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transition:transform .6s ease;
}
.item:hover .item__img img{
  transform:scale(1.04);
}

/* No-image placeholder */
.item-no-img{
  width:100%;
  height:100%;
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F0EDE8;
}
.item-no-img span{
  font-family:'Inter',sans-serif;
  font-size:8.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(31,29,27,.32);
}

/* Badges (nouvelle classe) */
.item-badge{
  position:absolute;
  top:10px;
  left:10px;
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  padding:3px 10px;
  pointer-events:none;
}
.item-badge--out{background:rgba(20,18,16,.72);color:#fff}
.item-badge--low{background:rgba(166,124,125,.9);color:#fff}

/* ── Legacy: img direct dans .item (ancien markup) ── */
.item > img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  background:var(--bg);
}

.item .meta{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
}
.item .name{
  font-family:var(--ser);
  font-weight:600;
  font-size:16px;
  line-height:1.25;
}
.item .price{
  font-size:12px;
  color:var(--mut);
  letter-spacing:.04em;
}

.filters{
  margin-top:18px;
  display:flex; gap:16px; flex-wrap:wrap;
}
.filters input, .filters select{
  border:0;
  border-bottom:1px solid rgba(11,11,11,.18);
  padding:10px 0;
  background:transparent;
  outline:none;
  font-family:var(--sans);
  font-size:13px;
}
.filters select{min-width:160px}
.filters input{min-width:min(320px, 78vw)}

.pdp{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:26px;
  align-items:start;
  margin-top:24px;
}
.pdp__img img{display:block;max-width:100%;}
.pdp__info{
  padding-top:6px;
}
.pdp__info .smallcaps{margin-bottom:14px}
.pdp__info .price{
  margin-top:12px; color:var(--mut);
  letter-spacing:.04em; font-size:13px;
}
.pdp__info .desc{
  margin-top:16px;
  color:var(--mut);
  font-size:14px;
  line-height:1.85;
}
.row{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px;
}
.selectLine{
  border:0;
  border-bottom:1px solid rgba(11,11,11,.18);
  padding:10px 0;
  background:transparent;
  font-family:var(--sans);
  width:190px;
}
.actions{margin-top:18px; display:flex; gap:18px; flex-wrap:wrap}
.details{
  margin-top:22px;
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--mut);
  font-size:13px;
  line-height:1.7;
}

.cartItem{
  border-bottom:1px solid var(--line);
  padding:14px 0;
  display:grid;
  grid-template-columns: 76px 1fr;
  gap:14px;
}
.cartItem img{width:76px; height:auto; border:1px solid var(--line)}
.qty{
  display:inline-flex; gap:10px; align-items:center;
  font-size:12px; color:var(--mut);
}
.qty button{
  border:0; background:transparent; cursor:pointer;
  font-size:14px; padding:0 6px;
}
.qty button:hover{opacity:.75}

.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:22px;
}

/* =========================
   KIRA SHARED FOOTER
   ========================= */
#KIRA_FOOTER_MOUNT{ margin-top:0; }

/* .kira-footer base styles defined above at line ~293 */
.kira-footer__grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap:40px;
  align-items:start;
}
.kira-footer__brandLink{
  display:inline-block;
  line-height:0;
  margin-bottom:16px;
}
.kira-footer__logo{
  height:40px;
  width:auto;
  display:block;
}
.kira-footer__desc{
  margin:0;
  color:var(--mut);
  font-size:13px;
  line-height:1.85;
  max-width:28ch;
}
.kira-footer__social{
  display:flex;
  gap:16px;
  margin-top:18px;
}
.kira-footer__social a{
  color:var(--mut);
  font-size:20px;
  transition:color .15s;
  line-height:1;
}
.kira-footer__social a:hover{ color:var(--ink); }
.kira-footer__col-title{
  margin-bottom:14px;
  color:var(--mut2);
}
.kira-footer__links{
  margin:0; padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.kira-footer__links a{
  font-size:13px;
  color:var(--mut);
  text-decoration:none;
  transition:color .15s;
}
.kira-footer__links a:hover{ color:var(--ink); }
.kira-footer__bottom{
  margin-top:48px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.kira-footer__copyright{
  font-size:11px;
  color:var(--mut2);
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:768px){
  .kira-footer{
    margin-top:56px;
    padding:32px 24px 20px;
  }
  .kira-footer__grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .kira-footer__brand{
    grid-column:1 / -1;
  }
  .kira-footer__logo{ height:34px; }
}
@media(max-width:480px){
  .kira-footer__grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .kira-footer__bottom{ margin-top:32px; }
}

/* =========================
   SERVICE / POLICIES (minimal, scannable)
   ========================= */
.serviceLead{
  margin-top: 14px;
  color: rgba(11,11,11,.72);
  font-size: 14px;
  line-height: 1.95;
  max-width: 70ch;
}
.serviceGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.serviceCard{
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.serviceCard .desc{
  margin-top: 10px;
  color: rgba(11,11,11,.70);
  font-size: 13px;
  line-height: 1.9;
}
.metaRow{
  margin-top: 12px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--mut);
  font-size: 13px;
}

/* Accordion (soft, accessible) */
.acc{
  border-top: 1px solid rgba(11,11,11,.10);
}
.acc__btn{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap: 18px;
  align-items:center;
  padding: 14px 0;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  color: var(--ink);
}
.acc__btn:focus-visible{
  outline: 2px solid rgba(11,11,11,.22);
  outline-offset: 4px;
}
.acc__q{
  font-family: var(--ser);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
}
.acc__icon{
  color: rgba(11,11,11,.55);
  font-size: 16px;
  line-height: 1;
  transition: transform .22s ease;
}
.acc[data-open="true"] .acc__icon{
  transform: rotate(45deg);
}
.acc__panel{
  overflow:hidden;
  max-height: 0px;
  opacity: 0;
  transition: max-height .22s ease, opacity .18s ease;
}
.acc__a{
  padding: 0 0 14px;
  color: rgba(11,11,11,.70);
  font-size: 13px;
  line-height: 1.9;
  max-width: 72ch;
}

@media (max-width: 820px){
  .serviceGrid{ grid-template-columns: 1fr; }
}

/* =========================
   RESPONSIVE LAYOUT
   ========================= */

@media (max-width:980px){
  :root{ --headerH: 78px; }  /* responsive header height */
  h1{font-size:44px}
  .hero__grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2, 1fr)}
  .pdp{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr}
  .topbar__inner{height:var(--headerH);}
}

@media (max-width:640px){
    .topbar{ height:72px; }
  .topbar .wrap{ padding-left: 16px; padding-right: 16px; }
  .topbar .brand img{ height:54px; }
  .brand img{ height:54px; }
  .topbar-nav{ display:none; }
  .topbar-hamburger{ display:flex; }
  /* kira-header mobile */
  .kira-header__inner{ padding:0 16px; }
  .kira-logo-link img{ height:54px; }

  body{
    padding-top:var(--headerH);
  }

  .wrap{
    padding:0 14px;
  }

  /* Menu : 3 colonnes = Menu | Logo (centre) | Icônes (à droite, pas sur le logo) */
  .topbar__inner{
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0 4px 0 8px;              /* minimum à droite = icônes bien à droite */
    align-items: center;
    gap: 4px;
  }

  .topbar__left{
    justify-content: flex-start;
    min-width: 0;
  }
  .topbar__right{
    justify-content: flex-end;
    gap: 0;                             /* icônes très collées */
    min-width: 0;
    padding-right: 0;
    margin-right: -2px;                 /* encore plus à droite */
  }
  .brand{
    justify-self: center;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-height: 100%;
  }

  .topbar__left .navtext{
    margin-left: 0;
  }

  .topbar__left a{
    display:none;
  }

  .brand img{
    max-height: 45px;                   /* logo réduit pour meilleure proportion */
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .brand .tag{
    font-size: 9px;
    letter-spacing: .18em;
    color: rgba(11,11,11,.7);
  }

  .header-icon{
    gap: 0;
    padding: 2px 0;
    margin-left: 1px;                   /* très collées entre elles */
  }
  .header-icon i{
    font-size: 15px;                    /* un peu moins petit */
  }

  .header-icon .count{
    font-size: 10px;
    transform: translateY(-1px);
  }

  .pagehead{
    padding:26px 0 10px;
  }

  .pagehead .desc{
    font-size:13px;
  }

  .grid{
    grid-template-columns:1fr;
    gap:18px 12px;
  }
  .grid.grid--cols-2{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 10px !important;
  }

  .home-new__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }
  .home-new__grid .item{
    min-width: 0;
  }
  .home-new__media img{
    height: auto;
    max-height: 220px;
    object-fit: contain;
    object-position: center top;
  }

  .pdp{
    gap:18px;
    margin-top:18px;
  }

  .pdp__info .price{
    margin-top:8px;
  }

  .cartItem{
    grid-template-columns:64px 1fr;
    gap:10px;
  }

  .row{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .footer{
    margin-top:40px;
    padding:20px 0;
  }
}

/* assets/css/story.css — luxe editorial spacing (ONLY story page) */
body[data-page="story"]{
  background:var(--bg);
}

/* wrapper / rhythm */
.storyWrap{
  padding: 64px 0 96px;
}

/* super narrow column like luxury editorial */
.storyCol{
  max-width: 760px;
  margin: 0 auto;
}

.storyKicker{
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(11,11,11,.45);
  margin-bottom: 22px;
}

.storyH1{
  font-family: var(--ser, "Georgia", serif);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}

.storyLead{
  margin-top: 24px;
  font-size: 14px;
  line-height: 2.0;
  color: rgba(11,11,11,.70);
  max-width: 62ch;
}

/* luxe separators (more air than lines) */
.storyRule{
  height: 1px;
  background: rgba(11,11,11,.10);
  margin: 56px 0;
}

/* section with left label + right content but SUPER airy */
.storySection{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: start;
  padding: 10px 0;
}

.storyLabel{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(11,11,11,.45);
  padding-top: 6px;
}

.storyText{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 2.0;
  color: rgba(11,11,11,.72);
  max-width: 70ch;
}

/* a single quote as “moment émotion” */
.storyQuote{
  border-left: 1px solid rgba(11,11,11,.18);
  padding-left: 18px;
  margin: 0;
  font-size: 14px;
  line-height: 2.0;
  color: rgba(11,11,11,.78);
}

.storySign{
  display:block;
  margin-top: 14px;
  letter-spacing: .20em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(11,11,11,.45);
}

/* 3 pillars in a single elegant column (NOT cards) */
.pillars{
  display: grid;
  gap: 22px;
  margin-top: 8px;
}
.pillarItem{
  padding: 18px 0;
  border-top: 1px solid rgba(11,11,11,.10);
}
.pillarItem:first-child{ border-top: 0; padding-top: 0; }

.pillarTitle{
  font-family: var(--ser, "Georgia", serif);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
}
.pillarDesc{
  margin: 0;
  font-size: 13px;
  line-height: 1.95;
  color: rgba(11,11,11,.70);
}

/* mini list like editorial notes */
.notes{
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(11,11,11,.10);
}
.notes li{
  padding: 14px 0;
  border-bottom: 1px solid rgba(11,11,11,.10);
  font-size: 13px;
  line-height: 1.9;
  color: rgba(11,11,11,.70);
}
.notes b{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(11,11,11,.80);
}

/* CTA ultra minimal */
.storyCtaRow{
  display:flex;
  flex-wrap:wrap;
  gap: 18px;
  margin-top: 22px;
}

/* mobile */
@media (max-width: 900px){
  .storySection{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .storyRule{ margin: 44px 0; }
  .storyWrap{ padding: 48px 0 80px; }
}
/* HEADER ICONS — LUXE / CHANEL-LIKE */

.header-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 4px;
  color: var(--ink);
  cursor:pointer;
  opacity:.9;
}

.header-icon i{
  font-size:18px;          /* desktop */
  stroke-width:1.2;        /* finesse luxe */
}

.header-icon .count{
  font-size:11px;
  letter-spacing:.08em;
  color: var(--mut);
  transform: translateY(-6px);
}

.header-icon:hover{
  opacity:.7;
}

/* Menu drawer: "Embrace your story" tout en haut */
.menu-tagline{
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* You may also like — 2 colonnes, reste dans le cadre (pas de scroll horizontal) */
.rec-grid{
  overflow: hidden;
}
.rec-grid .item{
  min-width: 0;
  overflow: hidden;
}
.rec-grid .item img{
  aspect-ratio: 3/4;
  object-fit: cover;
  max-width: 100%;
  display: block;
}

@media (max-width: 640px){
  .rec-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
  }
  .rec-grid .item img{
    height: 350px;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
  }
  .rec-grid .item .meta,
  .rec-grid .item .name,
  .rec-grid .item .price{
    font-size: 11px;
  }
}

/* HOME NEW ARRIVALS */
.home-new { padding: 24px 0 48px; }

.home-new__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.home-new__media{
  position: relative;
  overflow: hidden;
}

.home-new__media img{
  width: 100%;
  height: 420px;          /* look "Chanel-like" vertical cards */
  object-fit: cover;
  display: block;
}

/* badges */
.badge{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
}

.badge--soldout{ opacity: .95; }

@media (max-width: 1100px){
  .home-new__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-new__media img{ height: 380px; }
}

@media (max-width: 640px){
  .home-new__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .home-new__media img{
    height: auto;
    max-height: 200px;
    object-fit: contain;
    object-position: center top;
  }
}/* Checkout: bouton toujours visible sur mobile */
.checkout-actions{
  position: sticky;
  bottom: 0;
  z-index: 9999;
  background:var(--bg);
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.checkout-confirm{
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  padding: 14px 16px;
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: 12px;
  cursor: pointer;
}
/* FIX SAFARI IOS CHECKOUT */

.confirm-order-btn{
  border:1px solid #000;
  background:#000;
  color:#fff;
  padding:16px 24px;
  font-size:16px;
  font-weight:500;
  display:block;
  width:100%;
  text-align:center;

  -webkit-text-fill-color:#fff;
  -webkit-appearance:none;
  appearance:none;
}

/* reset safari buttons */

button{
  -webkit-appearance:none;
  appearance:none;
  font:inherit;
}

button span{
  color:inherit;
}

/* ── Collection page ──────────────────────────────────────────── */
.collection-header{
  margin-bottom:0;
}
.collection-banner{
  width:100%; height:480px;
  background: var(--ink) center top/cover no-repeat;
  position:relative;
  overflow:hidden;
}
.collection-banner picture,
.collection-banner img{
  width:100%; height:100%; object-fit:cover;
  object-position:center top; display:block;
}
@media(max-width:680px){
  .collection-banner{ height:280px; }
}

.collection-intro{
  padding-top:32px; padding-bottom:28px;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.collection-intro .smallcaps{
  margin-bottom:10px;
  color:var(--mut2);
}
.collection-title{
  font-family:var(--ser);
  font-size:clamp(28px,5vw,52px);
  font-weight:400;
  margin:0 0 8px;
  line-height:1.1;
}
.collection-subtitle{
  font-size:14px; color:var(--mut);
  margin:0 0 14px;
  font-style:italic;
  letter-spacing:.02em;
}
.collection-desc{
  font-size:14px; line-height:1.8; color:var(--mut);
  max-width:580px; margin:0;
}

.collection-sort-bar{
  display:flex; align-items:center; gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.collection-sort-bar select{
  background:transparent; border:1px solid var(--line);
  border-radius:6px; padding:6px 10px;
  font:inherit; font-size:12px; color:var(--ink);
  cursor:pointer; letter-spacing:.04em;
}

/* Dynamic menu collections */
.menu-collections-group{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:4px;
}
.menu-col-link{
  font-size:14px; color:var(--ink);
  letter-spacing:.04em;
  text-decoration:none;
  padding:2px 0;
}
.menu-col-link:hover{ opacity:.6; }

/* =========================
   SPRING / SUMMER CAMPAIGN
   ========================= */
.ss-campaign{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  padding:112px 0 124px;
  border-top:1px solid rgba(11,11,11,.05);
  border-bottom:1px solid rgba(11,11,11,.05);
}

/* Editorial off-center text column */
.ss-inner{
  position:relative;
  z-index:2;
  max-width:520px;
  padding:0 22px;
  /* Slightly right of left-center — editorial asymmetry */
  margin:0 auto 0 clamp(32px, 16%, 220px);
  text-align:left;
}
@media(max-width:860px){
  .ss-inner{
    margin:0 auto;
    text-align:center;
  }
}

/* Botanical illustrations — positioned from corners */
.ss-flora{
  position:absolute;
  pointer-events:none;
  color:var(--ink);
  opacity:0;
  z-index:1;
}
.ss-flora--tl{
  top:-16px;
  left:-16px;
  width:clamp(130px,16vw,210px);
}
.ss-flora--tr{
  top:-8px;
  right:-8px;
  width:clamp(100px,12vw,165px);
}
.ss-flora--br{
  bottom:-16px;
  right:-8px;
  width:clamp(140px,18vw,230px);
}

/* Entry keyframes — florals drift in at very low opacity */
@keyframes ss-tl{
  from{ opacity:0; transform:translate(-16px,-16px); }
  to  { opacity:.07; transform:translate(0,0); }
}
@keyframes ss-tr{
  from{ opacity:0; transform:translate(12px,-12px); }
  to  { opacity:.05; transform:translate(0,0); }
}
@keyframes ss-br{
  from{ opacity:0; transform:translate(14px,14px); }
  to  { opacity:.08; transform:translate(0,0); }
}

/* Text elements: start invisible, slide up */
.ss-kicker,
.ss-title,
.ss-lead,
.ss-link{
  opacity:0;
  transform:translateY(11px);
  transition:opacity .95s ease, transform .95s ease;
}

/* Triggered when IntersectionObserver adds .is-visible */
.ss-campaign.is-visible .ss-flora--tl{
  animation:ss-tl 2.8s cubic-bezier(.16,.82,.3,1) forwards;
  animation-delay:.08s;
}
.ss-campaign.is-visible .ss-flora--tr{
  animation:ss-tr 2.5s cubic-bezier(.16,.82,.3,1) forwards;
  animation-delay:.38s;
}
.ss-campaign.is-visible .ss-flora--br{
  animation:ss-br 3.0s cubic-bezier(.16,.82,.3,1) forwards;
  animation-delay:.55s;
}
.ss-campaign.is-visible .ss-kicker{ opacity:1; transform:translateY(0); transition-delay:.18s; }
.ss-campaign.is-visible .ss-title { opacity:1; transform:translateY(0); transition-delay:.42s; }
.ss-campaign.is-visible .ss-lead  { opacity:1; transform:translateY(0); transition-delay:.64s; }
.ss-campaign.is-visible .ss-link  { opacity:1; transform:translateY(0); transition-delay:.84s; }

/* Typography */
.ss-kicker{
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(11,11,11,.36);
  margin:0 0 22px;
}
.ss-title{
  font-family:var(--ser);
  font-size:clamp(46px,6.5vw,80px);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:.98;
  margin:0 0 26px;
  color:var(--ink);
}
.ss-lead{
  font-size:14px;
  color:rgba(11,11,11,.52);
  letter-spacing:.02em;
  line-height:2.0;
  max-width:40ch;
  margin:0 0 32px;
}
.ss-link{
  display:inline-block;
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid rgba(11,11,11,.22);
  padding-bottom:4px;
  transition:opacity .2s;
}
.ss-link:hover{ opacity:.55; }

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion:reduce){
  .ss-flora--tl,
  .ss-flora--tr,
  .ss-flora--br{
    animation:none !important;
    opacity:.06 !important;
  }
  .ss-kicker,
  .ss-title,
  .ss-lead,
  .ss-link{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

@media (max-width:640px){
  .ss-campaign{ padding:80px 0 88px; }
  .ss-flora--tl{ width:110px; }
  .ss-flora--tr{ width:84px; }
  .ss-flora--br{ width:128px; }
}

/* Hero → SS campaign: soft bottom fade on hero image */
.hero--chanel::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:120px;
  background:linear-gradient(to bottom, transparent, #faf9f6);
  pointer-events:none;
  z-index:2;
}