/*
Theme Name: Becoming by Unity
Theme URI: https://becomingbyunity.com
Author: Becoming by Unity
Description: Custom WordPress theme for Becoming by Unity — massage, facials, guided community experiences, and digital journeys. Pairs with the Becoming Booking plugin for appointments and Easy Digital Downloads for the Shop.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: becoming-by-unity
*/

/* ================= TOKENS ================= */
:root{
  --bg: #0a0912;
  --bg-soft: #100d1d;
  --surface: #161228;
  --surface-2: #1d1833;
  --line: rgba(245,241,236,0.11);
  --line-strong: rgba(245,241,236,0.2);

  --violet: #8265f6;
  --violet-deep: #3c2a8c;
  --magenta: #e6479f;
  --rose: #f28aac;
  --gold: #e8a93f;
  --gold-deep: #c9772a;

  --text: #f4f0ea;
  --text-muted: #b6accf;
  --text-dim: #8579a6;

  --shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
  --radius-arch: 200px 200px 12px 12px;
}
:root[data-theme="dark"], :root:not([data-theme="light"]){
  --bg: #0a0912; --bg-soft:#100d1d; --surface:#161228; --surface-2:#1d1833;
  --text:#f4f0ea; --text-muted:#b6accf; --text-dim:#8579a6;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg: #0a0912; --bg-soft:#100d1d; --surface:#161228; --surface-2:#1d1833;
    --text:#f4f0ea; --text-muted:#b6accf; --text-dim:#8579a6;
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:500;line-height:1.08;margin:0;letter-spacing:-0.01em;}
p{line-height:1.7;color:var(--text-muted);margin:0;}
::selection{background:var(--magenta);color:#fff;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

.eyebrow-serif{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  color:var(--rose); font-size:1.05rem; letter-spacing:0.01em;
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:999px;border:1px solid var(--line-strong);
  background:transparent;color:var(--text);font-family:'Inter';font-weight:600;font-size:0.95rem;
  cursor:pointer;text-decoration:none;transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.btn:hover{border-color:var(--text);transform:translateY(-1px);}
.btn-primary{
  background:linear-gradient(120deg,var(--violet),var(--magenta) 60%,var(--gold));
  border:none;color:#fff;box-shadow:0 10px 30px -10px rgba(230,71,159,0.55);
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-ghost{border-color:var(--line);color:var(--text-muted);}
.btn-ghost:hover{color:var(--text);}
.btn-small{padding:10px 18px;font-size:0.85rem;}

/* ================= NAV ================= */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
  background:rgba(10,9,18,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.nav.scrolled{border-bottom:1px solid var(--line); background:rgba(10,9,18,0.86);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{height:40px;width:auto;}
.brand-word{font-family:'Fraunces',serif;font-size:1.05rem;letter-spacing:0.02em;color:var(--text);text-align:left;}
.brand-word small{display:block;font-family:'Inter';font-size:0.58rem;letter-spacing:0.16em;color:var(--text-dim);font-weight:600;margin-top:1px;}

nav.links{display:flex;align-items:center;gap:30px;}
nav.links li{list-style:none;margin:0;padding:0;}
nav.links a{font-size:0.88rem;color:var(--text-muted);text-decoration:none;transition:color .2s ease;position:relative;}
nav.links a:hover{color:var(--text);}
nav.links a.active{color:var(--text);}
nav.links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--magenta));border-radius:2px;
}
.nav-right{display:flex;align-items:center;gap:14px;}
.icon-btn{
  position:relative;background:none;border:1px solid var(--line);color:var(--text);
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s ease;
}
.icon-btn:hover{border-color:var(--text);}
.cart-count{
  position:absolute;top:-4px;right:-4px;background:var(--magenta);color:#fff;
  font-size:0.65rem;font-weight:700;min-width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.hamburger{display:none;background:none;border:none;color:var(--text);cursor:pointer;}

#mobileMenu{position:fixed;inset:0;background:var(--bg);z-index:600;padding:110px 32px;flex-direction:column;gap:26px;display:none;}
#mobileMenu a{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--text);text-decoration:none;}
#mobileMenu a.active{color:var(--rose);}
.mm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;}
.mm-list li{list-style:none;margin:0;padding:0;}
.mm-list a{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--text);text-decoration:none;}
.mm-book{display:block;margin-top:10px;}

main{padding-top:96px;}

/* ================= SECTION GENERIC ================= */
section{position:relative;padding:90px 0;}
section.tight{padding:70px 0;}
.kicker{
  font-family:'Fraunces',serif;font-style:italic;color:var(--gold);
  font-size:1rem;margin-bottom:14px;display:block;
}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:18px;}
.section-head p{font-size:1.05rem;}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);width:100%;}

