/*
 * Doc's Hemp — Global Brand CSS
 * Earthy Premium "Verified Connoisseur" design system applied to all WP pages.
 *
 * Architecture: Three-layer override system
 *   Layer A — Astra CSS variable remapping (:root overrides)
 *   Layer B — Typography (body, headings, fonts)
 *   Layer C — Component-specific overrides (nav, shop, blog, WooCommerce, forms)
 *
 * Brand token reference (from src/styles/brand-tokens.css):
 *   --brand-base:       hsl(100 30% 6%)    #0d1f0d  deep forest black
 *   --brand-base-light: hsl(110 26% 10%)   #122012  section alternation
 *   --brand-accent:     hsl(38 48% 55%)    #c9a96e  warm gold
 *   --brand-text:       hsl(36 38% 93%)    #f5f0e8  warm cream
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER A — Astra CSS Variable Remapping
   Astra's entire component library reads from these variables.
   Overriding them here cascades changes to all Astra-generated markup.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand tokens (mirror of src/styles/brand-tokens.css for WP context) */
    --dh-base:         hsl(100, 30%, 6%);
    --dh-base-light:   hsl(110, 26%, 10%);
    --dh-accent:       hsl(38, 48%, 55%);
    --dh-accent-hover: hsl(38, 48%, 48%);
    --dh-text:         hsl(36, 38%, 93%);
    --dh-text-muted:   hsla(36, 38%, 93%, 0.6);
    --dh-text-faint:   hsla(36, 38%, 93%, 0.35);
    --dh-border:       hsla(38, 48%, 55%, 0.2);
    --dh-border-hover: hsla(38, 48%, 55%, 0.4);

    /* Remap Astra's global color palette */
    --ast-global-color-0: hsl(38, 48%, 55%);     /* accent / primary */
    --ast-global-color-1: hsl(36, 38%, 93%);     /* heading text */
    --ast-global-color-2: hsl(100, 30%, 6%);     /* body background */
    --ast-global-color-3: hsla(36, 38%, 93%, 0.6); /* muted text */
    --ast-global-color-4: hsl(110, 26%, 10%);    /* secondary background */
    --ast-global-color-5: hsla(38, 48%, 55%, 0.2); /* border */
    --ast-global-color-6: hsl(38, 48%, 55%);     /* link color */
    --ast-global-color-7: hsl(38, 48%, 48%);     /* link hover */
    --ast-global-color-8: hsl(36, 38%, 93%);     /* inverse text */

    /* Astra form variables */
    --ast-form-input-background: hsl(110, 26%, 10%);
    --ast-form-input-color:      hsl(36, 38%, 93%);
    --ast-border-color:          hsla(38, 48%, 55%, 0.2);

    /* WP block editor / Astra spacing */
    --ast-container-default-padding-top-bottom: 3rem;
    --ast-container-default-padding-left-right: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER A2 — Accessibility: Reduced Motion Safety Net
   Framer Motion starts React elements at opacity:0 before animating them to
   visible. MotionConfig reducedMotion="user" in App.tsx handles this in JS,
   but this CSS rule is the belt-and-suspenders layer for:
     a) Slow connections where JS hasn't executed yet
     b) Users with prefers-reduced-motion OS setting (WCAG 2.1 SC 2.3.3)
     c) Any framer-motion element that was scrolled past before IntersectionObserver fired
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    /* Kill all transitions and animations globally */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Force Framer Motion inline-styled opacity:0 elements to be visible.
       Framer Motion sets opacity via inline style; the !important here
       overrides that only for reduced-motion users. */
    #root [style*="opacity: 0"],
    #root [style*="opacity:0"] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER B — Typography & Base
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * React app button reset — Astra applies its global button styles (background,
 * border-radius, padding) to ALL <button> elements on the page, including those
 * rendered by the React SPA inside #root. This reset strips those styles so
 * Tailwind's own utilities (bg-transparent, border-0, etc.) are the only source
 * of truth for React-rendered buttons. Scoped to #root so WooCommerce and Astra
 * buttons outside the React mount point are unaffected.
 */
/*
 * React app image reset — Elementor's page-specific CSS (e.g. post-2685.css)
 * can set background-color:#000000 on layout containers that bleed through
 * transparent image placeholders. Scoped to #root so WooCommerce product
 * images outside the React mount point are unaffected.
 */
#root img {
    background-color: transparent !important;
    /* Prevent Elementor's .elementor-element rules from resizing React images */
    max-width: 100% !important;
    height: auto;
}

/*
 * React app link reset — Astra Customizer writes link color rules (sometimes
 * with !important) that cascade into #root and override Tailwind color classes
 * on <a> elements. Setting inherit here lets the nearest ancestor's color win,
 * which is set correctly by our body { color } rule below.
 *
 * Mobile nav drawer (.dh-mobile-nav) gets an explicit !important override
 * because Astra's mobile-menu link rules have high specificity and fire after
 * the React CSS bundle in the cascade.
 */
#root a {
    color: inherit;
    text-decoration: none;
}

#root .dh-mobile-nav a {
    color: hsl(var(--brand-text) / 0.7) !important;
    text-decoration: none !important;
}

#root button {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    cursor: pointer;
}

html, body {
    background-color: var(--dh-base) !important;
    color: var(--dh-text) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title,
.ast-blog-title,
.widget-title,
.site-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-weight: 400;
    line-height: 1.15;
}

