/* ==========================================================================
   Design tokens
   ========================================================================== */

@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora-variable.woff2') format('woff2-variations'),
         url('../fonts/lora-variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-variable.woff2') format('woff2-variations'),
         url('../fonts/source-sans-3-variable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand — bottle green + antique gold, warm and saturated, not muted */
    --color-primary: #0F4A36;
    --color-primary-dark: #0A3528;
    --color-primary-light: #E1EFE7;

    --color-gold: #C6901F;
    --color-gold-dark: #9C6F1E;
    --color-gold-light: #FBEFCE;
    --color-gold-text: #8A6D1B;
    --color-accent: var(--color-primary);

    --color-inter: #E8AA21;

    /* Neutrals — warm parchment, not stark white */
    --color-bg: #FEFCF6;
    --color-bg-alt: #F3EEE0;
    --color-bg-sunken: #ECE5D2;
    --color-border: #E4DCC3;
    --color-text: #211E14;
    --color-text-muted: #7A7358;

    /* Semantic */
    --color-danger: #C6371F;
    --color-danger-bg: #FBEAE6;
    --color-success: #1B7A4D;
    --color-success-bg: #E7F5ED;
    --color-warning: #B26A00;

    /* Category colors (mirrors database/seed.sql) */
    --cat-1: #0F4A36;
    --cat-2: #66753A;
    --cat-3: #8A6D1B;
    --cat-4: #C0392B;
    --cat-5: #7D5BA6;
    --cat-6: #177880;

    /* Typography — serif display for character, clean sans for UI */
    --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 2rem;
    --text-xxl: 2.3rem;
    --text-3xl: 3rem;

    /* Spacing (4/8pt rhythm) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius: 0.375rem;
    --radius-sm: 0.3125rem;
    --radius-lg: 0.4375rem;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(20, 24, 21, 0.05);
    --shadow-card: 0 1px 2px rgba(20, 24, 21, 0.04), 0 8px 24px rgba(20, 24, 21, 0.06);
    --shadow-card-hover: 0 2px 4px rgba(20, 24, 21, 0.06), 0 16px 40px rgba(20, 24, 21, 0.10);
    --shadow-modal: 0 24px 64px rgba(11, 62, 44, 0.28);

    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a { color: var(--color-primary); }

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

hr.divider-gold {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-3) 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms var(--ease), border-color 150ms var(--ease),
                color 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(11, 62, 44, 0.2);
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(11, 62, 44, 0.3); transform: translateY(-1px); }

.btn-secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg-alt); border-color: #D8DAD2; }

.btn-danger {
    background: var(--color-bg);
    color: var(--color-danger);
    border-color: #F0D3CC;
}
.btn-danger:hover { background: var(--color-danger-bg); }

.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn-icon { padding-left: var(--space-3); padding-right: var(--space-3); width: 44px; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-group { margin-bottom: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-label { display: block; font-weight: 600; margin-bottom: var(--space-2); font-size: var(--text-sm); }
.form-input {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
textarea.form-input { min-height: auto; }
.form-input--color { padding: var(--space-1); max-width: 6rem; }
.form-help { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.form-help a { color: var(--color-gold-text); font-weight: 600; }
.form-error { color: var(--color-danger); font-size: var(--text-sm); margin-top: var(--space-1); }
.form-error--banner {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}
.form-success { color: var(--color-success); font-size: var(--text-sm); margin-top: var(--space-1); }
.form-success--banner {
    background: var(--color-success-bg);
    color: var(--color-success);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}
.form-static { color: var(--color-text-muted); }
.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.form-image-preview { max-width: 12rem; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.stack-form { max-width: 40rem; }

/* ==========================================================================
   Store (public: catalog, item detail, cart, checkout, confirmation, status)
   ========================================================================== */

.store-page { max-width: 60rem; margin: 0 auto; padding: var(--space-8) var(--space-4); }

/* Checkout: order summary + the checkout form, same width (matching
   .stack-form's own 40rem/640px cap) and centered as a pair, rather than
   the summary panel stretching to .store-page's full width while the
   form sits narrower and left-aligned beneath it. */
.store-checkout { max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
/* Inside this column the ticket fills it, so its edges line up with the
   title instead of sitting 20px in from a 600px cap. */
.store-checkout > .store-ticket { max-width: none; margin: 0; }
.store-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
}
/* Checkout "confirming your order" overlay (assets/scripts/store-checkout.js):
   a Material-style spinner -- an arc that grows and shrinks while it turns,
   drifting between the brand green and gold. */
.pow-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(236, 229, 210, 0.86);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.pow-overlay__card {
    max-width: 22rem;
    width: 100%;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.pow-overlay__title { margin: var(--space-4) 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); }
.pow-overlay__sub { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.pow-spinner { display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto; animation: pow-rotate 1.4s linear infinite; }
.pow-spinner__path {
    stroke: var(--color-primary);
    stroke-linecap: round;
    animation: pow-dash 1.4s ease-in-out infinite, pow-color 5.6s ease-in-out infinite;
}
@keyframes pow-rotate { to { transform: rotate(360deg); } }
@keyframes pow-dash {
    0%   { stroke-dasharray: 1, 150;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
@keyframes pow-color {
    0%, 100% { stroke: var(--color-primary); }
    50%      { stroke: var(--color-gold); }
}
@media (prefers-reduced-motion: reduce) {
    .pow-spinner { animation-duration: 3s; }
    .pow-spinner__path { animation: pow-dash 3s ease-in-out infinite; }
}

.store-header-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store-header-links .btn { white-space: nowrap; }
.store-notice {
    background: var(--color-gold-light);
    color: var(--color-gold-text);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    font-weight: 600;
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}
.store-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease);
}
.store-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); border-color: transparent; }
.store-card__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-2); background: var(--color-bg-alt); }
.store-card__name { font-weight: 600; }
.store-card__price { color: var(--color-gold-text); font-weight: 700; }
.store-card__badge {
    align-self: flex-start;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-danger);
    background: var(--color-danger-bg);
    padding: 0.2em var(--space-2);
    border-radius: var(--radius-pill);
    margin-top: var(--space-1);
}

