/*
Theme Name:   ASA Beauty
Theme URI:    https://www.asabeautylab.com
Author:       ASA Beauty
Description:  Complete WordPress + WooCommerce theme for ASA Beauty. Trilingual EN/BM/ZH, hero slider, product grid and shop pages — matching asabeautylab.com exactly.
Version:      1.5.2
License:      GNU General Public License v2 or later
Text Domain:  asa-beauty
Tags:         e-commerce, custom-colors, translation-ready
*/

/* ============================================================
   ASA BEAUTY — full theme
   Ported from the static site, plus WooCommerce styling.
   ============================================================ */

/* ============================================================
   ASA BEAUTY — SHARED STYLES
   ============================================================ */

:root{
  --sky:#a8c8f0;
  --sky-light:#daeaf8;
  --sky-pale:#eef5fc;
  --sky-deep:#4a85b5;
  --navy:#1a3057;
  --mist:#f0f7fe;
  --fog:#e4f0fa;
  --cream:#fdfeff;
  --text-dark:#2c3e5a;
  --text-mid:#3a5a7a;
  --text-soft:#4a7a9b;
  /* pink theme tokens */
  --pink:#f5a8c8;
  --pink-light:#fde4ee;
  --pink-pale:#fef3f7;
  --pink-deep:#d4517f;
  /* green theme tokens */
  --green:#8fcbb4;
  --green-light:#dff1e9;
  --green-pale:#f1faf6;
  --green-deep:#2f8f6f;
  /* lavender theme tokens */
  --lav:#c9b8e0;
  --lav-light:#ece4f6;
  --lav-pale:#f7f3fc;
  --lav-deep:#7a5ea3;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;
  background:var(--cream);
  color:var(--text-dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none}

/* ---------- LANGUAGE ---------- */
.en{display:inline}
.bm,.zh{display:none}
.bm-active .bm{display:inline}
.bm-active .en,.bm-active .zh{display:none}
.zh-active .zh{display:inline}
.zh-active .en,.zh-active .bm{display:none}

#lang-toggle{
  position:fixed;top:10px;right:10px;z-index:9999;
  display:flex;gap:4px;
}
.lang-btn{
  padding:4px 9px;border:none;background:transparent;border-radius:4px;
  font-size:.68rem;font-weight:600;letter-spacing:.5px;cursor:pointer;
  color:var(--sky-deep);font-family:inherit;transition:.2s;opacity:.7;
}
.lang-btn:hover{opacity:1}
.lang-btn.active{color:var(--navy);opacity:1;text-decoration:underline;text-underline-offset:3px}

/* ---------- NAV ---------- */
#site-nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(253,254,255,.92);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(168,200,240,.18);
}
.nav-inner{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;max-width:1240px;margin:0 auto;min-height:78px;
}
.nav-links{display:flex;gap:20px;z-index:1}
.nav-links a{
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mid);transition:color .2s;
}
.nav-links a:hover{color:var(--sky-deep)}
.nav-logo-center{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
.nav-logo-center img{height:62px;object-fit:contain}
.nav-spacer{width:90px}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,var(--sky-pale) 0%,var(--mist) 60%,var(--cream) 100%);
  overflow:hidden;
}
.hblob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none}
.hblob:nth-child(1){width:380px;height:380px;background:var(--sky-light);top:-90px;right:-90px}
.hblob:nth-child(2){width:320px;height:320px;background:var(--fog);bottom:-80px;left:-70px}
.hero-inner{
  position:relative;z-index:2;max-width:820px;width:100%;
  padding:132px 26px 76px;text-align:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:24px;
}
.eyebrow::before{content:'';width:34px;height:1px;background:currentColor}
h1.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.5rem,7vw,4.4rem);font-weight:300;line-height:1.1;
  color:var(--navy);margin-bottom:24px;
}
h1.hero-title em{font-style:italic;color:var(--sky-deep)}
.hero-sub{
  font-size:1.02rem;font-weight:300;line-height:1.75;color:var(--text-mid);
  max-width:520px;margin:0 auto 18px;
}
.htagline{
  font-family:'Cormorant Garamond',serif;font-size:1.18rem;font-style:italic;
  color:var(--text-mid);margin-bottom:32px;
}

/* ---------- EMAIL FORM ---------- */
.form-wrap{
  display:flex;max-width:400px;margin:0 auto;
  border:1.5px solid var(--sky);border-radius:50px;overflow:hidden;background:#fff;
}
.form-wrap input{
  flex:1;border:none;background:transparent;padding:14px 20px;
  font-family:inherit;font-size:.88rem;color:var(--text-dark);outline:none;min-width:0;
}
.form-wrap input::placeholder{color:var(--text-soft);opacity:.75}
.form-wrap button{
  background:var(--sky-deep);color:#fff;border:none;padding:14px 22px;
  font-family:inherit;font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;border-radius:50px;transition:background .2s;
  white-space:nowrap;
}
.form-wrap button:hover{background:var(--navy)}
.form-note{font-size:.76rem;color:var(--text-soft);margin-top:12px}
.success{
  display:none;margin-top:14px;font-size:.85rem;color:var(--sky-deep);
  font-family:'Cormorant Garamond',serif;font-style:italic;
}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:30px}
.badge{
  border:1.5px solid rgba(168,200,240,.6);border-radius:50px;padding:7px 15px;
  font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mid);
}