a {
    color: var(--dh-accent);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover, a:focus {
    color: var(--dh-accent-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER C — Component Overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Global Layout ──────────────────────────────────────────────────────── */

#page,
.ast-separate-container,
.ast-container,
.site-content,
.content-area,
.widget-area,
#secondary {
    background-color: var(--dh-base) !important;
    color: var(--dh-text);
}

/* Remove Astra's default white/light backgrounds */
.ast-page-builder-template .site-content,
.post-page-numbers,
.ast-article-inner,
.post-content {
    background-color: transparent !important;
}

/* ─── Sidebar: hidden on all WooCommerce + shop pages ───────────────────── */

.woocommerce-page #secondary,
.woocommerce #secondary,
.ast-right-sidebar.woocommerce-page .ast-sidebar-layout-active #secondary {
    display: none !important;
}

/* Expand main column when sidebar is hidden */
.woocommerce-page #primary,
.woocommerce #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* ─── Announcement Bar ───────────────────────────────────────────────────── */

/* If Astra notice/announcement bar exists, restyle it */
.ast-notice-bar,
.ast-header-break-point + .ast-notice-bar,
.woocommerce-store-notice,
#woocommerce-cookie-bar {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.5rem 1rem;
}
.ast-notice-bar a,
.woocommerce-store-notice a {
    color: var(--dh-base) !important;
    text-decoration: underline;
}

/* ─── Astra Primary Header (fallback if header.php not uploaded yet) ─────── */

.ast-primary-header-bar,
#masthead,
.site-header {
    background-color: var(--dh-base) !important;
    border-bottom: 1px solid var(--dh-border) !important;
    box-shadow: none !important;
}

.ast-primary-header-bar .site-title a,
.ast-primary-header-bar .site-branding a {
    color: var(--dh-text) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* Nav links */
.main-header-menu .menu-item > a,
.ast-builder-menu-1 .menu-item > a,
#site-navigation .menu-item > a {
    color: var(--dh-text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: color 0.2s;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a {
    color: var(--dh-text) !important;
}

/* Mobile nav */
.ast-mobile-popup-inner,
.ast-above-header-navigation,
.ast-mobile-menu-container {
    background-color: var(--dh-base-light) !important;
}

/* ─── Custom Header (dh-navbar) — from header.php ───────────────────────── */

.dh-announcement-bar {
    background-color: var(--dh-accent);
    color: var(--dh-base);
    text-align: center;
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
}

.dh-navbar {
    position: relative;
    z-index: 100;
    background-color: var(--dh-base);
    border-bottom: 1px solid var(--dh-border);
}

.dh-navbar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.dh-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dh-text) !important;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.dh-logo:hover { color: var(--dh-accent) !important; }
.dh-logo span  { color: var(--dh-accent); }

.dh-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.dh-nav-links li { margin: 0; }
.dh-nav-links li a {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dh-text-muted) !important;
    text-decoration: none;
    transition: color 0.2s;
}
.dh-nav-links li a:hover,
.dh-nav-links li.current-menu-item a,
.dh-nav-links li.current_page_item a {
    color: var(--dh-text) !important;
}

.dh-navbar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dh-cart-icon {
    position: relative;
    color: var(--dh-text-muted) !important;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}
.dh-cart-icon:hover { color: var(--dh-text) !important; }
.dh-cart-icon svg   { width: 20px; height: 20px; }

.dh-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: var(--dh-accent);
    color: var(--dh-base);
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dh-cart-count:empty,
.dh-cart-count[data-count="0"] { display: none; }

.dh-mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dh-text-muted);
    padding: 0.25rem;
}
.dh-mobile-toggle:hover { color: var(--dh-text); }
.dh-mobile-toggle svg { width: 20px; height: 20px; }

.dh-mobile-menu {
    background-color: var(--dh-base-light);
    border-top: 1px solid var(--dh-border);
    padding: 1.5rem 2rem;
}
.dh-mobile-menu[hidden] { display: none; }

.dh-mobile-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dh-mobile-links li a {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dh-text-muted) !important;
    text-decoration: none;
    display: block;
    transition: color 0.2s;
}
.dh-mobile-links li a:hover { color: var(--dh-text) !important; }

@media (max-width: 768px) {
    .dh-nav-links  { display: none; }
    .dh-mobile-toggle { display: block; }
    .dh-navbar__inner { padding: 1rem 1.25rem; }
}

/* ─── Custom Footer (dh-footer) — from footer.php ───────────────────────── */

.dh-footer {
    background-color: var(--dh-base);
    border-top: 1px solid var(--dh-border);
    padding: 4rem 2rem;
}

.dh-footer__grid {
    max-width: 1280px;
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}
@media (min-width: 768px) {
    .dh-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

.dh-footer__brand-logo {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dh-text) !important;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color 0.2s;
}
.dh-footer__brand-logo:hover { color: var(--dh-accent) !important; }
.dh-footer__brand-logo span  { color: var(--dh-accent); }

.dh-footer__brand-tagline {
    font-size: 0.85rem;
    color: var(--dh-text-muted);
    line-height: 1.6;
}

.dh-footer__col-label {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dh-accent);
    margin-bottom: 1rem;
    font-weight: 500;
}

.dh-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dh-footer__links li a {
    font-size: 0.85rem;
    color: var(--dh-text-muted) !important;
    text-decoration: none;
    transition: color 0.2s;
}
.dh-footer__links li a:hover { color: var(--dh-text) !important; }

.dh-footer__bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid hsla(38, 48%, 55%, 0.1);
    text-align: center;
}
.dh-footer__copyright {
    font-size: 0.7rem;
    color: var(--dh-text-faint);
    line-height: 1.8;
}

/* Hide Astra's default footer when our custom footer is present */
body.has-dh-footer .site-footer,
body.has-dh-footer #colophon,
body.has-dh-footer .footer-widget-area,
body.has-dh-footer .ast-footer-widget-area {
    display: none !important;
}

/* ─── WooCommerce — Shop Archive ─────────────────────────────────────────── */

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (min-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background-color: transparent !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: border-color 0.2s, transform 0.3s;
    overflow: hidden;
}
.woocommerce ul.products li.product:hover {
    border-color: var(--dh-border-hover) !important;
    transform: translateY(-2px);
}

