/**
 * 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; }
.afx-assembly-layout .afx-assembly-parts #super-product-table td.qty input.qty { width: 3rem; text-align: center; }
/* 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;
}