/* =====================================================================
   Site-wide overrides (My Account, wallet, product tiles, dog profile,
   WooCommerce bits).

   Moved verbatim from Appearance → Customize → Additional CSS on
   2026-10-15 so it is version-controlled and deploys with the plugin.
   Printed at wp_head priority 102 — right where the Customizer's CSS used
   to print — so it keeps the same place in the cascade.
   ===================================================================== */

/* =====================================================================
   Woulfe's K9 — global overrides
   Migrated to the design system, v1.0.

   Tokens come from the WoulfesK9 plugin (assets/css/tokens.css), which is
   enqueued site-wide, so --k9-* resolves on every front-end page.
   Do not add raw hex here. See DESIGN-SYSTEM.md in the site root.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Header / chrome
   ------------------------------------------------------------------- */

#Header { min-height: 50px !important; }
#Subheader { display: none; }

#Top_bar .top_bar_right .action_button {
    display: flex;
    align-items: center;
    margin: 0 var(--k9-space-1);
    white-space: nowrap;
    flex-shrink: 0;
    height: 50px;
    border-radius: var(--k9-radius-pill);
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-weight: var(--k9-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: background var(--k9-duration) var(--k9-ease);
}

#Top_bar .top_bar_right .action_button:hover {
    background: var(--k9-action-hover);
    color: var(--k9-action-text);
}

/* Display headings are uppercase across the theme, matching the system.
   Scoped to h1/h2 only — h3 and below are titles, not display. */
#Content h1,
#Content h2,
.mfn-header-tmpl h1 {
    text-transform: uppercase;
}

/* Utility ------------------------------------------------------------ */

@media (max-width: 768px) {
    .sk-mobile-hide { display: none !important; }
}

/* Elfsight WhatsApp widget bubble — third-party brand mark. */
.dUoAAp::before { background-color: var(--k9-whatsapp) !important; }

/* ---------------------------------------------------------------------
   WooCommerce — catalogue
   ------------------------------------------------------------------- */

.woocommerce .products_wrapper.isotope_wrapper { padding-top: var(--k9-space-10); }

.price { color: var(--k9-text) !important; font-variant-numeric: tabular-nums; }

.woocommerce ul.products li.product .onsale {
    background: var(--k9-action);
    color: var(--k9-action-text);
    border-radius: var(--k9-radius-pill);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
}

/* Product tiles fade in, staggered. */
.woocommerce ul.products li.product {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    animation: productFadeIn 0.6s var(--k9-ease) forwards;
}

.woocommerce ul.products li.product:nth-child(1)  { animation-delay: 0.05s; }
.woocommerce ul.products li.product:nth-child(2)  { animation-delay: 0.10s; }
.woocommerce ul.products li.product:nth-child(3)  { animation-delay: 0.15s; }
.woocommerce ul.products li.product:nth-child(4)  { animation-delay: 0.20s; }
.woocommerce ul.products li.product:nth-child(5)  { animation-delay: 0.25s; }
.woocommerce ul.products li.product:nth-child(6)  { animation-delay: 0.30s; }
.woocommerce ul.products li.product:nth-child(7)  { animation-delay: 0.35s; }
.woocommerce ul.products li.product:nth-child(8)  { animation-delay: 0.40s; }
.woocommerce ul.products li.product:nth-child(9)  { animation-delay: 0.45s; }
.woocommerce ul.products li.product:nth-child(10) { animation-delay: 0.50s; }

@keyframes productFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* My Account, Dog profile and Sessions: assets/css/account.css. */

/* =====================================================================
   Display face weight guard
   Staatliches ships a SINGLE weight (400) — there is no bold cut. BeTheme
   sets h1/h2 to 900 and h3-h6 to 600/700, so the browser synthesises a fake
   bold and smears the face. Pin every heading to the weight that exists.

   This only reaches headings with no more specific rule: our own components
   set weight on a class (.wk9-title, .rs-ft__title, ...), which outranks a
   bare element selector, so body-font headings keep their real bold.
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--k9-weight-display);
}