/*
Theme Name: ISDAAL
Theme URI: https://isdaal.dz
Author: ISDAAL
Description: Thème boutique ISDAAL — abayas de luxe. Bilingue français / arabe, paiement à la livraison, 56 wilayas.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: isdaal
*/

/* ============================================================
   ISDAAL — luxury abaya house
   Design tokens
   ============================================================ */
:root{
  color-scheme: light;

  --cream:#faf7f2;
  --sand:#f0e9df;
  --beige:#e4dacb;
  --ink:#0b0a09;
  --ink-2:#221f1b;
  --body:#57514a;
  --muted:#8f8779;
  --line:rgba(11,10,9,.13);
  --line-soft:rgba(11,10,9,.07);
  --on-dark:#f4f1ea;
  --on-dark-soft:#a9a193;

  --serif:'Bodoni Moda',"Didot","Bodoni 72","Times New Roman",serif;
  --mark:'Bodoni Moda',"Didot","Bodoni 72","Times New Roman",serif;
  --label:'Jost',"Futura","Century Gothic",sans-serif;
  --ar-display:'Amiri',"Times New Roman",serif;
  --ar:'Tajawal',"Segoe UI",system-ui,sans-serif;

  --gut:22px;
  --shell:1360px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --hdr:72px;

  --logo:url(assets/img/logo.png);
}
@media (min-width:900px){ :root{ --gut:clamp(34px,5vw,80px); --hdr:86px; } }

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--ar);
  font-weight:300;
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.isd[dir="rtl"]{ direction:rtl; }
.isd[dir="ltr"]{ direction:ltr; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

/* ---------- type primitives ---------- */
.mark{ font-family:var(--mark); font-weight:200; text-transform:uppercase; }
.eyebrow{
  font-family:var(--label); font-weight:300; font-size:10px;
  letter-spacing:.42em; text-transform:uppercase; color:var(--muted);
}
.h-ar{
  font-family:var(--ar-display); font-weight:400; color:var(--ink);
  line-height:1.6; letter-spacing:0;
  font-size:clamp(30px,8.2vw,48px);
}
.h-en{ font-family:var(--serif); font-weight:300; color:var(--ink); line-height:1.2; }
.lede{ font-size:14.5px; line-height:2.05; color:var(--body); font-weight:300; }
.rule{ width:26px; height:1px; background:var(--ink); opacity:.5; }

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- scroll reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); }
.rv-in{
  opacity:1; transform:none;
  transition:opacity 1.05s var(--ease), transform 1.15s var(--ease);
}

.isd[dir="ltr"]{ --ar:'Jost',"Helvetica Neue",sans-serif; --ar-display:var(--serif); }
.isd[dir="ltr"] .link-q::after,
.isd[dir="ltr"] .card__go::after,
.isd[dir="ltr"] .hero__cta::after,
.isd[dir="ltr"] .hdr__nav a::after{ transform-origin:left; }
.isd[dir="ltr"] .hero__cta svg,
.isd[dir="ltr"] .card__go svg{ transform:scaleX(-1); }
.isd[dir="ltr"] .hero__cta:hover svg{ transform:scaleX(-1) translateX(-5px); }

