/* ===== DESIGN TOKENS ===== */
:root{
  --brand-deep:   #36013F;
  --brand-accent: #93278F;
  --pink-wash:    #FAEBF9;
  --pink-soft:    #FCF3F6;
  --cream:        #FAF9F5;
  --text:         #666666;
  --ink:          #383838;
  --white:        #FFFFFF;
  --line:         #EADFE8;

  --font-display: 'Oswald', Helvetica, Arial, sans-serif;
  --font-body:    'Lato', Helvetica, Arial, sans-serif;
  --font-script:  'Allison', cursive;
  --font-alt:     'DM Sans', 'Poppins', sans-serif;

  --radius: 0;
  --container: 1200px;
  --gutter: 6vw;
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--ink);
  line-height:1.15;
  letter-spacing:.02em;
}
h1{font-size:clamp(2.2rem,5vw,3.8rem);text-transform:uppercase;color:var(--white)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);text-transform:uppercase}
h3{font-size:1.4rem;text-transform:uppercase}

.overline{
  font-family:var(--font-alt);
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--brand-accent);
  margin-bottom:.6rem;
}
.script{
  font-family:var(--font-script);
  font-size:2.2rem;
  color:var(--brand-accent);
  line-height:1;
  margin-bottom:.2rem;
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-block;
  padding:.95rem 1.8rem;
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  transition:all .25s ease;
  border:2px solid transparent;
  margin:.3rem .4rem;
}
.btn-primary{background:var(--brand-accent);color:#fff;border-color:var(--brand-accent)}
.btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:#fff;color:var(--brand-deep)}
.btn-dark{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.btn-dark:hover{background:var(--brand-accent);border-color:var(--brand-accent)}
.btn-outline{background:transparent;color:var(--brand-deep);border-color:var(--brand-deep)}
.btn-outline:hover{background:var(--brand-deep);color:#fff}

/* ===== UTILITY BAR ===== */
.utility{
  background:var(--brand-deep);
  color:#fff;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-family:var(--font-alt);
}
.utility .wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:.55rem var(--gutter);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1.8rem;
}
.utility a{color:#fff;opacity:.85;transition:opacity .2s}
.utility a:hover{opacity:1}

/* Currency toggle in utility bar */
.currency-toggle{
  display:inline-flex;
  align-items:center;
  gap:0;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  padding:.18rem;
  border-radius:999px;
  font-family:var(--font-alt);
  font-size:.72rem;
  letter-spacing:.12em;
  cursor:pointer;
  line-height:1;
}
.currency-toggle .cur{
  padding:.32rem .7rem;
  color:rgba(255,255,255,.65);
  border-radius:999px;
  transition:all .2s;
  font-weight:500;
}
.currency-toggle .cur.active{
  background:var(--brand-accent);
  color:#fff;
}
.currency-toggle:hover .cur:not(.active){color:#fff}

/* ===== LOGO BAR ===== */
.logo-bar{
  background:#fff;
  text-align:center;
  padding:1.6rem 1rem;
  border-bottom:1px solid var(--line);
}
.logo-bar a{display:inline-block}
.logo-bar img{height:64px;margin:0 auto}

/* ===== MAIN NAV ===== */
.main-nav{
  position:sticky;
  top:0;
  z-index:800; /* above PayPal's embedded card-field iframes (kept below the 900+ mobile filter drawer) */
  background:var(--brand-deep);
  color:#fff;
}
.main-nav .wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.main-nav ul{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.main-nav li{position:relative}
.main-nav a{
  display:block;
  padding:1.1rem 1.1rem;
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  transition:color .2s;
}
.main-nav a:hover{color:var(--pink-wash)}
.main-nav .cart{display:flex;align-items:center;gap:.4rem}
.main-nav .cart .count{
  background:var(--brand-accent);
  color:#fff;
  font-size:.7rem;
  padding:.1rem .45rem;
  border-radius:999px;
  font-family:var(--font-body);
}
/* Mobile-only cart shortcut: on small screens the menu links hide behind the
   hamburger, so the cart gets its own always-visible link in the nav bar. */
.main-nav .cart-mobile{display:none}

/* ===== MEGA MENU ===== */
.mega-parent{position:relative}
.mega-parent > a::after{content:" \25BE";font-size:.7em;opacity:.8}
.mega{
  position:absolute;
  top:100%;
  left:0;
  transform:none;
  background:#fff;
  color:var(--ink);
  padding:2rem 2.2rem;
  min-width:760px;
  box-shadow:0 18px 50px rgba(54,1,63,.18);
  display:none;
  z-index:60;
  border-top:3px solid var(--brand-accent);
  /* hover-bridge: invisible padding ensures no gap between li and dropdown */
  margin-top:0;
}
/* Invisible bridge above .mega — covers any micro-gap so the menu stays
   open while the cursor moves down to it */
.mega::before{
  content:"";
  position:absolute;
  top:-10px;
  left:0;
  right:0;
  height:10px;
  /* no background — invisible but still receives hover events */
}
.mega-parent:hover .mega,
.mega-parent:focus-within .mega{display:grid}
.mega{
  grid-template-columns:repeat(3,1fr);
  gap:1.8rem 2.4rem;
}
.mega h4 a{color:inherit;text-decoration:none}
.mega h4 a:hover{color:var(--brand-accent)}
.mega h4{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-size:.95rem;
  letter-spacing:.18em;
  margin-bottom:.7rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.mega ul{display:block}
.mega li a{
  padding:.35rem 0;
  font-family:var(--font-body);
  font-size:.85rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--text);
}
.mega li a:hover{color:var(--brand-accent)}

/* ===== 3rd-level fly-out submenu (e.g. Eyes → Mascara, Brows…) ===== */
.mega li.has-sub{position:relative}
.mega li.has-sub > a{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.mega li.has-sub > a::after{content:"\203A";color:var(--brand-accent);font-weight:700;font-size:1.1em;line-height:1}
.mega .mega-sub{
  display:none;
  position:absolute;
  left:100%;
  top:-.7rem;
  min-width:185px;
  background:#fff;
  padding:.7rem 1.1rem;
  box-shadow:0 18px 50px rgba(54,1,63,.22);
  border-top:3px solid var(--brand-accent);
  z-index:70;
}
/* invisible bridge so the cursor can travel from the item to the fly-out */
.mega .mega-sub::before{content:"";position:absolute;left:-14px;top:0;width:14px;height:100%}
.mega li.has-sub:hover > .mega-sub,
.mega li.has-sub:focus-within > .mega-sub{display:block}
/* rightmost column opens to the left to avoid running off-screen */
.mega > div:last-child .mega-sub{left:auto;right:100%}
.mega > div:last-child .mega-sub::before{left:auto;right:-14px}

/* Mobile menu toggle */
.menu-toggle{
  display:none;
  position:absolute;
  right:var(--gutter);
  top:.6rem;
  color:#fff;
  font-size:1.6rem;
  padding:.4rem .6rem;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  background:linear-gradient(135deg,var(--brand-deep) 0%,var(--brand-accent) 100%);
  color:#fff;
  min-height:520px;
  display:flex;
  align-items:center;
  padding:5rem var(--gutter);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:url('face-forward-images/wp-content/uploads/2025/04/Face-Forward-Hero-Banner2.webp') center/cover no-repeat;
  opacity:.35;
}
.hero-copy{position:relative;z-index:2;max-width:640px}
.hero h1{margin-bottom:1.1rem;font-weight:700}
.hero p{font-size:1.15rem;margin-bottom:1.8rem;opacity:.95}

/* Landing fade-in: hero copy rolls down from the top on page load / refresh */
.hero-copy > *{
  opacity:0;
  animation:hero-fade-down 1.9s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-copy h1{animation-delay:.25s}
.hero-copy p{animation-delay:.25s}
.hero-copy .btn{animation-delay:1.1s}
.hero-copy .btn + .btn{animation-delay:1.1s}
@keyframes hero-fade-down{
  from{opacity:0;transform:translateY(-32px)}
  to  {opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .hero-copy > *{opacity:1;animation:none}
}

/* ===== SECTION BASE ===== */
section{padding:5rem var(--gutter)}
.section-header{text-align:center;margin-bottom:3rem}

/* ===== BRANDS ===== */
.brands-title{background:var(--pink-soft);text-align:center}
.brands-title h2{color:var(--brand-deep);margin:0}
.brands{background:var(--brand-deep);text-align:center}
.brand-marquee{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brand-track{
  display:flex;
  align-items:center;
  gap:5rem;
  width:max-content;
  animation: brand-scroll 32s linear infinite;
}
.brand-track:hover{animation-play-state:paused}
.brand-track img{
  flex:0 0 auto;
  height:90px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:.85;
  transition:opacity .3s;
}
.brand-track img:hover{opacity:1}
@keyframes brand-scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .brand-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:2rem 3rem}
}

/* ===== COLLAGE ===== */
.collage{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  padding:0;
}
.collage .tile{
  position:relative;
  min-height:380px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:2rem;
  transition:transform .4s ease;
  overflow:hidden;
}
.collage .tile .tile-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  display:block;
}
.collage .tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(255,255,255,0) 53%, rgba(147,39,143,.62) 100%);
  z-index:1;
  pointer-events:none;
}
.collage .tile span{
  position:relative;
  z-index:2;
  font-family:var(--font-display);
  font-size:1.4rem;
  letter-spacing:.2em;
  color:#fff;
  text-transform:uppercase;
  padding:.8rem 1.5rem;
  background:rgba(54,1,63,.7);
  transition:background .3s;
}
.collage .tile:hover span{background:var(--brand-accent)}

/* ===== PRODUCT GRID ===== */
.bestsellers{background:var(--cream);text-align:center}
.bestsellers .script{margin-bottom:.4rem}
.bestsellers h2{margin-bottom:3rem;color:var(--brand-deep)}
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  max-width:var(--container);
  margin:0 auto 2.5rem;
}
.product-card{
  background:#fff;
  padding:1.4rem;
  text-align:center;
  border:1px solid var(--line);
  transition:all .3s;
}
.product-card:hover{
  box-shadow:0 14px 35px rgba(54,1,63,.12);
  transform:translateY(-4px);
}
.product-card img{
  width:100%;
  display:block;
  aspect-ratio:1/1;
  object-fit:contain;
  margin-bottom:1rem;
  background:var(--pink-soft);
}
.product-card .p-title{
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--ink);
  min-height:2.6em;
  margin-bottom:.5rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card .p-price{
  margin-bottom:.9rem;
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--brand-accent);
  letter-spacing:.05em;
}
.product-card .add-btn{
  background:var(--brand-deep);
  color:#fff;
  padding:.55rem 1.2rem;
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .25s;
  display:inline-block;
  text-decoration:none;
}
.product-card .add-btn:hover{background:var(--brand-accent)}
.product-card a{color:inherit;text-decoration:none;display:block}
.product-card a img{transition:opacity .3s}
.product-card:hover a img{opacity:.92}

/* ===== SCHOOL CTA ===== */
.school-cta{
  position:relative;
  overflow:hidden;
  color:#fff;
  text-align:center;
  background:linear-gradient(135deg, #93278F 0%, #6B1A78 55%, #36013F 100%);
  padding:7rem var(--gutter);
  min-height:560px;
}
.school-cta .brush{
  position:absolute;
  width:auto;
  pointer-events:none;
  z-index:1;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}
.school-cta > *:not(.brush){position:relative;z-index:2}
.brush-tl-a{
  top:-18%;
  left:-2%;
  height:105%;
  transform: rotate(135deg);
  transform-origin: center;
}
.brush-tl-b{
  top:-12%;
  left:7%;
  height:85%;
  transform: rotate(112deg);
  transform-origin: center;
  opacity:.9;
}
.brush-br-a{
  bottom:-18%;
  right:-2%;
  height:105%;
  transform: rotate(-45deg);
  transform-origin: center;
}
.brush-br-b{
  bottom:-12%;
  right:7%;
  height:85%;
  transform: rotate(-68deg);
  transform-origin: center;
  opacity:.9;
}
.school-cta h2{color:#fff;max-width:780px;margin:0 auto 1.2rem}
.school-cta p{max-width:680px;margin:0 auto 2rem;opacity:.95;font-size:1.05rem}
.school-cta .overline{color:var(--pink-wash)}
@media (max-width:900px){
  .school-cta .brush{opacity:.45}
  .brush-tl-b,.brush-br-b{display:none}
  .brush-tl-a,.brush-br-a{height:80%}
}
@media (max-width:600px){
  .school-cta .brush{display:none}
}

/* ===== BLOG TEASERS ===== */
.blog-teasers{background:var(--pink-wash);text-align:center}
.blog-teasers h2{color:var(--brand-deep);margin-bottom:3rem}
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.8rem;
  max-width:var(--container);
  margin:0 auto;
  text-align:left;
  transition:opacity .18s ease;
  min-height:340px;
}
.post-grid.fading{opacity:0}
.post-grid[data-count="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:calc(var(--container) * 2 / 3);
}
.post-grid[data-count="1"]{
  grid-template-columns:minmax(0,1fr);
  max-width:calc(var(--container) / 3);
}
.post-pagination{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  margin-top:3rem;
}
.post-page-dots{display:flex;gap:.5rem}
.post-page-dots .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--brand-deep);opacity:.2;transition:opacity .2s,transform .2s;
}
.post-page-dots .dot.active{opacity:1;transform:scale(1.3)}
.post-card{background:#fff;transition:transform .3s,box-shadow .3s}
.post-card:hover:not(.no-link){transform:translateY(-4px);box-shadow:0 14px 30px rgba(54,1,63,.12)}
.post-card.no-link{cursor:default}

/* ===== ARTICLE PAGE ===== */
.article-hero{
  position:relative;
  min-height:480px;
  background-size:cover;
  background-position:center;
  color:#fff;
  display:flex;
  align-items:flex-end;
  padding:6rem var(--gutter) 4rem;
  overflow:hidden;
}
.article-hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(54,1,63,.25) 0%, rgba(54,1,63,.55) 60%, rgba(54,1,63,.92) 100%);
}
.article-hero-inner{position:relative;z-index:2;max-width:880px;margin:0 auto;width:100%}
.article-hero h1{
  color:#fff;
  margin:.8rem 0 1rem;
  font-size:clamp(1.8rem,4vw,3rem);
  text-transform:uppercase;
  line-height:1.2;
}
.article-breadcrumb{
  font-family:var(--font-alt);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.9;
}
.article-breadcrumb a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px}
.article-meta{
  font-family:var(--font-alt);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pink-wash);
  margin-top:.4rem;
}
.article-body{
  max-width:780px;
  margin:0 auto;
  padding:4rem var(--gutter) 3rem;
  font-size:1.05rem;
  line-height:1.8;
  color:var(--ink);
}
.article-body h2{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  color:var(--brand-deep);
  margin:3rem 0 1.2rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.2;
}
.article-body h3{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--brand-deep);
  margin:2rem 0 .8rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.article-body p{margin-bottom:1.2rem}
