/**
 * BB Shopping Flow - CSS - V2.9.52
 * 
 * Purpose: Complete PMS UI styling using Elementor global variables
 * 
 * DESIGN STANDARDS COMPLIANCE:
 * - NO hard-coded styles (colors, fonts, spacing) - use Elementor global variables only
 * - !important used ONLY where documented as necessary exception (see below)
 * - Responsive design (mobile-first approach)
 * 
 * DOCUMENTED !IMPORTANT EXCEPTIONS:
 * - Lines 126-147: Required to override plugin-generated inline styles (style="display: block;")
 *   that we cannot control. WooCommerce/APFS inject inline styles on quantity div.
 * - Lines 785-786: Required to override Elementor post CSS which sets border: 0 on variation selects.
 *   Elementor uses ::before pseudo-element for decorative borders instead.
 * - Lines 806-812: Hide Elementor's td.value::before decorative border (we use real border instead).
 * - Lines 1101-1104: Required to hide CheckoutWC shipping address when subscription delivery selected.
 *   CheckoutWC uses inline styles and high-specificity selectors.
 * 
 * Changelog:
 * - V2.9.52: ATS subscription dropdown - remove max-width, let it fill container
 * - V2.9.51: My Account subscription page styling
 *   - Content wrapper left padding for better readability
 *   - Table header labels: larger, medium weight
 * - V2.9.50: Toolbox popup button polish
 *   - Increased gap between buttons (16px → 24px)
 *   - Used inline-flex with align-items/justify-content for consistent height
 *   - Added line-height: 1 and min-height for uniform sizing
 *   - Increased padding and min-width for better proportions
 * - V2.9.49: Toolbox popup - use 3-class selector for higher specificity
 * - V2.9.48: Fix Toolbox popup selector specificity (insufficient)
 * - V2.9.47: Clean Toolbox popup styling (no !important needed)
 * - V2.9.46: Fix Toolbox popup button styling (workaround for Elementor)
 * - V2.9.45: Add !important to Toolbox popup buttons
 * - V2.9.44: Fix Toolbox popup styling for anchor element
 * - V2.9.43: Toolbox popup button styling
 * - V2.9.42: Hide APFS price extension
 * - V2.9.36: Checkout ship-with-sub block - removed background
 *   - Gift card uses .elementor-product-simple despite being "variable" in WooCommerce
 *   - Exception on simple product rules (not variable) is correct
 *   - Reverted V2.9.31 variable product changes
 *   - See Kludges_To_Remember.md K001
 * - V2.9.31: Gift card fix correction (INCORRECT - wrong DOM analysis)
 * - V2.9.30: Gift card exception for simple product hiding (was correct, shouldn't have changed)
 * - V2.9.29: Order summary ship info message
 *   - Added .bb-order-summary-ship-info for message below order total
 *   - Shows "Ships with #ID currently scheduled release date: DATE"
 * - V2.9.28: Ship With Next wayfinding message (replaces checkbox)
 *   - Added .bb-ship-with-next-message container
 *   - Added .bb-message-row for emoji + text + tooltip layout
 *   - Indented under ONE_TIME to match previous checkbox position
 *   - Retained .bb-cart-shipping-mode and .bb-checkbox-row styles (unused but harmless)
 * - V2.9.27: Checkout Subscription Delivery styles
 *   - .bb-checkout-ship-with-sub container (matches product page pattern)
 *   - Checkbox row, dropdown, address display
 *   - Hide when Pickup selected (.cfw-pickup-selected)
 *   - Hide shipping address when checked (.bb-cart-mode-ship-with-next)
 * - V2.9.26: Remove ineffective Tippy z-index CSS
 *   - Tippy applies z-index inline, CSS can't override
 *   - z-index now set in tippy-config.js
 * - V2.9.25: Fix Tippy z-index for CheckoutWC side cart (moved to JS)
 * - V2.9.24: CheckoutWC side cart tooltip override
 *   - Added #cfw-side-cart .bb-tooltip-trigger reset
 *   - CheckoutWC applies aggressive styling to elements in side cart
 *   - Coupled to CheckoutWC ID (fragile but necessary)
 * - V2.9.23: Fix tooltip button styling in side cart
 *   - Added button reset (background: none, padding: 0) to .bb-tooltip-trigger
 *   - Side cart context was showing default browser button styles
 * - V2.9.22: Fix emoji shrinking when message text wraps
 *   - Added flex-shrink: 0 to .bb-wayfinding-emoji
 * - V2.9.21: Add cart message styles for CheckoutWC side cart
 *   - .bb-cart-message adds background and margin context to wayfinding base styles
 *   - Reuses .bb-wayfinding-message, .bb-wayfinding-emoji, .bb-wayfinding-text
 * - V2.9.20: Wayfinding message spacing and link styling
 *   - Reduced padding from spacing-sm to spacing-xs (tighter between related messages)
 *   - Added link styling for inline links in message text
 * - V2.9.19: Fix wayfinding message tooltip alignment
 *   - Added width: 100% to .bb-wayfinding-message
 *   - Short messages now stretch to full container width
 *   - Tooltips align with PMS tooltip icons
 * - V2.9.18: Add subscriber coupon message visibility rules
 *   - Rules based on user state + product category (roasted coffee vs not)
 *   - See Subscriber_Coupon_Messages_Spec.md V1.3
 * - V2.9.17: Fix tooltip vertical alignment + add cart shipping dropdown
 *   - Moved indent from .bb-cart-shipping-mode container to label
 *   - Tooltip icons now align vertically across all PMS choices
 *   - Added missing .bb-cart-shipping-dropdown styling (max-width: 380px)
 * - V2.9.16: Add missing .bb-checkbox-row styling (compaction victim)
 *   - Flex row keeps checkbox + label + tooltip on same line
 * - V2.9.15: Restore V2.8.2 styles lost in compaction disaster
 *   - Tooltip trigger: outline style (border only, no fill)
 *   - Tippy theme: 'light' not 'bb' (matches tippy-config.js)
 *   - Note: V2.8.2 → V2.9.6 changes were lost; this restores correct styling
 * - V2.9.14: Fix variations layout
 *   - Changed flex-direction: column to row (label left of dropdown)
 *   - Added full specificity to all .variations rules
 *   - Label wraps naturally (white-space: normal)
 * - V2.9.13: Fix .variations border specificity
 *   - Match WooCommerce/Astra specificity: .woocommerce-js div.product form.cart .variations
 * - V2.9.12: Fix orphaned .bb-legacy-atc selector (class never existed in DOM)
 *   - Changed `.bb-legacy-atc .variations` to `form.cart .variations`
 *   - Now border-bottom: none actually applies
 * - V2.9.11: Remove single_variation margin-bottom (prep for Wayfinding messages)
 * - V2.9.10: Layout spacing fixes
 *   - Empty .dom-message-injection-site collapsed (flex gap fix)
 *   - Removed .variations border-bottom (faint horizontal rule)
 * - V2.9.9: Removed toggle button CSS (now URL param debug mode)
 * - V2.9.8: Variation dropdown styling (.variations select)
 * - V2.9.7: Legacy Controls hiding for simple products
 * - V2.9.6: Certification bands hidden for tea/merchandise
 * - V2.7.0: Style polish
 *   - CTA button now full width (prevents size jumping on label change)
 *   - Cart Shipping Mode vertical line hidden until checkbox is checked (.bb-checked class)
 * - V2.6.0: Added Cart Shipping Mode checkbox styling
 * - V2.5.2: Fixed variation label alignment
 * - V2.5.1: Removed !important from price styling (not needed)
 * - V2.5.0: WooCommerce price typography styling
 * - V2.4.0: Dropdown styling improvements for consistency
 * - V2.3.0: Prepare CSS for dropdown separation
 * - V2.1.9: Removed tooltip hover bubble border
 * - V2.1.8: Hide WooCommerce "View cart" link
 * - V2.0.0: Complete PMS UI styling with Elementor global variables
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES FALLBACKS
   Note: These should be defined in Elementor but we provide safe fallbacks
   ============================================================================= */

