/*
 Theme Name: Basel Child
 Template: basel
 Version: 1.0.0
 Text Domain: basel-child
*/

/* =============================================================
   PRIME RATIO — DESIGN SYSTEM v1.0
   Phase 1: Tokens · Typography · Buttons · Forms · Utilities
   ============================================================= */


/* -------------------------------------------------------------
   §1  DESIGN TOKENS
   ------------------------------------------------------------- */

:root {

  /* ── Palette: Neutrals ─────────────────────────────────── */
  --pr-black:          #0A0A0A;
  --pr-charcoal:       #1A1A1A;
  --pr-ink:            #2E2E2E;
  --pr-stone:          #6B6B6B;
  --pr-ash:            #9E9E9E;
  --pr-mist:           #D4D4D4;
  --pr-fog:            #EBEBEB;
  --pr-snow:           #F5F5F5;
  --pr-cream:          #FAFAFA;
  --pr-white:          #FFFFFF;

  /* ── Palette: Accent (warm sand — ≤2 elements per view) ── */
  --pr-accent:         #C4A882;
  --pr-accent-dark:    #A08660;
  --pr-accent-light:   #E8D9C4;

  /* ── Palette: Semantic ─────────────────────────────────── */
  --pr-success:        #3D6B4F;
  --pr-error:          #8B2E2E;
  --pr-warning:        #7A5C2E;

  /* ── Roles ─────────────────────────────────────────────── */
  --pr-bg:             var(--pr-white);
  --pr-surface:        var(--pr-snow);
  --pr-surface-raised: var(--pr-fog);
  --pr-text:           var(--pr-charcoal);
  --pr-text-secondary: var(--pr-stone);
  --pr-text-muted:     var(--pr-ash);
  --pr-text-inverse:   var(--pr-white);
  --pr-border-color:   var(--pr-mist);
  --pr-border-subtle:  var(--pr-fog);

  /* ── Font ──────────────────────────────────────────────── */
  --pr-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── Type scale ────────────────────────────────────────── */
  --pr-text-display-xl:  clamp(48px, 6vw,   80px);
  --pr-text-display-lg:  clamp(36px, 4.5vw, 60px);
  --pr-text-display-md:  clamp(26px, 3vw,   40px);
  --pr-text-h1:          clamp(22px, 2.5vw, 32px);
  --pr-text-h2:          clamp(18px, 1.8vw, 24px);
  --pr-text-h3:          18px;
  --pr-text-body-lg:     17px;
  --pr-text-body:        15px;
  --pr-text-sm:          13px;
  --pr-text-xs:          11px;

  /* ── Weights ───────────────────────────────────────────── */
  --pr-weight-thin:     200;
  --pr-weight-light:    300;
  --pr-weight-regular:  400;
  --pr-weight-medium:   500;
  --pr-weight-semibold: 600;

  /* ── Leading & tracking ────────────────────────────────── */
  --pr-leading-display:  1.05;
  --pr-leading-tight:    1.2;
  --pr-leading-body:     1.65;
  --pr-leading-relaxed:  1.8;
  --pr-tracking-tight:   -0.02em;
  --pr-tracking-normal:   0em;
  --pr-tracking-label:    0.06em;
  --pr-tracking-overline: 0.14em;

  /* ── Spacing (4px grid) ────────────────────────────────── */
  --pr-space-1:   4px;
  --pr-space-2:   8px;
  --pr-space-3:   12px;
  --pr-space-4:   16px;
  --pr-space-5:   20px;
  --pr-space-6:   24px;
  --pr-space-8:   32px;
  --pr-space-10:  40px;
  --pr-space-12:  48px;
  --pr-space-16:  64px;
  --pr-space-20:  80px;
  --pr-space-24:  96px;
  --pr-space-32:  128px;
  --pr-space-40:  160px;

  /* ── Border ────────────────────────────────────────────── */
  --pr-radius-sm:   2px;
  --pr-radius-md:   4px;
  --pr-radius-lg:   8px;
  --pr-radius-full: 9999px;

  /* ── Shadow ────────────────────────────────────────────── */
  --pr-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04);
  --pr-shadow-card:  0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  --pr-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);

  /* ── Motion ────────────────────────────────────────────── */
  --pr-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --pr-ease-in:    cubic-bezier(0.5, 0, 0.75, 0);
  --pr-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --pr-dur-fast:   120ms;
  --pr-dur-base:   220ms;
  --pr-dur-slow:   380ms;

  /* ── Layout ────────────────────────────────────────────── */
  --pr-max-width:        1400px;
  --pr-content-width:    1200px;
  --pr-narrow-width:     720px;
  --pr-gutter:           clamp(20px, 4vw, 80px);
  --pr-header-h:         72px;
  --pr-header-h-mobile:  56px;
}


/* -------------------------------------------------------------
   §2  BASE RESET
   ------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:             var(--pr-font);
  font-size:               var(--pr-text-body);
  font-weight:             var(--pr-weight-regular);
  line-height:             var(--pr-leading-body);
  color:                   var(--pr-text);
  background:              var(--pr-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings:   'kern' 1, 'liga' 1, 'calt' 1;
}

img,
video {
  display:   block;
  max-width: 100%;
  height:    auto;
}

a {
  color:           inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor:      pointer;
  /*
   * NOTE: border/background/padding intentionally omitted.
   * Those properties strip Basel's quantity stepper buttons (.minus, .plus),
   * slider nav, and header icon buttons before Basel's dynamic CSS can
   * restore them. .pr-btn sets all three explicitly on the component.
   */
}

input,
select,
textarea {
  font-family: inherit;
}

p {
  margin: 0 0 var(--pr-space-4);
}

p:last-child {
  margin-bottom: 0;
}


/* -------------------------------------------------------------
   §3  TYPOGRAPHY
   ------------------------------------------------------------- */

/* — Headings — */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family:    var(--pr-font);
  font-weight:    var(--pr-weight-light);
  line-height:    var(--pr-leading-tight);
  letter-spacing: var(--pr-tracking-tight);
  color:          var(--pr-text);
  margin:         0 0 var(--pr-space-4);
}

h1, .h1 { font-size: var(--pr-text-h1); }
h2, .h2 { font-size: var(--pr-text-h2); }

h3, .h3 {
  font-size:   var(--pr-text-h3);
  font-weight: var(--pr-weight-regular);
}

h4, .h4 {
  font-size:      var(--pr-text-body-lg);
  font-weight:    var(--pr-weight-medium);
  letter-spacing: var(--pr-tracking-normal);
}

h5, .h5 {
  font-size:      var(--pr-text-body);
  font-weight:    var(--pr-weight-medium);
  letter-spacing: var(--pr-tracking-normal);
}

h6, .h6 {
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-overline);
  text-transform: uppercase;
}

