/* ============================================================
   SHECA COLLECTION — design system
   Palette : plum / brass / blush on warm porcelain
   Display : Italiana   Body : Jost
   ============================================================ */
:root{
  --noir:#17101A;
  --plum:#43132F;
  --plum-deep:#2C0C1F;
  --wine:#8C1F45;
  --rose:#D98CA0;
  --blush:#F7E3E6;
  --porcelain:#FBF6F2;
  --brass:#C9A66B;
  --brass-dim:#9C7A42;
  --muted:#8C7A80;
  --line:#E8DAD6;
  --ok:#2F7A55;
  --warn:#B4642A;
  --err:#B3243C;
  --r:3px;
  --shadow:0 18px 44px rgba(44,12,31,.14);
  --shadow-sm:0 6px 18px rgba(44,12,31,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  background:var(--porcelain);color:var(--noir);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
  -webkit-tap-highlight-color:transparent;      /* no grey flash on tap (iOS) */
  -webkit-overflow-scrolling:touch;             /* momentum scrolling (iOS) */
  /* respect the iPhone notch and home-bar so nothing hides behind them */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
/* normalise text fields but keep the dropdown arrow on selects */
input:not([type=checkbox]):not([type=radio]),textarea{-webkit-appearance:none;appearance:none}
select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2343132F' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
h1,h2,h3,.display{font-family:'Italiana',Didot,'Times New Roman',serif;font-weight:400;letter-spacing:.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-dim);font-weight:500}
.muted{color:var(--muted)}
.hide{display:none !important}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;background:var(--plum);color:#fff;border-radius:999px;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  position:relative;overflow:hidden;transition:background .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--plum-deep);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .6s var(--ease);
}
.btn:hover::after{left:130%}
.btn.ghost{background:transparent;color:var(--plum);border:1px solid var(--plum)}
.btn.ghost:hover{background:var(--plum);color:#fff}
.btn.brass{background:var(--brass);color:var(--plum-deep)}
.btn.brass:hover{background:var(--brass-dim);color:#fff}
.btn.sm{padding:9px 16px;font-size:10px;letter-spacing:.1em}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.link{color:var(--wine);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- forms ---------- */
label.f{display:block;margin-bottom:14px}
label.f > span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--plum);outline:none}
textarea{min-height:96px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.err-msg{color:var(--err);font-size:13px;margin:6px 0}
.ok-msg{color:var(--ok);font-size:13px;margin:6px 0}

/* ---------- announcement marquee ---------- */
.topbar{background:var(--plum-deep);color:var(--blush);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:9px 0;overflow:hidden;white-space:nowrap}
.marquee{display:inline-block;padding-left:100%;animation:marquee 34s linear infinite}
.marquee span{margin:0 34px;opacity:.9}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(251,246,242,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)}
.head{display:flex;align-items:center;gap:22px;padding:14px 24px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px}
.brand svg{width:38px;height:38px;flex-shrink:0}
.brand-txt{line-height:1}
.brand-txt b{font-family:'Italiana',serif;font-size:22px;letter-spacing:.22em;color:var(--plum);font-weight:400;display:block}
.brand-txt i{font-style:normal;font-size:8.5px;letter-spacing:.42em;color:var(--muted);display:block;margin-top:3px}
nav.main{display:flex;gap:26px;margin-left:12px}
.nav-head{display:none}
.mnav{display:none}
.cat-all .cat-all-inner{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--plum),var(--wine));color:var(--brass);border-radius:6px}
nav.main > div{position:relative;padding:10px 0}
nav.main a.top{font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;position:relative}
nav.main a.top::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--brass);transition:width .3s var(--ease)}
nav.main > div:hover a.top::after{width:100%}
.mega{position:absolute;top:100%;left:-18px;background:#fff;border:1px solid var(--line);
  min-width:210px;padding:12px 0;box-shadow:var(--shadow);opacity:0;visibility:hidden;
  transform:translateY(8px);transition:all .22s var(--ease);z-index:5}