:root {
   /* Colors - fallback to site colors if Elementor vars not available */
   --e-global-color-primary: #283618;
   --e-global-color-secondary: #606C38;
   --e-global-color-text: #556048;
   --e-global-color-accent: #DD823B;
   
   /* Spacing scale - fallback values */
   --e-global-spacing-xs: 0.25rem;
   --e-global-spacing-sm: 0.5rem;
   --e-global-spacing-md: 1rem;
   --e-global-spacing-lg: 1.5rem;
   --e-global-spacing-xl: 2rem;
   
   /* Typography - fallback to system fonts */
   --e-global-typography-primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --e-global-typography-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =============================================================================
   ELEMENTOR LAYOUT FIXES
   ============================================================================= */

/**
 * Remove single_variation margin-bottom
 * WooCommerce adds margin-bottom: 1.2em to .single_variation
 * We manage spacing via Wayfinding messages container
 */
.woocommerce-js div.product form.cart .single_variation_wrap .single_variation {
   margin-bottom: 0;
}

/**
 * Collapse empty message injection container
 * Problem: Elementor flex gap applies even to empty containers
 * Solution: Hide container when it has no child elements (whitespace ignored)
 */
.dom-message-injection-site:not(:has(*)) {
   display: none;
}

/**
 * Remove variations table border
 * WooCommerce/Astra adds border-bottom via .woocommerce-js div.product form.cart .variations
 * We match that specificity to override without !important
 */
.woocommerce-js div.product form.cart .variations {
   border-bottom: none;
}

/* =============================================================================
   WOOCOMMERCE PRICE STYLING
   ============================================================================= */

/**
 * Style WooCommerce product price using Elementor Page Heading 0 typography
 * Target: Price display in product summary area (above PMS)
 * 
 * Specificity Strategy:
 * - WooCommerce uses: .woocommerce-js div.product span.price
 * - We use same specificity: .woocommerce-js div.product p.price, span.price
 * - Our plugin loads after WooCommerce, so our rules win
 * - No !important needed (WooCommerce doesn't use inline styles here)
 */
.woocommerce-js div.product p.price,
.woocommerce-js div.product span.price {
   font-family: var(--e-global-typography-79e41cb-font-family, 'Poppins', sans-serif);
   font-size: var(--e-global-typography-79e41cb-font-size, 30px);
   font-weight: var(--e-global-typography-79e41cb-font-weight, 400);
   line-height: var(--e-global-typography-79e41cb-line-height, 1.2);
}

/* =============================================================================
   LEGACY CONTROLS VISIBILITY
   ============================================================================= */

/**
 * Default state: Hide legacy controls
 */

/* APFS Controls */
.wcsatt-options-wrapper {
   display: none;
}

/* APFS Price Extension ("— or subscribe to save 10%") */
.wcsatt-sub-options,
.wcsatt-sub-discount {
   display: none;
}

/* Toolbox Controls */
.jgtb-add-to-subscription {
   display: none;
}

/* WooCommerce Legacy Quantity (inline style="display: block;" requires !important) */
.woocommerce-variation-add-to-cart .quantity {
   display: none !important;
}

/* WooCommerce Legacy Add to Cart Button */
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
   display: none !important;
}