/* Item page, listing-style: the photo sits on the left (sticky while you
   scroll the details); title, price, the option/add-to-cart box and the
   description are on the right. Stacks on phones. */
.store-item { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-top: var(--space-6); }
.store-item--no-photo { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.store-item__media {
    position: sticky;
    top: 7.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
}
.store-item__photo { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.store-item__info { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.store-item__info .page-title { margin-bottom: 0; }
.store-item__price { font-size: var(--text-xl); color: var(--color-gold-text); font-weight: 700; }
.store-item__buybox .form-group:last-of-type { margin-bottom: 0; }
.store-item__buybox #quantity { max-width: 8rem; }
.store-item__buybox .form-actions { margin-top: var(--space-6); }
.store-item__about { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.store-item__about-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.store-item__description { white-space: pre-line; color: var(--color-text-muted); }
@media (max-width: 768px) {
    .store-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .store-item__media { position: static; }
}

/* "Also like" strip under the item: three catalog-style cards in a row.
   Wider screens only -- it's hidden at the phone breakpoint. */
.store-suggest { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.store-suggest__title { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.store-suggest__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 768px) {
    .store-suggest { display: none; }
}

/* Cart rows: general design borrowed from the "Order" reference -- one
   card, hairline-divided rows, thumbnail + name/variant + price + an
   editable quantity + subtotal + remove. */
.store-cart-rows { padding-block: 0; }
.store-cart-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}
.store-cart-row:last-child { border-bottom: none; }
.store-cart-row__photo {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    flex-shrink: 0;
}
.store-cart-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.store-cart-row__name { font-weight: 600; }
.store-cart-row__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.store-cart-row__price { width: 5rem; flex-shrink: 0; text-align: right; color: var(--color-gold-text); font-weight: 600; }
.store-cart-row__qty { width: 5.5rem; flex-shrink: 0; }
.store-cart-row__qty .form-label { font-size: var(--text-xs); margin-bottom: 0.25rem; }
.store-cart-row__qty .form-input { padding: var(--space-1) var(--space-2); text-align: center; }
.store-cart-row__subtotal { width: 6rem; flex-shrink: 0; text-align: right; font-weight: 700; }
.store-cart-row__remove { flex-shrink: 0; }

@media (max-width: 640px) {
    .store-cart-row { flex-wrap: wrap; }
    .store-cart-row__info { flex: 1 1 auto; min-width: 60%; order: 1; }
    .store-cart-row__photo { order: 0; }
    .store-cart-row__price { order: 2; margin-left: auto; text-align: right; }
    .store-cart-row__qty { order: 3; }
    .store-cart-row__subtotal { order: 4; }
    .store-cart-row__remove { order: 5; margin-left: auto; }
}
/* Payment summary: read-only order recap (no qty input/remove, unlike
   the cart rows this echoes) plus a divided totals line. */
.store-summary-rows { display: flex; flex-direction: column; }
.store-summary-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.store-summary-row:last-child { border-bottom: none; }
.store-summary-row__photo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    flex-shrink: 0;
}
.store-summary-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.store-summary-row__name { font-weight: 600; }
.store-summary-row__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.store-summary-row__price { flex-shrink: 0; font-weight: 600; }

/* Subtotal/discount/total block -- shared markup (not a shared PHP
   partial, matching how store-summary-row itself is already duplicated
   across cart/checkout/confirmation/status/admin order-detail rather than
   extracted) across every page that shows an order or cart total. The
   subtotal/discount rows only render when a discount actually applies;
   otherwise it's just the single grand-total row this replaced. */
.store-totals { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.store-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.store-totals__row--discount { color: var(--color-primary); font-weight: 600; }
.store-totals__row--grand {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}

/* Checkout coupon form: applied-code chip with a remove button, or the
   entry form -- never both at once (see checkout.php). */
.store-coupon { display: flex; flex-direction: column; gap: var(--space-2); }
.store-coupon__applied { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.store-coupon__form { display: flex; align-items: flex-end; gap: var(--space-3); }
.store-coupon__form .form-group { flex: 1; margin-bottom: 0; }

.store-confirmation__qr { width: 12rem; height: 12rem; margin: var(--space-2) auto; display: block; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }

.store-payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    justify-content: center;
    margin: var(--space-4) 0;
}
.store-payment-methods__item { text-align: center; }

/* Ticket-style confirmation/status card -- branded header bar, code
   block with a copy button, gray section-header bars for whichever
   sections actually apply (items always; payment methods only while
   pending). Reference image was for visual direction only -- sections
   we don't have (loyalty points, card-payment detail) aren't here. */
.store-ticket {
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
}
.store-ticket__header {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.store-ticket__header-org { font-weight: 700; }
.store-ticket__header-social { color: #fff; display: flex; }
.store-ticket__header-social .icon { width: 1.3em; height: 1.3em; }
.store-ticket__body { padding: var(--space-6); text-align: center; }
.store-ticket__title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-text); margin-bottom: var(--space-2); }
.store-ticket__intro { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.store-ticket__code-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--color-primary-light);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: var(--space-4) 0;
    flex-wrap: wrap;
}
.store-ticket__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-2xl);
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--color-primary-dark);
}
.store-ticket__actions { display: flex; flex-direction: column; gap: var(--space-3); max-width: 20rem; margin: 0 auto var(--space-6); }
/* Matches .store-ticket__actions' width so this bottom CTA renders the
   same size as the top pair, with space above to separate it from the
   status-help text right before it. */