/* language switch */
.lang{
  font-family:var(--label); font-size:11px; font-weight:400;
  letter-spacing:.18em; color:var(--ink); padding:6px 2px;
  position:relative; line-height:1;
}
.lang::after{
  content:""; position:absolute; inset-inline:0; bottom:2px; height:1px;
  background:currentColor; opacity:.35; transition:opacity .35s var(--ease);
}
.lang:hover::after{ opacity:1; }
.menu__foot .lang{ letter-spacing:.28em; font-size:10px; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:80;
  height:var(--hdr);
  display:flex; align-items:center;
  transition:background .6s var(--ease-soft), box-shadow .6s var(--ease-soft), height .5s var(--ease);
}
.hdr::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--line); opacity:0; transition:opacity .6s var(--ease-soft);
}
.hdr[data-stuck="true"]{
  background:rgba(250,247,242,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  backdrop-filter:saturate(1.4) blur(16px);
}
.hdr[data-stuck="true"]::after{ opacity:1; }
.hdr__in{
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.hdr__side{ display:flex; align-items:center; gap:18px; }
.hdr__side--end{ justify-content:flex-end; }
.icon{
  width:34px; height:34px; display:grid; place-items:center;
  color:var(--ink); transition:opacity .35s var(--ease);
}
.icon:hover,.icon:active{ opacity:.5; }
.icon svg{ width:19px; height:19px; }
.wordmark{
  display:block; color:var(--ink);
  width:clamp(124px,33vw,152px); aspect-ratio:900/200;
  background-color:currentColor;
  -webkit-mask:var(--logo) center/contain no-repeat;
  mask:var(--logo) center/contain no-repeat;
  transition:opacity .4s var(--ease);
}
.wordmark:hover{ opacity:.62; }
.cart{ position:relative; }
.cart__n{
  position:absolute; inset-block-start:-1px; inset-inline-start:-1px;
  min-width:15px; height:15px; padding:0 4px; border-radius:9px;
  background:var(--ink); color:var(--cream);
  font-family:var(--label); font-size:9px; font-weight:400; letter-spacing:0;
  display:grid; place-items:center; line-height:1;
}
.icon--acct{ display:none; }
.hdr__nav{ display:none; }
@media (min-width:900px){
  .icon--acct{ display:grid; }
  .hdr__nav{
    display:flex; gap:30px; font-size:12.5px; color:var(--ink-2);
    letter-spacing:.2px;
  }
  .hdr__nav a{ position:relative; padding-block:4px; }
  .hdr__nav a::after{
    content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:right;
    transition:transform .55s var(--ease);
  }
  .hdr__nav a:hover::after{ transform:scaleX(1); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; background:var(--cream);
  padding-top:var(--hdr);
}
.hero__in{ position:relative; }

.stage{
  position:relative; overflow:hidden;
  container-type:inline-size;
  background:#dedbd5;
  height:calc(100svh - var(--hdr));
  min-height:520px;
}
.stage__layer{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.5s var(--ease-soft);
}
.stage__layer[data-on="true"]{ opacity:1; }
.stage__img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.015); will-change:transform;
}
.stage__layer[data-on="true"] .stage__img{
  animation:kenburns 11s var(--ease-soft) forwards;
}
@keyframes kenburns{ from{ transform:scale(1.015);} to{ transform:scale(1.085);} }

/* the wordmark lives between the photo and the cut-out model */
.stage__mark{
  position:absolute; top:26.5%; left:50%;
  z-index:2; pointer-events:none;
  width:80cqw; aspect-ratio:900/200;
  background-color:#fffefc;
  -webkit-mask:var(--logo) center/contain no-repeat;
  mask:var(--logo) center/contain no-repeat;
  filter:drop-shadow(0 2px 18px rgba(11,10,9,.5)) drop-shadow(0 14px 60px rgba(11,10,9,.32));
  opacity:0; transform:translate(-50%,14px);
  animation:markIn 1.9s var(--ease) .35s forwards;
}
@keyframes markIn{ to{ opacity:1; transform:translate(-50%,0); } }
.stage__pool{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(115% 30% at 50% 32%, rgba(11,10,9,.44) 0%, rgba(11,10,9,.24) 45%, rgba(11,10,9,0) 78%);
}
/* cut-out of the model, framed identically to slide 01 */
.stage__cut{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; object-fit:cover; object-position:center;
  pointer-events:none;
  opacity:0; transition:opacity 1.5s var(--ease-soft);
}
.stage__cut[data-on="true"]{ opacity:1; }
.stage__veil{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,9,.14) 0%,rgba(11,10,9,0) 22%,rgba(11,10,9,0) 40%,rgba(11,10,9,.60) 92%);
}