.article-body ul, .article-body ol{margin:.4rem 0 1.6rem 1.6rem}
.article-body li{margin-bottom:.55rem}
.article-body strong{color:var(--brand-deep)}
.article-body em{color:var(--brand-accent);font-style:italic}
.article-body a{color:var(--brand-accent);text-decoration:underline}
.article-body a:hover{color:var(--brand-deep)}
.article-back{
  margin-top:3rem;
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:2.5rem;
}
.post-card img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:center 25%}
.post-card .body{padding:1.4rem 1.6rem 2rem}
.post-card .date{font-size:.75rem;letter-spacing:.16em;color:var(--brand-accent);text-transform:uppercase;margin-bottom:.5rem}
.post-card h3{font-size:1.15rem;color:var(--ink);margin-bottom:.7rem}
.post-card .read{font-family:var(--font-display);font-size:.78rem;letter-spacing:.2em;color:var(--brand-accent);text-transform:uppercase}

/* ===== BOOKING BANNER ===== */
.booking{
  position:relative;
  text-align:center;
  background-size:cover;
  background-position:center;
  padding:6rem var(--gutter);
}
.booking::before{
  content:"";position:absolute;inset:0;
  background:rgba(252,243,246,.85);
}
.booking > *{position:relative;z-index:2}
.booking h2{color:var(--brand-deep);max-width:680px;margin:0 auto 1.8rem}
.occasions-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:1110px;
  margin:0 auto 2.4rem;
  padding:0 12px;
}
.occasions-gallery .og-feature{
  background-size:cover;
  background-position:center top;
  min-height:520px;
  border-radius:2px;
}
.occasions-gallery .og-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:1fr 1fr;
  gap:24px;
}
.occasions-gallery .og-grid img{
  width:100%;
  height:100%;
  min-height:248px;
  object-fit:cover;
  display:block;
  border-radius:2px;
}
@media (max-width:980px){
  .occasions-gallery{grid-template-columns:1fr;gap:16px}
  .occasions-gallery .og-feature{min-height:360px}
  .occasions-gallery .og-grid{gap:16px}
  .occasions-gallery .og-grid img{min-height:180px}
}
@media (max-width:560px){
  .occasions-gallery .og-grid{grid-template-columns:1fr 1fr}
  .occasions-gallery .og-grid img{min-height:200px}
}

