/* Product Detail Page - design only, no functional changes.
   All real Magento blocks (gallery, price, add-to-cart, reviews, attributes/tabs) are kept -
   only styled via these selectors, scoped under body.catalog-product-view. */

.catalog-product-view {
    font-family: 'Poppins', Rubik, Arial, sans-serif;
}

/* Breadcrumbs - plain white background on the Product Page (unlike Login/Create Account,
   which use a gray band - measured directly from the reference, no gray strip here) */
.catalog-product-view .breadcrumbs {
    display: block !important;
    padding: 20px 0 12px;
    background-color: #ffffff;
}

.catalog-product-view .breadcrumbs .items {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 14px;
}

.catalog-product-view .breadcrumbs .item {
    color: #6b7280;
}

.catalog-product-view .breadcrumbs .item a {
    color: #6b7280;
    text-decoration: none;
}

.catalog-product-view .breadcrumbs .item:not(:last-child):before {
    font-family: inherit;
    font-size: 14px;
    content: '/';
    margin: 0 10px;
}

.catalog-product-view .breadcrumbs .item.product strong {
    font-weight: 600;
    color: #101010;
}

/* Overall content column */
.catalog-product-view .column.main,
.catalog-product-view .product-info-main-wrap {
    max-width: 1170px;
    margin: 0 auto;
    padding: 32px 15px 0;
    box-sizing: border-box;
}

/* Product top area: gallery (left) + info (right), side by side. Only this row is flex -
   everything below (tabs, why-this-part, trust, newsletter) stays in normal block flow so
   .sr-newsletter's own full-bleed (100vw / -50vw) works correctly from a non-flex context. */
.catalog-product-view .product-top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
    box-sizing: border-box;
}

.catalog-product-view .product.media {
    /* DOM order is [product.info.main, product.info.media] - order:-1 puts the gallery first
       visually without needing to touch the other item */
    order: -1;
    flex: 1 1 590px;
    max-width: 590px;
    box-sizing: border-box;
}

.catalog-product-view .product-info-main {
    flex: 1 1 490px;
    min-width: 0;
    box-sizing: border-box;
}

/* ===================== GALLERY ===================== */
.catalog-product-view .product.media {
    position: relative;
}