.store-ticket__cta { max-width: 20rem; margin: var(--space-4) auto 0; }
.store-ticket__section { text-align: left; margin-bottom: var(--space-6); }
.store-ticket__section-label {
    display: inline-block;
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Data tables and status pills (shared by admin tables and the public
   cart page)
   ========================================================================== */

.table-wrap { overflow-x: auto; background: var(--color-bg); border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid var(--color-border); display: inline-block; max-width: 100%; }
.data-table { font-size: var(--text-sm); border-collapse: collapse; }
.data-table th, .data-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.data-table th { color: var(--color-text-muted); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-bg-alt); }
.data-table__actions { display: flex; gap: var(--space-2); }
.data-table__actions form { display: inline; }
.data-table__thumb {
    display: inline-block;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    vertical-align: middle;
    margin-right: var(--space-3);
}
.data-table__name { display: inline-flex; align-items: center; font-weight: 600; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3em var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}
.status-pill--neutral   { background: var(--color-bg-sunken); color: var(--color-text-muted); }
.status-pill--success   { background: var(--color-success-bg); color: var(--color-success); }
.status-pill--warning   { background: var(--color-gold-light); color: var(--color-gold-text); }
.status-pill--danger    { background: var(--color-danger-bg); color: var(--color-danger); }
.status-pill--info      { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    color: #fff;
}
.badge--outline {
    background: var(--color-gold-light);
    color: var(--color-gold-text);
    border: none;
}
.color-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: var(--space-1);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* ==========================================================================
   Site chrome (public)
   ========================================================================== */

