/*
Theme Name:   XtasyXperience
Theme URI:    https://xtasyxperience.com
Description:  Child theme of Storefront for XtasyXperience — luxury intimate wellness. Espresso, gilded, rose noir, rose noir crème, blush, cream. Cormorant Garamond / Inter / IBM Plex Mono.
Author:       Catherine Middelkamp
Author URI:   https://xtasyxperience.com
Template:     storefront
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  xtasyxperience
*/

/* ==========================================================================
   1. BRAND TOKENS
   Change a hex here and it changes everywhere. Nothing below hardcodes colour.
   ========================================================================== */

:root {
  /* Core palette */
  --xx-espresso:          #2B1810;
  --xx-gilded:            #B8956A;
  --xx-rose-noir:         #A5686A;
  --xx-rose-noir-creme:   #D8B6B5;
  --xx-blush:             #EFDBD6;
  --xx-cream:             #FAF3EC;

  /* Derived tones — tints/shades of the six above, no new hues */
  --xx-espresso-soft:     #4A3226;
  --xx-espresso-mute:     #7A6357;
  --xx-gilded-deep:       #9A7A52;
  --xx-gilded-pale:       #E3D3BC;
  --xx-cream-deep:        #F2E7DA;

  /* Semantic roles */
  --xx-bg:                var(--xx-cream);
  --xx-bg-alt:            var(--xx-blush);
  --xx-bg-deep:           var(--xx-espresso);
  --xx-ink:               var(--xx-espresso);
  --xx-ink-soft:          var(--xx-espresso-soft);
  --xx-ink-mute:          var(--xx-espresso-mute);
  --xx-ink-inverse:       var(--xx-cream);
  --xx-accent:            var(--xx-gilded);
  --xx-accent-warm:       var(--xx-rose-noir);
  --xx-rule:              var(--xx-gilded);
  --xx-rule-soft:         var(--xx-gilded-pale);
  --xx-focus:             var(--xx-rose-noir);

  /* Type */
  --xx-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --xx-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --xx-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — 1.25 ratio off a 17px body */
  --xx-t-xs:    0.7222rem;
  --xx-t-sm:    0.8333rem;
  --xx-t-base:  1rem;
  --xx-t-md:    1.1875rem;
  --xx-t-lg:    1.5rem;
  --xx-t-xl:    2rem;
  --xx-t-2xl:   2.75rem;
  --xx-t-3xl:   3.75rem;

  /* Spacing */
  --xx-s-1: 0.375rem;
  --xx-s-2: 0.75rem;
  --xx-s-3: 1.25rem;
  --xx-s-4: 2rem;
  --xx-s-5: 3.25rem;
  --xx-s-6: 5rem;

  /* Signature: the double gilded border */
  --xx-border-outer: 1px;
  --xx-border-gap:   3px;
  --xx-border-inner: 1px;

  --xx-transition: 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* ==========================================================================
   2. FOUNDATION
   ========================================================================== */

body,
body.woocommerce,
.site {
  background-color: var(--xx-bg);
  color: var(--xx-ink);
  font-family: var(--xx-body);
  font-size: var(--xx-t-base);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--xx-rose-noir-creme);
  color: var(--xx-espresso);
}

/* ==========================================================================
   3. TYPOGRAPHY
   Cormorant carries the personality; Inter does the work; Plex Mono is the
   policy/documentation register (shipping notices, ingredient decks, legal).
   ========================================================================== */

h1, h2, h3, .alpha, .beta, .gamma,
.woocommerce-loop-product__title,
.product_title,
.site-title {
  font-family: var(--xx-display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--xx-ink);
}

h1, .alpha { font-size: var(--xx-t-2xl); }
h2, .beta  { font-size: var(--xx-t-xl); }
h3, .gamma { font-size: var(--xx-t-lg); }

h4, h5, h6 {
  font-family: var(--xx-body);
  font-weight: 500;
  font-size: var(--xx-t-md);
  letter-spacing: 0.01em;
  color: var(--xx-ink-soft);
}

.entry-content p { max-width: 68ch; }

a {
  color: var(--xx-accent-warm);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--xx-transition);
}

