/**
 * Product detail gallery — stylesheet.
 * Markup: Spares/autostore_child Magento_Catalog product/view/gallery.phtml
 * Behaviour: web/js/afx-gallery.js
 *
 * The storefront loads Bootstrap, legacy Luma CSS and two Tailwind builds, so bare Tailwind
 * utilities lose on this page: yttheme.css forces button{height:35px}, several sheets paint
 * buttons brand green, and Bootstrap redefines .border-primary to #007bff !important.
 *
 * Layout still uses Tailwind utilities in the template (uncontested), but background, border,
 * height and padding on gallery buttons are settled here, scoped under .afx-pdp-gallery.
 * Brand accents use var(--color-primary) directly so each store keeps its own colour.
 */

/* Reset the legacy theme's global <button> styling inside the gallery only.
 * !important is required: the store sheet paints every button via
 * button:not(.owl-prev):not(.owl-next):not(.slick-arrow), specificity (0,3,1), and loads
 * after this file — so neither specificity nor ordering can settle it. */
.afx-pdp-gallery button,
.afx-pdp-lightbox button {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: normal !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    line-height: normal !important;
    -webkit-appearance: none;
    appearance: none;
}

/* --------------------------------------------------------------------------
 * Main image
 * ----------------------------------------------------------------------- */
.afx-pdp-gallery .afx-pdp-gallery__zoom-trigger {
    display: block;
    width: 100% !important;
    height: auto !important;
    cursor: zoom-in;
}

.afx-pdp-gallery .gallery-placeholder__image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
 * Prev / next arrows over the main image.
 *
 * These sit ON the product photo, so a solid grey box reads as a hole punched
 * in the image. Instead: a soft translucent white disc that lets the photo show
 * through, with the chevron itself in the store's base colour. Inset slightly
 * from the edges so it never collides with the image border.
 * ----------------------------------------------------------------------- */
.afx-pdp-gallery .afx-pdp-gallery__nav {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, .72) !important;
    color: var(--color-primary, #137C4E) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(2px);
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.afx-pdp-gallery .afx-pdp-gallery__nav:hover,
.afx-pdp-gallery .afx-pdp-gallery__nav:focus-visible {
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .26) !important;
}

/* Keep the discs clear of the image edge. */
.afx-pdp-gallery .afx-pdp-gallery__nav.left-0 {
    left: .625rem;
}

.afx-pdp-gallery .afx-pdp-gallery__nav.right-0 {
    right: .625rem;
}

/* Pin the icon size: the theme has broad `svg { width: 100% }`-style rules that would
   otherwise stretch the chevron to fill the button. */
.afx-pdp-gallery .afx-pdp-gallery__nav svg {
    display: block;
    width: 22px !important;
    height: 22px !important;
    /* Lucide ships stroke-width="1.5" as a presentation attribute, which reads too thin at
       this size over a photo. CSS wins over presentation attributes, so set it here (the
       icon view model does not override an attribute the SVG already carries). */
    stroke-width: 2.25;
}

/* --------------------------------------------------------------------------
 * Thumbnail strip. Box size comes from the Sm_Autostore admin config
 * (thumbs_width/height), passed in as custom properties on the gallery root.
 * ----------------------------------------------------------------------- */
.afx-pdp-gallery .afx-pdp-gallery__thumb {
    width: var(--afx-thumb-w, 95px) !important;
    height: var(--afx-thumb-h, 95px) !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 3px !important;
    background-color: #fff !important;
    cursor: pointer;
    overflow: hidden;
}

.afx-pdp-gallery .afx-pdp-gallery__thumb.is-active,
.afx-pdp-gallery .afx-pdp-gallery__thumb:hover {
    border-color: var(--color-primary, #137C4E) !important;
}

.afx-pdp-gallery .afx-pdp-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Vertical thumbnail strip (autostore/product_detail/thumbs_style = vertical). */
.afx-pdp-gallery--vertical .afx-pdp-gallery__thumbs {
    flex-direction: column;
}

/* --------------------------------------------------------------------------
 * Lightbox
 * ----------------------------------------------------------------------- */
.afx-pdp-lightbox {
    background-color: rgba(0, 0, 0, .85);
    cursor: zoom-out;
}

.afx-pdp-lightbox .afx-pdp-lightbox__image {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
}

/* (the lightbox buttons are covered by the shared reset at the top of this file) */

.afx-pdp-lightbox .afx-pdp-lightbox__close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
}

