/*
 * 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
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * 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 / -badges),
 *              .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; }
 * ───────────────────────────────────────────────────────────────────────────
*/

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== ESZAYA ===== */
:root{
  --esz-red:232,17,58;
  --esz-notch:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  --esz-notch-sm:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  --esz-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ambient ground */
html{
  background-image:radial-gradient(120% 60% at 50% 4%,rgba(var(--esz-red),.12),transparent 58%),radial-gradient(90% 50% at 50% 100%,rgba(var(--esz-red),.07),transparent 60%);
  background-attachment:fixed;background-repeat:no-repeat;
}
body::after{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.45;background:repeating-linear-gradient(180deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px);}

/* type */
.sa-hero-title{text-transform:uppercase;letter-spacing:-.035em;line-height:.98;}
.sa-section-title,.sa-hero-title{text-wrap:balance;}
.sa-section-title{letter-spacing:-.02em;}
.sa-navbar-logo{letter-spacing:.16em;text-transform:uppercase;font-weight:700;}

/* eyebrows */
.sa-hero-eyebrow,.sa-section-eyebrow{font-family:var(--esz-mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:rgb(var(--cl-accent));}

/* buttons */
.sa-btn{clip-path:var(--esz-notch-sm);font-family:var(--esz-mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;}

/* cards */
.sa-product-card,.sa-feedback-card{clip-path:var(--esz-notch);transition:transform .18s ease,box-shadow .18s ease;}
.sa-product-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(var(--esz-red),.35);}
.sa-product-card-price{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-weight:700;}
.sa-product-card-stock,.sa-product-card-status{font-family:var(--esz-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;}
.sa-product-card-badges{font-family:var(--esz-mono);letter-spacing:.12em;text-transform:uppercase;}

/* chrome */
.sa-header{border-bottom:1px solid rgba(var(--esz-red),.16);}
.sa-navbar-link,.sa-footer-link{font-family:var(--esz-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;}
.sa-footer{border-top:1px solid rgba(var(--esz-red),.14);}
.sa-breadcrumbs{font-family:var(--esz-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;}

/* surfaces */
.sa-cart-panel,.sa-toast,.sa-searchbar{clip-path:var(--esz-notch);}

::selection{background:rgba(var(--esz-red),.85);color:#0B0306;}
*:focus-visible{outline:2px solid rgb(var(--cl-accent));outline-offset:3px;}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#08090F}
::-webkit-scrollbar-thumb{background:#2A1620}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--esz-red),.55)}

@media (prefers-reduced-motion: reduce){.sa-product-card{transition:none}}
/* ===== ESZAYA PASS 2 ===== */

/* outlined highlight word in headings */
.sa-hero-title .mk{
  color:transparent;
  -webkit-text-stroke:1.5px rgb(var(--cl-accent));
  paint-order:stroke fill;
}
@supports not ((-webkit-text-stroke: 1px red)){ .sa-hero-title .mk{color:rgb(var(--cl-accent));} }

/* hexagon mark before the wordmark */
.sa-navbar-logo{display:inline-flex;align-items:center;gap:.6rem;}
.sa-navbar-logo::before{
  content:'';
  width:1.35em;height:1.35em;flex:none;
  background-color:rgb(var(--cl-accent));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M11 1 21 6.5v9L11 21 1 15.5v-9L11 1Z' fill='none' stroke='black' stroke-width='1.6'/><path d='M11 6.2 16 9v5l-5 2.8L6 14V9l5-2.8Z' fill='black' opacity='.32'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M11 1 21 6.5v9L11 21 1 15.5v-9L11 1Z' fill='none' stroke='black' stroke-width='1.6'/><path d='M11 6.2 16 9v5l-5 2.8L6 14V9l5-2.8Z' fill='black' opacity='.32'/></svg>") center/contain no-repeat;
}

/* no announcement bar */
.sa-announcement{display:none!important;}

/* hero breathing room */
.sa-hero{padding-block:clamp(56px,9vw,120px);}
/* ===== ESZAYA PASS 3 ===== */

.sa-hero{position:relative;}
.esz-horizon{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6;}
.sa-hero > *:not(.esz-horizon){position:relative;z-index:1;}

.esz-emblem{position:relative;width:176px;height:176px;margin:0 auto 2rem;}
.esz-ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--cl-accent),.42);animation:esz-spin 26s linear infinite;}
.esz-ring--inner{inset:26px;animation-duration:18s;animation-direction:reverse;box-shadow:inset 0 0 0 1px rgba(var(--cl-accent),.2);}
.esz-ring i{position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px;background:rgb(var(--cl-accent));}
.esz-ring i:nth-child(1){transform:rotate(0deg) translateY(-88px) rotate(45deg);}
.esz-ring i:nth-child(2){transform:rotate(60deg) translateY(-88px) rotate(45deg);opacity:.75;}
.esz-ring i:nth-child(3){transform:rotate(120deg) translateY(-88px) rotate(45deg);opacity:.5;}
.esz-ring i:nth-child(4){transform:rotate(180deg) translateY(-88px) rotate(45deg);opacity:.75;}
.esz-ring i:nth-child(5){transform:rotate(240deg) translateY(-88px) rotate(45deg);opacity:.5;}
.esz-ring i:nth-child(6){transform:rotate(300deg) translateY(-88px) rotate(45deg);opacity:.75;}
.esz-core{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-heading);font-weight:700;font-size:44px;color:rgb(var(--cl-accent));text-shadow:0 0 34px rgba(var(--cl-accent),.55);}
@keyframes esz-spin{to{transform:rotate(360deg)}}

@media (max-width:560px){
  .esz-emblem{width:132px;height:132px;}
  .esz-ring i:nth-child(1){transform:rotate(0deg) translateY(-66px) rotate(45deg);}
  .esz-ring i:nth-child(2){transform:rotate(60deg) translateY(-66px) rotate(45deg);}
  .esz-ring i:nth-child(3){transform:rotate(120deg) translateY(-66px) rotate(45deg);}
  .esz-ring i:nth-child(4){transform:rotate(180deg) translateY(-66px) rotate(45deg);}
  .esz-ring i:nth-child(5){transform:rotate(240deg) translateY(-66px) rotate(45deg);}
  .esz-ring i:nth-child(6){transform:rotate(300deg) translateY(-66px) rotate(45deg);}
  .esz-core{font-size:34px;}
}

@media (prefers-reduced-motion: reduce){ .esz-ring{animation:none;} }
/* ===== ESZAYA PASS 4: hero rhythm ===== */

.sa-tpl-shop .sa-hero{padding-block:0;}
.sa-tpl-shop .sa-hero > .wrap{padding-top:clamp(26px,3.4vw,52px);padding-bottom:clamp(40px,5vw,68px);}
.sa-tpl-shop .esz-emblem{margin-bottom:20px;}
@media (max-width:640px){ .sa-tpl-shop .sa-hero > .wrap{padding-top:22px;padding-bottom:36px;} }