/* ==========================================================================
   Horsify Store — design system
   --------------------------------------------------------------------------
   Hand-written plain CSS (NOT processed by Tailwind) so it ships reliably
   without an npm build step, and so the storefront can be re-skinned per club
   with zero markup changes.

   CLUBSITE FLOW-THROUGH
   ---------------------
   Every branded colour below reads from a `--theme-*` custom property with a
   Horsify-brand fallback:

       --store-brand: var(--theme-primary, #2E4E3F);

   On the main Horsify platform `--theme-primary` is never declared, so the
   fallback (#2E4E3F Deep Sage Green) wins. On a club subdomain the generated
   `/site-theme.css` declares `--theme-primary` (and friends) on :root, so the
   store automatically inherits the club's brand palette — buttons, prices,
   badges, hero, focus rings and hover states all re-tint with no per-page
   conditionals. Wrap the storefront root in `.store-scope` to activate.
   ========================================================================== */

.store-scope {
    /* Brand ---------------------------------------------------------------- */
    --store-brand: var(--theme-primary, #2E4E3F);
    --store-on-brand: var(--theme-on-primary, #FFFFFF);
    --store-accent: var(--theme-accent, #8A6B14);
    --store-on-accent: var(--theme-on-accent, #FFFFFF);

    /* Brand "ink" — the brand colour used for TEXT / icons / borders / rings.
       In light mode it equals the brand; in dark mode it is lightened (below)
       so brand-coloured text stays legible on dark surfaces. Solid button
       FILLS keep --store-brand; only on-surface brand marks use --store-ink. */
    --store-ink: var(--store-brand);

    /* Derived brand tints (work for any hue via color-mix) ----------------- */
    --store-brand-tint: color-mix(in srgb, var(--store-brand) 8%, transparent);
    --store-brand-tint-strong: color-mix(in srgb, var(--store-brand) 14%, transparent);
    --store-brand-ring: color-mix(in srgb, var(--store-ink) 55%, transparent);
    --store-brand-soft-border: color-mix(in srgb, var(--store-ink) 32%, transparent);

    /* Surfaces / neutrals (light) ------------------------------------------ */
    --store-surface: #FFFFFF;
    --store-surface-sunken: #F6F5F0;      /* warm sandstone wash */
    --store-border: #E4E1D8;
    --store-border-strong: #D6D2C6;
    --store-text: #23291F;
    --store-text-muted: #5C6157;

    /* Shape / depth -------------------------------------------------------- */
    --store-radius-sm: 0.625rem;
    --store-radius: 1rem;
    --store-radius-lg: 1.375rem;
    --store-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .06);
    --store-shadow-lift: 0 18px 40px -18px color-mix(in srgb, var(--store-brand) 40%, rgba(16, 24, 40, .35));
    --store-ease: cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] .store-scope {
    --store-surface: #2D2D2D;
    --store-surface-sunken: #262626;
    --store-border: #3F3F3F;
    --store-border-strong: #4A4A4A;
    --store-text: #F5F5F5;
    --store-text-muted: #A6A6A6;
    /* Lighten the brand toward white so brand-coloured text/icons stay readable
       on dark backgrounds — generically, for Horsify green or any club hue. */
    --store-ink: color-mix(in srgb, var(--store-brand) 52%, #FFFFFF);
    --store-brand-tint: color-mix(in srgb, var(--store-brand) 22%, transparent);
    --store-brand-tint-strong: color-mix(in srgb, var(--store-brand) 32%, transparent);
    --store-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --store-shadow-lift: 0 20px 44px -18px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.store-hero {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background:
        radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--store-brand) 14%, transparent) 0%, transparent 55%),
        radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--store-accent) 16%, transparent) 0%, transparent 50%),
        linear-gradient(135deg, color-mix(in srgb, var(--store-brand) 6%, var(--store-surface)) 0%, var(--store-surface) 70%);
    border-bottom: 1px solid var(--store-border);
}

