/* =============================================================
   Supply Solution — Product Detail Page
   Plain CSS: no LESS compilation, linked via catalog_product_view.xml
   CSS custom properties (--ss-*) are defined in :root via styles-l.css
   ============================================================= */

/* Two-column layout — kill Magento floats.
   .catalog-product-view (body class) gives 3-class specificity, beating
   Blank theme's 2-class selectors. float:none needs !important where
   Blank uses floats with !important in its responsive layout. */
.catalog-product-view .column.main {
    display: flex !important;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}
.catalog-product-view .product.media {
    flex: 0 0 460px;
    width: 460px;
    float: none !important;
    max-width: 100%;
}
.catalog-product-view .product-info-main {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    float: none !important;
}

/* Image gallery */
.catalog-product-view .gallery-placeholder {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: 10px;
    overflow: hidden;
}
/* Fotorama sets stage dimensions via inline styles — !important required to override */
.catalog-product-view .fotorama__stage {
    max-height: 460px !important;
    height: 460px !important;
}
.catalog-product-view .fotorama__stage__frame {
    width: 100% !important;
    height: 100% !important;
}
.catalog-product-view .fotorama__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}
.catalog-product-view .gallery-placeholder__image {
    width: 100% !important;
    height: 460px !important;
    object-fit: contain !important;
    object-position: center center !important;
}
.catalog-product-view .fotorama__nav-wrap { margin-top: 8px; }
.catalog-product-view .fotorama__thumb { border: 1px solid var(--ss-border); border-radius: 6px; overflow: hidden; }
.catalog-product-view .fotorama__active .fotorama__thumb { border-color: var(--ss-blue); }

/* Product title */
.catalog-product-view .page-title-wrapper.product { margin-bottom: 8px; }
.catalog-product-view .page-title { margin: 0; }
.catalog-product-view .page-title .base {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ss-ink);
}

/* SKU + stock row */
.catalog-product-view .product-info-stock-sku {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 6px 0 14px;
}
.catalog-product-view .product-info-stock-sku .product.sku {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.25rem;
    color: var(--ss-ink-3);
}
.catalog-product-view .product-info-stock-sku .product.sku .type { font-weight: 600; }
.catalog-product-view .product-info-stock-sku .product.sku .value {
    font-family: var(--ss-mono);
    letter-spacing: .02em;
}
.catalog-product-view .product-info-stock-sku .stock {
    font-size: 1.25rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.catalog-product-view .product-info-stock-sku .stock::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.catalog-product-view .product-info-stock-sku .stock.available   { color: var(--ss-green); }
.catalog-product-view .product-info-stock-sku .stock.unavailable { color: var(--ss-red); }

/* Price block */
.catalog-product-view .product-info-price {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ss-border);
}
.catalog-product-view .product-info-price .price-box {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.catalog-product-view .product-info-price .price-box .price {
    font-family: var(--ss-mono);
    font-size: 3rem;
    font-weight: 700;
    color: var(--ss-ink);
    line-height: 1;
}
.catalog-product-view .product-info-price .old-price .price {
    font-size: 1.6rem;
    color: var(--ss-ink-3);
    text-decoration: line-through;
}
.catalog-product-view .product-info-price .special-price .price { color: var(--ss-blue); }
.catalog-product-view .product-info-price .price-label {
    font-size: 1.2rem;
    color: var(--ss-ink-3);
    font-weight: 500;
}
.catalog-product-view .product-info-price .price-including-tax,
.catalog-product-view .product-info-price .price-excluding-tax {
    font-size: 1.2rem;
    color: var(--ss-ink-3);
}

/* Product options */
.catalog-product-view .product-options-wrapper { margin-bottom: 20px; }
.catalog-product-view .product-options-wrapper .fieldset > .field { margin-bottom: 16px; }
.catalog-product-view .product-options-wrapper .fieldset > .field > .label {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ss-ink);
    margin-bottom: 8px;
    display: block;
}
.catalog-product-view .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.catalog-product-view .swatch-option {
    border: 1.5px solid var(--ss-border);
    border-radius: var(--ss-r);
    padding: 6px 14px;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--ss-ink);
    cursor: pointer;
    transition: all .12s;
    min-width: 44px;
    text-align: center;
}
.catalog-product-view .swatch-option:hover   { border-color: var(--ss-blue); color: var(--ss-blue); background: #eff6ff; }
.catalog-product-view .swatch-option.selected { border-color: var(--ss-blue); background: var(--ss-blue); color: #fff; }
.catalog-product-view .swatch-option.disabled { opacity: .35; cursor: not-allowed; }
.catalog-product-view select.super-attribute-select {
    height: 42px;
    padding: 0 36px 0 12px;
    font-size: 1.4rem;
    min-width: 180px;
    width: auto;
    max-width: 100%;
    cursor: pointer;
}

/* Add to cart box */
.catalog-product-view .box-tocart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 20px;
}

/* Quantity — compact */
.catalog-product-view .box-tocart .field.qty { flex-shrink: 0; }
.catalog-product-view .box-tocart .field.qty .label {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ss-ink);
    display: block;
    margin-bottom: 6px;
}
.catalog-product-view .box-tocart .field.qty .control {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--ss-border);
    border-radius: var(--ss-r);
    overflow: hidden;
    height: 44px;
    width: auto;
}
/* Qty input — Blank theme sets padding/border on inputs globally with high specificity */
.catalog-product-view .box-tocart .input-text.qty {
    width: 60px !important;
    height: 42px !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff;
    text-align: center;
    font-family: var(--ss-mono);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0 !important;
    box-shadow: none !important;
    color: var(--ss-ink);
}
.catalog-product-view .box-tocart .input-text.qty:focus {
    outline: none;
    box-shadow: none !important;
    border: none !important;
}
.catalog-product-view .box-tocart .actions {
    flex: 1;
    padding-top: 26px;
}
/* ATC button — Blank sets height/padding on .action.tocart with !important */
.catalog-product-view .box-tocart .action.tocart {
    height: 44px !important;
    font-size: 1.5rem !important;
    font-weight: 700;
    padding: 0 28px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: .01em;
}

