:root{
  --paper:#faf6f0;
  --beige:#e8ded0;
  --brown:#49372d;
  --green:#343d36;
  --muted:#80746a;
  --line:#49372d28}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body{
  margin:0;
  background:var(--paper);
  color:var(--brown);
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px}
button,a{
  -webkit-tap-highlight-color:transparent}
a{
  color:inherit;
  text-decoration:none}
button{
  font:inherit;
  cursor:pointer}
button:focus-visible,a:focus-visible{
  outline:2px solid #8e744e;
  outline-offset:5px}
.announcement{
  background:var(--green);
  color:var(--paper);
  text-align:center;
  font-size:9px;
  letter-spacing:2.8px;
  padding:12px}
header{
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6%;
  border-bottom:1px solid var(--line);
  background:var(--paper)}
.brand{
  font-family:Georgia,serif;
  font-size:33px;
  letter-spacing:2px;
  display:inline-block}
.brand span{
  display:block;
  text-align:center;
  font:8px Arial;
  letter-spacing:3px;
  margin-top:7px}
nav{
  display:flex;
  gap:38px;
  font-size:12px}
nav a:hover,.text-link:hover{
  color:#9b785c}
.bag{
  background:none;
  border:0;
  color:var(--brown);
  display:flex;
  gap:13px;
  align-items:center;
  font-size:12px}
.bag span{
  border:1px solid var(--line);
  border-radius:50%;
  width:26px;
  height:26px;
  display:grid;
  place-items:center}
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:640px}
.hero-copy{
  padding:76px 9% 38px 12%}
.eyebrow{
  font-size:9px;
  font-weight:500;
  letter-spacing:2.2px;
  line-height:1.6}
h1,h2{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-2.5px;
  margin:27px 0}
h1{
  font-size:clamp(52px,5.6vw,86px);
  line-height:1.04}