.site-header {
    background: rgba(254, 252, 246, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header__inner {
    max-width: 78rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-6);
}
.site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    flex-shrink: 0;
}
.site-header__mark { width: 2.25rem; height: 2.25rem; color: var(--color-gold); flex-shrink: 0; }
.site-header__logo { max-height: 65px; width: auto; flex-shrink: 0; object-fit: contain; }
.site-header__org { font-size: var(--text-xs); line-height: 1.3; color: var(--color-text-muted); }
.site-header__org strong { display: block; color: var(--color-primary); font-weight: 700; letter-spacing: 0.01em; }
.site-header__org em { display: block; font-style: normal; color: var(--color-gold-text); font-weight: 700; letter-spacing: 0.04em; font-size: 0.7rem; }
.site-header__divider { width: 1px; align-self: stretch; background: var(--color-gold); opacity: 0.4; margin: var(--space-3) 0; }
.site-header__titles { display: flex; flex-direction: column; justify-content: center; padding: var(--space-2) 0; min-width: 0; }
/* The header carries each module's title and motto (calendar name, store
   name...). The title is 2rem, easing down on narrow phones. */
.site-header__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 7vw, var(--text-2xl));
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-primary);
}
/* A long motto is capped at two lines (one on mid-size screens); the full
   text is in the element's title tooltip. */
.site-header__tagline {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.site-header__banner {
    flex: 1;
    min-width: 1rem;
    align-self: stretch;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary-light) 60%, var(--color-gold-light) 100%);
    opacity: 0.6;
}
/* Social accounts: 1-3 each get their own row (logo + handle), stacked in a
   column; more than 3 (--icons), mid-size screens and phones collapse to a
   row of just the logos. */
.site-header__socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
    min-width: 0;
}
.site-header__social {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    line-height: 1.3;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.site-header__social .icon { color: var(--color-inter); width: 1.3em; height: 1.3em; }
.site-header__social:hover { color: var(--color-text); background: var(--color-bg-alt); }
.site-header__social-text { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.site-header__socials--icons .site-header__social-text { display: none; }
.site-header__socials--icons .site-header__social { padding: var(--space-2); }
/* Logos-only sit in a 3-per-row grid so even 6 fit inside the header height. */
.site-header__socials--icons { display: grid; grid-template-columns: repeat(3, auto); align-items: center; gap: var(--space-1); }

@media (max-width: 1100px) {
    .site-header__tagline { -webkit-line-clamp: 1; line-clamp: 1; }
    .site-header__socials { display: grid; grid-template-columns: repeat(3, auto); align-items: center; gap: var(--space-1); }
    .site-header__social-text { display: none; }
    .site-header__social { padding: var(--space-2); }
}

@media (max-width: 768px) {
    .site-header__inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0px;
        text-align: center;
        padding: 0 var(--space-4);

        & > div {
            padding: 7px;
        }
    }
    .site-header__banner { display: none; }
    .site-header__divider { display: none; }
    .site-header__tagline { -webkit-line-clamp: 2; line-clamp: 2; }
    .site-header__brand { padding: var(--space-4) 0 0 !important; }
    /* On phones the logos wrap onto their own line, so they run inline. */
    .site-header__socials { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; padding-bottom: var(--space-2); }
    .calendar-legend { display: none; }
}

.site-main {
    max-width: 78rem;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}
/* Public pages sit on the same warm beige as the admin pages, with the
   lighter cards standing out against it (mirrors .admin-body). Muted text
   directly on the beige (footer, store subtitle) is only 3.8:1 with the
   default --color-text-muted, so it is nudged darker here (4.8:1). */
.site-body { background: var(--color-bg-sunken); --color-text-muted: #6A6349; }
.site-footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: var(--space-8);
}

.empty-state { color: var(--color-text-muted); padding: var(--space-8) 0; text-align: center; }

/* Storefront empty states: same message-plus-action pattern as .empty-state,
   with a small icon on top so "there's nothing here" reads as a friendly
   pause instead of a dead end -- kept separate from the plain .empty-state
   used across admin lists/tables so those aren't affected. */
.store-empty-state { text-align: center; padding: var(--space-12) var(--space-4); }
.store-empty-state__icon { width: 3rem; height: 3rem; margin-bottom: var(--space-4); color: var(--color-text-muted); opacity: 0.6; }
.store-empty-state .empty-state { padding: 0 0 var(--space-6); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-title { font-size: var(--text-xxl); margin-bottom: var(--space-4); color: var(--color-primary); }

/* ==========================================================================
   Calendar
   ========================================================================== */

.calendar-page { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-card); border: 1px solid var(--color-border); }

.calendar-toolbar {
    display: grid;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.calendar-nav { display: flex; gap: var(--space-2); grid-area: 1/1; z-index: 1; }
.calendar-nav .btn-secondary { width: 44px; padding: 0; }
.calendar-nav .btn-primary { padding-inline: var(--space-4); }

.calendar-month-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    grid-area: 1/1;
    width: 100%;
    justify-content: center;
}
.calendar-month-label__month {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-primary);
}
.calendar-month-label__year {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 400;
    font-style: italic;
    color: var(--color-gold-text);
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.calendar-legend__item { display: flex; align-items: center; gap: var(--space-1); }
.calendar-legend__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; }

