/* ============================================================
   PATA OFFICCIAL · catálogo
   Paleta: creme #F5EEE3 · cacau #3B2416 · caramelo #A47551 ·
   avelã #6E4B33 · mel #B88A57
   ============================================================ */

:root{
  --cream:#F5EEE3;
  --cream-2:#EFE4D4;
  --paper:#FFFCF7;
  --cocoa:#3B2416;
  --caramel:#A47551;
  --hazel:#6E4B33;
  --honey:#B88A57;

  --hair:rgba(164,117,81,.34);
  --hair-soft:rgba(164,117,81,.18);
  --shadow:0 18px 40px -26px rgba(59,36,22,.5);

  --display:"Fraunces",Georgia,serif;
  --sans:"Jost",-apple-system,"Segoe UI",sans-serif;

  --max:76rem;
  --gut:clamp(1rem,4vw,2.5rem);
  --r:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; background:var(--cream); scroll-behavior:smooth; scroll-padding-top:8rem; -webkit-tap-highlight-color:transparent}
body{
  margin:0; font-family:var(--sans); font-weight:400; color:var(--cocoa);
  background:var(--cream);
  background-image:
    radial-gradient(90% 40% at 50% -6%, rgba(164,117,81,.22) 0%, rgba(245,238,227,0) 62%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%; height:auto; display:block}
button{font:inherit; color:inherit}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:2px solid var(--caramel); outline-offset:3px}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60;
  opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.eyebrow{
  margin:0 0 .5rem; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--caramel); font-weight:500;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.5rem; border-radius:999px; border:1px solid transparent;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  text-decoration:none; cursor:pointer; transition:.4s var(--ease);
}
.btn svg{width:1rem; height:1rem}
.btn--solid{background:var(--cocoa); color:var(--cream)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--hazel)}
.btn--ghost{border-color:var(--hair); color:var(--cocoa); background:rgba(255,252,247,.5)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--cocoa); background:var(--paper)}
.btn--ghost-dark{border-color:var(--hair); color:var(--hazel); background:transparent}
.btn--ghost-dark:hover,.btn--ghost-dark:focus-visible{border-color:var(--cocoa); color:var(--cocoa)}
.btn--block{width:100%}

/* ============================ AVISO ============================ */
.announce{
  background:var(--cocoa); color:rgba(245,238,227,.86); overflow:hidden; padding:.55rem 0;
}
.announce ul{display:flex; gap:2.6rem; margin:0; padding:0; list-style:none; width:max-content; animation:slide 34s linear infinite}
.announce li{
  display:flex; align-items:center; gap:2.6rem; white-space:nowrap;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; font-weight:500;
}
.announce li::after{content:""; width:4px; height:4px; background:var(--honey); transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================ TOPO ============================ */
.top{
  position:sticky; top:0; z-index:30;
  background:rgba(245,238,227,.82);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .4s, box-shadow .4s;
}
.top.scrolled{border-color:var(--hair-soft); box-shadow:0 10px 30px -24px rgba(59,36,22,.5)}
.top-in{
  max-width:var(--max); margin:0 auto; padding:.8rem var(--gut);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.2rem;
}
.brand img{width:7.4rem; height:auto}

.search{
  justify-self:center; width:min(100%,26rem);
  display:flex; align-items:center; gap:.6rem;
  padding:.62rem 1rem; border-radius:999px;
  background:var(--paper); border:1px solid var(--hair-soft);
  color:var(--hazel); transition:border-color .3s;
}
.search:focus-within{border-color:var(--caramel)}
.search svg{width:1rem; height:1rem; flex:none}
.search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:.9rem; color:var(--cocoa);
}
.search input::placeholder{color:rgba(110,75,51,.6)}