/* ---------- HERO SLIDER ---------- */
.hero-slider{
  position:relative;margin-top:78px;overflow:hidden;
  background:linear-gradient(170deg,var(--sky-pale) 0%,var(--mist) 100%);
}
.hs-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.hs-slide{min-width:100%;flex:0 0 100%}
.hs-slide img{width:100%;height:auto;display:block}
.hs-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  color:var(--navy);font-size:1.5rem;line-height:1;cursor:pointer;transition:.22s;
  box-shadow:0 3px 14px rgba(60,100,150,.2);
  display:flex;align-items:center;justify-content:center;
}
.hs-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.hs-nav.prev{left:18px}
.hs-nav.next{right:18px}
.hs-dots{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:4;display:flex;gap:9px;
}
.hs-dot{
  width:9px;height:9px;border-radius:50%;cursor:pointer;transition:.25s;
  background:rgba(26,48,87,.28);box-shadow:0 1px 4px rgba(255,255,255,.6);
}
.hs-dot.active{background:var(--navy);width:26px;border-radius:50px}
@media(max-width:860px){
  .hero-slider{margin-top:70px}
  .hs-nav{width:34px;height:34px;font-size:1.15rem}
  .hs-nav.prev{left:10px}
  .hs-nav.next{right:10px}
  .hs-dots{bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .hs-track{transition:none}
}

/* ---------- SHOP GRID ---------- */
.shop-section{padding:96px 22px;background:var(--cream)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 52px}
.sec-eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sky-deep);margin-bottom:12px;
}
.sec-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,4.4vw,3.2rem);font-weight:400;color:var(--navy);line-height:1.15;
}
.sec-title em{font-style:italic;color:var(--sky-deep)}
.sec-sub{font-size:.95rem;color:var(--text-mid);margin-top:14px;line-height:1.7}

.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:28px;max-width:1180px;margin:0 auto;
}
.card{
  background:var(--cream);border:1px solid rgba(168,200,240,.3);border-radius:24px;
  overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(60,100,150,.14)}
.card-img{
  position:relative;aspect-ratio:3/4;display:block;overflow:hidden;
  background:linear-gradient(150deg,var(--fog) 0%,var(--sky-light) 100%);
}
.card.pink .card-img{background:linear-gradient(150deg,var(--pink-pale) 0%,var(--pink-light) 100%)}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.card-badge{
  position:absolute;top:14px;left:14px;z-index:3;background:rgba(26,48,87,.88);
  backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(26,48,87,.25);color:#fff;
  font-size:.58rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:50px;
}
.card.pink .card-badge{background:var(--pink-deep)}
.card-body{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1}
.card-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--navy);margin-bottom:6px;line-height:1.2}
.card-tag{font-size:.72rem;font-weight:500;letter-spacing:.06em;color:var(--sky-deep);text-transform:uppercase;margin-bottom:12px}
.card.pink .card-tag{color:var(--pink-deep)}
.card-short{font-size:.85rem;line-height:1.65;color:var(--text-mid);margin-bottom:18px;flex:1}
.card-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.card-price{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:500;color:var(--navy)}
.card-size{font-size:.78rem;color:var(--text-soft)}
.card-btns{display:flex;gap:9px}
.btn{
  flex:1;text-align:center;padding:12px 16px;border-radius:50px;
  font-family:inherit;font-size:.74rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;transition:.25s;border:1.5px solid transparent;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--sky-deep)}
.card.pink .btn-primary{background:var(--pink-deep)}
.card.pink .btn-primary:hover{background:#b03a66}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--sky)}
.btn-outline:hover{background:var(--fog)}
.card.pink .btn-outline{color:var(--pink-deep);border-color:var(--pink)}
.card.pink .btn-outline:hover{background:var(--pink-pale)}

/* ---------- PRODUCT PAGE ---------- */
.pdp{padding:118px 22px 80px;max-width:1180px;margin:0 auto}
.crumb{
  display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--text-soft);
  margin-bottom:26px;transition:color .2s;
}
.crumb:hover{color:var(--sky-deep)}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

.pslider{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(150deg,var(--fog) 0%,var(--sky-light) 100%);aspect-ratio:2/3}
.pdp.pink .pslider{background:linear-gradient(150deg,var(--pink-pale) 0%,var(--pink-light) 100%)}
.pslides{display:flex;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.pslide{min-width:100%;flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center}
.pslide img{width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center;display:block}
.pnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);color:var(--navy);
  font-size:1.25rem;line-height:1;cursor:pointer;transition:.22s;
  box-shadow:0 3px 12px rgba(60,100,150,.18);
  display:flex;align-items:center;justify-content:center;
}
.pnav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.pnav.prev{left:12px}.pnav.next{right:12px}
.pdots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:7px}
.pdot{width:8px;height:8px;border-radius:50%;background:rgba(60,100,150,.28);cursor:pointer;transition:.22s}
.pdot.active{background:var(--navy);width:22px;border-radius:50px}

.pdp-badge{
  display:inline-block;background:var(--fog);color:var(--sky-deep);
  font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:50px;margin-bottom:14px;
}
.pdp.pink .pdp-badge{background:var(--pink-light);color:var(--pink-deep)}
.pdp-name{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:400;color:var(--navy);line-height:1.1;margin-bottom:10px}
.pdp-tag{font-size:.82rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-deep);margin-bottom:20px}
.pdp.pink .pdp-tag{color:var(--pink-deep)}
.pdp-price-row{display:flex;align-items:baseline;gap:11px;margin-bottom:22px}
.pdp-price{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:500;color:var(--navy)}
.pdp-size{font-size:.85rem;color:var(--text-mid)}
.pdp-desc{font-size:.95rem;line-height:1.8;color:var(--text-mid);margin-bottom:28px}
.pdp-cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:14px}
.btn-buy{
  background:var(--navy);color:#fff;padding:15px 36px;border-radius:50px;
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:.25s;display:inline-block;
}
.btn-buy:hover{background:var(--sky-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(60,100,150,.28)}
.pdp.pink .btn-buy{background:var(--pink-deep)}
.pdp.pink .btn-buy:hover{background:#b03a66;box-shadow:0 10px 26px rgba(212,81,127,.3)}
.pdp-note{font-size:.76rem;color:var(--text-soft);font-style:italic}

.benefits{display:grid;gap:15px;margin-bottom:30px}
.bf-row{display:flex;gap:14px;align-items:flex-start}
.bf-ico{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--fog);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
.pdp.pink .bf-ico{background:var(--pink-light)}
.bf-t{font-size:.92rem;font-weight:600;color:var(--navy);margin-bottom:3px}
.bf-d{font-size:.85rem;line-height:1.6;color:var(--text-mid)}

.pdp-details{margin-top:74px;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.pd-card{background:var(--mist);border:1px solid rgba(168,200,240,.3);border-radius:22px;padding:30px 26px}
.pdp.pink .pd-card{background:var(--pink-pale);border-color:rgba(245,168,200,.35)}
.pd-title{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--navy);margin-bottom:16px}
.pd-list{list-style:none;display:grid;gap:12px}
.pd-list li{font-size:.86rem;line-height:1.65;color:var(--text-mid);padding-left:19px;position:relative}
.pd-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--sky)}
.pdp.pink .pd-list li::before{background:var(--pink)}
.pd-list li b{color:var(--navy);font-weight:600;display:block;margin-bottom:2px}
.pd-intro{font-size:.86rem;color:var(--text-mid);line-height:1.7;margin-bottom:14px}
.routine{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;margin-bottom:16px}
.rt-step{
  background:var(--fog);border-radius:50px;padding:9px 18px;
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
}
.pdp.pink .rt-step{background:var(--pink-light)}
.rt-arrow{color:var(--sky-deep);font-size:1rem}