/* — Display — */
.pr-display-xl {
  font-family:    var(--pr-font);
  font-size:      var(--pr-text-display-xl);
  font-weight:    var(--pr-weight-thin);
  line-height:    var(--pr-leading-display);
  letter-spacing: var(--pr-tracking-tight);
}

.pr-display-lg {
  font-family:    var(--pr-font);
  font-size:      var(--pr-text-display-lg);
  font-weight:    var(--pr-weight-thin);
  line-height:    var(--pr-leading-display);
  letter-spacing: var(--pr-tracking-tight);
}

.pr-display-md {
  font-family:    var(--pr-font);
  font-size:      var(--pr-text-display-md);
  font-weight:    var(--pr-weight-light);
  line-height:    1.15;
  letter-spacing: var(--pr-tracking-tight);
}

/* — Eyebrow / overline — */
.pr-overline {
  font-family:    var(--pr-font);
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  line-height:    1;
  letter-spacing: var(--pr-tracking-overline);
  text-transform: uppercase;
  color:          var(--pr-text-secondary);
}

/* — Label — */
.pr-label-text {
  font-family:    var(--pr-font);
  font-size:      var(--pr-text-sm);
  font-weight:    var(--pr-weight-medium);
  line-height:    1.4;
  letter-spacing: var(--pr-tracking-label);
}

/* — Body variants — */
.pr-body-lg {
  font-size:   var(--pr-text-body-lg);
  line-height: var(--pr-leading-body);
}

.pr-body {
  font-size:   var(--pr-text-body);
  line-height: var(--pr-leading-body);
}

/* — Text utilities — */
.pr-text-primary   { color: var(--pr-text); }
.pr-text-secondary { color: var(--pr-text-secondary); }
.pr-text-muted     { color: var(--pr-text-muted); }
.pr-text-inverse   { color: var(--pr-text-inverse); }
.pr-text-accent    { color: var(--pr-accent); }
.pr-text-error     { color: var(--pr-error); }
.pr-text-success   { color: var(--pr-success); }

.pr-text-sm { font-size: var(--pr-text-sm); line-height: 1.5; }
.pr-text-xs { font-size: var(--pr-text-xs); line-height: 1.4; }

/* — Weight utilities — */
.pr-thin     { font-weight: var(--pr-weight-thin); }
.pr-light    { font-weight: var(--pr-weight-light); }
.pr-regular  { font-weight: var(--pr-weight-regular); }
.pr-medium   { font-weight: var(--pr-weight-medium); }
.pr-semibold { font-weight: var(--pr-weight-semibold); }

/* — Inline link — */
.pr-link {
  color:           var(--pr-text);
  text-decoration: none;
  border-bottom:   1px solid var(--pr-border-color);
  transition:      border-color var(--pr-dur-fast) var(--pr-ease-out),
                   color        var(--pr-dur-fast) var(--pr-ease-out);
}

.pr-link:hover {
  border-bottom-color: var(--pr-text);
}


/* -------------------------------------------------------------
   §4  BUTTON SYSTEM
   ------------------------------------------------------------- */

/* — Base — */
.pr-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--pr-space-2);
  font-family:     var(--pr-font);
  font-size:       var(--pr-text-sm);
  font-weight:     var(--pr-weight-semibold);
  letter-spacing:  var(--pr-tracking-label);
  text-transform:  uppercase;
  line-height:     1;
  padding:         14px var(--pr-space-8);
  min-height:      48px;
  border:          1px solid transparent;
  border-radius:   var(--pr-radius-sm);
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  position:        relative;
  transition:
    background-color var(--pr-dur-fast) var(--pr-ease-out),
    border-color     var(--pr-dur-fast) var(--pr-ease-out),
    color            var(--pr-dur-fast) var(--pr-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.pr-btn:focus-visible {
  outline:        2px solid var(--pr-charcoal);
  outline-offset: 3px;
}

.pr-btn:disabled,
.pr-btn[aria-disabled="true"] {
  opacity:        0.38;
  cursor:         not-allowed;
  pointer-events: none;
}

/* — Primary — */
.pr-btn--primary {
  background:   var(--pr-charcoal);
  color:        var(--pr-white);
  border-color: var(--pr-charcoal);
}

.pr-btn--primary:hover {
  background:   var(--pr-black);
  border-color: var(--pr-black);
  color:        var(--pr-white);
}

.pr-btn--primary:active {
  background:   var(--pr-ink);
  border-color: var(--pr-ink);
}

/* — Secondary (outlined) — */
.pr-btn--secondary {
  background:   transparent;
  color:        var(--pr-charcoal);
  border-color: var(--pr-charcoal);
}

.pr-btn--secondary:hover {
  background:   var(--pr-charcoal);
  color:        var(--pr-white);
}

.pr-btn--secondary:active {
  background:   var(--pr-black);
  border-color: var(--pr-black);
  color:        var(--pr-white);
}

/* — Ghost — */
.pr-btn--ghost {
  background:    transparent;
  color:         var(--pr-text);
  border-color:  transparent;
  border-bottom: 1px solid var(--pr-border-color);
  border-radius: 0;
  padding-left:  0;
  padding-right: 0;
  min-height:    auto;
  padding-top:   4px;
  padding-bottom: 4px;
}

.pr-btn--ghost:hover {
  border-bottom-color: var(--pr-text);
  background:          transparent;
}

/* — Accent — */
.pr-btn--accent {
  background:   var(--pr-accent);
  color:        var(--pr-white);
  border-color: var(--pr-accent);
}

.pr-btn--accent:hover {
  background:   var(--pr-accent-dark);
  border-color: var(--pr-accent-dark);
  color:        var(--pr-white);
}

/* — Size variants — */
.pr-btn--sm {
  font-size:  var(--pr-text-xs);
  padding:    10px var(--pr-space-5);
  min-height: 40px; /* 36px → 40px: below Apple 44pt minimum but acceptable per MD 40dp */
}

.pr-btn--lg {
  font-size:  var(--pr-text-body);
  padding:    18px var(--pr-space-12);
  min-height: 56px;
}

.pr-btn--full {
  width:   100%;
  display: flex;
}

/* — Loading state — */
.pr-btn.is-loading {
  color:          transparent !important;
  pointer-events: none;
}

.pr-btn.is-loading::after {
  content:       '';
  position:      absolute;
  top:           calc(50% - 7px);
  left:          calc(50% - 7px);
  width:         14px;
  height:        14px;
  border-radius: 50%;
  animation:     pr-spin 0.65s linear infinite;
}

.pr-btn--primary.is-loading::after,
.pr-btn--accent.is-loading::after {
  border:           2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
}

.pr-btn--secondary.is-loading::after,
.pr-btn--ghost.is-loading::after {
  border:           2px solid var(--pr-fog);
  border-top-color: var(--pr-charcoal);
}

@keyframes pr-spin {
  to { transform: rotate(360deg); }
}

/* — WooCommerce button overrides — */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-family:     var(--pr-font) !important;
  font-size:       var(--pr-text-sm) !important;
  font-weight:     var(--pr-weight-semibold) !important;
  letter-spacing:  var(--pr-tracking-label) !important;
  text-transform:  uppercase !important;
  line-height:     1 !important;
  padding:         14px var(--pr-space-8) !important;
  min-height:      48px !important;
  background:      var(--pr-charcoal) !important;
  color:           var(--pr-white) !important;
  border:          1px solid var(--pr-charcoal) !important;
  border-radius:   var(--pr-radius-sm) !important;
  text-decoration: none !important;
  box-shadow:      none !important;
  transition:
    background-color var(--pr-dur-fast) var(--pr-ease-out),
    border-color     var(--pr-dur-fast) var(--pr-ease-out) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
  background:   var(--pr-black) !important;
  border-color: var(--pr-black) !important;
  color:        var(--pr-white) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background:   var(--pr-charcoal) !important;
  border-color: var(--pr-charcoal) !important;
}