.bag-btn{
  position:relative; display:flex; align-items:center; gap:.5rem;
  padding:.62rem 1rem; border-radius:999px; cursor:pointer;
  background:var(--cocoa); color:var(--cream); border:0;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  transition:background .3s;
}
.bag-btn:hover{background:var(--hazel)}
.bag-btn svg{width:1.05rem; height:1.05rem}
.bag-count{
  min-width:1.25rem; height:1.25rem; padding:0 .3rem; border-radius:999px;
  display:grid; place-items:center;
  background:var(--honey); color:var(--cocoa); font-size:.66rem; letter-spacing:0;
}
.bag-count.pop{animation:pop .5s var(--ease)}
@keyframes pop{40%{transform:scale(1.35)}}

@media (max-width:720px){
  .top-in{grid-template-columns:1fr auto; gap:.7rem .8rem}
  .search{grid-column:1 / -1; grid-row:2; width:100%}
  .brand img{width:6.4rem}
  .bag-label{display:none}
}

/* ============================ HERO ============================ */
.hero{
  max-width:var(--max); margin:0 auto; padding:clamp(2rem,6vw,4.5rem) var(--gut) clamp(2.5rem,6vw,4rem);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero h1{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(2.3rem,5.4vw,4.2rem); line-height:1.05; letter-spacing:-.02em; font-variation-settings:'SOFT' 50; text-wrap:balance;
}
.hero h1 em{display:block; font-style:italic; color:var(--caramel)}
.lede{margin:1.4rem 0 0; max-width:32rem; font-size:1.02rem; line-height:1.7; color:var(--hazel); font-weight:300}
.hero-cta{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem}

.hero-art{position:relative; margin:0; justify-self:end; width:min(100%,25rem)}
.hero-art img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:200px 200px var(--r) var(--r);
  box-shadow:0 30px 60px -36px rgba(59,36,22,.7);
}
.hero-art::before{
  content:""; position:absolute; inset:-12px -12px 24px 24px; z-index:-1;
  border:1px solid var(--hair); border-radius:200px 200px var(--r) var(--r);
}
.hero-art figcaption{
  position:absolute; left:-1.2rem; bottom:1.6rem;
  background:var(--paper); border:1px solid var(--hair-soft); border-radius:12px;
  padding:.75rem 1rem; box-shadow:var(--shadow);
}
.hero-art figcaption span{display:block; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--caramel); font-weight:500}
.hero-art figcaption b{display:block; margin-top:.2rem; font-family:var(--display); font-weight:400; font-style:italic; font-size:1.05rem}
.hero-paw{position:absolute; right:-.6rem; top:1.2rem; width:3rem; fill:var(--caramel); opacity:.35; transform:rotate(18deg)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; text-align:center}
  .lede{margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-art{justify-self:center; width:min(62%,15rem); order:-1; margin-bottom:1.4rem}
  .hero-art img{aspect-ratio:1/1.08}
  .hero-art figcaption{left:50%; transform:translateX(-50%); bottom:-1.2rem; white-space:nowrap}
}

/* ============================ VITRINE ============================ */
.shop{max-width:var(--max); margin:0 auto; padding:0 var(--gut) 4rem}
.shop-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.shop-head h2,.flagship h2{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.05; letter-spacing:-.02em;
}
.shop-head h2 em{font-style:italic; color:var(--caramel)}
.tools{display:flex; align-items:center; gap:1rem}
.count{font-size:.78rem; color:var(--hazel)}
.sort select{
  appearance:none; -webkit-appearance:none;
  padding:.6rem 2.2rem .6rem 1rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--hair); background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E4B33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / .8rem;
  font:inherit; font-size:.78rem; color:var(--cocoa);
}

/* ---------- categorias ----------
   celular/tablet: faixa de chips que gruda no topo
   desktop: menu lateral fixo                          */
.shop-body{margin-top:1.4rem}
.side{
  position:sticky; top:var(--top-h,4.5rem); z-index:20;
  margin:0 calc(var(--gut) * -1) 1.4rem; padding:.7rem 0;
  background:rgba(245,238,227,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.side.stuck{border-color:var(--hair-soft)}
.side-title,.side-help{display:none}
.cats{
  display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none;
  padding:0 var(--gut); scroll-padding-inline:var(--gut);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 3rem),transparent);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 3rem),transparent);
}
.cats::-webkit-scrollbar{display:none}
.cat{
  flex:none; display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .95rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--hair); background:var(--paper);
  font-size:.74rem; font-weight:500; color:var(--hazel);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.cat:hover{border-color:var(--caramel); color:var(--cocoa)}