/* ---------- QUOTE ---------- */
.quote-section{padding:88px 24px;text-align:center;background:var(--cream)}
.quote-text{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.4rem,3.4vw,2.2rem);color:var(--navy);line-height:1.45;
  max-width:640px;margin:0 auto 26px;
}
.divider{width:44px;height:1px;background:var(--sky);margin:0 auto 22px}
.brand-line{font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--text-soft);margin-bottom:8px}
.brand-tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;color:var(--text-mid)}

/* ---------- SOCIAL ---------- */
.social-section{padding:80px 24px;background:linear-gradient(180deg,var(--mist) 0%,var(--sky-pale) 100%);text-align:center}
.social-inner{max-width:520px;margin:0 auto}
.social-title{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:400;color:var(--navy);margin-bottom:14px}
.social-desc{font-size:.9rem;line-height:1.7;color:var(--text-mid);margin-bottom:26px}
.sbtn{
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid var(--sky);border-radius:50px;padding:12px 26px;
  font-size:.82rem;font-weight:500;color:var(--navy);background:#fff;transition:.22s;
}
.sbtn:hover{background:var(--fog)}

/* ---------- FOOTER ---------- */
footer{background:var(--navy);color:rgba(255,255,255,.72);padding:44px 24px 22px}
.footer-in{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  max-width:1080px;margin:0 auto 30px;flex-wrap:wrap;
}
.footer-logo-img{height:52px;opacity:.9;filter:brightness(0) invert(1) opacity(.85)}
.ftag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.82rem;color:rgba(255,255,255,.55);margin-top:8px}
.fcopy{font-size:.74rem;color:rgba(255,255,255,.4);margin-top:8px;line-height:1.7}
.fright{text-align:right;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.9}
.footer-bottom{
  text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.86rem;color:rgba(255,255,255,.3);
  border-top:1px solid rgba(255,255,255,.1);padding-top:18px;max-width:1080px;margin:0 auto;
}