/* — WooCommerce quantity stepper exclusion —
 * Basel renders steppers as <button class="minus"> / <button class="plus"> —
 * NOT .button class. Exclusion is belt-and-suspenders in case a plugin
 * or future Basel version adds .button to stepper elements.
 * Resets must use !important to beat any .woocommerce button.button rule
 * that might accidentally match. */
.woocommerce .quantity .minus,
.woocommerce .quantity .plus {
  display:         unset !important;
  min-height:      unset !important;
  padding:         unset !important;
  font-size:       unset !important;
  font-weight:     unset !important;
  letter-spacing:  normal !important;
  text-transform:  none !important;
  line-height:     unset !important;
  background:      unset !important;
  border:          unset !important;
  border-radius:   unset !important;
  box-shadow:      none !important;
}


/* -------------------------------------------------------------
   §5  FORM SYSTEM
   ------------------------------------------------------------- */

/* — Field wrapper — */
.pr-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--pr-space-2);
}

/* — Label — */
.pr-field__label,
.woocommerce-checkout .form-row > label,
.woocommerce form .form-row > label {
  display:        block;
  font-family:    var(--pr-font);
  font-size:      var(--pr-text-xs) !important;
  font-weight:    var(--pr-weight-semibold) !important;
  letter-spacing: var(--pr-tracking-overline) !important;
  text-transform: uppercase !important;
  color:          var(--pr-text-secondary);
  margin-bottom:  var(--pr-space-1) !important;
  line-height:    1.4;
}

/* — Input & textarea base — */
.pr-input,
.pr-textarea {
  width:        100%;
  font-family:  var(--pr-font);
  font-size:    var(--pr-text-body);
  font-weight:  var(--pr-weight-regular);
  color:        var(--pr-text);
  background:   var(--pr-white);
  border:       1px solid var(--pr-border-color);
  border-radius: var(--pr-radius-sm);
  padding:      12px var(--pr-space-4);
  min-height:   48px;
  line-height:  var(--pr-leading-tight);
  outline:      none;
  transition:
    border-color var(--pr-dur-fast) var(--pr-ease-out),
    box-shadow   var(--pr-dur-fast) var(--pr-ease-out);
  -webkit-appearance: none;
  appearance:   none;
}

.pr-input:focus,
.pr-textarea:focus {
  border-color: var(--pr-charcoal);
  box-shadow:   0 0 0 3px rgba(26, 26, 26, 0.08);
}

.pr-input::placeholder,
.pr-textarea::placeholder {
  color: var(--pr-text-muted);
}

.pr-input--error {
  border-color: var(--pr-error) !important;
}

.pr-input--error:focus {
  box-shadow: 0 0 0 3px rgba(139, 46, 46, 0.08) !important;
}

.pr-textarea {
  min-height: 120px;
  resize:     vertical;
}

/* — Select — */
.pr-select {
  width:               100%;
  font-family:         var(--pr-font);
  font-size:           var(--pr-text-body);
  font-weight:         var(--pr-weight-regular);
  color:               var(--pr-text);
  background-color:    var(--pr-white);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  border:              1px solid var(--pr-border-color);
  border-radius:       var(--pr-radius-sm);
  padding:             12px 40px 12px var(--pr-space-4);
  min-height:          48px;
  outline:             none;
  cursor:              pointer;
  transition:
    border-color var(--pr-dur-fast) var(--pr-ease-out),
    box-shadow   var(--pr-dur-fast) var(--pr-ease-out);
  -webkit-appearance: none;
  appearance:         none;
}

.pr-select:focus {
  border-color: var(--pr-charcoal);
  box-shadow:   0 0 0 3px rgba(26, 26, 26, 0.08);
}

/* — WooCommerce form field overrides —
 * Explicit type list only: text/email/tel/password/textarea.
 * input[type="number"] deliberately excluded — catches quantity inputs
 * on product/cart pages and custom plugin number fields that need
 * native sizing. The WooCommerce qty input lives in .quantity not
 * .form-row, so the selectors below are already safe, but explicit
 * exclusion prevents future regression. */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row textarea {
  font-family:   var(--pr-font) !important;
  font-size:     var(--pr-text-body) !important;
  font-weight:   var(--pr-weight-regular) !important;
  color:         var(--pr-text) !important;
  background:    var(--pr-white) !important;
  border:        1px solid var(--pr-border-color) !important;
  border-radius: var(--pr-radius-sm) !important;
  padding:       12px var(--pr-space-4) !important;
  min-height:    48px !important;
  box-shadow:    none !important;
  outline:       none !important;
  transition:
    border-color var(--pr-dur-fast) var(--pr-ease-out),
    box-shadow   var(--pr-dur-fast) var(--pr-ease-out) !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--pr-charcoal) !important;
  box-shadow:   0 0 0 3px rgba(26, 26, 26, 0.08) !important;
}

.woocommerce .form-row.woocommerce-invalid input,
.woocommerce .form-row.woocommerce-invalid select {
  border-color: var(--pr-error) !important;
}

/* — Checkbox & radio — */
.pr-check,
.pr-radio {
  display:     flex;
  align-items: flex-start;
  gap:         var(--pr-space-3);
  cursor:      pointer;
}

.pr-check input[type="checkbox"],
.pr-radio input[type="radio"] {
  flex-shrink:  0;
  width:        18px;
  height:       18px;
  margin:       1px 0 0;
  border:       1px solid var(--pr-border-color);
  border-radius: var(--pr-radius-sm);
  background:   var(--pr-white);
  cursor:       pointer;
  transition:
    border-color var(--pr-dur-fast) var(--pr-ease-out),
    background   var(--pr-dur-fast) var(--pr-ease-out);
  -webkit-appearance: none;
  appearance:   none;
}