/* ================= HERO (home page) ================= */
.hero{
  min-height:86vh;display:flex;align-items:center;position:relative;
  padding-top:40px;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-10%;right:-10%;width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle at center, rgba(124,101,246,0.28), rgba(230,71,159,0.16) 45%, transparent 70%);
  filter:blur(10px);pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;width:100%;}
.hero-copy .eyebrow-serif{margin-bottom:18px;display:block;}
.hero-copy h1{font-size:clamp(2.6rem,5.2vw,4.2rem);}
.hero-sub{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--text-muted);margin-top:16px;font-style:italic;}
.hero-copy p.lead{margin-top:26px;font-size:1.08rem;max-width:520px;}
.hero-cta{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;}
.hero-art img{width:100%;max-width:440px;filter:drop-shadow(0 30px 60px rgba(0,0,0,0.55));}

/* ================= DOORWAYS ================= */
.doorways{background:var(--bg-soft);}
.doorway-lines{
  text-align:center;margin:56px auto 0;max-width:520px;
  font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem;color:var(--text-muted);
  display:flex;flex-direction:column;gap:10px;
}
.doorway-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.doorway{
  position:relative;padding:52px 30px 34px;border-radius:var(--radius-arch);
  background:var(--surface);border:1px solid var(--line);text-decoration:none;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  transition:transform .3s ease, border-color .3s ease;
  overflow:hidden;
}
.doorway::before{
  content:'';position:absolute;top:0;left:0;right:0;height:160px;
  opacity:.55; filter:blur(6px);
}
.doorway.massage::before{background:radial-gradient(ellipse at 50% -20%, var(--violet), transparent 70%);}
.doorway.facials::before{background:radial-gradient(ellipse at 50% -20%, var(--gold), transparent 70%);}
.doorway.community::before{background:radial-gradient(ellipse at 50% -20%, var(--magenta), transparent 70%);}
.doorway:hover{transform:translateY(-6px);border-color:var(--line-strong);}
.doorway .d-icon{width:56px;height:56px;position:relative;z-index:1;}
.doorway h3{font-size:1.5rem;position:relative;z-index:1;}
.doorway p{font-size:0.98rem;position:relative;z-index:1;}
.doorway .d-go{margin-top:auto;padding-top:10px;font-size:0.82rem;color:var(--text);display:flex;align-items:center;gap:6px;position:relative;z-index:1;}

/* ================= BOOK STRIP (bottom of Home) ================= */
.book-strip{
  background:linear-gradient(120deg, var(--violet-deep), #2a1650 55%, #401536);
  border-top:1px solid var(--line);
  text-align:center;padding:90px 0;
}
.book-strip h2{font-size:clamp(1.8rem,3.6vw,2.4rem);max-width:560px;margin:0 auto 14px;}
.book-strip p{max-width:480px;margin:0 auto 30px;font-size:1rem;}

/* ================= MASSAGE ================= */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.flow{margin-top:34px;display:flex;flex-wrap:wrap;gap:0;align-items:center;}
.flow-step{
  display:flex;flex-direction:column;gap:6px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);min-width:100px;text-align:center;
}
.flow-step .l{font-size:0.86rem;color:var(--text-muted);}
.flow-arrow{color:var(--text-dim);padding:0 8px;font-size:1.1rem;}
.wp-heading{font-size:1.15rem;font-weight:500;margin-bottom:16px;}
.wp-pills{display:flex;flex-wrap:wrap;gap:10px;}
.wp-pill{
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:0.9rem;
  color:var(--text-muted);background:var(--surface);
}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.offer-card{
  border:1px solid var(--line);border-radius:20px;padding:30px 26px;background:var(--surface);
  transition:border-color .25s ease, transform .25s ease;
}
.offer-card:hover{border-color:var(--violet);transform:translateY(-4px);}
.offer-card .idx{font-family:'Fraunces',serif;font-style:italic;color:var(--text-dim);font-size:0.95rem;}
.offer-card h4{margin-top:10px;font-size:1.22rem;font-weight:500;}
.offer-card p{margin-top:10px;font-size:0.92rem;}

/* ================= FACIALS ================= */
.facial-inner{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:center;}
.facial-art{
  aspect-ratio:3/4;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);position:relative;
}
.facial-art img{width:100%;height:100%;object-fit:cover;display:block;}
.facial-art svg{width:46%;}
.facial-copy h2{font-size:clamp(2rem,3.6vw,2.6rem);}
.facial-copy p{margin-top:20px;font-size:1.05rem;}
.facial-copy .btn{margin-top:30px;}

/* ================= COMMUNITY ================= */
.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cblock{
  border:1px solid var(--line);border-radius:20px;padding:32px;background:var(--surface);
  display:flex;flex-direction:column;gap:12px;
}
.cblock .clabel{font-family:'Inter';font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--rose);font-size:0.72rem;}
.cblock h3{font-size:1.35rem;font-weight:500;}
.cblock p{font-size:0.95rem;}