/* ---------- GREEN THEME ---------- */
.card.green .card-img{background:linear-gradient(150deg,var(--green-pale) 0%,var(--green-light) 100%)}
.card.green .card-badge{background:var(--green-deep)}
.card.green .card-tag{color:var(--green-deep)}
.card.green .btn-primary{background:var(--green-deep)}
.card.green .btn-primary:hover{background:#24765a}
.card.green .btn-outline{color:var(--green-deep);border-color:var(--green)}
.card.green .btn-outline:hover{background:var(--green-pale)}
.pdp.green .pslider{background:linear-gradient(150deg,var(--green-pale) 0%,var(--green-light) 100%)}
.pdp.green .pdp-badge{background:var(--green-light);color:var(--green-deep)}
.pdp.green .pdp-tag{color:var(--green-deep)}
.pdp.green .btn-buy{background:var(--green-deep)}
.pdp.green .btn-buy:hover{background:#24765a;box-shadow:0 10px 26px rgba(47,143,111,.3)}
.pdp.green .bf-ico{background:var(--green-light)}
.pdp.green .pd-card{background:var(--green-pale);border-color:rgba(143,203,180,.4)}
.pdp.green .pd-list li::before{background:var(--green)}
.pdp.green .rt-step{background:var(--green-light)}


/* ---------- LAVENDER THEME ---------- */
.card.lavender .card-img{background:linear-gradient(150deg,var(--lav-pale) 0%,var(--lav-light) 100%)}
.card.lavender .card-badge{background:rgba(122,94,163,.9)}
.card.lavender .card-tag{color:var(--lav-deep)}
.card.lavender .btn-primary{background:var(--lav-deep)}
.card.lavender .btn-primary:hover{background:#634b86}
.card.lavender .btn-outline{color:var(--lav-deep);border-color:var(--lav)}
.card.lavender .btn-outline:hover{background:var(--lav-pale)}
.pdp.lavender .pslider{background:linear-gradient(150deg,var(--lav-pale) 0%,var(--lav-light) 100%)}
.pdp.lavender .pdp-badge{background:var(--lav-light);color:var(--lav-deep)}
.pdp.lavender .pdp-tag{color:var(--lav-deep)}
.pdp.lavender .btn-buy{background:var(--lav-deep)}
.pdp.lavender .btn-buy:hover{background:#634b86;box-shadow:0 10px 26px rgba(122,94,163,.3)}
.pdp.lavender .bf-ico{background:var(--lav-light)}
.pdp.lavender .pd-card{background:var(--lav-pale);border-color:rgba(201,184,224,.4)}
.pdp.lavender .pd-list li::before{background:var(--lav)}
.pdp.lavender .rt-step{background:var(--lav-light)}


/* ---------- BUY NOTE ---------- */
.buy-note{
  display:inline-block;margin:0 0 12px;padding:9px 15px;border-radius:12px;
  background:var(--lav-pale);color:var(--lav-deep);
  font-size:.82rem;line-height:1.55;font-weight:500;
}
.pdp:not(.lavender) .buy-note{background:var(--fog);color:var(--sky-deep)}
.card-note{
  font-size:.74rem;line-height:1.5;color:var(--lav-deep);
  background:var(--lav-pale);border-radius:10px;padding:7px 11px;margin-bottom:12px;
}
.card:not(.lavender) .card-note{background:var(--fog);color:var(--sky-deep)}

/* ---------- REVEAL ---------- */
.rel{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rel.vis{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .pdp-grid{grid-template-columns:1fr;gap:34px}
  .nav-links{gap:14px}
  .nav-links a{font-size:.7rem}
  .nav-spacer{width:40px}
  .nav-logo-center img{height:52px}
  .shop-section{padding:70px 18px}
  .pdp{padding:104px 18px 60px}
  .fright{text-align:left}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr;gap:22px}
  .pnav{width:30px;height:30px;font-size:1rem}
  .card-btns{flex-direction:column}
  .hero-inner{padding:118px 20px 62px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rel{opacity:1;transform:none}
}


/* ============================================================
   WOOCOMMERCE
   ============================================================ */
.woocommerce-page .site-main,
.woocommerce .site-main{max-width:1180px;margin:0 auto;padding:118px 22px 80px}

.woocommerce ul.products{display:grid !important;gap:28px;margin:0;padding:0}
@media(min-width:768px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr) !important}}
@media(max-width:767px){.woocommerce ul.products{grid-template-columns:1fr !important;gap:22px}}
.woocommerce ul.products li.product{
  width:100% !important;margin:0 !important;float:none !important;padding:0 !important;
  background:var(--cream);border:1px solid rgba(168,200,240,.3);border-radius:24px;
  overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;
}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(60,100,150,.14)}
.woocommerce ul.products li.product a img{
  margin:0 !important;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center;
  border-radius:0 !important;box-shadow:none !important;
  background:linear-gradient(150deg,var(--fog) 0%,var(--sky-light) 100%);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Cormorant Garamond',serif !important;font-size:1.35rem !important;
  color:var(--navy) !important;padding:22px 22px 4px !important;margin:0 !important;line-height:1.2;
}
.woocommerce ul.products li.product .price{
  display:block;padding:0 22px 4px;font-family:'Cormorant Garamond',serif;
  font-size:1.7rem;font-weight:500;color:var(--navy) !important;
}
.woocommerce ul.products li.product .price del{color:var(--text-soft) !important;font-size:1.05rem;opacity:.7}
.woocommerce ul.products li.product .price ins{text-decoration:none;font-weight:600}
.woocommerce ul.products li.product .button{margin:10px 22px 24px !important;display:block;text-align:center}
.woocommerce span.onsale{
  background:var(--navy) !important;color:#fff !important;border-radius:50px !important;
  font-size:.6rem !important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px !important;min-height:0 !important;min-width:0 !important;line-height:1 !important;
  top:14px !important;left:14px !important;right:auto !important;margin:0 !important;
}
.product_cat-cleansing-bars img{background:linear-gradient(150deg,var(--green-pale) 0%,var(--green-light) 100%) !important}
.product_cat-accessories img{background:linear-gradient(150deg,var(--lav-pale) 0%,var(--lav-light) 100%) !important}

/* buttons */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--navy) !important;color:#fff !important;border:none !important;
  border-radius:50px !important;padding:13px 30px !important;font-family:'Jost',sans-serif !important;
  font-size:.78rem !important;font-weight:600 !important;letter-spacing:.1em !important;
  text-transform:uppercase !important;transition:.25s !important;text-shadow:none !important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover{
  background:var(--sky-deep) !important;transform:translateY(-2px);box-shadow:0 10px 26px rgba(60,100,150,.26);
}

/* single product */
.single-product .product_title{
  font-family:'Cormorant Garamond',serif !important;font-weight:400 !important;
  font-size:clamp(1.9rem,3.6vw,2.7rem) !important;color:var(--navy) !important;margin-bottom:10px;
}
.single-product div.product p.price,.single-product div.product span.price{
  font-family:'Cormorant Garamond',serif;font-size:2.2rem !important;color:var(--navy) !important;font-weight:500;
}.woocommerce-tabs ul.tabs li{
  background:var(--mist) !important;border:1px solid rgba(168,200,240,.3) !important;border-radius:50px !important;
}
.woocommerce-tabs ul.tabs li.active{background:var(--navy) !important}
.woocommerce-tabs ul.tabs li.active a{color:#fff !important}
.woocommerce-tabs ul.tabs li a{
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid) !important;
}
.woocommerce div.product .woocommerce-tabs .panel{
  background:transparent;font-size:.95rem;line-height:1.8;color:var(--text-mid);
}
.woocommerce div.product .woocommerce-tabs .panel h3{
  font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--navy);margin-top:26px;
}
.woocommerce div.product .woocommerce-tabs .panel ul{list-style:none;padding-left:0}
.woocommerce div.product .woocommerce-tabs .panel ul li{position:relative;padding-left:20px;margin-bottom:11px;line-height:1.65}
.woocommerce div.product .woocommerce-tabs .panel ul li::before{
  content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--sky);
}
.woocommerce div.product form.cart div.quantity input{
  border:1.5px solid var(--sky);border-radius:50px;padding:11px 8px;font-family:'Jost',sans-serif;color:var(--navy);
}
.stock.in-stock{color:var(--green-deep) !important;font-size:.85rem}