.pr-radio input[type="radio"] {
  border-radius: 50%;
}

.pr-check input[type="checkbox"]:checked {
  background-color:    var(--pr-charcoal);
  border-color:        var(--pr-charcoal);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M1 4l3 3 6-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
}

.pr-radio input[type="radio"]:checked {
  background:  var(--pr-white);
  border-color: var(--pr-charcoal);
  border-width: 2px;
  box-shadow:   inset 0 0 0 3px var(--pr-charcoal);
}

.pr-check input[type="checkbox"]:focus-visible,
.pr-radio input[type="radio"]:focus-visible {
  outline:        2px solid var(--pr-charcoal);
  outline-offset: 2px;
}

/* — Hint & error text — */
.pr-field__hint {
  font-size:   var(--pr-text-xs);
  color:       var(--pr-text-muted);
  line-height: 1.4;
}

.pr-field__error {
  font-size:   var(--pr-text-xs);
  font-weight: var(--pr-weight-medium);
  color:       var(--pr-error);
  line-height: 1.4;
}

/* — WooCommerce notices — */
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  border-radius: var(--pr-radius-sm);
  font-family:   var(--pr-font);
  font-size:     var(--pr-text-sm);
}

.woocommerce .woocommerce-error   { border-top-color: var(--pr-error)   !important; }
.woocommerce .woocommerce-message { border-top-color: var(--pr-success) !important; }
.woocommerce .woocommerce-info    { border-top-color: var(--pr-accent)  !important; }


/* -------------------------------------------------------------
   §6  LAYOUT UTILITIES
   ------------------------------------------------------------- */

/* — Containers — */
.pr-container {
  width:     100%;
  max-width: var(--pr-max-width);
  margin:    0 auto;
  padding:   0 var(--pr-gutter);
}

.pr-container--content {
  max-width: var(--pr-content-width);
}

.pr-container--narrow {
  max-width: var(--pr-narrow-width);
}

/* — Section spacing — */
.pr-section {
  padding-top:    var(--pr-space-24);
  padding-bottom: var(--pr-space-24);
}

.pr-section--lg {
  padding-top:    var(--pr-space-32);
  padding-bottom: var(--pr-space-32);
}

.pr-section--sm {
  padding-top:    var(--pr-space-12);
  padding-bottom: var(--pr-space-12);
}

@media (max-width: 768px) {
  .pr-section {
    padding-top:    var(--pr-space-16);
    padding-bottom: var(--pr-space-16);
  }

  .pr-section--lg {
    padding-top:    var(--pr-space-20);
    padding-bottom: var(--pr-space-20);
  }

  .pr-section--sm {
    padding-top:    var(--pr-space-8);
    padding-bottom: var(--pr-space-8);
  }
}

/* — Grid — */
.pr-grid {
  display: grid;
  gap:     var(--pr-space-6);
}

.pr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pr-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .pr-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pr-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .pr-grid--2,
  .pr-grid--3,
  .pr-grid--4 { grid-template-columns: 1fr; }
}

/* — Flex helpers — */
.pr-flex          { display: flex; }
.pr-flex-center   { display: flex; align-items: center; justify-content: center; }
.pr-flex-between  { display: flex; align-items: center; justify-content: space-between; }
.pr-flex-col      { display: flex; flex-direction: column; }
.pr-items-center  { align-items: center; }
.pr-gap-2         { gap: var(--pr-space-2); }
.pr-gap-4         { gap: var(--pr-space-4); }
.pr-gap-6         { gap: var(--pr-space-6); }
.pr-gap-8         { gap: var(--pr-space-8); }


/* -------------------------------------------------------------
   §7  SURFACE & BORDER UTILITIES
   ------------------------------------------------------------- */

.pr-bg-white      { background: var(--pr-white); }
.pr-bg-snow       { background: var(--pr-snow); }
.pr-bg-fog        { background: var(--pr-fog); }
.pr-bg-dark       { background: var(--pr-charcoal); color: var(--pr-white); }
.pr-bg-black      { background: var(--pr-black); color: var(--pr-white); }

.pr-border        { border: 1px solid var(--pr-border-color); }
.pr-border-b      { border-bottom: 1px solid var(--pr-border-color); }
.pr-border-t      { border-top: 1px solid var(--pr-border-color); }
.pr-radius-sm     { border-radius: var(--pr-radius-sm); }
.pr-radius-md     { border-radius: var(--pr-radius-md); }

.pr-shadow-sm     { box-shadow: var(--pr-shadow-sm); }
.pr-shadow-card   { box-shadow: var(--pr-shadow-card); }


/* -------------------------------------------------------------
   §8  SPACING UTILITIES
   ------------------------------------------------------------- */

.pr-mt-2  { margin-top:    var(--pr-space-2);  }
.pr-mt-4  { margin-top:    var(--pr-space-4);  }
.pr-mt-6  { margin-top:    var(--pr-space-6);  }
.pr-mt-8  { margin-top:    var(--pr-space-8);  }
.pr-mt-12 { margin-top:    var(--pr-space-12); }
.pr-mb-2  { margin-bottom: var(--pr-space-2);  }
.pr-mb-4  { margin-bottom: var(--pr-space-4);  }
.pr-mb-6  { margin-bottom: var(--pr-space-6);  }
.pr-mb-8  { margin-bottom: var(--pr-space-8);  }
.pr-mb-12 { margin-bottom: var(--pr-space-12); }

.pr-p-4   { padding:       var(--pr-space-4); }
.pr-p-6   { padding:       var(--pr-space-6); }
.pr-p-8   { padding:       var(--pr-space-8); }
.pr-px-4  { padding-left:  var(--pr-space-4); padding-right:  var(--pr-space-4); }
.pr-px-6  { padding-left:  var(--pr-space-6); padding-right:  var(--pr-space-6); }
.pr-px-8  { padding-left:  var(--pr-space-8); padding-right:  var(--pr-space-8); }
.pr-py-4  { padding-top:   var(--pr-space-4); padding-bottom: var(--pr-space-4); }
.pr-py-6  { padding-top:   var(--pr-space-6); padding-bottom: var(--pr-space-6); }
.pr-py-8  { padding-top:   var(--pr-space-8); padding-bottom: var(--pr-space-8); }


/* -------------------------------------------------------------
   §9  ACCESSIBILITY
   ------------------------------------------------------------- */

/* Screen-reader only */
.pr-sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* Focus ring */
:focus-visible {
  outline:        2px solid var(--pr-charcoal);
  outline-offset: 3px;
}

/* Skip navigation link */
.pr-skip-link {
  position:     absolute;
  top:          -100%;
  left:         var(--pr-space-4);
  z-index:      9999;
  padding:      var(--pr-space-3) var(--pr-space-6);
  background:   var(--pr-charcoal);
  color:        var(--pr-white);
  font-size:    var(--pr-text-sm);
  font-weight:  var(--pr-weight-semibold);
  border-radius: var(--pr-radius-sm);
  transition:   top var(--pr-dur-fast) var(--pr-ease-out);
}

