/* ==========================================================================
   BELLA PELLE — Protótipo E-commerce · Summer Skin, Verão 2027
   Sistema visual: editorial de moda, couro + pele, tons terrosos e dourados
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Oswald:wght@400;500;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,600&display=swap');

:root{
  /* paleta — extraída da campanha Summer Skin (couro, pele, ouro) */
  --ink:            #221a13;
  --ink-70:         rgba(34,26,19,.72);
  --ink-45:         rgba(34,26,19,.46);
  --ink-18:         rgba(34,26,19,.18);
  --ink-10:         rgba(34,26,19,.10);

  --cream:          #f4eee2;
  --cream-deep:     #e9dfc9;
  --paper:          #faf7f0;
  --paper-warm:     #efe6d6;

  --terracotta:      #ad5b2c;
  --terracotta-deep: #833f1d;
  --terracotta-soft: #e8c3a6;

  --rose:           #e3bcac;
  --rose-deep:      #c4907c;

  --gold:           #a17f37;
  --gold-soft:      #d9c48f;

  --line:           rgba(34,26,19,.14);
  --line-soft:      rgba(34,26,19,.08);

  --shadow-lg: 0 30px 60px -20px rgba(34,26,19,.35);
  --shadow-md: 0 16px 32px -18px rgba(34,26,19,.4);

  --font-display:'Libre Baskerville', 'Times New Roman', serif;
  --font-nav:'Oswald', sans-serif;
  --font-body:'Nunito Sans', -apple-system, sans-serif;

  --container-max: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --utility-h: 34px;

  --ease: cubic-bezier(.22,.68,0,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container-bp{
  width:100%;
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
}

.eyebrow{
  font-family: var(--font-nav);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.72rem;
  font-weight:500;
  color: var(--terracotta-deep);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:2em; height:1px;
  background: currentColor;
  display:inline-block;
}
.eyebrow.on-dark{ color: var(--gold-soft); }

.section{ padding-block: clamp(4rem, 9vw, 8rem); }
.section-tight{ padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section-tight.bg-cream-deep{ padding-bottom: clamp(4rem, 9vw, 8rem); }

.text-terracotta{ color: var(--terracotta); }
.text-ink-70{ color: var(--ink-70); }
.bg-cream-deep{ background: var(--cream-deep); }
.bg-paper{ background: var(--paper); }

/* ---------- botões ---------- */
.btn-brand,
.btn-brand-outline,
.btn-ghost{
  font-family: var(--font-nav);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:500;
  padding:.95em 1.9em;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  border:1px solid transparent;
  transition: all .35s var(--ease);
  white-space:nowrap;
}
.btn-brand{
  background: var(--ink);
  color: var(--paper);
}
.btn-brand:hover{
  background: var(--terracotta-deep);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-brand-outline{
  background:transparent;
  border-color: currentColor;
  color: var(--ink);
}
.btn-brand-outline.on-dark{ color:#fff; }
.btn-brand-outline:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-brand-outline.on-dark:hover{
  background:#fff; color: var(--ink); border-color:#fff;
}
.btn-link-arrow{
  font-family: var(--font-nav);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.55em;
  border-bottom:1px solid currentColor;
  padding-bottom:.25em;
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.btn-link-arrow:hover{ gap:.95em; color: var(--terracotta-deep); }

/* ==========================================================================
   UTILITY BAR + HEADER
   ========================================================================== */
.utility-bar{
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-nav);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.utility-bar .container-bp{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: var(--utility-h);
}
.utility-bar a{ color: var(--gold-soft); transition:opacity .25s; }
.utility-bar a:hover{ opacity:.7; }
.utility-bar .ub-left{ opacity:.72; }

@media (max-width: 767.98px){
  .utility-bar .ub-left{ display:none; }
  .utility-bar .container-bp{ justify-content:center; }
}

.site-header{
  position:sticky; top:0; z-index:1040;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), top .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .header-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  height:84px;
  transition: height .35s var(--ease);
}
.site-header.is-scrolled .header-inner{ height:68px; }

.site-header{ background: var(--cream); color: var(--ink); }
.site-header.hero-mode{ position:fixed; top: var(--utility-h); left:0; width:100%; background:transparent; color:#fff; border-color:transparent; }
.site-header.hero-mode.is-scrolled{
  top:0;
  background: rgba(244,238,226,.92);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(0,0,0,.3);
}

.nav-main{ display:flex; gap:2.1rem; align-items:center; }
.nav-main a{
  font-family: var(--font-nav);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  position:relative;
  padding-bottom:4px;
}
.nav-main a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:currentColor;
  transition:right .35s var(--ease);
}
.nav-main a:hover::after,
.nav-main a.active::after{ right:0; }

.brand-logo{ justify-self:center; display:flex; align-items:center; height:22px; }
.brand-logo svg{ height:20px; width:auto; fill:currentColor; }

.header-icons{ display:flex; align-items:center; gap:1.35rem; justify-self:end; }
.header-icons a, .header-icons button{
  background:none; border:none; color:currentColor; padding:0; line-height:1;
  position:relative; font-size:1.05rem; display:flex; align-items:center;
  transition:opacity .25s;
}
.header-icons a:hover, .header-icons button:hover{ opacity:.65; }
.bag-count{
  position:absolute; top:-8px; right:-10px;
  background: var(--terracotta);
  color:#fff;
  font-family: var(--font-nav);
  font-size:.6rem;
  width:16px; height:16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease);
}
.bag-count.bump{ transform: scale(1.35); }

.nav-toggle{ justify-self:start; display:none; }
@media (max-width: 991.98px){
  .nav-main{ display:none; }
  .nav-toggle{ display:flex; }
}

.search-panel{
  background: var(--paper);
  border-bottom:1px solid var(--line);
}
.search-panel .container-bp{ padding-block:1.4rem; }
.search-panel input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--ink);
  font-family: var(--font-display);
  font-style:italic;
  font-size:1.4rem;
  padding:.4rem 0;
}
.search-panel input:focus{ outline:none; }
.search-panel input::placeholder{ color: var(--ink-45); }

/* offcanvas nav */
.offcanvas-brand{ background: var(--cream); }
.offcanvas-brand .offcanvas-body a{
  font-family: var(--font-display);
  font-size:2rem;
  display:block;
  padding:.5rem 0;
  border-bottom:1px solid var(--line-soft);
}
.offcanvas-brand .offcanvas-footer{
  border-top:1px solid var(--line);
  padding-top:1.25rem;
  margin-top:1.5rem;
  font-family: var(--font-nav);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--ink-70);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  height:100svh;
  min-height:600px;
  overflow:hidden;
  background: var(--ink);
}
.hero video, .hero .hero-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: 50% 20%;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,14,9,.18) 0%, rgba(20,14,9,.08) 32%, rgba(20,14,9,.66) 88%, rgba(20,14,9,.86) 100%);
  z-index:1;
}
.hero-content{
  position:relative; z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  color:#fff;
}
.hero-content .eyebrow{ color: var(--gold-soft); opacity:0; animation: rise .9s var(--ease) .3s forwards; }
.hero-title{
  font-size: clamp(3.4rem, 10vw, 8rem);
  color:#fff;
  margin-block:.15em .25em;
  opacity:0; animation: rise 1s var(--ease) .5s forwards;
}
.hero-title em{ font-style:italic; color: var(--rose); }
.hero-sub{
  max-width:40ch;
  font-size:1.05rem;
  color: rgba(255,255,255,.82);
  margin-bottom:2rem;
  opacity:0; animation: rise .9s var(--ease) .75s forwards;
}
.hero-actions{ opacity:0; animation: rise .9s var(--ease) .95s forwards; display:flex; gap:1rem; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; left:50%; bottom:1.75rem; z-index:2;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: rgba(255,255,255,.75);
  font-family: var(--font-nav);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:0; animation: rise .9s var(--ease) 1.2s forwards;
}
.scroll-cue .line{ width:1px; height:34px; background: rgba(255,255,255,.55); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:#fff; animation: scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@keyframes rise{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }

/* ---------- marquee de credenciais ---------- */
.marquee{
  background: var(--ink);
  color: var(--cream);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.marquee-track{
  display:inline-flex;
  animation: marquee 32s linear infinite;
}
.marquee-track span{
  font-family: var(--font-nav);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  padding:.95rem 2.25rem;
  display:inline-flex;
  align-items:center;
  gap:2.25rem;
  color: var(--gold-soft);
}
.marquee-track span::after{ content:'✦'; color: var(--terracotta-soft); font-size:.7rem; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ==========================================================================
   SOBRE A MARCA
   ========================================================================== */
.about-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.about-media{ position:relative; }
.about-media img{
  width:100%;
  aspect-ratio: 4/5;
  object-fit:cover;
  object-position: 50% 18%;
  border-radius: 2px;
}
.about-badge{
  position:absolute;
  right:-1.25rem; bottom:-1.5rem;
  background: var(--terracotta);
  color:#fff;
  width:150px; height:150px;
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  box-shadow: var(--shadow-lg);
}
.about-badge strong{ font-family:var(--font-display); font-size:1.9rem; line-height:1; }
.about-badge span{ font-family:var(--font-nav); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; margin-top:.35rem; max-width:9ch; }

.about-copy h2{ font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom:1.25rem; }
.about-copy p{ color: var(--ink-70); font-size:1.02rem; max-width:52ch; }
.about-stats{
  display:flex; gap:clamp(1.5rem,4vw,3rem);
  margin-block:2rem;
  padding-top:1.75rem;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.about-stats div strong{ display:block; font-family:var(--font-display); font-size:1.9rem; color: var(--terracotta-deep); }
.about-stats div span{ font-family:var(--font-nav); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-70); }

/* ==========================================================================
   GRID DE PRODUTOS
   ========================================================================== */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section-head h2{ font-size: clamp(2rem, 4vw, 3.1rem); margin-top:.5rem; }

.product-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
}
.product-grid .pg-item{ grid-column: span 3; }
.product-grid .pg-item.feature{ grid-column: span 6; grid-row: span 2; }

@media (min-width: 768px){
  .product-grid .pg-item{ grid-column: span 2; }
  .product-grid .pg-item.feature{ grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 575.98px){
  .product-grid{ grid-template-columns: 1fr; }
  .product-grid .pg-item, .product-grid .pg-item.feature{ grid-column: span 1; grid-row: span 1; }
}

.product-card{ display:flex; flex-direction:column; height:100%; }
.card-media{
  position:relative;
  overflow:hidden;
  background: var(--cream-deep);
  height:100%;
  min-height:280px;
  border-radius:2px;
}
.pg-item.feature .card-media{ min-height:100%; }
.card-media > a{ display:block; width:100%; height:100%; }
.card-info h3 a{ color:inherit; transition:color .25s; }
.card-info h3 a:hover{ color: var(--terracotta-deep); }
.card-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease);
}
.product-card:hover .card-media img{ transform: scale(1.055); }

.card-media .card-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity .6s var(--ease);
  pointer-events:none;
}
.product-card:hover .card-media .card-video{ opacity:1; }
@media (max-width: 767.98px){
  .card-media .card-video{ opacity:1; }
}
.card-media.media-video-default .card-video{ opacity:1; }