.catalog-product-view .fotorama__stage {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.catalog-product-view .fotorama__nav-wrap {
    margin-top: 14px;
}

.catalog-product-view .fotorama__thumb {
    border-radius: 6px;
    overflow: hidden;
}

.catalog-product-view .fotorama__nav__frame--thumb {
    padding: 0 !important;
    margin-right: 12px;
}

.catalog-product-view .fotorama__nav__frame--thumb .fotorama__thumb {
    border: 2px solid #e5e7eb;
    border-radius: 6px;
}

.catalog-product-view .fotorama__nav__frame.fotorama__active .fotorama__thumb {
    border-color: #da090e;
}

.catalog-product-view .product.media .stock {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #da090e;
    border-radius: 4px;
}

.catalog-product-view .product.media .stock.unavailable {
    background-color: #6b7280;
}

/* ===================== PRODUCT INFO ===================== */
.catalog-product-view .product-info-price {
    display: flex;
    flex-direction: column;
}

.catalog-product-view .product-info-stock-sku {
    order: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.catalog-product-view .product-info-stock-sku .sku {
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 14px;
    color: #6b7280;
}

.catalog-product-view .product-info-stock-sku .type {
    display: none;
}

.catalog-product-view .product-reviews-summary {
    order: 2;
    margin: 0;
}

.catalog-product-view .product-reviews-summary .rating-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.catalog-product-view .product-reviews-summary .rating-summary .label {
    display: none;
}

.catalog-product-view .product-reviews-summary .rating-result {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 16px;
}

.catalog-product-view .product-reviews-summary .rating-result:before {
    content: '\2605\2605\2605\2605\2605';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px;
    color: #d1d5db;
}

.catalog-product-view .product-reviews-summary .rating-result > span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 16px;
}

.catalog-product-view .product-reviews-summary .rating-result > span:before {
    content: '\2605\2605\2605\2605\2605';
    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px;
    color: #da090e;
    white-space: nowrap;
}

.catalog-product-view .product-reviews-summary .reviews-actions {
    font-size: 14px;
    color: #6b7280;
    text-decoration: none;
    margin-left: 4px;
}

.catalog-product-view .product-reviews-summary .reviews-actions a {
    color: #6b7280;
    text-decoration: none;
}

.catalog-product-view .page-title-wrapper.product {
    order: 3;
    margin: 16px 0 0;
    padding: 0;
}

.catalog-product-view .page-title-wrapper.product .page-title {
    margin: 0;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #101010;
}

.catalog-product-view .product-subtitle {
    order: 4;
    margin: 14px 0 0;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 16px;
    color: #6b7280;
}

.catalog-product-view .product-info-price .price-box.price-final_price {
    order: 5;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin: 22px 0 0;
}

.catalog-product-view .price-box .price-container .price {
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-weight: 700;
    color: #101010;
}

.catalog-product-view .price-box .old-price .price {
    font-size: 21px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    text-decoration: line-through;
}

.catalog-product-view .price-box .special-price .price,
.catalog-product-view .price-box > .price-container .price {
    font-size: 38px !important;
    color: #da090e !important;
}

.catalog-product-view .price-box .old-price {
    order: 2;
}

.catalog-product-view .price-box .special-price {
    order: 1;
}

/* You Save line - computed from real old/special price via a tiny inline script (see markup) */
.catalog-product-view .product-you-save {
    order: 6;
    margin: 14px 0 0;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #16a34a;
}

.catalog-product-view .product-benefits-list {
    order: 7;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}

.catalog-product-view .product-benefits-list li {
    position: relative;
    margin-bottom: 16px;
    padding-left: 28px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #374151;
}

.catalog-product-view .product-benefits-list li:last-child {
    margin-bottom: 0;
}

.catalog-product-view .product-benefits-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 17px;
    height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da090e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Qty + Add to Cart */
.catalog-product-view .product.attribute.overview {
    display: none;
}

.catalog-product-view .box-tocart {
    margin: 24px 0 0;
}

.catalog-product-view .box-tocart .fieldset {
    /* Core Magento_Catalog CSS (config_en.css, 4-class selector
       ".product-info-main .product-options-bottom .box-tocart .fieldset") beats this 3-class
       selector on specificity and forces display:table - !important needed to win. It also
       floats .qty/.actions (unopposed, since we never set float otherwise), which combined
       with the button's own width:100% produces an unreliable shrink-to-fit width that can
       collapse and wrap the button under the qty box - float:none below removes that. */
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    margin: 0 !important;
    border: 0;
    padding: 0;
}

.catalog-product-view .box-tocart .field.qty {
    float: none !important;
    margin: 0;
}

.catalog-product-view .box-tocart .field.qty .label {
    display: none !important;
}

.catalog-product-view .control.control-qty-cart {
    /* Core Magento_Catalog CSS (config_en.css, 8-class selector) forces display:table-cell
       and padding-right:20px here - beat both with !important. It also targets the input by
       ID (#qty width:80px/height:40px), which beats any class selector on specificity alone -
       the input override below needs !important too. */
    position: relative;
    display: flex !important;
    align-items: center;
    width: 140px !important;
    height: 54px;
    padding-right: 0 !important;
    border: 1px solid #cccccc;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}

.catalog-product-view .control.control-qty-cart #qty.qty-default {
    order: 2;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 100% !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: center;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #101010;
    background: transparent;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

.catalog-product-view .control.control-qty-cart .qty-default::-webkit-outer-spin-button,
.catalog-product-view .control.control-qty-cart .qty-default::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    display: none !important;
    margin: 0;
}

.catalog-product-view .control-qty {
    display: contents !important;
}

.catalog-product-view .quantity-controls {
    /* Legacy _general.less ".control-qty .quantity-controls" makes these 15px circular
       icon-sprite buttons (border-radius:50%, background: url(plus-minus.png)) - reset all of
       that explicitly since it has no !important of its own but still wins on some properties. */
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #101010;
    background: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    user-select: none;
}

.catalog-product-view .quantity-minus {
    order: 1;
    border-right: 1px solid #cccccc;
}

.catalog-product-view .quantity-minus::before {
    content: '\2212';
}

.catalog-product-view .quantity-plus {
    order: 3;
    border-left: 1px solid #cccccc;
}

.catalog-product-view .quantity-plus::before {
    content: '+';
}

.catalog-product-view .box-tocart .actions {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
}

.catalog-product-view .box-tocart .action.primary.tocart {
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    width: 100% !important;
    height: 54px !important;
    padding: 0 24px !important;
    box-sizing: border-box;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 15px !important;
    font-weight: 700;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #ffffff !important;
    background-color: #da090e !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 !important;
}

.catalog-product-view .box-tocart .action.primary.tocart:hover {
    background-color: #b6070c !important;
}

.catalog-product-view .product-request-quote {
    margin: 16px 0 0;
}

.catalog-product-view .product-request-quote .action.request-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1a1a2e;
    background-color: #ffffff;
    border: 2px solid #1a1a2e;
    border-radius: 6px;
    text-decoration: none;
    box-sizing: border-box;
}

.catalog-product-view .product-request-quote .action.request-quote:hover {
    color: #ffffff;
    background-color: #1a1a2e;
}

/* Hide wishlist/compare/mailto icon row and social share button - not in the design */
.catalog-product-view .product-social-links,
.catalog-product-view .social-button {
    display: none !important;
}

/* Shipping info cards */
.catalog-product-view .product-shipping-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0 0;
}

.catalog-product-view .ps-card {
    padding: 16px 14px;
    text-align: center;
    background-color: #f6f6f7;
    border-radius: 8px;
}

.catalog-product-view .ps-card .fa {
    display: block;
    margin: 0 0 8px;
    font-size: 20px;
    color: #101010;
}