.pr-skip-link:focus {
  top: var(--pr-space-4);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}


/* -------------------------------------------------------------
   §10  MISC HELPERS
   ------------------------------------------------------------- */

.pr-hidden    { display: none; }
.pr-block     { display: block; }
.pr-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-uppercase { text-transform: uppercase; }
.pr-center    { text-align: center; }
.pr-relative  { position: relative; }
.pr-full-w    { width: 100%; }
.pr-full-h    { height: 100%; }

/* Product image aspect ratio (4:5 portrait) */
.pr-aspect-product { aspect-ratio: 4 / 5; }
.pr-object-cover   { object-fit: cover; object-position: center top; }

/* Ratio box (for IE/older browsers without aspect-ratio support) */
.pr-ratio {
  position: relative;
  overflow: hidden;
}

.pr-ratio > * {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.pr-ratio--4-5  { padding-bottom: 125%; }
.pr-ratio--1-1  { padding-bottom: 100%; }
.pr-ratio--16-9 { padding-bottom: 56.25%; }

/* Hairline divider */
.pr-divider {
  border:     none;
  border-top: 1px solid var(--pr-border-color);
  margin:     0;
}

/* Subtle divider */
.pr-divider--subtle {
  border-top-color: var(--pr-border-subtle);
}

/* Badge */
.pr-badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-label);
  text-transform: uppercase;
  padding:        3px 8px;
  border-radius:  var(--pr-radius-sm);
  line-height:    1.4;
}

.pr-badge--default { background: var(--pr-fog);          color: var(--pr-ink); }
.pr-badge--dark    { background: var(--pr-charcoal);     color: var(--pr-white); }
.pr-badge--accent  { background: var(--pr-accent-light); color: var(--pr-accent-dark); }
.pr-badge--new     { background: var(--pr-black);        color: var(--pr-white); }


/* -------------------------------------------------------------
   §11  TYPOGRAPHY OVERRIDE — INTER ENFORCEMENT
   -------------------------------------------------------------
   Basel's dynamic CSS outputs font-family declarations using
   high-specificity selectors (e.g. html .website-wrapper ...,
   html .single-product-page .entry-summary .entry-title).
   That CSS loads either as a file at wp_enqueue_scripts priority
   100001 or inline at wp_head priority 200 — both appear after
   our child <link> tag in the HTML, so equal-specificity rules
   in Basel's output win the cascade.

   Solution: match Basel's specificity by using the same html
   prefix, then scope to font-family only via !important.
   We do NOT override font-size, line-height, color, etc. —
   those remain under Basel's Typography panel control.

   xts-google-fonts is dequeued in functions.php, so Karla/Lora/
   Lato never load. These overrides ensure Inter is applied
   rather than letting the browser fall back to system sans-serif.
   ------------------------------------------------------------- */

/* — Base text — */
html body,
html p,
html li,
html td,
html th,
html dt,
html dd,
html blockquote,
html figcaption,
html address,
html label,
html input,
html textarea,
html select,
html button,
html .entry-content {
  font-family: var(--pr-font) !important;
}

/* — Headings — */
html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
  font-family: var(--pr-font) !important;
}

/* — Basel page-level heading selectors — */
html .page-title > .container .entry-title,
html .post-single-page .entry-title {
  font-family: var(--pr-font) !important;
}

/* — WooCommerce product selectors — */
html .product.product-grid-item .product-title a,
html .single-product-page .entry-summary .entry-title {
  font-family: var(--pr-font) !important;
}

/* — Basel navigation selectors — */
html .website-wrapper .basel-navigation.main-nav .menu > .menu-item > a,
html .website-wrapper .basel-navigation.main-nav .menu > .menu-item:hover > a,
html .website-wrapper .basel-navigation.main-nav .menu > .menu-item.current-menu-item > a,
html .website-wrapper .basel-navigation .menu-item-design-full-width .sub-menu-dropdown .sub-menu > li > a,
html .website-wrapper .basel-navigation .menu-item-design-sized .sub-menu-dropdown .sub-menu > li > a,
html .website-wrapper .basel-navigation .menu-item-design-default .sub-menu-dropdown li a,
html .mobile-nav .site-mobile-menu > li > a,
html .mobile-nav .site-mobile-menu .sub-menu li a,
html .header-categories .mega-navigation .menu-opener,
html .basel-navigation.categories-menu-dropdown .menu > .menu-item > a {
  font-family: var(--pr-font) !important;
}


/* =============================================================
   §12  HOMEPAGE — PHASE 2
   Five sections: Hero · Product Split · Comparison ·
   Material Story · Email Capture
   ============================================================= */


/* -------------------------------------------------------------
   §12.1  HERO
   Full-viewport brand statement with dual direct-to-product CTAs.
   Background image set via WPBakery Row Settings → Design Options.
   Gradient overlay applied via ::before pseudo-element.
   ------------------------------------------------------------- */

.pr-hero {
  position:   relative;
  display:    flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100dvh;
  overflow:   hidden;
}

/* Strip WPBakery's default row padding */
.pr-hero.vc_row {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  margin-left:    0 !important;
  margin-right:   0 !important;
}

/* Dark gradient overlay — lifts text off image */
.pr-hero::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    25%,
    rgba(0, 0, 0, 0.45) 65%,
    rgba(0, 0, 0, 0.70) 100%
  );
  z-index:        1;
  pointer-events: none;
}

/* Content sits above the overlay */
.pr-hero > .vc_row-full-width,
.pr-hero > .vc_column_container {
  z-index:  2;
  position: relative;
}

.pr-hero__inner {
  position:   relative;
  z-index:    2;
  padding:    var(--pr-space-16) var(--pr-gutter) var(--pr-space-20);
  max-width:  640px;
}

.pr-hero__eyebrow {
  display:        block;
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-overline);
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.70);
  margin-bottom:  var(--pr-space-4);
  line-height:    1;
}

.pr-hero__headline {
  font-size:      clamp(2rem, 4.5vw, 3.25rem);
  font-weight:    var(--pr-weight-light);
  line-height:    1.1;
  letter-spacing: var(--pr-tracking-tight);
  color:          var(--pr-white);
  margin:         0 0 var(--pr-space-4);
}

.pr-hero__sub {
  font-size:    var(--pr-text-body-lg);
  font-weight:  var(--pr-weight-light);
  color:        rgba(255, 255, 255, 0.72);
  line-height:  var(--pr-leading-body);
  margin:       0 0 var(--pr-space-10);
}

.pr-hero__ctas {
  display:     flex;
  gap:         var(--pr-space-3);
  flex-wrap:   wrap;
  align-items: center;
}