/* Secondary actions */
.catalog-product-view .product-addto-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 20px;
}
.catalog-product-view .product-addto-links .action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--ss-ink-2);
    padding: 7px 14px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r);
    text-decoration: none;
    transition: all .12s;
    background: #fff;
}
.catalog-product-view .product-addto-links .action:hover {
    border-color: var(--ss-blue);
    color: var(--ss-blue);
    background: #eff6ff;
}

/* Short description */
.catalog-product-view .product.attribute.overview {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ss-border);
}
.catalog-product-view .product.attribute.overview .value {
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--ss-ink-2);
}

/* Product tabs
   DOM alternates: title, content, title, content...
   Fix: flexbox + order pulls all titles to row 1, all content to row 2.
   Visibility controlled by .active class (set by Magento's tabs JS widget).
*/
.catalog-product-view .product.info.detailed {
    margin-top: 40px;
    width: 100%;
    flex: 0 0 100%;
}
/* Blank theme uses float-based tab layout — display:flex needs !important to override */
.catalog-product-view .product.data.items {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}
/* Remove Blank's float-based clearfix — not needed with flex */
.catalog-product-view .product.data.items::before,
.catalog-product-view .product.data.items::after { display: none !important; }

/* All tab titles → row 1 */
.catalog-product-view .product.data.items > .item.title {
    order: 1;
    float: none !important;
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    display: block;
}
.catalog-product-view .product.data.items > .item.title > .switch {
    display: block;
    height: auto;
    line-height: 1.5;
    padding: 8px 18px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ss-ink-2);
    border: 1px solid var(--ss-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    text-decoration: none;
    background: var(--ss-surface);
    cursor: pointer;
    transition: color .12s, background .12s;
}
.catalog-product-view .product.data.items > .item.title > .switch:hover {
    color: var(--ss-blue);
    background: #eff6ff;
    text-decoration: none;
}
.catalog-product-view .product.data.items > .item.title.active > .switch {
    background: #fff;
    color: var(--ss-blue);
    border-bottom-color: #fff;
}