.cblock-featured{
  grid-column:1/-1;
  background:linear-gradient(120deg, rgba(130,101,246,0.10), rgba(230,71,159,0.08));
  border-color:var(--line-strong);
  padding:40px;
}
.cblock-featured h3{
  font-size:1.6rem;letter-spacing:0.03em;
}
.cblock-featured .cblock-tagline{
  font-family:'Fraunces',serif;font-style:italic;font-size:1.1rem;color:var(--rose);margin-top:-4px;
}
.cblock-featured .cblock-meta{
  font-size:0.85rem;color:var(--gold);letter-spacing:0.02em;
}
.cblock-featured .btn{align-self:flex-start;margin-top:6px;}
.optin{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.optin input{
  flex:1;min-width:180px;background:var(--bg-soft);border:1px solid var(--line);color:var(--text);
  padding:12px 16px;border-radius:999px;font-family:'Inter';font-size:0.9rem;
}
.optin input:focus{border-color:var(--gold);outline:none;}
.optin-success{color:var(--text-muted);font-size:0.9rem;}
.pull-quote{
  max-width:720px;margin:0 auto;text-align:center;font-family:'Fraunces',serif;
  font-style:italic;font-size:clamp(1.4rem,2.6vw,1.8rem);color:var(--text);line-height:1.4;
}

/* ================= SHOP TEASER (Community page) ================= */
.shop-teaser{text-align:center;margin:80px auto 0;max-width:640px;}

/* ================= SHOP (dedicated page) ================= */
.shop-intro{text-align:center;margin:80px 0 50px;}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:0;padding:0;}
.shop-grid::before, .shop-grid::after{content:none !important; display:none !important;}
.shop-grid > li, .shop-grid > li.product{
  list-style:none !important;
  width:auto !important; float:none !important; margin:0 !important; padding:0 !important;
  clear:none !important; text-align:left !important;
}

/* ================= WOOCOMMERCE — SITE-WIDE RESKIN ================= */
/* Covers Cart, Checkout, My Account, and single-product pages, which use
   WooCommerce's own default templates (not custom theme templates) unless
   noted otherwise. Keeps them on-brand without needing to rebuild every
   WooCommerce screen from scratch. */

.woocommerce{color:var(--text);}
.woocommerce a{color:inherit;}

/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button{
  background:linear-gradient(120deg,var(--violet),var(--magenta) 60%,var(--gold)) !important;
  color:#fff !important; border:none !important; border-radius:999px !important;
  padding:12px 24px !important; font-family:'Inter',sans-serif !important; font-weight:600 !important;
  font-size:0.9rem !important; text-transform:none !important; box-shadow:none !important;
  transition:filter .2s ease, transform .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  filter:brightness(1.08); transform:translateY(-1px); color:#fff !important;
}
.woocommerce a.button.alt, .woocommerce button.button.alt{opacity:1;}

/* Notices (added to cart, errors, info) */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews{
  background:var(--surface) !important; border-top-color:var(--violet) !important;
  color:var(--text) !important; border-radius:14px; padding:16px 20px !important;
  list-style:none; margin:0 0 24px !important;
}
.woocommerce-message li, .woocommerce-error li, .woocommerce-info li{list-style:none; margin:0; padding:0;}
.woocommerce-message::before, .woocommerce-info::before{color:var(--violet) !important;}
.woocommerce-error::before{color:var(--magenta) !important;}

/* Sale badge (WooCommerce's own .onsale — separate from our .bundle-tag,
   which already has its own correct styling elsewhere in this file) */
.onsale{
  background:linear-gradient(120deg,var(--gold),var(--magenta)) !important;
  color:#1a1526 !important; font-weight:700; text-transform:uppercase; font-size:0.68rem;
  letter-spacing:0.04em; border-radius:999px !important; padding:4px 12px !important;
  min-height:0 !important; min-width:0 !important; line-height:1.4 !important;
  top:14px !important; left:14px !important; right:auto !important;
}

/* Prices */
.woocommerce-Price-amount{color:var(--gold); font-family:'Fraunces',serif;}
.price del .woocommerce-Price-amount{color:var(--text-dim); font-family:'Inter',sans-serif; opacity:0.7;}
.price ins{text-decoration:none;}

/* Star ratings */
.star-rating{color:var(--gold);}
.star-rating::before{color:var(--line-strong);}