.afx-pdp-lightbox .afx-pdp-lightbox__close:hover {
    background-color: rgba(255, 255, 255, .3) !important;
}

/* Same treatment as the on-image arrows, so both zoom levels look like one control set. */
.afx-pdp-lightbox .afx-pdp-lightbox__control {
    width: 48px !important;
    height: 48px !important;
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, .85) !important;
    color: var(--color-primary, #137C4E) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
    transition: background-color .15s ease;
}

.afx-pdp-lightbox .afx-pdp-lightbox__control:hover {
    background-color: #fff !important;
}

.afx-pdp-lightbox .afx-pdp-lightbox__control.left-0 {
    left: 1.25rem;
}

.afx-pdp-lightbox .afx-pdp-lightbox__control.right-0 {
    right: 1.25rem;
}

.afx-pdp-lightbox .afx-pdp-lightbox__control svg,
.afx-pdp-lightbox .afx-pdp-lightbox__close svg {
    display: block;
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.25;
}


/* ==========================================================================
 * ASSEMBLY (grouped product) page — diagram + parts table + diagram slider.
 * Markup: the assembly branch of Magento_Catalog product/view/gallery.phtml.
 * Moved out of that template's inline <style> block so the phtml carries only
 * markup. Behaviour lives in web/js/afx-gallery.js.
 * ========================================================================== */
/* Full-width assembly layout: neutralise the constrained Hyvä product
   grid / column so the diagram + parts table use the whole page width. */
body.page-product-grouped .columns .column.main { max-width: 100% !important; width: 100% !important; }
body.page-product-grouped .product-details-wrapper,
body.page-product-grouped .product_info_wrapper,
body.page-product-grouped .product_info_otherdata,
body.page-product-grouped .product-info-main { display: block !important; max-width: 100% !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; }
body.page-product-grouped .product-info-main [class*="grid-cols-"] { display: block !important; }
/* the original assembly page has no product-name heading above the diagram */
body.page-product-grouped .page-title-wrapper { display: none !important; }
/* hide the standard product-details card (title/description/price) — the
   assembly page only shows the diagram, parts table and diagram slider */
body.page-product-grouped .product-info-main > .card.mb-6,
body.page-product-grouped .product-info-main .card.mb-6 { display: none !important; }
/* "Linked Vehicles and Assemblies" block (#assambly_linkage) — part of the
   original design, below the slider. Force it full-width (not squeezed into a
   narrow grid column) and give it the original's green tab-header + bordered box. */
body.page-product-grouped .grid.lg\:grid-cols-2:has(#assambly_linkage) { display: block !important; }
body.page-product-grouped #assambly_linkage { display: block !important; width: 100% !important; max-width: 100% !important; margin-top: 2.5rem; }
body.page-product-grouped #assambly_linkage h2 {
    display: inline-block; margin: 0; background: var(--color-primary, #137C4E); color: #fff;
    padding: .85rem 1.75rem; border-radius: 6px 6px 0 0; text-align: left;
    font-size: 1.35rem; line-height: 1.2; position: relative; z-index: 1;
}
body.page-product-grouped #assambly_linkage .card {
    border: 1px solid #e5e5e5; border-radius: 0 6px 6px 6px; background: #fff;
    padding: 2rem 1.75rem; margin: 0; box-shadow: none;
}
body.page-product-grouped #assambly_linkage .mmt-empty { margin: 0; color: #777; }
.afx-assembly-layout { display: flex; flex-wrap: nowrap; gap: 2.5rem; align-items: flex-start; width: 100%; }
.afx-assembly-layout .afx-assembly-diagram { flex: 0 0 46%; max-width: 46%; position: sticky; top: 1rem; }
.afx-assembly-layout .afx-assembly-parts { flex: 1 1 auto; min-width: 0; }
.afx-assembly-layout .afx-assembly-diagram #zoomImg { display: inline-block; margin-bottom: .75rem; cursor: pointer; }
.afx-assembly-layout .afx-assembly-diagram #svgContainer { width: 100%; }
.afx-assembly-layout .afx-assembly-diagram #svgContainer svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
}
.afx-assembly-layout .afx-assembly-parts .table-wrapper.grouped { margin: 0; max-height: 640px; overflow-y: auto; overflow-x: hidden; }
.afx-assembly-layout .afx-assembly-parts #super-product-table { width: 100%; }
.afx-assembly-layout .afx-assembly-parts #super-product-table > tbody > tr { border-bottom: 1px solid #e5e5e5; }
/* Row density. Measured before tightening: rows were 139px tall because the td carried
   16px vertical padding and the price rendered at 22.15px/36.77px line-height while every
   other cell is 12px/19.92px. The price stays the largest element in the row, just no
   longer three times the body size, and the row loses ~24% of its height. */
