/* ============================================================
   Dynamic Theme CSS — generated from Admin Theme Settings
   ============================================================ */

/* ---- CSS Custom Properties (variables) ---- */
:root {
    --hk-primary:        #526733;
    --hk-primary-rgb:    82,103,51;
    --hk-secondary:      #2f3b1d;
    --hk-accent:         #8a681f;
    --hk-danger:         #c0392b;
    --hk-body-bg:        #f7f8f3;
    --hk-card-bg:        #ffffff;
    --hk-text:           #1f2a17;
    --hk-text-muted:     #6d7564;
    --hk-border:         #dde3d4;
    --hk-nav-bg:         #ffffff;
    --hk-link:           #435729;
    --hk-font-size:      14px;
    --hk-heading-size:   22px;
    --hk-nav-font-size:  14px;
    --hk-radius:         8px;
    --hk-font-family:    'Poppins', sans-serif;

    /* ---- Button tokens ---- */
    --hk-btn-bg:         #526733;
    --hk-btn-text:       #ffffff;
    --hk-btn-hover-bg:   #3e4e27;
    --hk-btn-hover-text: #ffffff;
    --hk-btn-border:     #526733;
    --hk-btn-border-w:   1px;
    --hk-btn-fs:         14px;
    --hk-btn-radius:     8px 8px 8px 8px;
}

/* ---- Global body ---- */
body {
    background-color: var(--hk-body-bg) !important;
    color: var(--hk-text) !important;
    font-size: var(--hk-font-size) !important;
    font-family: var(--hk-font-family) !important;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
    color: var(--hk-text) !important;
}
h1 { font-size: var(--hk-heading-size) !important; }

/* ---- Links ---- */
a { color: var(--hk-link) !important; }
a:hover { color: var(--hk-primary) !important; }

/* ---- Navigation ---- */
.header-area, .sticky-bar.stick, nav.header-main-area {
    background-color: var(--hk-nav-bg) !important;
}
.main-menu > nav > ul > li > a,
.main-menu > nav > ul > li > a span {
    font-size: var(--hk-nav-font-size) !important;
    color: var(--hk-text) !important;
}

/* ============================================================
   HK Custom Page Classes — Cart, Checkout, etc.
   ============================================================ */

/* ---- Page backgrounds ---- */
.hk-cart-page,
.hk-checkout-page { background: var(--hk-body-bg) !important; }

/* ---- Dark gradient headers (Cart & Checkout) ---- */
.hk-cart-header,
.hk-checkout-header {
    background: linear-gradient(135deg, var(--hk-secondary) 0%, var(--hk-secondary) 60%, var(--hk-secondary) 100%) !important;
}

/* ---- Cards ---- */
.hk-cart-card,
.hk-checkout-card,
.hk-order-summary-card,
.hk-summary-card,
.hk-trust-badge,
.hk-login-notice,
.hk-shipping-progress-bar {
    background: var(--hk-card-bg) !important;
}

/* ---- Order summary header ---- */
.hk-order-header,
.hk-summary-header {
    background: linear-gradient(135deg, var(--hk-secondary), var(--hk-secondary)) !important;
}

/* ---- Primary accent — icons, badges, gold elements ---- */
.hk-cart-title .fa,
.hk-checkout-title .fa,
.hk-cart-count-badge,
.hk-step-active .hk-step-num,
.hk-shipping-msg .fa,
.hk-progress-fill,
.hk-cart-card-header .fa,
.hk-checkout-card-header .fa,
.hk-option-title .fa,
.hk-order-header .fa,
.hk-trust-badge .fa,
.hk-summary-header .fa,
.hk-cart-item-count .fa,
.hk-login-notice-inner .fa { color: var(--hk-primary) !important; }

.hk-cart-count-badge,
.hk-step-active .hk-step-num {
    background: var(--hk-primary) !important;
    border-color: var(--hk-primary) !important;
}

.hk-progress-fill { background: var(--hk-primary) !important; }

/* ---- Primary buttons ---- */
.hk-qty-btn:hover,
.hk-coupon-btn,
.hk-btn-primary {
    background: var(--hk-primary) !important;
    color: #fff !important;
    border-radius: var(--hk-radius) !important;
}
.hk-coupon-btn:hover { background: var(--hk-primary) !important; opacity:.88; }