.card-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(34,26,19,0) 45%, rgba(34,26,19,.78) 100%);
  opacity:0;
  transition: opacity .45s var(--ease);
  display:flex; align-items:flex-end; justify-content:center;
  padding: 1.5rem;
}
.product-card:hover .card-overlay{ opacity:1; }
.card-overlay .btn-brand{
  transform: translateY(14px);
  opacity:0;
  transition: all .45s var(--ease) .05s;
  width:100%;
  justify-content:center;
  background: var(--paper);
  color: var(--ink);
}
.card-overlay .btn-brand:hover{ background:#fff; }
.product-card:hover .card-overlay .btn-brand{ transform:translateY(0); opacity:1; }

.card-wishlist{
  position:absolute; top:1rem; right:1rem;
  width:36px; height:36px; border-radius:50%;
  background: rgba(250,247,240,.85);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  opacity:0; transform: translateY(-6px);
  transition: all .35s var(--ease);
  font-size:.95rem;
  border:none;
}
.product-card:hover .card-wishlist{ opacity:1; transform:translateY(0); }

.card-tag{
  position:absolute; top:1rem; left:1rem;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-nav);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.4em .85em;
  border-radius:999px;
}

.card-info{ padding-top:1.1rem; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.card-info h3{
  font-family: var(--font-body);
  font-weight:700;
  font-size:.92rem;
  line-height:1.35;
  text-transform:none;
  max-width:20ch;
}
.card-info .card-cat{
  display:block;
  font-family: var(--font-nav);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--terracotta-deep);
  margin-bottom:.3rem;
}
.card-price{
  font-family: var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  white-space:nowrap;
  color: var(--ink);
}