/* Hero CTA — primary: white fill */
.pr-hero__ctas .pr-btn--primary {
  background:   var(--pr-white);
  color:        var(--pr-charcoal);
  border-color: var(--pr-white);
}

.pr-hero__ctas .pr-btn--primary:hover {
  background:   var(--pr-cream);
  border-color: var(--pr-cream);
  color:        var(--pr-charcoal);
}

/* Hero CTA — secondary: white outline */
.pr-hero__ctas .pr-btn--secondary {
  background:   transparent;
  color:        var(--pr-white);
  border-color: rgba(255, 255, 255, 0.65);
}

.pr-hero__ctas .pr-btn--secondary:hover {
  background:   rgba(255, 255, 255, 0.15);
  border-color: var(--pr-white);
  color:        var(--pr-white);
}

@media (max-width: 768px) {
  .pr-hero__inner {
    padding:    var(--pr-space-12) var(--pr-space-5) var(--pr-space-16);
    max-width:  100%;
  }

  .pr-hero__headline {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .pr-hero__sub {
    font-size:     var(--pr-text-body);
    margin-bottom: var(--pr-space-8);
  }

  .pr-hero__ctas {
    flex-direction: column;
    gap:            var(--pr-space-3);
  }

  .pr-hero__ctas .pr-btn {
    width:   100%;
    display: flex;
  }
}


/* -------------------------------------------------------------
   §12.2  PRODUCT SPLIT
   Edge-to-edge two-column product cards, no outer padding.
   Each card: image → badge → name → descriptor → CTA.
   ------------------------------------------------------------- */

/* Row: strip all WPBakery padding so images bleed to edges */
.pr-product-split.vc_row {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  margin-left:    0 !important;
  margin-right:   0 !important;
}

.pr-product-split .vc_column-inner {
  padding-left:  0 !important;
  padding-right: 0 !important;
  padding-top:   0 !important;
}

/* Divider between the two columns on desktop */
.pr-product-split .vc_col-sm-6:first-child {
  border-right: 1px solid var(--pr-border-color);
}

.pr-product-card {
  display:        flex;
  flex-direction: column;
  height:         100%;
}

.pr-product-card__img {
  display:  block;
  overflow: hidden;
  flex-shrink: 0;
}

.pr-product-card__img img {
  width:            100%;
  aspect-ratio:     4 / 5;
  object-fit:       cover;
  object-position:  center top;
  display:          block;
  transition:       transform var(--pr-dur-slow) var(--pr-ease-out);
}

.pr-product-card:hover .pr-product-card__img img {
  transform: scale(1.03);
}

.pr-product-card__body {
  padding:        var(--pr-space-8) var(--pr-space-8) var(--pr-space-10);
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            var(--pr-space-3);
}

.pr-product-card__badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-label);
  text-transform: uppercase;
  color:          var(--pr-text-secondary);
  border:         1px solid var(--pr-border-color);
  padding:        4px 10px;
  border-radius:  var(--pr-radius-sm);
  align-self:     flex-start;
  line-height:    1.4;
}

.pr-product-card__name {
  font-size:      var(--pr-text-h2);
  font-weight:    var(--pr-weight-light);
  letter-spacing: var(--pr-tracking-tight);
  color:          var(--pr-text);
  margin:         0;
  line-height:    var(--pr-leading-tight);
}

.pr-product-card__desc {
  font-size:   var(--pr-text-sm);
  color:       var(--pr-text-secondary);
  line-height: var(--pr-leading-body);
  margin:      0;
  flex:        1;
}

.pr-product-card__cta {
  margin-top: var(--pr-space-6);
  align-self: flex-start;
}

@media (max-width: 768px) {
  /* Columns stack: kill right border, add bottom border */
  .pr-product-split .vc_col-sm-6:first-child {
    border-right:  none;
    border-bottom: 1px solid var(--pr-border-color);
  }

  .pr-product-card__body {
    padding: var(--pr-space-6) var(--pr-space-5) var(--pr-space-8);
  }

  .pr-product-card__cta .pr-btn {
    width:   100%;
    display: flex;
  }
}


/* -------------------------------------------------------------
   §12.3  COMPARISON TABLE
   "Which Tee Is Right For You?"
   CSS grid: 3 columns (label | essential | heavyweight).
   Raw HTML element inside WPBakery — no WPBakery table widget.
   ------------------------------------------------------------- */

.pr-comparison {
  background:     var(--pr-surface);
  padding-top:    var(--pr-space-24);
  padding-bottom: var(--pr-space-24);
}

.pr-comparison__header {
  text-align:    center;
  margin-bottom: var(--pr-space-12);
  padding:       0 var(--pr-gutter);
}

.pr-comparison__eyebrow {
  display:        block;
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-overline);
  text-transform: uppercase;
  color:          var(--pr-text-secondary);
  margin-bottom:  var(--pr-space-3);
}

.pr-comparison__heading {
  font-size:      clamp(1.5rem, 3vw, 2.25rem);
  font-weight:    var(--pr-weight-light);
  letter-spacing: var(--pr-tracking-tight);
  color:          var(--pr-text);
  margin:         0 0 var(--pr-space-3);
  line-height:    var(--pr-leading-tight);
}

.pr-comparison__sub {
  font-size:   var(--pr-text-sm);
  color:       var(--pr-text-secondary);
  margin:      0;
  line-height: var(--pr-leading-body);
}

/* Grid container */
.pr-comparison__table {
  display:               grid;
  grid-template-columns: 1.75fr 1fr 1fr;
  max-width:             880px;
  margin:                0 auto;
  padding:               0 var(--pr-gutter);
  border-top:            1px solid var(--pr-border-color);
}

/* Top-left empty cell */
.pr-comparison__col-header--empty {
  border-bottom: 1px solid var(--pr-border-color);
}

/* Product name column headers */
.pr-comparison__col-header {
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-label);
  text-transform: uppercase;
  color:          var(--pr-text);
  padding:        var(--pr-space-5) var(--pr-space-4);
  border-bottom:  2px solid var(--pr-text);
  text-align:     center;
  line-height:    var(--pr-leading-tight);
}

/* Row label cells */
.pr-comparison__attr {
  font-size:     var(--pr-text-sm);
  font-weight:   var(--pr-weight-medium);
  color:         var(--pr-text-secondary);
  padding:       var(--pr-space-5) var(--pr-space-4);
  border-bottom: 1px solid var(--pr-border-color);
  display:       flex;
  align-items:   center;
}

/* Value cells */
.pr-comparison__val {
  font-size:     var(--pr-text-sm);
  color:         var(--pr-text);
  line-height:   var(--pr-leading-body);
  padding:       var(--pr-space-5) var(--pr-space-4);
  border-bottom: 1px solid var(--pr-border-color);
  text-align:    center;
}

