/*
 * ss-tokens.css — LK Dryfruits Design System (SITE-WIDE)
 * ═══════════════════════════════════════════════════════
 * This file loads on every page (front, shop, single product,
 * category, about, cart, checkout — all of them). Change a value in
 * one place and it reflects across the whole site.
 *
 * Usage: never hardcode color/spacing/font. Always
 *        use var(--ss-*). Add a new token here if you need one.
 * ═══════════════════════════════════════════════════════
 */

:root {
    /* Reference palette: pale cream, pink, black and light green only. */
    --ss-cream: #FDFDF8;
    --ss-cream-soft: #F2EFDD;
    --ss-brand: #CA0864;
    --ss-lime: #E8EDBA;
    --ss-ink: #000000;
    --ss-ink-soft: var(--ss-ink);
    --ss-muted: color-mix(in srgb, var(--ss-ink) 75%, transparent);
    --ss-muted-soft: var(--ss-muted);
    --ss-brand-deep: var(--ss-brand);
    --ss-brand-soft: color-mix(in srgb, var(--ss-brand) 15%, var(--ss-cream));
    --ss-surface: var(--ss-cream);
    --ss-site-background-color: var(--ss-cream);
    --ss-white: var(--ss-cream);
    --ss-border: color-mix(in srgb, var(--ss-ink) 16%, transparent);
    --ss-border-strong: color-mix(in srgb, var(--ss-ink) 35%, transparent);
    --ss-star: var(--ss-ink);
    --ss-star-empty: var(--ss-border);
    --ss-badge-sale: var(--ss-brand);
    --ss-danger: var(--ss-brand);
    --ss-stock: var(--ss-ink);
    --ss-stock-soft: var(--ss-lime);
    --ss-stock-line: var(--ss-lime);
    --ss-stock-halo: color-mix(in srgb, var(--ss-lime) 24%, transparent);
    --ss-rating-bg: var(--ss-lime);
    --ss-rating-fg: var(--ss-ink);
    --ss-disabled: var(--ss-cream-soft);
    --ss-disabled-ink: var(--ss-muted);
    --ss-option-border: var(--ss-lime);

    /* ─── Radius ─── */
    --ss-radius-card: 12px;
    --ss-radius-sm:   10px;
    --ss-radius-md:   14px;
    --ss-radius-btn:  999px;

    /* ─── Shadow ─── */
    --ss-shadow-soft: 0 12px 40px -12px rgba(26,26,26,.22);
    --ss-shadow-sm:   0 2px 8px -2px rgba(16,16,16,.08);

    /* ─── Typography ───
     * Single-family sans system: headings and body copy
     * both use Roboto for consistent site-wide typography.
     * Headings use a restrained medium weight and tight tracking. */
    --ss-font-sans:    'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ss-font-display: 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ─── Spacing rhythm ─── */
    --ss-gap-sm: 8px;
    /* NOTE: the shop-page type scale (14/16/18/24/56) and the two-weight rule
       live at the top of the SHOP block in inc/ss-reference-polish.css */
    --ss-gap:    16px;
    --ss-gap-lg: 32px;
    --ss-section-y: clamp(48px, 6vw, 96px);
}

/* ═══ SITE-WIDE BASE TYPOGRAPHY ═══ */
/* Body font applies everywhere — overrides the Storefront parent theme's
 * defaults so the whole site looks consistent. */
