/*
Theme Name: Sugaressence Pro
Theme URI: https://sugaressencepro.com
Author: Sugaressence Pro
Author URI: https://sugaressencepro.com
Description: Noir Luxe WooCommerce theme for SUGARESSENCE PRO — professional sugaring paste. Black & gold, Bodoni Moda + Jost, fast, semantic, and SEO-ready (built to play nicely with Rank Math).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sugaressence-pro
Tags: e-commerce, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
WC requires at least: 6.0
WC tested up to: 9.0
*/

/* ===================== TOKENS ===================== */
:root{
  --noir:#16120f;
  --noir-soft:#1e1812;
  --noir-panel:#221b14;
  --gold:#C6A24A;
  --gold-light:#E2C277;
  --gold-deep:#9c7c2f;
  --cream:#EFE6D5;
  --nude:#DCC2B0;
  --amber:#C68A3A;
  --muted:#b3a892;
  --line:rgba(239,230,213,.15);
  --paper-light:#F1E9DA;
  --ink-light:#2A211A;
  --muted-light:#6f614e;
  --line-light:#E1D8C6;
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --mx:clamp(20px,6vw,120px);
  --maxw:1240px;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--noir);color:var(--cream);
  font-family:var(--sans);font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--gold-light)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0 0 .5em;color:var(--cream)}
h1{font-size:clamp(34px,6vw,68px)}
h2{font-size:clamp(26px,4vw,42px)}
h3{font-size:clamp(19px,2.4vw,26px)}
p{margin:0 0 1.1em}
::selection{background:var(--gold);color:var(--noir)}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--mx);padding-right:var(--mx)}
.eyebrow{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}
.center{text-align:center}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ===================== BUTTONS ===================== */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  display:inline-block;font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;
  background:var(--gold);color:var(--noir);border:1px solid var(--gold);
  padding:14px 30px;border-radius:2px;cursor:pointer;line-height:1;
  transition:background .2s ease,color .2s ease;
}
.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{background:transparent;color:var(--gold)}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn-ghost:hover{background:var(--gold);color:var(--noir)}

/* ===================== HEADER ===================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(22,18,15,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .wm{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.6vw,28px);letter-spacing:.06em;color:var(--gold)}
.brand .pro{font-family:var(--sans);font-weight:400;font-size:9px;letter-spacing:.5em;text-transform:uppercase;color:var(--cream);margin-top:4px}
.brand img{max-height:46px;width:auto}

.main-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.main-nav a{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--gold)}
.header-actions{display:flex;align-items:center;gap:20px}
.cart-link{position:relative;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);display:inline-flex;align-items:center;gap:8px}
.cart-link:hover{color:var(--gold)}
.cart-count{background:var(--gold);color:var(--noir);font-size:10px;font-weight:500;min-width:18px;height:18px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;letter-spacing:0}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.menu-toggle span{display:block;width:24px;height:1.5px;background:var(--cream);margin:5px 0;transition:.25s}

/* ===================== HERO ===================== */
.hero{position:relative;text-align:center;padding:clamp(70px,12vw,150px) 0 0;overflow:hidden}
.hero .eyebrow{display:block;margin-bottom:24px}
.hero h1{color:var(--gold);letter-spacing:.01em;margin-bottom:10px}
.hero .lede{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(17px,2.2vw,24px);color:var(--cream);max-width:24ch;margin:0 auto 30px}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(46px,7vw,80px)}
.ribbon{display:block;width:100%;height:auto;margin-top:10px}
.shimmer{animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,100%{opacity:.45}50%{opacity:.95}}

/* ===================== SECTIONS ===================== */
.section{padding:clamp(58px,8vw,112px) 0}
.section.alt{background:var(--noir-soft)}
.ingredient-strip{text-align:center;padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ingredient-strip .big{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3.4vw,38px);color:var(--cream)}
.ingredient-strip .small{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-top:14px}

.section-head{text-align:center;max-width:60ch;margin:0 auto clamp(38px,5vw,58px)}
.section-head .eyebrow{display:block;margin-bottom:14px}
.section-head p{color:var(--muted);font-size:15px}

/* formulas */
.formulas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.formula{background:var(--noir-panel);border:1px solid var(--line);border-radius:5px;padding:38px 28px;text-align:center}
.formula h3{color:var(--gold);margin-bottom:4px}
.formula .who{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--nude);margin-bottom:16px}
.formula p{font-size:13.5px;color:var(--muted)}
.firm{display:flex;gap:6px;justify-content:center;margin-top:18px}
.firm i{width:20px;height:3px;border-radius:2px;background:rgba(198,162,74,.25)}
.firm i.on{background:var(--gold)}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.story .copy h2{margin-bottom:.4em}
.story .copy p{color:var(--muted)}
.story .visual{aspect-ratio:4/5;border-radius:6px;background:
  radial-gradient(120% 120% at 30% 20%,#D89A3E,#9A5C1B 60%,#5e3a13);
  box-shadow:inset 0 20px 50px rgba(255,240,210,.25),inset 0 -30px 60px rgba(40,20,0,.4);border:1px solid var(--line)}

/* pro callout */
.pro-callout{text-align:center;background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));color:var(--noir);border-radius:8px;padding:clamp(40px,6vw,72px)}
.pro-callout h2{color:var(--noir)}
.pro-callout p{color:rgba(22,18,15,.8);max-width:50ch;margin:0 auto 26px}
.pro-callout .btn{background:var(--noir);color:var(--cream);border-color:var(--noir)}
.pro-callout .btn:hover{background:transparent;color:var(--noir)}