/* ===== LOVE SKIN ===== */
.love-skin{
  position:relative;
  text-align:center;
  background-size:cover;
  background-position:center;
  background-attachment:fixed; /* parallax: image stays pinned while section scrolls over it */
  padding:8rem var(--gutter);
  color:#fff;
}
/* Mobile browsers (esp. iOS) handle fixed backgrounds poorly — fall back to normal scroll */
@media (max-width:768px){
  .love-skin{background-attachment:scroll}
}
@media (prefers-reduced-motion: reduce){
  .love-skin{background-attachment:scroll}
}
.love-skin::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(54,1,63,.6),rgba(54,1,63,.6));
}
.love-skin > *{position:relative;z-index:2}
.love-skin h2{color:#fff;font-size:clamp(2rem,4.5vw,3.4rem)}
.love-skin .overline{color:var(--pink-wash)}

/* ===== OUR SERVICES DIVIDER (About page) ===== */
.services-divider{
  background:var(--brand-deep);
  color:#fff;
  text-align:center;
  padding:1rem var(--gutter) 1.15rem;
}
.services-divider .sd-label{
  display:block;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(1rem,2.2vw,1.4rem);
}
.services-divider .sd-arrows{
  display:block;
  margin-top:.2rem;
  font-size:1.05rem;
  letter-spacing:.45em;
  color:var(--pink-wash);
  animation:sd-bounce 1.6s ease-in-out infinite;
}
@keyframes sd-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.services-divider .sd-arrows{animation:none}}

/* ===== SERVICES STRIP ===== */
.services-strip{
  background:var(--pink-soft);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,310px));
  justify-content:space-evenly;
  gap:2rem;
  padding:5rem var(--gutter);
  text-align:center;
}
.services-strip .srv-card{
  max-width:310px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.services-strip .srv-card img{
  width:48px;
  height:48px;
  margin-bottom:.8rem;
}
.services-strip .srv-card h4{
  color:var(--brand-accent);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  margin:0;
}
.services-strip .srv-card p{
  color:var(--brand-deep);
  font-size:.95rem;
  margin:0;
}
.services-strip .srv-card a{
  font-family:var(--font-display);
  color:var(--brand-deep);
  text-decoration:none;
  font-size:1rem;
  letter-spacing:.02em;
  margin-top:.4rem;
  transition:color .2s;
}
.services-strip .srv-card a:hover{color:var(--brand-accent)}
@media (max-width:980px){
  .services-strip{grid-template-columns:1fr;gap:2.5rem;padding:4rem var(--gutter)}
}

/* ===== NEWSLETTER ===== */
.newsletter{
  background:var(--brand-accent);
  color:#fff;
  text-align:center;
  padding:5rem var(--gutter);
}
.newsletter .nl-inner{max-width:620px;margin:0 auto}
.newsletter .overline{color:var(--pink-wash)}
.newsletter h2{color:#fff;margin-bottom:.9rem}
.newsletter .nl-sub{
  color:rgba(255,255,255,.92);
  font-size:1.02rem;
  margin-bottom:2.2rem;
}
.nl-form{display:flex;flex-direction:column;gap:1rem}
.nl-form input{
  width:100%;
  padding:1rem 1.2rem;
  font-family:var(--font-body);
  font-size:1rem;
  color:#fff;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius);
  transition:background .2s,border-color .2s;
}
.nl-form input::placeholder{color:rgba(255,255,255,.8)}
.nl-form input:focus{
  outline:none;
  background:rgba(255,255,255,.28);
  border-color:#fff;
}
.nl-submit{width:100%;margin:.4rem 0 0}
.nl-note{
  margin-top:1.4rem;
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.03em;
  color:#fff;
}
.nl-label{
  font-family:var(--font-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.85rem;
  color:#fff;
  margin-bottom:1.2rem;
}
@media (max-width:980px){
  .newsletter{padding:4rem var(--gutter)}
}

/* ===== ABOUT PAGE ===== */
/* Parallax: background pinned to viewport, scrolls under the section */
.parallax-bg{
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
@media (max-width:768px){ .parallax-bg{background-attachment:scroll} }
@media (prefers-reduced-motion: reduce){ .parallax-bg{background-attachment:scroll} }

.about-hero{
  min-height:64vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.about-hero .ph-tagline{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.7rem);
  letter-spacing:.04em;
  color:var(--pink-wash);
  margin-bottom:1.8rem;
}
.about-hero .btn{margin-top:.4rem}

/* Who We Are — keep the flat-lay in its natural landscape ratio */
#welcome .two-col img{aspect-ratio:3/2}

/* Top Services */
.about-services{background:var(--pink-soft)}
.as-head{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:3rem;
  align-items:center;
  max-width:var(--container);
  margin:0 auto 3.5rem;
}
.as-head img{width:100%;aspect-ratio:1/1;object-fit:cover}
.as-head-copy h2{color:var(--brand-deep);margin:0}
.as-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  max-width:var(--container);
  margin:0 auto;
}
.as-card{
  background:#fff;
  padding:2.2rem 1.8rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  border:1px solid var(--line);
}
.as-card h3{color:var(--brand-accent);margin:0}
.as-card p{color:var(--text);margin:0;flex:1}
.as-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  background:var(--brand-deep);
  transition:background .25s;
}
.as-link img{width:24px;height:24px;filter:brightness(0) invert(1)}
.as-link:hover{background:var(--brand-accent)}

/* Meet Sharon */
.sharon{background:var(--cream);text-align:center}
.sharon-quote{
  font-family:var(--font-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--brand-deep);
  max-width:880px;
  margin:0 auto 3rem;
  line-height:1.4;
}
.sharon-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:3.5rem;
  align-items:start;
  max-width:var(--container);
  margin:0 auto;
  text-align:left;
}
.sharon-portrait{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top center;
}
.sharon-body{text-align:left}
.sharon-body .overline{text-align:left}
.sharon-body h2{color:var(--brand-deep);margin-bottom:.4rem}
.sharon-body p{margin-bottom:1.1rem;color:var(--text)}
.sharon-body .sharon-sub{
  font-family:var(--font-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--brand-accent);
  font-size:1.05rem;
  margin:1.6rem 0 .8rem;
}
.sharon-list{
  margin:0 0 1.2rem;
  padding-left:1.4rem;
  list-style:disc;
  color:var(--text);
}
.sharon-list li{margin-bottom:.5rem}

/* Industry banner — "Become a Certified Makeup Artist / US$230 Billion" */
.industry-banner{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:540px;
  padding:3.5rem var(--gutter);
  background-color:#efeceb;
  background-image:
    linear-gradient(45deg, rgba(54,1,63,.045) 25%, transparent 25%, transparent 75%, rgba(54,1,63,.045) 75%),
    linear-gradient(45deg, rgba(54,1,63,.045) 25%, transparent 25%, transparent 75%, rgba(54,1,63,.045) 75%);
  background-size:56px 56px;
  background-position:0 0, 28px 28px;
}
.ib-text{position:relative;z-index:2;max-width:60%}
.ib-title{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,3rem);
  line-height:1.04;
  margin-bottom:.7rem;
}
.ib-sub{
  font-family:var(--font-display);
  color:var(--brand-accent);
  font-weight:500;
  text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.55rem);
  line-height:1.3;
  letter-spacing:.01em;
  margin-bottom:.5rem;
}
.ib-big{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.3rem,2.7vw,2.2rem);
  margin-bottom:1.8rem;
}
.ib-credit{border-top:1px solid rgba(54,1,63,.28);padding-top:1rem;max-width:440px}
.ib-name{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.3rem;
  letter-spacing:.03em;
  margin:0;
}
.ib-titles{
  font-family:var(--font-alt);
  color:var(--brand-accent);
  text-transform:uppercase;
  font-size:.76rem;
  letter-spacing:.08em;
  margin:.2rem 0 0;
}
.ib-figure{
  position:absolute;
  right:0;bottom:0;
  height:104%;
  width:auto;
  z-index:1;
  pointer-events:none;
}
.ib-logo{
  position:absolute;
  left:var(--gutter);bottom:1.8rem;
  width:150px;height:auto;
  z-index:2;
}
@media (max-width:820px){
  .industry-banner{flex-direction:column;text-align:center;min-height:auto;padding:3rem var(--gutter)}
  .ib-text{max-width:100%;order:1}
  .ib-credit{margin:0 auto}
  .ib-figure{position:static;order:2;height:auto;max-width:320px;margin:1.5rem auto 0}
  .ib-logo{position:static;order:3;margin:1.5rem auto 0}
}

/* Connect banner — parallax image header above the Sign-Up form (About page) */
.connect-banner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:78vh;
  padding:5rem var(--gutter);
  color:#fff;
  background-color:var(--brand-deep);
}
.connect-banner::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.48));
}
.cb-inner{position:relative;z-index:2;max-width:1000px}
.cb-eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:clamp(.85rem,1.5vw,1.1rem);
  color:#fff;
  margin-bottom:1.3rem;
}
.cb-title{
  color:#fff;
  text-transform:none;
  font-size:clamp(2.1rem,6vw,5rem);
  line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}