/* Simple product quantity and button (no .woocommerce-variation-add-to-cart wrapper) */
/* KLUDGE: Exclude gift card (bb-product-giftcard) - needs native WooCommerce add-to-cart */
body:not(.bb-product-giftcard) .elementor-product-simple form.cart > .quantity {
   display: none !important;
}

body:not(.bb-product-giftcard) .elementor-product-simple form.cart > .single_add_to_cart_button {
   display: none !important;
}

/* WooCommerce "View cart" link (appears after adding to cart) */
.added_to_cart {
   display: none !important;
}

/**
 * Debug state: Show legacy controls when toggle is active
 * Body class added via JavaScript toggle
 */
body.bb-show-legacy-controls .wcsatt-options-wrapper,
body.bb-show-legacy-controls .jgtb-add-to-subscription,
body.bb-show-legacy-controls .woocommerce-variation-add-to-cart .quantity,
body.bb-show-legacy-controls .woocommerce-variation-add-to-cart .single_add_to_cart_button,
body.bb-show-legacy-controls .elementor-product-simple form.cart > .quantity,
body.bb-show-legacy-controls .elementor-product-simple form.cart > .single_add_to_cart_button {
   display: block !important;
}

/* =============================================================================
   PMS CONTAINER
   ============================================================================= */

.bb-pms-container {
   font-family: var(--e-global-typography-text-font-family);
   color: var(--e-global-color-text);
   margin: var(--e-global-spacing-lg) 0;
   width: 100%;
   max-width: 100%;
}

/* =============================================================================
   PMS HEADER (DEV-ONLY LEGACY TOGGLE)
   Note: This entire section will be hidden in production
   ============================================================================= */

/* =============================================================================
   PMS CHOICES (RADIO BUTTONS)
   ============================================================================= */

.bb-pms-choices {
   display: flex;
   flex-direction: column;
   gap: var(--e-global-spacing-md);
   margin-bottom: var(--e-global-spacing-lg);
}

.bb-pms-choice {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--e-global-spacing-sm);
}

/* Wrapper for radio + label + tooltip (keeps them on one line) */
.bb-choice-row {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--e-global-spacing-sm);
   width: 100%;
}

/* Radio button input styling */
.bb-pms-choice input[type="radio"] {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

/* Custom radio button label */
.bb-choice-row > label {
   position: relative;
   padding-left: calc(var(--e-global-spacing-lg) + var(--e-global-spacing-sm));
   cursor: pointer;
   font-family: var(--e-global-typography-text-font-family);
   font-size: 1rem;
   font-weight: 500;
   color: var(--e-global-color-text);
   display: flex;
   align-items: center;
   flex-grow: 1;
   gap: var(--e-global-spacing-sm);
   line-height: 1.2;
   min-height: var(--e-global-spacing-lg);
}

/* Custom radio button circle */
.bb-choice-row > label::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: var(--e-global-spacing-lg);
   height: var(--e-global-spacing-lg);
   border: 2px solid var(--e-global-color-secondary);
   border-radius: 50%;
   background: white;
   transition: all 0.2s ease;
}

/* Custom radio button center dot */
.bb-choice-row > label::after {
   content: '';
   position: absolute;
   left: var(--e-global-spacing-sm);
   top: 50%;
   transform: translateY(-50%) scale(0);
   width: var(--e-global-spacing-md);
   height: var(--e-global-spacing-md);
   border-radius: 50%;
   background: var(--e-global-color-accent);
   transition: transform 0.2s ease;
}

/* Checked state */
.bb-pms-choice input[type="radio"]:checked + label::before {
   border-color: var(--e-global-color-accent);
   border-width: 2px;
}

.bb-pms-choice input[type="radio"]:checked + label::after {
   transform: translateY(-50%) scale(1);
}

/* Hover state */
.bb-choice-row > label:hover::before {
   border-color: var(--e-global-color-accent);
}

/* Focus state for accessibility */
.bb-pms-choice input[type="radio"]:focus + label::before {
   border-color: var(--e-global-color-accent);
   box-shadow: 0 0 0 3px rgba(221, 130, 59, 0.1);
}

/* =============================================================================
   CART SHIPPING MODE CHECKBOX (under ONE_TIME)
   ============================================================================= */

/**
 * Cart Shipping Mode: Checkbox with vertical connector line
 * Shows only for Active Subscribers when ONE_TIME is selected
 * Visual design: indented with vertical line connecting to parent option
 */

.bb-cart-shipping-mode {
   display: none; /* Hidden by default, shown via JS when applicable */
   position: relative;
   margin-top: var(--e-global-spacing-xs);
}

/* Wrapper for checkbox + label + tooltip (keeps them on one line) */
.bb-checkbox-row {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--e-global-spacing-sm);
   width: 100%;
}

/* Vertical connecting line - hidden until checked */
.bb-cart-shipping-mode::before {
   content: '';
   position: absolute;
   left: calc(var(--e-global-spacing-lg) / 2);
   top: calc(-1 * var(--e-global-spacing-xs));
   width: 2px;
   height: calc(100% + var(--e-global-spacing-xs));
   background: transparent; /* Hidden by default */
   transition: background 0.2s ease;
}

/* Show vertical line when checkbox is checked */
.bb-cart-shipping-mode.bb-checked::before {
   background: var(--e-global-color-accent);
}