/* ---- Accent (success/checkout) buttons ---- */
.hk-checkout-btn,
.hk-place-order-btn,
.hk-shop-now-btn {
    background: linear-gradient(135deg, var(--hk-accent), var(--hk-accent)) !important;
    border-radius: var(--hk-radius) !important;
}

/* ---- Danger ---- */
.hk-remove-btn { color: var(--hk-danger) !important; border-color: var(--hk-danger) !important; }
.hk-remove-btn:hover { background: var(--hk-danger) !important; color: #fff !important; }

/* ---- Grand total value ---- */
.hk-grand-value,
.hk-cart-footer-total { color: var(--hk-primary) !important; }

/* ---- Text ---- */
.hk-cart-product-name,
.hk-order-product-name,
.hk-summary-label,
.hk-grand-label,
.hk-summary-value,
.hk-order-total-row,
.hk-qty-display { color: var(--hk-text) !important; }

.hk-cart-unit-price,
.hk-order-qty-label,
.hk-payment-label,
.hk-secure-note,
.hk-radio-desc,
.hk-radio-extra { color: var(--hk-text-muted) !important; }

/* ---- Borders & dividers ---- */
.hk-summary-divider,
.hk-order-divider { background: var(--hk-border) !important; }

.hk-cart-table thead tr,
.hk-radio-card,
.hk-coupon-input,
.hk-form-input,
.hk-cs-trigger { border-color: var(--hk-border) !important; }

/* ---- Border radius ---- */
.hk-cart-card,
.hk-checkout-card,
.hk-order-summary-card,
.hk-summary-card,
.hk-trust-badge,
.hk-empty-cart-inner,
.hk-cart-thumb,
.hk-order-product-img {
    border-radius: var(--hk-radius) !important;
}

.hk-form-input,
.hk-cs-trigger,
.hk-cs-dropdown,
.hk-coupon-input {
    border-radius: var(--hk-radius) !important;
}

/* ---- Focus / hover ring uses primary color ---- */
.hk-form-input:focus,
.hk-cs-wrap.open .hk-cs-trigger,
.hk-coupon-input:focus {
    border-color: var(--hk-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hk-primary) 15%, transparent) !important;
}

.hk-radio-card:hover,
.hk-cs-wrap.open .hk-cs-trigger {
    border-color: var(--hk-primary) !important;
    background: color-mix(in srgb, var(--hk-primary) 5%, white) !important;
}

.hk-radio-card:has(.hk-radio-input:checked) {
    border-color: var(--hk-primary) !important;
    background: color-mix(in srgb, var(--hk-primary) 5%, white) !important;
}

.hk-radio-input:checked ~ .hk-radio-check {
    border-color: var(--hk-primary) !important;
    background: var(--hk-primary) !important;
}

/* ---- Custom dropdown hover ---- */
.hk-cs-list li:hover { background: color-mix(in srgb, var(--hk-primary) 8%, white) !important; color: var(--hk-primary) !important; }
.hk-cs-list li.selected { background: color-mix(in srgb, var(--hk-primary) 15%, white) !important; color: var(--hk-primary) !important; }

/* ---- Checkout login link ---- */
.hk-login-notice .checkout-click1 { color: var(--hk-primary) !important; }

/* ---- Breadcrumb links ---- */
.hk-breadcrumb a:hover { color: var(--hk-primary) !important; }

/* ---- Continue shopping / login toggle ---- */
.hk-continue-link:hover,
.hk-login-toggle:hover { color: var(--hk-primary) !important; }

/* ---- Body font size propagation ---- */
.hk-cart-product-name,
.hk-order-product-name { font-size: var(--hk-font-size) !important; }

/* ============================================================
   SLICK CAROUSEL DOTS — override global button theme styles
   Loaded last so these always win regardless of theme colors.
   ============================================================ */

/* Reset ALL slick dot buttons — hide numbers, make small circles */
.slick-dots li button {
    background-color: rgba(0, 0, 0, 0.2) !important;
    background-image: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    border-width: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    display: block !important;
    box-shadow: none !important;
    transition: background-color .25s, transform .25s !important;
}