/* Product image */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.astra-shop-thumbnail-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s;
    margin: 0 !important;
}
.woocommerce ul.products li.product:hover img {
    transform: scale(1.05);
}

/* Product name */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-size: 1.1rem !important;
    font-weight: 400;
    padding: 1rem 1rem 0.25rem !important;
    margin: 0 !important;
}

/* Product price */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-Price-amount {
    color: var(--dh-accent) !important;
    font-size: 0.9rem !important;
    padding: 0 1rem !important;
    display: block;
}

/* Add to cart button on shop grid */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.ast-on-card-button {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 0.6rem 1rem !important;
    margin: 0.75rem 1rem 1rem !important;
    display: block;
    width: calc(100% - 2rem);
    text-align: center;
    transition: background-color 0.2s, transform 0.2s;
}
.woocommerce ul.products li.product .button:hover {
    background-color: var(--dh-accent-hover) !important;
    transform: scale(1.02);
}

/* Sale badge */
.woocommerce span.onsale {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    border-radius: 0 !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    min-height: auto;
    line-height: 1;
    padding: 0.3rem 0.6rem;
}

/* Shop result count + sort */
.woocommerce-result-count {
    color: var(--dh-text-faint) !important;
    font-size: 0.8rem;
}
.woocommerce-ordering select {
    background-color: var(--dh-base-light) !important;
    color: var(--dh-text-muted) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

/* ─── WooCommerce — Single Product ───────────────────────────────────────── */

.woocommerce div.product {
    background-color: transparent !important;
}

.woocommerce div.product .product_title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
}

.woocommerce div.product .price,
.woocommerce div.product .woocommerce-Price-amount {
    color: var(--dh-accent) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
}

.woocommerce div.product .woocommerce-product-gallery {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border);
}

.woocommerce div.product .woocommerce-product-gallery img {
    background-color: var(--dh-base-light) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--dh-text-muted) !important;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Add to cart */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .button.alt {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    padding: 1rem 2.5rem !important;
    transition: background-color 0.2s, transform 0.2s;
    height: auto !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: var(--dh-accent-hover) !important;
    transform: scale(1.02);
}

/* Quantity input */
.woocommerce div.product form.cart .qty {
    background-color: var(--dh-base-light) !important;
    color: var(--dh-text) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    height: auto !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--dh-border) !important;
    padding: 0;
    margin-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--dh-accent) !important;
    background-color: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--dh-text-muted) !important;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    padding: 0.75rem 1rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--dh-text) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border) !important;
    border-top: none !important;
    padding: 2rem !important;
    color: var(--dh-text-muted) !important;
    border-radius: 0 !important;
}

/* Related products */
.woocommerce .related h2,
.woocommerce .upsells h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-weight: 400;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

/* ─── WooCommerce — Cart ──────────────────────────────────────────────────── */

.woocommerce table.shop_table {
    background-color: transparent !important;
    border-color: var(--dh-border) !important;
    border-radius: 0 !important;
}
.woocommerce table.shop_table th {
    background-color: var(--dh-base-light) !important;
    color: var(--dh-text-faint) !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    border-color: var(--dh-border) !important;
    padding: 1rem;
}
.woocommerce table.shop_table td {
    background-color: transparent !important;
    color: var(--dh-text) !important;
    border-color: var(--dh-border) !important;
    padding: 1rem;
    vertical-align: middle;
}
.woocommerce table.shop_table .product-name a {
    color: var(--dh-text) !important;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
}
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
    color: var(--dh-accent) !important;
}

.woocommerce .cart-collaterals .cart_totals {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border);
    padding: 2rem;
    border-radius: 0;
}
.woocommerce .cart_totals h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    color: var(--dh-text-muted) !important;
    border-color: var(--dh-border) !important;
}
.woocommerce .cart_totals table .order-total td {
    color: var(--dh-accent) !important;
    font-size: 1.25rem;
}

.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce a.checkout-button {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    padding: 1rem 2rem !important;
    display: block;
    text-align: center;
    width: 100%;
    transition: background-color 0.2s;
}
.woocommerce .wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--dh-accent-hover) !important;
}

/* ─── WooCommerce — Checkout ──────────────────────────────────────────────── */

.woocommerce form.checkout,
.woocommerce-checkout #customer_details {
    color: var(--dh-text);
}
.woocommerce-checkout h3,
.woocommerce-order-details h2,
.woocommerce-column__title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-weight: 400;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--dh-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.woocommerce table.woocommerce-checkout-review-order-table {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
}
.woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce table.woocommerce-checkout-review-order-table td {
    color: var(--dh-text-muted) !important;
    border-color: var(--dh-border) !important;
}
.woocommerce table.woocommerce-checkout-review-order-table .order-total td {
    color: var(--dh-accent) !important;
}

#place_order {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    padding: 1rem 2rem !important;
    width: 100%;
    transition: background-color 0.2s;
}
#place_order:hover {
    background-color: var(--dh-accent-hover) !important;
}

/* ── Checkout: page-level background and Astra layout wrappers ───────────── */
body.woocommerce-checkout,
body.woocommerce-cart {
    background-color: var(--dh-base) !important;
}

/* Astra renders a .site-content / .ast-container around WooCommerce content.
   Force dark background so nothing bleeds through. */
body.woocommerce-checkout .site-content,
body.woocommerce-checkout .ast-container,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout #primary,
body.woocommerce-checkout .entry-content,
body.woocommerce-cart .site-content,
body.woocommerce-cart .ast-container,
body.woocommerce-cart .content-area,
body.woocommerce-cart #primary {
    background-color: var(--dh-base) !important;
    color: var(--dh-text) !important;
}