.bb-cart-shipping-mode label {
   position: relative;
   /* Indent applied to label, not container - keeps tooltip aligned */
   padding-left: calc(var(--e-global-spacing-lg) + var(--e-global-spacing-lg) + var(--e-global-spacing-sm));
   cursor: pointer;
   font-family: var(--e-global-typography-text-font-family);
   font-size: 0.9rem;
   color: var(--e-global-color-text);
   display: flex;
   align-items: center;
   flex-grow: 1;
   gap: var(--e-global-spacing-sm);
}

/* Custom checkbox square */
.bb-cart-shipping-mode label::before {
   content: '';
   position: absolute;
   left: calc(var(--e-global-spacing-lg) + var(--e-global-spacing-sm));
   top: 50%;
   transform: translateY(-50%);
   width: var(--e-global-spacing-md);
   height: var(--e-global-spacing-md);
   border: 2px solid var(--e-global-color-secondary);
   border-radius: 3px;
   background: white;
   transition: all 0.2s ease;
}

/* Checkmark (hidden by default) */
.bb-cart-shipping-mode label::after {
   content: '';
   position: absolute;
   left: calc(var(--e-global-spacing-lg) + var(--e-global-spacing-sm) + 5px);
   top: 50%;
   transform: translateY(-60%) rotate(45deg) scale(0);
   width: 5px;
   height: 9px;
   border: solid var(--e-global-color-accent);
   border-width: 0 2px 2px 0;
   transition: transform 0.2s ease;
}

/* Hide actual checkbox */
.bb-cart-shipping-mode input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

/* Checked state */
.bb-cart-shipping-mode input[type="checkbox"]:checked + label::before {
   border-color: var(--e-global-color-accent);
}

.bb-cart-shipping-mode input[type="checkbox"]:checked + label::after {
   transform: translateY(-60%) rotate(45deg) scale(1);
}

/* Hover state */
.bb-cart-shipping-mode label:hover::before {
   border-color: var(--e-global-color-accent);
}

/* =============================================================================
   SHIP WITH NEXT WAYFINDING MESSAGE (under ONE_TIME)
   Replaces checkbox - directs subscribers to checkout for shipping choice
   ============================================================================= */

/**
 * Ship With Next Message: Wayfinding message for active subscribers
 * Shows only for Active Subscribers when ONE_TIME is selected
 * Visual design: indented under ONE_TIME option with emoji + text + tooltip
 */

.bb-ship-with-next-message {
   display: none; /* Hidden by default, shown via JS when ONE_TIME selected */
   position: relative;
   margin-top: var(--e-global-spacing-xs);
   /* Indent to align with label text (past the radio button) */
   padding-left: calc(var(--e-global-spacing-lg) + var(--e-global-spacing-sm));
}

/* KLUDGE: Gift cards are virtual/digital - cannot ship with subscription */
body.bb-product-giftcard .bb-ship-with-next-message {
   display: none !important;
}

/* Row layout: emoji + text + tooltip */
.bb-message-row {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--e-global-spacing-sm);
   width: 100%;
}

.bb-message-emoji {
   flex-shrink: 0;
   font-size: calc(var(--e-global-typography-text-font-size, 16px) * 1.2);
   line-height: 1;
}

.bb-message-text {
   flex-grow: 1;
   font-family: var(--e-global-typography-text-font-family);
   font-size: 0.9rem;
   color: var(--e-global-color-text);
}

/* =============================================================================
   CART SHIPPING DROPDOWN (Subscription selector under checkbox)
   ============================================================================= */

.bb-cart-shipping-dropdown {
   margin-top: var(--e-global-spacing-sm);
   /* Align with checkbox text (match label padding-left) */
   padding-left: calc(var(--e-global-spacing-lg) + var(--e-global-spacing-lg) + var(--e-global-spacing-sm));
}