/* Tables — Cart, Checkout review, My Account orders */
.woocommerce table.shop_table, .woocommerce-cart table.cart, .woocommerce-checkout table.shop_table{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  border-collapse:separate; color:var(--text);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{
  border-color:var(--line) !important; padding:14px 16px;
}
.woocommerce table.shop_table th{color:var(--text-dim); font-weight:600; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em;}

/* Form fields — Checkout, My Account, quantity inputs */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-page form .form-row select, .woocommerce input[type="number"], .woocommerce input[type="text"],
.woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"],
.woocommerce select, .woocommerce textarea{
  background:var(--surface) !important; border:1px solid var(--line) !important; color:var(--text) !important;
  border-radius:10px !important; padding:12px 14px !important;
}
.woocommerce form .form-row label{color:var(--text-muted);}
.quantity .qty{width:64px;}

/* Checkout payment box */
.woocommerce-checkout #payment{background:var(--surface) !important; border-radius:16px;}
.woocommerce-checkout #payment div.payment_box{background:var(--surface-2) !important; color:var(--text);}

/* Breadcrumbs (single product pages) */
.woocommerce-breadcrumb{color:var(--text-dim); font-size:0.85rem; margin-bottom:24px;}
.woocommerce-breadcrumb a{color:var(--text-muted); text-decoration:none;}
.woocommerce-breadcrumb a:hover{color:var(--text);}

/* My Account dashboard */
.woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0;}
.woocommerce-MyAccount-navigation li{margin-bottom:8px;}
.woocommerce-MyAccount-navigation a{color:var(--text-muted); text-decoration:none;}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--text); font-weight:600;}
.woocommerce-MyAccount-content{color:var(--text-muted);}

/* Pagination (if the shop ever grows past one page) */
.woocommerce-pagination ul{list-style:none; display:flex; gap:8px; padding:0; margin:40px 0 0; justify-content:center;}
.woocommerce-pagination ul::before, .woocommerce-pagination ul::after{content:none !important; display:none !important;}
.woocommerce-pagination ul li{list-style:none; margin:0; padding:0;}
.woocommerce-pagination a, .woocommerce-pagination span{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--line); border-radius:50%; color:var(--text-muted); text-decoration:none;
}
.woocommerce-pagination .current{background:var(--violet); color:#fff; border-color:var(--violet);}

/* ================= WOOCOMMERCE BLOCKS (Cart & Checkout) ================= */
/* The block-based Cart/Checkout render field labels as floating labels at
   reduced opacity rather than using real placeholder attributes — this is
   a known WooCommerce accessibility issue (their own default styling
   makes this text very hard to read against the white input background).
   Setting the label color directly, on the actual component classes
   WooCommerce Blocks uses, is the correct fix. */
.wc-block-components-text-input label,
.wc-block-components-textarea label,
.wc-block-components-radio-control label,
.wc-block-components-totals-coupon .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-cart .wc-block-components-text-input label{
  color:#000 !important;
}
/* In case a field does use a real placeholder attribute (e.g. the coupon
   "Enter code" field) */
.wc-block-cart input::placeholder,
.wc-block-checkout input::placeholder,
.wc-block-components-text-input input::placeholder{
  color:#000 !important;
  opacity:1 !important;
}
/* Select dropdown text (Country/Region, State) on their white background */
.wc-block-components-text-input select,
.wc-block-checkout select,
.wc-block-cart select{
  color:#000 !important;
}

/* Single product page: image left, details right. Scoped with a direct-
   child combinator (main#main > div.product) so this targets ONLY the
   top-level product summary wrapper — not the "Related products" cards
   further down the same page, which also happen to use a div with class
   "product" (our own shop-loop card markup, unrelated to WooCommerce's
   single-product wrapper) but are nested much deeper in the DOM. */
.single-product main#main > div.product{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:48px !important;
  align-items:start !important;
}
.single-product main#main > div.product div.images,
.single-product main#main > div.product div.summary{
  width:auto !important; float:none !important; margin:0 !important;
}
.single-product main#main > div.product div.images img{border-radius:16px;}
.single-product main#main > div.product .summary h1.product_title{
  font-family:'Fraunces',serif; font-weight:500; font-size:2rem; color:var(--text); margin-bottom:12px;
}
.single-product main#main > div.product .summary .price{font-family:'Fraunces',serif; font-size:1.6rem; color:var(--gold); display:block; margin-bottom:16px;}
.single-product main#main > div.product .summary .woocommerce-product-details__short-description{color:var(--text-muted); margin-bottom:20px;}
.single-product main#main > div.product .summary .product_meta{margin-top:24px; font-size:0.85rem; color:var(--text-dim);}
.single-product main#main > div.product .summary .product_meta a{color:var(--text-muted); text-decoration:underline;}

/* The Description/Reviews tabs and Related Products are ALSO direct
   children of div.product (WooCommerce fires woocommerce_after_single_
   product_summary — which includes both — from inside the product
   wrapper, not after it). Without this, the 2-column grid above treats
   them as more grid cells, sitting them side-by-side with the image and
   summary instead of stacking full-width below. */
