/* ==========================================================================
   MAIN SYSTEM MODULE - CORE INTERFACES & TWO-TIER STICKY MENUS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CORE CONDITIONAL WRAPPER CLEANUPS
   -------------------------------------------------------------------------- */
#main, #primary, #content, .site-main, .post-type-archive-product #content {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   2. CAPSULE ANNOUNCEMENT PILL BAR
   -------------------------------------------------------------------------- */
.top-announcement-bar-capsule-wrapper {
    margin-top: 15px !important; 
    margin-bottom: 10px !important;
    clear: both;
}

.announcement-pill-inner {
    width: 100% !important;
    background-color: var(--brand-accent-theme, #d1f1bd) !important; /* Theme Color Code Branded Background */
    border-radius: 30px !important;       /* Forces the capsule shape curves */
    padding: 10px 20px !important;         
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(106, 153, 78, 0.02);
}

.announcement-text-content {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--brand-primary-font, #6a994e) !important; /* Font Color Code Branded Text */
    line-height: 1.4 !important;
    display: inline-block;
}

.announcement-register-cta-link {
    color: var(--brand-primary-font, #6a994e) !important;            
    text-decoration: none !important;
    font-weight: 700 !important;
    margin-left: 12px !important;         
    display: inline-block;
}

.cta-arrow-pointer {
    font-size: 11px !important;
    margin-left: 4px !important;
    display: inline-block;
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   3. TWO-TIER NAVIGATION MENUS SYSTEM
   -------------------------------------------------------------------------- */
.two-tier-header {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    padding: 0 !important; 
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;           
    z-index: 999 !important;
}

/* Tier 1: Top Branding, Search and Transactional Elements */
.header-top-row {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid #f8fafc;
}

.header-top-row .header-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo Group Side-By-Side Alignments */
.logo-brand-block {
    display: inline-block !important;
    min-width: 260px !important;
    height: auto !important;
}

/* ==========================================================================
   REGISTERED TRADEMARK SYMBOL TYPOGRAPHY FORMATTING
   ========================================================================== */

.brand-trademark-symbol {
    font-size: 11px !important;       /* Scales the trademark icon down beautifully */
    vertical-align: super !important; /* Lifts the symbol into a clean superscript alignment height */
    margin-left: 2px !important;      /* Subtle kerning spacing gap separator */
    color: var(--brand-primary-font, #6a994e) !important;
    display: inline-block !important;
    line-height: 1 !important;
}


.brand-flex-align-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    width: max-content;
}

/* Hard 72px dimension locks applied directly to your image targets */
.hijama-header-logo-graphic,
.logo-brand-block .custom-logo-link img {
    width: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Site title configured with geometric sans-serif properties */
.brand-text-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; /* Strict Sans-Serif font requirement */
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--brand-primary-font, #6a994e) !important; /* Font Color Code Branded Text */
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
}

.logo-dot { 
    color: var(--brand-accent-theme, #d1f1bd) !important; /* Branded theme green dot accent */
}

/* Upper Search Bar Capsule */
.header-top-row .header-search-bar-wrapper {
    flex: 0 1 450px; 
    margin: 0 40px;
    width: 100%;
}

.woocommerce-product-search-form {
    width: 100%;
    display: block;
}

.search-form-input-inner {
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 25px !important;
    padding: 2px 4px 2px 16px !important;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-form-input-inner:focus-within {
    border-color: var(--brand-primary-font, #6a994e) !important;
    box-shadow: 0 0 0 3px rgba(106, 153, 78, 0.06) !important;
}

.search-field-input {
    width: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--brand-primary-font, #6a994e) !important;
    padding: 8px 0 !important;
    height: auto !important;
}

.search-field-input::placeholder { color: #94a3b8; }

.search-submit-action-btn {
    background-color: var(--brand-primary-font, #6a994e) !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

.header-top-row .header-utilities { display: flex !important; align-items: center !important; }
.utility-icon-link { font-size: 18px; color: var(--brand-primary-font, #6a994e); }
.cart-link { position: relative; }

.cart-pill-count {
    position: absolute;
    top: -8px; right: -12px;
    background-color: var(--brand-primary-font, #6a994e);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    width: 15px; height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tier 2: Lower Header Menu Row */
.header-bottom-row {
    width: 100%;
    padding: 12px 0;
    background-color: #ffffff;
}

.header-bottom-row .header-container {
    display: flex !important;
    justify-content: center !important; 
}

/* Header menu links configured with custom font & interactive colors */
.hijama-nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important; 
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hijama-nav-menu a {
    font-family: 'Varela Round', sans-serif !important; /* Strict Varela Round font requirement */
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 4px 0;
    text-transform: capitalize;
    transition: color 0.15s ease-in-out;
    
    /* 1. Base Menu Text Color */
    color: #6a994e !important; /* Your Custom Font Color Code Choice */
}

/* 2. Menu Text Color on Hover Interaction */
.hijama-nav-menu a:hover {
    color: #B6B6B6 !important; /* Your Custom Grey Hover Color Choice */
}

/* 3. Menu Text Color on Active/Click Interaction */
.hijama-nav-menu a:active,
.hijama-nav-menu li.current-menu-item a {
    color: #abe687 !important; /* Your Custom Light Green Click Color Choice */
}

/* --------------------------------------------------------------------------
   4. MARQUEE SCROLLER CALIBRATIONS
   -------------------------------------------------------------------------- */
.global-category-scroller-layout {
    top: 114px !important; /* Syncs height to float cleanly beneath your two-tier header on scroll */
}