/* All content panels → row 2. JS widget handles display show/hide via inline styles. */
.catalog-product-view .product.data.items > .item.content {
    order: 2;
    margin: 0;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ss-border);
    border-radius: 0 6px 6px 6px;
    padding: 28px 32px;
    background: #fff;
}
.catalog-product-view .product.data.items > .item.content .value,
.catalog-product-view .product.data.items > .item.content p {
    font-size: 1.4rem;
    line-height: 1.75;
    color: var(--ss-ink-2);
    max-width: 760px;
}

/* ── Configurable options & swatches ─────────────────────────────────────── */

/* Wrapper */
.catalog-product-view .rwc-swatch-wrapper {
    margin-bottom: 20px;
}

/* Each attribute group (e.g. "Size") */
.catalog-product-view .swatch-attribute {
    margin-bottom: 18px;
}

/* Attribute label row */
.catalog-product-view .swatch-attribute-label {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ss-ink);
    display: inline-block;
    margin-bottom: 4px;
}
.catalog-product-view .swatch-attribute-selected-option {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--ss-ink-2);
    margin-left: 6px;
}
.catalog-product-view .swatch-attribute-selected-option::before {
    content: ': ';
}

/* Options row */
.catalog-product-view .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

/* Individual text swatch (size label like XL, 10", etc.) */
.catalog-product-view .swatch-option.text {
    min-width: 48px;
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ss-ink);
    background: #fff;
    border: 1.5px solid var(--ss-border);
    border-radius: var(--ss-r);
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
    user-select: none;
    line-height: 1;
    box-shadow: none;
}
.catalog-product-view .swatch-option.text:hover {
    border-color: var(--ss-blue);
    color: var(--ss-blue);
    background: #eff6ff;
}
.catalog-product-view .swatch-option.text.selected {
    border-color: var(--ss-blue);
    background: var(--ss-blue);
    color: #fff;
}
.catalog-product-view .swatch-option.text.disabled {
    opacity: .4;
    cursor: not-allowed;
    border-style: dashed;
}

/* Color swatch */
.catalog-product-view .swatch-option.color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--ss-border);
    cursor: pointer;
    transition: transform .12s, border-color .12s, box-shadow .12s;
    box-shadow: none;
}
.catalog-product-view .swatch-option.color:hover {
    transform: scale(1.12);
    border-color: var(--ss-blue);
}
.catalog-product-view .swatch-option.color.selected {
    border-color: var(--ss-blue);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ss-blue);
}
.catalog-product-view .swatch-option.color.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Select dropdown fallback (non-swatch attributes) */
.catalog-product-view .field.configurable {
    margin-bottom: 18px;
}
.catalog-product-view .field.configurable > .label {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ss-ink);
    margin-bottom: 8px;
}
/* Select element — Blank sets height/padding on selects globally */
.catalog-product-view select.super-attribute-select {
    height: 42px !important;
    padding: 0 36px 0 12px !important;
    font-size: 1.4rem;
    min-width: 200px;
    width: auto;
    max-width: 100%;
    cursor: pointer;
    background-color: #fff;
    border: 1.5px solid var(--ss-border);
    border-radius: var(--ss-r);
}
.catalog-product-view select.super-attribute-select:focus {
    border-color: var(--ss-blue);
    box-shadow: 0 0 0 3px rgba(0,102,204,.1);
    outline: none;
}

/* Swatch tooltip */
.catalog-product-view .swatch-option-tooltip {
    background: var(--ss-ink);
    color: #fff;
    border-radius: 6px;
    font-size: 1.2rem;
    padding: 6px 10px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.catalog-product-view .swatch-option-tooltip .title {
    color: #fff;
}

/* ── Layered nav sidebar swatches — compact to fit inside overflow:hidden ── */
.sidebar .swatch-option.text {
    min-width: 28px;
    height: 26px;
    padding: 0 6px;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 4px;
}
.sidebar .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 8px;
}