/* ==========================================================================
   EDITORIAL QUOTE
   ========================================================================== */
.editorial{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  background: var(--ink);
  overflow:hidden;
}
.editorial img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position: 65% top;
  opacity:.92;
}
.editorial::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(20,14,9,.88) 0%, rgba(20,14,9,.55) 42%, rgba(20,14,9,.12) 75%);
}
.editorial-content{
  position:relative; z-index:2;
  max-width:640px;
  padding-block:5rem;
}
.editorial-content p.quote{
  font-family: var(--font-display);
  font-style:italic;
  color:#fff;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height:1.28;
}
.editorial-content .attribution{
  margin-top:2rem;
  font-family: var(--font-nav);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  color: var(--gold-soft);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--ink); color: var(--cream); padding-top:5rem; }
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap:2.5rem;
  padding-bottom:3.5rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width: 767.98px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
.footer-brand .brand-logo{ justify-self:start; margin-bottom:1.1rem; }
.footer-brand p{ color: rgba(244,238,226,.62); max-width:34ch; font-size:.92rem; }
.footer-social{ display:flex; gap:1rem; margin-top:1.5rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(244,238,226,.25);
  display:flex; align-items:center; justify-content:center;
  transition: all .3s;
}
.footer-social a:hover{ background: var(--gold-soft); color: var(--ink); border-color: var(--gold-soft); }