nav.main > div:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega a{display:block;padding:8px 20px;font-size:13.5px;transition:background .15s,padding-left .15s}
.mega a:hover{background:var(--blush);padding-left:25px}
.head-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.searchbox{position:relative}
.searchbox input{width:200px;padding:8px 14px;border-radius:999px;font-size:13px;transition:width .3s var(--ease)}
.searchbox input:focus{width:250px}
.ibtn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  position:relative;transition:background .2s}
.ibtn:hover{background:var(--blush)}
.ibtn svg{width:19px;height:19px;stroke:var(--plum);fill:none;stroke-width:1.6}
.dot{position:absolute;top:1px;right:1px;background:var(--wine);color:#fff;font-size:9.5px;
  min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-weight:600;padding:0 4px}
.burger{display:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:70px 0 46px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(38px,5.2vw,68px);color:var(--plum);margin:14px 0 18px}
.hero h1 em{font-style:italic;font-family:Georgia,serif;font-size:.82em;color:var(--wine)}
.hero p.lede{font-size:16px;color:#5d4a52;max-width:460px;margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(155deg,var(--blush),#E3C8D2 60%,#C9A9B8)}
.hero-art img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:.92}
.ribbon{position:absolute;inset:0;pointer-events:none}
.ribbon path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.2s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-badge{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.95);
  padding:14px 18px;border-radius:var(--r);box-shadow:var(--shadow);max-width:230px}
.hero-badge b{font-family:'Italiana',serif;font-size:17px;color:var(--plum);display:block;margin-bottom:3px}
.hero-badge small{font-size:12px;color:var(--muted);line-height:1.5;display:block}
.trust{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap}
.trust div{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:7px}
.trust b{color:var(--brass-dim);font-size:15px}

/* ---------- reveal animation ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- section head ---------- */
.sec{padding:56px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.sec-head h2{font-size:clamp(26px,3vw,38px);color:var(--plum)}
.rule{height:1px;background:var(--line);flex:1;margin-bottom:10px}

/* ---------- category strip ---------- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--blush);cursor:pointer}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat:hover img{transform:scale(1.07)}
.cat::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(44,12,31,.62),transparent 58%)}
.cat span{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;z-index:2;
  font-family:'Italiana',serif;font-size:16px;letter-spacing:.06em}
.cat small{position:absolute;left:12px;bottom:-18px;color:rgba(255,255,255,.8);font-size:10px;z-index:2;
  transition:bottom .3s var(--ease)}
.cat:hover small{bottom:0}
.cat:hover span{bottom:22px;transition:bottom .3s var(--ease)}

/* ---------- shop layout ---------- */
.shop{display:grid;grid-template-columns:225px 1fr;gap:38px;align-items:start}
.filters{position:sticky;top:96px}
.fgroup{border-bottom:1px solid var(--line);padding:14px 0}
.fgroup h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;
  display:flex;justify-content:space-between;cursor:pointer}