/* ── Checkout: WooCommerce info / notice / error boxes ───────────────────── */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-NoticeGroup {
    background-color: var(--dh-base-light) !important;
    border-top-color: var(--dh-accent) !important;
    color: var(--dh-text-muted) !important;
    border-radius: 0 !important;
}
.woocommerce-error {
    border-top-color: #c0392b !important;
}
.woocommerce-info a,
.woocommerce-message a {
    color: var(--dh-accent) !important;
}

/* ── Checkout: coupon / promo code section ───────────────────────────────── */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .coupon {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border) !important;
    padding: 1.5rem !important;
    border-radius: 0 !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle a {
    color: var(--dh-accent) !important;
}

/* ── Checkout: payment methods ────────────────────────────────────────────── */
.woocommerce-checkout #payment {
    background-color: var(--dh-base-light) !important;
    border-radius: 0 !important;
    border: 1px solid var(--dh-border) !important;
}
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom-color: var(--dh-border) !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
    border-color: var(--dh-border) !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    color: var(--dh-text) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em;
    text-transform: none !important;
}
.woocommerce-checkout #payment .payment_box {
    background-color: var(--dh-base) !important;
    color: var(--dh-text-muted) !important;
}
.woocommerce-checkout #payment .payment_box::before {
    border-bottom-color: var(--dh-base) !important;
}
.woocommerce-checkout #payment .payment_method_paypal img {
    opacity: 0.8;
}

/* ── Checkout: ALL WooCommerce button variants (belt-and-suspenders) ──────── */
/* Covers stripe, PayPal, and any gateway that outputs .button or .button.alt */
.woocommerce-checkout .button,
.woocommerce-checkout .button.alt,
.woocommerce-checkout input[type="submit"],
.woocommerce-cart .button,
.woocommerce-cart .button.alt,
.woocommerce input[type="submit"].button {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    transition: background-color 0.2s;
}
.woocommerce-checkout .button:hover,
.woocommerce-checkout .button.alt:hover,
.woocommerce-cart .button:hover,
.woocommerce-cart .button.alt:hover {
    background-color: var(--dh-accent-hover) !important;
    color: var(--dh-base) !important;
}

/* ── Checkout: order received / thank-you page ───────────────────────────── */
body.woocommerce-order-received .site-content,
body.woocommerce-order-received .ast-container,
body.woocommerce-order-received #primary {
    background-color: var(--dh-base) !important;
    color: var(--dh-text) !important;
}
.woocommerce-order-received .woocommerce-thankyou-order-details,
.woocommerce-order-received .woocommerce-order-details__title {
    color: var(--dh-text) !important;
}
.woocommerce-order-received ul.woocommerce-thankyou-order-details li {
    border-color: var(--dh-border) !important;
    color: var(--dh-text-muted) !important;
}
.woocommerce-order-received ul.woocommerce-thankyou-order-details .woocommerce-Price-amount {
    color: var(--dh-accent) !important;
}

/* ─── Forms (global) ─────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
    background-color: var(--dh-base-light) !important;
    color: var(--dh-text) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s;
}
input::placeholder,
textarea::placeholder { color: var(--dh-text-faint) !important; }
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--dh-accent) !important;
    box-shadow: none !important;
}

label {
    color: var(--dh-text-faint) !important;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    display: block;
    margin-bottom: 0.35rem;
}

/* ─── Blog Archive ────────────────────────────────────────────────────────── */

.ast-blog-layout-4-grid .ast-row,
.ast-blog-layout-4-grid .ast-col,
.ast-grid-blog-layout {
    background-color: transparent !important;
}

.ast-article-post,
article.ast-article-post {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.3s;
    margin-bottom: 2rem !important;
}
.ast-article-post:hover {
    border-color: var(--dh-border-hover) !important;
    transform: translateY(-2px);
}

.ast-article-post .post-thumb img {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.ast-article-post .post-content,
.ast-article-inner .post-content,
.ast-blog-layout-4 .post-content {
    padding: 1.5rem !important;
    background-color: transparent !important;
}

/* Blog post title on archive */
.ast-article-post .entry-title,
.ast-blog-single-element .entry-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
}
.ast-article-post .entry-title a {
    color: var(--dh-text) !important;
    transition: color 0.2s;
}
.ast-article-post .entry-title a:hover { color: var(--dh-accent) !important; }

/* Category tags */
.cat-links a,
.cat-links .screen-reader-text + a {
    display: inline-block;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dh-accent) !important;
    border: 1px solid hsla(38, 48%, 55%, 0.35);
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.75rem;
    text-decoration: none;
    transition: background-color 0.2s;
}
.cat-links a:hover {
    background-color: hsla(38, 48%, 55%, 0.1);
}

/* Blog post meta */
.entry-meta,
.ast-blog-meta-container,
.ast-post-meta {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    color: var(--dh-text-faint) !important;
    margin-bottom: 0.75rem;
}
.entry-meta a { color: var(--dh-text-faint) !important; }

/* Blog excerpt */
.entry-summary,
.ast-excerpt {
    color: var(--dh-text-muted) !important;
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
}

/* Read more link */
.ast-continue-reading,
.more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dh-accent) !important;
    text-decoration: none;
    margin-top: 1rem;
    transition: color 0.2s;
}
.ast-continue-reading:hover { color: var(--dh-accent-hover) !important; }

/* Blog pagination */
.ast-pagination .page-numbers,
.navigation .page-numbers {
    background-color: transparent !important;
    color: var(--dh-text-muted) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    transition: background-color 0.2s, color 0.2s;
}
.ast-pagination .page-numbers.current,
.navigation .page-numbers.current {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    border-color: var(--dh-accent) !important;
}
.ast-pagination .page-numbers:hover {
    background-color: hsla(38, 48%, 55%, 0.15) !important;
    color: var(--dh-text) !important;
}

/* ─── Single Blog Post ────────────────────────────────────────────────────── */

