/*
 * 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; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* ---------------- Zodiac ---------------- */
.zd-brand{text-align:center;padding:10px 0 0}
.zd-brand img{display:block;margin:0 auto;width:120px;height:120px;filter:drop-shadow(0 0 30px rgba(255,255,255,.14))}
.zd-wordmark{letter-spacing:.5em;font-weight:700;font-size:1rem;margin:10px 0 0 .5em;color:#f5f5f5}
.zd-tag{color:#9ca3af;margin:8px 0 0}

.zd-private{max-width:980px;margin:0 auto}
.zd-eyebrow{letter-spacing:.3em;font-size:.72rem;color:#9ca3af;margin-bottom:10px}
.zd-private h2{font-size:1.9rem;line-height:1.15;margin:0 0 14px;color:#fff}
.zd-private h3{font-size:1.15rem;margin:34px 0 14px;color:#fff}
.zd-lead{color:#c3c6cc;max-width:760px;line-height:1.65;margin:0 0 22px}
.zd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.zd-cards>div{background:#111113;border:1px solid #2a2a30;padding:16px}
.zd-cards b{display:block;color:#fff;margin-bottom:6px}
.zd-cards span{color:#9ca3af;font-size:.9rem;line-height:1.5}
.zd-table{border:1px solid #2a2a30;background:#0d0d0f}
.zd-row{display:grid;grid-template-columns:1fr 1.5fr 1.5fr;gap:0}
.zd-row>span{padding:12px 14px;border-bottom:1px solid #1c1c20;color:#9ca3af;font-size:.9rem;line-height:1.45}
.zd-row>span:first-child{color:#e8e8ea;font-weight:600}
.zd-row>span:last-child{color:#f5f5f5;background:#131316;border-left:1px solid #2a2a30}
.zd-row:last-child>span{border-bottom:0}
.zd-head>span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9ca3af;font-weight:700}
.zd-head>span:last-child{color:#fff}
.zd-note{color:#8a8e96;font-size:.85rem;margin-top:16px}
.zd-note a{color:#fff;text-decoration:underline}
@media(max-width:700px){.zd-row{grid-template-columns:1fr}.zd-row>span:last-child{border-left:0}.zd-head{display:none}}

/* recent purchases popup */
.zd-pop{position:fixed;left:16px;bottom:16px;z-index:2147483000;display:flex;align-items:center;gap:12px;max-width:min(340px,calc(100vw - 32px));
  background:#111113;border:1px solid #33333a;padding:12px 38px 12px 12px;box-shadow:0 14px 40px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.zd-pop.on{opacity:1;transform:none;pointer-events:auto}
.zd-pop-badge{flex:0 0 42px;height:42px;display:grid;place-items:center;background:#fff;color:#000;font-weight:800;font-size:.85rem;letter-spacing:.04em}
.zd-pop-top{color:#fff;font-size:.9rem;font-weight:600;line-height:1.3}
.zd-pop-sub{color:#8d8d96;font-size:.78rem;margin-top:2px}
.zd-pop button{position:absolute;top:4px;right:6px;background:none;border:0;color:#8d8d96;font-size:1.2rem;cursor:pointer;line-height:1;padding:4px 6px}
.zd-pop button:hover{color:#fff}

/* the figure peeking in from the bottom right corner (the element is added by custom.js) */
.zd-zk{position:fixed;right:-5vw;bottom:-6vh;height:90vh;aspect-ratio:833/1044;background:url(https://api.sellauth.com/storage/images/1193989.webp) center/contain no-repeat;
  opacity:.17;pointer-events:none;z-index:1;transform:rotate(-2deg);-webkit-mask-image:linear-gradient(to left,#000 60%,transparent 100%);mask-image:linear-gradient(to left,#000 60%,transparent 100%)}
@media(max-width:820px){.zd-zk{display:none}}