/* ==========================================================================
   GLOBAL RESPONSIVE GUARD, LINK COLORS & RESET RULES
   ========================================================================== */
.product-page-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

/* Exception for the primary brand tag title link to maintain layout hierarchy size */
.product-info-col .brand-tag a {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}
.product-info-col .brand-tag a:hover {
    font-weight: 800 !important; /* Retains structural weight */
}

@media (max-width: 768px) {
    /* Prevents columns from smashing together on mobile viewports */
    .product-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }
}

/* ==========================================================================
   1. PRODUCT IMAGES GALLERY & MOBILE SCALE-UP
   ========================================================================== */

/* Layout arrangement: thumbnails on the left, main image on the right */
.product-images-col .woocommerce-product-gallery {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 16px !important;
    position: relative !important;
}

/* Vertical thumbnail track alignment */
.product-images-col .flex-control-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 70px !important; 
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-images-col .flex-control-nav li {
    width: 100% !important;
    margin: 0 !important;
}

.product-images-col .flex-control-nav li img {
    border: 1px solid var(--color-slate-200) !important;
    border-radius: 6px !important;
    padding: 4px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    height: auto !important;
}

/* Active thumbnail visual indicator state */
.product-images-col .flex-control-nav li img.flex-active,
.product-images-col .flex-control-nav li img:hover {
    border-color: var(--color-brand-green) !important;
    border-width: 1.5px !important;
}

/* Safe Badge Placement over Main Image */
.product-images-col {
    position: relative !important;
}

/* Styled native WooCommerce sale badge to reflect actual dynamic price differences */
.product-images-col .onsale {
    position: absolute !important;
    top: 12px !important;
    left: 98px !important; /* Offset to clear side thumbnails */
    background-color: var(--color-accent-pink) !important;
    color: var(--color-white) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Mobile Photo Optimization: Enlarges image to fill viewport width */
@media (max-width: 768px) {
    .product-images-col .woocommerce-product-gallery {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .product-images-col .flex-control-nav {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .product-images-col .flex-control-nav li {
        width: 65px !important;
    }
    /* Re-aligns dynamic badge to the top corner since thumbnails move below the photo */
    .product-images-col .onsale {
        left: 16px !important;
        top: 16px !important;
    }
}

/* ==========================================================================
   2. RIGHT COLUMN: INFO & PRICING
   ========================================================================== */
.product-info-col .product-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-slate-700);
    line-height: 1.3;
    margin-top: 4px;
}

.product-subtitle {
    font-size: 14px;
    color: var(--color-slate-400);
}

/* Price Block Container formatting */
.price-block {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--color-brand-green) !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
}

/* Isolate the strike-through retail price style */
.price-block del, 
.price-block del .woocommerce-Price-amount {
    font-size: 16px !important;
    color: var(--color-slate-400) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Isolate the active promotional price style */
.price-block ins,
.price-block ins .woocommerce-Price-amount,
.price-block > .woocommerce-Price-amount {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--color-brand-green) !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
}

.price-unit {
    font-size: 13px;
    color: var(--color-slate-400);
    margin-top: 6px;
}

.stock-indicator {
    font-weight: 700;
    color: var(--color-error);
    font-size: 14px;
    margin-top: 4px;
}

.posted_in {
    display: none;
}

/* ==========================================================================
   3. QUANTITY STEPPER FIELD (+ / -) RESTYLING (Requirement 1)
   ========================================================================== */
.add-to-cart-row form.cart {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
    width: 100% !important;
}

/* Clean unified border pill wrapper box with high border-radius to match 100672.jpg */
.add-to-cart-row .quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid var(--color-slate-300) !important;
    border-radius: 12px !important; /* Soft, highly-rounded corners */
    height: 46px !important;
    width: 110px !important;
    overflow: hidden !important;
    background-color: var(--color-white) !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

/* Centered input configuration box — Inner border borders completely removed */
.add-to-cart-row .quantity input.qty {
    width: 40px !important;
    height: 100% !important;
    text-align: center !important;
    border: none !important; /* Removes internal line segments */
    font-weight: 700 !important;
    font-size: 17px !important;
    color: var(--color-slate-700) !important;
    background-color: transparent !important;
    padding: 0 !important;
    -moz-appearance: textfield !important; /* Hides native Firefox arrow spinners */
}