.cat[aria-pressed="true"]{background:var(--cocoa); border-color:var(--cocoa); color:var(--cream)}
.cat small{
  min-width:1.35rem; padding:.1rem .35rem; border-radius:999px; text-align:center;
  font-size:.66rem; font-variant-numeric:tabular-nums;
  background:rgba(164,117,81,.14); color:var(--hazel);
}
.cat[aria-pressed="true"] small{background:rgba(245,238,227,.18); color:var(--cream)}

@media (min-width:1024px){
  .shop-body{display:grid; grid-template-columns:14.5rem 1fr; gap:2.5rem; align-items:start}
  .side{
    top:calc(var(--top-h,4.5rem) + 1.2rem); margin:0; padding:0;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0;
  }
  .side-title{
    display:block; margin:0 0 .8rem; padding-bottom:.7rem; border-bottom:1px solid var(--hair-soft);
    font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--caramel); font-weight:500;
  }
  .cats{flex-direction:column; gap:.15rem; overflow:visible; padding:0; -webkit-mask-image:none; mask-image:none}
  .cat{
    position:relative; justify-content:space-between; width:100%;
    padding:.68rem .85rem .68rem 1.05rem; border:0; border-radius:10px; background:transparent;
    font-size:.92rem; font-weight:400; text-align:left;
  }
  .cat::before{
    content:""; position:absolute; left:0; top:50%; width:3px; height:0; border-radius:3px;
    background:var(--caramel); transform:translateY(-50%); transition:height .35s var(--ease);
  }
  .cat:hover{background:rgba(164,117,81,.08); color:var(--cocoa)}
  .cat[aria-pressed="true"]{background:var(--paper); color:var(--cocoa); font-weight:500; box-shadow:0 6px 16px -12px rgba(59,36,22,.5)}
  .cat[aria-pressed="true"]::before{height:56%}
  .cat[aria-pressed="true"] small{background:var(--cocoa); color:var(--cream)}

  .side-help{
    display:grid; gap:.35rem; margin-top:1.6rem; padding:1.1rem 1.1rem 1.2rem;
    border-radius:var(--r); text-decoration:none; color:var(--cream);
    background:radial-gradient(120% 100% at 100% 0%, rgba(184,138,87,.35), rgba(184,138,87,0) 60%), var(--cocoa);
    transition:transform .4s var(--ease);
  }
  .side-help:hover{transform:translateY(-3px)}
  .side-help svg{width:1.4rem; fill:var(--honey); opacity:.8}
  .side-help b{font-family:var(--display); font-weight:400; font-size:1.15rem}
  .side-help span{font-size:.8rem; line-height:1.5; color:rgba(245,238,227,.75); font-weight:300}
  .side-help em{font-style:normal; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--honey); margin-top:.3rem}
}

.grid{
  display:grid; gap:clamp(.8rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(13.5rem,calc(50% - .5rem)),1fr));
}

.card{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--r); overflow:hidden;
  background:var(--paper); border:1px solid var(--hair-soft);
  box-shadow:0 4px 14px -10px rgba(59,36,22,.3);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  animation:in .6s var(--ease) both;
}
@keyframes in{from{opacity:0; transform:translateY(14px)}}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--caramel)}
.card-open{all:unset; cursor:pointer; display:block}
.card-open:focus-visible{outline:2px solid var(--caramel); outline-offset:-4px; border-radius:var(--r)}
.shot{display:block; position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--cream-2)}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.card:hover .shot img{transform:scale(1.06)}
.seal{
  position:absolute; top:.6rem; left:.6rem;
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  background:rgba(255,252,247,.92); color:var(--cocoa);
  padding:.32rem .55rem; border-radius:999px;
}
.meta{padding:.85rem .9rem 1rem; display:flex; box-sizing:border-box; flex-direction:column; gap:.25rem}
.meta small{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--caramel); font-weight:500}
.meta h3{
  margin:0; font-family:var(--display); font-weight:400; font-size:1.05rem; line-height:1.2; letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.price{margin-top:.35rem; font-size:.95rem; font-weight:600; font-variant-numeric:tabular-nums}
.price--ask{font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--hazel)}
.add{
  position:absolute; right:.6rem; top:.6rem;
  width:2.4rem; height:2.4rem; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--cocoa); color:var(--cream); border:0;
  box-shadow:0 8px 18px -10px rgba(59,36,22,.8);
  transition:.35s var(--ease);
}
.add:hover{background:var(--caramel); transform:scale(1.08)}
.add svg{width:1rem; height:1rem}
.add.done{background:var(--honey); color:var(--cocoa)}