.afx-assembly-layout .afx-assembly-parts #super-product-table td { padding: .5rem; vertical-align: top; }
.afx-assembly-layout .afx-assembly-parts #super-product-table th { padding: .5rem; }
.afx-assembly-layout .afx-assembly-parts #super-product-table .price,
.afx-assembly-layout .afx-assembly-parts #super-product-table .product.attribute.price .value,
.afx-assembly-layout .afx-assembly-parts #super-product-table .product.attribute.netprice .value {
    font-size: .9375rem;
    line-height: 1.35;
}
.afx-assembly-layout .afx-assembly-parts #super-product-table td.qty { text-align: right; white-space: nowrap; }
.afx-assembly-layout .afx-assembly-parts #super-product-table td.qty .control.qty form { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
/* Qty box as on the live stores (47 x 35, 12px, padding 0 9px). The sitewide `.page-main input[type=number]` touch
   rule (44px tall, 8px/12px padding, 16px text) left about 22px for the number, which clipped it ("2", "8" half shown).
   Chrome also keeps room for the spin buttons even when they are not drawn, so they are removed, as on the listing qty. */
.afx-assembly-layout .afx-assembly-parts #super-product-table td.qty input.qty {
    width: 47px;
    height: 35px;
    min-height: 0;
    padding: 0 9px;
    font-size: 12px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.afx-assembly-layout .afx-assembly-parts #super-product-table td.qty input.qty::-webkit-inner-spin-button,
.afx-assembly-layout .afx-assembly-parts #super-product-table td.qty input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Assembly-siblings slider (other diagrams for this vehicle) */
.afx-assembly-siblings { width: 100%; margin-top: 2.5rem; position: relative; clear: both; }
.afx-assembly-siblings .afx-assembly-siblings-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
/* (the old `.image-cat { min-height: 150px }` is superseded by the fixed band below) */
/* Track: a 5-slot viewport, matching the `items: 5, center: true` the original Owl
   Carousel config used before Owl (RequireJS/jQuery) stopped running under Hyvä.
   Slots are sized off the track width rather than a fixed px width, so exactly N cards
   are visible with no half-card peeking in at the edges. */
.afx-assembly-siblings .grouped-assambly-products,
.afx-assembly-siblings .grouped-assambly-products.owl-carousel {
    --afx-slide-gap: 1.25rem;
    --afx-slides: 5;
    --afx-slide-w: calc((100% - (var(--afx-slides) - 1) * var(--afx-slide-gap)) / var(--afx-slides));
    display: flex !important;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    gap: var(--afx-slide-gap);
    overflow-x: auto;
    padding-bottom: .75rem;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-type: x proximity;
}


/* Three visible on tablet, one on phone — the breakpoints the old Owl responsive config
   used (0:1, 640:3, 992:5). */
@media (max-width: 991px) {
    .afx-assembly-siblings .grouped-assambly-products,
    .afx-assembly-siblings .grouped-assambly-products.owl-carousel {
        --afx-slides: 3;
    }
}