.hero__copy{
  position:absolute; z-index:5; inset-inline:var(--gut); bottom:98px;
  pointer-events:none;
}
.hero__copy a{ pointer-events:auto; }
.hero__slide{
  position:absolute; inset-inline:0; bottom:0;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity 1s var(--ease), transform 1.1s var(--ease);
}
.hero__slide[data-on="true"]{ opacity:1; transform:none; pointer-events:auto; }
.hero__k{ font-family:var(--mark); font-size:9.5px; letter-spacing:.42em; text-transform:uppercase; color:rgba(244,241,234,.82); }
.hero__t{
  font-family:var(--ar-display); font-weight:400; color:#fbfaf8;
  font-size:clamp(33px,9.2vw,50px); line-height:1.5; margin:14px 0 0;
  letter-spacing:0; text-wrap:balance;
}
.hero__s{ margin:12px 0 0; font-size:13.5px; line-height:1.95; color:rgba(244,241,234,.76); max-width:32ch; font-weight:300; }
.hero__cta{
  display:inline-flex; align-items:center; gap:12px; margin-top:24px;
  color:#fbfaf8; font-size:12.5px; letter-spacing:.16em; padding-bottom:9px;
  position:relative;
}
.hero__cta::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:rgba(251,250,248,.55);
  transform-origin:right; transition:transform .7s var(--ease), background .4s ease;
}
.hero__cta:hover::after{ transform:scaleX(.42); background:#fbfaf8; }
.hero__cta svg{ width:15px; height:15px; transition:transform .55s var(--ease); }
.hero__cta:hover svg{ transform:translateX(-5px); }


.scrollcue{
  position:absolute; z-index:6; bottom:38px; inset-inline-start:50%;
  transform:translateX(50%); display:none; flex-direction:column; align-items:center; gap:8px;
}
.scrollcue i{ display:block; width:1px; height:44px; background:linear-gradient(180deg,rgba(251,250,248,.9),transparent); }

@media (min-width:900px){
  .hero__in{
    display:grid; grid-template-columns:1fr minmax(380px,470px);
    align-items:center; gap:clamp(40px,6vw,96px);
    max-width:var(--shell); margin-inline:auto;
    padding:clamp(28px,4vh,56px) var(--gut) clamp(52px,7vh,96px);
  }
  .stage{ height:min(80vh,780px); min-height:600px; grid-column:2; grid-row:1; }
  .stage__veil{ background:linear-gradient(180deg,rgba(11,10,9,.10) 0%,rgba(11,10,9,0) 30%,rgba(11,10,9,0) 62%,rgba(11,10,9,.34) 100%); }
  .stage__mark{ width:74cqw; top:25%; }
  .hero__copy{
    position:relative; inset:auto; grid-column:1; grid-row:1;
    min-height:330px; display:flex; align-items:center;
  }
  .hero__slide{ position:absolute; }
  .hero__k{ color:var(--muted); }
  .hero__t{ color:var(--ink); font-size:clamp(42px,4.2vw,60px); }
  .hero__s{ color:var(--body); font-size:14.5px; }
  .hero__cta{ color:var(--ink); }
  .hero__cta::after{ background:var(--line); }
  .hero__cta:hover::after{ background:var(--ink); }
  .scrollcue{ display:flex; }
}

/* ============================================================
   BRAND LINE
   ============================================================ */
.brandline{ border-block:1px solid var(--line-soft); background:var(--cream); }
.brandline__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-block:20px; overflow-x:auto; scrollbar-width:none;
}
.brandline__in::-webkit-scrollbar{ display:none; }
.brandline span{
  font-family:var(--label); font-size:9.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

/* ============================================================
   COLLECTION
   ============================================================ */
.sec{ padding-block:clamp(64px,11vw,132px); }
.sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(32px,6vw,60px); }
.sec__head h2{ margin:10px 0 0; }
.link-q{ position:relative; font-size:12.5px; color:var(--ink-2); white-space:nowrap; padding-bottom:5px; }
.link-q::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--line);
  transform-origin:right; transition:transform .6s var(--ease), background .4s ease;
}
.link-q:hover::after{ transform:scaleX(.4); background:var(--ink); }