a:hover,
a:focus { color: var(--xx-espresso); }

:where(a, button, input, select, textarea, .button):focus-visible {
  outline: 2px solid var(--xx-focus);
  outline-offset: 2px;
}

/* --- Tracked uppercase eyebrow ------------------------------------------- */

.xx-eyebrow {
  display: block;
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--xx-gilded-deep);
  margin-bottom: var(--xx-s-2);
}

.xx-eyebrow--rose { color: var(--xx-rose-noir); }

/* --- Mono register: policy, shipping, documentation ---------------------- */

.xx-mono,
.woocommerce-shipping-destination,
.wc-block-components-notice-banner__content code,
.woocommerce-privacy-policy-text,
.xx-policy {
  font-family: var(--xx-mono);
  font-size: var(--xx-t-sm);
  letter-spacing: 0;
  line-height: 1.7;
  color: var(--xx-ink-mute);
}

.xx-policy {
  border-left: 2px solid var(--xx-rule-soft);
  padding: var(--xx-s-2) 0 var(--xx-s-2) var(--xx-s-3);
  margin: var(--xx-s-4) 0;
}

/* --- Crescent divider ---------------------------------------------------- */

.xx-crescent-rule {
  display: flex;
  align-items: center;
  gap: var(--xx-s-3);
  margin: var(--xx-s-5) 0;
  border: 0;
}

.xx-crescent-rule::before,
.xx-crescent-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--xx-rule-soft);
}

.xx-crescent-rule::after,
.xx-crescent-rule::before { min-width: var(--xx-s-4); }

/* ==========================================================================
   4. SIGNATURE — DOUBLE GILDED BORDER
   One accessory, worn well. Reserved for framing: hero, product media,
   the age gate. Do not apply to every card.
   ========================================================================== */

.xx-frame {
  position: relative;
  padding: var(--xx-s-4);
  border: var(--xx-border-outer) solid var(--xx-gilded);
}

.xx-frame::after {
  content: "";
  position: absolute;
  inset: var(--xx-border-gap);
  border: var(--xx-border-inner) solid var(--xx-gilded);
  pointer-events: none;
}

.xx-frame--tight { padding: var(--xx-s-3); }

.xx-frame--dark {
  background: var(--xx-bg-deep);
  color: var(--xx-ink-inverse);
}

.xx-frame--dark h1,
.xx-frame--dark h2,
.xx-frame--dark h3 { color: var(--xx-ink-inverse); }

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  background-color: var(--xx-bg);
  border-bottom: 1px solid var(--xx-rule-soft);
  padding-top: var(--xx-s-3);
  padding-bottom: var(--xx-s-3);
}

.site-header .site-title a {
  font-family: var(--xx-display);
  font-weight: 300;
  font-size: var(--xx-t-lg);
  letter-spacing: 0.04em;
  color: var(--xx-ink);
  text-decoration: none;
}

.site-header .site-description {
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--xx-gilded-deep);
}

.main-navigation ul li a,
.secondary-navigation ul li a {
  font-family: var(--xx-body);
  font-size: var(--xx-t-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--xx-ink-soft);
  padding-top: var(--xx-s-2);
  padding-bottom: var(--xx-s-2);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--xx-rose-noir); }

.site-header-cart .cart-contents { color: var(--xx-ink-soft); }
.site-header-cart .count { color: var(--xx-gilded-deep); }

/* ==========================================================================
   6. BUTTONS
   Primary = espresso on cream. Secondary = gilded hairline. Nothing shouts.
   ========================================================================== */

button,
input[type="button"],
input[type="submit"],
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--xx-body);
  font-size: var(--xx-t-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background-color: var(--xx-espresso);
  color: var(--xx-cream);
  border: 1px solid var(--xx-espresso);
  border-radius: 0;
  padding: 0.9em 1.9em;
  transition: background-color var(--xx-transition), color var(--xx-transition);
}

button:hover,
.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--xx-rose-noir);
  border-color: var(--xx-rose-noir);
  color: var(--xx-cream);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--xx-espresso);
  border-color: var(--xx-espresso);
  color: var(--xx-cream);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--xx-rose-noir);
  border-color: var(--xx-rose-noir);
}