/* ===== COSMETOLOGY SERVICES ===== */
.booking-section{padding:4rem var(--gutter)}
.svc-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;max-width:760px;margin:0 auto 2.2rem}
.svc-tab{
  padding:.8rem 1.6rem;background:#fff;border:1px solid var(--line);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;
  color:var(--brand-deep);cursor:pointer;transition:all .2s;
}
.svc-tab:hover{border-color:var(--brand-accent);color:var(--brand-accent)}
.svc-tab.active{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.svc-panel{display:none;max-width:760px;margin:0 auto}
.svc-panel.active{display:block;animation:svc-fade .35s ease}
@keyframes svc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.svc-menu{display:flex;flex-direction:column}
.svc-row{display:flex;align-items:center;gap:1rem;padding:1.1rem .4rem;border-bottom:1px solid var(--line)}
.svc-row:last-child{border-bottom:0}
.svc-info{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.svc-name{font-family:var(--font-display);font-size:1.05rem;color:var(--brand-deep)}
.svc-dur{font-size:.8rem;color:var(--text);letter-spacing:.03em}
.svc-cost{font-family:var(--font-display);font-size:1rem;color:var(--brand-accent);white-space:nowrap}
.svc-book{padding:.5rem 1.2rem;font-size:.75rem;margin:0}

/* Service group rows (e.g. Makeup Application): click to drop down options */
.svc-group{cursor:pointer;user-select:none}
.svc-group:hover .svc-name{color:var(--brand-accent)}
.svc-caret{display:inline-block;font-size:.8em;color:var(--brand-accent);transition:transform .25s ease}
.svc-group[aria-expanded="true"] .svc-caret{transform:rotate(180deg)}
.svc-sub-wrap{padding:0;border-bottom:1px solid var(--line)}
.svc-sub-wrap[hidden]{display:none}
.svc-submenu{display:flex;flex-direction:column;background:var(--pink-soft);padding:0 .8rem}
.svc-submenu .svc-subrow{padding-left:1.2rem;border-bottom:1px solid rgba(147,39,143,.12)}
.svc-submenu .svc-subrow:last-child{border-bottom:0}
.svc-subrow .svc-name{font-size:.95rem}

/* Newsletter + featured products */
.np-section{background:var(--pink-soft);text-align:center}
.np-products{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;max-width:var(--container);margin:0 auto 2.5rem}
.np-form{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;max-width:620px;margin:0 auto}
.np-form input{flex:1;min-width:200px;padding:.9rem 1.1rem;background:#fff;border:1px solid var(--line);font-family:var(--font-body);font-size:1rem;color:var(--ink)}
.np-form input:focus{outline:none;border-color:var(--brand-accent)}
.np-form .btn{flex:0 0 auto;margin:0}
.np-note{margin:1.2rem auto 0;font-family:var(--font-display);font-size:1.1rem;color:var(--brand-deep)}
@media (max-width:900px){ .np-products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){
  .np-products{grid-template-columns:1fr 1fr}
  .svc-row{flex-wrap:wrap}
  .svc-cost{order:2}
  .svc-book{order:3;margin-left:auto}
}

/* ===== GET CERTIFIED / SCHOOL OF BEAUTY ===== */
.school-hero{background:var(--pink-wash);padding:3.5rem var(--gutter)}
.school-hero .two-col{align-items:center}
.school-hero h1{color:var(--brand-deep);margin:.3rem 0 .4rem}
.school-hero .school-sub{
  font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  color:var(--brand-accent);font-size:clamp(1rem,1.8vw,1.35rem);margin-bottom:1.2rem;
}
.school-hero p{margin-bottom:1rem;color:var(--text)}
.school-hero .btn{margin-top:.6rem}

.edu-features{position:relative;background:var(--brand-deep);color:#fff;padding:4.5rem var(--gutter) 6.5rem;overflow:hidden}
.edu-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 3rem;max-width:var(--container);margin:0 auto}
.edu-feat-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.edu-ico{width:58px;height:auto;flex:0 0 auto}
.edu-feat h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;font-size:1.2rem;margin:0;line-height:1.1}
.edu-feat p{color:var(--pink-wash);font-size:.95rem;line-height:1.65;margin:0}
.edu-divider{position:absolute;left:0;bottom:-1px;width:100%;height:62px;display:block}

.upcoming{padding:4rem var(--gutter)}
.upcoming-card{max-width:840px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:0 14px 40px rgba(54,1,63,.08)}
.upcoming-card > img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 30%;align-self:start}
.uc-body{display:flex;gap:1.4rem;padding:1.8rem}
.uc-date{flex:0 0 auto;width:78px;height:78px;background:var(--brand-deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.uc-day{font-family:var(--font-display);font-size:1.9rem;line-height:1}
.uc-mon{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.uc-tag{color:var(--brand-accent);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;margin-bottom:.3rem}
.uc-info h3{color:var(--brand-deep);font-size:1.3rem;margin-bottom:.3rem;text-transform:none}
.uc-when{color:var(--text);font-size:.9rem;margin-bottom:1rem}
.uc-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.uc-actions .btn{margin:0;padding:.5rem 1.2rem;font-size:.75rem}

.program-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;max-width:var(--container);margin:0 auto}
.program-card{display:flex;background:#fff;border:1px solid var(--line);overflow:hidden}
.program-card > img{flex:0 0 38%;width:38%;object-fit:cover;min-height:210px}
.pc-body{padding:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.pc-body h4{font-family:var(--font-display);color:var(--brand-deep);font-size:1.15rem}
.pc-body p{color:var(--text);font-size:.9rem;flex:1;margin:0}
.pc-hours{color:var(--brand-accent);font-weight:700;white-space:nowrap}
.pc-body .btn{align-self:flex-start;margin:0;padding:.55rem 1.4rem;font-size:.75rem}

.faq-list{margin:.8rem 0 0;padding-left:1.3rem;color:var(--text);list-style:decimal}
.faq-list li{margin-bottom:.6rem;line-height:1.6}
.faq-more{text-align:center;margin-top:2rem;color:var(--text)}
.faq-more a{color:var(--brand-accent);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em}

.test-card .stars{color:#e0a92e;letter-spacing:.15em;margin-bottom:1rem;font-size:1.05rem}

.follow-social{background:var(--brand-deep);color:#fff;text-align:center;padding:3.5rem var(--gutter)}
.follow-social h2{color:#fff;margin-bottom:1.6rem}
.social-btns{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.social-btns a{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;border:1px solid rgba(255,255,255,.4);color:#fff;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;transition:all .2s}
.social-btns a:hover{background:#fff;color:var(--brand-deep);border-color:#fff}

.school-newsletter{position:relative;text-align:center;color:#fff;padding:5rem var(--gutter);background-size:cover;background-position:center;background-color:var(--brand-accent)}
.school-newsletter::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(147,39,143,.86),rgba(54,1,63,.9))}
.sn-inner{position:relative;z-index:2;max-width:620px;margin:0 auto}
.sn-inner .overline{color:var(--pink-wash)}
.sn-inner h2{color:#fff;margin-bottom:1.8rem}

/* ===== PRODUCT REVIEWS ===== */
.reviews{max-width:760px}
.rv-summary{margin-bottom:1.4rem}
.rv-avg{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.rv-avg-num{font-family:var(--font-display);font-size:2.4rem;color:var(--brand-deep);line-height:1}
.rv-avg-stars{color:#e0a92e;font-size:1.3rem;letter-spacing:.1em}
.rv-avg-count{color:var(--text);font-size:.9rem}
.rv-none{color:var(--text);font-style:italic}
.rv-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.rv-item{border:1px solid var(--line);background:#fff;padding:1.1rem 1.3rem}
.rv-item-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem}
.rv-item-stars{color:#e0a92e;letter-spacing:.1em}
.rv-item-head strong{color:var(--brand-deep)}
.rv-item-date{color:var(--text);font-size:.78rem;margin-left:auto}
.rv-item p{color:var(--text);font-size:.92rem;margin:0;line-height:1.55}
.rv-form{border-top:1px solid var(--line);padding-top:1.6rem;max-width:520px}
.rv-form h4{font-family:var(--font-display);color:var(--brand-deep);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
.rv-sub{color:var(--text);font-size:.88rem;margin-bottom:1rem;line-height:1.5}
.rv-sub strong{color:var(--brand-deep)}
.rv-stars-input{display:flex;gap:.2rem;margin-bottom:1rem}
.rv-stars-input button{font-size:2rem;line-height:1;color:var(--line);background:none;cursor:pointer;transition:color .15s;padding:0}
.rv-stars-input button.on{color:#e0a92e}
.rv-form input,.rv-form textarea{width:100%;padding:.8rem 1rem;margin-bottom:.9rem;border:1px solid var(--line);font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:#fff}
.rv-form input:focus,.rv-form textarea:focus{outline:none;border-color:var(--brand-accent)}
.rv-form textarea{min-height:90px;resize:vertical}
.rv-form .btn{margin:0;cursor:pointer}
.rv-msg{margin-top:.8rem;font-size:.9rem}
.rv-msg.ok{color:var(--brand-deep);font-family:var(--font-display)}
.rv-msg.err{color:#c0392b}

@media (max-width:900px){
  .edu-inner{grid-template-columns:1fr;gap:2rem}
  .edu-features{padding:3rem var(--gutter) 5rem}
  .program-grid{grid-template-columns:1fr}
  .upcoming-card{grid-template-columns:1fr}
}
@media (max-width:560px){
  .program-card{flex-direction:column}
  .program-card > img{width:100%;flex-basis:auto;height:200px}
  .uc-body{flex-direction:column}
}

@media (max-width:900px){
  .as-head{grid-template-columns:1fr;gap:1.8rem}
  .as-grid{grid-template-columns:1fr;gap:1.5rem}
  .sharon-grid{grid-template-columns:1fr;gap:2rem}
  .sharon-portrait{aspect-ratio:4/5;max-width:460px;margin:0 auto}
}

/* ===== PAGE HEADER (sub-pages) ===== */
.page-header{
  position:relative;
  background:var(--brand-deep);
  color:#fff;
  text-align:center;
  padding:5rem var(--gutter);
  background-size:cover;
  background-position:center;
}
.page-header::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(54,1,63,.8),rgba(147,39,143,.55));
}
.page-header > *{position:relative;z-index:2}
.page-header h1{color:#fff;margin-bottom:.5rem}
.breadcrumb{
  font-family:var(--font-alt);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pink-wash);
}
.breadcrumb a{color:#fff;opacity:.85}
.breadcrumb a:hover{opacity:1}

/* ===== TWO-COL CONTENT ===== */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
  max-width:var(--container);
  margin:0 auto;
}
.two-col img{width:100%;aspect-ratio:4/5;object-fit:cover}
.two-col h2{color:var(--brand-deep);margin-bottom:1.2rem}
.two-col p{margin-bottom:1rem;color:var(--text)}
.two-col .signature{
  font-family:var(--font-script);
  font-size:2.4rem;
  color:var(--brand-accent);
  margin-top:1rem;
}

/* ===== CATEGORY GRID (shop page) ===== */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  max-width:var(--container);
  margin:0 auto;
}
.cat-card-lg{
  position:relative;
  aspect-ratio:1/1;
  min-height:300px;            /* fallback so the card never collapses if aspect-ratio is unsupported */
  background-size:cover;
  background-position:center;
  background-color:var(--pink-wash); /* placeholder tint while the image loads */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:2rem;
  color:#fff;
  overflow:hidden;
  transition:transform .3s;
}
.cat-card-lg::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(54,1,63,.85) 0%,rgba(54,1,63,.1) 60%,rgba(54,1,63,0) 100%);
}
.cat-card-lg > *{position:relative;z-index:2}
.cat-card-lg:hover{transform:translateY(-4px)}
.cat-card-lg h3{color:#fff;margin-bottom:.5rem}
.cat-card-lg p{font-size:.9rem;opacity:.9;margin-bottom:1rem}
.cat-card-lg .arrow{
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* ===== SERVICES ===== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  max-width:var(--container);
  margin:0 auto;
}
.svc-card{
  background:#fff;
  border:1px solid var(--line);
  padding:2.2rem 1.8rem;
  text-align:center;
  transition:all .3s;
}
.svc-card:hover{
  border-color:var(--brand-accent);
  box-shadow:0 14px 35px rgba(54,1,63,.1);
  transform:translateY(-4px);
}
.svc-card .svc-num{
  font-family:var(--font-script);
  font-size:3rem;
  color:var(--brand-accent);
  line-height:1;
  margin-bottom:.6rem;
}
.svc-card h3{color:var(--brand-deep);margin-bottom:.8rem;font-size:1.15rem}
.svc-card p{font-size:.92rem;margin-bottom:1.2rem}
.svc-card .price{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--brand-accent);
  letter-spacing:.05em;
}

/* ===== FAQ ===== */
.faq-wrap{max-width:820px;margin:0 auto}
.faq{
  border-bottom:1px solid var(--line);
  padding:1.4rem 0;
  cursor:pointer;
}
.faq summary{
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:.04em;
  color:var(--brand-deep);
  text-transform:uppercase;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;color:var(--brand-accent);font-family:var(--font-body)}
.faq[open] summary::after{content:"–"}
.faq p{padding-top:1rem;color:var(--text)}

/* ===== TESTIMONIAL ===== */
.testimonials{background:var(--pink-wash);text-align:center}
.testimonials h2{color:var(--brand-deep);margin-bottom:3rem}
.test-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
  max-width:var(--container);
  margin:0 auto;
}
.test-card{
  background:#fff;
  padding:2.2rem;
  text-align:left;
}
.test-card .quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:1.4rem;
  line-height:1.6;
}
.test-card .who{
  display:flex;
  align-items:center;
  gap:1rem;
}
.test-card .who img{
  width:48px;height:48px;
  border-radius:50%;
  object-fit:cover;
}
.test-card .who strong{
  font-family:var(--font-display);
  color:var(--brand-deep);
  letter-spacing:.05em;
}
.test-card .who span{
  display:block;
  font-size:.78rem;
  color:var(--text);
}

/* ===== CONTACT ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  max-width:var(--container);
  margin:0 auto;
}
.contact-info h2{color:var(--brand-deep);margin-bottom:1.5rem}
.contact-info .info-line{
  margin-bottom:1.2rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--line);
}
.contact-info .label{
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.2em;
  color:var(--brand-accent);
  text-transform:uppercase;
  margin-bottom:.3rem;
}
.contact-info .value{
  font-family:var(--font-body);
  color:var(--ink);
  font-size:1.05rem;
}
.contact-form{background:var(--pink-soft);padding:2.5rem}
.contact-form h3{color:var(--brand-deep);margin-bottom:1.5rem}
.contact-form label{
  display:block;
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--brand-deep);
  margin-bottom:.3rem;
  font-family:var(--font-display);
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.85rem 1rem;
  background:#fff;
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-size:.95rem;
  margin-bottom:1.2rem;
  color:var(--ink);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--brand-accent);
}
.contact-form textarea{min-height:140px;resize:vertical}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--brand-deep);
  color:#fff;
  padding:5rem var(--gutter) 2rem;
}
.site-footer .ft-center{
  max-width:780px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
}
.site-footer .ft-logo img{
  width:240px;
  max-width:60vw;
  height:auto;
  display:block;
}
.site-footer .ft-pay{
  height:30px;
  width:auto;
  margin-top:-.4rem;
}
.site-footer .ft-phone{
  color:#fff;
  font-size:1.05rem;
  margin:.4rem 0 0;
  letter-spacing:.02em;
}
.site-footer .ft-addr{
  color:#fff;
  font-size:1.05rem;
  margin:0;
  max-width:560px;
  line-height:1.6;
}
.site-footer .ft-msg-btn{
  display:inline-block;
  margin-top:.6rem;
  padding:.85rem 2rem;
  background:var(--brand-accent);
  color:#fff;
  font-family:var(--font-display);
  letter-spacing:.18em;
  font-size:.78rem;
  text-decoration:none;
  text-transform:uppercase;
  border-radius:2px;
  transition:background .2s;
}
.site-footer .ft-msg-btn:hover{background:#a93aa5}
.site-footer .ft-social{
  display:flex;
  gap:1.8rem;
  margin-top:.6rem;
}
.site-footer .ft-social a{
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  transition:color .2s,transform .2s;
}
.site-footer .ft-social a:hover{color:var(--pink-wash);transform:translateY(-2px)}
.site-footer .ft-rule{
  max-width:1110px;
  margin:3rem auto 1.4rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.site-footer .ft-legal{
  max-width:1110px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  color:#fff;
  font-size:.82rem;
}
.site-footer .ft-legal-links{
  list-style:none;
  display:flex;
  gap:1.6rem;
  padding:0;
  margin:0;
  flex-wrap:wrap;
}
.site-footer .ft-legal-links a{
  color:#fff;
  text-decoration:none;
  transition:color .2s;
}
.site-footer .ft-legal-links a:hover{color:var(--pink-wash)}
.site-footer .ft-copy{margin:0;color:rgba(255,255,255,.85)}
@media (max-width:780px){
  .site-footer{padding:3.5rem var(--gutter) 1.5rem}
  .site-footer .ft-legal{justify-content:center;text-align:center;flex-direction:column;gap:1rem}
  .site-footer .ft-legal-links{justify-content:center}
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .brand-track{gap:3.5rem}
  .brand-track img{height:70px}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .collage{grid-template-columns:1fr}
  .two-col,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .cat-grid,.services-grid{grid-template-columns:repeat(2,1fr)}
  .post-grid{grid-template-columns:1fr 1fr}
  .test-grid{grid-template-columns:1fr}
}
/* Shop mega-menu: compact 2-col, centered under the trigger, for tablet &
   narrow/half-screen desktop. Above 1100px the wider 3-col (left-aligned)
   version has room. Keeps the panel from clipping off the viewport edge. */
@media (max-width:1100px){
  .mega{left:50%;right:auto;transform:translateX(-50%);min-width:min(460px,90vw);max-width:94vw;grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  :root{--gutter:5vw}
  .utility .wrap{justify-content:center;flex-wrap:wrap;gap:1rem}
  .main-nav{position:relative;min-height:3.4rem}
  .main-nav .cart-mobile{
    display:flex;
    align-items:center;
    position:absolute;
    right:calc(var(--gutter) + 3.6rem);
    top:.65rem;
    padding:.5rem .4rem;
  }
  .main-nav ul{
    display:none;
    flex-direction:column;
    background:var(--brand-deep);
    padding:1rem 0;
  }
  .main-nav.open ul{display:flex}
  .main-nav li{width:100%;text-align:center}
  .menu-toggle{display:block}
  .mega{
    position:static;
    transform:none;
    min-width:0;
    box-shadow:none;
    padding:1rem 1.5rem;
    grid-template-columns:1fr;
  }
  /* nested submenu stacks inline (indented) on mobile instead of fly-out */
  .mega .mega-sub,
  .mega > div:last-child .mega-sub{
    display:block;position:static;left:auto;right:auto;
    box-shadow:none;border-top:0;padding:.1rem 0 .4rem 1.1rem;min-width:0;
  }
  .mega li.has-sub > a::after{content:none}
  .product-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .product-card{padding:1rem .8rem}
  .product-card .add-btn{display:block;width:100%;text-align:center}
  .brand-track{gap:3rem}
  .brand-track img{height:55px}
  .post-grid,.cat-grid,.services-grid{grid-template-columns:1fr}
  .hero{min-height:420px;padding:3.5rem var(--gutter)}
  section{padding:3.5rem var(--gutter)}
  .school-cta,.booking,.love-skin{padding:4rem var(--gutter)}
}
@media (max-width:420px){
  .product-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .product-card{padding:.8rem .6rem}
  .product-card .add-btn{display:block;width:100%;text-align:center;font-size:.65rem;padding:.5rem .4rem}
  .collage .tile{min-height:260px}
}

/* ===== CART PAGE ===== */
.cart-wrap{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:3rem;
  max-width:var(--container);
  margin:0 auto;
}
.cart-items{background:#fff;border:1px solid var(--line)}
.cart-row{
  display:grid;
  grid-template-columns:90px 1fr auto auto auto;
  gap:1.2rem;
  align-items:center;
  padding:1.4rem;
  border-bottom:1px solid var(--line);
}
.cart-row:last-child{border-bottom:0}
.cart-row img{
  width:90px;height:90px;
  object-fit:contain;
  background:var(--pink-soft);
}
.cart-row .ci-title{
  font-family:var(--font-body);
  color:var(--ink);
  font-size:.95rem;
  margin-bottom:.3rem;
}
.cart-row .ci-price{
  font-family:var(--font-display);
  color:var(--brand-accent);
  font-size:.95rem;
  letter-spacing:.05em;
}
.cart-row .ci-price small{
  display:block;
  font-family:var(--font-body);
  font-style:italic;
  color:var(--text);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:0;
}
.qty-ctrl{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
}
.qty-ctrl button{
  width:32px;height:32px;
  background:var(--pink-soft);
  color:var(--brand-deep);
  font-size:1.1rem;
  font-family:var(--font-body);
}
.qty-ctrl button:hover{background:var(--pink-wash)}
.qty-ctrl span{
  min-width:36px;
  text-align:center;
  font-family:var(--font-display);
  color:var(--ink);
}
.ci-line{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-size:1.05rem;
  letter-spacing:.05em;
  min-width:90px;
  text-align:right;
}
.ci-remove{
  color:var(--text);
  font-size:1.4rem;
  padding:.2rem .5rem;
  transition:color .2s;
}
.ci-remove:hover{color:var(--brand-accent)}

.cart-summary{
  background:var(--pink-soft);
  padding:2rem;
  height:fit-content;
  position:sticky;
  top:80px;
}
.cart-summary h3{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-size:1.2rem;
  margin-bottom:1.4rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
  letter-spacing:.12em;
}
.summary-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:.7rem;
  font-size:.95rem;
}
.summary-row.total{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--brand-deep);
  letter-spacing:.05em;
}
.summary-row.usd-note{
  font-size:.78rem;
  font-style:italic;
  color:var(--text);
  margin-top:.6rem;
  display:block;
  text-align:right;
}
.empty-cart{
  text-align:center;
  padding:5rem 2rem;
  grid-column:1 / -1;
}
.empty-cart h3{
  font-family:var(--font-display);
  color:var(--brand-deep);
  margin-bottom:1rem;
  font-size:1.4rem;
}
.empty-cart p{margin-bottom:1.5rem}

/* ===== CHECKOUT PAGE ===== */
.checkout-wrap{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:3rem;
  max-width:var(--container);
  margin:0 auto;
}
.checkout-form{
  background:#fff;
  padding:2.2rem;
  border:1px solid var(--line);
}
.checkout-form h3{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-size:1.05rem;
  letter-spacing:.18em;
  margin-bottom:1.2rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
  text-transform:uppercase;
}
.checkout-form section{padding:0;margin-bottom:2rem}
.checkout-form label{
  display:block;
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--brand-deep);
  margin-bottom:.3rem;
  font-family:var(--font-display);
}
.checkout-form input,
.checkout-form select,
.checkout-form textarea{
  width:100%;
  padding:.75rem .9rem;
  background:var(--pink-soft);
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-size:.95rem;
  margin-bottom:1.1rem;
  color:var(--ink);
}
.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus{
  outline:none;
  border-color:var(--brand-accent);
  background:#fff;
}
.checkout-form textarea{min-height:90px;resize:vertical}

.fulfillment-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1.5rem;
}
.fulfill-option{
  border:2px solid var(--line);
  padding:1.4rem 1rem;
  text-align:center;
  cursor:pointer;
  transition:all .25s;
  background:#fff;
}
.fulfill-option:hover{border-color:var(--brand-accent)}
.fulfill-option.active{
  border-color:var(--brand-accent);
  background:var(--pink-wash);
}
.fulfill-option .opt-title{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-size:1rem;
  letter-spacing:.12em;
  margin-bottom:.3rem;
  text-transform:uppercase;
}
.fulfill-option .opt-desc{
  font-size:.82rem;
  color:var(--text);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

#paypal-button-container{margin-top:1rem;min-height:50px}
.pay-note{
  font-size:.82rem;
  color:var(--text);
  font-style:italic;
  margin-top:.8rem;
  text-align:center;
}
.pay-warn{
  background:#FFF5E5;
  border-left:3px solid #E5A33A;
  padding:1rem 1.2rem;
  font-size:.85rem;
  color:#7a5a1f;
  margin:1rem 0;
}

/* Mini cart summary on checkout */
.mini-cart{background:var(--pink-soft);padding:2rem;height:fit-content;position:sticky;top:80px}
.mini-cart h3{
  font-family:var(--font-display);
  color:var(--brand-deep);
  font-size:1.1rem;
  letter-spacing:.15em;
  margin-bottom:1.2rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--line);
}
.mini-item{
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:.9rem;
  align-items:center;
  margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.mini-item img{width:60px;height:60px;object-fit:contain;background:#fff}
.mini-item .mi-title{font-size:.85rem;color:var(--ink);line-height:1.3}
.mini-item .mi-qty{font-size:.75rem;color:var(--text);margin-top:.2rem}
.mini-item .mi-line{font-family:var(--font-display);color:var(--brand-deep);font-size:.9rem;letter-spacing:.05em}

/* ===== ORDER CONFIRMED ===== */
.confirmed-box{
  max-width:680px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  padding:3rem 2.5rem;
  text-align:center;
}
.confirmed-box .check{
  width:70px;height:70px;
  border-radius:50%;
  background:var(--brand-accent);
  color:#fff;
  font-size:2rem;
  line-height:70px;
  margin:0 auto 1.5rem;
}
.confirmed-box h2{color:var(--brand-deep);margin-bottom:.8rem}
.confirmed-box p{margin-bottom:1rem}
.order-details{
  background:var(--pink-soft);
  padding:1.4rem;
  margin:1.5rem 0;
  text-align:left;
  font-size:.9rem;
}
.order-details strong{
  font-family:var(--font-display);
  color:var(--brand-deep);
  letter-spacing:.1em;
  display:block;
  margin-bottom:.4rem;
  font-size:.78rem;
}

@media (max-width:980px){
  .cart-wrap,.checkout-wrap{grid-template-columns:1fr}
  .cart-summary,.mini-cart{position:static}
  .cart-row{
    grid-template-columns:70px 1fr auto;
    grid-template-rows:auto auto;
    gap:.8rem;
  }
  .cart-row img{width:70px;height:70px}
  .cart-row .ci-info{grid-column:2 / 3}
  .cart-row .qty-ctrl{grid-column:1 / 2;grid-row:2}
  .cart-row .ci-line{grid-column:2 / 3;grid-row:2;text-align:left}
  .cart-row .ci-remove{grid-column:3 / 4;grid-row:1 / 3}
}
@media (max-width:520px){
  .form-row,.fulfillment-options{grid-template-columns:1fr}
}

/* ===========================================
   PRODUCT DETAIL PAGE
   =========================================== */
.pdp-wrap{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:4rem;
}
.pdp-breadcrumb{
  max-width:var(--container);
  margin:0 auto 1.5rem;
  font-family:var(--font-alt);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
.pdp-breadcrumb::-webkit-scrollbar{display:none}
.pdp-breadcrumb a{color:var(--brand-accent)}
.pdp-breadcrumb a:hover{color:var(--brand-deep)}
.pdp-breadcrumb .sep{margin:0 .6rem;color:var(--line)}

/* Gallery */
.pdp-gallery{position:sticky;top:80px;align-self:start}
.pdp-main-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--pink-soft);
  border:1px solid var(--line);
  margin-bottom:1rem;
}
.pdp-thumbs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.6rem;
}
.pdp-thumb{
  aspect-ratio:1/1;
  background:var(--pink-soft);
  border:2px solid transparent;
  cursor:pointer;
  overflow:hidden;
  padding:0;
}
.pdp-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:opacity .2s;
}
.pdp-thumb:hover{border-color:var(--rose,#E8C5BC)}
.pdp-thumb.active{border-color:var(--brand-accent)}

/* Info */
.pdp-info{padding:.5rem 0}
.pdp-brand{
  font-family:var(--font-alt);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand-accent);
  margin-bottom:.6rem;
}
.pdp-title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:1.2;
  color:var(--ink);
  margin-bottom:1rem;
  font-weight:500;
}
.pdp-rating{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.2rem;
  font-size:.85rem;
  color:var(--text);
}
.pdp-stars{color:var(--gold,#C9A87C);letter-spacing:.15em}
.pdp-stars.empty{color:var(--line)}
.pdp-price{
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--brand-deep);
  letter-spacing:.04em;
  margin-bottom:.4rem;
}
.pdp-price-sub{
  font-family:var(--font-body);
  font-style:italic;
  color:var(--text);
  font-size:.85rem;
  margin-bottom:1.5rem;
}
.pdp-short{
  font-size:.95rem;
  color:var(--text);
  margin-bottom:1.8rem;
  padding-bottom:1.8rem;
  border-bottom:1px solid var(--line);
}
.pdp-short p{margin-bottom:.8rem}
.pdp-short p:last-child{margin-bottom:0}

/* Variant picker */
.pdp-variants{margin-bottom:1.5rem}
.pdp-attr{margin-bottom:1.2rem}
.pdp-attr-label{
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-deep);
  margin-bottom:.5rem;
}
.pdp-attr-label .selected-val{
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  margin-left:.5rem;
  font-size:.85rem;
}
.pdp-attr-options{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.pdp-option{
  padding:.55rem 1rem;
  border:1px solid var(--line);
  background:#fff;
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--ink);
  cursor:pointer;
  transition:all .2s;
}
.pdp-option:hover{border-color:var(--brand-accent)}
.pdp-option.active{
  background:var(--brand-deep);
  color:#fff;
  border-color:var(--brand-deep);
}
.pdp-option.unavailable{
  opacity:.4;
  text-decoration:line-through;
  cursor:not-allowed;
}

/* Qty + Add */
.pdp-actions{
  display:flex;
  gap:1rem;
  align-items:stretch;
  margin-bottom:1.5rem;
}
.pdp-qty{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
}
.pdp-qty button{
  width:44px;height:48px;
  background:var(--pink-soft);
  color:var(--brand-deep);
  font-size:1.2rem;
  font-family:var(--font-body);
}
.pdp-qty button:hover{background:var(--pink-wash)}
.pdp-qty input{
  width:50px;
  height:48px;
  border:0;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  text-align:center;
  font-family:var(--font-display);
  font-size:1rem;
  background:#fff;
}
.pdp-add-btn{
  flex:1;
  background:var(--brand-accent);
  color:#fff;
  border:0;
  font-family:var(--font-display);
  font-size:.9rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s;
  padding:0 2rem;
  min-height:48px;
}
.pdp-add-btn:hover{background:var(--brand-deep)}
.pdp-add-btn:disabled{background:var(--text);cursor:not-allowed;opacity:.6}
.pdp-wishlist{
  background:#fff;
  border:1px solid var(--line);
  color:var(--brand-deep);
  width:48px;
  font-size:1.2rem;
  cursor:pointer;
  transition:all .2s;
}
.pdp-wishlist:hover{border-color:var(--brand-accent);color:var(--brand-accent)}

.pdp-meta{
  font-family:var(--font-alt);
  font-size:.82rem;
  color:var(--text);
  line-height:1.8;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.pdp-meta strong{
  color:var(--brand-deep);
  font-weight:600;
  letter-spacing:.06em;
}

/* Tabs (Description / Additional / Reviews) */
.pdp-tabs{
  max-width:var(--container);
  margin:4rem auto 0;
}
.pdp-tabs-nav{
  display:flex;
  border-bottom:1px solid var(--line);
  gap:0;
  margin-bottom:2rem;
}
.pdp-tab{
  padding:1rem 1.5rem;
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text);
  border:0;
  background:transparent;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all .2s;
}
.pdp-tab:hover{color:var(--brand-deep)}
.pdp-tab.active{
  color:var(--brand-deep);
  border-bottom-color:var(--brand-accent);
}
.pdp-tab-panel{display:none;font-size:.95rem;color:var(--text);line-height:1.75;max-width:780px}
.pdp-tab-panel.active{display:block}
.pdp-tab-panel p{margin-bottom:1rem}
.pdp-tab-panel ul{margin:1rem 0 1rem 1.5rem}
.pdp-tab-panel strong{color:var(--ink)}

/* Empty reviews */
.reviews-empty{
  background:var(--pink-soft);
  padding:2.5rem;
  text-align:center;
  border:1px solid var(--line);
}
.reviews-empty h3{
  font-family:var(--font-display);
  color:var(--brand-deep);
  margin-bottom:.6rem;
  font-size:1.2rem;
}

/* Related products */
.pdp-related{
  max-width:var(--container);
  margin:4rem auto 0;
}
.pdp-related h2{
  text-align:center;
  color:var(--brand-deep);
  margin-bottom:.4rem;
}
.pdp-related .script{
  text-align:center;
  color:var(--brand-accent);
  margin-bottom:2rem;
  font-family:var(--font-script);
  font-size:2rem;
}

/* ===========================================
   CATEGORY PAGE
   =========================================== */
.cat-hero{
  background:linear-gradient(135deg,var(--pink-wash) 0%,var(--pink-soft) 100%);
  padding:3.5rem var(--gutter) 2.5rem;
  text-align:center;
}
.cat-hero .breadcrumb{
  color:var(--brand-accent);
  margin-bottom:.8rem;
}
.cat-hero .breadcrumb a{color:var(--brand-deep);opacity:.85}
.cat-hero .breadcrumb a:hover{opacity:1}
.cat-hero h1{
  color:var(--brand-deep);
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.8rem);
  margin-bottom:.6rem;
  text-transform:uppercase;
}
.cat-hero .cat-count-pill{
  font-family:var(--font-alt);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text);
}
.cat-hero .cat-desc{
  max-width:620px;
  margin:1rem auto 0;
  color:var(--text);
  font-size:.95rem;
}

/* Sub-category chips */
.subcat-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-top:1.5rem;
}
.subcat-chip{
  padding:.6rem 1.2rem;
  background:#fff;
  border:1px solid var(--line);
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--brand-deep);
  transition:all .2s;
}
.subcat-chip:hover{
  background:var(--brand-accent);
  color:#fff;
  border-color:var(--brand-accent);
}
.subcat-chip.active{
  background:var(--brand-deep);
  color:#fff;
  border-color:var(--brand-deep);
}

/* Filter/sort bar */
.cat-toolbar{
  max-width:var(--container);
  margin:0 auto 2rem;
  padding:1.2rem var(--gutter) 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  font-family:var(--font-alt);
  font-size:.85rem;
}
.cat-toolbar .results-count{color:var(--text)}
.cat-toolbar select{
  padding:.5rem .8rem;
  background:#fff;
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-size:.88rem;
  color:var(--ink);
  cursor:pointer;
}
.cat-toolbar label{
  margin-right:.4rem;
  color:var(--text);
  font-size:.82rem;
}

/* Category products grid */
.cat-products-section{padding:0 var(--gutter) 5rem}
.cat-products-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  max-width:var(--container);
  margin:0 auto;
}
.cat-products-grid:empty::after{
  content:"No products found in this category.";
  grid-column:1/-1;
  text-align:center;
  padding:3rem;
  color:var(--text);
  font-style:italic;
}

/* ===== SHOP LAYOUT (category page with sidebar filters) ===== */
.shop-layout{
  display:grid;
  grid-template-columns:262px 1fr;
  gap:2.5rem;
  max-width:var(--container);
  margin:0 auto;
  padding:2.5rem var(--gutter) 5rem;
  align-items:start;
}
.shop-main .cat-products-grid{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  max-width:none;
  margin:0;
  gap:1.4rem;
}
.grid-msg{grid-column:1/-1;text-align:center;padding:3rem;color:var(--text)}
.link-btn{background:none;border:0;color:var(--brand-accent);text-decoration:underline;cursor:pointer;font:inherit}

/* Sidebar shell */
.shop-filters{position:sticky;top:1.5rem;background:#fff;border:1px solid var(--line)}
.filters-head{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 1.2rem;border-bottom:1px solid var(--line)}
.filters-head h2{font-size:1.05rem;margin:0;color:var(--brand-deep);text-transform:uppercase;letter-spacing:.04em}
.filters-close{display:none;font-size:1.9rem;line-height:1;color:var(--text);background:none}

.filter-section{border-bottom:1px solid var(--line)}
.filter-title{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;background:none;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--brand-deep);
}
.ft-caret{width:9px;height:9px;border-right:2px solid var(--brand-accent);border-bottom:2px solid var(--brand-accent);transform:rotate(45deg);transition:transform .2s}
.filter-section.collapsed .ft-caret{transform:rotate(-45deg)}
.filter-body{padding:.2rem 1.2rem 1.1rem}
.filter-section.collapsed .filter-body{display:none}

/* Custom checkbox option rows (shared by categories + brands) */
.opt{display:flex;align-items:center;gap:.55rem;padding:.34rem 0;cursor:pointer;font-size:.9rem;color:var(--ink)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .box{flex:0 0 auto;width:17px;height:17px;border:1.5px solid #c6b7cd;background:#fff;border-radius:3px;position:relative;transition:all .15s}
.opt input:checked + .box{background:var(--brand-accent);border-color:var(--brand-accent)}
.opt input:checked + .box::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt input:focus-visible + .box{outline:2px solid var(--brand-accent);outline-offset:2px}
.opt-label{flex:1}
.opt-count{color:var(--text);font-size:.78rem}
.opt:hover .opt-label{color:var(--brand-accent)}

/* Category tree */
.cat-tree{font-size:.9rem}
.cat-row{display:flex;align-items:center;gap:.2rem}
.cat-row .opt{flex:1;min-width:0}
.cat-expand{flex:0 0 auto;width:22px;height:22px;position:relative;cursor:pointer;color:var(--text);background:none}
.cat-expand::before{content:"";position:absolute;left:7px;top:6px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.cat-node.open > .cat-row > .cat-expand::before{transform:rotate(45deg)}
.cat-children{display:none;padding-left:.7rem;border-left:1px solid var(--line);margin-left:.45rem}
.cat-node.open > .cat-children{display:block}

.see-more{margin-top:.5rem;background:none;border:0;color:var(--brand-accent);font-family:var(--font-display);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;padding:.2rem 0}
.see-more:hover{text-decoration:underline}
.clear-filters{display:block;width:100%;padding:.9rem;background:var(--pink-soft);color:var(--brand-deep);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;cursor:pointer}
.clear-filters:hover{background:var(--brand-accent);color:#fff}

/* Search bar */
.shop-search{position:relative;display:flex;align-items:center;margin-bottom:1.4rem}
.shop-search .ss-icon{position:absolute;left:1rem;color:var(--brand-accent);pointer-events:none}
.shop-search input{
  width:100%;
  padding:.95rem 2.8rem .95rem 3rem;
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.shop-search input::placeholder{color:#a99fb0}
.shop-search input:focus{outline:none;border-color:var(--brand-accent);box-shadow:0 0 0 3px rgba(147,39,143,.12)}
.shop-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.shop-search .ss-clear{
  position:absolute;right:.7rem;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;line-height:1;color:#fff;background:var(--brand-accent);cursor:pointer;
}
.shop-search .ss-clear:hover{background:var(--brand-deep)}
.search-note{margin:-.4rem 0 1.2rem;font-size:.92rem;color:var(--text);font-style:italic}
.search-note strong{color:var(--brand-deep);font-style:normal}

/* Main column */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-bottom:1.1rem;margin-bottom:1.3rem;border-bottom:1px solid var(--line)}
.shop-toolbar .results-count{color:var(--text);font-size:.9rem}
.sort-wrap label{color:var(--text);font-size:.85rem;margin-right:.4rem}
.sort-wrap select{padding:.55rem .9rem;background:#fff;border:1px solid var(--line);font-family:var(--font-body);font-size:.88rem;color:var(--ink);cursor:pointer}

.active-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.active-chips:empty{display:none}
.active-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;background:var(--pink-wash);border:1px solid var(--line);border-radius:999px;font-size:.8rem;color:var(--brand-deep);cursor:pointer}
.active-chip span{font-size:1rem;line-height:1;color:var(--brand-accent)}
.active-chip:hover{background:var(--brand-accent);color:#fff}
.active-chip:hover span{color:#fff}
.contact-price{color:var(--text);font-size:.85rem}

/* Pagination (top + bottom of product grid) */
.pagination{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center;margin:1.8rem 0}
.pagination:empty{display:none}
#pager-top:not(:empty){margin-top:0;margin-bottom:1.6rem}
.page-btn{
  min-width:40px;height:40px;padding:0 .65rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pink-soft);border:1px solid var(--line);color:var(--brand-deep);
  font-family:var(--font-display);font-size:.95rem;cursor:pointer;transition:all .2s;
}
.page-btn:hover:not(:disabled):not(.current){background:var(--brand-accent);color:#fff;border-color:var(--brand-accent)}
.page-btn.current{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep);cursor:default}
.page-btn:disabled{opacity:.4;cursor:not-allowed}
.page-ellipsis{display:inline-flex;align-items:center;padding:0 .25rem;color:var(--text)}

/* Mobile drawer */
.filters-toggle{display:none}
.filters-backdrop{position:fixed;inset:0;background:rgba(54,1,63,.45);z-index:900}
@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr;gap:0;padding-top:1.5rem}
  .filters-toggle{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.9rem;margin-bottom:1.5rem;background:var(--brand-deep);color:#fff;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;cursor:pointer}
  .shop-filters{position:fixed;top:0;left:0;bottom:0;width:86%;max-width:340px;z-index:901;transform:translateX(-100%);transition:transform .3s ease;overflow:auto;border:0;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .shop-filters.open{transform:translateX(0)}
  .filters-close{display:block}
}

@media (max-width:980px){
  .pdp-wrap{grid-template-columns:1fr;gap:2.5rem}
  .pdp-gallery{position:static}
  .cat-products-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .cat-products-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .pdp-thumbs{grid-template-columns:repeat(4,1fr)}
  .pdp-tabs-nav{flex-wrap:wrap}
  .pdp-tab{flex:1;padding:.85rem .5rem;font-size:.75rem}
  .pdp-actions{flex-wrap:wrap}
  .pdp-add-btn{order:3;flex:0 0 100%}
}
@media (max-width:420px){
  .cat-products-grid{grid-template-columns:1fr}
}

/* ===== Address autocomplete (checkout) ===== */
.addr-wrap{position:relative}
.addr-suggest{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  box-shadow:0 14px 35px rgba(54,1,63,.14);
  z-index:40;
  max-height:260px;
  overflow-y:auto;
}
.addr-item{
  padding:.65rem .9rem;
  font-size:.92rem;
  color:var(--ink);
  cursor:pointer;
  border-bottom:1px solid var(--pink-wash);
}
.addr-item:hover,
.addr-item.active{background:var(--pink-soft);color:var(--brand-deep)}
.addr-src{
  padding:.45rem .9rem;
  font-size:.72rem;
  color:var(--text);
  background:var(--pink-wash);
}
.addr-hint{font-size:.78rem;color:var(--text);margin:.4rem 0 0}

/* ===== Slim "Shop All" bar above the category cards (Shop Online page) ===== */
.shop-all-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  max-width:var(--container);
  margin:0 auto 1.5rem;
  background:var(--brand-deep);
  color:#fff;
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  padding:.7rem 1rem;
  text-decoration:none;
  transition:background .25s;
}
.shop-all-bar:hover{background:var(--brand-accent)}
.shop-all-bar .sab-arrow{transition:transform .25s}
.shop-all-bar:hover .sab-arrow{transform:translateX(5px)}