.footer-col h4{
  font-family: var(--font-nav);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--gold-soft);
  margin-bottom:1.25rem;
  font-weight:500;
}
.footer-col a, .footer-col address{
  display:block;
  color: rgba(244,238,226,.72);
  font-size:.92rem;
  margin-bottom:.75rem;
  font-style:normal;
  transition: color .25s;
}
.footer-col a:hover{ color:#fff; }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.5rem;
  font-family: var(--font-nav);
  font-size:.68rem;
  letter-spacing:.06em;
  color: rgba(244,238,226,.5);
  flex-wrap:wrap; gap:1rem;
}
.footer-bottom a{ color: rgba(244,238,226,.75); }
.footer-bottom a:hover{ color: var(--gold-soft); }

.footer-wordmark{
  overflow:hidden;
  line-height:.78;
  text-align:center;
  user-select:none;
  padding-top: .3em;
}
.footer-wordmark span{
  font-family: var(--font-nav);
  font-weight:600;
  font-size: clamp(4.5rem, 15vw, 12.5rem);
  letter-spacing:-.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,238,226,.25);
  white-space:nowrap;
}

/* ==========================================================================
   COLLECTION PAGE
   ========================================================================== */
.page-hero{
  background: var(--cream-deep);
  padding-top: clamp(6rem, 12vw, 9rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow:hidden;
}
.page-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:end;
}
.page-hero h1{
  font-size: clamp(3rem, 7vw, 5.6rem);
  margin-block: .6rem 1.25rem;
}
.page-hero p.lead{
  font-family: var(--font-display);
  font-style:italic;
  font-size:1.2rem;
  color: var(--ink-70);
  max-width:56ch;
}
.page-hero-media{ position:relative; }
.page-hero-media img{
  width:100%; aspect-ratio: 3/4; object-fit:cover; object-position:50% 15%;
  border-radius:2px;
  box-shadow: var(--shadow-lg);
}
.page-hero-media .pill{
  position:absolute; left:-1.1rem; bottom:1.75rem;
  background: var(--ink); color:var(--cream);
  font-family:var(--font-nav); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.8em 1.3em; border-radius:999px;
  box-shadow: var(--shadow-md);
}