.ast-single-post .entry-header,
.single-post .entry-header {
    max-width: 800px;
    margin: 0 auto 2rem;
    padding: 3rem 1rem 0;
    text-align: center;
}

.ast-single-post .entry-title,
.single-post .entry-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-size: clamp(1.75rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
}

.ast-single-post .entry-meta,
.single-post .entry-meta {
    color: var(--dh-text-faint) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em;
}

.ast-single-post .entry-content,
.single-post .entry-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    color: var(--dh-text-muted) !important;
    font-size: 1rem !important;
    line-height: 1.85 !important;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--dh-accent);
}

.entry-content p { margin-bottom: 1.25rem; }

.entry-content a {
    color: var(--dh-accent) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.entry-content ul,
.entry-content ol {
    color: var(--dh-text-muted);
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.entry-content blockquote {
    border-left: 3px solid var(--dh-accent) !important;
    background-color: var(--dh-base-light) !important;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    color: var(--dh-text-muted) !important;
    font-style: italic;
}

/* Post featured image */
.ast-single-post-featured-section,
.post-thumb {
    background-color: var(--dh-base-light);
    border-bottom: 1px solid var(--dh-border);
}
.ast-single-post-featured-section img,
.post-thumb img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

/* ─── Page H1 — Elementor pages (injected via docs_hemp_elementor_page_h1) ── */
/* Sits between the nav and the first Elementor section. Visually part of the  */
/* page header; semantically the primary H1 for Google.                        */

.dh-page-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--dh-text) !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    background-color: var(--dh-base);
    padding: 2.5rem 2rem 0;
    margin: 0;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Archive H1 — /shop/ and /blog/ (injected via docs_hemp_shop_archive_h1) ─ */

.dh-archive-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--dh-text) !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    margin: 2rem 0 0.75rem;
    padding: 0;
}

/* ─── Belt-and-suspenders: suppress shop description text in the DOM ─────────
   PHP filter in functions.php is the primary removal.
   This CSS hides any edge case where WooCommerce renders the description
   before the PHP filter fires (e.g., cached fragments or page builders).    */

.woocommerce.post-type-archive-product .page-description,
.woocommerce-page.post-type-archive-product .page-description {
    display: none !important;
}

/* Comments */
.comments-area {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1rem;
    border-top: 1px solid var(--dh-border);
}
.comments-title,
.comment-reply-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-weight: 400;
    font-size: 1.5rem;
}
.comment-content p { color: var(--dh-text-muted); }
.comment-author .fn { color: var(--dh-text); }
.comment-metadata a { color: var(--dh-text-faint) !important; }

/* ─── Astra Default Footer Fallback Styles ───────────────────────────────── */

/* Applied when header.php/footer.php are not yet uploaded */
.site-footer,
#colophon,
.footer-widget-area,
.ast-footer-widget-area,
.ast-footer-background {
    background-color: var(--dh-base) !important;
    border-top: 1px solid var(--dh-border) !important;
    color: var(--dh-text-muted) !important;
}
.site-footer .widget-title { color: var(--dh-accent) !important; }
.site-footer a { color: var(--dh-text-muted) !important; }
.site-footer a:hover { color: var(--dh-text) !important; }
.ast-footer-copyright { color: var(--dh-text-faint) !important; }

/* ─── WooCommerce — Account Page ─────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border);
    padding: 1.5rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    color: var(--dh-text-muted) !important;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 0;
    display: block;
    border-bottom: 1px solid var(--dh-border);
    transition: color 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    color: var(--dh-accent) !important;
}

/* ─── React App — Effect Pill Buttons (override Astra hardcoded button styles) ── */
/*
 * Astra's customizer outputs hardcoded button styles (background:#d794ff)
 * that can't be overridden by Tailwind utility classes alone.
 * We use a .dh-pill marker class + CSS custom properties set via inline style
 * so active/inactive colors come from the component while Astra's purple is
 * neutralised here at higher specificity + importance.
 */
#root button.dh-pill {
    background-color: transparent !important;
    border-radius: 2px !important;
    -webkit-appearance: none;
    appearance: none;
}
#root button.dh-pill[data-active="true"] {
    background-color: var(--dh-btn-bg) !important;
    border-color: var(--dh-btn-border) !important;
    color: var(--dh-btn-color-active) !important;
}
#root button.dh-pill:not([data-active="true"]) {
    border-color: var(--dh-btn-border-inactive) !important;
    color: var(--dh-btn-color-inactive) !important;
}

/* ─── WooCommerce — Product Category Archive Pages ───────────────────────── */
/*
 * Applied to all /product-category/* URLs.
 * WordPress body class on these pages: archive tax-product_cat term-{slug}
 */

/* Dark background across all content wrappers */
body.tax-product_cat,
body.tax-product_cat #page,
body.tax-product_cat #content,
body.tax-product_cat .site-main,
body.tax-product_cat #primary,
body.tax-product_cat .ast-container,
body.tax-product_cat .entry-content,
body.tax-product_cat .woocommerce {
    background-color: var(--dh-base) !important;
    color: var(--dh-text) !important;
}

/* Products header band */
body.tax-product_cat .woocommerce-products-header {
    background-color: var(--dh-base-light) !important;
    border-bottom: 1px solid var(--dh-border) !important;
    padding: 3rem 1.5rem 2rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

/* Our injected H1 (via functions.php) */
body.tax-product_cat .dh-archive-h1 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--dh-text) !important;
    font-size: 2.5rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}
@media (max-width: 767px) {
    body.tax-product_cat .dh-archive-h1 { font-size: 1.875rem !important; }
}

/* Hide WooCommerce's duplicate heading */
body.tax-product_cat .woocommerce-products-header__title.page-title {
    display: none !important;
}