/* Standout value — used for first data row (GSM weights) */
.pr-comparison__val--feature {
  font-size:   var(--pr-text-body-lg);
  font-weight: var(--pr-weight-light);
  color:       var(--pr-text);
}

/* CTA row below table */
.pr-comparison__cta-row {
  display:               grid;
  grid-template-columns: 1.75fr 1fr 1fr;
  max-width:             880px;
  margin:                var(--pr-space-8) auto 0;
  padding:               0 var(--pr-gutter);
}

.pr-comparison__cta-spacer {
  /* Empty cell in attribute-label column */
}

.pr-comparison__cta-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--pr-space-3);
  text-align:     center;
  padding:        0 var(--pr-space-4);
}

.pr-comparison__cta-col .pr-btn {
  width: 100%;
}

@media (max-width: 768px) {
  .pr-comparison {
    padding-top:    var(--pr-space-16);
    padding-bottom: var(--pr-space-16);
  }

  .pr-comparison__table,
  .pr-comparison__cta-row {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .pr-comparison__attr,
  .pr-comparison__val,
  .pr-comparison__col-header {
    font-size: var(--pr-text-xs);
    padding:   var(--pr-space-4) var(--pr-space-3);
  }

  .pr-comparison__val--feature {
    font-size: var(--pr-text-sm);
  }
}

@media (max-width: 480px) {
  /* CTAs break out of grid — stack full width below table */
  .pr-comparison__cta-row {
    display:        flex;
    flex-direction: column;
    gap:            var(--pr-space-3);
  }

  .pr-comparison__cta-spacer {
    display: none;
  }

  .pr-comparison__cta-col {
    padding: 0;
  }

  .pr-comparison__cta-col .pr-btn {
    min-height: 52px;
  }
}


/* -------------------------------------------------------------
   §12.4  MATERIAL STORY
   Two-column: image (left) | text + specs (right).
   GSM introduced as proof after interest is established.
   ------------------------------------------------------------- */

.pr-material {
  background:     var(--pr-bg);
  padding-top:    var(--pr-space-24);
  padding-bottom: var(--pr-space-24);
}

/* Strip WPBakery column padding — images bleed flush */
.pr-material.vc_row .vc_column-inner {
  padding-left:  0 !important;
  padding-right: 0 !important;
  padding-top:   0 !important;
}

.pr-material__media {
  overflow: hidden;
  height:   100%;
}

.pr-material__media img {
  width:           100%;
  height:          100%;
  min-height:      480px;
  object-fit:      cover;
  object-position: center;
  display:         block;
}

.pr-material__content {
  padding:         var(--pr-space-12) var(--pr-space-16) var(--pr-space-12) var(--pr-space-12);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

.pr-material__eyebrow {
  display:        block;
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-overline);
  text-transform: uppercase;
  color:          var(--pr-text-secondary);
  margin-bottom:  var(--pr-space-4);
  line-height:    1;
}

.pr-material__heading {
  font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight:    var(--pr-weight-light);
  letter-spacing: var(--pr-tracking-tight);
  line-height:    1.1;
  color:          var(--pr-text);
  margin:         0 0 var(--pr-space-5);
}

.pr-material__body {
  font-size:   var(--pr-text-body-lg);
  font-weight: var(--pr-weight-light);
  line-height: var(--pr-leading-body);
  color:       var(--pr-text-secondary);
  margin:      0 0 var(--pr-space-10);
  max-width:   460px;
}

.pr-material__specs {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--pr-space-5) var(--pr-space-8);
  padding-top: var(--pr-space-8);
  border-top:  1px solid var(--pr-border-color);
}

.pr-material__spec-item {
  font-size:      var(--pr-text-xs);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-label);
  text-transform: uppercase;
  color:          var(--pr-text);
}

@media (max-width: 1024px) {
  .pr-material__content {
    padding: var(--pr-space-10) var(--pr-space-8);
  }

  .pr-material__media img {
    min-height: 380px;
  }
}

@media (max-width: 768px) {
  .pr-material {
    padding-top:    var(--pr-space-16);
    padding-bottom: var(--pr-space-16);
  }

  /* WPBakery stacks columns naturally below 768px */
  .pr-material__media img {
    min-height:   0;
    height:       auto;
    aspect-ratio: 3 / 2;
  }

  .pr-material__content {
    padding:   var(--pr-space-8) var(--pr-space-5);
  }

  .pr-material__body {
    font-size: var(--pr-text-body);
    max-width: 100%;
  }
}


/* -------------------------------------------------------------
   §12.5  EMAIL CAPTURE
   Dark section — signals end of primary content.
   No discount language. Copy: drop announcement positioning.
   ------------------------------------------------------------- */

.pr-email-capture {
  background:     var(--pr-charcoal);
  padding-top:    var(--pr-space-24);
  padding-bottom: var(--pr-space-24);
  text-align:     center;
}

/* WPBakery text color inheritance — force white on dark bg */
.pr-email-capture h1,
.pr-email-capture h2,
.pr-email-capture h3,
.pr-email-capture h4,
.pr-email-capture h5,
.pr-email-capture h6,
.pr-email-capture p {
  color: var(--pr-white) !important;
}

.pr-email-capture__heading {
  font-size:      clamp(1.5rem, 3vw, 2rem);
  font-weight:    var(--pr-weight-light);
  letter-spacing: var(--pr-tracking-tight);
  color:          var(--pr-white);
  margin:         0 0 var(--pr-space-3);
  line-height:    var(--pr-leading-tight);
}

.pr-email-capture__sub {
  font-size:   var(--pr-text-sm);
  color:       rgba(255, 255, 255, 0.60);
  margin:      0 auto var(--pr-space-8);
  max-width:   460px;
  line-height: var(--pr-leading-body);
}

.pr-email-form {
  display:     flex;
  gap:         var(--pr-space-3);
  max-width:   480px;
  margin:      0 auto var(--pr-space-4);
  align-items: stretch;
}

.pr-email-form__input {
  flex:             1;
  font-family:      var(--pr-font);
  font-size:        var(--pr-text-sm);
  font-weight:      var(--pr-weight-regular);
  color:            var(--pr-white);
  background:       rgba(255, 255, 255, 0.08);
  border:           1px solid rgba(255, 255, 255, 0.20);
  border-radius:    var(--pr-radius-sm);
  padding:          0 var(--pr-space-4);
  min-height:       48px;
  outline:          none;
  transition:
    border-color var(--pr-dur-fast) var(--pr-ease-out),
    background   var(--pr-dur-fast) var(--pr-ease-out);
  -webkit-appearance: none;
  appearance:       none;
}

.pr-email-form__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.pr-email-form__input:focus {
  border-color: rgba(255, 255, 255, 0.50);
  background:   rgba(255, 255, 255, 0.12);
}