.calendar-grid__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: sticky;
    top: 0;
    background: var(--color-bg);
}
.calendar-grid__weekday {
    padding: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--color-text-muted);
}
.calendar-grid__body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.calendar-cell {
    min-height: 7rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-bg);
    overflow: hidden;
}
.calendar-grid__body .calendar-cell:nth-child(7n) { border-right: none; }
.calendar-cell--muted { background: var(--color-bg-alt); color: var(--color-text-muted); }
.calendar-cell--today { background: var(--color-primary-light); }
.calendar-cell__date { font-weight: 700; font-size: var(--text-sm); }
.calendar-cell--today .calendar-cell__date { color: var(--color-primary-dark); }

.calendar-cell__events { display: flex; flex-direction: column; gap: var(--space-1); }
.event-chip {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    width: 100%;
    text-align: left;
    padding: var(--space-1) var(--space-2);
    background: color-mix(in srgb, var(--chip-color, var(--color-primary)) 16%, var(--color-bg));
    border-left: 3px solid var(--chip-color, var(--color-primary));
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    min-height: 32px;
    transition: background-color 150ms var(--ease), transform 150ms var(--ease);
}
.event-chip:hover { background: color-mix(in srgb, var(--chip-color, var(--color-primary)) 26%, var(--color-bg)); transform: translateX(2px); }
.event-chip__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; margin-top: 0.3em; }
.event-chip__text { display: flex; flex-direction: column; min-width: 0; }
.event-chip__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.event-chip__time { color: var(--color-text-muted); font-weight: 400; }
.calendar-cell__more {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: left;
    font-weight: 700;
    min-height: 32px;
}

.calendar-footer-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.calendar-footer-note .icon { color: var(--color-primary); }

@media (max-width: 640px) {

    .site-header__brand { padding: var(--space-4) 0 0 !important; }
    .calendar-legend { display: none; }

    .calendar-page { padding: var(--space-4); border-radius: var(--radius); }
    .calendar-toolbar { display: flex; flex-direction: column; }
    .calendar-month-label { display: flex; flex-direction: column; align-items: center; gap: 0px; }

    .calendar-grid__weekdays { display: none; }
    .calendar-grid__body { grid-template-columns: 1fr; border-left: none; border-right: none; }
    .calendar-cell { border-right: none !important; min-height: auto; }
    .calendar-cell--empty { padding: var(--space-1) var(--space-2); display: none; }
    .calendar-cell--empty .calendar-cell__date { color: var(--color-text-muted); font-weight: 400; }
    .calendar-cell--muted { display: none; }
}