/* ===================== FOOTER ===================== */
.site-footer{background:#100d0a;border-top:1px solid var(--line);padding:clamp(48px,7vw,84px) 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:42px}
.footer-grid .wm{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:.05em;color:var(--gold)}
.footer-grid p{font-size:13px;color:var(--muted);margin-top:14px;max-width:34ch}
.footer-col h4{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--cream);margin-bottom:16px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:10px}
.footer-col a{font-size:13px;color:var(--muted)}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:11px;letter-spacing:.06em;color:var(--muted)}

/* ===================== WORDPRESS CONTENT ===================== */
.page-wrap{padding:clamp(48px,7vw,90px) 0}
.entry-title{margin-bottom:.4em}
.entry-content{max-width:720px;margin:0 auto}
.entry-content a{text-decoration:underline}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px}
.post-card{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--noir-soft)}
.post-card .pad{padding:22px 24px}
.post-card h3{margin-bottom:.3em}
.post-card .meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* ===================== WOOCOMMERCE ===================== */
.woo-wrap{padding:clamp(40px,6vw,80px) 0}
.woocommerce .products ul,.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:34px;margin:0;padding:0}
.woocommerce ul.products li.product{list-style:none;text-align:center;background:var(--noir-soft);border:1px solid var(--line);border-radius:6px;padding:22px;margin:0;overflow:hidden;transition:transform .25s ease,border-color .2s ease,box-shadow .25s ease}
.woocommerce ul.products li.product:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.woocommerce ul.products li.product a img{transition:transform .45s ease}
.woocommerce ul.products li.product:hover a img{transform:scale(1.05)}
.woocommerce ul.products li.product .button{display:block;width:100%}
.woocommerce ul.products li.product a img{border-radius:3px;margin-bottom:16px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--cream);padding:0 0 6px}
.woocommerce ul.products li.product .price{color:var(--gold);font-family:var(--sans);font-weight:400;font-size:15px}
.woocommerce ul.products li.product .price del{color:var(--muted);font-weight:300}
.woocommerce ul.products li.product .button{margin-top:14px}
.woocommerce span.onsale{background:var(--gold);color:var(--noir);font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;min-height:auto;min-width:auto;padding:6px 12px;line-height:1}

/* single product */
.woocommerce div.product .product_title{font-family:var(--serif);color:var(--cream)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--gold);font-size:24px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted)}
.woocommerce .quantity .qty{background:var(--noir-soft);border:1px solid var(--line);color:var(--cream);padding:10px;border-radius:2px}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--noir-soft);border-color:var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:transparent}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--cream)}

/* cart / checkout / tables / notices */
.woocommerce table.shop_table,.woocommerce-cart table.cart{border-color:var(--line);background:var(--noir-soft)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line);color:var(--cream)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--noir-soft);border-top-color:var(--gold);color:var(--cream)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--gold)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{background:var(--noir-soft);border:1px solid var(--line);color:var(--cream);padding:12px;border-radius:2px}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{color:var(--muted)}
.woocommerce nav.woocommerce-pagination ul{border-color:var(--line)}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{color:var(--cream)}

/* ===================== LIGHT SECTIONS + REFINEMENTS ===================== */
.section.light{background:var(--paper-light);color:var(--ink-light)}
.section.light h1,.section.light h2,.section.light h3,.section.light h4{color:var(--ink-light)}
.section.light .section-head p,.section.light>.container>p{color:var(--muted-light)}
.section.light .eyebrow{color:var(--gold-deep)}
.section.light .btn-ghost{color:var(--gold-deep);border-color:var(--gold-deep)}
.section.light .btn-ghost:hover{background:var(--gold-deep);color:var(--paper-light)}

/* promise + benefits band (light) */
.promise{background:var(--paper-light);color:var(--ink-light);text-align:center;padding:clamp(48px,6.5vw,84px) 0}
.promise .lede-line{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,3.2vw,36px);color:var(--ink-light);line-height:1.15}
.promise .ing{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-deep);margin:14px 0 clamp(34px,4.5vw,52px)}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:940px;margin:0 auto}
.benefit{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 6px}
.benefit .ico{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold-deep);display:flex;align-items:center;justify-content:center}
.benefit svg{width:24px;height:24px;stroke:var(--gold-deep);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.benefit b{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-light)}
.benefit span{font-size:12.5px;color:var(--muted-light);max-width:22ch;line-height:1.55}

/* hero lede readability */
.hero .lede{line-height:1.5}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .formulas{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .story{grid-template-columns:1fr}
  .story .visual{order:-1;max-width:420px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:repeat(2,1fr);gap:34px 20px;max-width:480px}
}
@media (max-width:768px){
  .menu-toggle{display:block}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--noir-soft);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .3s ease;padding:90px 30px;z-index:60}
  .main-nav.open{transform:none}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav li{border-bottom:1px solid var(--line)}
  .main-nav a{display:block;padding:16px 0;font-size:14px}
  .nav-open .menu-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-open .menu-toggle span:nth-child(2){opacity:0}
  .nav-open .menu-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .hero .cta-row{flex-direction:column;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shimmer{animation:none;opacity:.8}
  *{transition:none!important}
}