.catalog-product-view .ps-card-title {
    margin: 0;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #101010;
}

.catalog-product-view .ps-card-sub {
    margin: 4px 0 0;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3;
    color: #6b7280;
}

/* ===================== TABS ===================== */
.catalog-product-view .product.info.detailed {
    margin-top: 48px;
}

.catalog-product-view .product.data.items.default-style {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.catalog-product-view .resp-tabs-list {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
}

.catalog-product-view .resp-tabs-list li.data.item.title {
    margin: 0;
    padding: 0;
}

.catalog-product-view .resp-tabs-list .data.switch {
    display: inline-block;
    padding: 0 0 16px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.catalog-product-view .resp-tabs-list li.resp-tab-active .data.switch {
    color: #da090e;
    border-bottom-color: #da090e;
}

.catalog-product-view .resp-tabs-container {
    padding: 28px 0 8px;
}

.catalog-product-view .resp-tab-content {
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 15px;
    color: #374151;
}

/* Specifications / Fitment two-column grid */
.catalog-product-view .spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
}

.catalog-product-view .spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #eeeeee;
}

.catalog-product-view .spec-label {
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 15px;
    color: #6b7280;
}

.catalog-product-view .spec-value {
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #101010;
    text-align: right;
}

.catalog-product-view .fitment-lead {
    margin: 0 0 16px;
    font-weight: 600;
    color: #101010;
}

/* Shipping & Returns tab */
.catalog-product-view .shipping-returns-tab .sr-tab-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.catalog-product-view .shipping-returns-tab .fa {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 20px;
    color: #da090e;
}

.catalog-product-view .sr-tab-title {
    margin: 0;
    font-weight: 700;
    color: #101010;
}

.catalog-product-view .sr-tab-sub {
    margin: 4px 0 0;
    color: #6b7280;
}

.catalog-product-view .sr-tab-more {
    margin: 8px 0 0;
    color: #6b7280;
}

.catalog-product-view .sr-tab-more a {
    color: #da090e;
    text-decoration: none;
}

/* ===================== WHY THIS PART ===================== */
.catalog-product-view .why-this-part {
    background-color: #ffffff;
    padding: 24px 0 64px;
}

.catalog-product-view .wtp-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 40px 44px;
    box-sizing: border-box;
    background-color: #191a2e;
    border-radius: 12px;
}

.catalog-product-view .wtp-title {
    /* "body .page-wrapper h2 { color !important }" in css-fix.css needs !important here too */
    margin: 0 0 24px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff !important;
}

.catalog-product-view .wtp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
}

.catalog-product-view .wtp-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalog-product-view .wtp-grid li {
    position: relative;
    margin-bottom: 18px;
    padding-left: 26px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 15px;
    color: #e5e7eb;
}

.catalog-product-view .wtp-grid li:last-child {
    margin-bottom: 0;
}

.catalog-product-view .wtp-grid li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da090e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* ===================== TRUST SECTION ===================== */
.catalog-product-view .product-trust-section {
    background-color: #ffffff;
    padding: 8px 0 48px;
}

.catalog-product-view .pts-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.catalog-product-view .pts-item {
    text-align: center;
}

.catalog-product-view .pts-item .fa {
    display: block;
    margin: 0 auto 10px;
    font-size: 26px;
    color: #101010;
}

.catalog-product-view .pts-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 10px;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #101010;
}

.catalog-product-view .pts-title {
    margin: 0;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #101010;
}

.catalog-product-view .pts-sub {
    margin: 4px 0 0;
    font-family: 'Poppins', Rubik, Arial, sans-serif;
    font-size: 14px;
    color: #6b7280;
}

/* Responsive */
@media (max-width: 991px) {
    .catalog-product-view .content {
        flex-direction: column;
        gap: 24px;
    }

    .catalog-product-view .product.media,
    .catalog-product-view .product-info-main {
        max-width: 100%;
        flex-basis: auto;
    }

    .catalog-product-view .pts-inner {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 32px;
    }
}

@media (max-width: 767px) {
    .catalog-product-view .product-shipping-cards {
        grid-template-columns: 1fr;
    }

    .catalog-product-view .spec-grid,
    .catalog-product-view .wtp-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .catalog-product-view .wtp-inner {
        padding: 28px 22px;
    }

    .catalog-product-view .resp-tabs-list {
        gap: 20px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .catalog-product-view .resp-tabs-list li.data.item.title {
        flex: 0 0 auto;
    }

    .catalog-product-view .resp-tabs-list .data.switch {
        white-space: nowrap;
    }

    .catalog-product-view .box-tocart .fieldset {
        flex-wrap: wrap;
    }

    .catalog-product-view .control.control-qty-cart {
        width: 100%;
    }

    .catalog-product-view .box-tocart .actions {
        flex-basis: 100%;
    }
}

@media (max-width: 600px) {
    .catalog-product-view .pts-inner {
        grid-template-columns: 1fr;
    }
}