.empty{text-align:center; padding:3rem 1rem; max-width:28rem; margin:0 auto}
.empty svg{width:3rem; fill:var(--caramel); opacity:.45}
.empty h3{font-family:var(--display); font-weight:400; font-style:italic; font-size:1.6rem; margin:1rem 0 .4rem}
.empty p{color:var(--hazel); line-height:1.6; font-weight:300; margin:0 0 1.4rem}


/* ---------- comprar (card) ---------- */
.card-open{flex:1}
.meta{padding-bottom:.7rem}
.swatch{font-size:.66rem; color:var(--caramel); letter-spacing:.04em}
.buy{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  margin:0 .75rem .8rem; padding:.7rem .8rem; border-radius:999px;
  background:var(--cocoa); color:var(--cream); text-decoration:none;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  transition:background .35s var(--ease);
}
.buy svg{width:.95rem; height:.95rem}
.buy:hover,.buy:focus-visible{background:var(--hazel)}

/* ---------- cores (produto) ---------- */
.cores .eyebrow{margin:0 0 .45rem}
.cores div{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{
  padding:.48rem .85rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--hair); background:transparent; color:var(--hazel);
  font-size:.74rem; transition:.3s var(--ease);
}
.chip:hover{border-color:var(--cocoa); color:var(--cocoa)}
.chip[aria-pressed="true"]{background:var(--cocoa); border-color:var(--cocoa); color:var(--cream)}

/* ============================ COMO FUNCIONA ============================ */
.how{
  max-width:var(--max); margin:0 auto 4rem; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
.how-item{
  padding:1.5rem 1.4rem; border-radius:var(--r);
  background:rgba(255,252,247,.6); border:1px solid var(--hair-soft);
}
.how-item b{font-family:var(--display); font-weight:400; font-style:italic; font-size:1.6rem; color:var(--caramel)}
.how-item h3{margin:.4rem 0 .35rem; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500}
.how-item p{margin:0; font-size:.9rem; line-height:1.6; color:var(--hazel); font-weight:300}
@media (max-width:720px){.how{grid-template-columns:1fr}}

/* ============================ FLAGSHIP ============================ */
.flagship{
  position:relative; overflow:hidden;
  max-width:calc(var(--max) - var(--gut) * 2); margin:0 auto 4rem;
  margin-inline:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  padding:clamp(1.8rem,4vw,3rem); border-radius:calc(var(--r) + 4px);
  color:var(--cream);
  background:radial-gradient(90% 120% at 100% 0%, rgba(184,138,87,.35) 0%, rgba(184,138,87,0) 60%), var(--cocoa);
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.flagship::after{content:""; position:absolute; inset:7px; border-radius:var(--r); border:1px solid rgba(245,238,227,.14); pointer-events:none}
.flagship .watermark{position:absolute; right:-1rem; bottom:-2rem; width:11rem; fill:rgba(245,238,227,.06); transform:rotate(-18deg)}
.flagship .eyebrow{color:var(--honey)}
.eyebrow--live{display:flex; align-items:center; gap:.5rem}
.eyebrow--live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--honey); box-shadow:0 0 0 4px rgba(184,138,87,.22)}
.flagship h2 em{font-style:italic; color:var(--honey)}
.flagship address{margin:1rem 0 0; font-style:normal; line-height:1.6; font-weight:300; color:rgba(245,238,227,.9)}
.flagship address span{display:block; color:rgba(245,238,227,.6); font-size:.88rem}
.fs-actions{display:flex; flex-wrap:wrap; gap:.5rem; position:relative; z-index:1}
.pill{
  display:inline-flex; align-items:center; padding:.8rem 1.25rem; border-radius:999px; text-decoration:none;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; transition:.4s var(--ease);
}
.pill--solid{background:var(--cream); color:var(--cocoa)}
.pill--solid:hover{background:var(--honey)}
.pill--ghost{border:1px solid rgba(245,238,227,.32); color:var(--cream)}
.pill--ghost:hover{background:rgba(245,238,227,.12); border-color:var(--cream)}