/* Submit — white fill on charcoal background */
.pr-email-form .pr-btn--primary {
  background:   var(--pr-white);
  color:        var(--pr-charcoal);
  border-color: var(--pr-white);
  white-space:  nowrap;
  flex-shrink:  0;
}

.pr-email-form .pr-btn--primary:hover {
  background:   var(--pr-cream);
  border-color: var(--pr-cream);
  color:        var(--pr-charcoal);
}

.pr-email-capture__legal {
  font-size:   var(--pr-text-xs);
  color:       rgba(255, 255, 255, 0.30);
  margin:      0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .pr-email-capture {
    padding-top:    var(--pr-space-16);
    padding-bottom: var(--pr-space-16);
  }
}

@media (max-width: 560px) {
  .pr-email-form {
    flex-direction: column;
    gap:            var(--pr-space-3);
  }

  .pr-email-form__input,
  .pr-email-form .pr-btn--primary {
    width:      100%;
    min-height: 52px;
  }

  .pr-email-form .pr-btn--primary {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}


/* =============================================================
   §13  FRONT-PAGE TEMPLATE — layout (no WPBakery)
   Replaces WPBakery column classes for the custom template.
   ============================================================= */

/* Hero: fallback bg + cover sizing when image is set via inline style */
.pr-hero {
  background-color: var(--pr-charcoal);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}

/* Product split: two equal columns side by side */
.pr-product-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pr-product-split__col {
  display: flex;
  flex-direction: column;
}

.pr-product-split__col:first-child {
  border-right: 1px solid var(--pr-border-color);
}

@media (max-width: 768px) {
  .pr-product-split {
    grid-template-columns: 1fr;
  }

  .pr-product-split__col:first-child {
    border-right:  none;
    border-bottom: 1px solid var(--pr-border-color);
  }
}

/* Material story: two columns, image + content */
.pr-material__layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  max-width:             var(--pr-max-width);
  margin:                0 auto;
}

/* Placeholder when fabric image not yet set in Customizer */
.pr-material__media-placeholder {
  background:  var(--pr-fog);
  min-height:  480px;
  width:       100%;
  display:     block;
}

@media (max-width: 768px) {
  .pr-material__layout {
    grid-template-columns: 1fr;
  }

  .pr-material__media-placeholder {
    min-height: 240px;
  }
}

/* Product card title links */
.pr-product-card__name a {
  color:           inherit;
  text-decoration: none;
}

.pr-product-card__name a:hover {
  color: var(--pr-text);
}


/* =============================================================
   §14  SITE HEADER
   Minimal luxury · sticky · frosted glass
   ============================================================= */

.pr-site-header {
  position:           sticky;
  top:                0;
  z-index:            200;
  height:             var(--pr-header-h);
  background:         rgba(255, 255, 255, 0.94);
  backdrop-filter:    blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:      1px solid var(--pr-border-subtle);
}

.pr-site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  padding:         0 var(--pr-gutter);
  max-width:       var(--pr-max-width);
  margin:          0 auto;
  gap:             var(--pr-space-8);
}

/* — Logo — */
.pr-site-header__logo {
  display:         flex;
  align-items:     center;
  flex-shrink:     0;
  text-decoration: none;
}

.pr-site-header__logo img {
  height:   28px;
  width:    auto;
  display:  block;
}

.pr-site-header__logo-text {
  font-size:      var(--pr-text-sm);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-overline);
  text-transform: uppercase;
  color:          var(--pr-text);
  white-space:    nowrap;
}

/* — Primary nav — */
.pr-site-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.pr-site-header__menu {
  display:     flex;
  align-items: center;
  gap:         var(--pr-space-8);
  list-style:  none;
  margin:      0;
  padding:     0;
}

.pr-site-header__menu a {
  font-size:      var(--pr-text-sm);
  font-weight:    var(--pr-weight-medium);
  letter-spacing: var(--pr-tracking-label);
  text-transform: uppercase;
  color:          var(--pr-text-secondary);
  text-decoration: none;
  transition:     color var(--pr-dur-fast) var(--pr-ease-out);
  white-space:    nowrap;
}

.pr-site-header__menu a:hover,
.pr-site-header__menu .current-menu-item > a,
.pr-site-header__menu .current_page_item > a {
  color: var(--pr-text);
}

/* — Actions (cart) — */
.pr-site-header__actions {
  display:     flex;
  align-items: center;
  gap:         var(--pr-space-5);
  flex-shrink: 0;
}

.pr-cart-link {
  display:         flex;
  align-items:     center;
  gap:             var(--pr-space-2);
  font-size:       var(--pr-text-sm);
  font-weight:     var(--pr-weight-medium);
  letter-spacing:  var(--pr-tracking-label);
  text-transform:  uppercase;
  color:           var(--pr-text);
  text-decoration: none;
  transition:      color var(--pr-dur-fast) var(--pr-ease-out);
}

.pr-cart-link:hover {
  color: var(--pr-charcoal);
}

.pr-cart-link__count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 4px;
  background:      var(--pr-charcoal);
  color:           var(--pr-white);
  border-radius:   var(--pr-radius-full);
  font-size:       10px;
  font-weight:     var(--pr-weight-semibold);
  line-height:     1;
}

/* Hide count bubble when cart is empty */
.pr-cart-link__count[data-count="0"],
.pr-cart-link__count:empty {
  display: none;
}

@media (max-width: 768px) {
  .pr-site-header {
    height: var(--pr-header-h-mobile);
  }

  .pr-site-header__nav {
    display: none;
  }

  .pr-cart-link__label {
    display: none;
  }

  .pr-cart-link__count {
    display: inline-flex !important;
  }
}


/* =============================================================
   §15  SITE FOOTER
   Dark minimal · brand + links + legal
   ============================================================= */

.pr-site-footer {
  background: var(--pr-black);
  color:      var(--pr-white);
  padding:    var(--pr-space-16) var(--pr-gutter);
}

.pr-site-footer__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--pr-space-8);
  max-width:      var(--pr-max-width);
  margin:         0 auto;
}

.pr-site-footer__brand {
  font-size:      var(--pr-text-sm);
  font-weight:    var(--pr-weight-semibold);
  letter-spacing: var(--pr-tracking-overline);
  text-transform: uppercase;
  color:          var(--pr-white);
}

.pr-site-footer__nav {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--pr-space-6);
}

.pr-site-footer__nav a {
  font-size:       var(--pr-text-sm);
  letter-spacing:  var(--pr-tracking-label);
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition:      color var(--pr-dur-fast) var(--pr-ease-out);
}

.pr-site-footer__nav a:hover {
  color: var(--pr-white);
}

.pr-site-footer__legal {
  font-size:   var(--pr-text-xs);
  color:       rgba(255, 255, 255, 0.28);
  margin:      0;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .pr-site-footer__nav {
    flex-direction: column;
    gap:            var(--pr-space-4);
  }
}