.xx-button-quiet,
.woocommerce a.button.xx-button-quiet {
  background-color: transparent;
  color: var(--xx-ink);
  border-color: var(--xx-gilded);
}

.xx-button-quiet:hover,
.woocommerce a.button.xx-button-quiet:hover {
  background-color: var(--xx-gilded);
  border-color: var(--xx-gilded);
  color: var(--xx-espresso);
}

/* ==========================================================================
   7. WOOCOMMERCE — CATALOGUE
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { text-align: left; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--xx-t-md);
  font-weight: 400;
  letter-spacing: -0.005em;
  padding-top: var(--xx-s-2);
  padding-bottom: var(--xx-s-1);
}

.woocommerce ul.products li.product a img {
  border-radius: 0;
  box-shadow: none;
  background-color: var(--xx-cream-deep);
  margin-bottom: var(--xx-s-2);
  transition: opacity var(--xx-transition);
}

.woocommerce ul.products li.product:hover a img { opacity: 0.88; }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--xx-mono);
  font-size: var(--xx-t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--xx-ink-soft);
}

.woocommerce ul.products li.product .price del { color: var(--xx-ink-mute); }
.woocommerce ul.products li.product .price ins { color: var(--xx-rose-noir); text-decoration: none; }

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background-color: var(--xx-rose-noir);
  color: var(--xx-cream);
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 0.55em 0.9em;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--xx-gilded); }

/* ==========================================================================
   8. WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */

.woocommerce div.product .product_title {
  font-size: var(--xx-t-2xl);
  margin-bottom: var(--xx-s-2);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--xx-t-md);
  color: var(--xx-ink-soft);
  max-width: 52ch;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--xx-rule-soft);
  padding-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 var(--xx-s-3) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--xx-ink-mute);
  padding: var(--xx-s-2) 0;
  border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--xx-ink);
  border-bottom-color: var(--xx-gilded);
}

.woocommerce div.product form.cart div.quantity input.qty {
  font-family: var(--xx-mono);
  border: 1px solid var(--xx-rule-soft);
  border-radius: 0;
  background: var(--xx-cream);
  padding: 0.9em 0.5em;
}

/* Discreet-shipping reassurance block */
.xx-discretion {
  font-family: var(--xx-mono);
  font-size: var(--xx-t-sm);
  color: var(--xx-ink-mute);
  background: var(--xx-blush);
  border-left: 2px solid var(--xx-rose-noir);
  padding: var(--xx-s-3);
  margin: var(--xx-s-4) 0;
  line-height: 1.7;
}

.xx-discretion strong {
  display: block;
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--xx-espresso);
  margin-bottom: var(--xx-s-1);
}

/* ==========================================================================
   9. FORMS, CART, CHECKOUT
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.select2-container .select2-selection--single {
  background-color: #FFFFFF;
  border: 1px solid var(--xx-rule-soft);
  border-radius: 0;
  box-shadow: none;
  color: var(--xx-ink);
  font-family: var(--xx-body);
  font-size: var(--xx-t-base);
  padding: 0.85em 1em;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--xx-gilded);
  outline: 2px solid var(--xx-focus);
  outline-offset: 1px;
}

label,
.woocommerce form .form-row label {
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--xx-ink-mute);
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--xx-rule-soft);
  border-radius: 0;
}

.woocommerce table.shop_table th {
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--xx-ink-mute);
}

.woocommerce table.shop_table td { font-family: var(--xx-mono); font-size: var(--xx-t-sm); }
.woocommerce table.shop_table td.product-name { font-family: var(--xx-body); font-size: var(--xx-t-base); }

.woocommerce-checkout #payment {
  background: var(--xx-cream-deep);
  border-radius: 0;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--xx-cream);
  border-radius: 0;
  font-family: var(--xx-mono);
  font-size: var(--xx-t-sm);
  color: var(--xx-ink-mute);
}

.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--xx-cream); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background-color: var(--xx-cream-deep);
  border-top-color: var(--xx-gilded);
  color: var(--xx-ink);
  border-radius: 0;
  font-size: var(--xx-t-sm);
}

.woocommerce-error { border-top-color: var(--xx-rose-noir); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--xx-gilded); }
.woocommerce-error::before { color: var(--xx-rose-noir); }

/* ==========================================================================
   10. AGE GATE
   Rendered by functions.php. Must work with JS off: the markup is served
   already-visible and only hidden once consent is stored.
   ========================================================================== */