@media (max-width: 639px) {
    .afx-assembly-siblings .grouped-assambly-products,
    .afx-assembly-siblings .grouped-assambly-products.owl-carousel {
        --afx-slides: 1;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
.afx-assembly-siblings .grouped-assambly-products .owl-stage,
.afx-assembly-siblings .grouped-assambly-products .owl-stage-outer { display: contents !important; }
/* Card fills exactly one slot. min-width:0 is needed to beat the min-w-[200px] the
   legacy_fixes converter puts on each .item. */
.afx-assembly-siblings .grouped-assambly-products .item {
    flex: 0 0 var(--afx-slide-w) !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: center;
    display: flex;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

/* Uniform cards: without this every card stretched to the tallest title (three lines on
   e.g. "0020 - LUBRICATION SYSTEM AND BLOW-BY SYSTEM"), leaving dead space in all the
   others. The title gets a fixed two-line box instead, clamped with an ellipsis; the full
   name stays available via the anchor's title attribute. */
.afx-assembly-siblings .grouped-assambly-products .item .content-box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.afx-assembly-siblings .grouped-assambly-products .item .cat-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Selected diagram in the slider.
   Was hardcoded #137C4E/#e9f7ef (green on the red USA store too). Now derived from the
   store base colour, using the same 9%/20% tints as the PDP purchase box.
   !important is required: each store's custom.css carries a GLOBAL
       .highlighted { background-color: #e2fff2 !important }
   which is green on both stores and would otherwise win. This selector is far more
   specific, so it only affects the assembly slider. */
.afx-assembly-siblings .grouped-assambly-products .item.highlighted {
    border-color: var(--color-primary, #137C4E) !important;
    background: color-mix(in srgb, var(--color-primary, #137C4E) 9%, #fff) !important;
}
/* One card per slide.
   The markup is the theme's category-widget structure (.parent-cat > .image-cat, then
   .group-cat > .cat-title) and the theme styles those inner wrappers with their own
   background/border, so each slide rendered as TWO stacked boxes — an image box and a
   separate title box — inside the outer card. Strip the inner decoration so the slide is a
   single card: image on top, title underneath. */
.afx-assembly-siblings .grouped-assambly-products .item .parent-cat,
.afx-assembly-siblings .grouped-assambly-products .item .group-cat,
.afx-assembly-siblings .grouped-assambly-products .item .cat-title {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* The category-widget CSS gives .group-cat a min-height of 100px while the two-line
       title only needs ~42px, which left ~58px of blank card under every title. */
    min-height: 0 !important;
}

/* ...and .content-box a 10px margin, which showed as a gap inside the card border. */
.afx-assembly-siblings .grouped-assambly-products .item .content-box {
    margin: 0 !important;
}
.afx-assembly-siblings .grouped-assambly-products .item .content-box { padding: .75rem; }
.afx-assembly-siblings .grouped-assambly-products .item .image-cat {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    min-height: 0 !important;
    line-height: 0;
}

/* The <a> wrapping the image is inline by default, so its line-height added a strip of
   empty space under every thumbnail. */
.afx-assembly-siblings .grouped-assambly-products .item .image-cat a {
    display: block;
    width: 100%;
    line-height: 0;
}
.afx-assembly-siblings .grouped-assambly-products .item .image-cat img { width: 100% !important; height: 130px !important; object-fit: contain !important; display: block; }
.afx-assembly-siblings .grouped-assambly-products .item .cat-title {
    padding: .5rem 0 0 !important;
    font-size: .8125rem;
    line-height: 1.3;
    text-align: center;
    min-height: calc(2 * 1.3em + .5rem);
}
.afx-assembly-siblings .grouped-assambly-products .item .cat-title a { color: #333; }
@media (max-width: 991px) {
    .afx-assembly-layout { flex-wrap: wrap; }
    .afx-assembly-layout .afx-assembly-diagram,
    .afx-assembly-layout .afx-assembly-parts { flex: 1 1 100%; max-width: 100%; position: static; }
}

/* --------------------------------------------------------------------------
 * Selected row in the assembly parts table.
 *
 * afx-gallery.js adds `highlighted focused` to the matching <tr> when an SVG
 * hotspot is clicked. Each store's custom.css carries a GLOBAL
 *     .highlighted { background-color: #e2fff2 !important }
 * which is the same mint green on BOTH stores, so the selected row came out
 * green on the red USA storefront. Derived from the store base colour instead,
 * using the same 9% tint as the slider card and the PDP purchase box.
 *
 * The rule is set on the <td> as well: cell backgrounds paint over the row, so
 * styling only the <tr> leaves striped/zebra cells showing through.
 * ----------------------------------------------------------------------- */
#super-product-table tbody tr.highlighted,
#super-product-table tbody tr.highlighted > td {
    background-color: color-mix(in srgb, var(--color-primary, #137C4E) 9%, #fff) !important;
}