/*
 * Shredder2u — Single Product Page Styles
 * File: shr-product-page.css
 * Location: /opt/bitnami/wordpress/wp-content/themes/storefront-child/shr-product-page.css
 * Loaded only on single product pages — conditional enqueue in functions.php
 * Scoped to .single-product where possible
 */

/* =============================================================
   1. BUNDLE ITEMS — horizontal compact layout above sharing
   ============================================================= */

/* Container heading */
.single-product .wc-bundle-container .wc-bundle-style {
    margin-bottom: 12px;
}

/* The bundled items list — switch from vertical stack to horizontal row */
.single-product form.cart .bundled_items,
.single-product .bundled_items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Each bundle item — horizontal compact card */
.single-product .bundled_items .bundled_item_cart_details,
.single-product .wc-bundled-item {
    flex: 1 1 220px !important;
    min-width: 0 !important;
    background: #f8fafc !important;
    border: 1px solid #e8edf2 !important;
    border-left: 3px solid #e63946 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Bundle item thumbnail — small */
.single-product .bundled_items .bundled_item_cart_details img,
.single-product .wc-bundled-item img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    border: 1px solid #e8edf2 !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Bundle item text area */
.single-product .bundled_item_cart_details .bundled_item_details,
.single-product .wc-bundled-item .bundled_item_details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Bundle item title/heading */
.single-product .bundled_item_cart_details h4,
.single-product .bundled_item_cart_details h3,
.single-product .wc-bundled-item h4,
.single-product .wc-bundled-item h3 {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #111d2e !important;
    margin: 0 0 2px !important;
    line-height: 1.3 !important;
}

/* Bundle item description */
.single-product .bundled_item_cart_details .bundled_item_details p,
.single-product .wc-bundled-item .bundled_item_details p,
.single-product .bundled_item_cart_details p {
    font-size: 0.74rem !important;
    color: #6b7280 !important;
    line-height: 1.45 !important;
    margin: 0 0 4px !important;
}

/* Bundle item price */
.single-product .bundled_item_cart_details .price,
.single-product .wc-bundled-item .price {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #e63946 !important;
    margin: 0 !important;
    display: block !important;
}

.single-product .bundled_item_cart_details .price del,
.single-product .wc-bundled-item .price del {
    color: #9ca3af !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
}

/* Bundle item quantity — compact inline */
.single-product .bundled_item_cart_details .quantity,
.single-product .wc-bundled-item .quantity {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 4px 0 0 !important;
    flex-shrink: 0 !important;
}

.single-product .bundled_item_cart_details .quantity input.qty,
.single-product .wc-bundled-item .quantity input.qty {
    width: 44px !important;
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 0.8rem !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 4px !important;
    text-align: center !important;
}

/* Bundle checkbox (optional items) */
.single-product .bundled_item_cart_details .bundled_item_optional_checkbox,
.single-product .wc-bundled-item .bundled_item_optional_checkbox {
    margin-right: 4px !important;
    flex-shrink: 0 !important;
}

/* Bundle section heading */
.single-product .bundle_form_section_title,
.single-product .wc-bundle-heading {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #9ca3af !important;
    margin: 0 0 8px !important;
}

/* Bundle "add for" label text */
.single-product .bundled_item_cart_details .bundled_item_optional_price,
.single-product .wc-bundled-item .optional_purchase_label {
    font-size: 0.74rem !important;
    color: #6b7280 !important;
}

/* =============================================================
   2. PRODUCT SUMMARY — general cleanup
   ============================================================= */

.single-product div.product .summary {
    padding-left: 24px;
}

/* Price */
.single-product div.product p.price,
.single-product div.product span.price {
    color: #e63946 !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
}

.single-product div.product p.price del {
    color: #9ca3af !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

/* Add to cart button */
.single-product div.product .single_add_to_cart_button {
    background: #e63946 !important;
    color: #fff !important;
    border-color: #e63946 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 28px !important;
    transition: background 0.2s !important;
}

.single-product div.product .single_add_to_cart_button:hover {
    background: #c1121f !important;
    border-color: #c1121f !important;
}

/* Request a quote link */
.single-product .yith-ywraq-add-to-quote {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.80rem;
    font-weight: 600;
    color: #374151 !important;
    border-radius: 6px;
    padding: 8px 8px;
    text-decoration: none !important;
    transition: border-color 0.2s, color 0.2s;
}

/* Product meta (SKU, category, tags) */
.single-product div.product .product_meta {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f0f2f5 !important;
}

.single-product div.product .product_meta a {
    text-decoration: none !important;
}

.single-product div.product .product_meta a:hover {
    text-decoration: underline !important;
}

/* =============================================================
   3. TABS (Description / Additional Info / Brand)
   ============================================================= */

.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #e8edf2 !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    padding: 10px 18px !important;
    display: block !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}


.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #e63946 !important;
}