.filter-bar{
  position:sticky; top:68px; z-index:20;
  background: var(--cream);
  border-bottom:1px solid var(--line);
  padding-block:1.1rem;
}
.filter-pills{ display:flex; gap:.6rem; flex-wrap:wrap; }
.filter-pill{
  font-family: var(--font-nav);
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.55em 1.35em;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color: var(--ink-70);
  transition: all .3s var(--ease);
}
.filter-pill:hover{ border-color: var(--ink); color: var(--ink); }
.filter-pill.active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filter-count{
  margin-left:auto;
  font-family: var(--font-nav);
  font-size:.72rem;
  letter-spacing:.08em;
  color: var(--ink-45);
  text-transform:uppercase;
  align-self:center;
}
.filter-bar .container-bp{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }

.collection-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
}
@media (max-width: 991.98px){ .collection-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ .collection-grid{ grid-template-columns: 1fr; } }
.collection-grid .card-media{ aspect-ratio: 3/4; height:auto; min-height:0; }

/* ==========================================================================
   PÁGINA DE PRODUTO (PDP)
   ========================================================================== */
.pdp-breadcrumb{
  background: var(--cream);
  border-bottom:1px solid var(--line-soft);
}
.pdp-breadcrumb .container-bp{
  display:flex; align-items:center; flex-wrap:wrap; gap:.55rem;
  padding-block:1rem;
  font-family: var(--font-nav);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pdp-breadcrumb a{ color: var(--ink-45); transition:color .25s; }
.pdp-breadcrumb a:hover{ color: var(--terracotta-deep); }
.pdp-breadcrumb span{ color: var(--ink-45); }
.pdp-breadcrumb .current{ color: var(--ink-70); }

.pdp{ display:flex; align-items:flex-start; background: var(--cream); }

.pdp-gallery{
  width:50%;
  position:sticky;
  top:0;
  height:100svh;
  min-height:520px;
  flex-shrink:0;
}
.pdp-stage{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  background: var(--cream-deep);
}
.pdp-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 14%;
  opacity:0;
  transform: scale(1.045);
  transition: opacity .8s var(--ease), transform 1.4s var(--ease);
  pointer-events:none;
}
.pdp-media.active{ opacity:1; transform: scale(1); z-index:1; }