.single-product main#main > div.product > .woocommerce-tabs,
.single-product main#main > div.product > .related.products,
.single-product main#main > div.product > .upsells.products,
.single-product main#main > div.product > .cross-sells.products{
  grid-column: 1 / -1 !important;
}

/* Add to cart button on the single product page — same gradient as
   everywhere else. Written with matching specificity/!important to
   WooCommerce's own .button.alt styling so ours reliably wins. */
.single-product .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button.button.alt,
.woocommerce a.single_add_to_cart_button.button.alt{
  background:linear-gradient(120deg,var(--violet),var(--magenta) 60%,var(--gold)) !important;
  color:#fff !important; border:none !important; border-radius:999px !important;
  padding:14px 28px !important; font-weight:600 !important;
}

/* Description/Reviews tabs */
.woocommerce-tabs ul.tabs{border-bottom:1px solid var(--line); margin:0 0 24px; padding:0; list-style:none; display:flex; gap:4px;}
.woocommerce-tabs ul.tabs li{margin:0; list-style:none; padding:0;}
.woocommerce-tabs ul.tabs li a{
  display:block; padding:10px 20px; color:var(--text-dim); text-decoration:none; border-radius:10px 10px 0 0;
}
.woocommerce-tabs ul.tabs li.active a{background:var(--surface); color:var(--text);}
.woocommerce-tabs .panel h2{font-family:'Fraunces',serif; font-weight:500; font-size:1.4rem; margin-bottom:14px;}

/* Related products heading, to match the rest of the site's headings */
.related.products > h2{font-family:'Fraunces',serif; font-weight:500; font-size:1.8rem; margin:60px 0 30px; text-align:center;}

/* Related products / Upsells / Cross-sells all render their own
   ul.products WITHOUT the .shop-grid class our main Shop archive uses —
   same squished-card bug as before (WooCommerce's old float-based CSS
   still applying, plus the same clearfix ::before/::after pseudo-element
   issue), just not yet covered because the selector was scoped only to
   .shop-grid. Broadening the same fix here. */