/* Strips ugly native layout browser stepper spinner arrows */
.add-to-cart-row .quantity input.qty::-webkit-outer-spin-button,
.add-to-cart-row .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Elegant styled plus (+) and minus (-) steppers */
.add-to-cart-row .quantity .minus,
.add-to-cart-row .quantity .plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--color-slate-500) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* Clean, modern interactive hover background feedback */
.add-to-cart-row .quantity .minus:hover,
.add-to-cart-row .quantity .plus:hover {
    background-color: var(--color-slate-hover) !important;
    color: var(--color-slate-900) !important;
}

/* Add to Cart CTA Button block styling */
.add-to-cart-row .single_add_to_cart_button {
    background-color: var(--color-accent-pink) !important;
    color: var(--color-white) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 24px !important;
    height: 46px !important;
    border-radius: 8px !important;
    border: none !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important;
    max-width: 240px !important;
}

.add-to-cart-row .single_add_to_cart_button:hover {
    background-color: var(--color-accent-orange-dark) !important;
}

/* ==========================================================================
   4. SERVICE BLOCKS (DELIVERY & LOYALTY)
   ========================================================================= */
.services-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 24px !important;
    align-items: stretch !important;
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }
}

.service-block {
    border-radius: 12px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.service-delivery {
    background-color: var(--color-slate-100) !important;
    color: var(--color-slate-700) !important;
}

.service-loyalty {
    background-color: var(--color-bg-peach) !important;
    color: var(--color-slate-700) !important;
    align-items: center !important;
}

.service-icon svg {
    flex-shrink: 0 !important;
}

.service-text p {
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
   5. PRODUCT DETAILS TABS (CORRECTED COHERENT ROW)
   ========================================================================== */
.custom-product-tabs-wrapper .wc-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    background-color: var(--color-slate-100) !important;
    padding: 8px !important;
    border-radius: 12px !important;
    margin: 0 0 28px 0 !important;
    border: none !important;
    list-style: none !important;
    overflow-x: auto !important;
}

.custom-product-tabs-wrapper .wc-tabs li {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-product-tabs-wrapper .wc-tabs li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-slate-200) !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    height: 44px !important;
    color: var(--color-slate-600) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.custom-product-tabs-wrapper .wc-tabs li a:hover {
    border-color: var(--color-slate-300) !important;
    background-color: var(--color-slate-50) !important;
    font-weight: 700 !important; /* Synchronized with global hover request */
}

/* Active Tab Highlight Style Override */
.custom-product-tabs-wrapper .wc-tabs li.active a {
    background-color: var(--color-brand-green) !important;
    color: var(--color-white) !important;
    border-color: var(--color-brand-green) !important;
}
.custom-product-tabs-wrapper .wc-tabs li.active a:hover {
    color: var(--color-white) !important;
}

.custom-product-tabs-wrapper .woocommerce-Tabs-panel {
    padding: 0 8px !important;
}

.custom-product-tabs-wrapper .woocommerce-Tabs-panel h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--color-slate-700) !important;
    margin-bottom: 16px !important;
}

.custom-product-tabs-wrapper .woocommerce-Tabs-panel p {
    color: var(--color-slate-600) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}
/* ========================================================================== 
   MOBILE: BRAND / CATEGORY TERMS AS CONTINUOUS TEXT
   WordPress flex block layouts can shrink each taxonomy block independently,
   causing brand/category names to wrap onto separate lines unnecessarily.
   On mobile, let the taxonomy text participate in one normal inline text flow.
   ========================================================================== */
@media (max-width: 768px) {
    .product-info-col .brand-tag-wrapper,
    .product-info-col .product-subtitle,
    .product-info-col .product-meta-bottom > .wp-block-group {
        display: block !important;
    }

    .product-info-col .brand-tag-wrapper .wp-block-post-terms,
    .product-info-col .product-subtitle > p,
    .product-info-col .product-subtitle > .wp-block-post-terms,
    .product-info-col .product-meta-bottom .meta-terms {
        display: inline !important;
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
        white-space: normal !important;
    }

    .product-info-col .brand-tag-wrapper .wp-block-post-terms a,
    .product-info-col .product-subtitle .wp-block-post-terms a,
    .product-info-col .product-meta-bottom .meta-terms a {
        display: inline !important;
        white-space: normal !important;
    }
}

/* Keep the dedicated stock indicator above the cart and suppress the duplicate
   availability text rendered by WooCommerce inside the add-to-cart form. */
.add-to-cart-row .stock,
.add-to-cart-row p.stock,
.add-to-cart-row .woocommerce-variation-availability {
    display: none !important;
}