/* Category description */
body.tax-product_cat .term-description {
    color: var(--dh-text-muted) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.03em !important;
    line-height: 1.7 !important;
    text-align: center !important;
    max-width: 42rem !important;
    margin: 0 auto !important;
}

/* Products toolbar */
body.tax-product_cat .woocommerce-result-count {
    color: var(--dh-text-faint) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}
body.tax-product_cat select.orderby {
    background-color: var(--dh-base-light) !important;
    color: var(--dh-text-muted) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 2px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.4rem 0.75rem !important;
}

/* Product grid */
body.tax-product_cat ul.products li.product {
    background: transparent !important;
}
body.tax-product_cat ul.products li.product img {
    border-radius: 2px !important;
    border: 1px solid var(--dh-border) !important;
    transition: transform 0.5s ease !important;
}
body.tax-product_cat ul.products li.product:hover img {
    transform: scale(1.04) !important;
}
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
    color: var(--dh-text) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    letter-spacing: 0.02em !important;
}
body.tax-product_cat ul.products li.product .price,
body.tax-product_cat ul.products li.product .price .amount {
    color: var(--dh-accent) !important;
    font-size: 0.875rem !important;
}
body.tax-product_cat ul.products li.product .price del .amount {
    color: var(--dh-text-faint) !important;
}

/* Add to cart / View buttons on product cards */
body.tax-product_cat ul.products li.product .button,
body.tax-product_cat ul.products li.product a.button,
body.tax-product_cat ul.products li.product .add_to_cart_button {
    background-color: transparent !important;
    border: 1px solid var(--dh-accent) !important;
    color: var(--dh-accent) !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-size: 0.7rem !important;
    padding: 0.5rem 1.25rem !important;
    transition: background-color 0.2s, color 0.2s !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}
body.tax-product_cat ul.products li.product .button:hover,
body.tax-product_cat ul.products li.product a.button:hover,
body.tax-product_cat ul.products li.product .add_to_cart_button:hover {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
}

/* Breadcrumbs */
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_cat .ast-breadcrumbs-wrapper,
body.tax-product_cat nav.woocommerce-breadcrumb {
    background-color: var(--dh-base) !important;
    color: var(--dh-text-faint) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 2rem !important;
    border-bottom: 1px solid var(--dh-border) !important;
}
body.tax-product_cat .woocommerce-breadcrumb a {
    color: var(--dh-text-muted) !important;
    text-decoration: none !important;
}
body.tax-product_cat .woocommerce-breadcrumb a:hover {
    color: var(--dh-accent) !important;
}

/* Pagination */
body.tax-product_cat .woocommerce-pagination ul {
    border: none !important;
}
body.tax-product_cat .woocommerce-pagination ul li a,
body.tax-product_cat .woocommerce-pagination ul li span {
    background-color: transparent !important;
    border: 1px solid var(--dh-border) !important;
    color: var(--dh-text-muted) !important;
    border-radius: 2px !important;
}
body.tax-product_cat .woocommerce-pagination ul li a:hover {
    background-color: var(--dh-base-light) !important;
    border-color: var(--dh-border-hover) !important;
    color: var(--dh-text) !important;
}
body.tax-product_cat .woocommerce-pagination ul li span.current {
    background-color: var(--dh-accent) !important;
    border-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
}

/* Sidebar */
body.tax-product_cat #secondary,
body.tax-product_cat .widget-area {
    background-color: var(--dh-base) !important;
}
body.tax-product_cat .widget_title,
body.tax-product_cat .widgettitle {
    color: var(--dh-text) !important;
    border-bottom: 1px solid var(--dh-border) !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}

/* Mobile: 2-column product grid */
@media (max-width: 600px) {
    body.tax-product_cat ul.products.columns-3,
    body.tax-product_cat ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 20 — Gutenberg Block Button Override (issue 17)
   Root cause: Astra customizer stores theme-color: #d794ff (purple) and
   link-color: #7030b8 as hardcoded hex in astra-settings, injected as
   inline <style> blocks. These override our CSS variable remapping for
   .wp-block-button__link and .wp-element-button inside WP post content.
   Fix: target every Gutenberg button selector at maximum specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

.entry-content .wp-block-button__link,
.entry-content .wp-element-button,
.entry-content .wp-block-button .wp-block-button__link,
.entry-content .wp-block-buttons .wp-block-button__link,
.wp-block-button__link,
.wp-element-button {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
    border-color: var(--dh-accent) !important;
    border-radius: 0 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 0.75rem 1.75rem !important;
    transition: background-color 0.2s, color 0.2s !important;
    box-shadow: none !important;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--dh-accent-hover) !important;
    color: var(--dh-base) !important;
    text-decoration: none !important;
}

/* Outline button variant */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--dh-accent) !important;
    border: 1px solid var(--dh-accent) !important;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: hsla(38, 48%, 55%, 0.1) !important;
}

/* ============================================================================
 * CHECKOUT — UI/UX hardening (2026-04-29 production-fix)
 *
 * The earlier WooCommerce overrides in this file used `border-top-color`
 * (longhand) to recolor `.woocommerce-info` / `-error` notices, but
 * WooCommerce's own stylesheet sets `border-top: 3px solid #a46497` (purple)
 * via shorthand and wins the cascade — so the notices on /checkout/ rendered
 * with the default purple border on a near-white background, with the gateway
 * error message in light-on-light text. This block uses full shorthand
 * declarations and `body.woocommerce-checkout` prefixing to outrank the
 * defaults, plus targets the AuthNet-specific markup (.payment_box.payment_method_authnet,
 * #wc-authnet-cc-form) that the existing overrides did not cover.
 *
 * Marker comment for verify.sh regression check: dh-checkout-ux-hardening
 * ============================================================================ */