/* ==========================================================================
   Event detail drawer
   ========================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 20, 18, 0.4);
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.modal-dialog {
    position: relative;
    background: var(--color-bg);
    box-shadow: var(--shadow-modal);
    width: 100%;
    max-width: 26rem;
    height: 100%;
    overflow-y: auto;
    animation: drawer-in 220ms var(--ease);
}
@keyframes drawer-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .modal-dialog { animation: none; }
}
.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 50%;
    background: var(--color-bg);
    box-shadow: var(--shadow-xs);
    z-index: 1;
    transition: background-color 150ms var(--ease);
}
.modal-close:hover { background: var(--color-bg-alt); }
.modal-flyer { width: 100%; max-height: 14rem; object-fit: cover; }
.modal-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-right: 2.5rem; }
.modal-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); }
.modal-org { color: var(--color-gold-text); font-weight: 700; }
.modal-facts { display: flex; flex-direction: column; gap: var(--space-3); }
.modal-facts__row { display: flex; align-items: flex-start; gap: var(--space-2); }
.modal-facts__row .icon { color: var(--color-primary); margin-top: 0.15em; }
.modal-description { white-space: pre-line; color: var(--color-text-muted); }
.modal-resources h3 { font-size: var(--text-sm); margin-bottom: var(--space-1); font-weight: 700; }
.modal-section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.modal-links { display: flex; flex-direction: column; gap: var(--space-2); }
.info-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-weight: 600;
    transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.info-row[hidden] { display: none; }
.info-row:hover { background: var(--color-bg-alt); border-color: #D8DAD2; }
.info-row .icon:first-child { color: var(--color-gold); }
.info-row .icon:last-child { color: var(--color-text-muted); margin-left: auto; width: 1em; height: 1em; }

/* ==========================================================================
   Auth (login/setup)
   ========================================================================== */

.auth-shell { display: flex; min-height: 100vh; background: var(--color-bg); }
.auth-shell__side {
    width: 22rem;
    flex-shrink: 0;
    background: var(--color-bg-alt);
    border-right: 1px solid var(--color-border);
    padding: var(--space-8);
}
.auth-shell__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
}
.auth-shell__brand .icon { width: 1.6rem; height: 1.6rem; color: var(--color-gold); flex-shrink: 0; }
.auth-shell__panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
}

@media (max-width: 640px) {
    .auth-shell { flex-direction: column; }
    .auth-shell__side { width: 100%; padding: var(--space-4) var(--space-6); }
}

.auth-card { width: 100%; max-width: 24rem; text-align: center; }
.auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.auth-icon .icon { width: 1.75rem; height: 1.75rem; }
.auth-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.auth-subtitle { font-size: var(--text-2xl); margin-bottom: var(--space-2); font-family: var(--font-heading); color: var(--color-text); }
.auth-card .mut { margin-bottom: var(--space-6); }
.auth-card form { text-align: left; }
.auth-card .row { justify-content: flex-start; }

/* Legacy auth-library pages (login/register/forgot/reset/2FA/TOTP/change
   password) build their own markup directly rather than using .form-*
   classes -- styled here by tag/existing-class selector, scoped to
   .auth-card, instead of retrofitting classes into each page. */
.auth-card form { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-2) 0; }
.auth-card label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"] {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.auth-card input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.auth-card .row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 400; }
.auth-card .row label { display: inline; font-weight: 400; margin-bottom: 0; }
.auth-card button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(11, 62, 44, 0.2);
    transition: box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.auth-card button[type="submit"]:hover { box-shadow: 0 6px 16px rgba(11, 62, 44, 0.3); transform: translateY(-1px); }
.auth-card button[type="submit"].danger {
    background: var(--color-bg);
    color: var(--color-danger);
    border: 1px solid #F0D3CC;
    box-shadow: none;
}
.auth-card button[type="submit"].danger:hover { background: var(--color-danger-bg); box-shadow: none; transform: none; }
.auth-card .btnlink {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.auth-card .btnlink:hover { text-decoration: underline; }
.auth-card .mut { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.auth-card .msg {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}
.auth-card .msg.ok, .auth-card .msg.info { background: var(--color-primary-light); color: var(--color-primary-dark); }
.auth-card .msg.err, .auth-card .msg.error { background: var(--color-danger-bg); color: var(--color-danger); }
.auth-card .codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: var(--space-4) 0; }
.auth-card .codes code {
    display: block;
    padding: var(--space-2);
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.auth-card img { border-radius: var(--radius-sm); margin: 0 auto var(--space-4); display: block; }

/* ==========================================================================
   Stat cards (admin dashboard, defined here so public pages could reuse)
   ========================================================================== */

.stat-cards { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.stat-card {
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-6);
    min-width: 10rem;
    display: flex;
    flex-direction: column;
}
.stat-card__value { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); }
.stat-card__label { color: var(--color-text-muted); font-size: var(--text-sm); }