.slick-dots li.slick-active button {
    background-color: var(--hk-btn-bg, #526733) !important;
    transform: scale(1.3) !important;
}

/* Hero slider dots — white dots on dark/image background */
.hero-slider-active-1 .slick-dots li button,
.hero-slider-active-2 .slick-dots li button,
.hero-slider-active-3 .slick-dots li button {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
.hero-slider-active-1 .slick-dots li.slick-active button,
.hero-slider-active-2 .slick-dots li.slick-active button,
.hero-slider-active-3 .slick-dots li.slick-active button {
    background-color: #ffffff !important;
    transform: scale(1.35) !important;
}

/* ============================================================
   INDEX PAGE — Section header h2: strip old theme background
   style.min.css has .section-title h2 { background-color: #0070bc; height: 42px }
   This override is loaded LAST so it always wins.
   ============================================================ */
.hk-index-v2 .hki-header .section-title h2,
.hk-index-v2 .section-title-btn-wrap .section-title h2,
.hk-index-v2 .section-title-tab-wrap .section-title h2 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #1e293b !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: auto !important;
    text-transform: none !important;
}

/* ============================================================
   DARK-BACKGROUND SECTION TEXT CORRECTIONS
   The global h1–h6 { color: !important } and a { color: !important }
   rules above override the white text defined in cart/checkout
   page inline styles. These higher-specificity !important rules
   restore white text inside all dark-gradient page headers.
   ============================================================ */

/* Cart page header */
.hk-cart-header h1,
.hk-cart-header h2,
.hk-cart-header h3,
.hk-cart-header h4,
.hk-cart-header h5,
.hk-cart-header h6 {
    color: #ffffff !important;
}
.hk-cart-header a {
    color: rgba(255, 255, 255, .78) !important;
}
.hk-cart-header a:hover {
    color: #e8a838 !important;
}

/* Checkout page header */
.hk-checkout-header h1,
.hk-checkout-header h2,
.hk-checkout-header h3,
.hk-checkout-header h4,
.hk-checkout-header h5,
.hk-checkout-header h6 {
    color: #ffffff !important;
}
.hk-checkout-header a {
    color: rgba(255, 255, 255, .78) !important;
}
.hk-checkout-header a:hover {
    color: #e8a838 !important;
}

/* Pre-footer subscribe strip — headings & body text on dark gradient */
.hk-prefooter h1,
.hk-prefooter h2,
.hk-prefooter h3,
.hk-prefooter h4,
.hk-prefooter h5,
.hk-prefooter h6 {
    color: #ffffff !important;
}
.hk-prefooter p,
.hk-prefooter label,
.hk-prefooter span:not(.hk-sub-btn) {
    color: rgba(255, 255, 255, .88) !important;
}
.hk-prefooter a {
    color: rgba(255, 255, 255, .88) !important;
}
.hk-prefooter a:hover {
    color: #ffffff !important;
}

/* ============================================================
   DARK FOOTER — override global h1-h6 and a color rules
   .hk-footer-v2 uses dark bg; all text must be light.
   ============================================================ */
.hk-footer-v2 h1, .hk-footer-v2 h2, .hk-footer-v2 h3,
.hk-footer-v2 h4, .hk-footer-v2 h5, .hk-footer-v2 h6 {
    color: #ffffff !important;
}
.hk-footer-v2 p { color: #c4d9c9 !important; }
.hk-footer-v2 a { color: #a8d4b8 !important; }
.hk-footer-v2 a:hover { color: #4ade80 !important; }

/* Copyright bar */
.hk-footer-meta.footer-copy h1, .hk-footer-meta.footer-copy h2,
.hk-footer-meta.footer-copy h3, .hk-footer-meta.footer-copy h4,
.hk-footer-meta.footer-copy h5, .hk-footer-meta.footer-copy h6 {
    color: #ffffff !important;
}
.hk-footer-meta.footer-copy p  { color: #6b8c76 !important; }
.hk-footer-meta.footer-copy a  { color: #27ae60 !important; }
.hk-footer-meta.footer-copy a:hover { color: #4ade80 !important; }