/*
 * File: assets/css/pnt-store-brand.css  (pnt-custom-features)
 * Description: Paws & Tales brand layer for the ifl-commerce storefront.
 *
 * This is the SINGLE home for PNT's store branding. ifl-commerce ships brand-neutral
 * and fully CSS-variable-driven; each site sets its own brand vars from its own
 * *-custom-features plugin, so the shared plugin never needs per-site edits.
 * (Migrated here 2026-07-21 from ifl-commerce/assets/css/ifl-store-pnt.css.)
 *
 * Enqueued by PNT_Store_Brand after the 'ifl-store-css' handle, so these :root
 * overrides win over ifl-commerce's defaults.
 *
 * Token reference (keep in sync with ifl-commerce base :root):
 *   --brand-primary         Primary brand color (price, links, accents)
 *   --brand-primary-hover   Hover state for primary
 *   --brand-light           Light tint bg (subtle cards, hovers)
 *   --brand-light-border    Light borders matched to --brand-light
 *   --brand-dark            Dark accent (banner backgrounds, dark buttons)
 *   --brand-font            Body font family
 *   --brand-title-font      Heading/title font family (distinct from body)
 *   --brand-bg              Page background
 *   --brand-cta             Call-to-action button color (Add to Cart)
 *   --brand-cta-hover       Hover state for CTA
 */

:root {
    --brand-primary: #e0660d;
    --brand-primary-hover: #c4550b;
    --brand-light: #fff7ed;
    --brand-light-border: #fed7aa;
    --brand-dark: #0e3216;
    --brand-font: 'Burbank', -apple-system, BlinkMacSystemFont, sans-serif;
    --brand-title-font: 'Burbank', 'Trebuchet MS', sans-serif;
    --brand-bg: #FFF8F0;
    --brand-cta: #10b981;
    --brand-cta-hover: #059669;
    /* Storefront accent (eyebrows, CTAs, active category link, product bylines).
       ifl-commerce leaves this an insight maroon (#9a2a3b) fallback -- map it to PNT orange. */
    --ifl-accent: var(--brand-primary);
}

/* PNT-specific: header cart sits in dark nav, needs white + larger size + vertical layout + bottom-border hover effect */
.genesis-nav-menu .ifl-header-cart-trigger {
    color: #fff !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-decoration: none !important;
    padding: 0 15px 2px !important;
    border-bottom: 3px solid transparent !important;
    transition: border-color 0.2s, color 0.2s !important;
}
.genesis-nav-menu .ifl-header-cart-trigger:hover,
.genesis-nav-menu .ifl-header-cart-trigger:focus {
    border-bottom-color: var(--brand-primary, #e0660d) !important;
}
.genesis-nav-menu .ifl-header-cart-trigger:hover .ifl-header-cart-icon,
.genesis-nav-menu .ifl-header-cart-trigger:hover .ifl-header-cart-label {
    color: var(--brand-primary, #e0660d) !important;
}
.genesis-nav-menu .ifl-header-cart-trigger:hover .ifl-header-cart-icon {
    stroke: var(--brand-primary, #e0660d) !important;
}
.ifl-header-cart-icon {
    width: 28px !important;
    height: 28px !important;
}
.genesis-nav-menu .ifl-header-cart-trigger:hover .ifl-header-cart-icon {
    width: 34px !important;
    height: 34px !important;
}
.ifl-header-cart-label {
    color: #fff !important;
    font-size: 1.05em !important;
    letter-spacing: 1px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* My Account: ifl-commerce base scopes .ifl-account-wrap to insight-blue
   (--brand-dark / --brand-cta). Restore PNT's own accents here so the account
   page (section titles, active tab, buttons) reads green/orange, not blue.
   Loaded after ifl-store-css, so these win by order. */
.ifl-account-wrap { --brand-dark: #0e3216; --brand-cta: #10b981; }
.ifl-account-nav a:hover { border-bottom-color: var(--brand-light-border, #fed7aa); }

/* Store home scopes --ifl-accent to the insight maroon; keep PNT's accent orange there too. */
.ifl-store-home-wrap { --ifl-accent: var(--brand-primary); }