.fopt{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0;cursor:pointer;color:#5d4a52}
.fopt input{accent-color:var(--plum);width:15px;height:15px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;cursor:pointer;
  transition:all .2s;background:#fff}
.chip:hover{border-color:var(--rose)}
.chip.on{background:var(--plum);color:#fff;border-color:var(--plum)}
.shop-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.shop-bar select{width:auto;border-radius:999px;padding:8px 14px;font-size:13px}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{position:relative;cursor:pointer}
.pcard-img{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--blush)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:opacity .55s var(--ease),transform .7s var(--ease)}
.pcard-img img.alt{position:absolute;inset:0;opacity:0}
.pcard:hover .pcard-img img.alt{opacity:1}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pbadge{position:absolute;top:10px;left:10px;background:var(--plum);color:#fff;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px;z-index:2}
.pbadge.off{background:var(--wine);left:auto;right:10px}
.pwish{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease)}
.pwish:hover{transform:scale(1.12)}
.pwish svg{width:15px;height:15px;stroke:var(--plum);fill:none;stroke-width:1.7}
.pwish.on svg{fill:var(--wine);stroke:var(--wine)}
.pquick{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;opacity:0;transform:translateY(8px);
  transition:all .28s var(--ease)}
.pcard:hover .pquick{opacity:1;transform:none}
.pquick .btn{width:100%;background:rgba(255,255,255,.96);color:var(--plum);backdrop-filter:blur(4px)}
.pquick .btn:hover{background:var(--plum);color:#fff}
.pinfo{padding-top:11px}
.pname{font-size:13.5px;font-weight:500;margin-bottom:3px;line-height:1.35}
.pmeta{font-size:11.5px;color:var(--muted);margin-bottom:5px}
.pprice{font-size:14px;font-weight:600;color:var(--plum)}
.pprice s{color:#b9a2aa;font-weight:400;font-size:12px;margin-left:6px}
.stars{color:var(--brass);font-size:12px;letter-spacing:1px}
.oos{position:absolute;inset:0;background:rgba(251,246,242,.72);display:flex;align-items:center;
  justify-content:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;z-index:2}

/* ---------- ask bar (AI) ---------- */
.ask{background:linear-gradient(140deg,var(--plum),var(--plum-deep));color:#fff;border-radius:6px;padding:44px}
.ask h2{color:#fff;margin-bottom:8px}
.ask p.sub{color:var(--rose);font-size:14px;margin-bottom:22px;max-width:520px}
.ask-bar{display:flex;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:6px 6px 6px 20px;align-items:center;max-width:680px}
.ask-bar input{flex:1;background:none;border:none;color:#fff;padding:10px 0}
.ask-bar input::placeholder{color:rgba(255,255,255,.5)}
.ask-bar input:focus{outline:none}
.answer-bar{margin-top:18px;background:rgba(255,255,255,.96);color:var(--noir);border-radius:6px;
  padding:20px 22px;max-width:680px;box-shadow:var(--shadow);display:none}
.answer-bar.show{display:block;animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.answer-bar .a-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-dim);
  margin-bottom:8px;display:flex;align-items:center;gap:8px}
.answer-bar p{font-size:14.5px;line-height:1.7}
.ask-sugg{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.ask-sugg button{padding:7px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font-size:12px;color:var(--blush);transition:all .2s}
.ask-sugg button:hover{background:rgba(255,255,255,.14);border-color:var(--brass)}
.typing{display:inline-flex;gap:4px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--brass);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.ans-products{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ans-products a{font-size:12px;padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.ans-products a:hover{background:var(--blush)}

/* ---------- drawer ---------- */
.veil{position:fixed;inset:0;background:rgba(23,16,26,.5);z-index:90;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);backdrop-filter:blur(2px)}
.veil.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:410px;max-width:92vw;background:#fff;z-index:100;
  transform:translateX(102%);transition:transform .38s var(--ease);display:flex;flex-direction:column}
.drawer.show{transform:none}
.dhead{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.dhead h3{font-size:19px;color:var(--plum)}
.dbody{flex:1;overflow-y:auto;padding:18px 22px;-webkit-overflow-scrolling:touch}
.dfoot{padding:18px 22px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--porcelain)}
.ditem{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);animation:slidein .3s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.ditem img{width:66px;height:84px;object-fit:cover;border-radius:var(--r);background:var(--blush)}
.ditem .dn{font-size:13px;font-weight:500;margin-bottom:2px}
.ditem .dm{font-size:11.5px;color:var(--muted);margin-bottom:7px}
.qty{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.qty button{width:20px;height:20px;font-size:14px;line-height:1;color:var(--plum)}
.qty span{font-size:13px;min-width:14px;text-align:center}
.rm{font-size:11px;color:var(--muted);text-decoration:underline;margin-left:auto;align-self:flex-start}
.rm:hover{color:var(--err)}
.tot{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px}
.tot.big{font-size:16px;font-weight:600;color:var(--plum);padding-top:9px;border-top:1px solid var(--line);margin-top:9px}
.empty{text-align:center;padding:64px 20px;color:var(--muted);font-size:13.5px}
.empty svg{width:42px;height:42px;stroke:var(--rose);fill:none;stroke-width:1.2;margin:0 auto 14px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(23,16,26,.58);z-index:110;display:none;
  align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.modal.show{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.mbox{background:#fff;border-radius:6px;max-width:520px;width:100%;padding:32px;position:relative;
  max-height:90dvh;overflow:auto;-webkit-overflow-scrolling:touch;animation:pop .35s var(--ease)}
.mbox.wide{max-width:880px;padding:0;display:grid;grid-template-columns:1fr 1fr}
.mclose{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-sm);font-size:19px;line-height:1;z-index:4;color:var(--plum)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(24px);
  background:var(--plum);color:#fff;padding:12px 22px;border-radius:999px;font-size:13px;z-index:200;
  opacity:0;transition:all .3s var(--ease);pointer-events:none;box-shadow:var(--shadow);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.err{background:var(--err)}

/* ---------- footer ---------- */
footer.site{background:var(--plum-deep);color:#d3b8c2;padding:60px 0 26px;margin-top:60px}
footer.site h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:14px}
footer.site li{list-style:none;font-size:13px;margin-bottom:8px}
footer.site a:hover{color:var(--brass)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.fbot{margin-top:38px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;
  color:#a98c96;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pay-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pay-row span{font-size:10px;letter-spacing:.08em;border:1px solid rgba(255,255,255,.2);
  padding:5px 9px;border-radius:3px;color:#c7abb4}

/* ---------- badges / status ---------- */
.st{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  border:1px solid var(--line);display:inline-block}
.st.placed{background:#FFF3E2;color:#8A5A1E;border-color:#F0DAB8}
.st.confirmed{background:#E7F1FF;color:#1F4E86;border-color:#C6DDF7}
.st.packed{background:#F2E9FB;color:#5B3286;border-color:#DECCF2}
.st.shipped{background:#E4F4F7;color:#1D6273;border-color:#C0E3EA}
.st.delivered{background:#E6F5EC;color:#1F6B45;border-color:#C3E6D2}
.st.cancelled{background:#FCE8EB;color:#96182E;border-color:#F3C8D0}
.st.verified{background:#E6F5EC;color:#1F6B45;border-color:#C3E6D2}
.st.unpaid,.st.proof_submitted{background:#FFF3E2;color:#8A5A1E;border-color:#F0DAB8}
.st.rejected{background:#FCE8EB;color:#96182E;border-color:#F3C8D0}
.st.cod{background:#F1EEE9;color:#5C5148;border-color:#E0D8CE}

/* ---------- misc ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px}
.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--plum);
  border-radius:50%;animation:spin .7s linear infinite;margin:32px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,#EFE6E2 25%,#F8F1EE 50%,#EFE6E2 75%);background-size:200% 100%;
  animation:shim 1.3s infinite;border-radius:var(--r)}
@keyframes shim{to{background-position:-200% 0}}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  /* header must never overflow the screen */
  .head{gap:10px;padding:12px 14px;flex-wrap:wrap;max-width:100%;align-items:center}
  .burger{display:flex;order:1}
  .brand{flex-shrink:0;order:2;margin-right:auto}
  .brand svg,.brand img{width:30px;height:30px}
  .head-tools{gap:2px;flex-shrink:0;order:3;margin-left:auto}
  .ibtn{width:38px;height:38px;flex-shrink:0}
  /* search drops to its own full-width row UNDER the logo and icons */
  .searchbox{order:5;flex-basis:100%;width:100%;margin-top:6px;max-width:100%}
  .searchbox input,.searchbox input:focus{width:100%;max-width:100%;padding:11px 16px;font-size:16px}
  /* feedback form stacks below the text */
  .fb-grid{grid-template-columns:1fr !important;gap:24px !important}
  nav.main{display:none}
  nav.main.open{display:flex;position:fixed;top:0;left:0;width:82%;max-width:320px;height:100dvh;
    background:#fff;z-index:120;flex-direction:column;gap:0;
    padding:calc(env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom));
    box-shadow:var(--shadow);overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0}
  /* drawer header with logo + close button */
  .nav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:16px 18px;border-bottom:1px solid var(--line);margin-bottom:6px;flex-shrink:0}
  .nav-brand{display:flex;align-items:center;gap:9px;min-width:0}
  .nav-mark{display:flex;align-items:center;flex-shrink:0}
  .nav-mark svg,.nav-mark img{width:30px;height:30px;object-fit:contain}
  .nav-head .brand-txt{display:block;min-width:0}
  .nav-head .brand-txt b{font-size:17px;letter-spacing:.14em;color:var(--plum);display:block;white-space:nowrap}
  .nav-head .brand-txt i{font-size:7.5px;letter-spacing:.3em;color:var(--brass);display:block;white-space:nowrap;font-style:normal}
  .nav-close{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;color:var(--plum);background:var(--blush);flex-shrink:0}
  /* The desktop mega-menu markup is hidden inside the drawer; the phone
     menu below is built as a proper nested list instead.
     The drawer header (.nav-head) and the new menu (.mnav) must stay visible. */
  nav.main.open > div:not(.nav-head):not(.mnav){display:none}
  .mnav{display:block;width:100%}
  .mnav-list{list-style:none;margin:0;padding:0}
  .mnav-item{border-bottom:1px solid var(--line)}
  .mnav-list.depth-1 > .mnav-item:last-child,
  .mnav-list.depth-2 > .mnav-item:last-child{border-bottom:none}
  .mnav-row{display:flex;align-items:stretch;gap:0}
  .mnav-label{flex:1;min-width:0;padding:14px 8px 14px 20px;font-size:13.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--plum);
    display:flex;align-items:center;word-break:break-word}
  .mnav-toggle{flex:0 0 52px;display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;color:var(--brass);background:none;border:none;cursor:pointer}
  .mnav-leaf{display:block;padding:14px 20px;font-size:13.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--plum)}
  .mnav-leaf.accent{color:var(--wine)}
  /* nested lists stay closed until opened */
  .mnav-sub{max-height:0;overflow:hidden;opacity:0;visibility:hidden;background:var(--porcelain);
    transition:max-height .3s ease,opacity .25s ease}
  .mnav-item.open > .mnav-sub{max-height:1400px;opacity:1;visibility:visible}
  /* deeper levels: smaller, indented, sentence case */
  .mnav-list.depth-1 .mnav-label,
  .mnav-list.depth-1 .mnav-leaf{padding-left:34px;font-size:13px;text-transform:none;letter-spacing:.04em}
  .mnav-list.depth-2 .mnav-label,
  .mnav-list.depth-2 .mnav-leaf{padding-left:48px;font-size:12.5px;text-transform:none;
    letter-spacing:.02em;color:var(--muted)}
  .mnav-list.depth-2 .mnav-leaf{padding-top:12px;padding-bottom:12px}
  .burger{display:flex}
  .searchbox input{width:130px}
  .searchbox input:focus{width:160px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero{padding-top:36px}
  .shop{grid-template-columns:1fr}
  .filters{position:static;display:none}
  .filters.open{display:block;margin-bottom:20px}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .mbox.wide{grid-template-columns:1fr}
  .pd-grid,.cart-grid,.co-grid,.dash-grid{grid-template-columns:1fr !important}
  .cart-grid aside,.co-grid aside{position:static !important}
  .ask{padding:28px}
  .sec{padding:36px 0}
}
@media(max-width:420px){
  .brand-txt b{font-size:16px;letter-spacing:.12em}
  .brand-txt i{font-size:7px;letter-spacing:.3em}
  .grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .fgrid{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  .head{padding:10px 12px;gap:8px}
  .ibtn{width:34px;height:34px}
  .ibtn svg{width:17px;height:17px}
  .dot{min-width:14px;height:14px;font-size:9px}
  .hero h1{font-size:clamp(30px,9vw,44px)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .card{padding:16px}
  .row{grid-template-columns:1fr}
  .topbar{font-size:10px;letter-spacing:.1em}
}
/* stop any accidental sideways scrolling on phones */
@media(max-width:860px){
  html,body{max-width:100%;overflow-x:clip}
  .drawer{width:100%}
  /* iOS zooms in when you tap a field with text under 16px — force 16px on phones only */
  input,select,textarea{font-size:16px !important}
  /* comfortable tap targets */
  .btn{min-height:44px}
  .chip{min-height:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .ribbon path{stroke-dashoffset:0}
}

/* ============ EXTRA POLISH ANIMATIONS ============ */
@keyframes shecaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shecaPop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes shecaShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes shecaFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* product cards lift on hover */
.pcard{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pcard:hover{transform:translateY(-6px)}
.pcard:hover .pcard-img img{transform:scale(1.06)}

/* category tiles */
.cat{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cat img{transition:transform .6s ease}
.cat:hover{transform:translateY(-4px)}
.cat:hover img{transform:scale(1.07)}

/* button shine sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn:hover::after{left:135%}
.btn:active{transform:scale(.97)}

/* press feedback */
.ibtn,.chip{transition:transform .18s ease,background .25s ease,color .25s ease}
.ibtn:active,.chip:active{transform:scale(.9)}

/* count badge pop */
.dot{animation:shecaPop .3s ease}

/* hero art floats gently */
.hero-art img{animation:shecaFloat 6s ease-in-out infinite}

/* loading shimmer */
.skel{background:linear-gradient(90deg,#efe6e0 25%,#f7f0ec 37%,#efe6e0 63%);
  background-size:200% 100%;animation:shecaShimmer 1.4s ease infinite}

/* toast + modal entrances */
.toast{animation:shecaFadeUp .35s cubic-bezier(.2,.7,.2,1)}
.modal.show .mbox,.modal.show .mcard{animation:shecaPop .3s cubic-bezier(.2,.7,.2,1)}

/* sold-out overlay fade */
.oos{animation:shecaFadeUp .4s ease}

/* ---- floating WhatsApp button ---- */
#waFloat{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;
  width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.4);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;animation:shecaPop .4s ease}
#waFloat:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 12px 30px -6px rgba(0,0,0,.45)}
#waFloat:active{transform:scale(.94)}
#footSocial a:hover{transform:translateY(-3px);background:rgba(255,255,255,.22)}
@media(max-width:860px){ #waFloat{width:50px;height:50px;right:14px} }

/* ---- pagination ---- */
#pager{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:30px}
#pager .pg-arrow{font-weight:600}
#pager .chip[disabled]{opacity:.35;cursor:not-allowed}
#pager .pg-gap{color:var(--muted);padding:0 2px}
#pager .pg-info{flex-basis:100%;text-align:center;font-size:11.5px;color:var(--muted);margin-top:8px}

/* ============ RICHER MOTION ============ */
@keyframes shecaSlideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes shecaGlow{0%,100%{box-shadow:0 0 0 0 rgba(201,166,107,.4)}50%{box-shadow:0 0 0 10px rgba(201,166,107,0)}}
@keyframes shecaTilt{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes shecaBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes shecaSheen{0%{transform:translateX(-100%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

/* product card: image sheen sweep on hover */
.pcard-img{position:relative;overflow:hidden}
.pcard-img::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%) skewX(-15deg);pointer-events:none;opacity:0}
.pcard:hover .pcard-img::after{opacity:1;animation:shecaSheen .9s ease}

/* wishlist heart pops when clicked */
.pwish.on svg{animation:shecaPop .35s cubic-bezier(.2,.7,.2,1)}
.pwish:hover{transform:scale(1.12)}
.pwish{transition:transform .2s cubic-bezier(.2,.7,.2,1)}

/* badges gently draw attention */
.pbadge{animation:shecaSlideIn .45s cubic-bezier(.2,.7,.2,1)}
.pbadge.off{animation:shecaPop .4s ease}

/* primary CTA breathes softly so it invites a click */
.btn:not(.ghost):not(.sm){animation:shecaGlow 3.6s ease-in-out infinite}
.btn:hover{animation:none}

/* nav links get an underline that grows from the left */
nav.main a.top{position:relative}
nav.main a.top::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;
  background:var(--brass);transition:width .3s cubic-bezier(.2,.7,.2,1)}
nav.main a.top:hover::after{width:100%}

/* category tiles: label lifts on hover */
.cat span{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cat:hover span{transform:translateY(-3px)}

/* size/colour chips spring when selected */
.chip.on{animation:shecaPop .28s cubic-bezier(.2,.7,.2,1)}

/* cart icon nudges when an item is added */
.ibtn.bump{animation:shecaBounce .5s cubic-bezier(.2,.7,.2,1) 2}

/* drawer slides in from the left */
nav.main.open{animation:shecaSlideIn .3s cubic-bezier(.2,.7,.2,1)}

/* footer social icons tilt playfully */
#footSocial a:hover svg{animation:shecaTilt .5s ease}

/* staggered reveal for product grids */
.grid > *{animation:shecaFadeUp .5s cubic-bezier(.2,.7,.2,1) backwards}
.grid > *:nth-child(1){animation-delay:.02s}
.grid > *:nth-child(2){animation-delay:.06s}
.grid > *:nth-child(3){animation-delay:.10s}
.grid > *:nth-child(4){animation-delay:.14s}
.grid > *:nth-child(5){animation-delay:.18s}
.grid > *:nth-child(6){animation-delay:.22s}
.grid > *:nth-child(7){animation-delay:.26s}
.grid > *:nth-child(8){animation-delay:.30s}
.grid > *:nth-child(n+9){animation-delay:.34s}

/* smooth page entrance */
main,.wrap{animation:shecaFade .4s ease}

/* ============ MOBILE HERO, STICKY HEADER, CATEGORY SLIDER ============ */

/* Search toggle is desktop-hidden; the box shows normally there. */
.searchToggle{display:none}
.hero-cta-mob{display:none}

@media(max-width:860px){
  /* ---- 5. header stays put while the page scrolls ---- */
  /* The announcement strip scrolls away; the nav bar sticks to the top. */
  header.site{position:sticky;top:0;z-index:100}

  /* ---- search collapses to just an icon ---- */
  .searchToggle{display:flex}
  .searchbox{display:none}
  .searchbox.open{display:block;order:5;flex-basis:100%;width:100%;margin-top:8px}
  .searchbox.open input{width:100%;padding:11px 16px;font-size:16px}

  /* ---- 1. photo first, words underneath ---- */
  .hero{padding-top:0}
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-art{order:1;position:relative;width:100%;margin:0 0 22px;
    border-radius:0 0 18px 18px;overflow:hidden}
  .hero-art{aspect-ratio:auto}
  .hero-art img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
    /* show real photos at full strength on phones, and hold still */
    mix-blend-mode:normal;opacity:1;animation:none}
  .hero-grid > div:not(.hero-art){order:2}
  /* the size badge and ribbon are desktop decoration only */
  .hero-badge,.hero-art .ribbon{display:none}

  /* buttons sit inside the lower part of the photo and stay tappable */
  .hero-cta-mob{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
    position:absolute;left:0;right:0;bottom:18px;padding:0 18px;z-index:2}
  .hero-cta-mob .btn{flex:1 1 auto;min-width:140px;justify-content:center;
    box-shadow:0 8px 24px -8px rgba(44,12,31,.5)}
  .hero-cta-mob .btn.ghost{background:rgba(255,255,255,.92);border-color:transparent;color:var(--plum)}
  /* soft fade so white text/buttons stay readable over any photo */
  .hero-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;
    background:linear-gradient(to top,rgba(44,12,31,.42),transparent);pointer-events:none;z-index:1}
  /* hide the desktop button row on phones */
  .hero-cta{display:none}

  /* ---- 3. categories swipe sideways instead of stacking ---- */
  .cats{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:2px 16px 8px;margin:0 -16px;
    scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cats .cat{flex:0 0 62%;max-width:62%;scroll-snap-align:start}
}

@media(max-width:420px){
  .cats .cat{flex:0 0 70%;max-width:70%}
  .hero-cta-mob{bottom:14px;padding:0 14px}
  .hero-cta-mob .btn{min-width:0;font-size:12px;padding:11px 14px}
}