:root{
  color-scheme: light;
  --bg-blush:#fbe8e2;
  --bg-blush-deep:#f5d8d4;
  --bg-cream:#fdf7f4;
  --rose-heading:#ae7675;
  --rose-btn:#c3807c;
  --rose-btn-hover:#b06d69;
  --text-dark:#4a3b38;
  --text-muted:#6f5f5a;
  --white:#ffffff;
  --border-soft:#e8c7c2;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:'Poppins', sans-serif;
  color:var(--text-dark);
  background:var(--bg-cream);
  animation:pageFadeIn .5s ease both;
  overflow-x:hidden;
}
@keyframes pageFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes softPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
h1,h2,h3,.logo{
  font-family:'Playfair Display', serif;
}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.container{max-width:1100px; margin:0 auto; padding:0 40px;}

/* FOCUS STATES (keyboard navigation) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.hamburger:focus-visible,
.g-thumb:focus-visible,
.qty-selector button:focus-visible{
  outline:2px solid var(--rose-heading);
  outline-offset:2px;
  border-radius:3px;
}

/* Cart icon badge (used on offer.html) - replaces inline styles */
.icon-bag{
  position:relative;
}
.cart-badge{
  position:absolute;
  top:0;
  right:0;
  background:var(--rose-btn);
  color:var(--white);
  font-size:10px;
  width:16px;
  height:16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* HEADER */
header{
  background:var(--bg-blush);
  padding:28px 0;
  position:relative;
  border-bottom:1px solid var(--border-soft);
  box-shadow:0 2px 10px rgba(74,59,56,0.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-style:italic;
  font-size:26px;
  color:var(--rose-heading);
  font-weight:500;
  transition:opacity .2s ease;
}
.logo:hover{opacity:0.75;}
nav ul{
  display:flex; gap:30px;
  font-size:15px;
  color:var(--text-dark);
}
nav ul li a{
  position:relative;
  display:inline-block;
  padding-bottom:3px;
}
nav ul li a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0;
  height:1.5px;
  background:var(--rose-heading);
  transition:width .25s ease;
}
nav ul li a:hover::after,
nav a.active-link::after{
  width:100%;
}
nav a.active-link{
  color:var(--rose-heading);
  font-weight:500;
}
.header-icons{
  display:flex; gap:8px; color:var(--text-dark);
}
.header-icons span,
.header-icons a,
.header-icons button{
  display:flex; align-items:center; justify-content:center;
  color:inherit;
  background:none;
  border:none;
  padding:10px;
  margin:-4px 0;
  font:inherit;
  cursor:pointer;
  transition:transform .2s ease, color .2s ease;
}
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.header-icons span:hover,
.header-icons a:hover,
.header-icons button:hover{
  transform:translateY(-2px);
  color:var(--rose-heading);
}
.hamburger{
  display:none !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:5px !important;
  width:24px !important;
  height:20px !important;
  background:none !important;
  border:none !important;
  cursor:pointer;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.header-icons .hamburger{
  display:none;
}
.hamburger span{
  display:block;
  width:100%;
  height:2px;
  background:var(--text-dark);
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.header-icons span,
.header-icons button{
  display:flex; align-items:center;
}
.header-icons svg{
  width:19px; height:19px;
}

/* BUTTONS */
.btn{
  display:inline-block;
  background:var(--rose-btn);
  color:var(--white);
  padding:14px 32px;
  border-radius:6px;
  font-size:14px;
  letter-spacing:0.3px;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
  border:none;
  cursor:pointer;
  font-family:'Poppins', sans-serif;
}
.btn:hover{
  background:var(--rose-btn-hover);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(184,101,90,0.28);
}
.btn:active{
  transform:translateY(0);
  box-shadow:none;
}
.btn:disabled,
.btn.btn-disabled{
  background:var(--text-muted);
  color:var(--white);
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}
.btn:disabled:hover,
.btn.btn-disabled:hover{
  transform:none;
  box-shadow:none;
}
.btn-outline{
  background:transparent;
  border:1.5px solid var(--rose-btn);
  color:var(--rose-btn);
}

/* HERO (homepage) */
.hero{
  background:var(--bg-blush);
  padding:20px 0 60px;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap:40px;
}
.hero-text h1{
  font-size:52px;
  line-height:1.15;
  color:var(--rose-heading);
  font-weight:700;
  margin-bottom:20px;
  animation:fadeInUp .7s ease both;
}
.hero-text p{
  font-size:15px;
  color:var(--text-muted);
  max-width:420px;
  line-height:1.7;
  margin-bottom:28px;
  animation:fadeInUp .7s ease .12s both;
}
.hero-text .btn{
  animation:fadeInUp .7s ease .24s both;
}
.hero-img{
  width:100%;
  aspect-ratio:1/1.05;
  border-radius:8px;
  overflow:hidden;
  background: radial-gradient(circle at 35% 30%, #f2c6b8, #d99a86 60%, #c07f6d);
  animation:fadeIn 1s ease .2s both, floatY 6s ease-in-out 1.2s infinite;
}
.hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* FEATURES BAR (homepage) */
.features{
  background:var(--bg-blush-deep);
  padding:34px 0;
}
.features-inner{
  display:flex;
  justify-content:space-around;
  text-align:center;
}
.feature-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:13.5px;
  color:var(--text-dark);
}
.feature-icon{
  width:26px; height:26px;
  border:1.4px solid var(--rose-heading);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--rose-heading);
  font-size:13px;
  transition:transform .3s ease, background .3s ease;
}
.feature-icon svg{
  width:13px; height:13px;
}
.feature-item:hover .feature-icon{
  transform:translateY(-4px) rotate(-6deg);
  background:var(--bg-cream);
}

/* SECTION HEADINGS */
.section{
  padding:70px 0;
}
.section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:36px;
}
.section-head h2{
  font-size:26px;
  color:var(--rose-heading);
  font-weight:600;
}
.view-all{
  font-size:13.5px;
  color:var(--rose-heading);
  border-bottom:1px solid var(--rose-heading);
  padding-bottom:2px;
}

/* PRODUCT GRID */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  min-width:0;
}
.product-grid > *{
  min-width:0;
}
.product-card-wrap{
  position:relative;
}
.favourite-toggle{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  color:var(--rose-btn);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(74,59,56,0.14);
  transition:transform .15s ease, background .2s ease, color .2s ease;
  z-index:2;
}
.favourite-toggle svg{
  width:16px;
  height:16px;
}
.favourite-toggle:hover{
  transform:scale(1.08);
}
.favourite-toggle.active{
  background:var(--rose-btn);
  color:var(--white);
}
.favourite-toggle.active svg{
  fill:currentColor;
}
.product-card{
  display:block;
  color:inherit;
}
.product-card .thumb{
  width:100%;
  aspect-ratio:1/1;
  border-radius:6px;
  margin-bottom:14px;
  transition:transform .35s ease, box-shadow .35s ease;
}
.product-card:hover .thumb{
  transform:scale(1.035) translateY(-2px);
  box-shadow:0 14px 26px rgba(74,59,56,0.16);
}
.product-card h3{
  transition:color .2s ease;
}
.product-card:hover h3{
  color:var(--rose-heading);
}
.thumb-1{background-image:url('images/three-products-sq.png'); background-size:cover; background-position:center; background-color:#e9c7b3;}
.thumb-2{background-image:url('images/lip-tints-sq.png'); background-size:cover; background-position:center; background-color:#dda897;}
.thumb-3{background:linear-gradient(135deg,#f3ded3,#d69d92);}
.thumb-4{background:linear-gradient(135deg,#e7c3b6,#a97263);}
.thumb-5{background:linear-gradient(135deg,#eccdc0,#c88673);}
.thumb-6{background-image:url('images/gourmand-duo-sq.png'); background-size:cover; background-position:center; background-color:#e4b8a0;}
.thumb-7{background:linear-gradient(135deg,#e6bcae,#b87b6c);}
.thumb-8{background-image:url('images/berry-cupcake-sq.png'); background-size:cover; background-position:center; background-color:#e2ac96;}
.thumb-9{background:linear-gradient(135deg,#eed4c7,#c69783);}
.thumb-10{background-image:url('images/lip-model-sq.png'); background-size:cover; background-position:center; background-color:#d9a68f;}
.thumb-11{background:linear-gradient(135deg,#f4ddce,#d19c88);}
.thumb-12{background:linear-gradient(135deg,#ecccbc,#c48c76);}
.thumb-13{background-image:url('images/ocheal-coconut-vanilla.png'); background-size:cover; background-position:center; background-color:#dba36f;}
.thumb-14{background-image:url('images/ocheal-wilderness-rose.png'); background-size:cover; background-position:center; background-color:#e598a4;}
/* Placeholder products auto-generated from AI.zip collages (see products.js) */
.thumb-15{background-image:url('images/product001-1.png'); background-size:cover; background-position:center; background-color:#d9c2b0;}
.thumb-16{background-image:url('images/product002-1.png'); background-size:cover; background-position:center; background-color:#c9b3a5;}
.thumb-17{background-image:url('images/product003-1.png'); background-size:cover; background-position:center; background-color:#e0cfc2;}
.thumb-18{background-image:url('images/product004-1.png'); background-size:cover; background-position:center; background-color:#cbb8ab;}
.thumb-19{background-image:url('images/product005-1.png'); background-size:cover; background-position:center; background-color:#ddc9bb;}
.thumb-20{background-image:url('images/product006-1.png'); background-size:cover; background-position:center; background-color:#d3bfae;}
.thumb-21{background-image:url('images/product007-1.png'); background-size:cover; background-position:center; background-color:#e6d5c8;}
.thumb-22{background-image:url('images/product008-1.png'); background-size:cover; background-position:center; background-color:#c7b2a2;}
.thumb-23{background-image:url('images/product009-1.png'); background-size:cover; background-position:center; background-color:#dcc7b8;}
.thumb-24{background-image:url('images/product010-1.png'); background-size:cover; background-position:center; background-color:#d0bcae;}
.thumb-25{background-image:url('images/product011-1.png'); background-size:cover; background-position:center; background-color:#d9c2b0;}
.thumb-26{background-image:url('images/product012-1.png'); background-size:cover; background-position:center; background-color:#c9b3a5;}
.thumb-27{background-image:url('images/product013-1.png'); background-size:cover; background-position:center; background-color:#e0cfc2;}
.thumb-28{background-image:url('images/product014-1.png'); background-size:cover; background-position:center; background-color:#cbb8ab;}
.thumb-29{background-image:url('images/product015-1.png'); background-size:cover; background-position:center; background-color:#ddc9bb;}
.thumb-30{background-image:url('images/product016-1.png'); background-size:cover; background-position:center; background-color:#d3bfae;}
.product-card h3{
  font-family:'Poppins', sans-serif;
  font-size:14px;
  font-weight:500;
  margin-bottom:4px;
}
.product-card .price{
  font-size:13.5px;
  color:var(--text-muted);
}

/* Sale pricing - shared between product cards and the product detail page.
   Markup is generated by priceHTML() in script.js: when a product has an
   oldPrice greater than its current price, this shows the struck-through
   original next to the current price plus a small savings badge. If there's
   no oldPrice (or it isn't actually higher), priceHTML() just outputs the
   plain price and none of these classes appear. */
.price-old{
  text-decoration:line-through;
  color:var(--text-muted);
  font-weight:400;
  margin-right:6px;
}
.price-current{
  color:var(--rose-heading);
  font-weight:700;
}
.price-save-badge{
  display:inline-block;
  background:#fdf3f2;
  border:1px solid #ecc4c0;
  color:#a4453e;
  font-size:11px;
  font-weight:600;
  border-radius:6px;
  padding:2px 7px;
  margin-left:6px;
  vertical-align:middle;
}
.product-card .price .price-save-badge{
  font-size:10px;
  padding:1px 5px;
}

/* PROMISE SECTION (homepage) */
.promise{
  background:var(--bg-blush);
}
.promise .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:0;
  padding:0;
  max-width:1100px;
}
.promise-text{
  padding:60px 60px 60px 40px;
}
.promise-text .eyebrow{
  font-size:13px; color:var(--text-muted); margin-bottom:14px;
}
.promise-text h2{
  font-size:32px;
  color:var(--rose-heading);
  line-height:1.3;
  margin-bottom:18px;
  font-weight:600;
}
.promise-text p{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.8;
  margin-bottom:24px;
  max-width:380px;
}
.promise-img{
  height:420px;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(160deg,#fdf3ef,#eec9bb);
}
.promise-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* BLOG (homepage) */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.blog-card{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.blog-card .thumb{
  width:100%;
  aspect-ratio:4/5;
  border-radius:6px;
  margin-bottom:16px;
}
.blog-1{background:linear-gradient(135deg,#f1d6cb,#d8a48f); background-image:url('images/lip-model.png'); background-size:cover; background-position:center top;}
.blog-2{background:linear-gradient(135deg,#eec6b8,#c98a78); background-image:url('images/blog-routine.png'); background-size:cover; background-position:center;}
.blog-3{background:linear-gradient(135deg,#f6e2d6,#e0aa9a); background-image:url('images/blog-ingredients.png'); background-size:cover; background-position:center;}
.blog-card h3{
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  margin-bottom:8px;
}
.blog-card .date{
  font-size:12.5px;
  color:var(--text-muted);
}

/* NEWSLETTER + FOOTER */
footer{
  background:var(--bg-blush-deep);
  padding-top:60px;
}
.newsletter{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid var(--border-soft);
}
.newsletter > *{
  min-width:0;
}
.newsletter h3{
  font-size:19px;
  color:var(--rose-heading);
  margin-bottom:10px;
  font-weight:600;
}
.newsletter p{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:18px;
  line-height:1.6;
}
.signup-form{
  display:flex;
}
.signup-form input{
  flex:1;
  min-width:0;
  padding:12px 14px;
  border:1px solid #d9b5a6;
  border-radius:4px 0 0 4px;
  font-size:13px;
  background:var(--white);
  outline:none;
  font-family:'Poppins', sans-serif;
}
.signup-form button{
  border-radius:0 4px 4px 0;
  padding:12px 20px;
}
.footer-col h4{
  font-size:14px;
  font-weight:600;
  margin-bottom:16px;
  color:var(--text-dark);
}
.footer-col ul li{
  font-size:13.5px;
  color:var(--text-muted);
  margin-bottom:10px;
}
.socials{
  display:flex; gap:12px;
}
.socials a{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  color:var(--rose-heading);
  transition:transform .2s ease, background .2s ease, color .2s ease;
  box-shadow:0 2px 6px rgba(74,59,56,0.06);
}
.socials a svg{
  width:16px; height:16px;
}
.socials a:hover{
  transform:translateY(-3px);
  background:var(--rose-btn);
  color:var(--white);
}
.copyright{
  text-align:center;
  font-size:12.5px;
  color:var(--text-muted);
  padding:24px 0;
}
.footer-contact{
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
  padding-top:26px;
}
.footer-contact a{
  color:var(--text-muted);
  text-decoration:underline;
  transition:color .2s ease;
}
.footer-contact a:hover{color:var(--rose-btn);}
.footer-contact .divider{margin:0 8px;}

/* SHOP PAGE HERO
   The image itself defines the section: it sits in normal flow at
   width:100% / height:auto, so the section is always exactly as tall as
   the full photo at the current viewport width. That guarantees BOTH
   "entire image visible" and "image fills the entire section" at every
   screen size — no fixed heights, no object-fit, no crop math. The
   "Shop All" text is the overlay, positioned over the photo's own empty
   left side. */
.shop-hero{
  position:relative;
  background:var(--bg-blush);
}
.shop-hero-img{
  display:block;
}
.shop-hero-img img{
  display:block;
  width:100%;
  height:auto;
}
.shop-hero-inner{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
}
.shop-hero-text{
  max-width:420px;
}
.shop-hero-text h1{
  font-size:38px;
  color:var(--rose-heading);
  font-weight:700;
  margin-bottom:14px;
}
.shop-hero-text p{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.7;
}

/* SHOP LAYOUT */
.shop-body{
  padding:60px 0 40px;
}
.shop-layout{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:40px;
}
.shop-layout > *{
  min-width:0;
}
.sidebar h4{
  font-size:14px;
  font-weight:600;
  margin-bottom:18px;
  color:var(--text-dark);
}
.sidebar ul li{
  font-size:13.5px;
  color:var(--text-muted);
  margin-bottom:14px;
  cursor:pointer;
}
.sidebar ul li:hover{color:var(--rose-heading);}
.shop-main{
  border-left:1px solid var(--border-soft);
  padding-left:40px;
}
.filter-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:30px;
}
.filter-left{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px;
  color:var(--text-dark);
}
.filter-right{
  display:flex; gap:14px; flex-wrap:wrap; min-width:0;
}
.dropdown{
  border:1px solid var(--border-soft);
  border-radius:4px;
  padding:9px 16px;
  font-size:13px;
  color:var(--text-dark);
  background:var(--white);
  cursor:pointer;
  min-width:0;
  max-width:100%;
}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px 20px;
  margin-bottom:40px;
  min-width:0;
}
.shop-grid > *{
  min-width:0;
}

/* PAGINATION */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text-muted);
}
.pagination span, .pagination a{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
  cursor:pointer;
}
.pagination .active{
  background:var(--rose-btn);
  color:var(--white);
}

/* PRODUCT PAGE */
.product-page{
  padding:60px 0 40px;
}
.product-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.product-layout > *{
  min-width:0;
}
.product-gallery{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:16px;
  min-width:0;
}
.gallery-main{
  min-width:0;
}
.gallery-thumbs{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.gallery-thumbs .g-thumb{
  width:100%;
  aspect-ratio:1/1;
  border-radius:6px;
  cursor:pointer;
  border:1.5px solid transparent;
}
.gallery-thumbs .g-thumb.active{
  border-color:var(--rose-btn);
}
.gallery-main{
  width:100%;
  aspect-ratio:1/1.05;
  border-radius:8px;
  background:url('images/gallery-tube.png'), radial-gradient(circle at 40% 30%, #f6d9cb, #dfa892 55%, #c07f6d);
  background-size:cover;
  background-position:center;
}
.g-thumb-1{background:linear-gradient(135deg,#f0d3c4,#c99b86); background-image:url('images/gallery-tube.png'); background-size:cover; background-position:center;}
.g-thumb-2{background:linear-gradient(135deg,#e9b9a7,#b9736a); background-image:url('images/gallery-bottle.png'); background-size:cover; background-position:center;}
.g-thumb-3{background:linear-gradient(135deg,#f3ded3,#d69d92); background-image:url('images/gallery-spray.png'); background-size:cover; background-position:center;}
.g-thumb-4{background:linear-gradient(135deg,#e7c3b6,#a97263); background-image:url('images/gallery-full.png'); background-size:cover; background-position:center;}

.product-info .eyebrow{
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:10px;
}
.product-info h1{
  font-size:30px;
  color:var(--rose-heading);
  font-weight:600;
  margin-bottom:12px;
}
.rating{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:16px;
}
.stars{
  color:#e0a24a;
  letter-spacing:2px;
}
.product-price{
  font-size:24px;
  color:var(--text-dark);
  font-weight:600;
  margin-bottom:20px;
}
.product-desc{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.8;
  margin-bottom:22px;
  max-width:420px;
}
.product-checklist{
  margin-bottom:28px;
}
.product-checklist li{
  font-size:13.5px;
  color:var(--text-dark);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.product-checklist li::before{
  content:"\2713";
  color:var(--rose-btn);
  font-weight:600;
}
.quantity-label{
  font-size:13px;
  color:var(--text-dark);
  margin-bottom:10px;
}
.product-actions{
  margin-bottom:18px;
}
.qty-selector{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border-soft);
  border-radius:6px;
}
.qty-selector button{
  background:none;
  border:none;
  width:34px;
  height:40px;
  font-size:15px;
  cursor:pointer;
  color:var(--text-dark);
}
.qty-selector .qty-value{
  width:34px;
  text-align:center;
  font-size:14px;
}
.btn-block{
  display:block;
  width:100%;
  text-align:center;
  margin-bottom:16px;
}
.wishlist-link{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--text-dark);
  margin-bottom:10px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
}
.wishlist-link.active{
  color:var(--rose-btn);
}
.wishlist-link.active svg{
  fill:currentColor;
}
.product-perks{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--border-soft);
  padding-top:26px;
  margin-top:20px;
  gap:20px;
}
.perk-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.perk-icon{
  color:var(--rose-heading);
  flex-shrink:0;
  margin-top:1px;
}
.perk-icon svg{
  width:20px;
  height:20px;
}
.perk-text{
  display:flex;
  flex-direction:column;
  font-size:12px;
  color:var(--text-muted);
  line-height:1.5;
}
.perk-text strong{
  font-size:12.5px;
  color:var(--text-dark);
  font-weight:500;
}

/* ABOUT PAGE */
.about-hero{
  background:var(--bg-blush);
  padding:20px 0 56px;
}
.about-hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:40px;
}
.about-hero-text .eyebrow{
  font-size:13px;
  font-style:italic;
  color:var(--rose-heading);
  margin-bottom:14px;
  font-family:'Playfair Display', serif;
}
.about-hero-text h1{
  font-size:32px;
  color:var(--rose-heading);
  line-height:1.35;
  font-weight:600;
  margin-bottom:18px;
}
.about-hero-text p{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.8;
  max-width:400px;
  margin-bottom:26px;
}
.about-hero-img{
  width:100%;
  height:400px;
  border-radius:0;
  background:radial-gradient(circle at 40% 30%, #f6d9cb, #dfa892 55%, #c07f6d);
}
.about-values{
  background:var(--bg-cream);
  padding:50px 0 70px;
  border-top:1px solid var(--border-soft);
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
  padding-top:8px;
}
.value-item h4{
  font-size:15px;
  color:var(--rose-heading);
  font-weight:600;
  margin-bottom:12px;
}
.value-item p{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.7;
}
.about-cta{
  background:linear-gradient(135deg, var(--rose-btn), var(--rose-heading));
  padding:64px 0;
  text-align:center;
}
.about-cta-tagline{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:26px;
  color:var(--white);
  margin-bottom:26px;
}
.about-cta-btn{
  background:var(--white);
  color:var(--rose-heading);
}
.about-cta-btn:hover{
  background:var(--bg-cream);
  color:var(--rose-heading);
}

/* Mobile nav (hamburger menu). Kept as its own, lower breakpoint so it only
   triggers on genuinely small/mobile screens - normal desktop and laptop
   widths (including smaller ~1024px laptops) always show the full nav bar. */
@media (max-width:768px){
  .shop-hero-text{ max-width:170px; }
  .shop-hero-text h1{ font-size:24px; margin-bottom:8px; }
  .shop-hero-text p{ font-size:12px; line-height:1.5; }
  .header-icons .hamburger{display:flex !important;}
  nav{
    display:block;
    width:100%;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--bg-blush);
    padding:0 40px;
    box-shadow:0 8px 16px rgba(74,59,56,0.08);
    z-index:50;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
  }
  nav.nav-open{
    max-height:300px;
    opacity:1;
    padding:10px 40px 26px;
  }
  nav ul{
    flex-direction:column;
    gap:18px;
  }
}

@media (max-width:900px){
  .hero-inner, .promise .container{grid-template-columns:1fr;}
  .promise-text{padding:40px 30px;}
  .product-grid, .shop-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:1fr;}
  .newsletter{grid-template-columns:1fr 1fr;}
  .features-inner{flex-wrap:wrap; gap:24px;}
  .shop-layout{grid-template-columns:1fr;}
  .shop-main{border-left:none; padding-left:0;}
  .product-layout, .about-hero-inner{grid-template-columns:1fr;}
  .values-grid, .product-perks{grid-template-columns:repeat(2,1fr);}
  .promo-hero-inner{grid-template-columns:1fr;}
  .promo-image{max-width:340px; margin:0 auto; padding-top:14px;}
  .promo-arch{top:-14px; left:-14px; right:-14px; bottom:0; width:auto; height:auto;}
  .promo-photo{width:100%; height:auto; aspect-ratio:4/3;}
  .badge-circle{width:92px; height:92px; top:10px; right:-6px;}
  .badge-circle span{font-size:10px;}
  .badge-circle strong{font-size:24px;}
  .steps{grid-template-columns:1fr; gap:36px;}
  .together-box{grid-template-columns:1fr;}
  .together-grid{grid-template-columns:1fr;}
  .features-inner-4{grid-template-columns:repeat(2,1fr); gap:28px;}
}

/* ANNOUNCEMENT BAR */
.announce-bar{
  background:var(--bg-blush-deep);
  text-align:center;
  padding:10px 0;
  font-size:12.5px;
  letter-spacing:0.5px;
  color:var(--rose-heading);
  font-weight:500;
}

/* PROMO HERO */
.promo-hero{
  background:var(--bg-blush);
  padding:50px 0 0;
  overflow:hidden;
}
.promo-hero-inner{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:20px;
}
.promo-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  letter-spacing:2px;
  color:var(--rose-heading);
  font-weight:600;
  margin-bottom:18px;
}
.promo-title{
  font-size:64px;
  color:var(--rose-heading);
  font-weight:700;
  line-height:1;
  margin-bottom:6px;
}
.promo-title .script{
  font-family:'Yellowtail', cursive;
  font-weight:400;
  font-size:70px;
  color:var(--rose-btn);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.promo-title .script svg{
  width:28px;
  height:28px;
  margin-top:10px;
}
.promo-text p{
  font-size:15px;
  color:var(--text-dark);
  line-height:1.8;
  max-width:400px;
  margin:22px 0 30px;
}
.promo-text p strong{
  color:var(--rose-heading);
}
.promo-image{
  position:relative;
  display:flex;
  justify-content:center;
  padding:20px 0 0;
}
.promo-arch{
  position:absolute;
  top:-40px;
  right:-40px;
  width:80%;
  height:110%;
  background:var(--bg-blush-deep);
  border-radius:50% 50% 0 0;
  z-index:0;
}
.promo-photo{
  position:relative;
  z-index:1;
  width:88%;
  height:420px;
  border-radius:8px;
  background:radial-gradient(circle at 35% 25%, #f6d9cb, #dfa892 55%, #c07f6d);
  overflow:hidden;
}
.promo-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.badge-circle{
  position:absolute;
  top:10px;
  right:0;
  z-index:2;
  width:120px;
  height:120px;
  border-radius:50%;
  background:var(--bg-cream);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 6px 18px rgba(150,90,75,0.15);
  color:var(--rose-heading);
}
.badge-circle span{
  font-size:11px;
  letter-spacing:1px;
  font-weight:600;
}
.badge-circle strong{
  font-family:'Playfair Display', serif;
  font-size:32px;
  line-height:1;
  margin:2px 0;
}
.badge-circle strong small{
  font-size:16px;
}

/* HOW IT WORKS */
.how-it-works{
  padding:70px 0;
  text-align:center;
}
.how-it-works > h2{
  font-size:14px;
  letter-spacing:2px;
  color:var(--rose-heading);
  font-weight:600;
  margin-bottom:44px;
}
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  max-width:900px;
  margin:0 auto;
}
.step-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--bg-blush-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  color:var(--rose-heading);
}
.step-icon svg{
  width:26px;
  height:26px;
}
.step h4{
  font-size:14.5px;
  letter-spacing:0.5px;
  color:var(--rose-heading);
  font-weight:600;
  margin-bottom:10px;
}
.step p{
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.6;
}

/* PERFECT TOGETHER */
.perfect-together{
  padding:0 0 70px;
}
.together-box{
  background:var(--bg-blush-deep);
  border-radius:14px;
  display:grid;
  grid-template-columns:0.85fr 1.6fr;
  gap:30px;
  padding:40px;
  align-items:center;
}
.together-text h2{
  font-size:28px;
  color:var(--rose-heading);
  font-weight:600;
  line-height:1.25;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.together-text h2 svg{
  width:20px;
  height:20px;
  color:var(--rose-btn);
}
.together-text p{
  font-size:13.5px;
  color:var(--text-dark);
  line-height:1.7;
  margin-bottom:22px;
  max-width:280px;
}
.together-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.together-panel{
  display:block;
  color:inherit;
  background:var(--bg-cream);
  border-radius:10px;
  padding:14px;
  text-align:center;
}
.together-panel .photo{
  width:100%;
  height:220px;
  border-radius:8px;
  margin-bottom:16px;
  overflow:hidden;
}
.together-panel .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.mist-photo{background:linear-gradient(120deg,#f5d9c9,#f0c3c9 40%,#e7d9a8 70%,#f1c3b6);}
.gloss-photo{background:linear-gradient(120deg,#e8a698,#c96f7a 45%,#b85c65 75%,#dba08f);}
.panel-caption{
  font-size:12.5px;
  letter-spacing:0.5px;
  font-weight:600;
  color:var(--rose-heading);
}

/* BOTTOM FEATURE BAR */
.feature-bar-bottom{
  background:var(--bg-cream);
  padding:44px 0;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.features-inner-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
}
.feature-item-b{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.feature-item-b .fib-icon{
  color:var(--rose-heading);
  flex-shrink:0;
}
.feature-item-b .fib-icon svg{
  width:26px;
  height:26px;
}
.feature-item-b h5{
  font-size:13px;
  letter-spacing:0.5px;
  color:var(--rose-heading);
  font-weight:600;
  margin-bottom:6px;
}
.feature-item-b p{
  font-size:12.5px;
  color:var(--text-muted);
  line-height:1.6;
}
/* 404 PAGE */
.error-page{
  text-align:center;
  max-width:600px;
}
.error-page .eyebrow{
  color:var(--text-muted);
  font-size:13px;
  margin-bottom:14px;
}
.error-page h2{
  margin-bottom:16px;
}
.error-page p{
  color:var(--text-muted);
  font-size:14px;
  line-height:1.8;
  margin-bottom:32px;
}

/* SCROLL-REVEAL ANIMATIONS (JS adds .animate-in then .in-view on scroll) */
.animate-in{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
}
.animate-in.in-view{
  opacity:1;
  transform:translateY(0);
}

/* Blog card hover */
.blog-card .thumb{
  transition:transform .35s ease, box-shadow .35s ease;
}
.blog-card:hover .thumb{
  transform:scale(1.03);
  box-shadow:0 14px 26px rgba(74,59,56,0.14);
}
.blog-card h3{
  transition:color .2s ease;
}
.blog-card:hover h3{
  color:var(--rose-heading);
}

/* Sidebar + dropdown polish */
.sidebar ul li{
  transition:color .2s ease, transform .2s ease;
}
.sidebar ul li:hover{
  transform:translateX(3px);
}
.dropdown{
  transition:border-color .2s ease, box-shadow .2s ease;
}
.dropdown:hover{
  border-color:var(--rose-btn);
  box-shadow:0 4px 12px rgba(200,119,106,0.14);
}

/* Shop grid page-change fade */
.shop-grid{
  transition:opacity .2s ease;
}
.shop-grid.grid-fade-out{
  opacity:0;
}

/* Pagination hover */
.pagination a{
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.pagination a:hover:not(.active){
  background:var(--bg-blush-deep);
  transform:translateY(-1px);
}

/* Gallery thumb + main image transition (product page) */
.gallery-thumbs .g-thumb{
  transition:transform .2s ease, border-color .2s ease;
}
.gallery-thumbs .g-thumb:hover{
  transform:translateY(-2px);
}
.gallery-main{
  transition:opacity .25s ease;
}

/* Quantity selector press feedback */
.qty-selector button{
  transition:background .15s ease, transform .1s ease;
}
.qty-selector button:active{
  transform:scale(0.88);
}
.qty-selector button:hover{
  background:var(--bg-blush);
}

/* Wishlist link hover */
.wishlist-link{
  transition:color .2s ease;
  cursor:pointer;
}
.wishlist-link:hover{
  color:var(--rose-heading);
}
.wishlist-link svg{
  transition:transform .2s ease;
}
.wishlist-link:hover svg{
  transform:scale(1.15);
}

/* Perk icons */
.perk-icon svg{
  transition:transform .3s ease;
}
.perk-item:hover .perk-icon svg{
  transform:scale(1.12) rotate(-4deg);
}

/* Promise / about / promo image float */
.about-hero-img{
  animation:fadeIn .9s ease both, floatY 7s ease-in-out 1s infinite;
}
.promo-photo{
  animation:fadeIn .9s ease both, floatY 6.5s ease-in-out 1s infinite;
}
.shop-hero-img{
  animation:fadeIn .9s ease both;
}
.badge-circle{
  animation:softPulse 3.2s ease-in-out infinite;
}

/* Newsletter input focus polish */
.signup-form input{
  transition:border-color .2s ease, box-shadow .2s ease;
}
.signup-form input:focus{
  border-color:var(--rose-btn);
  box-shadow:0 0 0 3px rgba(200,119,106,0.15);
  outline:none;
}

/* Social icons */

/* Step icons (offer page) */
.step-icon{
  transition:transform .3s ease, background .3s ease;
}
.step:hover .step-icon{
  transform:scale(1.08) rotate(-4deg);
  background:var(--bg-blush);
}

/* Together panel (offer page) */
.together-panel{
  transition:transform .3s ease, box-shadow .3s ease;
}
.together-panel:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 26px rgba(74,59,56,0.14);
}
.together-panel .photo{
  transition:transform .35s ease;
}
.together-panel:hover .photo{
  transform:scale(1.03);
}

/* Value item (about page) hover */
.value-item{
  transition:transform .25s ease;
}
.value-item:hover{
  transform:translateY(-4px);
}

/* View all link */
.view-all{
  transition:color .2s ease, border-color .2s ease;
}
.view-all:hover{
  color:var(--rose-btn-hover);
}

/* Above-the-fold hero text entrance (shop/about/offer pages) */
.shop-hero-text h1{animation:fadeInUp .7s ease both;}
.shop-hero-text p{animation:fadeInUp .7s ease .12s both;}
.about-hero-text .eyebrow{animation:fadeInUp .7s ease both;}
.about-hero-text h1{animation:fadeInUp .7s ease .12s both;}
.about-hero-text p{animation:fadeInUp .7s ease .24s both;}
.about-hero-text .btn{animation:fadeInUp .7s ease .36s both;}
.promo-eyebrow{animation:fadeInUp .7s ease both;}
.promo-title{animation:fadeInUp .7s ease .12s both;}
.promo-text p{animation:fadeInUp .7s ease .24s both;}
.promo-text .btn{animation:fadeInUp .7s ease .36s both;}

/* Product page entrance */
.product-gallery{
  animation:fadeIn .8s ease both;
}
.product-info > *{
  animation:fadeInUp .6s ease both;
}
.product-info .eyebrow{animation-delay:0s;}
.product-info h1{animation-delay:.06s;}
.product-info .rating{animation-delay:.12s;}
.product-info .product-price{animation-delay:.18s;}
.product-info .product-desc{animation-delay:.24s;}
.product-info .product-checklist{animation-delay:.3s;}
.product-info .quantity-label{animation-delay:.36s;}
.product-info .product-actions{animation-delay:.4s;}
.product-info .btn-block{animation-delay:.44s;}
.product-info .wishlist-link{animation-delay:.48s;}
.product-perks{animation:fadeInUp .6s ease .52s both;}

/* ===================== PAGE HERO (shared centered hero: blog, profile, etc.) ===================== */
.page-hero{
  background:var(--bg-blush);
  padding:60px 0 56px;
  text-align:center;
}
.page-hero .eyebrow{
  font-size:13px;
  font-style:italic;
  color:var(--rose-heading);
  margin-bottom:14px;
  font-family:'Playfair Display', serif;
  animation:fadeInUp .7s ease both;
}
.page-hero h1{
  font-size:38px;
  color:var(--rose-heading);
  font-weight:600;
  line-height:1.25;
  margin-bottom:16px;
  animation:fadeInUp .7s ease .12s both;
}
.page-hero p{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.8;
  max-width:480px;
  margin:0 auto;
  animation:fadeInUp .7s ease .24s both;
}

/* ===================== BLOG PAGE ===================== */
.blog-4{background:linear-gradient(135deg,#e9c7b6,#c17e6c); background-image:url('images/blog-nighttime.png'); background-size:cover; background-position:center;}
.blog-5{background:linear-gradient(135deg,#f4d8ca,#d49f88); background-image:url('images/blog-mist.png'); background-size:cover; background-position:center;}
.blog-6{background:linear-gradient(135deg,#eecdbe,#bb7f6f); background-image:url('images/blog-crueltyfree.png'); background-size:cover; background-position:center;}

.blog-card .tag{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.5px;
  font-weight:600;
  color:var(--rose-heading);
  background:var(--bg-blush-deep);
  padding:4px 12px;
  border-radius:20px;
  margin-bottom:12px;
}
.blog-card .excerpt{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.7;
  margin:6px 0 14px;
}
.blog-card .meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.blog-card .read-more{
  font-size:12.5px;
  font-weight:600;
  color:var(--rose-heading);
  border-bottom:1px solid var(--rose-heading);
  padding-bottom:2px;
  transition:color .2s ease;
}
.blog-card:hover .read-more{
  color:var(--rose-btn-hover);
}

/* ===================== BLOG ARTICLE PAGE ===================== */
.article-hero{
  background:var(--bg-blush);
  padding:50px 0 40px;
}
.article-hero .container{
  max-width:760px;
}
.article-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--rose-heading);
  margin-bottom:22px;
}
.article-back:hover{
  color:var(--rose-btn-hover);
}
.article-tag{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.5px;
  font-weight:600;
  color:var(--rose-heading);
  background:var(--bg-blush-deep);
  padding:4px 12px;
  border-radius:20px;
  margin-bottom:16px;
}
.article-hero h1{
  font-size:34px;
  color:var(--rose-heading);
  font-weight:600;
  line-height:1.3;
  margin-bottom:14px;
}
.article-meta{
  font-size:13px;
  color:var(--text-muted);
}
.article-cover{
  max-width:760px;
  margin:0 auto;
  width:100%;
  aspect-ratio:16/8;
  border-radius:10px;
}
.article-body{
  max-width:760px;
  margin:44px auto 0;
}
.article-body p{
  font-size:15.5px;
  color:var(--text-muted);
  line-height:1.9;
  margin-bottom:18px;
}
.article-footer{
  max-width:760px;
  margin:36px auto 0;
  padding-top:24px;
  border-top:1px solid var(--border-soft);
  text-align:center;
}

/* ===================== AUTH / PROFILE PAGE ===================== */
.auth-section{
  padding:60px 0 100px;
}
.auth-card{
  max-width:440px;
  margin:0 auto;
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:44px 40px;
  box-shadow:0 14px 34px rgba(74,59,56,0.08);
  animation:fadeInUp .6s ease both;
}
.auth-tabs{
  display:flex;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:30px;
}
.auth-tab{
  flex:1;
  text-align:center;
  padding:0 0 14px;
  font-size:14px;
  font-weight:500;
  color:var(--text-muted);
  cursor:pointer;
  position:relative;
  background:none;
  border:none;
  font-family:'Poppins', sans-serif;
  transition:color .2s ease;
}
.auth-tab:hover{
  color:var(--rose-heading);
}
.auth-tab.active{
  color:var(--rose-heading);
  font-weight:600;
}
.auth-tab.active::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:100%;
  height:2px;
  background:var(--rose-heading);
}
.auth-panel{
  display:none;
}
.auth-panel.active{
  display:block;
  animation:fadeIn .35s ease both;
}
.form-field{
  margin-bottom:18px;
}
.form-field label{
  display:block;
  font-size:12.5px;
  font-weight:500;
  color:var(--text-dark);
  margin-bottom:8px;
}
.form-field input{
  width:100%;
  padding:12px 14px;
  border:1px solid #d9b5a6;
  border-radius:6px;
  font-size:13.5px;
  font-family:'Poppins', sans-serif;
  background:var(--bg-cream);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus{
  border-color:var(--rose-btn);
  box-shadow:0 0 0 3px rgba(200,119,106,0.15);
}
.form-field input.field-invalid,
.form-field textarea.field-invalid{
  border-color:#dc2626;
  background:#fef5f5;
}
.form-field input.field-invalid:focus,
.form-field textarea.field-invalid:focus{
  box-shadow:0 0 0 3px rgba(220,38,38,0.12);
}
.field-error{
  font-size:11.5px;
  color:#dc2626;
  margin-top:5px;
  line-height:1.4;
}
.form-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  font-size:12.5px;
}
.form-options .remember{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-muted);
  cursor:pointer;
}
.form-options .remember input{
  accent-color:var(--rose-btn);
}
.forgot-link{
  color:var(--rose-heading);
  cursor:pointer;
  transition:opacity .2s ease;
}
.forgot-link:hover{
  opacity:0.75;
  text-decoration:underline;
}
.auth-submit{
  width:100%;
  text-align:center;
}
.auth-switch{
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
  margin-top:24px;
}
.auth-switch .switch-link{
  color:var(--rose-heading);
  font-weight:600;
  cursor:pointer;
}
.auth-switch .switch-link:hover{
  text-decoration:underline;
}
.auth-note{
  text-align:center;
  font-size:12px;
  color:var(--text-muted);
  line-height:1.7;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--border-soft);
}
.auth-success{
  display:none;
  text-align:center;
  padding:10px 0 4px;
}
.auth-success.active{
  display:block;
  animation:fadeIn .4s ease both;
}
.auth-success .success-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--bg-blush-deep);
  color:var(--rose-heading);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}
.auth-success .success-icon svg{
  width:24px;
  height:24px;
}
.auth-success h3{
  font-family:'Playfair Display', serif;
  font-size:20px;
  color:var(--rose-heading);
  margin-bottom:10px;
}
.auth-success p{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.7;
}

@media (max-width:600px){
  .auth-card{
    padding:32px 24px;
  }
  .page-hero h1{
    font-size:30px;
  }
}
/* ============================================
   FUNCTIONAL SHOP FILTERS (buttons/selects that
   match the pre-existing static look exactly)
   ============================================ */
.sidebar ul li{ margin-bottom:6px; }
.sidebar-filter{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:6px 0;
  font-family:'Poppins', sans-serif;
  font-size:13.5px;
  color:var(--text-muted);
  margin-bottom:8px;
  cursor:pointer;
  transition:color .15s ease;
}
.sidebar-filter:hover{ color:var(--rose-heading); }
.sidebar-filter.active{
  color:var(--rose-heading);
  font-weight:600;
}
select.dropdown{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%234a3b38' d='M2.5 4l3.5 4 3.5-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:10px;
  padding-right:32px;
}
select.dropdown:focus-visible{
  outline:2px solid var(--rose-heading);
  outline-offset:2px;
}
.shop-empty{
  color:var(--text-muted);
  font-size:14px;
  padding:40px 0;
  text-align:center;
}

/* ============================================
   CART DRAWER
   ============================================ */
.cart-overlay{
  position:fixed; inset:0;
  background:rgba(74,59,56,0.35);
  z-index:200;
  opacity:0;
  transition:opacity .25s ease;
}
.cart-overlay.open{ opacity:1; }
.cart-drawer{
  position:fixed;
  top:0; right:0;
  bottom:0;
  width:min(400px, 92vw);
  background:var(--bg-cream);
  z-index:201;
  display:flex;
  flex-direction:column;
  border-radius:16px 0 0 16px;
  overflow:hidden;
  transform:translateX(100%);
  transition:transform .3s ease;
  box-shadow:-14px 0 30px rgba(74,59,56,0.16);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px;
  border-bottom:1px solid var(--border-soft);
}
.cart-drawer-head h3{
  font-family:'Playfair Display', serif;
  font-size:20px;
  color:var(--rose-heading);
}
.cart-close, .search-close{
  background:none; border:none;
  font-size:24px;
  line-height:1;
  color:var(--text-dark);
  cursor:pointer;
  padding:10px;
  margin:-10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cart-close:hover, .search-close:hover{ color:var(--rose-heading); }
.cart-items{
  flex:1;
  overflow-y:auto;
  padding:16px 24px;
}
.cart-empty-msg{
  color:var(--text-muted);
  font-size:14px;
  padding:30px 0;
  text-align:center;
}
.cart-item{
  display:flex;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--border-soft);
  align-items:flex-start;
}
.cart-item-thumb{
  width:64px; height:64px;
  border-radius:8px;
  flex-shrink:0;
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{
  font-size:14px;
  font-weight:500;
  color:var(--text-dark);
  margin-bottom:4px;
}
.cart-item-price{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:10px;
}
.cart-item-controls{
  display:flex; align-items:center; justify-content:space-between;
}
.cart-item-qty{
  display:inline-flex; align-items:center;
  border:1px solid var(--border-soft);
  border-radius:20px;
}
.cart-item-qty button{
  background:none; border:none;
  width:26px; height:26px;
  font-size:14px;
  cursor:pointer;
  color:var(--text-dark);
}
.cart-item-qty button:hover{ color:var(--rose-heading); }
.cart-item-qty span{
  width:22px; text-align:center;
  font-size:13px;
}
.cart-item-remove{
  background:none; border:none;
  font-size:12px;
  color:var(--text-muted);
  text-decoration:underline;
  cursor:pointer;
}
.cart-item-remove:hover{ color:var(--rose-heading); }
.cart-drawer-foot{
  padding:20px 24px 24px;
  border-top:1px solid var(--border-soft);
}
.cart-subtotal-row{
  display:flex; justify-content:space-between;
  font-size:15px;
  font-weight:600;
  color:var(--text-dark);
  margin-bottom:16px;
}

/* ============================================
   SEARCH OVERLAY
   ============================================ */
.search-overlay{
  position:fixed; inset:0;
  background:rgba(74,59,56,0.35);
  z-index:200;
  opacity:0;
  transition:opacity .25s ease;
  display:flex;
  justify-content:center;
  padding-top:80px;
}
.search-overlay[hidden]{ display:none; }
.cart-overlay[hidden]{ display:none; }
.search-overlay.open{ opacity:1; }
.search-panel{
  background:var(--bg-cream);
  width:min(560px, 92vw);
  max-height:70vh;
  border-radius:10px;
  box-shadow:0 20px 50px rgba(74,59,56,0.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(-16px);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.search-overlay.open .search-panel{
  transform:translateY(0);
  opacity:1;
}
.search-panel-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-muted);
}
.search-panel-head svg{ width:18px; height:18px; flex-shrink:0; }
.search-panel-head input{
  flex:1;
  border:none;
  background:none;
  font-family:'Poppins', sans-serif;
  font-size:15px;
  color:var(--text-dark);
  outline:none;
}
.search-results{
  overflow-y:auto;
  padding:8px 12px;
}
.search-result-item{
  display:flex; align-items:center; gap:14px;
  padding:12px;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
}
.search-result-item:hover{ background:var(--bg-blush); }
.search-result-thumb{
  width:48px; height:48px;
  border-radius:6px;
  flex-shrink:0;
}
.search-result-info h4{
  font-size:14px;
  font-weight:500;
  color:var(--text-dark);
}
.search-result-info .price{
  font-size:12.5px;
  color:var(--text-muted);
}
.search-empty, .search-hint{
  color:var(--text-muted);
  font-size:13.5px;
  padding:24px 16px;
  text-align:center;
}

/* ===================== CONTACT PAGE ===================== */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:40px;
  align-items:start;
}
.contact-info{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.contact-info-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:22px;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact-info-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(74,59,56,0.1);
}
.contact-info-card .perk-icon{
  background:var(--bg-blush-deep);
  width:40px; height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.contact-info-card .perk-icon svg{ width:19px; height:19px; }
.contact-info-card h4{
  font-size:14.5px;
  color:var(--text-dark);
  font-weight:600;
  margin-bottom:4px;
}
.contact-info-card p{
  font-size:13px;
  color:var(--text-muted);
}
.contact-form-card{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:40px;
  box-shadow:0 14px 34px rgba(74,59,56,0.08);
}
.form-field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #d9b5a6;
  border-radius:6px;
  font-size:13.5px;
  font-family:'Poppins', sans-serif;
  background:var(--bg-cream);
  outline:none;
  resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field textarea:focus{
  border-color:var(--rose-btn);
  box-shadow:0 0 0 3px rgba(200,119,106,0.15);
}
.contact-success{
  display:none;
  text-align:center;
  padding:10px 0 4px;
}
.contact-success.active{
  display:block;
  animation:fadeIn .4s ease both;
}
.contact-success .success-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--bg-blush-deep);
  color:var(--rose-heading);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}
.contact-success .success-icon svg{ width:24px; height:24px; }
.contact-success h3{
  font-family:'Playfair Display', serif;
  font-size:20px;
  color:var(--rose-heading);
  margin-bottom:10px;
}
.contact-success p{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.7;
}
.faq-section{ padding-top:0; }
.faq-list{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:16px 20px;
  background:var(--white);
}
.faq-item summary{
  cursor:pointer;
  font-size:14.5px;
  font-weight:500;
  color:var(--text-dark);
  list-style:none;
  position:relative;
  padding-right:26px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:0; top:0;
  font-size:18px;
  color:var(--rose-heading);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.7;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-soft);
}

@media (max-width:860px){
  .contact-layout{
    grid-template-columns:1fr;
  }
  .contact-form-card{
    padding:28px;
  }
}

/* ===================== CHECKOUT PAGE ===================== */
.checkout-layout{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:start;
}
.checkout-form-card{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:40px;
  box-shadow:0 14px 34px rgba(74,59,56,0.08);
}
.checkout-form-card h3{
  font-family:'Playfair Display', serif;
  font-size:20px;
  color:var(--rose-heading);
  margin-bottom:24px;
}
.checkout-summary-card{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:32px;
  box-shadow:0 14px 34px rgba(74,59,56,0.08);
  position:sticky;
  top:100px;
}
.checkout-summary-card h3{
  font-family:'Playfair Display', serif;
  font-size:18px;
  color:var(--rose-heading);
  margin-bottom:6px;
}
.checkout-summary-count{
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:18px;
}
.checkout-items{
  max-height:340px;
  overflow-y:auto;
  margin-right:-8px;
  padding-right:8px;
}
.checkout-item{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--border-soft);
  align-items:flex-start;
}
.checkout-item:last-child{ border-bottom:none; }
.checkout-item-thumb-wrap{
  position:relative;
  flex-shrink:0;
}
.checkout-item-thumb{
  width:56px; height:56px;
  border-radius:8px;
}
.checkout-item-qty-badge{
  position:absolute;
  top:-7px; right:-7px;
  background:var(--rose-btn);
  color:#fff;
  font-size:11px;
  font-weight:600;
  width:20px; height:20px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--white);
}
.checkout-item-info{ flex:1; min-width:0; }
.checkout-item-info h4{
  font-size:13.5px;
  font-weight:500;
  color:var(--text-dark);
  margin-bottom:3px;
  line-height:1.35;
}
.checkout-item-info .price{
  font-size:12.5px;
  color:var(--text-muted);
}
.checkout-totals{
  margin-top:8px;
  padding-top:16px;
  border-top:1px solid var(--border-soft);
}
.checkout-totals-row{
  display:flex;
  justify-content:space-between;
  font-size:13.5px;
  color:var(--text-muted);
  padding:5px 0;
}
.product-not-found{
  text-align:center;
  padding:60px 20px;
}
.product-not-found h2{
  margin-bottom:10px;
}
.product-not-found p{
  color:var(--text-muted);
  margin-bottom:24px;
}
.checkout-discount-row{
  color:#4a8a63;
  font-weight:500;
}
.checkout-totals-row.total{
  font-size:16px;
  font-weight:600;
  color:var(--text-dark);
  padding-top:12px;
  margin-top:6px;
  border-top:1px solid var(--border-soft);
}
.checkout-shipping-note{
  font-size:11.5px;
  color:var(--text-muted);
  margin-top:10px;
  line-height:1.5;
}

/* ── Checkout steps progress bar ─────────────────────── */
.checkout-steps-bar{
  background:var(--bg-blush);
  border-bottom:1px solid var(--border-soft);
  padding:14px 0;
}
.checkout-steps{
  display:flex;
  align-items:center;
  gap:0;
  max-width:320px;
}
.checkout-step{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:.4;
  transition:opacity .2s;
}
.checkout-step.active{ opacity:1; }
.checkout-step.done{ opacity:.75; }
.step-num{
  width:24px; height:24px;
  border-radius:50%;
  background:var(--border-soft);
  color:var(--text-muted);
  font-size:11px;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .2s, color .2s;
}
.checkout-step.active .step-num,
.checkout-step.done .step-num{
  background:var(--rose-btn);
  color:#fff;
}
.step-label{
  font-size:12.5px;
  font-weight:500;
  color:var(--text-dark);
  white-space:nowrap;
}
.checkout-step-divider{
  flex:1;
  height:1px;
  background:var(--border-soft);
  margin:0 12px;
  min-width:32px;
}

/* ── Back button ─────────────────────────────────────── */
.checkout-back-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:'Poppins', sans-serif;
  font-size:12.5px;
  color:var(--text-muted);
  padding:0;
  margin-bottom:20px;
  transition:color .15s;
}
.checkout-back-btn:hover{ color:var(--rose-btn); }

/* ── Field note ──────────────────────────────────────── */
.checkout-field-note{
  font-size:11.5px;
  color:var(--text-muted);
  margin-top:4px;
}

/* ── Delivery recap (step 2 read-only) ──────────────── */
.checkout-delivery-recap{
  background:var(--bg-blush);
  border:1px solid var(--border-soft);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:22px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-dark);
}
.checkout-delivery-recap strong{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:4px;
}

/* ── Payment section ─────────────────────────────────── */
.checkout-payment-section{ margin-bottom:20px; }
.checkout-payment-total-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
  font-size:14px;
  color:var(--text-dark);
}
.checkout-payment-total{
  font-size:22px;
  font-weight:600;
  font-family:'Playfair Display', serif;
  color:var(--rose-heading);
}
.checkout-pay-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:15px;
  padding:15px 24px;
}
.checkout-pay-btn:disabled{ opacity:.6; cursor:not-allowed; }
.checkout-pay-error{
  margin-top:10px;
  font-size:13px;
  color:#b91c1c;
  background:#fee2e2;
  border:1px solid #fca5a5;
  border-radius:6px;
  padding:10px 14px;
  line-height:1.5;
}

/* ── Trust badges ────────────────────────────────────── */
.checkout-trust-bar{
  display:flex;
  align-items:center;
  gap:20px;
  padding:14px 0;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  margin:18px 0;
  flex-wrap:wrap;
}
.checkout-trust-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-muted);
  font-weight:500;
}
.checkout-trust-item svg{
  width:16px; height:16px;
  color:var(--rose-btn);
  flex-shrink:0;
}

/* ── Secure note ─────────────────────────────────────── */
.checkout-secure-note{
  font-size:11.5px;
  color:var(--text-muted);
  line-height:1.6;
  text-align:center;
}

/* ── Success details ─────────────────────────────────── */
.checkout-success-details{
  background:var(--bg-blush);
  border:1px solid var(--border-soft);
  border-radius:8px;
  padding:14px 16px;
  margin:16px 0 24px;
  font-size:13px;
  line-height:1.7;
  text-align:left;
  color:var(--text-dark);
}
.checkout-empty-state{
  grid-column:1 / -1;
  text-align:center;
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:70px 40px;
  box-shadow:0 14px 34px rgba(74,59,56,0.08);
}
.checkout-empty-state h3{
  font-family:'Playfair Display', serif;
  font-size:22px;
  color:var(--rose-heading);
  margin-bottom:10px;
}
.checkout-empty-state p{
  color:var(--text-muted);
  margin-bottom:24px;
}
.checkout-guest-note{
  margin-top:14px;
  font-size:12px;
  color:var(--text-muted);
  text-align:center;
  line-height:1.5;
}
.checkout-guest-note a{
  color:var(--rose-heading);
  text-decoration:underline;
}

@media (max-width:860px){
  .checkout-layout{
    grid-template-columns:1fr;
  }
  .checkout-summary-card{
    position:static;
    order:-1;
  }
  .checkout-form-card{
    padding:28px;
  }
}

/* ===================== ORDER STATUS (order-success.html / order-failed.html) ===================== */
/* Reuses .checkout-empty-state as the big centered card, .checkout-success-details
   for the order-number recap box, and .checkout-pay-error for the failure-reason
   box - these new rules only add the status icon and the button row. */
.order-status-card{
  max-width:560px;
  margin:0 auto;
  text-align:center;
}
.status-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}
.status-icon svg{ width:26px; height:26px; }
.status-icon-success{
  background:var(--bg-blush-deep);
  color:var(--rose-heading);
}
.status-icon-error{
  background:#fbe3e0;
  color:#a3423a;
}
.order-status-details{ text-align:left; }
.order-status-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:8px;
}
@media (max-width:480px){
  .order-status-actions{ flex-direction:column; }
  .order-status-actions .btn,
  .order-status-actions .btn-outline{ width:100%; text-align:center; }
}

/* LEGAL / INFO PAGES (Shipping & Returns, Track Order, Privacy Policy) */
.legal-content{
  max-width:760px;
}
.legal-updated{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border-soft);
}
.legal-toc{
  background:var(--bg-blush);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:20px 24px;
  margin-bottom:36px;
}
.legal-toc h4{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted);
  margin-bottom:12px;
}
.legal-toc ol{
  columns:2;
  column-gap:24px;
  padding-left:20px;
  margin:0;
}
.legal-toc li{
  font-size:13.5px;
  margin-bottom:8px;
  break-inside:avoid;
}
.legal-toc a{
  color:var(--text-dark);
  text-decoration:none;
}
.legal-toc a:hover{
  color:var(--rose-btn);
  text-decoration:underline;
}
.legal-content h3{
  font-size:19px;
  color:var(--rose-heading);
  font-weight:600;
  margin-top:32px;
  margin-bottom:12px;
  scroll-margin-top:100px;
}
.legal-content h3:first-of-type{
  margin-top:0;
}
.legal-content h4{
  font-size:15px;
  color:var(--text-dark);
  font-weight:600;
  margin-top:20px;
  margin-bottom:8px;
}
.legal-content p{
  font-size:15px;
  color:var(--text-muted);
  line-height:1.8;
  margin-bottom:14px;
}
.legal-content ul,
.legal-content ol{
  margin:0 0 16px;
  padding-left:22px;
}
.legal-content ul li,
.legal-content ol li{
  font-size:15px;
  color:var(--text-muted);
  line-height:1.8;
  margin-bottom:6px;
}
.legal-content strong{
  color:var(--text-dark);
  font-weight:600;
}
.legal-content a{
  color:var(--rose-btn);
  text-decoration:underline;
}
.legal-content a:hover{
  color:var(--rose-btn-hover);
}
.legal-callout{
  background:#fff8ec;
  border:1px solid #f0d9a8;
  border-radius:8px;
  padding:14px 18px;
  margin:16px 0 24px;
  font-size:14px;
  color:#6b5220;
  line-height:1.7;
}
.legal-callout strong{
  color:#6b5220;
}

/* ===================== COOKIE CONSENT ===================== */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1000;
  background:var(--white);
  border-top:1px solid var(--border-soft);
  box-shadow:0 -8px 28px rgba(74,59,56,0.12);
  transform:translateY(100%);
  transition:transform .35s ease;
}
.cookie-banner.open{
  transform:translateY(0);
}
.cookie-banner-inner{
  max-width:1200px;
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cookie-banner-inner p{
  margin:0;
  font-size:13px;
  color:var(--text-muted);
  line-height:1.6;
  flex:1 1 320px;
}
.cookie-banner-inner a{
  color:var(--rose-heading);
  text-decoration:underline;
}
.cookie-banner-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cookie-btn{
  font-family:'Poppins', sans-serif;
  font-size:12.5px;
  font-weight:500;
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease, border-color .2s ease, opacity .2s ease;
}
.cookie-btn-ghost{
  background:none;
  border:none;
  color:var(--text-muted);
  text-decoration:underline;
  padding:10px 4px;
}
.cookie-btn-ghost:hover{
  color:var(--rose-heading);
}
.cookie-btn-outline{
  background:transparent;
  border:1.5px solid var(--rose-btn);
  color:var(--rose-btn);
}
.cookie-btn-outline:hover{
  background:var(--bg-blush);
}
.cookie-btn-solid{
  background:var(--rose-btn);
  border:1.5px solid var(--rose-btn);
  color:var(--white);
}
.cookie-btn-solid:hover{
  background:var(--rose-btn-hover);
  border-color:var(--rose-btn-hover);
}

.cookie-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(74,59,56,0.45);
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .25s ease;
}
.cookie-modal-overlay.open{
  opacity:1;
}
.cookie-modal-overlay[hidden]{
  display:none;
}
.cookie-modal{
  background:var(--white);
  border-radius:14px;
  max-width:460px;
  width:100%;
  max-height:86vh;
  overflow-y:auto;
  box-shadow:0 20px 50px rgba(74,59,56,0.25);
  transform:translateY(14px);
  transition:transform .25s ease;
}
.cookie-modal-overlay.open .cookie-modal{
  transform:translateY(0);
}
.cookie-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--border-soft);
}
.cookie-modal-head h3{
  font-family:'Playfair Display', serif;
  font-size:19px;
  color:var(--rose-heading);
  margin:0;
}
.cookie-modal-close{
  background:none;
  border:none;
  font-size:22px;
  line-height:1;
  color:var(--text-muted);
  cursor:pointer;
  padding:4px;
}
.cookie-modal-close:hover{
  color:var(--rose-heading);
}
.cookie-modal-body{
  padding:18px 24px;
}
.cookie-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--bg-blush);
}
.cookie-row:last-child{
  border-bottom:none;
}
.cookie-row h4{
  font-size:14px;
  color:var(--text-dark);
  margin:0 0 4px;
}
.cookie-row p{
  font-size:12px;
  color:var(--text-muted);
  line-height:1.6;
  margin:0;
}
.cookie-toggle{
  position:relative;
  display:inline-block;
  width:38px;
  height:22px;
  flex:0 0 auto;
  margin-top:2px;
}
.cookie-toggle input{
  opacity:0;
  width:0;
  height:0;
}
.cookie-slider{
  position:absolute;
  inset:0;
  background:#d9c8c2;
  border-radius:22px;
  cursor:pointer;
  transition:background .2s ease;
}
.cookie-slider::before{
  content:"";
  position:absolute;
  left:3px; top:3px;
  width:16px; height:16px;
  background:var(--white);
  border-radius:50%;
  transition:transform .2s ease;
}
.cookie-toggle input:checked + .cookie-slider{
  background:var(--rose-btn);
}
.cookie-toggle input:checked + .cookie-slider::before{
  transform:translateX(16px);
}
.cookie-toggle-disabled .cookie-slider{
  background:var(--rose-btn);
  opacity:0.55;
  cursor:not-allowed;
}
.cookie-modal-foot{
  display:flex;
  gap:10px;
  padding:16px 24px 24px;
}
.cookie-modal-foot .btn,
.cookie-modal-foot .btn-outline{
  flex:1;
  text-align:center;
  padding:12px 16px;
  font-size:13px;
}
.cookie-manage-link{
  background:none;
  border:none;
  color:inherit;
  font-size:inherit;
  font-family:inherit;
  text-decoration:underline;
  cursor:pointer;
  padding:0;
}
.cookie-manage-link:hover{
  color:var(--rose-heading);
}

@media (max-width:600px){
  .cookie-banner-inner{
    flex-direction:column;
    align-items:stretch;
    text-align:left;
  }
  .cookie-banner-actions{
    justify-content:stretch;
  }
  .cookie-banner-actions .cookie-btn{
    flex:1;
    text-align:center;
  }
}

/* ===================== ACCOUNT PANEL (logged-in state on profile page) ===================== */
.auth-card:has(.account-panel:not([hidden])){
  max-width:580px;
}
.account-panel{
  animation:fadeIn .35s ease both;
}
.account-header{
  display:flex;
  align-items:center;
  gap:20px;
  text-align:left;
  padding-bottom:26px;
  margin-bottom:8px;
}
.account-avatar{
  flex:none;
  width:68px;
  height:68px;
  border-radius:50%;
  background:var(--rose-btn);
  color:var(--white);
  font-family:'Playfair Display', serif;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(200,119,106,0.32);
}
.account-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.account-header-text{
  min-width:0;
}
.account-panel h3{
  font-family:'Playfair Display', serif;
  font-size:22px;
  font-weight:500;
  color:var(--rose-heading);
  margin-bottom:4px;
}
.account-email{
  font-size:13px;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}
.account-since{
  display:inline-block;
  margin-top:8px;
  font-size:10.5px;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:var(--rose-heading);
}
@media (max-width:520px){
  .account-header{
    flex-direction:column;
    text-align:center;
  }
  .account-header-text{
    text-align:center;
  }
}

/* Auth form inline error / success messages */
.auth-error{
  background:#fbe3e0;
  color:#a3423a;
  border:1px solid #f0bdb6;
  border-radius:6px;
  font-size:12.5px;
  padding:10px 14px;
  margin-bottom:18px;
  line-height:1.5;
}
.newsletter-error{
  background:#fbe3e0;
  color:#a3423a;
  border:1px solid #f0bdb6;
  border-radius:6px;
  font-size:12px;
  padding:8px 12px;
  margin-top:10px;
  line-height:1.4;
}
.auth-success{
  background:var(--bg-blush);
  color:var(--rose-heading);
  border:1px solid var(--border-soft);
  border-radius:6px;
  font-size:12.5px;
  padding:10px 14px;
  margin-bottom:18px;
  line-height:1.5;
}

/* ===================== ACCOUNT TABS + PANELS ===================== */
.account-tabs{
  display:flex;
  gap:26px;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:28px;
  overflow-x:auto;
}
.account-tab{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 0 14px;
  font-size:13.5px;
  font-weight:500;
  font-family:'Poppins', sans-serif;
  color:var(--text-muted);
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  transition:color .2s ease;
}
.account-tab:hover{
  color:var(--rose-heading);
}
.account-tab.active{
  color:var(--rose-heading);
  font-weight:600;
}
.account-tab.active::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:100%;
  height:2px;
  background:var(--rose-heading);
}
.account-tab-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:17px;
  height:17px;
  padding:0 5px;
  border-radius:20px;
  background:var(--bg-blush-deep);
  color:var(--rose-heading);
  font-size:10px;
  font-weight:600;
}
.account-tab.active .account-tab-count{
  background:var(--rose-btn);
  color:var(--white);
}

.account-tab-panel{
  display:none;
  margin-bottom:8px;
  animation:fadeIn .3s ease both;
}
.account-tab-panel.active{
  display:block;
}

.account-empty{
  text-align:center;
  padding:36px 20px;
}
.account-empty-icon{
  width:44px;
  height:44px;
  margin:0 auto 16px;
  border:1.4px solid var(--rose-heading);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--rose-heading);
}
.account-empty-icon svg{
  width:20px;
  height:20px;
}
.account-empty h4{
  font-family:'Playfair Display', serif;
  font-size:16px;
  font-weight:500;
  color:var(--text-dark);
  margin-bottom:6px;
}
.account-empty p{
  font-size:12.5px;
  color:var(--text-muted);
  margin-bottom:20px;
  line-height:1.6;
  max-width:280px;
  margin-left:auto;
  margin-right:auto;
}

.account-orders-list, .account-favourites-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.account-order-item{
  border-bottom:1px solid var(--bg-blush);
}
.account-order-item:last-child{
  border-bottom:none;
}
.account-order-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:16px 4px;
  background:none;
  border:none;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.account-order-info h4{
  font-family:'Playfair Display', serif;
  font-size:14px;
  font-weight:500;
  color:var(--text-dark);
  margin-bottom:3px;
}
.account-order-info p{
  font-size:12px;
  color:var(--text-muted);
}
.account-order-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.account-order-total{
  font-size:13.5px;
  font-weight:600;
  color:var(--rose-heading);
}
.account-order-status{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.3px;
  color:var(--rose-heading);
  background:var(--bg-blush);
  padding:5px 12px;
  border-radius:20px;
  white-space:nowrap;
}
.account-order-status-paid,
.account-order-status-fulfilled{ color:#2f7a4d; background:#e5f4e9; }
.account-order-status-pending,
.account-order-status-processing{ color:#a4691f; background:#faf0dc; }
.account-order-status-failed,
.account-order-status-cancelled{ color:#a4453e; background:#fdf3f2; }
.account-order-chevron{
  width:16px;
  height:16px;
  color:var(--text-muted);
  transition:transform .2s ease;
  flex-shrink:0;
}
.account-order-summary.is-open .account-order-chevron{
  transform:rotate(180deg);
}
.account-order-details{
  padding:0 4px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.account-order-details[hidden]{
  display:none;
}
.account-order-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--text-muted);
}
.account-order-line.account-order-grand{
  border-top:1px dashed var(--border-soft);
  margin-top:4px;
  padding-top:8px;
  font-weight:600;
  color:var(--text-dark);
}
.account-order-line.account-order-grand span:last-child{
  color:var(--rose-heading);
}

.account-fav-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 4px;
  border-bottom:1px solid var(--bg-blush);
}
.account-fav-item:last-child{
  border-bottom:none;
}
.account-fav-thumb{
  flex:none;
  width:56px;
  height:56px;
  border-radius:8px;
  display:block;
  transition:transform .25s ease;
}
.account-fav-thumb:hover{
  transform:scale(1.04);
}
.account-fav-info{
  flex:1;
  min-width:0;
}
.account-fav-info h4{
  font-size:13px;
  font-weight:500;
  color:var(--text-dark);
  margin-bottom:2px;
  transition:color .2s ease;
}
.account-fav-info a:hover h4{
  color:var(--rose-heading);
}
.account-fav-price{
  font-size:12px;
  color:var(--text-muted);
}
.account-fav-remove{
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  color:var(--text-muted);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.account-fav-remove:hover{
  background:var(--bg-blush);
  color:var(--rose-heading);
}

.account-settings-block h4{
  font-family:'Playfair Display', serif;
  font-size:15px;
  font-weight:500;
  color:var(--rose-heading);
  margin-bottom:16px;
}
.account-settings-divider{
  height:1px;
  background:var(--border-soft);
  margin:26px 0;
}
.account-settings-form .form-field{
  margin-bottom:14px;
}
.account-settings-hint{
  font-size:12px;
  color:var(--text-muted);
  margin-top:10px;
}

/* Header account icon: small dot indicator once logged in */
.icon-account{
  position:relative;
}
.icon-account.is-logged-in::after{
  content:"";
  position:absolute;
  top:-2px;
  right:-2px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#6fae7a;
  border:1.5px solid var(--white);
}

/* ===================== GOOGLE SIGN-IN BUTTON ===================== */
.google-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--white);
  border:1.5px solid var(--border-soft);
  color:var(--text-dark);
  font-family:'Poppins', sans-serif;
  font-size:13.5px;
  font-weight:500;
  padding:12px 16px;
  border-radius:6px;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.google-btn:hover{
  border-color:#d9b5a6;
  box-shadow:0 4px 12px rgba(74,59,56,0.08);
}
.google-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:22px 0;
  color:var(--text-muted);
  font-size:12px;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border-soft);
}

/* ============================================================
   MOBILE DESIGN (≤600px) — professional mobile storefront pass
   Modeled on the patterns top beauty stores use on mobile:
   compact sticky header, generous vertical rhythm, 16px+ body
   text (also prevents iOS auto-zoom on inputs), full-width
   CTAs, and edge-to-edge product imagery. Everything in this
   file below this line is scoped to ≤600px — desktop untouched.
   ============================================================ */
@media (max-width:600px){

  /* ---- Global rhythm & type ---- */
  .container{padding:0 18px;}
  .section{padding:44px 0;}
  body{font-size:16px;}

  /* ---- Compact sticky header (standard on top mobile stores:
     nav follows you, so cart/search are always one tap away) ---- */
  header{
    padding:14px 0;
    position:sticky;
    top:0;
    z-index:90;
  }
  .logo{font-size:21px;}

  /* ---- Homepage hero: text-first, image below, roomy ---- */
  .hero{padding:36px 0 44px;}
  .hero-inner{gap:26px;}
  .hero-text{text-align:center;}
  .hero-text h1{font-size:36px; line-height:1.18;}
  .hero-text p{font-size:15.5px; max-width:100%; margin-left:auto; margin-right:auto;}
  .hero-text .btn{width:100%; text-align:center;}
  .hero-img{aspect-ratio:1/0.85;}

  /* ---- Feature bar: clean 2x2 with centered items ---- */
  .features-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 14px;
    text-align:center;
  }
  .feature-item{flex-direction:column; font-size:13px;}

  /* ---- Section heads ---- */
  .section-head{margin-bottom:22px;}
  .section-head h2{font-size:23px;}
  .view-all{font-size:13px;}

  /* ---- Product cards: 2-up with breathing room; bigger, easier
     to read text; favourite button gets a full tap target ---- */
  .product-grid, .shop-grid{gap:20px 12px;}
  .product-card h3{font-size:14px; line-height:1.35;}
  .product-card .price{font-size:14px; font-weight:600;}
  .favourite-toggle{padding:10px;}

  /* ---- Promise: single column, image gets a friendlier height,
     text block centered like the hero ---- */
  .promise .container{gap:0;}
  .promise-text{padding:36px 22px 30px; text-align:center;}
  .promise-text h2{font-size:26px;}
  .promise-text .btn{width:100%; text-align:center;}
  .promise-img{height:300px; border-radius:8px;}

  /* ---- Blog cards ---- */
  .blog-grid{gap:22px;}

  /* ---- Footer: single column, larger link targets ---- */
  footer{padding-top:40px;}
  .newsletter{grid-template-columns:1fr; gap:30px; padding-bottom:34px;}
  .signup-form{display:flex; flex-direction:column; gap:10px;}
  .signup-form input{width:100%; font-size:16px; padding:14px 16px;}
  .signup-form .btn{width:100%;}
  .footer-col ul li{margin-bottom:0;}
  .footer-col ul li a{display:block; padding:7px 0;}
  .copyright{font-size:12px; padding:20px 18px; line-height:1.8;}

  /* ---- Shop page ---- */
  /* Sidebar duplicates the category dropdown on mobile — hide it,
     the dropdown is the mobile-native pattern. */
  .sidebar{display:none;}
  .shop-layout{grid-template-columns:1fr; gap:0;}
  .shop-body{padding:34px 0 30px;}
  .filter-bar{flex-direction:column; align-items:stretch; gap:10px;}
  .filter-left{display:none;} /* decorative "Filters" label, no function */
  .filter-right{display:flex; flex-direction:column; gap:10px;}
  .filter-right .dropdown{
    width:100%;
    padding:13px 14px;
    font-size:16px; /* ≥16px prevents iOS zoom-on-focus */
  }
  .shop-hero-text{max-width:170px;}
  .shop-hero-text h1{font-size:24px; margin-bottom:6px;}
  .shop-hero-text p{font-size:12px; line-height:1.5;}
  .pagination{gap:6px;}
  .pagination span, .pagination a{min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;}

  /* ---- Product page: stacked, thumbs under main image, prominent
     price, full-width add-to-cart (the top-store standard) ---- */
  .product-page{padding:28px 0 44px;}
  .product-layout{gap:24px;}
  .product-gallery{display:flex; flex-direction:column-reverse; gap:12px;}
  .gallery-thumbs{flex-direction:row; display:flex; gap:10px;}
  .gallery-thumbs .g-thumb{width:62px; height:62px; flex:none; border-radius:8px;}
  .gallery-main{width:100%; aspect-ratio:1/1; height:auto;}
  .product-info h1{font-size:26px;}
  .product-price{font-size:26px;}
  .product-desc{font-size:15px; line-height:1.7;}
  .product-checklist li{font-size:14px;}
  .product-actions{margin-bottom:14px;}
  .qty-selector button{width:42px; height:42px; font-size:18px;}
  .qty-selector .qty-value{min-width:36px; font-size:16px;}
  [data-add-to-cart]{padding:16px 32px; font-size:15px;}
  .wishlist-link{padding:12px 0; display:inline-flex;}
  .product-perks{grid-template-columns:1fr; gap:16px; margin-top:36px;}

  /* ---- Page heros (blog/contact) ---- */
  .page-hero{padding:40px 0 36px;}
  .page-hero h1{font-size:27px; line-height:1.25;}
  .page-hero p{font-size:14.5px;}

  /* ---- About ---- */
  .about-hero{padding:36px 0 36px;}
  .about-hero-inner{gap:26px;}
  .about-hero-text h1{font-size:24px; line-height:1.35;}
  .about-hero-text p{font-size:14.5px;}
  .about-hero-text .btn{width:100%; text-align:center;}
  .about-hero-img{height:280px; border-radius:8px; overflow:hidden;}
  .about-values{padding:40px 0 46px;}
  .values-grid{grid-template-columns:1fr; gap:24px; text-align:center;}
  .about-cta{padding:48px 0;}
  .about-cta-tagline{font-size:21px;}
  .about-cta-btn{width:calc(100% - 36px);}

  /* ---- Offer page ---- */
  .promo-hero{padding:34px 0 0;}
  .promo-title{font-size:38px;}
  .promo-title .script{font-size:42px;}
  .promo-title .script svg{width:18px; height:18px; margin-top:4px;}
  .promo-arch{display:none;}
  .promo-image{max-width:260px; padding-top:8px;}
  .promo-photo{border-radius:12px;}
  .badge-circle{width:72px; height:72px; top:6px; right:2px;}
  .badge-circle span{font-size:8px;}
  .badge-circle strong{font-size:19px;}
  .badge-circle strong small{font-size:10px;}
  .promo-text .btn{width:100%; text-align:center;}
  .how-it-works{padding:44px 0;}
  .together-box{padding:26px 18px;}
  .features-inner-4{grid-template-columns:1fr; gap:18px;}

  /* ---- Contact ---- */
  .contact-layout{grid-template-columns:1fr; gap:22px;}
  .contact-form-card{padding:24px 18px;}
  .contact-form input,
  .contact-form textarea{font-size:16px; padding:13px 14px;}
  .faq-item summary{padding:16px 14px; font-size:14.5px;}

  /* ---- Auth / account ---- */
  .auth-card{padding:28px 18px;}
  .auth-form input{font-size:16px; padding:13px 14px;}
  .account-tabs{flex-wrap:wrap; gap:8px;}
  .account-tab{padding:9px 14px; font-size:13px;}
  .account-order-right{gap:8px;}
  .account-order-total{font-size:12.5px;}
  .account-order-status{font-size:10px; padding:4px 9px;}

  /* ---- Blog article ---- */
  .article-hero h1{font-size:25px; line-height:1.3;}
  .article-body{font-size:16px; line-height:1.8;}
  .article-cover{height:220px;}

  /* ---- Legal pages ---- */
  .legal-content{font-size:15px; line-height:1.75;}
}