/* cart + checkout */
.woocommerce table.shop_table{border-radius:18px !important;border:1px solid rgba(168,200,240,.35) !important;overflow:hidden}
.woocommerce table.shop_table th{
  background:var(--mist);font-family:'Jost',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-mid);
}
.woocommerce-cart .cart_totals,.woocommerce-checkout #order_review{
  background:var(--mist);border:1px solid rgba(168,200,240,.35);border-radius:20px;padding:26px;
}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container--default .select2-selection--single{
  border:1.5px solid rgba(168,200,240,.65) !important;border-radius:12px !important;
  padding:12px 14px !important;font-family:'Jost',sans-serif !important;color:var(--text-dark) !important;
  background:#fff !important;height:auto !important;
}
.woocommerce form .form-row label{font-size:.8rem;font-weight:500;color:var(--text-mid)}
#payment{background:var(--cream) !important;border-radius:18px}
.woocommerce-info,.woocommerce-message{
  background:var(--mist) !important;border-top-color:var(--sky-deep) !important;
  border-radius:12px;color:var(--text-mid);
}
.woocommerce-info::before,.woocommerce-message::before{color:var(--sky-deep) !important}
.woocommerce-error{border-top-color:var(--pink-deep) !important;border-radius:12px}
.woocommerce-breadcrumb{font-size:.78rem;color:var(--text-soft) !important}
.woocommerce-breadcrumb a{color:var(--text-soft) !important}
.woocommerce-result-count,.woocommerce-ordering select{color:var(--text-mid);font-size:.85rem}

/* cart count in nav */
.nav-cart{
  display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid);
}
.nav-cart:hover{color:var(--sky-deep)}
.nav-cart .count{
  background:var(--sky-deep);color:#fff;border-radius:50px;padding:2px 8px;font-size:.68rem;
}

/* generic page content */
.page-wrap{max-width:820px;margin:0 auto;padding:118px 22px 80px}
.page-wrap h1{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:var(--navy);margin-bottom:20px}
.page-wrap p{font-size:1rem;line-height:1.8;color:var(--text-mid);margin-bottom:16px}


/* ============================================================
   WORDPRESS-SPECIFIC OVERRIDES
   ============================================================ */
#site-nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(253,254,255,.92);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(168,200,240,.18);
}
.nav-right{display:flex;align-items:center;justify-content:flex-end;min-width:90px;z-index:1}
.nav-links{display:flex;gap:20px;z-index:1;list-style:none;margin:0;padding:0}
.nav-links li{list-style:none}
.nav-links a{
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mid);transition:color .2s;text-decoration:none;
}
.nav-links a:hover{color:var(--sky-deep)}
#site-footer{background:var(--navy);color:rgba(255,255,255,.72);padding:44px 24px 22px}
.hero-slider{margin-top:78px}
@media(max-width:860px){
  .hero-slider{margin-top:70px}
  .nav-right{min-width:auto}
  .nav-links{gap:12px}
  .nav-links a{font-size:.68rem;letter-spacing:.1em}
}
/* admin bar offset */
body.admin-bar #site-nav{top:32px}
@media(max-width:782px){body.admin-bar #site-nav{top:46px}}


/* ============================================================
   v1.1.0 ADJUSTMENTS
   ============================================================ */

/* --- 1. Language toggle removed (English only for now) --- */
#lang-toggle{display:none !important}
.en{display:inline !important}
.bm,.zh{display:none !important}

/* --- 2. Hero slider: cap the height so it fits on one screen --- */
.hero-slider{
  background:linear-gradient(170deg,var(--sky-pale) 0%,var(--mist) 100%);
}
.hs-slide{
  min-width:100%;flex:0 0 100%;
  height:clamp(300px, 52vh, 560px);
  display:flex;align-items:center;justify-content:center;
}
.hs-slide img{
  width:100%;height:100%;
  object-fit:contain;          /* whole banner stays visible */
  object-position:center;
  display:block;
}
@media(max-width:860px){
  .hs-slide{height:clamp(220px, 40vh, 380px)}
}

/* --- 3. Product cards: show the full image, and smaller cards --- */
.grid{
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
  gap:22px;
}
.card-img{
  aspect-ratio:1/1 !important;
  padding:14px;
  display:flex;align-items:center;justify-content:center;
}
.card-img img{
  width:100% !important;height:100% !important;
  object-fit:contain !important;   /* full product visible, nothing cropped */
  object-position:center;
  border-radius:10px;
}
.card-name{font-size:1.25rem}
.card-body{padding:18px 18px 20px}

/* same treatment for the WooCommerce shop grid */
.woocommerce ul.products li.product a img{
  aspect-ratio:1/1 !important;
  object-fit:contain !important;
  padding:14px;
  background:linear-gradient(150deg,var(--fog) 0%,var(--sky-light) 100%);
}
.woocommerce ul.products{gap:22px}
@media(min-width:1100px){
  .woocommerce ul.products{grid-template-columns:repeat(4,1fr) !important}
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.15rem !important;padding:18px 18px 4px !important;
}
.woocommerce ul.products li.product .price{font-size:1.45rem;padding:0 18px 4px}
.woocommerce ul.products li.product .button{margin:10px 18px 20px !important;padding:11px 20px !important}

/* --- 4. Footer logo: keep it small everywhere --- */
#site-footer .footer-logo-img,
.footer-logo-img,
footer img.footer-logo-img{
  height:52px !important;
  width:auto !important;
  max-width:180px !important;
  opacity:.9;
  filter:brightness(0) invert(1) opacity(.85);
}
#site-footer{padding:40px 24px 20px}
.footer-in{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;max-width:1080px;margin:0 auto 26px;flex-wrap:wrap;
}
@media(max-width:860px){
  .footer-in{flex-direction:column;gap:18px}
  .fright{text-align:left}
}


/* ============================================================
   v1.1.1 FIXES
   ============================================================ */

/* --- 1. Hero: full width, slightly taller --- */
.hs-slide{
  height:clamp(340px, 58vh, 620px) !important;
}
.hs-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;      /* fills the full width edge to edge */
  object-position:center center !important;
}
@media(max-width:860px){
  .hs-slide{height:clamp(240px, 44vh, 420px) !important}
  .hs-slide img{object-fit:contain !important}  /* phones keep the whole banner */
}