.woocommerce ul.products:not(.shop-grid),
.woocommerce-page ul.products:not(.shop-grid){
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:20px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.woocommerce ul.products:not(.shop-grid)::before,
.woocommerce ul.products:not(.shop-grid)::after{content:none !important; display:none !important;}
.woocommerce ul.products:not(.shop-grid) > li{
  list-style:none !important; width:auto !important; float:none !important; margin:0 !important; padding:0 !important;
  clear:none !important; text-align:left !important;
}
@media (max-width: 900px){
  .woocommerce ul.products:not(.shop-grid){grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width: 560px){
  .woocommerce ul.products:not(.shop-grid){grid-template-columns:1fr !important;}
}

/* ---- Reviews tab / comment form polish ---- */
.woocommerce-Reviews-title{font-family:'Fraunces',serif; font-weight:500; font-size:1.4rem; margin-bottom:16px;}
.commentlist{list-style:none; padding:0; margin:0 0 30px;}
#review_form_wrapper{margin-top:30px;}
#review_form p.comment-form-rating{margin-bottom:18px;}
#review_form p.comment-form-rating label{display:block; margin-bottom:8px; color:var(--text-muted); font-size:0.9rem;}
.comment-form-rating .stars a{color:var(--gold) !important;}
.comment-form-rating .stars a:before{color:inherit;}
#review_form .comment-form-comment,
#review_form .comment-form-author,
#review_form .comment-form-email{margin-bottom:18px;}
#review_form label{display:block; margin-bottom:6px; color:var(--text-muted); font-size:0.88rem;}
#review_form .form-submit{margin-top:10px;}
p.stars a{color:var(--gold) !important;}

@media (max-width: 800px){
  .single-product main#main > div.product{grid-template-columns:1fr !important;}
}

/* WooCommerce's default page wrapper (used on single-product, cart,
   checkout, and my-account — anywhere we haven't supplied our own full
   template override) isn't constrained to our site's usual content width
   on its own. This matches the same max-width/padding as .wrap elsewhere. */
.woocommerce #primary.content-area,
.woocommerce-page #primary.content-area{
  max-width:1180px; margin-left:auto; margin-right:auto;
  padding-left:32px; padding-right:32px; box-sizing:border-box;
}
@media (max-width: 560px){
  .woocommerce #primary.content-area,
  .woocommerce-page #primary.content-area{padding-left:20px; padding-right:20px;}
}
.product{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:border-color .25s ease, transform .25s ease;position:relative;
}
.product:hover{transform:translateY(-4px);border-color:var(--line-strong);}
.product-top{
  height:260px;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.product-top svg{width:48px;height:48px;position:relative;z-index:1;}
.product-top img{
  width:100% !important;height:100% !important;object-fit:contain !important;object-position:center !important;
  max-width:100% !important;max-height:100% !important;
  margin:0 !important;display:block;padding:10px;box-sizing:border-box;
}
.p1 .product-top{background:radial-gradient(circle at 50% 20%, rgba(230,71,159,.35), transparent 70%);}
.p2 .product-top{background:radial-gradient(circle at 50% 20%, rgba(130,101,246,.35), transparent 70%);}
.p3 .product-top{background:radial-gradient(circle at 50% 20%, rgba(232,169,63,.35), transparent 70%);}
.p4 .product-top{background:radial-gradient(circle at 50% 20%, rgba(242,138,172,.35), transparent 70%);}
.p5 .product-top{background:linear-gradient(135deg, rgba(130,101,246,.3), rgba(230,71,159,.3));}
.p6 .product-top{background:linear-gradient(135deg, rgba(232,169,63,.32), rgba(230,71,159,.32), rgba(130,101,246,.32));}
.product-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1;}
.product-format{font-size:0.72rem;letter-spacing:0.06em;color:var(--text-dim);}
.product h4{font-size:1.14rem;font-weight:500;}
.product p.desc{font-size:0.87rem;flex:1;}
.price-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:4px;}
.price{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--text);}
.price .was{font-family:'Inter';font-size:0.82rem;color:var(--text-dim);text-decoration:line-through;margin-right:8px;}
.add-btn{width:100%;margin-top:12px;justify-content:center;}
.bundle-tag{
  position:absolute;top:14px;left:14px;background:rgba(10,9,18,0.55);border:1px solid var(--line-strong);
  padding:4px 12px;border-radius:999px;font-size:0.68rem;letter-spacing:0.05em;color:var(--gold);z-index:2;
}
.deeper-banner{
  margin-top:56px;border:1px solid var(--line);border-radius:24px;padding:40px;
  background:linear-gradient(120deg, rgba(130,101,246,0.14), rgba(230,71,159,0.1));
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.deeper-banner h3{font-size:1.5rem;max-width:460px;}
.deeper-banner p{margin-top:8px;}
.pdf-list{
  margin-top:56px;border:1px solid var(--line);border-radius:20px;padding:8px;background:var(--surface);
}
.pdf-row{
  display:flex;justify-content:space-between;align-items:center;padding:16px 20px;
  border-bottom:1px solid var(--line);font-size:0.94rem;
}
.pdf-row:last-child{border-bottom:none;}
.pdf-row .pn{color:var(--text);}
.pdf-row .pp{color:var(--gold);font-family:'Fraunces',serif;}

/* ================= ABOUT ================= */
.about-inner{max-width:760px;margin:0 auto;}
.about-portrait{
  display:block !important;width:170px !important;height:170px !important;
  max-width:170px !important;max-height:170px !important;
  object-fit:cover !important;border-radius:50% !important;
  margin:24px auto 36px !important;border:3px solid var(--line-strong);
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.about-inner .pull-quote{margin:44px 0;text-align:left;}
.about-inner p{font-size:1.04rem;margin-bottom:20px;}
.legal-meta{
  font-size:0.85rem;color:var(--text-dim);margin-bottom:32px !important;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.legal-check{
  font-size:0.95rem;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;margin-top:30px;line-height:1.5;
}
.about-inner ul{margin:0 0 20px 0;padding-left:22px;}
.about-inner ul li{font-size:1.04rem;margin-bottom:8px;color:var(--text-muted);}
.signature{margin-top:40px;font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem;color:var(--rose);}
.about-inner .closing{text-align:center;margin-top:60px;font-family:'Fraunces',serif;font-size:1.6rem;font-style:italic;color:var(--text);}

/* ================= FOOTER ================= */
footer{padding:70px 0 40px;background:var(--bg);border-top:1px solid var(--line);}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;}
.footer-brand img{height:40px;margin-bottom:14px;}
.footer-brand p{font-size:0.88rem;max-width:260px;}
.footer-license{
  white-space:pre-line;font-size:0.8rem !important;color:var(--text-dim);
  margin-top:14px !important;line-height:1.6;max-width:260px;
}
.footer-col h5{font-family:'Inter';font-size:0.78rem;letter-spacing:0.08em;color:var(--text-dim);margin-bottom:16px;font-weight:600;text-transform:uppercase;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{list-style:none;margin:0;padding:0;}
.footer-col a{display:block;font-size:0.9rem;color:var(--text-muted);text-decoration:none;margin-bottom:10px;transition:color .2s ease;cursor:pointer;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{
  margin-top:60px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.8rem;color:var(--text-dim);
}
.footer-legal-links{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal-links a{color:var(--text-dim);text-decoration:none;font-size:0.8rem;}
.footer-legal-links a:hover{color:var(--text-muted);}
.social-row{display:flex;gap:14px;}
.social-row a{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text-muted);
  transition:border-color .2s ease, color .2s ease;font-size:0.8rem;
}
.social-row a:hover{border-color:var(--text);color:var(--text);}

/* ================= MODALS / DRAWER ================= */
.overlay{
  position:fixed;inset:0;background:rgba(6,5,12,0.72);backdrop-filter:blur(4px);
  z-index:900;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.overlay.open{opacity:1;pointer-events:auto;}

.drawer{
  position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;
  background:var(--bg-soft);border-left:1px solid var(--line);z-index:950;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:24px 24px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.drawer-head h3{font-size:1.3rem;}
.close-x{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.3rem;line-height:1;padding:6px;}
.close-x:hover{color:var(--text);}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px;}
.cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.cart-item .ci-icon{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.cart-item .ci-icon svg{width:24px;height:24px;}
.cart-item .ci-info{flex:1;}
.cart-item h5{font-size:0.96rem;font-weight:500;margin-bottom:4px;}
.cart-item .ci-meta{display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;color:var(--text-dim);}
.qty-ctrl{display:flex;align-items:center;gap:10px;}
.qty-ctrl button{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:0.85rem;
}
.remove-link{background:none;border:none;color:var(--text-dim);font-size:0.78rem;cursor:pointer;text-decoration:underline;padding:0;margin-top:4px;}
.drawer-empty{text-align:center;padding:60px 10px;color:var(--text-dim);}
.drawer-empty a{cursor:pointer;}
.drawer-footer{padding:20px 24px 26px;border-top:1px solid var(--line);}
.subtotal-row{display:flex;justify-content:space-between;margin-bottom:16px;font-family:'Fraunces',serif;font-size:1.2rem;}

.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);width:520px;max-width:92vw;
  max-height:88vh;overflow-y:auto;background:var(--bg-soft);border:1px solid var(--line-strong);
  border-radius:24px;z-index:960;padding:36px;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  box-shadow:var(--shadow);
}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);}
.modal-close{position:absolute;top:18px;right:18px;background:none;border:none;color:var(--text-muted);font-size:1.4rem;cursor:pointer;}
.modal h3{font-size:1.7rem;margin-bottom:8px;}
.modal .sub{color:var(--text-muted);font-size:0.92rem;margin-bottom:26px;}
.choice-row{display:flex;gap:14px;margin-bottom:24px;}
.choice-btn{
  flex:1;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  cursor:pointer;text-align:center;color:var(--text);font-family:'Inter';transition:border-color .2s ease, background .2s ease;
}
.choice-btn.active, .choice-btn:hover{border-color:var(--violet);background:var(--surface-2);}
.choice-btn strong{display:block;font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500;margin-bottom:4px;}
.choice-btn span{font-size:0.8rem;color:var(--text-dim);}

/* ---- Booking: choose experience ---- */
.svc-list{display:flex;flex-direction:column;gap:12px;margin-bottom:6px;}
.svc-card{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--surface);}
.svc-name{font-family:'Fraunces',serif;font-size:1.08rem;color:var(--text);margin-bottom:12px;}
.svc-opts{display:flex;gap:10px;flex-wrap:wrap;}
.svc-opt{
  flex:1;min-width:120px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);font-family:'Inter';font-size:0.86rem;font-weight:600;
  cursor:pointer;transition:border-color .2s ease, background .2s ease;
}
.svc-opt:hover{border-color:var(--violet);background:rgba(130,101,246,0.14);}
.enhancement-note{font-size:0.78rem;color:var(--text-dim);margin-top:20px;line-height:1.6;}
.back-link{background:none;border:none;color:var(--text-dim);font-size:0.82rem;cursor:pointer;padding:0;margin-bottom:14px;text-decoration:underline;}
.back-link:hover{color:var(--text);}