.grid{ display:grid; gap:clamp(38px,8vw,64px); }
@media (min-width:820px){
  .grid{ grid-template-columns:1fr 1fr; gap:clamp(34px,4vw,58px) clamp(28px,3.4vw,48px); }
  .card:nth-child(even){ margin-top:clamp(40px,7vw,104px); }
}

.card{ position:relative; }
.card__media{
  position:relative; overflow:hidden; border-radius:4px;
  aspect-ratio:3/4; background:var(--beige);
  box-shadow:0 30px 60px -34px rgba(11,10,9,.42), 0 4px 14px -8px rgba(11,10,9,.16);
  transition:transform .8s var(--ease), box-shadow .8s var(--ease);
}
.card:hover .card__media{ transform:translateY(-8px); box-shadow:0 46px 78px -38px rgba(11,10,9,.5), 0 6px 18px -10px rgba(11,10,9,.18); }
.card__img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.card:hover .card__img{ transform:scale(1.055); }
.card__tag{
  position:absolute; inset-block-start:14px; inset-inline-end:14px;
  background:rgba(250,247,242,.93); color:var(--ink);
  font-family:var(--label); font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  padding:7px 13px; border-radius:2px;
}
.card__body{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 4px 0; }
.card__name{ font-family:var(--ar-display); font-weight:400; font-size:21px; color:var(--ink); margin:0; line-height:1.5; }
.card__coll{ font-family:var(--label); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin:6px 0 0; }
.card__price{ direction:ltr; font-family:var(--mark); font-weight:300; font-size:14px; letter-spacing:.08em; color:var(--ink); white-space:nowrap; padding-top:3px; }
.card__go{
  margin-top:14px; display:inline-flex; align-items:center; gap:9px;
  font-size:12px; color:var(--ink-2); padding-bottom:6px; position:relative;
}
.card__go::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--line);
  transform-origin:right; transition:transform .6s var(--ease), background .4s ease;
}
.card:hover .card__go::after{ transform:scaleX(.34); background:var(--ink); }
.card__go svg{ width:14px; height:14px; }

/* ============================================================
   FABRIC — dark editorial
   ============================================================ */