.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #e63946 !important;
}

/* Tab content */
.single-product .woocommerce-tabs .panel {
    padding: 24px 0 0 !important;
}

/* Additional info table */
.single-product .woocommerce-product-attributes th {
    background: #f8fafc !important;
    color: #374151 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    width: 36% !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #f0f2f5 !important;
}

.single-product .woocommerce-product-attributes td {
    font-size: 0.88rem !important;
    color: #4b5563 !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #f0f2f5 !important;
}

.single-product .woocommerce-product-attributes tr:last-child th,
.single-product .woocommerce-product-attributes tr:last-child td {
    border-bottom: none !important;
}

/* =============================================================
   4. YOU MAY ALSO LIKE + RELATED — compact 4-col grid
   ============================================================= */

/* Section headings */
.single-product .up-sells h2,
.single-product .related h2 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #111d2e !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f0f2f5 !important;
    position: relative !important;
}

.single-product .up-sells h2::after,
.single-product .related h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 48px !important;
    height: 2px !important;
    background: #e63946 !important;
}

/* Force 4-column grid — replaces Storefront's float layout */
.single-product .up-sells ul.products,
.single-product .related ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    float: none !important;
}

/* Kill clearfix pseudo-elements that create ghost grid cells */
.single-product .up-sells ul.products::before,
.single-product .up-sells ul.products::after,
.single-product .related ul.products::before,
.single-product .related ul.products::after {
    display: none !important;
    content: none !important;
}

/* Each card — reset floats and widths */
.single-product .up-sells ul.products li.product,
.single-product .related ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    background: #fff !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s !important;
}

/* Kill nth-child float clears that cause empty cell gaps */
.single-product .up-sells ul.products li.product:nth-child(n),
.single-product .related ul.products li.product:nth-child(n) {
    clear: none !important;
    margin-left: 0 !important;
}

.single-product .up-sells ul.products li.product:hover,
.single-product .related ul.products li.product:hover {
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.1) !important;
    border-color: #e63946 !important;
    transform: translateY(-2px) !important;
}

/* Product image */
.single-product .up-sells ul.products li.product img,
.single-product .related ul.products li.product img {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.single-product .up-sells ul.products li.product:hover img,
.single-product .related ul.products li.product:hover img {
    transform: scale(1.04) !important;
}

/* Product title — smaller */
.single-product .up-sells ul.products li.product .woocommerce-loop-product__title,
.single-product .related ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #111d2e !important;
    line-height: 1.4 !important;
    padding: 10px 12px 4px !important;
    margin: 0 !important;
}

/* Price */
.single-product .up-sells ul.products li.product .price,
.single-product .related ul.products li.product .price {
    color: #e63946 !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    padding: 0 12px 4px !important;
    margin: 0 !important;
    display: block !important;
}