/* ============================ RODAPÉ ============================ */
.foot{
  max-width:var(--max); margin:0 auto; padding:2.5rem var(--gut) 3rem;
  border-top:1px solid var(--hair-soft); text-align:center;
}
.foot img{width:6.5rem; margin:0 auto 1.2rem; opacity:.9}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.4rem}
.foot-links a{font-size:.78rem; color:var(--hazel); text-decoration:none; border-bottom:1px solid transparent}
.foot-links a:hover{border-color:currentColor}
.fine{margin:1.2rem 0 0; font-size:.68rem; color:rgba(110,75,51,.75); line-height:1.7}

/* ============================ PRODUTO (modal) ============================ */
.pdp{
  width:min(58rem,calc(100% - 2rem)); max-height:calc(100dvh - 2rem);
  padding:0; border:0; border-radius:calc(var(--r) + 4px);
  background:var(--paper); color:var(--cocoa);
  box-shadow:0 40px 80px -30px rgba(59,36,22,.6);
  overflow:auto;
}
.pdp[open]{display:grid; grid-template-columns:1fr 1fr; animation:pdp .5s var(--ease)}
@keyframes pdp{from{opacity:0; transform:translateY(20px) scale(.98)}}
.pdp::backdrop{background:rgba(59,36,22,.45); backdrop-filter:blur(4px)}
.pdp-img{background:var(--cream-2)}
.pdp-img img{width:100%; height:100%; aspect-ratio:4/5; object-fit:cover}
.pdp-info{padding:clamp(1.5rem,4vw,2.6rem); display:flex; flex-direction:column; gap:.9rem}
.pdp-info h2{margin:0; font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,3.4vw,2.2rem); line-height:1.08; letter-spacing:-.015em}
.pdp-info .eyebrow{margin:0}
.pdp-price{margin:0; font-size:1.3rem; font-weight:600; font-variant-numeric:tabular-nums}
.pdp-price.ask{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--hazel)}
.pdp-desc{margin:0; font-size:.95rem; line-height:1.7; color:var(--hazel); font-weight:300}
.qty{display:inline-flex; align-items:center; align-self:flex-start; border:1px solid var(--hair); border-radius:999px; margin-top:.3rem}
.qty button{width:2.5rem; height:2.5rem; border:0; background:none; cursor:pointer; font-size:1.1rem; color:var(--hazel); border-radius:50%}
.qty button:hover{color:var(--cocoa)}
.qty output{min-width:2rem; text-align:center; font-weight:500; font-variant-numeric:tabular-nums}
.pdp-notes{list-style:none; margin:.4rem 0 0; padding:.9rem 0 0; border-top:1px solid var(--hair-soft); display:grid; gap:.4rem}
.pdp-notes li{display:flex; gap:.6rem; font-size:.8rem; color:var(--hazel); font-weight:300}
.pdp-notes li::before{content:""; flex:none; width:4px; height:4px; margin-top:.5rem; background:var(--caramel); transform:rotate(45deg)}

.x{
  position:absolute; top:.8rem; right:.8rem; z-index:2;
  width:2.4rem; height:2.4rem; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(255,252,247,.92); border:1px solid var(--hair-soft); color:var(--cocoa);
  transition:.3s var(--ease);
}
.x:hover{background:var(--cocoa); color:var(--cream)}
.x svg{width:1rem; height:1rem}
.x--static{position:static}