.fabric{ background:var(--ink); color:var(--on-dark); }
.fabric__in{ padding-block:clamp(64px,11vw,132px); }
.fabric__media{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:3/4; background:#171512; }
.fabric__media img{ width:100%; height:100%; object-fit:cover; }
.fabric__copy{ padding-top:clamp(30px,7vw,0px); }
.fabric .eyebrow{ color:var(--on-dark-soft); }
.fabric h2{ font-family:var(--ar-display); color:#fbfaf8; margin:12px 0 0; font-size:clamp(31px,8.4vw,50px); font-weight:400; line-height:1.6; }
.fabric p{ color:var(--on-dark-soft); margin:18px 0 0; max-width:46ch; }
@media (min-width:820px){
  .fabric__in{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(40px,6vw,90px); }
  .fabric__copy{ padding-top:0; }
}

/* ============================================================
   PACKAGING
   ============================================================ */
.pack{ background:var(--sand); }
.pack__in{ padding-block:clamp(64px,11vw,132px); }
.pack__media{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/3; background:var(--beige); box-shadow:0 40px 80px -46px rgba(11,10,9,.5); }
.pack__media img{ width:100%; height:100%; object-fit:cover; }
.pack__copy{ padding-top:clamp(30px,7vw,0px); }
.pack h2{ margin:12px 0 0; }
.pack p{ margin:18px 0 0; max-width:44ch; }
.notes{ margin:clamp(26px,5vw,36px) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:13px; }
.notes li{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--ink-2); }
.notes svg{ width:13px; height:13px; flex:none; color:var(--muted); }
@media (min-width:820px){
  .pack__in{ display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:clamp(40px,6vw,90px); }
  .pack__copy{ padding-top:0; }
  .pack__media{ order:2; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.voices{ background:var(--cream); overflow:hidden; }
.rail{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gut); padding-bottom:8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-padding-inline-start:var(--gut);
}
.rail::-webkit-scrollbar{ display:none; }
.voice{
  scroll-snap-align:start; flex:0 0 82%; max-width:420px;
  background:#fffdfa; border:1px solid var(--line-soft); border-radius:4px;
  padding:clamp(26px,6vw,34px);
  box-shadow:0 24px 50px -36px rgba(11,10,9,.32);
  display:flex; flex-direction:column;
}
.stars{ display:flex; gap:3px; color:var(--ink); }
.stars svg{ width:12px; height:12px; }
.voice blockquote{
  margin:16px 0 0; font-family:var(--ar-display); font-weight:400;
  font-size:18px; line-height:1.95; color:var(--ink-2);
}
.voice figcaption{ margin-top:auto; padding-top:20px; display:flex; align-items:baseline; gap:10px; }
.voice cite{ font-style:normal; font-size:13.5px; color:var(--ink); }
.voice small{ font-family:var(--label); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.rating{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.rating span{ font-size:12.5px; color:var(--muted); }
@media (min-width:820px){ .voice{ flex-basis:min(380px,34%); } }

/* ============================================================
   NEWSLETTER + FOOTER
   ============================================================ */
.news{ background:var(--ink); color:var(--on-dark); }
.news__in{ padding-block:clamp(58px,10vw,104px); text-align:center; }
.news h2{ font-family:var(--ar-display); color:#fbfaf8; font-weight:400; font-size:clamp(27px,7vw,42px); line-height:1.65; margin:12px 0 0; }
.news form{ display:flex; align-items:center; gap:14px; max-width:400px; margin:clamp(26px,5vw,36px) auto 0; border-bottom:1px solid rgba(244,241,234,.26); padding-bottom:12px; }
.news input{
  flex:1; background:none; border:0; color:#fbfaf8; font:inherit; font-size:13.5px; padding:2px 0;
}
.news input::placeholder{ color:#7c7466; }
.news input:focus{ outline:none; }
.news button{ font-family:var(--label); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:#fbfaf8; transition:opacity .35s ease; }
.news button:hover{ opacity:.6; }
.news small{ display:block; margin-top:16px; font-size:11.5px; color:#6f6759; }

.foot{ background:var(--ink); color:var(--on-dark-soft); border-top:1px solid rgba(244,241,234,.10); }
.foot__in{ padding-block:clamp(46px,8vw,80px); }
.foot__cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; }
.foot h3{ font-family:var(--label); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; font-weight:300; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot a{ font-size:13px; transition:color .35s ease; }
.foot a:hover{ color:#fbfaf8; }
.foot__end{ margin-top:clamp(38px,7vw,64px); padding-top:26px; border-top:1px solid rgba(244,241,234,.10); text-align:center; }
.foot__mark{
  width:168px; aspect-ratio:900/200; margin-inline:auto;
  background-color:#fbfaf8;
  -webkit-mask:var(--logo) center/contain no-repeat;
  mask:var(--logo) center/contain no-repeat;
}
.social{ display:flex; justify-content:center; gap:22px; margin-top:22px; }
.social a{ color:var(--muted); transition:color .35s ease; }
.social a:hover{ color:#fbfaf8; }
.social svg{ width:17px; height:17px; }
.foot__fine{ margin-top:24px; font-size:11px; line-height:2; color:#6f6759; }
@media (min-width:820px){ .foot__cols{ grid-template-columns:repeat(4,1fr); } }

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.menu{
  position:fixed; inset:0; z-index:95; background:var(--cream);
  display:flex; flex-direction:column; padding:0 var(--gut) 40px;
  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease);
  visibility:hidden;
}
.menu[data-open="true"]{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__top{ height:var(--hdr); display:flex; align-items:center; justify-content:space-between; }
.menu__list{ list-style:none; margin:auto 0; padding:0; display:flex; flex-direction:column; gap:clamp(14px,3.4vw,22px); }
.menu__list a{
  font-family:var(--ar-display); font-weight:400; color:var(--ink);
  font-size:clamp(32px,9.4vw,56px); line-height:1.45; display:inline-block;
  opacity:0; transform:translateY(22px);
}
.menu[data-open="true"] .menu__list a{ animation:menuIn .8s var(--ease) forwards; }
.menu__list li:nth-child(1) a{ animation-delay:.12s; }
.menu__list li:nth-child(2) a{ animation-delay:.19s; }
.menu__list li:nth-child(3) a{ animation-delay:.26s; }
.menu__list li:nth-child(4) a{ animation-delay:.33s; }
.menu__list li:nth-child(5) a{ animation-delay:.40s; }
@keyframes menuIn{ to{ opacity:1; transform:none; } }
.menu__foot{ display:flex; gap:22px; font-family:var(--label); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }


/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pdp{ background:var(--cream); padding-top:var(--hdr); }
.pdp[hidden]{ display:none !important; }
body.is-pdp .site-main{ display:none; }

.pdp__crumb{
  display:flex; align-items:center; gap:10px;
  padding:18px var(--gut) 6px; max-width:var(--shell); margin-inline:auto;
  font-family:var(--label); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}
.pdp__back{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); }
.pdp__back svg{ width:15px; height:15px; }
.isd[dir="ltr"] .pdp__back svg{ transform:scaleX(-1); }

.pdp__top{ max-width:var(--shell); margin-inline:auto; padding:6px var(--gut) 0; }

/* gallery */
.gal__stage{
  position:relative; aspect-ratio:2/3; overflow:hidden; border-radius:4px;
  background:var(--beige);
  box-shadow:0 30px 60px -34px rgba(11,10,9,.4);
}
.gal__stage img{ width:100%; height:100%; object-fit:cover; }
.gal__count{
  position:absolute; inset-block-end:12px; inset-inline-end:12px;
  background:rgba(11,10,9,.72); color:#fbfaf8;
  font-family:var(--label); font-size:10px; letter-spacing:.16em;
  padding:5px 10px; border-radius:2px; direction:ltr;
}
.gal__thumbs{ display:flex; gap:9px; margin-top:12px; }
.gal__thumbs button{
  flex:0 0 62px; aspect-ratio:2/3; overflow:hidden; border-radius:3px;
  opacity:.42; transition:opacity .4s var(--ease); background:var(--beige);
}
.gal__thumbs button[aria-current="true"]{ opacity:1; }
.gal__thumbs img{ width:100%; height:100%; object-fit:cover; }

/* buy box */
.buy{ padding-top:30px; }
.buy__coll{ font-family:var(--label); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); }
.buy__name{ font-family:var(--ar-display); font-weight:400; color:var(--ink); font-size:clamp(28px,7.6vw,40px); line-height:1.4; margin:8px 0 0; }
.buy__price{ display:flex; align-items:baseline; gap:13px; margin-top:14px; flex-wrap:wrap; }
.buy__now{ font-family:var(--mark); font-size:clamp(26px,6.4vw,32px); color:var(--ink); line-height:1; direction:ltr; }
.buy__cod{
  font-family:var(--label); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--line); padding:6px 11px; border-radius:2px; white-space:nowrap;
}
.buy__desc{ margin:16px 0 0; font-size:14px; line-height:2; color:var(--body); max-width:44ch; }


.buy__cta{
  width:100%; min-height:56px; margin-top:22px; background:var(--ink); color:var(--cream);
  font-family:var(--label); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  border-radius:3px; transition:opacity .3s ease;
}
.buy__cta:hover{ opacity:.86; }
.assur{ list-style:none; margin:clamp(24px,4vw,32px) 0 0; padding:clamp(20px,3.5vw,26px) 0 0; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:13px; }
.assur li{ display:flex; align-items:center; gap:11px; font-size:13px; color:var(--ink-2); }
.assur svg{ width:15px; height:15px; flex:none; color:var(--muted); }

@media (min-width:900px){
  .pdp__top{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
  .gal{ position:sticky; top:calc(var(--hdr) + 18px); }
  .buy{ padding-top:6px; }
}



/* order form */
.order{ background:transparent; scroll-margin-top:calc(var(--hdr) + 14px); }
.order__in{ max-width:none; padding:clamp(30px,6vw,40px) 0 0; margin-top:clamp(26px,5vw,34px); border-top:1px solid var(--line-soft); }
.order__head{ margin-bottom:clamp(22px,4vw,30px); }
.order__head h2{ font-family:var(--ar-display); font-weight:400; color:var(--ink); font-size:clamp(26px,6.6vw,38px); line-height:1.5; margin:9px 0 0; }
.order__head p{ margin:12px 0 0; font-size:13.5px; color:var(--body); }
.form{ display:grid; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--label); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.field input, .field select{
  width:100%; min-height:52px; padding:0 15px;
  background:#fffdfa; border:1px solid var(--line); border-radius:3px;
  font-family:inherit; font-size:15px; color:var(--ink);
  transition:border-color .3s ease;
}
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 49%,var(--muted) 50%),linear-gradient(-45deg,transparent 49%,var(--muted) 50%); background-size:6px 6px; background-position:calc(100% - 20px) 24px, calc(100% - 14px) 24px; background-repeat:no-repeat; }
.isd[dir="rtl"] .field select{ background-position:20px 24px, 14px 24px; }
.field input:focus, .field select:focus{ outline:none; border-color:var(--ink); }
.field select:disabled{ opacity:.5; cursor:not-allowed; }
.field[data-bad="true"] input, .field[data-bad="true"] select{ border-color:#9a3d2e; }
.err{ font-size:11.5px; color:#9a3d2e; min-height:0; }
.field[data-bad="true"] .err{ min-height:16px; }
.field--phone input{ direction:ltr; text-align:start; }
.two{ display:grid; gap:16px; }
@media (min-width:640px){ .two{ grid-template-columns:1fr 1fr; } }

.qty{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:3px; background:#fffdfa; width:fit-content; }
.qty button{ width:52px; height:52px; display:grid; place-items:center; color:var(--ink); font-size:18px; }
.qty output{ min-width:44px; text-align:center; font-family:var(--mark); font-size:17px; }

.recap{ margin-top:8px; padding:20px; background:#f7f3ec; border-radius:4px; display:flex; flex-direction:column; gap:11px; }
.recap div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:13.5px; color:var(--body); }
.recap div span:last-child{ font-family:var(--mark); font-size:15px; color:var(--ink); direction:ltr; }
.recap .tot{ border-top:1px solid var(--line); padding-top:12px; margin-top:2px; }
.recap .tot span:first-child{ color:var(--ink); font-size:14px; }
.recap .tot span:last-child{ font-size:21px; }
.order__submit{
  width:100%; min-height:58px; background:var(--ink); color:var(--cream);
  font-family:var(--label); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  border-radius:3px; margin-top:6px; transition:opacity .3s ease;
}
.order__submit:hover{ opacity:.86; }
.order__note{ text-align:center; margin:14px 0 0; font-size:12px; color:var(--muted); }
.done{ text-align:center; padding:34px 20px; background:#f7f3ec; border-radius:4px; }
.done svg{ width:34px; height:34px; color:var(--ink); }
.done h3{ font-family:var(--ar-display); font-weight:400; font-size:24px; color:var(--ink); margin:14px 0 0; }
.done p{ margin:10px 0 0; font-size:13.5px; color:var(--body); }

/* sticky buy bar on phones */
.bar{
  position:fixed; inset-inline:0; bottom:0; z-index:75;
  display:flex; align-items:center; gap:14px;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:rgba(250,247,242,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .55s var(--ease);
}
.bar[data-on="true"]{ transform:none; }
.bar__p{ font-family:var(--mark); font-size:19px; color:var(--ink); direction:ltr; }
.bar button{
  margin-inline-start:auto; background:var(--ink); color:var(--cream);
  min-height:46px; padding:0 26px; border-radius:3px;
  font-family:var(--label); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
@media (min-width:900px){ .bar{ display:none; } }

/* ============================================================
   MOTION PREFERENCE
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
  .stage__mark{ opacity:1; transform:translate(-50%,0); }
}