/* ---- Home page teasers ---- */
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.pillar-card{
  border:1px solid var(--line);border-radius:18px;padding:24px 20px;background:var(--surface);text-align:center;
}
.pillar-card .p-icon{width:34px;height:34px;margin:0 auto 14px;}
.pillar-card h4{font-size:1.05rem;font-weight:500;margin-bottom:8px;}
.pillar-card p{font-size:0.85rem;}
.teaser-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:20px;flex-wrap:wrap;}
.teaser-row .section-head{margin-bottom:0;}
.teaser-link{font-size:0.9rem;color:var(--text);text-decoration:underline;white-space:nowrap;}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.mini-card{
  border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--surface);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;
  transition:border-color .25s ease, transform .25s ease;
}
.mini-card:hover{transform:translateY(-4px);border-color:var(--line-strong);}
.mini-card .mc-format{font-size:0.72rem;color:var(--text-dim);}
.mini-card h4{font-size:1.08rem;font-weight:500;}
.mini-card .mc-price{font-family:'Fraunces',serif;color:var(--gold);font-size:1.1rem;margin-top:auto;}
.community-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cmini{
  border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--surface);text-decoration:none;color:inherit;
  transition:border-color .25s ease, transform .25s ease;
}
.cmini:hover{transform:translateY(-4px);border-color:var(--line-strong);}
.cmini .clabel{display:block;margin-bottom:8px;}
.cmini h5{font-size:0.98rem;font-weight:500;font-family:'Fraunces',serif;}
.about-teaser{
  border:1px solid var(--line);border-radius:24px;padding:50px;background:linear-gradient(120deg, rgba(130,101,246,0.1), rgba(230,71,159,0.08));
  text-align:center;
}
.about-teaser .pull-quote{margin-bottom:24px;}