@media (max-width:720px){
  .pdp{width:100%; max-width:100%; max-height:92dvh; margin:auto 0 0; border-radius:22px 22px 0 0}
  .pdp[open]{grid-template-columns:1fr; animation:sheet .5s var(--ease)}
  @keyframes sheet{from{transform:translateY(40px); opacity:0}}
  .pdp-img img{aspect-ratio:1; height:auto}
}

/* ============================ SACOLA ============================ */
.scrim{position:fixed; inset:0; z-index:40; background:rgba(59,36,22,.4); backdrop-filter:blur(3px); animation:fade .4s}
@keyframes fade{from{opacity:0}}
.bag{
  position:fixed; top:0; right:0; bottom:0; z-index:41;
  width:min(26rem,100%); background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .55s var(--ease);
  box-shadow:-30px 0 60px -40px rgba(59,36,22,.6);
}
.bag.open{transform:none}
.bag-head{display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem; border-bottom:1px solid var(--hair-soft)}
.bag-head h2{margin:0; font-family:var(--display); font-weight:400; font-size:1.6rem}
.bag-head h2 em{font-style:italic; color:var(--caramel)}
.bag-list{list-style:none; margin:0; padding:.6rem 1.4rem; overflow:auto; flex:1}
.bag-item{display:grid; grid-template-columns:4.2rem 1fr auto; gap:.9rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--hair-soft)}
.bag-item img{width:4.2rem; aspect-ratio:4/5; object-fit:cover; border-radius:10px}
.bag-item h3{margin:0; font-family:var(--display); font-weight:400; font-size:.98rem; line-height:1.2}
.bag-item p{margin:.25rem 0 0; font-size:.75rem; color:var(--hazel)}
.bag-item .qty{margin-top:.45rem}
.bag-item .qty button{width:1.9rem; height:1.9rem; font-size:.95rem}
.bag-item .qty output{min-width:1.4rem; font-size:.85rem}
.rm{border:0; background:none; cursor:pointer; color:var(--caramel); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; align-self:start; padding:.3rem 0}
.rm:hover{color:var(--cocoa)}
.bag-empty{flex:1; display:grid; place-content:center; text-align:center; padding:2rem; color:var(--hazel)}
.bag-empty svg{width:2.8rem; fill:var(--caramel); opacity:.4; margin:0 auto 1rem}
.bag-empty p{margin:0; line-height:1.6; font-weight:300}
.bag-foot{padding:1.2rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom)); border-top:1px solid var(--hair-soft); display:grid; gap:.8rem}
.bag-total{display:flex; justify-content:space-between; align-items:baseline}
.bag-total span{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--hazel)}
.bag-total b{font-size:1.15rem; font-variant-numeric:tabular-nums}
.bag-note{margin:0; font-size:.72rem; color:rgba(110,75,51,.8); text-align:center}

/* ============================ TOAST ============================ */
.toast{
  position:fixed; left:50%; bottom:1.6rem; z-index:70; transform:translate(-50%,140%);
  background:var(--cocoa); color:var(--cream); font-size:.8rem; font-weight:500;
  padding:.7rem 1.2rem; border-radius:999px; box-shadow:0 10px 30px rgba(59,36,22,.3);
  opacity:0; visibility:hidden; transition:transform .5s var(--ease), opacity .3s, visibility .3s;
}
.toast.on{transform:translate(-50%,0); opacity:1; visibility:visible}

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


/* ================================================================
   MOBILE FIRST · ajustes de toque, leitura e performance
   ================================================================ */
a,button,select,input{touch-action:manipulation}
.search input{font-size:1rem}             /* 16px: evita zoom automático no iOS */
.sort select{font-size:1rem; min-height:2.75rem}