.store-hero__blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    opacity: .35;
    z-index: -1;
    pointer-events: none;
}
.store-hero__blob--brand { background: var(--store-brand); }
.store-hero__blob--accent { background: var(--store-accent); }

.store-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--store-ink);
    background: var(--store-brand-tint);
    border: 1px solid var(--store-brand-soft-border);
}

/* --------------------------------------------------------------------------
   SURFACES
   -------------------------------------------------------------------------- */
.store-card,
.store-panel {
    background: var(--store-surface);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    box-shadow: var(--store-shadow);
    color: var(--store-text);
}

.store-panel-sunken {
    background: var(--store-surface-sunken);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    color: var(--store-text);
}

/* Product card — premium hover lift + media zoom ---------------------------- */
.store-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--store-surface);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    overflow: hidden;
    box-shadow: var(--store-shadow);
    transition: transform .28s var(--store-ease), box-shadow .28s var(--store-ease), border-color .28s var(--store-ease);
    color: var(--store-text);
}
@media (hover: hover) {
    .store-product-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--store-shadow-lift);
        border-color: var(--store-brand-soft-border);
    }
}
.store-product-card:focus-within {
    border-color: var(--store-ink);
}

.store-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--store-surface-sunken);
}
.store-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--store-ease);
}
@media (hover: hover) {
    .store-product-card:hover .store-media img { transform: scale(1.06); }
}

/* Product title re-tints to the (club) brand on card hover */
.store-product-card h3 a { transition: color .15s var(--store-ease); }
.store-product-card h3 a:hover { color: var(--store-ink); }

.store-media__empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--store-text-muted) 60%, transparent);
}

/* Quick-add — slides up on hover (desktop), always visible on touch --------- */
.store-quick-add {
    position: absolute;
    inset-inline: .625rem;
    bottom: .625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem .75rem;
    border-radius: var(--store-radius-sm);
    background: color-mix(in srgb, var(--store-brand) 92%, transparent);
    color: var(--store-on-brand);
    font-size: .8125rem;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px -6px rgba(16, 24, 40, .5);
    transition: opacity .25s var(--store-ease), transform .25s var(--store-ease), background-color .2s var(--store-ease);
}
.store-quick-add:hover { background: var(--store-brand); filter: brightness(1.08); }
.store-quick-add:disabled { opacity: .6; cursor: not-allowed; }
@media (hover: hover) {
    .store-quick-add {
        opacity: 0;
        transform: translateY(8px);
    }
    .store-product-card:hover .store-quick-add,
    .store-product-card:focus-within .store-quick-add {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   BADGES
   -------------------------------------------------------------------------- */
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    border-radius: .5rem;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px -2px rgba(16, 24, 40, .35);
    white-space: nowrap;
}
.store-badge--sale { background: #C0392B; color: #fff; }
.store-badge--featured { background: var(--store-accent); color: var(--store-on-accent); }
.store-badge--soldout { background: color-mix(in srgb, #23291F 78%, transparent); color: #fff; }
.store-badge--new { background: var(--store-brand); color: var(--store-on-brand); }

/* --------------------------------------------------------------------------
   PRICE
   -------------------------------------------------------------------------- */
.store-price {
    font-weight: 800;
    color: var(--store-ink);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.store-price--lg { font-size: 1.875rem; line-height: 1.1; }
.store-price__compare {
    color: var(--store-text-muted);
    text-decoration: line-through;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.store-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .625rem 1.1rem;
    border-radius: var(--store-radius-sm);
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color .2s var(--store-ease), color .2s var(--store-ease),
        border-color .2s var(--store-ease), filter .2s var(--store-ease), box-shadow .2s var(--store-ease), transform .05s var(--store-ease);
    -webkit-user-select: none;
    user-select: none;
}
.store-btn:focus-visible {
    outline: 2px solid var(--store-ink);
    outline-offset: 2px;
}
.store-btn:disabled,
.store-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
.store-btn--block { width: 100%; }
.store-btn--lg { padding: .9rem 1.4rem; font-size: 1rem; border-radius: var(--store-radius-sm); }

.store-btn--primary {
    background: var(--store-brand);
    color: var(--store-on-brand);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 8px 20px -12px color-mix(in srgb, var(--store-brand) 70%, transparent);
}
.store-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.store-btn--primary:active:not(:disabled) { filter: brightness(.94); transform: translateY(1px); }

.store-btn--outline {
    background: transparent;
    color: var(--store-ink);
    border-color: var(--store-ink);
}
.store-btn--outline:hover:not(:disabled) { background: var(--store-brand-tint); }

.store-btn--soft {
    background: var(--store-brand-tint-strong);
    color: var(--store-ink);
}
.store-btn--soft:hover:not(:disabled) { background: var(--store-brand-tint); }

.store-btn--ghost {
    background: var(--store-surface);
    color: var(--store-text);
    border-color: var(--store-border-strong);
}
.store-btn--ghost:hover:not(:disabled) { border-color: var(--store-ink); color: var(--store-ink); }

.store-btn--accent {
    background: var(--store-accent);
    color: var(--store-on-accent);
}
.store-btn--accent:hover:not(:disabled) { filter: brightness(1.06); }

/* --------------------------------------------------------------------------
   FILTERS / CATEGORIES
   -------------------------------------------------------------------------- */
.store-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    text-align: left;
    padding: .55rem .75rem;
    border-radius: var(--store-radius-sm);
    font-size: .875rem;
    color: var(--store-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color .15s var(--store-ease), color .15s var(--store-ease);
}
.store-filter:hover {
    background: color-mix(in srgb, var(--store-text-muted) 8%, transparent);
    color: var(--store-text);
}
.store-filter--active {
    background: var(--store-brand-tint);
    color: var(--store-ink);
    font-weight: 600;
}
.store-filter:focus-visible {
    outline: 2px solid var(--store-ink);
    outline-offset: 1px;
}

/* Active-filter chips */
.store-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .35rem .3rem .7rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--store-ink);
    background: var(--store-brand-tint);
    border: 1px solid var(--store-brand-soft-border);
}
.store-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--store-brand) 18%, transparent);
    transition: background-color .15s var(--store-ease);
}
.store-chip__x:hover { background: color-mix(in srgb, var(--store-brand) 32%, transparent); }

