/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
/*
 * Product detail page (con_products Family/Show.html + Formheader.html + their Show/* partials),
 * minus the cart (side-basket flyout + Orders.html) and minus the compare box (shared with the
 * standalone Compare page).
 */
@layer pages {
  .product-form-header {
    padding: 10px 20px;
    background: var(--shade-grey-070);
    margin-bottom: 20px;
    border: 1px solid var(--color-primary-orange);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .product-form-header .product-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-primary-orange);
    font-family: var(--font-family-serif);
  }
  .product-form-header .image-gallery {
    width: 200px;
    flex-shrink: 0;
  }
  @media screen and (min-width: 769px) {
    .product-form-header .productEcosystem__img {
      height: auto;
      width: 150px;
    }
    .product-form-header .productEcosystem__img img {
      width: 100%;
    }
  }
  @media screen and (min-width: 992px) {
    .product-form-header .productEcosystem__img {
      height: auto;
      width: 200px;
    }
    .product-form-header .productEcosystem__img img {
      width: 100%;
    }
  }
  .product-form-header__text {
    width: 100%;
  }
  @media screen and (max-width: 768px) {
    .product-form-header {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  h1#productTitle {
    margin-bottom: 0;
    text-align: left;
  }
  .product-stage {
    /* Figma mobile (node 3668:50799): section padding; tablet+ keeps "--padding-xl". */
    padding: var(--section-padding-default) 0;
    margin-bottom: var(--section-padding-default);
  }
  @media (min-width: 640px) {
    .product-stage {
      padding: var(--padding-xl) 0;
    }
  }
  .product-stage {
    display: grid;
    gap: var(--grid-gutter-default);
    align-items: start;
    background: var(--shade-grey-070);
    position: relative;
    z-index: 1;
  }
  .product-stage:before {
    content: "";
    position: absolute;
    /* behind the stage's own content (its "z-index: 1" makes it the stacking context) --
       otherwise it paints over every non-positioned child, e.g. the gallery thumbnails */
    z-index: -1;
    inset: 0;
    margin: 0 calc(-50vw + 50%);
    background: var(--shade-grey-070);
  }
  body:has(.product-stage) {
    /* Full-bleed "::before" backgrounds: "isolation" + "z-index: -1" keep them behind the
       element's own content -- a plain absolute pseudo paints over (and swallows clicks on)
       every non-positioned child, e.g. the product tabs nav. */
  }
  body:has(.product-stage) :is(#pageHeader, .breadcrumb_wrapper) {
    background: var(--shade-grey-070);
    position: relative;
    isolation: isolate;
  }
  body:has(.product-stage) :is(#pageHeader, .breadcrumb_wrapper):before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: 0 calc(-50vw + 50%);
    background: var(--shade-grey-070);
  }
  body:has(.product-stage) #mainContent {
    background: var(--shade-white);
    position: relative;
    isolation: isolate;
    padding-top: 0;
  }
  body:has(.product-stage) #mainContent:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: 0 calc(-50vw + 50%);
    background: var(--shade-white);
  }
  @media (min-width: 768px) {
    .product-stage {
      /* Figma (node 5083:47071): gallery ~563px of ~1330px, text column wider. */
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
  }
  /* Figma (node 5083:47071) spacing, via margins: heading block (kicker + h1) -> intro
     "--text-gap-h1", intro paragraphs "--gap-s", intro -> glass spec box "--gap-xl". */
  .product_single_title {
    position: relative;
    z-index: 1;
  }
  @media (min-width: 640px) {
    .product_single_title {
      padding-inline-start: var(--padding-xl);
    }
  }
  .product_single_title .product_heading {
    margin-bottom: var(--text-gap-h1);
  }
  .product_single_title .subline {
    margin-bottom: var(--gap-xl);
    font-size: var(--font-size-l);
    font-weight: 300;
    line-height: 1.5;
  }
  .product_single_title .subline > * {
    margin: 0;
  }
  .product_single_title .subline > * + * {
    margin-top: var(--gap-s);
  }
  /* Figma: spec list, jump links and CTA row share one glass card. */
  .product_specs {
    padding: var(--padding-m);
    border-radius: var(--border-radius-default);
    border: var(--border-default-width, 2px) solid var(--glass-white-stroke, #ececed);
    background: var(--glass-white);
    backdrop-filter: blur(30px);
  }
  @media (min-width: 640px) {
    .product_specs {
      padding: var(--padding-l);
    }
  }
  .product_specs {
    /* Spacing via margins (no flex): "--gap-l" between spec list / jump links / CTA row. */
  }
  .product_specs > * {
    margin: 0 0 var(--gap-l);
  }
  .product_specs {
    /* CTA row is the visual last child -- RequestQuote.html appends a hidden dialog after it. */
  }
  .product_specs > :last-child,
  .product_specs > .product_cta {
    margin-bottom: 0;
  }
  .document_disclaimer {
    margin: 0 0 var(--gap-xxl);
    text-align: center;
  }
  .product_specs {
    /* Figma (node 5083:47101): spec list as column with "--gap-xs" between items. Flex on the
       "ul" only -- the "li"s stay block, so inline content (strong, links) is unaffected and the
       orange "::marker" bullet still renders. Jump-link list has its own gap below. */
  }
  .product_specs > ul:not(.product_specs__jumpToAnchors) {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }
  .product_specs > ul {
    margin-bottom: var(--gap-l);
  }
  .product_specs .aReadyLogo {
    display: block;
    max-width: 180px;
  }
  .product_specs .vReadyLogo {
    display: block;
  }
  .product_specs__jumpToAnchors {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--button-gap-xs);
  }
  .product_specs__jumpToAnchors a {
    font-weight: bold;
  }
  .product_spec_row {
    margin: 0;
    border-bottom: 1px solid var(--color-primary-anthracite);
    padding-top: 20px;
    padding-bottom: 20px;
  }
  /* Product detail tabs (Family/Show.html, ".bgm-tabs.product-tabs"). Figma: "--gap-xxl" between
     the pill nav and the panel content (and below it) -- the nav's own 20px bottom margin is
     dropped so it doesn't add up on top. */
  .product-tabs > .tabs-selector {
    margin-block-end: 0;
  }
  /* Figma (node 3401:33630): panel content narrower than the page column -- 1190px, centered. */
  .product-tabs.-tabs-mode > .bgm-accordion__item > .bgm-accordion__panel > .bgm-accordion__panel-inner > .bgm-accordion__panel-content {
    max-width: 1190px;
    margin-inline: auto;
    padding: var(--gap-xxl) 0;
  }
  /* Ecosystem + Product Variants tab (Figma nodes 3401:33430, 3401:32826): Show/Article.html as
     stacked glass cards. Spacing via sibling margins, not flex -- bgm-tabs-accordion.js re-wraps
     the panel's children at init, and the variants filter toggles "display: none" per card. */
  .article {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    padding: var(--padding-l);
    border-radius: var(--border-radius-default);
    border: var(--border-default-width, 2px) solid var(--glass-grey-stroke, #F5F5F5);
    background: var(--glass-grey);
    /* glass-grey */
    box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.08);
    backdrop-filter: blur(30px);
  }
  .article + .article {
    margin-top: var(--gap-m);
  }
  .article .product_name {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-h1-h6);
    line-height: 1.2;
  }
  .article .product_desc > :last-child {
    margin-bottom: 0;
  }
  /* Ecosystem tab: per category an h3 above its cards. */
  #ecosystemParts h3 {
    font-size: var(--font-size-h3);
    line-height: 1.2;
    margin-bottom: var(--gap-m);
  }
  #ecosystemParts .article + h3 {
    margin-top: var(--gap-xxl);
  }
  /* Accessories tab (Figma node 3401:33630): Show/Accessory.html as glass cards, image left of
     title/short description/"Details" button, stacked below tablet. Own ".accessories" wrapper
     so the flex gap survives bgm-tabs-accordion.js re-wrapping the panel's children; gap matches
     the ".article" card spacing of the other tabs. */
  .accessories {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
  }
  .accessory {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
    padding: var(--padding-l);
    border-radius: var(--border-radius-default);
    border: var(--border-default-width, 2px) solid var(--glass-grey-stroke, #F5F5F5);
    background: var(--glass-grey);
    /* glass-grey */
    box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.08);
    backdrop-filter: blur(30px);
  }
  @media (min-width: 640px) {
    .accessory {
      flex-direction: row;
      gap: var(--gap-xxl);
    }
  }
  .accessory__img {
    flex: 0 0 139px;
  }
  .accessory__img img {
    width: 139px;
    height: auto;
  }
  .accessory__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--button-gap-s);
  }
  .accessory__text {
    display: flex;
    flex-direction: column;
    gap: var(--text-gap-h3);
  }
  .accessory__text h3 {
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: 1.2;
  }
  .accessory__text > :last-child {
    margin-bottom: 0;
  }
  /* Product gallery (Show/Images.html, Figma node 3245:31713): main image centred, thumbnail row
     below as glass tiles, active tile (".isactive", toggled by init.js) outlined orange. */
  .product_mainimage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    /* Size on the zoom container, not the img -- easyzoom's hover overlay covers the container. */
  }
  .product_mainimage .easyzoom {
    width: 100%;
    /* "> a > img" = the main image only -- the zoom image inside ".easyzoom-flyout" must
       keep its natural size, or there's nothing left to pan. */
  }
  .product_mainimage .easyzoom > a > img {
    display: block;
    width: 100%;
    height: auto;
  }
  .product_mainimage {
    /* Figma mobile: 5 equal square tiles fill the row; tablet+: fixed 64px thumbs, left-aligned. */
  }
  .product_mainimage .thumbnails {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-self: stretch;
    gap: var(--gap-m);
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .product_mainimage .thumbnails li {
    margin: 0;
    padding: 0;
  }
  .product_mainimage .thumbnails li::before {
    /* cancels the sitewide ul li::before orange-arrow bullet from Css/4-elements/typography.css
       ("@layer elements"); this file's own "@layer pages" wins by layer order alone. */
    content: normal;
  }
  .product_mainimage .thumbnails li a {
    display: block;
    padding: var(--padding-xs);
    border: var(--border-default-width) solid var(--shade-grey-100);
    border-radius: var(--border-radius-default);
    background: var(--glass-white);
    aspect-ratio: 1;
    transition: border-color 200ms ease;
  }
  .product_mainimage .thumbnails li a:hover, .product_mainimage .thumbnails li a:focus-visible, .product_mainimage .thumbnails li a.isactive {
    border-color: var(--color-primary-orange);
  }
  .product_mainimage .thumbnails li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product_mainimage .thumbnails li iframe,
  .product_mainimage .thumbnails li video {
    display: none;
  }
  @media (min-width: 640px) {
    .product_mainimage .thumbnails {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .product_mainimage .thumbnails li a {
      aspect-ratio: auto;
    }
    .product_mainimage .thumbnails li img {
      width: 64px;
      height: 64px;
    }
  }
  .video-container {
    display: none;
    width: 100%;
    /* --video-height = height of the main image, set by init.js; 16/9 until measured */
    height: var(--video-height, auto);
    aspect-ratio: 16/9;
    background: url("/_assets/4c27feeaa62da74857d74c280e82f21e/Images/ajax-loader.gif") no-repeat center center;
  }
  .video-container > div,
  .video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  /* Video thumbnail marker: play icon centred over the tile ("a" is the positioning context). */
  .playbutton {
    position: relative;
  }
  .playbutton::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url("/_assets/4c27feeaa62da74857d74c280e82f21e/Images/play-button-small.png") no-repeat center center;
    pointer-events: none;
  }
  .productEcosystem {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block-end: var(--section-padding-default);
  }
  @media (min-width: 768px) {
    .productEcosystem {
      grid-template-columns: repeat(2, 1fr);
    }
    .productEcosystem h2 {
      grid-column: 1/span 2;
    }
    .productEcosystem #submitRequestWithParts {
      grid-column: 1/span 2;
    }
  }
  @media (min-width: 992px) {
    .productEcosystem {
      grid-template-columns: repeat(4, 1fr);
    }
    .productEcosystem h2 {
      grid-column: 1/span 4;
    }
    .productEcosystem #submitRequestWithParts {
      grid-column: 1/span 4;
    }
  }
  .productEcosystem .btn {
    border-radius: 0;
  }
  .productEcosystem__cat {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: var(--gap-m);
    padding: var(--padding-m);
    border-radius: var(--border-radius-default);
    border: var(--border-default-width, 2px) solid var(--glass-grey-stroke, #F5F5F5);
    background: var(--glass-grey);
    /* glass-grey */
    box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.08);
    backdrop-filter: blur(30px);
  }
  /* backdrop-filter makes every card its own stacking context, so the dropdown's z-index can't
     escape it -- lift the whole card while its multi-select is open. */
  .productEcosystem__cat:has(.multi-select.-open) {
    position: relative;
    z-index: 1;
  }
  .productEcosystem__img {
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    margin-block-end: var(--gap-m);
  }
  .productEcosystem__img img {
    width: 100%;
  }
  .productEcosystem h3 {
    font-family: inherit;
    font-size: var(--font-size-h4);
    color: var(--body-text-color);
    margin: 0;
    flex-grow: 1;
  }
  #submitRequestWithParts {
    display: none;
    margin: 25px 0 40px;
  }
  #submitRequestWithParts button {
    width: 100%;
    position: relative;
    background: var(--color-primary-orange);
    font-size: 1.4rem;
  }
  #submitRequestWithParts button::after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: var(--color-primary-orange);
    border-width: 20px;
    margin-left: -20px;
  }
  .multi-select__submit {
    all: unset;
    display: grid;
    place-items: center;
    color: var(--color-primary-orange);
  }
  .multi-select__submit .icon-lg {
    font-size: 24px;
  }
  .multi-select__submit:disabled {
    color: var(--body-text-color);
    opacity: 0.5;
    cursor: not-allowed;
  }
  /* Selection made (multi-select.js enables the button): cart icon becomes "shopping-cart-plus" */
  .productEcosystem .multi-select__submit:not(:disabled) .icon-shopping-cart::before {
    content: "\e753";
  }
  .dialogFurtherParts {
    padding: 15px 25px;
    max-width: 50ch;
    border: none;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  }
  .dialogFurtherParts__header {
    padding-bottom: 15px;
    border-bottom: 3px solid var(--color-primary-orange);
  }
  .dialogFurtherParts__text {
    font-family: var(--font-family-serif);
    line-height: 1.2;
    margin: 0;
    padding: 20px 0;
  }
  .dialogFurtherParts__buttons {
    text-align: right;
  }
  /* Only consumers (RequestQuote.html/ProductEcosystem.html/SideBasket.html) wrap a
     ".multi-select" + button pair, never a real ".form-control"/".input-group-addon", so only the
     base position/display/width is needed. */
  .input-group {
    position: relative;
    display: flex;
    width: 100%;
    gap: var(--button-gap-xs);
  }
  /* Select full width + request button below (hugging) by default; one row once the CTA container
     is wide enough for both. Container query (not viewport): the box width differs per breakpoint. */
  .product_cta {
    container-type: inline-size;
  }
  .product_cta .input-group {
    flex-direction: column;
    align-items: flex-start;
    /* 48px = the height both controls get from "align-items: stretch" in the row layout. */
  }
  .product_cta .input-group > * {
    min-block-size: 3rem;
  }
  .product_cta .input-group .multi-select {
    width: 100%;
  }
  @container (min-width: 26.25rem) { /* 420px */
    .product_cta .input-group {
      flex-direction: row;
      align-items: stretch;
    }
    .product_cta .input-group .multi-select {
      width: auto;
    }
  }
}