/* ── Listing page swatches ───────────────────────────────────────────────── */
.products-grid .swatch-option.text,
.products-list .swatch-option.text {
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1.5px solid var(--ss-border);
    color: var(--ss-ink-2);
    background: #fff;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.products-grid .swatch-option.text:hover,
.products-list .swatch-option.text:hover {
    border-color: var(--ss-blue);
    color: var(--ss-blue);
}
.products-grid .swatch-option.text.selected,
.products-list .swatch-option.text.selected {
    border-color: var(--ss-blue);
    background: var(--ss-blue);
    color: #fff;
}
.products-grid .swatch-attribute-options,
.products-list .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

/* Additional attributes table */
.catalog-product-view .additional-attributes { width: 100%; border-collapse: collapse; font-size: 1.35rem; }
.catalog-product-view .additional-attributes th,
.catalog-product-view .additional-attributes td { padding: 10px 14px; border-bottom: 1px solid var(--ss-border); text-align: left; }
.catalog-product-view .additional-attributes th { font-weight: 600; color: var(--ss-ink-2); width: 220px; background: var(--ss-surface); }
.catalog-product-view .additional-attributes td { color: var(--ss-ink); }
.catalog-product-view .additional-attributes tr:last-child th,
.catalog-product-view .additional-attributes tr:last-child td { border-bottom: none; }

/* Mobile */
@media (max-width: 767px) {
    /* Fotorama inline styles require !important to override in mobile */
    .catalog-product-view .column.main {
        flex-direction: column !important;
        flex-wrap:      nowrap;
        gap:            12px;
        align-items:    stretch;
    }
    .catalog-product-view .product.media      { flex: 0 0 auto; width: 100%; }
    .catalog-product-view .product-info-main  { flex: 1 1 auto; width: 100%; }

    /* Compact gallery — fotorama inline styles need !important */
    .catalog-product-view .fotorama__stage { max-height: 200px !important; height: 200px !important; }
    .catalog-product-view .gallery-placeholder { border-radius: 8px; }
    .catalog-product-view .gallery-placeholder__image { max-height: 200px !important; }
    .catalog-product-view .fotorama__img { max-height: 200px !important; }

    /* ── Typography ─────────────────────────────────────────────── */
    .catalog-product-view .page-title .base     { font-size: 1.8rem; }
    .catalog-product-view .product-info-price .price-box .price { font-size: 2.2rem; }
    .catalog-product-view .product-info-price .old-price .price  { font-size: 1.4rem; }

    /* ── Spacing: price section ──────────────────────────────────── */
    .catalog-product-view .product-info-price {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    .catalog-product-view .product-info-stock-sku { gap: 10px; margin: 4px 0 10px; }
    .catalog-product-view .product-reviews-summary { margin-bottom: 4px; }

    /* ── Swatch options ──────────────────────────────────────────── */
    .catalog-product-view .swatch-attribute-options { gap: 6px; }
    .catalog-product-view .swatch-option {
        padding:   5px 10px;
        font-size: 1.2rem;
        min-width: 38px;
    }
    .catalog-product-view .product-options-wrapper { margin-bottom: 12px; }
    .catalog-product-view .product-options-wrapper .fieldset > .field { margin-bottom: 10px; }

    /* ── Add to cart ─────────────────────────────────────────────── */
    .catalog-product-view .box-tocart {
        flex-direction: column;
        align-items:    stretch;
        gap:            8px;
        margin-bottom:  12px;
    }
    .catalog-product-view .box-tocart .actions { padding-top: 0; }
    .catalog-product-view .box-tocart .action.tocart {
        height:    42px !important;
        font-size: 1.4rem;
    }
    .catalog-product-view .box-tocart .field.qty { display: inline-block; }
    .catalog-product-view .box-tocart .field.qty .label { margin-bottom: 4px; }
    .catalog-product-view .box-tocart .field.qty .control { display: inline-flex; height: 40px; width: auto; }
    .catalog-product-view .box-tocart .input-text.qty {
        height: 38px !important;
        font-size: 1.4rem;
    }

    /* ── Short description ───────────────────────────────────────── */
    .catalog-product-view .product.attribute.overview {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    .catalog-product-view .product.attribute.overview .value { font-size: 1.3rem; }

    /* ── Secondary actions ───────────────────────────────────────── */
    .catalog-product-view .product-addto-links { margin-bottom: 12px; }
    .catalog-product-view .product-addto-links .action { font-size: 1.1rem; padding: 6px 12px; }

    /* ── Tabs ────────────────────────────────────────────────────── */
    .catalog-product-view .product.info.detailed {
        margin-top: 20px;
        /* Override desktop flex:0 0 100% — on mobile column.main is
           flex-direction:column so that basis would consume the entire
           column height and push the next sibling (related products)
           to the bottom of the page. */
        flex: 0 0 auto;
    }
}

/* ── Fotorama fullscreen overrides ──────────────────────────────────────────
   body.catalog-product-view persists in fullscreen, so the 460px/200px stage
   rules above apply via inheritance. These rules undo them for fullscreen mode.
   Fotorama inline styles always require !important to override. */
.fotorama--fullscreen .fotorama__stage {
    max-height: 100vh !important;
    height: 100vh !important;
}
.fotorama--fullscreen .fotorama__img {
    max-height: 100vh !important;
}
/* No !important on full image — magnify.js must control width/height via inline styles for zoom to work */
.fotorama--fullscreen .fotorama__img--full {
    max-width: 100%;
    max-height: 100vh;
}
@media (max-width: 767px) {
    .fotorama--fullscreen .fotorama__stage {
        max-height: 100vh !important;
        height: 100vh !important;
    }
    .fotorama--fullscreen .fotorama__img {
        max-height: 100vh !important;
    }
    .fotorama--fullscreen .fotorama__img--full {
        max-width: 100%;
        max-height: 100vh;
    }
}

/* =============================================================
   Tier prices — B2B "Volume Pricing" box.
   Targets Magento core markup: <ul class="prices-tier items">.
   Simple products render server-side (Magento_Catalog tier_prices.phtml).
   Configurable products render client-side via Knockout from
   Magento_ConfigurableProduct tier_price.phtml.
   Both produce identical <ul class="prices-tier items"> markup, so
   this block styles both consistently. High-specificity selectors
   + a few !important defeat Magento core defaults on <ul>.
   ============================================================= */
.product-info-main ul.prices-tier.items,
ul.prices-tier.items {
    list-style: none !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ss-blue) !important;
    border-radius: 6px !important;
    overflow: hidden;
    background: #fff !important;
    font-family: var(--ss-mono);
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.product-info-main ul.prices-tier.items::before,
ul.prices-tier.items::before {
    content: "Volume Pricing";
    display: block;
    background: var(--ss-blue);
    color: #fff;
    font-family: "Syne", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
    padding: 8px 12px;
}
.product-info-main ul.prices-tier.items li.item,
ul.prices-tier.items li.item {
    padding: 8px 12px !important;
    margin: 0 !important;
    color: var(--ss-ink);
    border-bottom: 1px solid #f1f5f9;
    line-height: 1.5;
    background: #fff;
    list-style: none;
}
.product-info-main ul.prices-tier.items li.item:last-child,
ul.prices-tier.items li.item:last-child {
    border-bottom: none;
}
.product-info-main ul.prices-tier.items .price-container,
.product-info-main ul.prices-tier.items .price-wrapper,
.product-info-main ul.prices-tier.items .price,
ul.prices-tier.items .price-container,
ul.prices-tier.items .price-wrapper,
ul.prices-tier.items .price {
    font-family: var(--ss-mono) !important;
    font-weight: 700 !important;
    color: var(--ss-ink);
}
.product-info-main ul.prices-tier.items .benefit,
ul.prices-tier.items .benefit {
    color: var(--ss-green, #16a34a) !important;
    font-weight: 700 !important;
    font-size: 12px;
    margin-left: 4px;
}
.product-info-main ul.prices-tier.items .percent,
ul.prices-tier.items .percent {
    font-family: var(--ss-mono) !important;
}