/* --------------------------------------------------------------------------
   VARIANT OPTIONS
   -------------------------------------------------------------------------- */
.store-option {
    padding: .5rem 1rem;
    border-radius: var(--store-radius-sm);
    border: 1px solid var(--store-border-strong);
    background: var(--store-surface);
    color: var(--store-text);
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
    transition: border-color .15s var(--store-ease), background-color .15s var(--store-ease), color .15s var(--store-ease), box-shadow .15s var(--store-ease);
}
.store-option:hover:not(:disabled) { border-color: var(--store-ink); }
.store-option:focus-visible { outline: 2px solid var(--store-ink); outline-offset: 2px; }
.store-option--selected {
    background: var(--store-brand);
    border-color: var(--store-brand);
    color: var(--store-on-brand);
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--store-brand) 70%, transparent);
}
.store-option:disabled {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   QUANTITY STEPPER
   -------------------------------------------------------------------------- */
.store-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--store-border-strong);
    border-radius: var(--store-radius-sm);
    overflow: hidden;
    background: var(--store-surface);
}
.store-qty__btn {
    width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--store-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color .15s var(--store-ease), color .15s var(--store-ease);
}
.store-qty__btn:hover:not(:disabled) { background: var(--store-brand-tint); color: var(--store-ink); }
.store-qty__btn:disabled { opacity: .4; cursor: not-allowed; }
.store-qty__input {
    width: 3.25rem;
    text-align: center;
    border: 0;
    border-inline: 1px solid var(--store-border);
    background: transparent;
    color: var(--store-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.store-qty__input::-webkit-outer-spin-button,
.store-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.store-qty__input:focus { outline: none; }

/* --------------------------------------------------------------------------
   IMAGE THUMBNAILS
   -------------------------------------------------------------------------- */
.store-thumb {
    aspect-ratio: 1 / 1;
    border-radius: var(--store-radius-sm);
    overflow: hidden;
    border: 1px solid var(--store-border);
    background: var(--store-surface-sunken);
    cursor: pointer;
    transition: border-color .15s var(--store-ease), box-shadow .15s var(--store-ease);
}
.store-thumb img { width: 100%; height: 100%; object-fit: cover; }
.store-thumb:hover { border-color: var(--store-ink); }
.store-thumb--active {
    border-color: var(--store-ink);
    box-shadow: 0 0 0 2px var(--store-ink);
}

/* --------------------------------------------------------------------------
   FORM CONTROLS (themed focus)
   -------------------------------------------------------------------------- */
.store-input {
    width: 100%;
    padding: .6rem .9rem;
    border-radius: var(--store-radius-sm);
    border: 1px solid var(--store-border-strong);
    background: var(--store-surface);
    color: var(--store-text);
    font-size: .9375rem;
    transition: border-color .15s var(--store-ease), box-shadow .15s var(--store-ease);
}
.store-input::placeholder { color: color-mix(in srgb, var(--store-text-muted) 85%, transparent); }
.store-input:focus {
    outline: none;
    border-color: var(--store-ink);
    box-shadow: 0 0 0 3px var(--store-brand-ring);
}

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */
.store-link {
    color: var(--store-ink);
    font-weight: 500;
    text-decoration: none;
    transition: color .15s var(--store-ease);
}
.store-link:hover { filter: brightness(1.1); text-decoration: underline; }
.store-link:focus-visible {
    outline: 2px solid var(--store-ink);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Icon button (e.g. search submit) — theme-neutral resting colour, brand
   hover, and a visible keyboard focus ring. */
.store-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--store-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: var(--store-radius-sm);
    transition: color .15s var(--store-ease);
}
.store-icon-btn:hover { color: var(--store-ink); }
.store-icon-btn:focus-visible {
    outline: 2px solid var(--store-ink);
    outline-offset: 2px;
}

.store-section-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--store-text);
}