/* ── Notices: Returning customer / Have a coupon / errors / messages ──────── */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-info,
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-message {
    background-color: var(--dh-base-light) !important;
    border-top: 3px solid var(--dh-accent) !important;
    border-right: 1px solid var(--dh-border) !important;
    border-bottom: 1px solid var(--dh-border) !important;
    border-left: 1px solid var(--dh-border) !important;
    color: var(--dh-text) !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem 1rem 3rem !important;
}
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.woocommerce-checkout ul.woocommerce-error,
body.woocommerce-checkout ul.woocommerce-error li {
    background-color: var(--dh-base-light) !important;
    border-top: 3px solid #d9534f !important;
    border-right: 1px solid var(--dh-border) !important;
    border-bottom: 1px solid var(--dh-border) !important;
    border-left: 1px solid var(--dh-border) !important;
    color: var(--dh-text) !important;
    border-radius: 0 !important;
}
body.woocommerce-checkout .woocommerce-error li {
    background: transparent !important;
    border: none !important;
    padding: 0 0 0 1rem !important;
    color: var(--dh-text) !important;
    list-style: none !important;
}
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-error::before {
    color: var(--dh-accent) !important;
}
body.woocommerce-checkout .woocommerce-error::before {
    color: #d9534f !important;
}
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-cart .woocommerce-info a,
body.woocommerce-checkout .woocommerce-message a,
body.woocommerce-checkout .woocommerce-error a {
    color: var(--dh-accent) !important;
    text-decoration: underline !important;
}

/* ── Payment box: target AuthNet's specific class (the cream box bug) ────── */
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment .payment_box.payment_method_authnet,
body.woocommerce-checkout #payment div.payment_box.payment_method_authnet {
    background-color: var(--dh-base-light) !important;
    color: var(--dh-text) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    padding: 1.25rem 1.5rem !important;
    margin-top: 0.75rem !important;
}
body.woocommerce-checkout #payment .payment_box::before,
body.woocommerce-checkout #payment .payment_box.payment_method_authnet::before {
    border: 1em solid var(--dh-base-light) !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
}
body.woocommerce-checkout #payment .payment_box p,
body.woocommerce-checkout #payment .payment_box label {
    color: var(--dh-text) !important;
}
body.woocommerce-checkout #payment .payment_box p:first-child {
    color: var(--dh-text-muted) !important;
    margin-bottom: 1rem !important;
}

/* ── AuthNet credit-card form: card number, expiry, CVC fields ───────────── */
body.woocommerce-checkout #wc-authnet-cc-form,
body.woocommerce-checkout fieldset.wc-credit-card-form,
body.woocommerce-checkout fieldset.wc-payment-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.woocommerce-checkout #wc-authnet-cc-form .form-row {
    margin-bottom: 1rem !important;
}
body.woocommerce-checkout #wc-authnet-cc-form .form-row label {
    color: var(--dh-text) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.4rem !important;
    display: block !important;
}
body.woocommerce-checkout #wc-authnet-cc-form input[type="tel"],
body.woocommerce-checkout #wc-authnet-cc-form input[type="text"],
body.woocommerce-checkout input[name^="authnet-"] {
    background-color: var(--dh-base) !important;
    color: var(--dh-text) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
}
body.woocommerce-checkout #wc-authnet-cc-form input::placeholder,
body.woocommerce-checkout input[name^="authnet-"]::placeholder {
    color: var(--dh-text-faint) !important;
    opacity: 1 !important;
}
body.woocommerce-checkout #wc-authnet-cc-form input:focus,
body.woocommerce-checkout input[name^="authnet-"]:focus {
    border-color: var(--dh-accent) !important;
    outline: none !important;
}

/* Inline the "*" required indicator instead of letting it float to a new line. */
body.woocommerce-checkout label .required,
body.woocommerce-checkout label abbr.required {
    color: #d9534f !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    margin-left: 0.15rem !important;
    border: none !important;
}

/* Exclude content-bearing checkbox labels from the all-caps form-label
   treatment further down — this hits the T&C "I have read and agree…",
   "Create an account?", "Ship to a different address?", "Remember me"
   labels which were rendering as SHOUTING UPPERCASE. They wrap real
   sentence-cased copy plus an inline link, not a single field name. */
body.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox,
body.woocommerce-checkout label.woocommerce-form__label-for-checkbox,
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text,
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text * {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: var(--dh-text) !important;
    font-weight: 400 !important;
}
body.woocommerce-checkout label.woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    margin-bottom: 0 !important;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--dh-accent) !important;
    text-decoration: underline !important;
}

/* ── Billing/shipping form rows: tighten layout, ensure dark-theme legibility ── */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #order_review_heading {
    color: var(--dh-text) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 1.5rem !important;
    margin: 1.5rem 0 1rem !important;
    border-bottom: 1px solid var(--dh-border) !important;
    padding-bottom: 0.5rem !important;
}
body.woocommerce-checkout .form-row label {
    color: var(--dh-text) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.4rem !important;
}
body.woocommerce-checkout .form-row {
    margin-bottom: 1rem !important;
}
/* The select2 country/state dropdowns are notoriously hard to theme — match
   the dark fields so the selector doesn't read as a foreign white pill. */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
    background-color: var(--dh-base) !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: 0.5rem 0.75rem !important;
    color: var(--dh-text) !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dh-text) !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}
.select2-dropdown {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border) !important;
    color: var(--dh-text) !important;
}
.select2-results__option {
    color: var(--dh-text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dh-accent) !important;
    color: var(--dh-base) !important;
}

/* ── Privacy-policy text under payment ───────────────────────────────────── */
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
    color: var(--dh-text-muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--dh-accent) !important;
    text-decoration: underline !important;
}