/* --- 2. Product grid: exactly 3 equal columns, no empty slot --- */
.grid{
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
  max-width:1180px;margin:0 auto;
}
.woocommerce ul.products,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4{
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
  max-width:1180px;margin:0 auto !important;
}
/* every card the same width and height */
.woocommerce ul.products li.product,
.card{
  width:100% !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column;
}
.woocommerce ul.products li.product:empty{display:none !important}
/* push the button to the bottom so cards line up */
.woocommerce ul.products li.product .button{margin-top:auto !important}

@media(max-width:900px){
  .grid,
  .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:560px){
  .grid,
  .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{grid-template-columns:1fr !important}
}


/* ============================================================
   v1.1.2 FIXES
   ============================================================ */

/* --- 1. Mobile shop: make sure product cards always render --- */
.woocommerce ul.products{
  list-style:none !important;
  padding:0 !important;
  width:100%;
}
.woocommerce ul.products li.product{
  float:none !important;
  clear:none !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:1px;
  list-style:none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none !important}

/* fallback for browsers without CSS grid */
@supports not (display:grid){
  .woocommerce ul.products{display:block !important}
  .woocommerce ul.products li.product{
    display:block !important;width:100% !important;margin-bottom:22px !important;
  }
}

/* --- 2. Single product page --- */

/* clear the fixed header */
.single-product .site-main,
.woocommerce.single-product .site-main{
  padding-top:150px !important;
}
@media(max-width:860px){
  .single-product .site-main{padding-top:120px !important}
}

/* two columns with breathing room */
.single-product div.product{
  display:flex !important;
  flex-wrap:wrap;
  gap:56px !important;
  align-items:flex-start;
}/* summary: room on the left, comfortable measure */
.single-product div.product .summary,
.single-product div.product .entry-summary{
  flex:1 1 380px !important;
  width:auto !important;
  max-width:560px;
  margin:0 !important;
  padding-left:8px;
  float:none !important;
}
.single-product div.product .summary > *{margin-bottom:14px}
.single-product .product_title{margin-bottom:8px !important}
.single-product .woocommerce-product-details__short-description{
  font-size:.98rem;line-height:1.8;color:var(--text-mid);
}
.single-product form.cart{margin:22px 0 !important}
.single-product .product_meta{
  font-size:.82rem;color:var(--text-soft);
  padding-top:16px;border-top:1px solid rgba(168,200,240,.35);
}
.single-product .product_meta a{color:var(--sky-deep)}

/* description tabs: readable width, not flush left */
.single-product .woocommerce-tabs{
  width:100%;margin-top:56px !important;padding:0 8px;
}
.single-product .woocommerce-tabs .panel{
  max-width:820px;
}
.single-product .woocommerce-tabs .panel p,
.single-product .woocommerce-tabs .panel li{
  max-width:70ch;
}

/* stack cleanly on phones */
@media(max-width:860px){
  .single-product div.product{gap:28px !important}.single-product div.product .summary{
    flex:1 1 100% !important;padding-left:0;
  }
  .single-product .woocommerce-tabs{padding:0}
}

/* related products use the same 3-column grid */
.single-product .related ul.products,
.single-product .up-sells ul.products{
  grid-template-columns:repeat(3,1fr) !important;
}
@media(max-width:900px){
  .single-product .related ul.products,
  .single-product .up-sells ul.products{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:560px){
  .single-product .related ul.products,
  .single-product .up-sells ul.products{grid-template-columns:1fr !important}
}


/* ============================================================
   v1.1.3 FIXES
   ============================================================ */

/* Anything anchored/scrolled to keeps clear of the fixed nav */
html{scroll-padding-top:100px}

/* More clearance under the fixed header on WooCommerce pages */
.woocommerce .site-main,
.woocommerce-page .site-main{padding-top:150px !important}

.single-product .site-main,
.woocommerce.single-product .site-main,
body.single-product .site-main{
  padding-top:175px !important;
}
@media(max-width:860px){
  .woocommerce .site-main,
  .woocommerce-page .site-main{padding-top:120px !important}
  .single-product .site-main,
  body.single-product .site-main{padding-top:130px !important}
}@media(max-width:860px){}

/* keep the title and price fully visible on load */
.single-product .product_title{
  scroll-margin-top:110px;
  padding-top:4px;
}


/* ============================================================
   v1.2.0 — HERO: full width AND full image
   Desktop uses 2.4:1 banners so nothing is cropped.
   ============================================================ */
.hs-slide{
  height:auto !important;
  min-width:100%;flex:0 0 100%;
  display:block !important;
}
.hs-slide picture{display:block;width:100%}
.hs-slide img{
  width:100% !important;
  height:auto !important;
  max-height:64vh;
  object-fit:contain !important;
  display:block;
}
@media(max-width:860px){
  .hs-slide img{max-height:none;object-fit:contain !important}
}


/* ============================================================
   v1.2.1 — header no longer covers content while scrolling
   ============================================================ */
#site-nav{
  transition:transform .3s ease;
  will-change:transform;
}
#site-nav.nav-hidden{
  transform:translateY(-100%);
}
body.admin-bar #site-nav.nav-hidden{
  transform:translateY(-160%);   /* clears the WP admin bar too */
}
@media(prefers-reduced-motion:reduce){
  #site-nav{transition:none}
}


/* ============================================================
   v1.2.2 — MOBILE PRODUCT PAGE
   ============================================================ */

/* 1. Gallery 40% smaller on phones, centred */
@media(max-width:860px){}