/* botão de busca só aparece no celular */
.icon-btn{
  width:2.75rem; height:2.75rem; border-radius:50%; cursor:pointer;
  display:none; place-items:center;
  background:var(--paper); border:1px solid var(--hair-soft); color:var(--cocoa);
}
.icon-btn svg{width:1.15rem; height:1.15rem}
.icon-btn[aria-expanded="true"]{background:var(--cocoa); color:var(--cream); border-color:var(--cocoa)}

/* barra fixa da sacola (zona do polegar) */
.bagbar{
  position:fixed; z-index:35; left:.75rem; right:.75rem;
  bottom:calc(.75rem + env(safe-area-inset-bottom));
  display:none; align-items:center; gap:.7rem;
  min-height:3.4rem; padding:0 1.2rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--cocoa); color:var(--cream); text-align:left;
  box-shadow:0 14px 30px -12px rgba(59,36,22,.7);
  font-size:.82rem; letter-spacing:.02em;
  animation:barIn .5s var(--ease);
}
@keyframes barIn{from{transform:translateY(120%)}}
.bagbar svg{width:1.2rem; height:1.2rem; flex:none}
.bagbar span{flex:1}
.bagbar b{font-weight:600}
.bagbar em{font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; color:var(--honey)}

.toast{bottom:calc(1.6rem + env(safe-area-inset-bottom))}

@media (max-width:720px){
  /* topo compacto: logo + busca + sacola numa linha; busca abre por baixo */
  .top-in{grid-template-columns:1fr auto auto; gap:.5rem; padding-block:.55rem}
  .icon-btn{display:grid}
  .search{display:none; grid-column:1 / -1; grid-row:2; width:100%}
  .top.searching .search{display:flex}
  .bag-btn{width:2.75rem; height:2.75rem; padding:0; justify-content:center; border-radius:50%}
  .bag-count{position:absolute; top:-.2rem; right:-.25rem; box-shadow:0 0 0 2px var(--cream)}

  /* abertura mais curta: produto aparece mais cedo */
  .hero{padding-top:1.4rem; padding-bottom:2rem; gap:1.2rem}
  .hero-art{width:min(52%,12.5rem)}
  .hero h1{font-size:2.1rem}
  .lede{font-size:.95rem; margin-top:1rem}
  .hero-cta{margin-top:1.4rem}
  .hero-cta .btn{flex:1; min-height:3rem; padding-inline:.8rem; letter-spacing:.1em; white-space:nowrap}

  /* cabeçalho da vitrine enxuto */
  .shop-head{align-items:center; gap:.8rem}
  .shop-head h2{font-size:1.7rem}
  .shop-head .eyebrow{display:none}
  .count{display:none}

  /* alvos de toque >= 44px */
  .cat{min-height:2.75rem; padding-inline:1rem}
  .add{width:2.75rem; height:2.75rem; top:.5rem; right:.5rem}
  .buy{min-height:2.75rem; margin:0 .6rem .7rem; letter-spacing:.14em}
  .meta{padding:.75rem .75rem .6rem}
  .meta h3{font-size:.98rem}
  .grid{gap:.7rem}
  .bag-item .qty button{width:2.6rem; height:2.6rem}
  .rm{min-height:2.75rem}
  .x{width:2.75rem; height:2.75rem}

  /* folha do produto: CTA sempre visível no rodapé */
  .pdp-info{padding:1.3rem 1.2rem 0}
  .pdp-cta{
    position:sticky; bottom:0; z-index:2; display:grid; gap:.5rem;
    margin:0 -1.2rem; padding:.8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(255,252,247,0),var(--paper) 22%);
  }
  .pdp-notes{padding-bottom:1.2rem; order:9}
  .btn{min-height:3rem}

  .bagbar:not([hidden]){display:flex}
  body.has-bag .foot{padding-bottom:6rem}
  body.has-bag .toast{bottom:calc(5rem + env(safe-area-inset-bottom))}

  /* performance: textura fixa e desfoques custam caro no celular */
  .grain{display:none}
}
.pdp-cta{display:grid; gap:.6rem}

@media (pointer:coarse){
  .card:hover{transform:none}
  .card:hover .shot img{transform:none}
}