/* ── Block-based notice banners (in case Cart/Checkout Blocks render any) ─── */
.wc-block-components-notice-banner.is-error,
.wc-block-components-validation-error {
    background-color: var(--dh-base-light) !important;
    color: var(--dh-text) !important;
    border-top: 3px solid #d9534f !important;
    border-radius: 0 !important;
}
.wc-block-components-notice-banner.is-info {
    background-color: var(--dh-base-light) !important;
    color: var(--dh-text) !important;
    border-top: 3px solid var(--dh-accent) !important;
    border-radius: 0 !important;
}
/* ── /cart-2/ — totals card, headings, table — match checkout treatment ─── */
body.woocommerce-cart .cart_totals {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border) !important;
    padding: 1.5rem !important;
}
body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .woocommerce-cart-form h2,
body.woocommerce-cart h2.cart_totals,
body.woocommerce-cart .cross-sells h2 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--dh-text) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 1.5rem !important;
    margin: 0 0 1rem !important;
    padding: 0 0 0.5rem !important;
    border: none !important;
    border-bottom: 1px solid var(--dh-border) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td,
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td {
    background: transparent !important;
    color: var(--dh-text) !important;
    border-color: var(--dh-border) !important;
}
body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
    color: var(--dh-accent) !important;
    font-weight: 600 !important;
}
body.woocommerce-cart .woocommerce-shipping-calculator a,
body.woocommerce-cart .shipping-calculator-button {
    color: var(--dh-accent) !important;
}
body.woocommerce-cart .woocommerce-cart-form table.cart {
    background-color: var(--dh-base-light) !important;
    border: 1px solid var(--dh-border) !important;
}
body.woocommerce-cart .woocommerce-cart-form table.cart td.actions input.button,
body.woocommerce-cart .woocommerce-cart-form table.cart td.actions button.button {
    background-color: var(--dh-base) !important;
    color: var(--dh-text) !important;
    border: 1px solid var(--dh-accent) !important;
}

/* ── Page-width / responsive gutters — checkout + cart use full width ────── */
/* Astra defaults to 2.5em container padding on tablet/mobile. On a checkout
   that already has a narrow billing form, that padding eats 80px of viewport
   on each side and pushes the layout into a thin column. Tighten it. */
@media (max-width: 921px) {
    body.woocommerce-checkout .ast-container,
    body.woocommerce-cart .ast-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    body.woocommerce-checkout #customer_details {
        margin-bottom: 1.5rem !important;
    }
    body.woocommerce-checkout .col-1,
    body.woocommerce-checkout .col-2 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 1rem !important;
    }
    /* Place Order button — full-width on mobile so the CTA is unmissable. */
    body.woocommerce-checkout #place_order {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        font-size: 0.85rem !important;
    }
}

/* On wide desktop, Astra's narrow-container width caps at 750px which is
   too narrow for a 2-column checkout. Use the normal 1200px container. */
@media (min-width: 1200px) {
    body.woocommerce-checkout .ast-container,
    body.woocommerce-cart .ast-container {
        max-width: var(--ast-normal-container-width, 1200px) !important;
    }
    body.woocommerce-checkout form.checkout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
        gap: 2.5rem !important;
        align-items: start !important;
    }
    body.woocommerce-checkout form.checkout #customer_details {
        grid-column: 1 !important;
    }
    body.woocommerce-checkout form.checkout .woocommerce-checkout-review-order,
    body.woocommerce-checkout form.checkout h3#order_review_heading {
        grid-column: 2 !important;
    }
    body.woocommerce-checkout form.checkout .woocommerce-additional-fields {
        grid-column: 1 / -1 !important;
    }
}
/* /CHECKOUT_UX_HARDENING_END */

/* SHOP_CTA_BLOCK_START — Phase 4A — verify.sh sentinel: dh-shop-cta */
/* In-article CTA block injected at the top of long-form blog posts (manually
   on /is-thca-legal/ via wp post update; future posts can use the same
   <aside class="dh-shop-cta"> markup). Brand-aligned with --dh-accent + the
   editorial-disclaimer pattern. */
.dh-shop-cta {
    margin: 2rem 0 2.5rem;
    padding: 1.75rem 2rem;
    border-top: 3px solid var(--dh-accent, #6b9b6b);
    background: linear-gradient(180deg, rgba(107,155,107,0.06), rgba(0,0,0,0));
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
}
.dh-shop-cta h3 {
    margin: 0 0 0.6rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.005em;
    color: var(--dh-text, hsl(36,38%,93%));
}
.dh-shop-cta > p {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: hsla(36,38%,93%,0.8);
    text-transform: none;
    letter-spacing: normal;
}
.dh-shop-cta .dh-shop-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0;
}
.dh-shop-cta .dh-btn-primary,
.dh-shop-cta .dh-btn-secondary {
    display: inline-block;
    padding: 0.7rem 1.25rem;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    line-height: 1.2;
}
.dh-shop-cta .dh-btn-primary {
    background: var(--dh-accent, #6b9b6b);
    color: #fff;
    border: 1px solid var(--dh-accent, #6b9b6b);
}
.dh-shop-cta .dh-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.dh-shop-cta .dh-btn-secondary {
    background: transparent;
    color: var(--dh-text, hsl(36,38%,93%));
    border: 1px solid hsla(36,38%,93%,0.3);
}
.dh-shop-cta .dh-btn-secondary:hover {
    border-color: var(--dh-accent, #6b9b6b);
    color: var(--dh-accent, #6b9b6b);
    transform: translateY(-1px);
}
@media (max-width: 600px) {
    .dh-shop-cta {
        padding: 1.25rem 1.25rem;
    }
    .dh-shop-cta h3 {
        font-size: 1.2rem;
    }
    .dh-shop-cta .dh-shop-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .dh-shop-cta .dh-btn-primary,
    .dh-shop-cta .dh-btn-secondary {
        text-align: center;
        width: 100%;
    }
}
/* /SHOP_CTA_BLOCK_END */