/* ---- pricing preview on offer/facial cards ---- */
.price-preview{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:0.85rem;color:var(--text-muted);
}
.price-preview strong{color:var(--gold);font-family:'Fraunces',serif;font-weight:500;}

/* ---- enhancements note card ---- */
.enh-card{
  margin-top:56px;border:1px solid var(--line);border-radius:20px;padding:28px 32px;
  background:var(--surface);display:flex;gap:20px;align-items:flex-start;
}
.enh-card svg{flex-shrink:0;width:30px;height:30px;margin-top:2px;}
.enh-card h4{font-size:1.02rem;font-weight:500;margin-bottom:8px;}
.enh-card p{font-size:0.9rem;}

/* ---- how it works (shop) ---- */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px;}
.how-step{text-align:center;padding:10px;}
.how-step .hs-num{
  width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:'Fraunces',serif;color:var(--gold);
}
.how-step h4{font-size:1.02rem;font-weight:500;margin-bottom:8px;}
.how-step p{font-size:0.88rem;}

/* ---- about page: ways to enter ---- */
.ways-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;}
.way-link{
  border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;text-decoration:none;color:inherit;
  background:var(--surface);font-size:0.92rem;transition:border-color .2s ease, transform .2s ease;
}
.way-link:hover{transform:translateY(-3px);border-color:var(--line-strong);}

@media (max-width: 900px){
  .pillar-grid{grid-template-columns:repeat(2,1fr);}
  .mini-grid{grid-template-columns:1fr;}
  .community-mini-grid{grid-template-columns:repeat(2,1fr);}
  .how-grid{grid-template-columns:1fr;}
  .ways-grid{grid-template-columns:repeat(2,1fr);}
  .about-teaser{padding:34px 24px;}
}
.field{margin-bottom:16px;}
.field label{display:block;font-size:0.82rem;color:var(--text-dim);margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:10px;font-family:'Inter';font-size:0.92rem;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--gold);outline:none;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.discovery-form{max-width:520px;margin:0 auto;}
.discovery-form .field label{
  display:block;font-family:'Fraunces',serif;font-size:1.05rem;font-weight:500;
  color:var(--text);margin-bottom:4px;
}
.discovery-form .field-hint{
  display:block;font-size:0.82rem;color:var(--text-dim);font-style:italic;margin-bottom:10px;
}
.discovery-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:0;}
@media (max-width:560px){
  .discovery-form .field-row{grid-template-columns:1fr;}
}
.discovery-whatsapp{
  max-width:520px;margin:24px auto 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.discovery-whatsapp span{color:var(--text-muted);font-size:0.92rem;}
@media (max-width:560px){
  .discovery-form .field-row{grid-template-columns:1fr;}
}
.modal .btn-primary{width:100%;justify-content:center;margin-top:6px;}
.form-note{font-size:0.78rem;color:var(--text-dim);margin-top:14px;text-align:center;}
.confirm-box{text-align:center;padding:20px 0 6px;}
.confirm-box .check{
  width:60px;height:60px;border-radius:50%;background:linear-gradient(120deg,var(--violet),var(--magenta));
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.confirm-box h3{margin-bottom:10px;}
.confirm-box p{margin-bottom:22px;}
.hidden{display:none !important;}

/* toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);
  padding:14px 22px;border-radius:999px;font-size:0.88rem;z-index:1000;
  opacity:0;transition:opacity .25s ease, transform .25s ease;pointer-events:none;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;max-width:260px;margin:0 auto;}
  .two-col{grid-template-columns:1fr;gap:40px;}
  .facial-inner{grid-template-columns:1fr;}
  .facial-art{max-width:260px;margin:0 auto;}
  .doorway-grid{grid-template-columns:1fr;}
  .offer-grid{grid-template-columns:1fr;}
  .community-grid{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  nav.links{display:none;}
  .hamburger{display:block;}
}
@media (max-width: 560px){
  .wrap{padding:0 20px;}
  section{padding:64px 0;}
  .shop-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .choice-row{flex-direction:column;}
  .deeper-banner{flex-direction:column;text-align:center;}
  .pdf-row{flex-direction:column;align-items:flex-start;gap:4px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}