/* =====================================================
   Storefront CSS Overrides — Gillmore Aquatics
   Loaded after Storefront to fix default styles
   ===================================================== */

/* ── Remove inward shadows from all inputs ─────────── */
.site input[type="text"],
.site input[type="email"],
.site input[type="tel"],
.site input[type="number"],
.site input[type="password"],
.site input[type="search"],
.site textarea,
.site select,
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="password"],
body input[type="search"],
body textarea {
    box-shadow: none !important;
    -webkit-appearance: none;
}

/* ── Quantity input ──────────────────────────────────── */
.site .quantity input.qty,
body .quantity input.qty,
.quantity input[type="number"] {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    width: 3rem !important;
    text-align: center !important;
    padding: 0 !important;
}

/* ── Remove black focus outline on buttons ───────────── */
.site button:focus,
.site button:focus-visible,
body button:focus,
body button:focus-visible,
.tab-pill:focus,
.tab-pill:focus-visible,
.tab-pill:focus-within,
.btn-primary:focus,
.btn-primary:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ── Tab pill smooth styling ─────────────────────────── */
.tab-pill {
    cursor: pointer !important;
    border: 1px solid #e4beba !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.tab-pill.active {
    background: linear-gradient(135deg, #C62828, #8e0000) !important;
    color: #ffffff !important;
    border-color: #C62828 !important;
}

.tab-pill.inactive {
    background: #f3f3f3 !important;
    color: #4c616c !important;
}

.tab-pill.inactive:hover {
    background: #eeeeee !important;
    border-color: #C62828 !important;
    color: #C62828 !important;
}

/* ── Gillmore quantity wrapper ───────────────────────── */
.gillmore-qty-wrap {
    display: flex !important;
    align-items: center !important;
    background: #f3f3f3 !important;
    border: 1px solid rgba(228,190,186,0.4) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.gillmore-qty-wrap button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0.75rem 1rem !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.gillmore-qty-wrap button:hover {
    background: #eeeeee !important;
}

.gillmore-qty-wrap button:focus,
.gillmore-qty-wrap button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ── PIN code input ──────────────────────────────────── */
#gillmore-pin-input,
#gillmore-pin-input:focus {
    box-shadow: none !important;
    border: 1px solid rgba(228,190,186,0.5) !important;
    outline: none !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 1rem !important;
    background: #ffffff !important;
    -webkit-appearance: none !important;
}

#gillmore-pin-input:focus {
    border-color: #C62828 !important;
    ring: 1px #C62828 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   WOOCOMMERCE VARIATION FORM — SELECT → TAB BUTTONS
   Hides the standard <select> and shows styled option buttons instead
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide the default select dropdown */
.gillmore-variation-select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Hide the default WooCommerce variations table layout */
.variations_form table.variations {
    width: 100% !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 0 1rem 0 !important;
    margin-bottom: 1rem !important;
}

.variations_form table.variations tr {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 1.25rem !important;
}

.gillmore-attr-label {
    padding: 0 0 0.5rem 0 !important;
    border: none !important;
    width: 100% !important;
}

.gillmore-attr-label label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #4c616c !important;
    font-family: Inter, sans-serif !important;
    display: block !important;
}

.gillmore-attr-options {
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

/* The JS-generated tab buttons */
.gillmore-variation-btn {
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #e4beba !important;
    font-family: Inter, sans-serif !important;
    -webkit-tap-highlight-color: transparent !important;
    line-height: 1.5 !important;
}

.gillmore-variation-btn.selected {
    background: linear-gradient(135deg, #C62828, #8e0000) !important;
    color: #ffffff !important;
    border-color: #C62828 !important;
}

.gillmore-variation-btn:not(.selected) {
    background: #f3f3f3 !important;
    color: #4c616c !important;
}

.gillmore-variation-btn:not(.selected):hover {
    background: #eeeeee !important;
    border-color: #C62828 !important;
    color: #C62828 !important;
}

.gillmore-variation-btn.outofstock {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Hide WooCommerce's quantity input — we use our own stepper */
.variations_form .woocommerce-variation-add-to-cart .quantity {
    display: none !important;
}

/* Hide WooCommerce's native add-to-cart button — we use our own */
.variations_form .single_add_to_cart_button {
    display: none !important;
}

/* Hide variation description/price from WooCommerce's wrapper */
/* We display price in our own element above */
.single_variation_wrap .woocommerce-variation.single_variation {
    display: none !important;
}

/* Hide the native form quantity + button for simple product too */
.cart .quantity { display: none !important; }
.cart .single_add_to_cart_button { display: none !important; }

/* Hide native variations table — we replaced it with JS-built buttons */
/* Keep it in DOM for WooCommerce JS to work but invisible to user */
.variations_form table.variations {
    margin: 0 !important;
    padding: 0 !important;
}