/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ──────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ────────────────────────────────────────────────────────────────────────────
*/

/* ==========================================================================
   Souls One: Marble's own pages (navbar, footer, product, cart, account)
   in the Souls One look. The souls-* sections are styled by souls.css.
   Tokens (--g, --bg, --skew, --font-display ...) come from souls.css :root.
   ========================================================================== */

/* The fixed background layer (souls-bg.njk) sits behind the page, so body stays clear. */
html { background-color: var(--bg) !important; }
body.souls-theme { background: transparent; overflow-x: clip; }
body.souls-theme ::selection { color: var(--ink); background: var(--g); }

/* Headings: the logo's wide, heavy, uppercase letterforms. */
.souls-theme h1,
.souls-theme h2,
.souls-theme h3,
.souls-theme .font-heading {
  font-family: var(--font-display);
  font-stretch: 150%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.souls-theme h1 { font-size: clamp(26px, 4vw, 48px); line-height: 1.04; }
.souls-theme .souls h1 { font-size: inherit; }

/* Small labels read like the prototype's mono eyebrows. */
.souls-theme .sa-section-eyebrow,
.souls-theme .sa-breadcrumbs {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Header: glass bar with a hairline, wordmark lockup. */
.souls-theme .sa-header { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: rgba(8, 9, 12, 0.72); border-bottom: 1px solid var(--line); }
.souls-brand { color: var(--g); }
.souls-brand__globe { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.souls-brand__mark { height: 14px; width: auto; flex: none; }
.sa-footer .souls-brand__mark { height: 16px; }
.souls-theme .sa-navbar-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Buttons: a parallelogram cut echoes the logo's slant without tilting the label. */
.souls-theme .btn-primary,
.souls-theme .btn-secondary,
.souls-theme .sa-btn,
.souls-theme .sa-add-to-cart {
  --cut: 9px;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  padding-inline: max(1.4rem, 1.25em);
  font-family: var(--font-display);
  font-stretch: 150%;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.souls-theme .btn-primary { background: var(--g); color: var(--ink); }
.souls-theme .btn-primary:hover:not(:disabled) { background: var(--g-hi); }

/* Cards and panels: the prototype's dark panel with a soft green lift on hover. */
.souls-theme .sa-product-card,
.souls-theme .sa-feedback-card {
  background: linear-gradient(180deg, var(--bg-1), rgba(13, 15, 19, 0.7));
  border-color: var(--line);
  transition: border-color 200ms ease, transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .souls-theme .sa-product-card:hover {
    border-color: rgba(var(--g-rgb), 0.45);
    box-shadow: 0 18px 50px -24px rgba(var(--g-rgb), 0.45);
    transform: translateY(-3px);
  }
}
.souls-theme .sa-product-card-price { color: var(--g-hi); font-family: var(--font-display); font-stretch: 150%; font-weight: 800; }

/* Inputs: focus ring in brand green. */
.souls-theme .input:focus,
.souls-theme .input:focus-visible { border-color: rgba(var(--g-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--g-rgb), 0.15); }

/* Home hero fills the screen under the sticky header rather than behind it. */
.sa-souls-hero .hero { min-height: calc(100svh - 72px); padding-top: 24px; }

/* Section anchors land below the sticky header. */
html { scroll-padding-top: 88px; }