/* 2. Breathing room from the screen edge everywhere on mobile */
@media(max-width:860px){
  .woocommerce .site-main,
  .woocommerce-page .site-main,
  .single-product .site-main,
  body.single-product .site-main{
    padding-left:22px !important;
    padding-right:22px !important;
    box-sizing:border-box;
  }
  .single-product div.product,
  .single-product div.product .summary,
  .single-product div.product .entry-summary{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .single-product .woocommerce-tabs{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .single-product .woocommerce-tabs .panel,
  .single-product .woocommerce-tabs .panel p,
  .single-product .woocommerce-tabs .panel li,
  .single-product .woocommerce-tabs .panel h2,
  .single-product .woocommerce-tabs .panel h3{
    max-width:100%;
  }
  /* tab row can scroll instead of overflowing */
  .single-product .woocommerce-tabs ul.tabs{
    display:flex;flex-wrap:nowrap;overflow-x:auto;
    gap:8px;padding:0 0 6px !important;margin-bottom:18px;
    -webkit-overflow-scrolling:touch;
  }
  .single-product .woocommerce-tabs ul.tabs li{flex:0 0 auto}
  .single-product .woocommerce-tabs ul.tabs::before,
  .single-product .woocommerce-tabs ul.tabs::after{display:none !important}

  /* slightly tighter headings so long names don't dominate */
  .single-product .product_title{font-size:1.75rem !important}
  .single-product div.product p.price,
  .single-product div.product span.price{font-size:1.7rem !important}
}

/* the shop grid gets the same edge spacing */
@media(max-width:860px){
  .shop-section{padding-left:22px;padding-right:22px}
}


/* ============================================================
   v1.2.3 — mobile gallery size + edge spacing (stronger)
   ============================================================ */
@media(max-width:860px){/* --- more room from the screen edge --- */
  .woocommerce .site-main,
  .woocommerce-page .site-main,
  .single-product .site-main,
  body.single-product .site-main,
  body.woocommerce .site-main{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* apply the spacing to the content itself, so nothing can bypass it */
  .single-product div.product > .summary,
  .single-product div.product > .entry-summary,
  .single-product .woocommerce-tabs,
  .single-product .product_meta,
  .single-product .woocommerce-breadcrumb,
  .single-product .related,
  .single-product .up-sells,
  .woocommerce-page .woocommerce-notices-wrapper,
  .woocommerce ul.products,
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering{
    padding-left:28px !important;
    padding-right:28px !important;
    box-sizing:border-box !important;
  }
  .single-product .woocommerce-tabs .panel{
    padding-left:0 !important;padding-right:0 !important;
  }
  .single-product div.product{
    padding-left:0 !important;padding-right:0 !important;
  }
}

/* very narrow phones keep a little more edge space */
@media(max-width:400px){
  .single-product div.product > .summary,
  .single-product .woocommerce-tabs,
  .single-product .product_meta{
    padding-left:22px !important;padding-right:22px !important;
  }}


/* ============================================================
   v1.3.1 — uncropped images, without breaking layout
   Only the <img> is styled. The card link wraps the image,
   title and price, so it must be left alone.
   ============================================================ */

/* --- shop grid + homepage cards --- */
.woocommerce ul.products li.product img,
.card-img img{
  display:block !important;
  width:100% !important;
  height:290px !important;
  object-fit:cover !important;        /* fills the card frame */
  object-position:center !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  background:linear-gradient(150deg,var(--fog) 0%,var(--sky-light) 100%);
  border-radius:0 !important;
}
.product_cat-cleansing-bars img{
  background:linear-gradient(150deg,var(--green-pale) 0%,var(--green-light) 100%) !important;
}
.product_cat-accessories img{
  background:linear-gradient(150deg,var(--lav-pale) 0%,var(--lav-light) 100%) !important;
}
@media(max-width:860px){
  .woocommerce ul.products li.product img,
  .card-img img{height:250px !important}
}

/* ============================================================
   v1.3.2 — PRODUCT GALLERY
   WooCommerce's gallery uses FlexSlider, which positions and
   transforms its own elements. Overriding those breaks the
   slider, so the theme now only constrains the container width
   and lets WooCommerce do the rest.
   ============================================================ */
.single-product div.product .woocommerce-product-gallery{
  flex:0 1 294px;      /* 30% smaller than 420px */
  max-width:294px;
  width:100%;
  margin:0;
}
.single-product div.product .woocommerce-product-gallery img{
  border-radius:12px;
}
@media(max-width:860px){
  .single-product div.product .woocommerce-product-gallery{
    flex:1 1 100%;
    max-width:70%;     /* 10% smaller than 78% */
    margin:0 auto 14px;
  }
}


/* ============================================================
   v1.3.4 — more side spacing on desktop WooCommerce pages
   ============================================================ */
@media(min-width:861px){
  .woocommerce .site-main,
  .woocommerce-page .site-main,
  .single-product .site-main,
  body.single-product .site-main{
    padding-left:72px !important;
    padding-right:72px !important;
    box-sizing:border-box;
    max-width:1240px;
    margin:0 auto;
  }
  /* a little extra breathing room between gallery and text */
  .single-product div.product{
    gap:64px !important;
  }
  /* keep the description block aligned with the columns above */
  .single-product .woocommerce-tabs{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

@media(min-width:1400px){
  .woocommerce .site-main,
  .woocommerce-page .site-main,
  .single-product .site-main,
  body.single-product .site-main{
    padding-left:96px !important;
    padding-right:96px !important;
  }
}


/* ============================================================
   v1.4.0 — WooCommerce page wrapper
   Written into woocommerce.php, so this always applies.
   ============================================================ */
.asa-shop-wrap{
  max-width:1240px;
  margin:0 auto;
  padding:180px 72px 90px;
  box-sizing:border-box;
}
@media(min-width:1400px){
  .asa-shop-wrap{padding-left:96px;padding-right:96px}
}
@media(max-width:860px){
  .asa-shop-wrap{padding:130px 28px 70px}
}
@media(max-width:400px){
  .asa-shop-wrap{padding:120px 22px 60px}
}

/* the admin bar adds 32px at the top when logged in */
body.admin-bar .asa-shop-wrap{padding-top:212px}
@media(max-width:860px){
  body.admin-bar .asa-shop-wrap{padding-top:176px}
}

/* product columns inside the new wrapper */
.asa-shop-wrap .product{
  display:flex;
  flex-wrap:wrap;
  gap:64px;
  align-items:flex-start;
}
@media(max-width:860px){
  .asa-shop-wrap .product{gap:24px}
}


/* ============================================================
   v1.4.1 — spacing safety net
   Applies to the product content itself, so it holds no matter
   which template renders the page.
   ============================================================ */
@media(min-width:861px){
  body.single-product div.product,
  body.woocommerce div.product,
  body.woocommerce-page ul.products,
  body.woocommerce ul.products,
  body.single-product .woocommerce-tabs,
  body.single-product .related,
  body.single-product .up-sells,
  body.woocommerce .woocommerce-breadcrumb,
  body.woocommerce .woocommerce-result-count,
  body.woocommerce .woocommerce-ordering,
  body.woocommerce .woocommerce-notices-wrapper,
  body.woocommerce-cart .woocommerce,
  body.woocommerce-checkout .woocommerce{
    max-width:1096px;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
  }
  /* clear the fixed header even without the wrapper */
  body.single-product .site-main,
  body.woocommerce .site-main,
  body.woocommerce-page .site-main{
    padding:180px 72px 90px !important;
    max-width:1240px;
    margin:0 auto;
    box-sizing:border-box;
  }
  body.admin-bar.single-product .site-main,
  body.admin-bar.woocommerce .site-main{padding-top:212px !important}
}

@media(max-width:860px){
  body.single-product .site-main,
  body.woocommerce .site-main,
  body.woocommerce-page .site-main{
    padding:130px 28px 70px !important;
    box-sizing:border-box;
  }
}


/* ============================================================
   v1.5.0 — cards fit the photo exactly
   Product photos are 2:3 portrait, so the frame is 2:3 too.
   cover then fills it edge to edge with nothing cropped and
   no background padding needed.
   ============================================================ */
.woocommerce ul.products li.product img,
.card-img img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:2/3 !important;
  object-fit:cover !important;
  object-position:center !important;
  padding:0 !important;
  background:none !important;
  border-radius:0 !important;
  display:block !important;
}
/* older browsers without aspect-ratio still get a sensible frame */
@supports not (aspect-ratio:1/1){
  .woocommerce ul.products li.product img,
  .card-img img{height:420px !important}
}
@media(max-width:860px){
  @supports not (aspect-ratio:1/1){
    .woocommerce ul.products li.product img,
    .card-img img{height:360px !important}
  }
}

/* product page gallery: no padding or backdrop either */
.single-product .woocommerce-product-gallery img{
  background:none !important;
  padding:0 !important;
}


/* ============================================================
   v1.5.1 — shorter cards on mobile
   Desktop keeps the exact 2:3 fit. Mobile uses a slightly
   shallower frame (about 20% less height) so the grid is
   quicker to scroll. The small trim comes off the top and
   bottom, where the photos have the most empty space.
   ============================================================ */
@media(max-width:860px){
  .woocommerce ul.products li.product img,
  .card-img img{
    aspect-ratio:5/6 !important;   /* ~20% shorter than 2:3 */
    object-fit:cover !important;
    object-position:center !important;
  }
  @supports not (aspect-ratio:1/1){
    .woocommerce ul.products li.product img,
    .card-img img{height:288px !important}
  }
  /* tighten the text block a little too */
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:1.05rem !important;padding:14px 16px 2px !important;
  }
  .woocommerce ul.products li.product .price{font-size:1.3rem;padding:0 16px 2px}
  .woocommerce ul.products li.product .button{
    margin:8px 16px 16px !important;padding:10px 18px !important;font-size:.72rem !important;
  }
}


/* ============================================================
   v1.5.2 — smaller gallery on mobile
   20% smaller again (70% -> 56% width), so the price, stock and
   Add to Cart are visible without scrolling past the photo.
   ============================================================ */
@media(max-width:860px){
  .single-product div.product .woocommerce-product-gallery{
    flex:1 1 100% !important;
    max-width:56% !important;
    margin:0 auto 12px !important;
  }
  /* cap the height too, so tall poster images can't dominate */
  .single-product .woocommerce-product-gallery__wrapper img{
    max-height:52vh;
    width:auto !important;
    margin:0 auto;
  }
  /* pull the details up closer to the photo */
  .asa-shop-wrap .product{gap:14px !important}
  .single-product .product_title{margin-top:4px !important}
}
@media(max-width:400px){
  .single-product div.product .woocommerce-product-gallery{
    max-width:62% !important;
  }
}
.footer-menu{
  max-width:1080px;margin:0 auto 22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-menu-list{
  list-style:none;margin:0;padding:0;display:flex;
  flex-wrap:wrap;justify-content:center;gap:10px 28px;
}
.footer-menu-list li{list-style:none}
.footer-menu-list a{
  font-size:.78rem;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.66) !important;text-decoration:none;
  transition:color .2s;
}
.footer-menu-list a:hover{color:#fff !important}
@media(max-width:600px){
  .footer-menu-list{gap:10px 18px}
  .footer-menu-list a{font-size:.74rem}
}
#site-footer .footer-menu{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  z-index:auto !important;
  background:none !important;
  backdrop-filter:none !important;
  border:none !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  max-width:1080px;
  margin:0 auto 22px;
  padding-top:20px;
  display:block !important;
}
#site-footer .footer-menu-list a{
  color:rgba(255,255,255,.75) !important;
}