.xx-agegate {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--xx-s-3);
  background: var(--xx-espresso);
}

.xx-agegate__panel {
  max-width: 30rem;
  width: 100%;
  text-align: center;
  background: var(--xx-espresso);
  color: var(--xx-cream);
  padding: var(--xx-s-5) var(--xx-s-4);
  border: 1px solid var(--xx-gilded);
  position: relative;
}

.xx-agegate__panel::after {
  content: "";
  position: absolute;
  inset: var(--xx-border-gap);
  border: 1px solid var(--xx-gilded);
  pointer-events: none;
}

.xx-agegate__mark {
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--xx-s-3);
  display: block;
}

.xx-agegate__title {
  font-family: var(--xx-display);
  font-weight: 300;
  font-size: var(--xx-t-xl);
  color: var(--xx-cream);
  margin: 0 0 var(--xx-s-2);
}

.xx-agegate__body {
  font-family: var(--xx-mono);
  font-size: var(--xx-t-sm);
  color: var(--xx-rose-noir-creme);
  line-height: 1.7;
  margin-bottom: var(--xx-s-4);
}

.xx-agegate__actions {
  display: flex;
  gap: var(--xx-s-2);
  justify-content: center;
  flex-wrap: wrap;
}

.xx-agegate__actions .button { min-width: 8rem; }

.xx-agegate__enter {
  background: var(--xx-gilded);
  border-color: var(--xx-gilded);
  color: var(--xx-espresso);
}

.xx-agegate__enter:hover {
  background: var(--xx-cream);
  border-color: var(--xx-cream);
  color: var(--xx-espresso);
}

.xx-agegate__leave {
  background: transparent;
  border-color: var(--xx-espresso-mute);
  color: var(--xx-rose-noir-creme);
}

.xx-agegate__leave:hover {
  background: transparent;
  border-color: var(--xx-rose-noir);
  color: var(--xx-cream);
}

body.xx-gate-open { overflow: hidden; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--xx-espresso);
  color: var(--xx-rose-noir-creme);
  font-size: var(--xx-t-sm);
  padding-top: var(--xx-s-5);
  padding-bottom: var(--xx-s-4);
}

.site-footer a { color: var(--xx-gilded); }
.site-footer a:hover { color: var(--xx-cream); }

.site-footer .widget-title,
.site-footer h3 {
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--xx-gilded);
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --xx-t-2xl: 2.125rem;
    --xx-t-3xl: 2.5rem;
    --xx-s-5: 2.25rem;
    --xx-s-6: 3rem;
  }

  .xx-frame { padding: var(--xx-s-3); }
  .xx-agegate__panel { padding: var(--xx-s-4) var(--xx-s-3); }
  .woocommerce div.product .product_title { font-size: var(--xx-t-xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------
   Free shipping messaging
   Shipping is built into retail prices, so every order ships free.
   These say so, because nothing else on the site did.
   --------------------------------------------------------------- */

.xx-shipbar {
  background: var(--xx-espresso);
  color: var(--xx-cream);
  font-family: var(--xx-mono);
  font-size: var(--xx-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--xx-s-2) var(--xx-s-3);
  line-height: 1.5;
}

.xx-shipbar span {
  color: var(--xx-gilded-pale);
  padding: 0 0.5em;
}

.xx-ship {
  font-family: var(--xx-mono);
  font-size: var(--xx-t-sm);
  color: var(--xx-ink-mute);
  background: var(--xx-cream-deep);
  border-left: 2px solid var(--xx-gilded);
  padding: var(--xx-s-3);
  margin: var(--xx-s-3) 0;
  line-height: 1.7;
}

.xx-ship strong {
  display: block;
  font-family: var(--xx-body);
  font-size: var(--xx-t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--xx-ink);
  margin-bottom: 0.35em;
}

.xx-ship--tight {
  margin: var(--xx-s-2) 0 0;
}