em{
  font-weight:400;
  color:#88735d}
h2{
  font-size:clamp(38px,4vw,59px);
  line-height:1.12}
.hero-copy>p:not(.eyebrow),.essence-copy>p:not(.eyebrow),.instagram>p:not(.eyebrow){
  font-size:13px;
  line-height:1.9;
  color:var(--muted)}
.button{
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:36px;
  border:1px solid var(--brown);
  background:var(--brown);
  color:var(--paper);
  padding:18px 24px;
  font-size:12px;
  margin-top:20px;
  transition:background .25s,transform .25s}
.button:hover{
  background:var(--green);
  transform:translateY(-2px)}
.button span{
  font-size:20px}
.hero-foot{
  display:flex;
  gap:15px;
  align-items:center;
  margin-top:50px;
  font-size:10px;
  line-height:1.7;
  color:var(--muted)}
.tiny-flower{
  font-size:32px;
  color:var(--brown)}
.hero-art{
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%,#f0e3cd,transparent 65%),linear-gradient(120deg,#d2bfa4,#bba48c);
  isolation:isolate;
  min-height:600px}
.sun{
  position:absolute;
  width:80%;
  height:85%;
  background:#eadbc3;
  border-radius:50% 50% 0 0;
  top:10%;
  left:27%;
  box-shadow:inset -30px 0 70px #b1997950}
.pedestal{
  position:absolute;
  width:95%;
  height:25%;
  background:linear-gradient(110deg,#dbc9ae,#bca589);
  left:13%;
  bottom:-4%;
  transform:skewY(-8deg);
  box-shadow:0 -10px 30px #6a4b3425}
.tray{
  position:absolute;
  width:69%;
  height:16%;
  border-radius:50%;
  background:linear-gradient(#ccb79a,#ae9474);
  bottom:12%;
  left:16%;
  transform:rotate(-10deg);
  border:9px solid #d5c3a9;
  box-shadow:5px 25px 25px #44302430,inset 0 6px 9px #7b614849}
.candle{
  position:absolute;
  width:34%;
  height:42%;
  left:29%;
  bottom:26%;
  border-radius:15% 15% 12% 12% / 5% 5% 7% 7%;
  background:linear-gradient(90deg,#6b4d34,#ad8661 45%,#765438);
  box-shadow:20px 25px 30px #4a302530,inset 3px 0 8px #dbb88f}
.candle:before{
  content:'';
  position:absolute;
  top:-3%;
  height:8%;
  width:100%;
  border-radius:50%;
  background:#eadbc2;
  border:5px solid #ae8e68}
.wick{
  position:absolute;
  top:-10%;
  left:49%;
  height:10%;
  width:2px;
  background:#3c2d20}
.flame{
  position:absolute;
  top:-22%;
  left:45%;
  width:11%;
  height:17%;
  background:radial-gradient(ellipse at bottom,#fff8c5,#ffcf70 60%,#eba65a);
  border-radius:70% 30% 60% 40%;
  transform:rotate(10deg);
  box-shadow:0 0 25px #ffdb9e;
  animation:flicker 3s ease-in-out infinite}
.label{
  position:absolute;
  background:#f0e6d5;
  left:12%;
  right:12%;
  top:33%;
  padding:22% 3%;
  font:clamp(12px,1.4vw,22px) Georgia;
  text-align:center;
  letter-spacing:1px}
.label small{
  display:block;
  font:5px Arial;
  letter-spacing:1px;
  margin-top:12px}
.label b{
  display:block;
  font:italic 10px Georgia;
  margin-top:13px}
.soap{
  position:absolute;
  width:26%;
  height:13%;
  border-radius:30%;
  box-shadow:9px 14px 18px #49372d29}
.soap-one{
  background:linear-gradient(140deg,#b6b59a,#71765d);
  bottom:18%;
  left:58%;
  transform:rotate(-16deg)}
.soap-two{
  background:linear-gradient(140deg,#eee0c6,#c5af8d);
  bottom:25%;
  left:61%;
  transform:rotate(-24deg);
  border:1px solid #e1d1b6}
.branch{
  position:absolute;
  width:1px;
  height:230px;
  background:#535840;
  right:10%;
  top:15%;
  transform:rotate(30deg)}
.branch i{
  position:absolute;
  width:20px;
  height:70px;
  border-radius:90% 0 90% 0;
  background:linear-gradient(45deg,#566047,#92967b);
  left:0;
  top:15%;
  transform:rotate(20deg);
  transform-origin:bottom}
.branch i:nth-child(2){
  top:35%;
  left:-20px;
  transform:rotate(-45deg)}
.branch i:nth-child(3){
  top:50%}
.branch i:nth-child(4){
  top:65%;
  left:-20px;
  transform:rotate(-45deg)}
.branch i:nth-child(5){
  top:-5%;
  transform:rotate(-15deg)}
.art-note{
  position:absolute;
  top:28px;
  left:30px;
  font-size:8px;
  letter-spacing:2px;
  writing-mode:vertical-rl}
.image-note{
  position:absolute;
  bottom:20px;
  right:25px;
  font-size:7px;
  letter-spacing:1.8px;
  opacity:.6}
.values{
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  padding:27px 4%;
  border-bottom:1px solid var(--line);
  font-size:10px;
  letter-spacing:1px}
.values b{
  font-size:15px;
  font-weight:400;
  color:#9e8a71}
.collection{
  padding:95px 6%}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center}
.section-heading h2{
  margin:15px 0 35px}
.section-heading>p{
  color:var(--muted);
  font-size:12px;
  line-height:1.8}
.category-tabs{
  display:flex;
  border-bottom:1px solid var(--line);
  gap:35px}
.category-tabs button{
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--muted);
  padding:18px 0;
  font-size:13px}
.category-tabs button[aria-selected=true]{
  border-color:var(--brown);
  color:var(--brown)}
.category-tabs span{
  font-size:8px;
  margin-left:13px}
.catalog-caption{
  display:flex;
  justify-content:space-between;
  margin:25px 0;
  font-size:12px;
  color:var(--muted)}
.catalog-caption small{
  font-size:8px;
  letter-spacing:1px}
.products{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:27px}
.product-picture{
  height:320px;
  background:#eee5d8;
  position:relative;
  overflow:hidden}
.product-picture:after{
  content:'';
  position:absolute;
  inset:auto 10% 10%;
  height:12%;
  background:#49372d16;
  filter:blur(12px);
  border-radius:50%}
.product-picture .candle{
  width:35%;
  height:49%;
  bottom:20%;
  left:32%;
  transition:transform .5s}
.product-picture:hover .candle,.product-picture:hover .product-soap,.product-picture:hover .product-tray{
  transform:translateY(-8px) rotate(-3deg)}
.product-picture .label{
  padding:16% 2%;
  font-size:16px}
.product-picture .label small{
  font-size:4px;
  margin-top:7px}
.product-picture.tone-1{
  background:#e1e3d9}
.tone-1 .candle{
  background:linear-gradient(90deg,#59604e,#92987c,#505c49)}
.product-picture.tone-2{
  background:#e9ded4}
.tone-2 .candle{
  background:linear-gradient(90deg,#c7b49b,#f0e2cb,#b9a387)}
.product-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:19px;
  gap:10px}
.product-top h3{
  font:22px Georgia;
  margin:0}
.product-top button{
  flex-shrink:0;
  width:35px;
  height:35px;
  border:1px solid var(--line);
  border-radius:50%;
  background:none;
  color:var(--brown);
  font-size:23px;
  transition:.2s}
.product-top button:hover{
  color:white;
  background:var(--green)}
.product-description{
  font-size:11px;
  color:var(--muted);
  margin:9px 0 17px}
.price{
  font-size:12px}
.product-soap{
  position:absolute;
  left:26%;
  top:30%;
  width:48%;
  height:40%;
  background:linear-gradient(145deg,#e3d1ad,#b4a17d);
  border-radius:29%;
  transform:rotate(-18deg);
  box-shadow:15px 23px 20px #49372d25;
  transition:transform .5s;
  display:grid;
  place-items:center;
  font:15px Georgia;
  color:#907e5c;
  letter-spacing:3px}
.tone-1 .product-soap{
  background:linear-gradient(145deg,#aeb297,#777e61);
  color:#5d654d}
.tone-2 .product-soap{
  background:linear-gradient(145deg,#e4ccbb,#bba18f)}
.product-tray{
  position:absolute;
  left:17%;
  top:33%;
  width:66%;
  height:38%;
  border:13px solid #d6c5ae;
  border-radius:50%;
  background:#baa78e;
  box-shadow:10px 24px 20px #49372d25,inset 0 9px 12px #7a655744;
  transform:rotate(-20deg);
  transition:transform .5s}
.tone-1 .product-tray{
  border-color:#9c9f88;
  background:#81876d;
  border-radius:25%}
.tone-2 .product-tray{
  width:44%;
  height:44%;
  left:28%;
  top:28%;
  border-width:10px;
  background:#cbb99f}
.essence{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--beige)}
.essence-art{
  min-height:520px;
  background:var(--green);
  color:var(--beige);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center}
.line-circle{
  position:absolute;
  border:1px solid #e8ded026;
  width:380px;
  height:420px;
  border-radius:50%;
  transform:rotate(-25deg)}
.big-flower{
  font-size:65px;
  font-weight:100}
.essence-art>p{
  font:44px Georgia;
  z-index:1;
  line-height:1.25}
.essence-art em{
  color:#c2b59f}
.essence-art .eyebrow{
  font-size:7px;
  z-index:1}
.essence-copy{
  padding:70px 13%}
.essence-copy h2{
  font-size:47px}
.text-link{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:15px 0;
  margin-top:25px;
  font-size:12px}
.instagram{
  text-align:center;
  padding:95px 25px 100px;
  position:relative;
  overflow:hidden}
.instagram h2{
  margin:23px 0}
.outline{
  background:transparent;
  color:var(--brown)}
.outline:hover{
  color:var(--paper)}
.instagram-mark{
  position:absolute;
  right:-50px;
  top:50px;
  font:350px Georgia;
  color:#e8ded055;
  z-index:-1}
footer{
  background:var(--brown);
  color:var(--beige);
  padding:55px 6% 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:25px}
footer>p{
  font-size:12px;
  line-height:1.8;
  color:#c6b6a7}
footer>a:not(.brand){
  font-size:11px}
.footer-bottom{
  border-top:1px solid #ffffff20;
  width:100%;
  display:flex;
  justify-content:space-between;
  padding-top:22px;
  margin-top:25px;
  font-size:9px;
  color:#bdac9c}
dialog{
  position:fixed;
  inset:0 0 0 auto;
  margin:0;
  height:100%;
  max-height:100%;
  width:460px;
  max-width:100%;
  padding:30px;
  border:0;
  background:var(--paper);
  color:var(--brown)}
dialog[open]{
  display:flex;
  flex-direction:column}
dialog::backdrop{
  background:#241c1666;
  backdrop-filter:blur(4px)}
body:has(dialog[open]){
  overflow:hidden}
.cart-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:18px}
.cart-header h2{
  font-size:35px;
  margin:10px 0;
  letter-spacing:-1px}
.icon-button{
  border:1px solid var(--line);
  border-radius:50%;
  background:none;
  width:37px;
  height:37px;
  font-size:25px;
  color:var(--brown)}
#cartItems{
  flex:1;
  overflow-y:auto;
  padding:15px 0}
.empty-cart{
  text-align:center;
  padding:70px 15px;
  color:var(--muted);
  line-height:1.8}
.cart-row{
  padding:20px 0;
  border-bottom:1px solid var(--line)}
.cart-row-top{
  display:flex;
  justify-content:space-between;
  gap:10px}
.cart-row h3{
  font:20px Georgia;
  margin:0 0 8px}
.cart-row small{
  color:var(--muted)}
.quantity{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:15px}
.quantity button{
  background:transparent;
  border:1px solid var(--line);
  width:28px;
  height:28px;
  color:var(--brown)}
.quantity .remove{
  margin-left:auto;
  border:0;
  width:auto;
  text-decoration:underline;
  font-size:11px}
.total{
  display:flex;
  justify-content:space-between;
  font-size:18px}
.cart-bottom{
  border-top:1px solid var(--line);
  padding-top:22px}
.cart-bottom p{
  font-size:11px;
  line-height:1.6;
  color:var(--muted)}
.cart-bottom .button{
  width:100%;
  margin-top:12px}
.button:disabled{
  opacity:.4;
  cursor:not-allowed;
  transform:none}
.continue{
  display:block;
  border:0;
  background:none;
  margin:18px auto 0;
  color:var(--brown);
  font-size:12px}
#checkoutNote{
  color:var(--brown)}
#toast{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,20px);
  background:var(--green);
  color:var(--paper);
  padding:16px 24px;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:10;
  max-width:90%;
  font-size:12px;
  text-align:center}
#toast.show{
  opacity:1;
  transform:translate(-50%,0)}
@keyframes flicker{
  50%{
  transform:rotate(-5deg) scale(.95,1.05)}
}
/* =========================================
   D.LUMUS — ÍCONES SVG
   COMPATÍVEIS COM IPHONE E DESKTOP
========================================= */

.dl-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.12em;
    color: inherit;
}

/* BOTÕES E LINKS */

.button .dl-icon,
.text-link .dl-icon {
    width: 20px;
    height: 20px;
}

/* RODAPÉ */

.footer-column .dl-icon {
    width: 15px;
    height: 15px;
}

/* CATEGORIAS */

.category-symbol .dl-icon {
    width: 1em;
    height: 1em;
}

/* ELEMENTOS DECORATIVOS */

.tiny-flower .dl-icon,
.big-flower .dl-icon {
    width: 1em;
    height: 1em;
}

/* IMAGENS PROVISÓRIAS */

.product-placeholder .dl-icon {
    width: 40px;
    height: 40px;
}
@media(min-width:1500px){
  body{
  max-width:1800px;
  margin:auto}
.hero{
  min-height:730px}
}
@media(max-width:850px){
  header{
  padding:0 5%;
  height:95px}
nav{
  gap:18px;
  font-size:11px}
.hero-copy{
  padding:60px 8%}
.hero-art{
  min-height:550px}
.hero{
  min-height:550px}
h1{
  font-size:56px}
.hero-foot{
  margin-top:30px}
.product-picture{
  height:250px}
.essence-copy{
  padding:50px 9%}
.essence-copy h2{
  font-size:37px}
.essence-art{
  min-height:480px}
.category-tabs{
  gap:25px}
.product-top h3{
  font-size:19px}
}
@media(max-width:600px){
  .announcement{
  font-size:7px;
  padding:11px}
.brand{
  font-size:27px}
.brand span{
  font-size:6px}
header{
  height:85px;
  flex-wrap:wrap}
nav{
  order:3;
  width:100%;
  justify-content:center;
  gap:30px;
  padding-bottom:12px}
header>.brand,header>.bag{
  margin-top:10px}
.hero{
  grid-template-columns:1fr}
.hero-copy{
  padding:45px 7% 35px}
.hero h1{
  font-size:64px;
  margin:20px 0}
.hero-copy .eyebrow{
  font-size:8px}
.hero-copy>p:not(.eyebrow){
  font-size:12px}
.hero-foot{
  margin-top:25px}
.hero-art{
  min-height:450px}
.label{
  font-size:20px}
.values{
  gap:18px;
  flex-wrap:wrap;
  padding:22px;
  font-size:9px}
.values b:nth-of-type(2){
  display:none}
.values span{
  width:39%;
  text-align:center}
.collection{
  padding:60px 6%}
.section-heading{
  display:block}
.section-heading>p{
  margin:0 0 22px}
.section-heading h2{
  margin-bottom:18px}
.category-tabs{
  gap:0;
  justify-content:space-between}
.category-tabs button{
  font-size:11px;
  padding:15px 0}
.category-tabs span{
  display:none}
.catalog-caption{
  gap:12px;
  flex-direction:column;
  font-size:11px}
.catalog-caption small{
  font-size:7px}
.products{
  grid-template-columns:1fr;
  gap:33px}
.product-picture{
  height:360px}
.product-picture .candle{
  width:32%;
  left:34%}
.product-top h3{
  font-size:24px}
.product-description{
  font-size:12px}
.essence{
  grid-template-columns:1fr}
.essence-art{
  min-height:380px}
.line-circle{
  width:300px;
  height:340px}
.essence-copy{
  padding:45px 8%}
.essence-copy h2{
  font-size:42px}
.instagram{
  padding:65px 7%}
.instagram h2{
  font-size:47px}
footer{
  padding:40px 7% 20px}
footer>p{
  font-size:10px}
.footer-bottom{
  margin-top:10px}
dialog{
  padding:23px}
.desktop{
  display:none}
}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*:before,*:after{
  animation:none!important;
  transition:none!important}
}


/* =========================================================
   DIREÇÃO EDITORIAL — FOTOGRAFIAS E LAYOUT DE REFERÊNCIA
   Os caminhos das fotos estão no início de script.js.
   Ajuste object-position abaixo para mudar o recorte do banner.
   ========================================================= */
body {
   max-width: none;
   }

header {
   position: absolute;
   inset: 0 0 auto;
   z-index: 5;
   height: 105px;
   background: transparent;
   border: 0;
   }

header nav a {
   padding: 10px 0;
   }

.brand-image {
   display: block;
   width: 160px;
   height: 65px;
   object-fit: contain;
   }

.hero {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 760px;
   isolation: isolate;
   background: #dfceba;
   }

.hero-copy {
   width: 100%;
   padding: 160px 7% 75px;
   position: relative;
   z-index: 2;
   }

.hero h1 {
   font-size: clamp(50px, 6.1vw, 94px);
   line-height: 1.02;
   max-width: 850px;
   letter-spacing: -3.5px;
   }

.hero h1 em {
   color: inherit;
   font-style: normal;
   }

.hero-copy > p:not(.eyebrow) {
   color: #625044;
   font-size: 16px;
   line-height: 1.8;
   }

.hero-foot {
   margin-top: 30px;
   color: #625044;
   }

.hero-media {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
   background: radial-gradient(ellipse at 90% 80%, #a58e72, transparent 55%), linear-gradient(115deg, #f1e5d4, #c2ac91);
   }

.hero-media::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(90deg, #faf1e6e8 0%, #faf1e6bd 28%, #faf1e665 48%, transparent 76%);
   pointer-events: none;
   }

.image-slot > img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transition: opacity .6s ease, transform .7s ease;
   }

.image-slot > img.is-loaded {
   opacity: 1;
   }

.hero-media > img {
   object-position: 65% center;
   }

.photo-placeholder {
   position: absolute;
   right: 8%;
   top: 46%;
   font: 52px Georgia, serif;
   color: #49372d55;
   letter-spacing: 7px;
   text-align: center;
   }

.photo-placeholder small {
   display: block;
   font: 8px Arial, sans-serif;
   letter-spacing: 4px;
   margin-top: 18px;
   }

.has-photo .photo-placeholder, .has-photo .product-placeholder, .has-photo .category-symbol {
   visibility: hidden;
   }

.values {
   background: var(--paper);
   }

.collection {
   padding: 75px 6% 85px;
   }

.category-tabs {
   gap: 24px;
   border-bottom: 0;
   }

.category-tabs button {
   flex: 1;
   text-align: left;
   border: 0;
   padding: 0 0 16px;
   min-width: 0;
   border-bottom: 1px solid var(--line);
   }

.category-tabs button[aria-selected=true] {
   border-bottom: 2px solid var(--green);
   color: var(--green);
   }

.category-tabs .category-photo {
   display: grid;
   place-items: center;
   position: relative;
   width: 100%;
   height: 140px;
   margin: 0 0 15px;
   overflow: hidden;
   background: #e5d8c7;
   }

.category-tabs button:nth-child(2) .category-photo {
   background: #d9ddce;
   }

.category-tabs button:nth-child(3) .category-photo {
   background: #dccbbb;
   }

.category-tabs .category-symbol {
   font-size: 38px;
   color: #49372d55;
   margin: 0;
   }

.category-tabs .category-name {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0;
   font: 22px Georgia, serif;
   }

.category-name small {
   font: 9px Arial, sans-serif;
   }

.category-tabs button:hover img {
   transform: scale(1.04);
   }

.product-picture {
   height: auto;
   aspect-ratio: 1.12;
   }

.product-picture::after {
   display: none;
   }

.product-picture:hover > img {
   transform: scale(1.035);
   }

.product-placeholder {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #49372d66;
   font: 20px Georgia, serif;
   letter-spacing: 3px;
   }

.product-placeholder > span {
   font-size: 40px;
   margin-bottom: 18px;
   }

.product-placeholder small {
   font: 7px Arial, sans-serif;
   letter-spacing: 2px;
   margin-top: 14px;
   }

.essence {
   background: #eee4d6;
   }

.essence-art {
   min-height: 520px;
   background: #d1c0a9;
   color: var(--brown);
   }

.essence-art em {
   color: #756047;
   }

.essence-art > img {
   z-index: 2;
   }

.essence-art.has-photo > :not(img) {
   visibility: hidden;
   }

.essence-copy h2 {
   font-size: clamp(40px, 4.4vw, 68px);
   }

.instagram {
   padding-top: 75px;
   padding-bottom: 80px;
   }

@media (max-width: 850px) {
  
  .hero {
   min-height: 700px;
   }

  .hero h1 {
   max-width: 640px;
   font-size: 68px;
   }

  .category-tabs .category-name {
   font-size: 18px;
   }

  .photo-placeholder {
   right: 4%;
   font-size: 35px;
   }

}

@media (max-width: 600px) {
  
  header {
   height: 110px;
   padding: 0 6%;
   background: #faf6f0e6;
   }

  header > .brand, header > .bag {
   margin-top: 10px;
   }

  .brand-image {
   width: 135px;
   height: 48px;
   }

  .hero {
   min-height: 760px;
   align-items: flex-start;
   }

  .hero-copy {
   padding: 155px 7% 240px;
   }

  .hero h1 {
   font-size: clamp(43px, 11.5vw, 65px);
   letter-spacing: -2px;
   }

  .hero-copy > p:not(.eyebrow) {
   font-size: 13px;
   }

  .hero-media > img {
   object-position: 67% center;
   }

  .hero-media::after {
   background: linear-gradient(180deg, #faf1e6f2 0%, #faf1e6de 40%, #faf1e675 65%, transparent 100%);
   }

  .photo-placeholder {
   top: auto;
   bottom: 70px;
   right: 8%;
   font-size: 33px;
   }

  .hero-foot {
   display: none;
   }

  .collection {
   padding: 50px 6%;
   }

  .category-tabs {
   gap: 12px;
   }

  .category-tabs .category-photo {
   display: grid;
   height: 94px;
   }

  .category-tabs .category-symbol {
   display: inline;
   font-size: 27px;
   }

  .category-tabs .category-name {
   display: block;
   font: 14px Georgia, serif;
   line-height: 1.35;
   }

  .category-name small {
   display: none;
   }

  .product-picture {
   height: auto;
   aspect-ratio: 1.1;
   }

  .essence-art {
   min-height: 370px;
   }

}


/* =========================================================
   MICROINTERAÇÕES — movimento discreto, sem alterar medidas
   ========================================================= */
header nav a {
  position: relative;
}
header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}
header nav a:hover::after,
header nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.button {
  transition: background .25s ease, color .25s ease, transform .3s ease, box-shadow .3s ease;
}
.button > span,
.text-link > span {
  display: inline-block;
  transition: transform .3s ease;
}
.button:hover > span,
.button:focus-visible > span,
.text-link:hover > span {
  transform: translate(3px, -3px);
}
.button:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}
.product-top button,
.icon-button,
.quantity button {
  transition: backgroundcolor .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.product-top button:active,
.quantity button:active:not(:disabled) {
  transform: scale(.9);
}
.icon-button:hover {
  background: var(--beige);
}
.category-tabs button {
  transition: color .25s ease, border-color .25s ease;
}
#cartDialog[open]::backdrop {
  animation: backdrop-in .35s ease both;
}
@keyframes backdrop-in {
  from { background-color: transparent; backdrop-filter: blur(0); }
  to { background-color: #241c1666; backdrop-filter: blur(4px); }
}
@media (hover: hover) and (pointer: fine) {
  .product-top button:hover { transform: rotate(90deg); }
  .button:hover { box-shadow: 0 8px 18px #49372d14; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .button:hover, .product-top button:hover, .product-picture:hover > img,
  .category-tabs button:hover img { transform: none; }
}

/* =========================================================
   SACOLA FLUTUANTE E PRESENÇA DO VERDE MILITAR
   ========================================================= */
:root {
  --green: #343D36;
  --green-hover: #465348;
  --green-soft: #DEE2D7;
}
/* O menu ocupa o centro após a sacola sair do cabeçalho. */
header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
header > .brand { justify-self: start; }
header nav { grid-column: 2; }
.floating-bag {
  position: fixed;
  right: max(28px, env(safe-area-inset-right));
  bottom: calc(26px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 18px;
  border: 1px solid #FAF6F033;
  border-radius: 50px;
  background: var(--green);
  color: var(--paper);
  font-size: 13px;
  box-shadow: 0 8px 28px #24302733;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.floating-bag #bagCount {
  width: 27px;
  height: 27px;
  border: none;
  background: var(--beige);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}
.floating-bag:hover {
  background: var(--green-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px #24302740;
}
.floating-bag:active { transform: translateY(0); }
.floating-bag:focus-visible { outline-color: var(--brown); }
/* O modal fica acima do botão; oculta-o enquanto a sacola está aberta. */
body:has(#cartDialog[open]) .floating-bag { visibility: hidden; }
.button:not(.outline) {
  background: var(--green);
  border-color: var(--green);
}
.button:not(.outline):hover { background: var(--green-hover); border-color: var(--green-hover); }
.outline { color: var(--green); border-color: var(--green); }
.outline:hover { background: var(--green); color: var(--paper); }
.values {
  background: var(--green);
  color: var(--beige);
  border-color: transparent;
}
.values b { color: #B8C1AC; }
.eyebrow { color: var(--green); }
.category-tabs button[aria-selected="true"] .category-name { color: var(--green); }
.category-tabs button[aria-selected="true"] .category-photo { box-shadow: inset 0 0 0 2px var(--green); }
.category-tabs button:nth-child(2) .category-photo { background: #CBD2C1; }
.category-tabs .category-symbol { color: #54634C; }
.product-top button { color: var(--green); border-color: #343D3650; }
.product-top button:hover { background: var(--green); color: var(--paper); }
.essence-copy { background: var(--green); color: var(--paper); }
.essence-copy .eyebrow { color: #CAD2BE; }
.essence-copy h2 em { color: #D0D6C4; }
.essence-copy > p:not(.eyebrow) { color: #E0E2D8; }
.essence-copy .text-link { color: var(--paper); border-color: #FAF6F03D; }
.essence-copy .text-link:hover { color: #D0D6C4; }
/* Espaço livre para o botão não cobrir o último conteúdo do rodapé. */
footer { padding-bottom: 110px; }
#toast { z-index: 40; bottom: calc(100px + env(safe-area-inset-bottom)); }

/* =========================================
   ORGANIZAÇÃO DO RODAPÉ D.LUMUS
========================================= */

/* =========================================
   D.LUMUS — FOOTER COMPACTO
========================================= */

footer.footer {
    display: block;
    width: 100%;
    padding: 38px 6% 70px;
    background: #49372D;
    color: #E8DED0;
}

/* ESTRUTURA PRINCIPAL */

footer.footer .footer-main {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr;
    gap: 45px;
    align-items: start;
    max-width: 1350px;
    margin: 0 auto;
}

/* LOGO E IDENTIDADE */

footer.footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

footer.footer .footer-brand .brand-image {
    width: 105px;
    height: 105px;
    object-fit: contain;
}

footer.footer .footer-brand p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #D4C7B9;
}

/* NAVEGAÇÃO E CONTATOS */

footer.footer .footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

footer.footer .footer-column h3 {
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 8px;
    color: #FAF6F0;
}

footer.footer .footer-column a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #E8DED0;
    font-size: 12px;
    transition: color .3s ease, transform .3s ease;
}

footer.footer .footer-column a:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}

/* LINKS DE CONTATO */

footer.footer .footer-contact-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 200px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(232, 222, 208, .18);
}

footer.footer .footer-message {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: #B9AA9B;
}

/* INFORMAÇÕES INFERIORES */

footer.footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1350px;
    margin: 30px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(232, 222, 208, .18);
    font-size: 10px;
}

/* =========================================
   TABLETS
========================================= */

@media (max-width: 850px) {

    footer.footer .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    footer.footer .footer-brand {
        grid-column: 1 / -1;
    }
}

/* =========================================
   CELULARES
========================================= */

@media (max-width: 600px) {
  header { grid-template-columns: 1fr; grid-template-rows: 62px 48px; }
  header > .brand { justify-self: center; margin-top: 0; }
  header nav { grid-column: 1; grid-row: 2; padding-bottom: 0; }
  .floating-bag {
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    min-height: 54px;
    padding: 12px 16px;
    gap: 10px;
  }
  #toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-bag:hover { transform: none; }
}

/* Banner preparado para a fotografia de madeira escura.
   O contraste claro é ativado assim que assets/banner.jpg carregar. */
.hero h1 {
  max-width: 650px;
  font-size: clamp(48px, 5.25vw, 80px);
}
.hero-copy > p:not(.eyebrow) { max-width: 430px; }
.hero:has(.hero-media.has-photo) .hero-copy,
.hero:has(.hero-media.has-photo) .hero-copy .eyebrow {
  color: var(--paper);
}
.hero:has(.hero-media.has-photo) h1 { color: var(--paper); }
.hero:has(.hero-media.has-photo) .hero-copy > p:not(.eyebrow),
.hero:has(.hero-media.has-photo) .hero-foot,
.hero:has(.hero-media.has-photo) .tiny-flower {
  color: var(--beige);
}
.hero-media.has-photo::after {
  background: linear-gradient(90deg, rgba(24, 17, 12, .73) 0%, rgba(24, 17, 12, .5) 35%, rgba(24, 17, 12, .1) 64%, transparent 85%);
}
body:has(.hero-media.has-photo) > header {
  color: var(--paper);
  background: linear-gradient(180deg, rgba(24, 17, 12, .55), transparent);
}
body:has(.hero-media.has-photo) > header nav a:hover { color: var(--beige); }
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(38px, 9.5vw, 57px); letter-spacing: -1.5px; }
  .hero-copy > p:not(.eyebrow) { max-width: 330px; }
  .hero-media.has-photo > img { object-position: 80% center; }
  .hero-media.has-photo::after {
    background: linear-gradient(180deg, rgba(24, 17, 12, .8) 0%, rgba(24, 17, 12, .75) 45%, rgba(24, 17, 12, .24) 75%, rgba(24, 17, 12, .1) 100%);
  }
  body:has(.hero-media.has-photo) > header { background: rgba(24, 17, 12, .38); }
}

/* Imagens oficiais fornecidas para banner, categorias e apresentação. */
header { height: 136px; }
header .brand-image {
  width: 112px;
  height: 112px;
  object-fit: contain;
  padding: 5px;
  border-radius: 50%;
  background: var(--paper);
}
footer .brand-image {
  width: 140px;
  height: 140px;
  object-fit: contain;
  padding: 6px;
  border-radius: 50%;
  background: var(--paper);
}
.category-tabs .category-photo { height: auto; aspect-ratio: 1.65; }
.category-photo > img { object-position: center 55%; }
.essence-art { min-height: 560px; }
.essence-art > img { object-position: center 63%; }
@media (max-width: 600px) {
  header {
    height: 152px;
    grid-template-rows: 108px 44px;
  }
  header .brand-image { width: 96px; height: 96px; padding: 4px; }
  .hero-copy { padding-top: 190px; }
  .category-tabs .category-photo { height: auto; aspect-ratio: 1; }
  .essence-art { min-height: 0; aspect-ratio: 3 / 4; }
  .essence-art > img { object-position: center; }
  footer .brand-image { width: 120px; height: 120px; }
}

/* Lema oficial: três linhas para preservar o espaço da fotografia. */
.hero h1 {
  max-width: 650px;
  font-size: clamp(42px, 4.5vw, 68px);
  line-height: 1.1;
  letter-spacing: -2px;
}
@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(29px, 7.7vw, 46px);
    letter-spacing: -1px;
    line-height: 1.16;
  }
}

/* =========================================================
   D.LUMUS — INSTAGRAM COM FOTOGRAFIA LATERAL
   Desktop: texto à esquerda, imagem à direita
   Mobile: texto acima, imagem abaixo
   ========================================================= */

.instagram {
    position: relative;
    padding: 90px 6%;
    background: var(--paper);
    overflow: hidden;
    text-align: left;
}

.instagram-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 70px);
    max-width: 1320px;
    margin: 0 auto;
}

.instagram-copy {
    position: relative;
    min-width: 0;
    max-width: 620px;
    z-index: 1;
}

.instagram-copy h2 {
    margin: 20px 0 24px;
    font-size: clamp(44px, 5vw, 78px);
    line-height: 1.1;
    letter-spacing: -2.5px;
}

.instagram-copy p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--muted);
}

.instagram-copy .button {
    margin-top: 32px;
}

.instagram-photo {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 22px;
    background: var(--beige);
    box-shadow: 0 24px 60px rgba(73, 55, 45, .14);
}

.instagram-photo::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(250, 246, 240, .45);
    border-radius: 16px;
    pointer-events: none;
    z-index: 1;
}

.instagram-photo > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity .6s ease, transform .8s ease;
}

.instagram-photo > img.is-loaded {
    opacity: 1;
}

.instagram-photo:hover > img {
    transform: scale(1.045);
}

.instagram-photo .photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(73, 55, 45, .45);
    font: 34px Georgia, serif;
    letter-spacing: 4px;
}

.instagram-photo .photo-placeholder small {
    margin-top: 16px;
    font: 8px Arial, sans-serif;
    letter-spacing: 3px;
}

.instagram-photo.has-photo .photo-placeholder,
.instagram-mark {
    display: none;
}

@media (max-width: 900px) {
    .instagram-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .instagram-copy {
        max-width: 100%;
        text-align: center;
    }

    .instagram-photo {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* =========================================================
   D.LUMUS — REFINAMENTO MOBILE FINAL
   Apenas telas até 600px. Layout desktop preservado.
   ========================================================= */
@media (max-width: 600px) {
    /* Não permite imagens nem títulos estourarem a largura. */
    html, body {
        max-width: 100%;
        overflow-x: clip;
    }

    /* Logo sempre centralizada, com espaço reservado antes da carga. */
    header {
        position: absolute;
        inset: 0 0 auto 0;
        width: 100%;
        height: 132px;
        padding: 4px 6% 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 88px 36px;
        align-content: start;
        justify-items: center;
        gap: 0;
        border: 0;
        background: linear-gradient(180deg, rgba(24, 17, 12, .7), rgba(24, 17, 12, .12));
    }

    body:has(.hero-media.has-photo) > header {
        background: linear-gradient(180deg, rgba(24, 17, 12, .74), rgba(24, 17, 12, .12));
    }

    header > .brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        align-self: center;
        display: grid;
        place-items: center;
        width: 84px;
        height: 84px;
        min-width: 84px;
        min-height: 84px;
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    /* Se a logo falhar, o nome textual não desloca o menu. */
    header > .brand:not(:has(.brand-image)) {
        font-size: 16px;
        text-align: center;
        letter-spacing: 0;
    }
    header > .brand:not(:has(.brand-image)) span {
        font-size: 6px;
        letter-spacing: 1px;
    }

    header .brand-image {
        display: block;
        width: 82px;
        height: 82px;
        min-width: 82px;
        min-height: 82px;
        padding: 3px;
        object-fit: contain;
        border-radius: 50%;
        background: var(--paper);
    }

    header nav {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        width: 100%;
        max-width: 370px;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        column-gap: clamp(12px, 4.5vw, 24px);
        padding: 0;
        margin: 0;
        font-size: clamp(10px, 3vw, 12px);
        white-space: nowrap;
    }
    header nav a { flex: 0 0 auto; padding: 6px 0; }

    /* Banner: recorte consistente, texto visível e altura de tela. */
    .hero {
        display: flex;
        min-height: 710px;
        min-height: max(710px, 100svh);
        align-items: flex-start;
    }
    .hero-copy {
        width: 100%;
        padding: 188px 7% 68px;
    }
    .hero h1 {
        max-width: 100%;
        font-size: clamp(34px, 9vw, 44px);
        line-height: 1.14;
        letter-spacing: -1.1px;
        margin: 18px 0 22px;
        overflow-wrap: normal;
    }
    .hero-copy .eyebrow {
        font-size: 8px;
        letter-spacing: 2px;
    }
    .hero-copy > p:not(.eyebrow) {
        max-width: 340px;
        font-size: 13px;
        line-height: 1.75;
    }
    .hero-copy > .button {
        max-width: 100%;
        margin-top: 22px;
        padding: 14px 17px;
        gap: 20px;
        font-size: 12px;
    }
    .hero-media > img,
    .hero-media.has-photo > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 62% center;
    }
    .hero-media::after,
    .hero-media.has-photo::after {
        background: linear-gradient(180deg,
            rgba(19, 13, 9, .78) 0%,
            rgba(19, 13, 9, .70) 47%,
            rgba(19, 13, 9, .25) 80%,
            rgba(19, 13, 9, .10) 100%);
    }

    /* Vitrine: fotos enquadradas, sem distorcer a imagem. */
    .category-tabs { gap: 12px; }
    .category-tabs button { min-width: 0; }
    .category-tabs .category-photo {
        width: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    .category-tabs .category-photo > img,
    .product-picture > img,
    .essence-art > img,
    .instagram-photo > img {
        object-fit: cover;
        object-position: center;
    }
    .product-picture {
        min-height: 0;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    /* Evita o emoji verde nos cards sem foto; não oculta fotos válidas. */
    .product-placeholder > span,
    .category-tabs .category-symbol {
        display: none;
    }
    .product-placeholder {
        letter-spacing: 2px;
        font-size: 17px;
    }
    .product-placeholder small {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    /* Faixa de valores sem asteriscos-emoji do iPhone. */
    .values {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
        padding: 21px 7%;
        text-align: center;
    }
    .values span { width: auto; }
    .values b { display: none; }

    /* Fotografia institucional preservada. */
    .essence-art { min-height: 0; aspect-ratio: 3 / 4; }
    .essence-copy { padding: 42px 7%; }
    .essence-copy h2 {
        font-size: clamp(36px, 9vw, 44px);
        line-height: 1.12;
        margin: 18px 0 26px;
    }
    .essence-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.85; }
    .essence-copy .text-link { margin-top: 24px; }

    .instagram { padding: 55px 7% 65px; }
    .instagram .instagram-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .instagram .instagram-copy { text-align: center; }
    .instagram .instagram-copy h2 {
        font-size: clamp(37px, 9.5vw, 48px);
        line-height: 1.12;
    }
    .instagram .instagram-copy .button {
        max-width: 100%;
        margin-top: 24px;
        padding: 16px 20px;
        gap: 20px;
    }
    .instagram .instagram-photo {
        width: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
        border-radius: 18px;
    }

    /* Sacola compacta para não ocultar a navegação. */
    .floating-bag {
        right: max(16px, env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
        width: 58px;
        height: 58px;
        min-height: 58px;
        padding: 0;
        gap: 0;
        border-radius: 50%;
        font-size: 0;
    }
    .floating-bag svg { width: 23px; height: 23px; flex-shrink: 0; }
    .floating-bag #bagCount {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 23px;
        height: 23px;
        font-size: 11px;
    }
    #toast { bottom: calc(88px + env(safe-area-inset-bottom)); }

    /* Rodapé alinhado, com espaço para a sacola. */
    footer.footer { padding: 38px 7% 105px; }
    footer.footer .footer-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
    footer.footer .footer-brand { grid-column: auto; gap: 12px; }
    footer.footer .footer-brand .brand-image { width: 90px; height: 90px; }
    footer.footer .footer-column { gap: 12px; }
    footer.footer .footer-column h3 { font-size: 20px; margin-bottom: 6px; }
    footer.footer .footer-bottom {
        margin-top: 30px;
        padding-top: 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 370px) {
    header nav { column-gap: 11px; font-size: 10px; }
    .hero h1 { font-size: 33px; }
}