/* ------------------------------------------------------------------
   Humble Donkey brand layer — overrides the Glamics theme defaults.
   Palette sampled from the artwork itself:
     crimson  #CC2430  (Christus Victor)
     gold     #C0A884  (1689 - 2LCF)
   Typeface matches humbledonkey.in: Space Grotesk.
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --ul-primary:   #CC2430;
    --ul-secondary: #C0A884;
    --ul-gradient:  linear-gradient(90deg, #CC2430 0%, #8E1720 100%);
    --hd-ink:       #111111;
    --hd-gold:      #C0A884;
    --font-primary: "Space Grotesk", "Jost", sans-serif;
}

body, .ul-header-nav a, .ul-product-title, .ul-section-title, .ul-breadcrumb-title {
    font-family: var(--font-primary);
}

/* ---- Wretched & Loved wordmark (text, not an image — scales cleanly) ---- */
.wl-wordmark { display: inline-flex; align-items: baseline; gap: 5px;
    font-family: "Anton", "Space Grotesk", sans-serif; font-weight: 400;
    letter-spacing: .5px; line-height: 1; text-transform: uppercase;
    font-size: 25px; color: var(--hd-ink); text-decoration: none; white-space: nowrap; }
.wl-wordmark .wl-amp { color: var(--ul-primary); font-size: .92em; }
.wl-wordmark:hover { color: var(--hd-ink); }
.wl-wordmark.wl-light, .wl-wordmark.wl-light:hover { color: #fff; }
.wl-wordmark.wl-sm { font-size: 20px; }
@media (max-width: 480px) { .wl-wordmark { font-size: 19px; } }
.logo { height: 34px; width: auto; }

/* breadcrumb band: theme ships a pink tint, brand wants ink */
.ul-breadcrumb { background: #F5F3F0; }
.ul-breadcrumb-title { color: var(--hd-ink); letter-spacing: .5px; }

/* product cards */
.ul-product-price { color: var(--hd-ink); font-weight: 700; }
.ul-product-title a { color: var(--hd-ink); }
.ul-product-title a:hover { color: var(--ul-primary); }
.ul-product-category a { color: var(--hd-gold); font-weight: 500; }

/* mockup backdrops are normalised to #EDEBE8 at build time (see tools/normalise-mockups) */
.ul-product-img { background: #EDEBE8; }
.ul-product-img img { width: 100%; height: 100%; object-fit: contain; }

/* footer: theme sized this row for 4 narrow widgets; our copy needs room */
.ul-footer-middle { align-items: flex-start; gap: 40px; }
.ul-footer-middle-widget { flex: 1 1 auto; min-width: 200px; }
.ul-footer-middle-widget-content p { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }
.ul-footer-middle-widget .contact-nums a { font-size: 20px; }
.ul-footer-top-widget-links a:hover { color: var(--hd-gold); }

/* editorial pages */
.hd-quote { border-left: 3px solid var(--ul-primary); padding-left: 20px; margin: 24px 0;
            font-size: 20px; line-height: 1.6; font-style: italic; }
.hd-attrib { color: var(--hd-gold); }
.hd-h3 { margin: 36px 0 14px; font-size: 26px; font-weight: 700; }
.hd-pull { font-size: 18px; font-weight: 500; border-top: 1px solid #E3E0DA;
           border-bottom: 1px solid #E3E0DA; padding: 18px 0; margin: 26px 0; }
.hd-body p { line-height: 1.75; margin-bottom: 14px; }
.hd-body h4 { margin: 26px 0 10px; font-weight: 700; }

/* audit fix: hero cramped between ~580-640px — force the stack earlier */
@media (max-width: 660px) {
    .ul-section-heading .ul-section-title { font-size: 30px; line-height: 1.2; }
    .ul-section-heading .ul-section-descr { display: block; margin-top: 8px; }
}