.pdp-stage-ui{
  position:absolute; top:1.5rem; left:1.5rem; right:1.5rem; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.pdp-counter{
  font-family: var(--font-nav);
  font-size:.68rem;
  letter-spacing:.12em;
  background: rgba(250,247,240,.85);
  color: var(--ink);
  padding:.5em .9em;
  border-radius:999px;
}
.pdp-counter .sep{ color: var(--ink-45); margin-inline:.25em; }
.pdp-sound{
  pointer-events:auto;
  width:36px; height:36px; border-radius:50%;
  background: rgba(250,247,240,.85);
  border:none; color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
  opacity:0; visibility:hidden;
  transition: all .3s var(--ease);
}
.pdp-stage.is-video .pdp-sound{ opacity:1; visibility:visible; pointer-events:auto; }

.pdp-thumbs{
  position:absolute; left:1.5rem; bottom:1.5rem; z-index:3;
  display:flex; gap:.6rem;
}
.pdp-thumb{
  position:relative;
  width:56px; height:72px;
  border-radius:2px;
  overflow:hidden;
  border:1px solid rgba(250,247,240,.5);
  padding:0;
  opacity:.6;
  transition: all .3s var(--ease);
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb .play-badge{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(34,26,19,.28);
  color:#fff;
  font-size:.85rem;
}
.pdp-thumb:hover{ opacity:.85; }
.pdp-thumb.active{ opacity:1; border-color:#fff; box-shadow: var(--shadow-md); }

.pdp-info{
  width:50%;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.pdp-info-inner{
  max-width:560px;
  margin-inline:auto;
  padding-inline: clamp(2rem, 6vw, 5.5rem);
}

.pdp-title{
  font-size: clamp(2.3rem, 3.4vw, 3.1rem);
  margin-block:.6rem 0;
}
.gold-shimmer{
  font-style:italic;
  color: var(--gold);
  background-image: linear-gradient(100deg, var(--terracotta-deep) 0%, var(--gold) 22%, var(--gold-soft) 42%, #fff3d6 50%, var(--gold-soft) 58%, var(--gold) 78%, var(--terracotta-deep) 100%);
  background-size: 220% auto;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.pdp-price-row{ display:flex; align-items:baseline; gap:.8rem; margin-top:1.1rem; flex-wrap:wrap; }
.pdp-price{ font-family: var(--font-display); font-style:italic; font-size:1.9rem; color: var(--ink); }
.pdp-installment{ font-family: var(--font-nav); font-size:.72rem; letter-spacing:.04em; color: var(--ink-45); text-transform:uppercase; }

.pdp-desc{ color: var(--ink-70); font-size:1rem; max-width:48ch; margin-top:1.5rem; }

.pdp-divider{ border:none; border-top:1px solid var(--line); margin-block:2rem; }

.pdp-label{
  font-family: var(--font-nav);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--ink-70);
  display:block;
  margin-bottom:.9rem;
}
.pdp-color-row{ display:flex; align-items:center; gap:.9rem; margin-bottom:2rem; }
.color-swatch{
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--paper);
  outline:1px solid var(--line);
  background: conic-gradient(from 210deg, #7a5a26, #d9c48f, #f4e6bd, #a17f37, #7a5a26);
  cursor:default;
}
.pdp-color-row .color-name{ font-size:.92rem; color: var(--ink); font-weight:600; }

.pdp-size-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.pdp-size-head .pdp-label{ margin-bottom:0; }
.size-pills{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.25rem; }
.size-pill{
  font-family: var(--font-nav);
  font-size:.8rem;
  letter-spacing:.04em;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color: var(--ink-70);
  transition: all .3s var(--ease);
}
.size-pill:hover{ border-color: var(--ink); color: var(--ink); }
.size-pill.active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

.pdp-actions{ display:flex; gap:.9rem; align-items:stretch; }
.qty-stepper{
  display:flex; align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  flex-shrink:0;
}
.qty-stepper button{
  width:44px; height:56px;
  background:transparent; border:none;
  color: var(--ink); font-size:1rem;
  transition: background .25s;
}
.qty-stepper button:hover{ background: var(--cream-deep); }
.qty-stepper .qty-value{
  width:34px; text-align:center;
  font-family: var(--font-nav); font-size:.9rem;
}
.pdp-actions .btn-brand{
  flex:1;
  height:56px;
  justify-content:center;
  font-size:.82rem;
}
.pdp-wishlist-btn{
  width:56px; height:56px; flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  transition: all .3s var(--ease);
}
.pdp-wishlist-btn:hover{ border-color: var(--terracotta-deep); color: var(--terracotta-deep); }
.pdp-wishlist-btn.active{ background: var(--terracotta-deep); border-color: var(--terracotta-deep); color:#fff; }

.pdp-trust{
  display:flex; flex-wrap:wrap;
  gap:1.5rem;
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.pdp-trust div{ display:flex; align-items:center; gap:.6rem; max-width:14rem; }
.pdp-trust i{ font-size:1.15rem; color: var(--terracotta-deep); }
.pdp-trust span{ font-family: var(--font-nav); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-70); line-height:1.3; }

.pdp-accordion{
  margin-top:2.5rem;
  --bs-accordion-bg:transparent;
  --bs-accordion-border-color:var(--line);
  --bs-accordion-border-width:1px;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-active-bg:transparent;
  --bs-accordion-active-color:var(--terracotta-deep);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23221a13'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23833f1d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.pdp-accordion .accordion-item{ border-left:none; border-right:none; }
.pdp-accordion .accordion-item:first-of-type{ border-top:1px solid var(--line); }
.pdp-accordion .accordion-button{
  font-family: var(--font-nav);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--ink);
  padding:1.3rem .1rem;
  box-shadow:none;
}
.pdp-accordion .accordion-button:not(.collapsed){ color: var(--terracotta-deep); }
.pdp-accordion .accordion-body{
  padding:0 .1rem 1.6rem;
  color: var(--ink-70);
  font-size:.92rem;
  line-height:1.75;
}
.pdp-accordion .accordion-body ul{ padding-left:1.1rem; margin-bottom:0; }
.pdp-accordion .accordion-body li{ margin-bottom:.4rem; }

@media (max-width: 991.98px){
  .pdp{ flex-direction:column; }
  .pdp-gallery{ width:100%; position:static; height:auto; aspect-ratio: 4/5; min-height:0; }
  .pdp-info{ width:100%; padding-block: clamp(2.5rem, 8vw, 3.5rem); }
  .pdp-info-inner{ max-width:none; padding-inline: clamp(1.5rem, 6vw, 3rem); }
}
@media (max-width: 575.98px){
  .pdp-gallery{ aspect-ratio: 3/4; }
  .pdp-actions{ flex-wrap:wrap; }
  .pdp-actions .btn-brand{ order:1; flex-basis:100%; }
}

/* ==========================================================================
   OFFCANVAS SACOLA / MODAL LOJISTA
   ========================================================================== */
.offcanvas-bag{ background: var(--paper); }
.offcanvas-bag .offcanvas-header{ border-bottom:1px solid var(--line); }
.offcanvas-bag .offcanvas-title{ font-family: var(--font-display); font-size:1.5rem; }
.bag-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; height:100%; gap:1.25rem; color: var(--ink-70); padding-block:3rem;
}
.bag-empty i{ font-size:2.4rem; color: var(--ink-18); }

.modal-lojista .modal-content{ background: var(--paper); border-radius:2px; border:none; }
.modal-lojista .modal-header{ border-bottom:1px solid var(--line); }
.modal-lojista .modal-title{ font-family: var(--font-display); font-size:1.6rem; }
.modal-lojista .form-label{
  font-family: var(--font-nav); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-70);
}
.modal-lojista .form-control{
  border-radius:0; border:none; border-bottom:1px solid var(--line);
  padding-inline:0; background:transparent;
}
.modal-lojista .form-control:focus{ box-shadow:none; border-color: var(--ink); }

.toast-brand{
  background: var(--ink); color: var(--cream);
  font-family: var(--font-nav); font-size:.78rem; letter-spacing:.04em;
  border-radius:2px; border:none;
}

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-stagger.in-view .r-item{ opacity:1; transform:none; }
.reveal-stagger .r-item{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger .r-item:nth-child(1){ transition-delay:.02s; }
.reveal-stagger .r-item:nth-child(2){ transition-delay:.1s; }
.reveal-stagger .r-item:nth-child(3){ transition-delay:.18s; }
.reveal-stagger .r-item:nth-child(4){ transition-delay:.26s; }
.reveal-stagger .r-item:nth-child(5){ transition-delay:.34s; }
.reveal-stagger .r-item:nth-child(6){ transition-delay:.42s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal .r-item, .reveal-stagger .r-item, .hero-content *{ transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none; }
}