.single-product .up-sells ul.products li.product .price del,
.single-product .related ul.products li.product .price del {
    color: #9ca3af !important;
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Add to cart / Read more button */
.single-product .up-sells ul.products li.product .button,
.single-product .related ul.products li.product .button {
    display: block !important;
    width: calc(100% - 24px) !important;
    margin: 8px 12px 12px !important;
    padding: 8px 10px !important;
    background: #111d2e !important;
    color: #fff !important;
    border-radius: 5px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    border: none !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
}

.single-product .up-sells ul.products li.product .button:hover,
.single-product .related ul.products li.product .button:hover {
    background: #e63946 !important;
    color: #fff !important;
}

/* Sale badge */
.single-product .up-sells ul.products li.product .onsale,
.single-product .related ul.products li.product .onsale {
    background: #e63946 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    top: 8px !important;
    left: 8px !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
}

/* =============================================================
   5. SOCIAL SHARING
   ============================================================= */

.single-product .storefront-product-sharing {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f0f2f5 !important;
}

.single-product .storefront-product-sharing span {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.single-product .storefront-product-sharing ul {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.single-product .storefront-product-sharing ul li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 6px 12px !important;
    background: #f0f2f5 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s !important;
}

.single-product .storefront-product-sharing ul li a:hover {
    background: #e63946 !important;
    color: #fff !important;
}

/* =============================================================
   6. RESPONSIVE
   ============================================================= */

/* Tablet — 3 columns for related/upsells */
@media (max-width: 900px) {

    .single-product .up-sells ul.products,
    .single-product .related ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Smaller tablet — bundle items stack */
@media (max-width: 768px) {
    .single-product div.product .summary {
        padding-left: 0;
    }

    .single-product .bundled_items {
        flex-direction: column !important;
    }

    .single-product .up-sells ul.products,
    .single-product .related ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* Mobile — 2 columns */
@media (max-width: 480px) {

    .single-product .up-sells ul.products,
    .single-product .related ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .single-product .bundled_item_cart_details,
    .single-product .wc-bundled-item {
        flex-wrap: wrap !important;
    }
}

/* =============================================================
   FIXES — Targeted overrides based on live page inspection
   ============================================================= */

/* ── FIX 1: Bundle items — force ALL into one horizontal row ──
   WC Product Bundles generates .wc-bundle-data > .bundled_items > li
   Each li contains: image block + details block stacked vertically.
   We flatten the entire bundle container into a single flex row.
   ──────────────────────────────────────────────────────────── */

/* The outer form area wrapping all bundles */
.single-product form.cart .wc-bundle-data,
.single-product .wc-bundle-data {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    overflow-x: auto !important;
}

/* The ul.bundled_items inside the form */
.single-product form.cart .bundled_items,
.single-product .bundled_items {
    display: contents !important;
    /* dissolves the ul so li items join the flex row */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each bundle item li — compact pill card */
.single-product .bundled_items li.bundled_item,
.single-product .bundled_items .bundled_item_cart_details {
    flex: 1 1 0 !important;
    min-width: 140px !important;
    max-width: 220px !important;
    background: #f8fafc !important;
    border: 1px solid #e8edf2 !important;
    border-top: 3px solid #e63946 !important;
    border-radius: 8px !important;
    padding: 10px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* Bundle item thumbnail — tiny square */
.single-product .bundled_items li.bundled_item img,
.single-product .bundled_items .bundled_item_cart_details img,
.single-product .bundled_item_cart_details>a>img,
.single-product .bundled_item_cart_details>img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    border: 1px solid #e8edf2 !important;
    background: #fff !important;
    margin: 0 0 4px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* Hide the large bundle item thumbnail wrapper div that takes space */
.single-product .bundled_item_cart_details .woocommerce-product-gallery,
.single-product .bundled_item_cart_details .wc-bundle-product-thumbnail {
    display: none !important;
}

/* Bundle title h4 — compact */
.single-product .bundled_items li.bundled_item h4,
.single-product .bundled_items li.bundled_item h3,
.single-product .bundled_item_cart_details h4,
.single-product .bundled_item_cart_details h3 {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #111d2e !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Bundle description */
.single-product .bundled_items li.bundled_item p,
.single-product .bundled_item_cart_details p {
    font-size: 0.7rem !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* "Add for RM72.00" label + price row */
.single-product .bundled_item_cart_details .wc-bundle-product-price,
.single-product .bundled_item_cart_details .bundled_item_price_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    font-size: 0.72rem !important;
}

.single-product .bundled_item_cart_details .price,
.single-product .bundled_items li.bundled_item .price {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #e63946 !important;
    margin: 0 !important;
    display: inline !important;
}

.single-product .bundled_item_cart_details .price del {
    color: #9ca3af !important;
    font-size: 0.68rem !important;
}

/* Quantity input — tiny */
.single-product .bundled_item_cart_details .quantity input.qty {
    width: 40px !important;
    height: 26px !important;
    padding: 0 4px !important;
    font-size: 0.78rem !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 4px !important;
    text-align: center !important;
}

/* Checkbox */
.single-product .bundled_item_cart_details .bundled_item_optional_checkbox {
    margin: 0 3px 0 0 !important;
}

/* "Insufficient stock" message — smaller */
.single-product .bundled_item_cart_details .bundled_item_stock {
    font-size: 0.68rem !important;
    color: #e63946 !important;
    margin: 0 !important;
}

/* ── FIX 2: Social sharing — force single line ── */

.single-product .storefront-product-sharing {
    overflow: hidden !important;
}

.single-product .storefront-product-sharing ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* prevent wrapping */
    gap: 6px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;

}

.single-product .storefront-product-sharing ul li {
    flex-shrink: 0 !important;
    /* prevent items from squishing */
}

.single-product .storefront-product-sharing ul li a {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
}

/* ── FIX 3: Tags — black color not red ── */

.single-product .product_meta .tagged_as a,
.single-product .product_meta a[href*="product-tag"] {
    color: #374151 !important;
    text-decoration: none !important;
}

.single-product .product_meta .tagged_as a:hover,
.single-product .product_meta a[href*="product-tag"]:hover {
    color: #111d2e !important;
    text-decoration: underline !important;
}

/* Also covers category and other meta links just in case */
.single-product .product_meta .posted_in a {
    color: #374151 !important;
    /* keep category red — that's intentional */
}

/* ── FIX 4: You may also like + Related — center align cards ── */

.single-product .up-sells,
.single-product .related {
    text-align: center !important;
}

.single-product .up-sells ul.products,
.single-product .related ul.products {
    justify-content: center !important;
    text-align: left !important;
    /* reset text inside cards */
}

.single-product .up-sells ul.products li.product,
.single-product .related ul.products li.product {
    text-align: left !important;
}

.single-product .up-sells h2,
.single-product .related h2 {
    text-align: left !important;
    /* keep heading left */
}

/* ── FIX 4b: If only 1–2 cards, don't stretch full width ── */
.single-product .up-sells ul.products,
.single-product .related ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 220px)) !important;
    justify-content: center !important;
    gap: 14px !important;
}

/* Mobile responsive */
@media (max-width: 900px) {

    .single-product .up-sells ul.products,
    .single-product .related ul.products {
        grid-template-columns: repeat(3, minmax(0, 220px)) !important;
    }

    .single-product .wc-bundle-data {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 600px) {

    .single-product .up-sells ul.products,
    .single-product .related ul.products {
        grid-template-columns: repeat(2, minmax(0, 180px)) !important;
    }

    .single-product .storefront-product-sharing ul li a {
        padding: 5px 8px !important;
        font-size: 0.7rem !important;
    }
}

/* =============================================================
   MOBILE & ADDITIONAL FIXES
   ============================================================= */

/* ── FIX 1: Mobile — product image + summary full width ──
   Overrides style.css Section 11 which sets 45%/50% widths.
   On mobile both columns must stack to 100%.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    .single-product div.product .images,
    .single-product div.product .woocommerce-product-gallery {
        width: 100% !important;
        float: none !important;
        margin-bottom: 24px !important;
    }

    .single-product div.product .summary {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding-left: 0 !important;
    }
}

/* ── FIX 2: Social sharing — no scrollbar, desktop 1 line,
   mobile wraps to 2 lines naturally ── */

.single-product .storefront-product-sharing ul {
    overflow: hidden !important;
    /* remove scrollbar */
    flex-wrap: nowrap !important;
    /* desktop: 1 line */
}

.single-product .storefront-product-sharing ul li a {
    white-space: nowrap !important;
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
}

@media (max-width: 600px) {
    .single-product .storefront-product-sharing ul {
        flex-wrap: wrap !important;
        /* mobile: allow 2 lines */
        overflow: visible !important;
    }

    .single-product .storefront-product-sharing ul li {
        flex: 1 1 calc(50% - 6px) !important;
        /* 2 per row on mobile */
    }

    .single-product .storefront-product-sharing ul li a {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── FIX 3: Category links — black like tags ── */

.single-product .product_meta .posted_in a {
    color: #374151 !important;
    text-decoration: none !important;
}

.single-product .product_meta .posted_in a:hover {
    color: #111d2e !important;
    text-decoration: underline !important;
}

/* ── FIX 4: Tabs — force single row, no wrapping ── */

.single-product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 0 0 !important;
    scrollbar-width: none !important;
    /* hide scrollbar Firefox */
}

/* Hide scrollbar Chrome/Safari */
.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    float: none !important;
    display: block !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    white-space: nowrap !important;
    display: block !important;
    padding: 10px 16px !important;
}

/* =============================================================
   BUNDLE — FINAL FIX using exact DevTools class names
   ============================================================= */

/* Outer form — horizontal flex row */
.single-product form.bundle_form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Each bundle item — compact card */
.single-product .bundled_product.bundled_product_summary {
    flex: 1 1 160px !important;
    max-width: 200px !important;
    background: #f8fafc !important;
    border: 1px solid #e8edf2 !important;
    border-top: 3px solid #e63946 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* IMAGE block — shrink to tiny thumbnail */
.single-product .bundled_product.bundled_product_summary .bundled_product_images.images {
    width: 52px !important;
    height: 52px !important;
    float: none !important;
    margin: 0 0 6px !important;
    flex-shrink: 0 !important;
}

.single-product .bundled_product.bundled_product_summary .bundled_product_images.images img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    border: 1px solid #e8edf2 !important;
    background: #fff !important;
    display: block !important;
}

/* Hide the gallery zoom/lightbox trigger inside bundle image */
.single-product .bundled_product_images .woocommerce-product-gallery__trigger,
.single-product .bundled_product_images figure a {
    pointer-events: none !important;
}

/* DETAILS block — reset width */
.single-product .bundled_product.bundled_product_summary .details {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Title h4 — small and grey */
.single-product .bundled_product.bundled_product_summary h4.bundled_product_title {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
}

/* Description */
.single-product .bundled_product.bundled_product_summary .bundled_product_excerpt {
    font-size: 0.72rem !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
    margin: 0 0 4px !important;
}

.single-product .bundled_product.bundled_product_summary .bundled_product_excerpt p {
    font-size: 0.72rem !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Checkbox label "Add for" */
.single-product .bundled_product.bundled_product_summary .bundled_product_optional_checkbox {
    font-size: 0.72rem !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 2px 0 !important;
    flex-wrap: wrap !important;
}

/* Price */
.single-product .bundled_product.bundled_product_summary .price {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #e63946 !important;
    display: block !important;
    margin: 0 !important;
}

.single-product .bundled_product.bundled_product_summary .price del {
    font-size: 0.68rem !important;
    color: #9ca3af !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Quantity */
.single-product .bundled_product.bundled_product_summary .bundled_item_wrap div.quantity {
    margin: 4px 0 0 !important;
}

.single-product .bundled_product.bundled_product_summary .bundled_item_wrap input.qty {
    width: 42px !important;
    height: 26px !important;
    padding: 0 4px !important;
    font-size: 0.78rem !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 4px !important;
    text-align: center !important;
}

/* Stock notice */
.single-product .bundled_product.bundled_product_summary .bundled_product_stock {
    font-size: 0.68rem !important;
    margin: 2px 0 0 !important;
}

/* Mobile — stack to 2 per row */
@media (max-width: 600px) {
    .single-product form.bundle_form {
        flex-direction: row !important;
    }

    .single-product .bundled_product.bundled_product_summary {
        flex: 1 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* =============================================================
   PRODUCT PAGE — Layout fixes round 3
   ============================================================= */

/* ── FIX 1: Move quantity + Add to Cart below bundle items ──
   form.bundle_form is a flex row — quantity and button are
   direct children alongside bundle cards. Wrap them to a new
   row by giving them full width and order them last.
   ──────────────────────────────────────────────────────────── */

.single-product form.bundle_form {
    flex-wrap: wrap !important;
}

/* Bundle items stay in first row */
.single-product .bundled_product.bundled_product_summary {
    order: 1 !important;
}

/* Quantity input — push to new row below bundles */
.single-product form.bundle_form>div.quantity,
.single-product form.bundle_form .woocommerce-grouped-product-list-item__quantity,
.single-product form.bundle_form .qty-wrap,
.single-product form.cart>div.quantity {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-top: 12px !important;
    clear: both !important;
}

/* Add to cart button — same new row */
.single-product form.bundle_form .single_add_to_cart_button,
.single-product form.bundle_form button[type="submit"],
.single-product form.bundle_form input[type="submit"] {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-top: 12px !important;
    align-self: flex-end !important;
}

/* If quantity + button are wrapped in a div, target that wrapper */
.single-product form.bundle_form .wc-bundle-quantity,
.single-product form.bundle_form .bundle_button_wrap,
.single-product form.bundle_form .woocommerce-bundles-add-to-cart-button {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f0f2f5 !important;
    flex-wrap: nowrap !important;
}

/* ── FIX 2: Request a quote — border-top divider, smaller ── */

.single-product .yith-ywraq-add-to-quote,
.single-product .add-to-quote-button,
.single-product a.add-request-quote-button,
.single-product .yith-ywraq-add-to-quote a {
    display: inline-block !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 9px 20px !important;
    /* slightly smaller than Add to Cart */
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s !important;
}

/* Wrapper div around the quote button — add the divider line here */
.single-product .yith-ywraq-add-to-quote,
.single-product div.yith-ywraq-add-to-quote {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e8edf2 !important;
    display: block !important;
}

/* The button itself inside the wrapper */
.single-product .yith-ywraq-add-to-quote a.button,
.single-product .yith-ywraq-add-to-quote .add-to-quote,
.single-product a.add-request-quote-button.button {
    background: #0066b4 !important;
    color: #fff !important;
    border: none !important;
    padding: 9px 20px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    display: inline-block !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.single-product .yith-ywraq-add-to-quote a.button:hover,
.single-product a.add-request-quote-button.button:hover {
    background: #004f8a !important;
}

/* ── FIX 3: Category + Tag links — dark navy color ── */

.single-product .product_meta .posted_in a,
.single-product .product_meta .tagged_as a,
.single-product .product_meta a[href*="product-category"],
.single-product .product_meta a[href*="product-tag"] {
    color: #111d2e !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.single-product .product_meta .posted_in a:hover,
.single-product .product_meta .tagged_as a:hover,
.single-product .product_meta a[href*="product-category"]:hover,
.single-product .product_meta a[href*="product-tag"]:hover {
    color: #e63946 !important;
    text-decoration: underline !important;
}

/* Brand link keeps its own style */
.single-product .product_meta .pwb-single-product-brands a {
    color: #111d2e !important;
    font-weight: 600 !important;
}

.single-product .product_meta .pwb-single-product-brands a:hover {
    color: #e63946 !important;
}