body,
.site,
.entry-content,
.woocommerce,
.woocommerce-page,
button, input, select, textarea {
    font-family: var(--ss-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Keep the palette inside the theme's content area, not the custom footer. */
.site-content,
.site-content .entry-content,
.site-content .woocommerce,
.site-content .woocommerce-page,
.site-content button,
.site-content input,
.site-content select,
.site-content textarea {
    color: var(--ss-ink);
}

/* Headings ke liye display font; palette color is limited to site content. */
h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title,
.ss-display {
    font-family: var(--ss-font-display);
    font-weight: 500;              /* site rule: only 400 (text) and 500 (headings/emphasis) */
    letter-spacing: -0.01em;
}
.site-content :is(h1, h2, h3, h4, h5, h6, .entry-title, .woocommerce-loop-product__title, .product_title, .ss-display) {
    color: var(--ss-ink);
}

/* ═══ REUSABLE UTILITY CLASSES ═══ */
.ss-section-title {
    font: 500 clamp(24px, 3vw, 36px)/1.15 var(--ss-font-display);
    color: var(--ss-ink);
    margin: 0 0 var(--ss-gap);
}
.ss-eyebrow {
    font: 500 14px/1.4 var(--ss-font-sans);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ss-muted);
}
.ss-price {
    font: 500 clamp(16px, 1.6vw, 20px)/1 var(--ss-font-display);
    color: var(--ss-ink);
}

/* Buttons */
.ss-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    font: 500 16px/1 var(--ss-font-sans);
    padding: 14px 24px;
    border-radius: var(--ss-radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, color .15s ease;
    text-decoration: none;
}
.ss-btn-primary {
    background: var(--ss-brand);
    color: var(--ss-white);
}
.ss-btn-primary:hover { background: var(--ss-brand-deep); color: var(--ss-white); }
.ss-btn-outline {
    background: transparent;
    color: var(--ss-ink);
    border-color: var(--ss-border-strong);
}
.ss-btn-outline:hover { background: var(--ss-brand-soft); }
.ss-add-round {
    width: 40px; height: 40px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-ink); color: var(--ss-white);
    border: none; cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.ss-add-round:hover { background: var(--ss-brand); transform: scale(1.05); }

/* Hide the WooCommerce "View cart" injected link everywhere */
a.added_to_cart.wc-forward { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL BRAND BUTTONS (festive berry-red palette)
   ───────────────────────────────────────────────────────────
   Every ADD / Add to cart / primary CTA uses the brand red.
   ═══════════════════════════════════════════════════════════ */
:root{
    --ss-btn-bg:       var(--ss-brand);
    --ss-btn-bg-hover: var(--ss-brand-deep);
    --ss-btn-fg:       var(--ss-white);
}

.ss-btn-primary,
.ss-add-round,
.ss-fcard .ss-add-round,
.ss-pcard-cart-btn,
.ss-pcard-add-btn,
.ss-product-card .button,
.ssvc-add-btn,
.ss-atc-btn,
.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-proceed-to-checkout .checkout-button,
#place_order,
.sscc-btn-primary,
.ss-cart-checkout-btn,
.ss-checkout-place-order{
    background: var(--ss-btn-bg) !important;
    color: var(--ss-btn-fg) !important;
    border-color: var(--ss-btn-bg) !important;
}

.ss-btn-primary:hover,
.ss-add-round:hover:not(.is-oos),
.ss-fcard .ss-add-round:hover:not(.is-oos),
.ss-pcard-cart-btn:hover,
.ss-pcard-add-btn:hover,
.ssvc-add-btn:hover,
.ss-atc-btn:hover,
.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover,
.sscc-btn-primary:hover,
.ss-cart-checkout-btn:hover,
.ss-checkout-place-order:hover{
    background: var(--ss-btn-bg-hover) !important;
    color: var(--ss-btn-fg) !important;
    border-color: var(--ss-btn-bg-hover) !important;
}

/* Keep out-of-stock buttons muted and on-palette */
.ss-add-round.is-oos,
.ss-fcard .ss-add-round.is-oos{
    background:var(--ss-disabled) !important;
    color:var(--ss-disabled-ink) !important;
    border-color:var(--ss-disabled) !important;
}

/* ═══ PAGE LAYOUT — no white gap anywhere before the footer ═══ */
html, body{ min-height:100%; }
body{ display:block; }
#page.site,
#page.hfeed{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}
#page.site > .site-content,
#content.site-content{
    flex:1 0 auto;
    padding-bottom:0 !important;
    margin-bottom:0 !important;
}
#colophon.site-footer,
footer.site-footer{
    flex-shrink:0;
    margin-top:0 !important;
    padding-top:0 !important;
}
/* Remove the admin "Edit" link that was creating a white gap above the footer */
.post-edit-link,
.entry-footer .edit-link,
.site-content .edit-link{ display:none !important; }