/* Brand-coloured text/icon accent (legible in dark via --store-ink). Handy for
   theming existing brand-tinted markup — e.g. section-header icons — so it flows
   through to a club's palette. */
.store-ink-text { color: var(--store-ink) !important; }

/* Brand-tinted background wash — themes existing brand-tinted pills/badges so
   they inherit a club's palette instead of Horsify green. */
.store-tint-bg { background-color: var(--store-brand-tint) !important; }

/* Selectable card (radio-style option cards, e.g. shipping method) */
.store-selectable {
    border: 2px solid var(--store-border-strong);
    border-radius: var(--store-radius-sm);
    transition: border-color .15s var(--store-ease), background-color .15s var(--store-ease);
}
.store-selectable:hover { border-color: var(--store-ink); }
.store-selectable--on {
    border-color: var(--store-ink);
    background: var(--store-brand-tint);
}

/* Small brand-tinted pill (counts, labels) */
.store-soft-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--store-ink);
    background: var(--store-brand-tint);
}

.store-divider { border-top: 1px solid var(--store-border); }

/* Skeleton shimmer (used by loading states) */
.store-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--store-surface-sunken);
}
.store-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--store-text-muted) 12%, transparent), transparent);
    animation: store-shimmer 1.4s infinite;
}
@keyframes store-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .store-skeleton::after { animation: none; }
    .store-product-card, .store-media img, .store-quick-add, .store-btn { transition: none; }
}

/* Floating cart pill */
.store-cart-fab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.1rem;
    border-radius: 9999px;
    background: var(--store-brand);
    color: var(--store-on-brand);
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--store-brand) 65%, rgba(16, 24, 40, .5));
    transition: filter .2s var(--store-ease), transform .2s var(--store-ease);
}
.store-cart-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
.store-cart-fab:focus-visible { outline: 2px solid var(--store-ink); outline-offset: 3px; }
.store-cart-fab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    border-radius: 9999px;
    background: color-mix(in srgb, #ffffff 28%, transparent);
    font-size: .75rem;
    font-weight: 800;
}