.bb-cart-shipping-dropdown select {
   width: 100%;
   max-width: 380px;
   padding: var(--e-global-spacing-sm) var(--e-global-spacing-md);
   padding-right: calc(var(--e-global-spacing-md) + var(--e-global-spacing-lg));
   font-family: var(--e-global-typography-text-font-family);
   font-size: 0.875rem;
   color: var(--e-global-color-text);
   background: white;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23606C38' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--e-global-spacing-sm) center;
   background-size: 12px;
   border: 1px solid var(--e-global-color-secondary);
   border-radius: var(--e-global-spacing-sm);
   cursor: pointer;
   transition: border-color 0.2s ease;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

.bb-cart-shipping-dropdown select:hover,
.bb-cart-shipping-dropdown select:focus {
   border-color: var(--e-global-color-accent);
   outline: none;
}

/* =============================================================================
   PLAN DROPDOWN (Subscribe New frequency selection)
   ============================================================================= */

.bb-plan-dropdown {
   display: none; /* Hidden until SUBSCRIBE_NEW selected */
   padding-left: calc(var(--e-global-spacing-lg) + var(--e-global-spacing-sm));
   margin-top: var(--e-global-spacing-sm);
}

.bb-plan-dropdown select {
/* MP remove to take up container width 22 Jan 2026 */   
/*   max-width: 280px; */  
   padding: var(--e-global-spacing-sm) var(--e-global-spacing-md);
   padding-right: calc(var(--e-global-spacing-md) + var(--e-global-spacing-lg)); /* Space for chevron */
   font-family: var(--e-global-typography-text-font-family);
   font-size: 0.9375rem;
   color: var(--e-global-color-text);
   background: white;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23606C38' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--e-global-spacing-sm) center;
   background-size: 12px;
   border: 1px solid var(--e-global-color-secondary);
   border-radius: var(--e-global-spacing-sm);
   cursor: pointer;
   transition: border-color 0.2s ease;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

.bb-plan-dropdown select:hover {
   border-color: var(--e-global-color-accent);
}

.bb-plan-dropdown select:focus {
   outline: none;
   border-color: var(--e-global-color-accent);
   box-shadow: 0 0 0 3px rgba(221, 130, 59, 0.1);
}

/* =============================================================================
   SUBSCRIPTION DROPDOWN (Add to Existing subscription selection)
   ============================================================================= */

.bb-subscription-dropdown {
   display: none; /* Hidden until ATS_EXISTING selected */
   padding-left: calc(var(--e-global-spacing-lg) + var(--e-global-spacing-sm));
   margin-top: var(--e-global-spacing-sm);
}

.bb-subscription-dropdown select {
   width: 100%;
/* MP remove to take up container width 22 Jan 2026 */   
   /*   max-width: 280px; */  
   padding: var(--e-global-spacing-sm) var(--e-global-spacing-md);
   padding-right: calc(var(--e-global-spacing-md) + var(--e-global-spacing-lg)); /* Space for chevron */
   font-family: var(--e-global-typography-text-font-family);
   font-size: 0.9375rem;
   color: var(--e-global-color-text);
   background: white;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23606C38' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--e-global-spacing-sm) center;
   background-size: 12px;
   border: 1px solid var(--e-global-color-secondary);
   border-radius: var(--e-global-spacing-sm);
   cursor: pointer;
   transition: border-color 0.2s ease;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

.bb-subscription-dropdown select:hover {
   border-color: var(--e-global-color-accent);
}

.bb-subscription-dropdown select:focus {
   outline: none;
   border-color: var(--e-global-color-accent);
   box-shadow: 0 0 0 3px rgba(221, 130, 59, 0.1);
}

/* =============================================================================
   TOOLTIP STYLING
   ============================================================================= */

/**
 * Tooltip trigger: small "i" icon that shows tooltip on hover
 * Tooltip bubble: Tippy.js handles positioning, we style appearance
 */

.bb-tooltip-trigger {
   /* Button reset */
   background: none;
   padding: 0;
   margin: 0;
   /* Tooltip styling */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 1.5px solid var(--e-global-color-secondary);
   color: var(--e-global-color-secondary);
   font-size: 0.625rem;
   font-weight: 700;
   font-family: var(--e-global-typography-text-font-family);
   cursor: help;
   transition: all 0.2s ease;
   flex-shrink: 0;
   align-self: center;
   margin-left: auto;
}

.bb-tooltip-trigger:hover {
   color: var(--e-global-color-accent);
   border-color: var(--e-global-color-accent);
}

/* =============================================================================
   TIPPY TOOLTIP STYLING
   ============================================================================= */

/* Custom Tippy theme for light tooltips */
.tippy-box[data-theme~='light'] {
   background-color: white;
   color: var(--e-global-color-text);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   font-size: 0.875rem;
   line-height: 1.4;
}

.tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before {
   border-top-color: white;
}

.tippy-box[data-theme~='light'][data-placement^='bottom'] > .tippy-arrow::before {
   border-bottom-color: white;
}

.tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before {
   border-left-color: white;
}

.tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before {
   border-right-color: white;
}

.tippy-box[data-theme~='light'] .tippy-content {
   padding: var(--e-global-spacing-sm) var(--e-global-spacing-md);
   color: var(--e-global-color-text);
}

.tippy-box[data-theme~='light'] a {
   color: var(--e-global-color-primary);
   text-decoration: underline;
}

.tippy-box[data-theme~='light'] a:hover {
   color: var(--e-global-color-accent);
}

/* =============================================================================
   VARIATIONS TABLE STYLING (Product Options)
   ============================================================================= */

/**
 * Style the WooCommerce variations table (Size, Grind, etc.)
 * Target: .variations table in product form
 * Specificity matches WooCommerce/Astra pattern
 */

.woocommerce-js div.product form.cart .variations {
   width: 100%;
   border-collapse: collapse;
}

.woocommerce-js div.product form.cart .variations tr {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--e-global-spacing-md);
   margin-bottom: var(--e-global-spacing-md);
}

.woocommerce-js div.product form.cart .variations th.label {
   text-align: left;
   width: 120px;
   min-width: 80px;
   flex-shrink: 0;
   padding: 0;
}

.woocommerce-js div.product form.cart .variations th.label label {
   font-family: var(--e-global-typography-text-font-family);
   font-size: 0.9375rem;
   font-weight: 500;
   color: var(--e-global-color-text);
   white-space: normal;
   word-wrap: break-word;
}

.woocommerce-js div.product form.cart .variations td.value {
   flex-grow: 1;
}

/* Variation dropdown styling - matches quantity field */
/* NOTE: !important required on border - Elementor post CSS sets border: 0 */
.woocommerce-js div.product form.cart .variations select,
.woocommerce div.product form.cart .variations select,
.elementor-widget-woocommerce-product-add-to-cart .variations select {
   width: 100%;
   padding: var(--e-global-spacing-sm) var(--e-global-spacing-md);
   padding-right: calc(var(--e-global-spacing-md) + var(--e-global-spacing-lg)); /* Space for chevron */
   font-family: var(--e-global-typography-text-font-family);
   font-size: 0.9375rem;
   color: var(--e-global-color-text);
   background: white;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23606C38' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--e-global-spacing-sm) center;
   background-size: 12px;
   border: 1px solid var(--e-global-color-primary, #283618) !important;
   border-radius: 3px !important;
   cursor: pointer;
   transition: border-color 0.2s ease;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

.woocommerce-js div.product form.cart .variations select:hover,
.woocommerce div.product form.cart .variations select:hover,
.elementor-widget-woocommerce-product-add-to-cart .variations select:hover {
   border-color: var(--e-global-color-accent) !important;
}

.woocommerce-js div.product form.cart .variations select:focus,
.woocommerce div.product form.cart .variations select:focus,
.elementor-widget-woocommerce-product-add-to-cart .variations select:focus {
   outline: none;
   border-color: var(--e-global-color-accent) !important;
   box-shadow: 0 0 0 3px rgba(221, 130, 59, 0.1);
}

/* Hide Elementor's decorative ::before pseudo-element border */
.woocommerce-js div.product form.cart .variations td.value::before,
.elementor-widget-woocommerce-product-add-to-cart .variations td.value::before {
   display: none !important;
}

/* =============================================================================
   QUANTITY INPUT
   ============================================================================= */

.bb-pms-quantity {
   display: flex;
   align-items: center;
   gap: var(--e-global-spacing-md);
   margin-bottom: var(--e-global-spacing-lg);
}

.bb-pms-quantity label {
   font-family: var(--e-global-typography-text-font-family);
   font-size: 1rem;
   font-weight: 500;
   color: var(--e-global-color-text);
}

.bb-pms-quantity input[type="number"] {
   width: 80px;
   padding: var(--e-global-spacing-sm) var(--e-global-spacing-md);
   font-family: var(--e-global-typography-text-font-family);
   font-size: 1rem;
   color: var(--e-global-color-text);
   background: white;
   border: 2px solid var(--e-global-color-secondary);
   border-radius: var(--e-global-spacing-sm);
   text-align: center;
   transition: border-color 0.2s ease;
}

.bb-pms-quantity input[type="number"]:hover {
   border-color: var(--e-global-color-accent);
}

.bb-pms-quantity input[type="number"]:focus {
   outline: none;
   border-color: var(--e-global-color-accent);
   box-shadow: 0 0 0 3px rgba(221, 130, 59, 0.1);
}

/* =============================================================================
   CTA BUTTON
   ============================================================================= */

.bb-pms-cta {
   margin-top: var(--e-global-spacing-lg);
}

.bb-add-to-cart {
   width: 100%;
   background: var(--e-global-color-accent);
   color: white;
   border: none;
   border-radius: var(--e-global-spacing-sm);
   padding: var(--e-global-spacing-md) var(--e-global-spacing-xl);
   font-family: var(--e-global-typography-text-font-family);
   font-size: 1.125rem;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease, transform 0.1s ease;
}

.bb-add-to-cart:hover {
   background: var(--e-global-color-primary);
}

.bb-add-to-cart:active {
   transform: scale(0.98);
}

.bb-add-to-cart:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(221, 130, 59, 0.3);
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

/* Mobile: Stack everything, full width */
@media (max-width: 767px) {
   .bb-plan-dropdown select,
   .bb-subscription-dropdown select {
      max-width: 100%;
   }
   
   .bb-add-to-cart {
      width: 100%;
      min-width: 0;
   }
   
   .bb-pms-quantity {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--e-global-spacing-sm);
   }
   
   .bb-pms-quantity input[type="number"] {
      width: 100%;
      max-width: 120px;
   }
}

/* Tablet: Slightly more compact */
@media (min-width: 768px) and (max-width: 1024px) {
   .bb-plan-dropdown select,
   .bb-subscription-dropdown select {
      max-width: 100%;
   }
}

/* Desktop: Optimal spacing (default styles) */
@media (min-width: 1025px) {
   /* Default styles already optimized for desktop */
}

/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================= */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
   .bb-pms-choice > label::before,
   .bb-pms-choice > label::after,
   .bb-tooltip-trigger,
   .bb-add-to-cart {
      transition: none;
   }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   .bb-pms-choice > label::before {
      border-width: 3px;
   }
   
   .bb-plan-dropdown select,
   .bb-subscription-dropdown select,
   .bb-pms-quantity input[type="number"] {
      border-width: 3px;
   }
}

/* =============================================================================
   CERTIFICATION BADGES (Facts Provider driven)
   ============================================================================= */

/*
 * Badge visibility controlled by body classes from Facts Provider:
 * - bb-tag-certified-fair-trade → show triple cert, hide dual cert
 * - bb-tag-decaf → show decaf badge
 * - bb-category-6-tea OR bb-category-5-merchandise → hide all cert bands
 * 
 * Elementor setup:
 * - Add class "bb-cert-triple" to triple certification image
 * - Add class "bb-cert-dual" to dual certification image  
 * - Add class "bb-decaf-badge" to decaf badge image
 */

/* Default: hide all badges */
.bb-cert-triple,
.bb-cert-dual,
.bb-decaf-badge {
   display: none;
}

/* Show dual cert by default (most products) */
.bb-cert-dual {
   display: block;
}

/* Fair trade products: show triple, hide dual */
body.bb-tag-certified-fair-trade .bb-cert-triple {
   display: block;
}

body.bb-tag-certified-fair-trade .bb-cert-dual {
   display: none;
}

/* Tea and Merchandise: hide all certification bands */
body.bb-category-6-tea .bb-cert-triple,
body.bb-category-6-tea .bb-cert-dual,
body.bb-category-5-merchandise .bb-cert-triple,
body.bb-category-5-merchandise .bb-cert-dual {
   display: none;
}

/* Decaf products: show decaf badge (category OR tag) */
body.bb-tag-decaf .bb-decaf-badge,
body.bb-category-3-decaf-coffee .bb-decaf-badge {
   display: block;
}

/* =============================================================================
   WAYFINDING MESSAGES
   ============================================================================= */

/*
 * Standardized contextual help messages.
 * Visibility controlled by inline CSS generated from config file.
 * See: includes/config-wayfinding-messages.php
 */

.bb-wayfinding-message {
   display: flex;
   align-items: center;
   gap: var(--e-global-spacing-sm);
   padding: var(--e-global-spacing-xs) 0;
   width: 100%;
   font-family: var(--e-global-typography-text-font-family);
   font-size: var(--e-global-typography-text-font-size, 16px);
   color: var(--e-global-color-text);
}

.bb-wayfinding-emoji {
   flex-shrink: 0;
   font-size: calc(var(--e-global-typography-text-font-size, 16px) * 1.2);
   line-height: 1;
}

.bb-wayfinding-text {
   flex-grow: 1;
   font-size: var(--e-global-typography-text-font-size, 16px);
}

.bb-wayfinding-text a {
   color: var(--e-global-color-secondary);
   text-decoration: underline;
}

.bb-wayfinding-text a:hover {
   color: var(--e-global-color-primary);
}

/* Tooltip trigger inherits existing .bb-tooltip-trigger styles */

/* =============================================================================
   SUBSCRIBER COUPON MESSAGE VISIBILITY RULES
   
   Based on: User state + Product category
   Rules from: Subscriber_Coupon_Messages_Spec.md V1.3
   ============================================================================= */

/*
 * Rule 1: Gift Card - no messages
 * (handled by default hidden state - no show rule)
 */

/*
 * Rule 2: Active Subscriber - show subscriber-coupon-active
 * Except gift card
 */
body.bb-user-subscriber:not(.bb-product-giftcard) .bb-wayfinding-subscriber-coupon-active {
   display: flex;
}

/*
 * Rule 3: Non-subscriber + Roasted Coffee - show subscriber-coupon-subscribe
 * Except gift card
 */
body:not(.bb-user-subscriber).bb-product-roasted-coffee:not(.bb-product-giftcard) .bb-wayfinding-subscriber-coupon-subscribe {
   display: flex;
}

/*
 * Rule 4: Non-subscriber + NOT Roasted Coffee - show subscriber-coupon-general
 * Except gift card, Christmas coffee
 */
body:not(.bb-user-subscriber):not(.bb-product-roasted-coffee):not(.bb-product-giftcard):not(.bb-product-christmas) .bb-wayfinding-subscriber-coupon-general {
   display: flex;
}

/*
 * Rule 5: Christmas Coffee + Non-subscriber - no messages
 * (handled by :not(.bb-product-christmas) in Rule 4)
 */

/*
 * Rule 6: Logged out + coupon message shown - also show logged-out-prompt
 * Must have roasted coffee OR (not roasted AND not gift card AND not christmas)
 */
body:not(.bb-user-logged-in).bb-product-roasted-coffee:not(.bb-product-giftcard) .bb-wayfinding-logged-out-prompt {
   display: flex;
}

body:not(.bb-user-logged-in):not(.bb-product-roasted-coffee):not(.bb-product-giftcard):not(.bb-product-christmas) .bb-wayfinding-logged-out-prompt {
   display: flex;
}

/* =============================================================================
   CART MESSAGE STYLES (CheckoutWC Side Cart)
   
   Context-specific styling for wayfinding messages in cart.
   Base styles inherited from .bb-wayfinding-message framework.
   See: class-cart-messages.php
   ============================================================================= */

/*
 * Cart message container - adds background and margins
 * Base layout from .bb-wayfinding-message (flex, gap, etc.)
 */
.bb-cart-message {
   background-color: var(--e-global-color-light, #f5f5f5);
   border-radius: 4px;
   padding: var(--e-global-spacing-xs, 8px) var(--e-global-spacing-sm, 12px);
   margin-bottom: var(--e-global-spacing-sm, 12px);
}

/*
 * Subscriber coupon message - near totals, different margin
 */
.bb-cart-message--coupon {
   margin-top: var(--e-global-spacing-sm, 12px);
   margin-bottom: 0;
}

/*
 * CheckoutWC Side Cart - Tooltip trigger override
 * CheckoutWC applies aggressive button/span styling in side cart context.
 * This reset ensures our tooltip trigger renders correctly.
 * Coupled to CheckoutWC ID (fragile but necessary).
 * 
 * NOTE: Tippy z-index is set in tippy-config.js (CSS can't override inline styles)
 */
#cfw-side-cart .bb-tooltip-trigger {
   background: none;
   border: 1.5px solid var(--e-global-color-secondary);
   border-radius: 50%;
   padding: 0;
   margin: 0;
   width: 18px;
   height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--e-global-color-secondary);
   cursor: help;
}

/* =============================================================================
   CHECKOUT SUBSCRIPTION DELIVERY
   
   "Send with my next subscription order" option at checkout.
   Appears under Ship delivery method for active subscribers.
   See: class-checkout-subscription-delivery.php
   ============================================================================= */

/*
 * Main container - vertical line connects to Ship option when ticked
 */
.bb-checkout-ship-with-sub {
   margin: 0.75em 0 1em 0;
   padding: 1em;
   border-left: 2px solid var(--e-global-color-secondary, #606c38);
}

/*
 * Hide when Pickup delivery method selected
 */
body.cfw-pickup-selected .bb-checkout-ship-with-sub {
   display: none;
}

/*
 * Checkbox + label row
 */
.bb-checkout-ship-row {
   display: flex;
   align-items: center;
   gap: var(--e-global-spacing-sm, 0.5em);
}

.bb-checkout-ship-label {
   display: flex;
   align-items: center;
   gap: var(--e-global-spacing-sm, 0.5em);
   cursor: pointer;
   font-weight: 500;
   color: var(--e-global-color-text, #333);
   flex-grow: 1;
}

.bb-checkout-ship-label input[type="checkbox"] {
   width: 1.25em;
   height: 1.25em;
   accent-color: var(--e-global-color-secondary, #606c38);
   flex-shrink: 0;
}

.bb-checkout-ship-text {
   font-size: var(--e-global-typography-text-font-size, 16px);
}

/*
 * Tooltip trigger - reuses existing .bb-tooltip-trigger base styles
 */
.bb-checkout-ship-row .bb-tooltip-trigger {
   flex-shrink: 0;
}

/*
 * Details section (dropdown + address)
 */
.bb-checkout-ship-details {
   margin-top: 0.75em;
   padding-left: 1.75em;
}

/*
 * Subscription dropdown - matches quantity field style
 */
.bb-checkout-ship-select {
   width: 100%;
   padding: 0.75em 1em;
   border: 1px solid var(--e-global-color-primary, #283618);
   border-radius: 3px;
   font-size: 0.9em;
   background-color: transparent;
   color: var(--e-global-color-text, #333);
   font-family: var(--e-global-typography-text-font-family);
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23606c38' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1em center;
   padding-right: 2.5em;
}

.bb-checkout-ship-select:focus {
   outline: 2px solid var(--e-global-color-secondary, #606c38);
   outline-offset: 2px;
}

/*
 * Address display
 */
.bb-checkout-ship-address {
   margin-top: 0.75em;
   font-size: 0.9em;
}

.bb-checkout-ship-address-label {
   font-weight: 600;
   color: var(--e-global-color-text, #333);
   margin-bottom: 0.25em;
}

.bb-checkout-ship-address-content {
   color: #666;
   line-height: 1.4;
}

/*
 * Hide shipping address form when subscription delivery selected
 * 
 * !important EXCEPTION: CheckoutWC uses high-specificity selectors and
 * inline styles for the shipping address container. We must override.
 */
body.bb-cart-mode-ship-with-next #cfw-customer-info-address {
   display: none !important;
}

/* ============================================================
   ORDER SUMMARY - Ship With Subscription Info
   ============================================================
   Message below trust badges showing subscription ship details.
   V2.9.34: Relocated from order totals table to below trust badges
            Changed to div structure, fixed hard-coded padding
*/

.bb-order-summary-ship-info {
   margin-top: var(--e-global-spacing-xs, 8px);
}

.bb-order-summary-ship-message {
   padding: var(--e-global-spacing-sm, 12px) var(--e-global-spacing-md, 16px);
   text-align: center;
   font-size: var(--e-global-typography-text-font-size, 14px);
   color: var(--e-global-color-text, #283618);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--e-global-spacing-xs, 8px);
}

.bb-ship-info-icon {
   flex-shrink: 0;
}

/* =============================================================================
   TOOLBOX POPUP BUTTONS
   Styles the "Ship Now" confirmation popup from WCS Toolbox plugin
   
   Note: Toolbox plugin CSS loads after ours with:
   .wcs-toolbox-popup-actions .wcs-toolbox-action { background: transparent; padding: 0; ... }
   We use higher specificity (3 classes) to override without !important.
   ============================================================================= */

.wcs-toolbox-popup {
   font-family: var(--e-global-typography-text-font-family, sans-serif);
}

.wcs-toolbox-popup h2 {
   font-family: var(--e-global-typography-primary-font-family, sans-serif);
   color: var(--e-global-color-text, #283618);
   font-size: 1.25rem;
   font-weight: 500;
}

.wcs-toolbox-popup .wcs-toolbox-popup-actions {
   display: flex;
   gap: var(--e-global-spacing-lg, 24px);
   justify-content: center;
   margin-top: var(--e-global-spacing-lg, 24px);
}

/* Base button style - pill outline (3 classes beats Toolbox's 2 classes) */
.wcs-toolbox-popup .wcs-toolbox-popup-actions .wcs-toolbox-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.6em 2em;
   border: 2px solid var(--e-global-color-accent, #DD823B);
   border-radius: 25px;
   background: transparent;
   color: var(--e-global-color-accent, #DD823B);
   font-family: var(--e-global-typography-text-font-family, sans-serif);
   font-size: 1rem;
   font-weight: 500;
   line-height: 1;
   text-decoration: none;
   text-align: center;
   min-width: 6em;
   min-height: 2.5em;
   box-sizing: border-box;
   cursor: pointer;
   transition: all 0.2s ease;
}

/* Hover/focus state - filled */
.wcs-toolbox-popup .wcs-toolbox-popup-actions .wcs-toolbox-action:hover,
.wcs-toolbox-popup .wcs-toolbox-popup-actions .wcs-toolbox-action:focus {
   background: var(--e-global-color-accent, #DD823B);
   color: #fff;
}

/* =============================================================================
   MY ACCOUNT - SUBSCRIPTION PAGE
   Styling for subscription detail tables and content area
   ============================================================================= */

/*
 * Content wrapper padding for better readability
 */
.woocommerce-MyAccount-content-wrapper {
   padding-left: var(--e-global-spacing-md, 20px);
}

/*
 * Improve readability of labels on subscription detail table
 *.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
 */
   .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table {
   font-size: var(--e-global-typography-text-font-size, 16px) !important;
}