/** Shopify CDN: Minification failed

Line 16:43 Unexpected "*"

**/
/* ============================================================
   Standardised product layout — shared stylesheet
   Used by templates/product.joey-valve-alt.liquid and its
   sections/product-layout-*.liquid files. Scoped under
   .product-layout so it never leaks into the rest of the theme.
   ============================================================ */

/* ---------- Type: TEMPORARY local font-face + scale ----------
   A dedicated typography/best-practices stylesheet is being built
   separately. Do not add to this block — once that stylesheet
   exists, repoint the --pl-font-*/--pl-fs-*/--pl-fw-* custom
   properties below to it (or delete this block) instead of
   rebuilding the sections. */
@font-face {
  font-family: "Galano Grotesque";
  src: url("{{ 'galano-grotesque-regular.woff2' | asset_url }}") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("{{ 'galano-grotesque-medium.woff2' | asset_url }}") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("{{ 'galano-grotesque-semibold.woff2' | asset_url }}") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("{{ 'galano-grotesque-bold.woff2' | asset_url }}") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("{{ 'galano-grotesque-extrabold.woff2' | asset_url }}") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("{{ 'galano-grotesque-black.otf' | asset_url }}") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("{{ 'titillium-web-light.ttf' | asset_url }}") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("{{ 'titillium-web-regular.ttf' | asset_url }}") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("{{ 'titillium-web-semibold.ttf' | asset_url }}") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("{{ 'titillium-web-bold.ttf' | asset_url }}") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("{{ 'titillium-web-black.ttf' | asset_url }}") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

.product-layout {
  /* ---------- Brand colour tokens (verbatim from the Claude design export) ---------- */
  --bt-orange: #FD5000;
  --bt-orange-deep: #EB2D23;
  --bt-navy: #002E46;
  --bt-navy-deep: #00112A;
  --bt-turquoise: #009CA2;
  --bt-turquoise-700: #007A80;
  --bt-turquoise-100: #DCEFF0;
  --bt-teal: #1A5567;
  --bt-grey-050: #F5F7F8;
  --bt-grey-100: #EDF1F2;
  --bt-grey-150: #E4E9EB;
  --bt-grey-200: #D6DBDA;
  --bt-grey-300: #C0C8CB;
  --bt-grey-400: #9AA6AB;
  --bt-grey-500: #6F7D83;
  --bt-grey-600: #516066;
  --bt-grey-700: #36454C;
  --bt-grey-900: #14232A;
  --bt-white: #FFFFFF;

  --surface-page: var(--bt-grey-050);
  --surface-card: var(--bt-white);
  --surface-muted: var(--bt-grey-100);
  --surface-navy: var(--bt-navy);
  --surface-navy-deep: var(--bt-navy-deep);
  --surface-spotlight: var(--bt-grey-900);

  --text-primary: var(--bt-navy);
  --text-secondary: var(--bt-grey-600);
  --text-muted: var(--bt-grey-500);
  --text-on-dark: var(--bt-white);
  --text-on-dark-dim: #A9BAC2;

  --border-subtle: #E6EBEC;
  --border-default: var(--bt-grey-200);
  --border-strong: var(--bt-grey-300);

  --action-cta: var(--bt-orange);
  --action-cta-hover: #ED4400;
  --action-cta-press: #C23A00;
  --action-navy-hover: #013a59;

  /* ---------- Spacing / radii / shadow / motion tokens (verbatim) ---------- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;

  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0,17,42,0.08), 0 1px 2px rgba(0,17,42,0.06);
  --shadow-md: 0 4px 12px rgba(0,17,42,0.08), 0 2px 4px rgba(0,17,42,0.05);
  --shadow-lg: 0 12px 28px rgba(0,17,42,0.12), 0 4px 8px rgba(0,17,42,0.06);
  --shadow-spotlight: 0 30px 60px rgba(0,0,0,0.45);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  --container-lg: 1160px;
  --gutter: clamp(20px, 5vw, 24px);

  /* ---------- TEMPORARY type scale — see note above ---------- */
  --pl-font-display: "Galano Grotesque", "Titillium Web", Arial, sans-serif;
  --pl-font-body: "Titillium Web", Arial, Helvetica, sans-serif;
  --pl-fw-semibold: 600; --pl-fw-bold: 700; --pl-fw-extrabold: 800; --pl-fw-black: 900;
  --pl-fs-eyebrow: 11px;
  --pl-fs-h1: 48px;
  --pl-fs-h2: 42px;
  --pl-fs-h2-mobile: 32px;
  --pl-fs-lead: 18px;
  --pl-fs-body: 14px;
  --pl-fs-sm: 12px;
  --pl-lh-tight: 1.02;
  --pl-ls-tight: -0.02em;
  --pl-ls-wide: 0.06em;
  --pl-ls-wider: 0.12em;

  font-family: var(--pl-font-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

.product-layout img { display: block; max-width: 100%; }
.product-layout .pl-container { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--gutter); }
.product-layout .pl-section { padding-block: var(--space-16); }
.product-layout .pl-section--tight { padding-block: var(--space-12); }
.product-layout .pl-section--navy { background: var(--surface-navy); color: var(--text-on-dark); }
.product-layout .pl-section--navy-deep { background: var(--surface-navy-deep); color: var(--text-on-dark); }
.product-layout .pl-section--spotlight { background: var(--surface-spotlight); color: var(--text-on-dark); }
.product-layout .pl-section--grey { background: var(--bt-grey-050); }
.product-layout .pl-section--white { background: var(--bt-white); }
.product-layout .pl-section--navy h2,
.product-layout .pl-section--navy-deep h2,
.product-layout .pl-section--spotlight h2 { color: var(--text-on-dark); }

.product-layout .pl-eyebrow { 
  display: inline-block; background: var(--bt-orange); color: #fff;
  font-size: var(--pl-fs-eyebrow); font-weight: var(--pl-fw-extrabold);
  letter-spacing: var(--pl-ls-wider); text-transform: uppercase; padding: 5px 10px;
  margin-bottom: 10px;
}
.product-layout .pl-h2 {
  margin: 10px 0 8px; font-family: var(--pl-font-display); font-weight: var(--pl-fw-black);
  font-size: var(--pl-fs-h2); line-height: var(--pl-lh-tight); letter-spacing: var(--pl-ls-tight);
  text-transform: uppercase; color: var(--text-primary);
}
.product-layout .pl-compare .pl-h2 {
  margin-bottom: 32px;
}
.product-layout .pl-section--navy .pl-h2,
.product-layout .pl-section--navy-deep .pl-h2,
.product-layout .pl-section--spotlight .pl-h2 { color: #fff; }
.product-layout .pl-lead { margin: 0 0 28px; font-size: var(--pl-fs-lead); font-weight: var(--pl-fw-semibold); line-height: 1.5; }

/* ---------- Sticky offer banner ---------- */
.product-layout .pl-banner {
  /* static, not sticky: the theme's own header/announcement bar already
     occupies position:sticky top:0 — a second sticky element there fights
     it for the same slot and produces scroll-jump glitches */
  background: var(--bt-orange); color: #fff;
  padding: 10px 24px; display: flex; align-items: center; justify-content: center;
  gap: 12px; border-bottom: 2px solid var(--action-cta-press); text-align: center;
}
.product-layout .pl-banner__label {
  font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 12px;
  letter-spacing: var(--pl-ls-wider); text-transform: uppercase; white-space: nowrap;
}
.product-layout .pl-banner__divider { width: 1px; height: 15px; background: rgba(255,255,255,0.45); flex: none; }
.product-layout .pl-banner__copy { font-size: 13px; font-weight: 600; }

/* ---------- Hero: gallery + buy box ---------- */
.product-layout .pl-hero {
  max-width: var(--container-lg); margin: 0 auto; padding: 32px var(--gutter) 56px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start;
}
.product-layout .pl-gallery { display: none; flex-direction: column; gap: 10px; }
@media (min-width: 1024px) {
  /* Sticky only kicks in once there's enough viewport height for it to make sense,
     and is scoped to the grid row so it can't visually collide with the page's
     own sticky header the way top:0 would. */
  .product-layout .pl-gallery { position: sticky; top: 16px; align-self: start; }
}
.product-layout .pl-gallery__main { background: var(--bt-grey-900); aspect-ratio: 1/1; position: relative; overflow: hidden; }
.product-layout .pl-gallery__main img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--dur-fast) ease-out;
}
.product-layout .pl-gallery__main img.is-active { opacity: 1; }
.product-layout .pl-gallery__thumbs { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.product-layout .pl-gallery__thumb {
  padding: 0; cursor: pointer; background: var(--bt-grey-900); display: block;
  border: 2px solid transparent; transition: border-color var(--dur-fast) ease-out;
  /* aspect-ratio + position:relative on the button itself, with the img absolutely
     filling it — immune to grid's default align-items:stretch pulling the button
     taller than square and dragging the image with it */
  position: relative; aspect-ratio: 1/1; overflow: hidden; width: 100%;
}
.product-layout .pl-gallery__thumb.is-active { border-color: var(--bt-orange); }
.product-layout .pl-gallery__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.product-layout .pl-carousel {
  display: flex; position: relative; background: var(--bt-grey-900);
}
.product-layout .pl-carousel__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100%;
}
.product-layout .pl-carousel__track::-webkit-scrollbar { display: none; }
.product-layout .pl-carousel__slide { flex: none; width: 100%; scroll-snap-align: start; aspect-ratio: 1/1; }
.product-layout .pl-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.product-layout .pl-carousel__counter {
  position: absolute; top: 12px; right: 12px; background: rgba(11,23,28,0.75); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; padding: 4px 9px;
}
.product-layout .pl-carousel__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; }
.product-layout .pl-carousel__dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,0.4); cursor: pointer; }
.product-layout .pl-carousel__dot.is-active { background: var(--bt-orange); }

.product-layout .pl-buybox { display: flex; flex-direction: column; gap: 16px; }
.product-layout .pl-buybox__kicker { display: flex; flex-direction: column; gap: 8px; }
.product-layout .pl-buybox .product-single__form {
  margin-bottom: 0;
}
.product-layout .pl-buybox__title {
  margin: 0; font-family: var(--pl-font-display); font-weight: var(--pl-fw-black);
  font-size: var(--pl-fs-h1); line-height: 0.98; letter-spacing: var(--pl-ls-tight);
  text-transform: uppercase; color: var(--text-primary);
  
}
.product-layout .pl-buybox__subtitle { margin: 0; font-size: 17px; line-height: 1.45; font-weight: var(--pl-fw-semibold); color: var(--text-secondary); }
.product-layout .pl-loox-rating-link { display: inline-block; text-decoration: none; }

.product-layout .pl-bullets { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.product-layout .pl-bullets li { display: flex; gap: 10px; align-items: flex-start; }
.product-layout .pl-bullets__tick {
  width: 18px; height: 18px; border-radius: 50%; background: var(--bt-orange); display: flex;
  align-items: center; justify-content: center; flex: none; margin-top: 2px;
}
.product-layout .pl-bullets li span:last-child { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--text-primary); }

/* ---------- Buy box: reused product-form / variant-button, restyled ---------- */
.product-layout .pl-buybox .product-single__form,
.product-layout .pl-buybox .product-single__meta { display: contents; }
.product-layout .pl-buybox .variant-wrapper { margin: 0 0 var(--space-2); }
.product-layout .pl-buybox .variant__label { display: block; font-size: var(--pl-fs-sm); font-weight: var(--pl-fw-extrabold); letter-spacing: var(--pl-ls-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.product-layout .pl-buybox .variant-input-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: none; margin: 0; padding: 0; }
.product-layout .pl-buybox .variant-input { position: relative; }
.product-layout .pl-buybox .variant-input label {
  display: block; text-align: center; background: var(--bt-white); border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md); padding: 12px 8px 14px; cursor: pointer; font-family: var(--pl-font-body);
  font-weight: var(--pl-fw-extrabold); font-size: 15px; color: var(--text-primary); transition: border-color var(--dur-fast) ease-out;
}
.product-layout .pl-buybox .variant-input input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.product-layout .pl-buybox .variant-input input[type="radio"]:checked + label { border-color: var(--bt-navy); box-shadow: inset 0 -4px 0 var(--bt-orange); }
.product-layout .pl-buybox .variant-input label:hover { border-color: var(--bt-navy); }
.product-layout .pl-buybox .variant-input label.disabled { opacity: 0.4; cursor: not-allowed; }

.product-layout .pl-offer {
  border: 2px solid var(--bt-orange); background: var(--surface-spotlight); color: #fff;
  border-radius: var(--radius-md); overflow: hidden; margin-top: 16px;
}
.product-layout .pl-offer__head {
  background: var(--bt-orange); padding: 9px 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.product-layout .pl-offer__head-label { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.product-layout .pl-offer__head-note { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.product-layout .pl-offer__body { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.product-layout .pl-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.product-layout .pl-price-row .product__price { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); line-height: 1; }
.product-layout .pl-price-row .product__price--compare { font-weight: 600; text-decoration: line-through; }
.product-layout .pl-offer .product__price { font-size: 42px; color: #fff; }
.product-layout .pl-offer .product__price--compare { font-size: 17px; color: #8FA3AC; }

/* Offer-repeat / final-cta buy boxes: the shared product-form snippet always renders
   size buttons then the add-to-cart button as one contiguous block, so the price row
   (added separately, after the render call) ends up after the button in the DOM.
   Flex + order reorders it visually to size buttons -> price -> button without
   touching the shared snippet (which the live product page also depends on). */
.product-layout .pl-cta-form { display: flex; flex-direction: column; gap: 20px; }
.product-layout .pl-cta-form .variant-wrapper { order: 1; margin-bottom: 0; }
.product-layout .pl-cta-form .pl-price-row { order: 2; margin: 0; }
.product-layout .pl-cta-form button[type="submit"] { order: 3; }
.product-layout .pl-offer__save { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--bt-orange); color: #fff; padding: 4px 8px; }
.product-layout .pl-offer__tiers { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,0.12); }
.product-layout .pl-offer__tier { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-spotlight); padding: 10px 2px; font-size: 13px; }
.product-layout .pl-offer__note { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: #E6EEF1; border-left: 3px solid var(--bt-orange); padding-left: 11px; }

.product-layout .pl-cart-row { display: flex; gap: 10px; align-items: stretch; }
.product-layout .pl-buybox .product__quantity { display: flex; align-items: center; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; flex: none; }
.product-layout .pl-buybox .product__quantity .variant__label {
  /* visually hidden, not display:none, so it stays reachable to screen readers —
     the design shows a bare -/1/+ stepper with no visible "Quantity" text */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.product-layout .pl-buybox .product__quantity input[type="number"] {
  width: 48px; height: 48px; border: none; text-align: center; font-weight: var(--pl-fw-bold); font-size: 15px;
  -moz-appearance: textfield; background: transparent; color: var(--text-primary);
}
.product-layout .pl-buybox .product__quantity input::-webkit-outer-spin-button,
.product-layout .pl-buybox .product__quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-layout .pl-qty-btn { width: 40px; height: 48px; border: none; background: var(--bt-grey-050); font-size: 18px; font-weight: 700; cursor: pointer; color: var(--text-primary); }
.product-layout .pl-buybox button[type="submit"], .product-layout .pl-buybox .btn {
  flex: 1; height: 52px; width: 100%; background: var(--action-cta); color: #fff; border: none;
  border-radius: var(--radius-md); font-family: var(--pl-font-body); font-weight: var(--pl-fw-extrabold);
  font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: background var(--dur-fast) ease-out;
}
.product-layout .pl-buybox button[type="submit"]:hover, .product-layout .pl-buybox .btn:hover { background: var(--action-cta-hover); }

/* Shop Pay / dynamic checkout button: the actual wallet button renders inside a closed
   shadow root (shop-pay-wallet-button), so its chrome can only be reached via Shopify's
   documented --shopify-accelerated-checkout-* custom properties, not regular selectors.
   !important on the margins below is deliberate: Shopify's own checkout script applies
   its default spacing via an inline style at runtime, which otherwise overrides a plain
   stylesheet rule regardless of selector specificity. */
.product-layout .payment-buttons {
  --shopify-accelerated-checkout-button-border-radius: var(--radius-md);
  margin-top: 6px !important;
}
.product-layout .shopify-payment-button { margin-top: 0 !important; }
.product-layout .shopify-payment-button__more-options { font-size: 12px; margin-top: 6px !important; }

.product-layout .pl-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.product-layout .pl-badge { border: 1px solid var(--border-subtle); background: #fff; padding: 9px 11px; display: flex; align-items: center; gap: 12px; }
.product-layout .pl-badge__icon { width: 38px; height: 38px; background: var(--bt-orange); display: flex; align-items: center; justify-content: center; flex: none; }
.product-layout .pl-badge__label { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); }
.product-layout .pl-badges--dark .pl-badge { border-color: rgba(255,255,255,0.2); background: transparent; }
.product-layout .pl-badges--dark .pl-badge__label { color: #E6EEF1; }

/* Buy boxes on dark surfaces (offer-repeat / final-cta): outline size pills instead of filled */
.product-layout .pl-buybox--dark .variant-input label { background: transparent; border-color: rgba(255,255,255,0.28); color: #fff; }
.product-layout .pl-buybox--dark .variant-input label:hover { border-color: #fff; }
.product-layout .pl-buybox--dark .variant-input input[type="radio"]:checked + label { border-color: #fff; }

/* ---------- Accordion (Overview / Specs / FAQ...) ---------- */
.product-layout .pl-accordion { border-top: 1px solid var(--border-default); display: flex; flex-direction: column; }
.product-layout .pl-accordion__item { border-bottom: 1px solid var(--border-default); }
.product-layout .pl-accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; padding: 13px 0; cursor: pointer; text-align: left;
  font-family: var(--pl-font-body); font-size: 14px; font-weight: var(--pl-fw-extrabold);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary);
}
.product-layout .pl-accordion__mark { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 18px; line-height: 1; color: var(--bt-orange); flex: none; }
.product-layout .pl-accordion__panel { display: none; padding: 0 0 15px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.product-layout .pl-accordion__item.is-open .pl-accordion__panel { display: block; }
.product-layout .pl-accordion__panel ul { margin: 0; padding-left: 18px; line-height: 1.7; }
.product-layout .pl-spec-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding: 8px 10px; }
.product-layout .pl-spec-row:nth-child(odd) { background: var(--bt-grey-050); }
.product-layout .pl-spec-row dt { font-weight: 700; color: var(--text-primary); }
.product-layout .pl-spec-row dd { margin: 0; color: var(--text-secondary); }

/* FAQ variant: larger text, on light grey section */
.product-layout .pl-faq .pl-h2 { margin-bottom: 32px; }
.product-layout .pl-faq-grid { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
@media (min-width: 760px) {
  .product-layout .pl-faq-grid { grid-template-columns: 1fr 1fr; }
}
.product-layout .pl-faq .pl-accordion { border-top-color: var(--border-default); }
.product-layout .pl-faq .pl-accordion__trigger { font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 17px 0; }
.product-layout .pl-faq .pl-accordion__panel { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--text-primary); max-width: 62ch; }

/* ---------- Credibility bar ---------- */
.product-layout .pl-credibility { display: flex; align-items: center; justify-content: center; gap: 22px; padding-block: 26px; flex-wrap: wrap; }
.product-layout .pl-credibility img { height: 52px; width: auto; }
.product-layout .pl-credibility__copy { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; }

/* ---------- In-situ hero (full-bleed image + overlay copy) ---------- */
.product-layout .pl-insitu { position: relative; background: var(--bt-grey-900); }
.product-layout .pl-insitu img { width: 100%; height: auto; }
.product-layout .pl-insitu__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,16,26,0.72) 0%, rgba(5,16,26,0.25) 45%, rgba(5,16,26,0) 70%); }
.product-layout .pl-insitu__content { position: absolute; inset: 0; display: flex; align-items: center; }
.product-layout .pl-insitu__inner { max-width: var(--container-lg); margin: 0 auto; width: 100%; padding-inline: var(--gutter); }
.product-layout .pl-insitu__copy { max-width: 460px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.product-layout .pl-insitu__dash { height: 6px; width: 57px; background: repeating-linear-gradient(90deg, var(--bt-orange) 0 9px, transparent 9px 16px); }
.product-layout .pl-insitu__heading { margin: 0; font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 44px; line-height: 1; letter-spacing: var(--pl-ls-tight); text-transform: uppercase; color: #fff; }
.product-layout .pl-insitu__label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-dim); }

/* ---------- Problem: stat row + quote grid ---------- */
.product-layout .pl-stats { display: flex; flex-wrap: wrap; gap: 36px 56px; margin-top: 36px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.product-layout .pl-stat { display: flex; flex-direction: column; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.product-layout .pl-stat.is-visible { opacity: 1; transform: none; }
.product-layout .pl-stat__value { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 54px; line-height: 1; color: var(--bt-orange); }
.product-layout .pl-stat__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #A9BAC2; margin-top: 8px; }
.product-layout .pl-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.product-layout .pl-quote {
  display: flex; gap: 16px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.10);
  padding: 24px 26px; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.product-layout .pl-quote.is-visible { opacity: 1; transform: none; }
.product-layout .pl-quote__mark { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 44px; line-height: 0.75; color: var(--bt-orange); flex: none; }
.product-layout .pl-quote__text { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; color: #fff; }
.product-layout .pl-quote__source { display: block; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8FA3AC; }
.product-layout .pl-quote__source::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--bt-orange); vertical-align: middle; margin-right: 10px; }
.product-layout .pl-callback {
  margin: 36px 0 0; text-align: center; font-family: var(--pl-font-display); font-weight: var(--pl-fw-black);
  font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: #fff;
}
.product-layout .pl-callback em { color: var(--bt-orange); font-style: normal; }

/* ---------- Solution: feature card grid ---------- */
.product-layout .pl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.product-layout .pl-card {
  background: #fff; border: 1px solid var(--border-subtle); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.product-layout .pl-card.is-visible { opacity: 1; transform: none; }
.product-layout .pl-card img {
  /* height:auto (not aspect-ratio) — the img_url crop already delivers exactly
     600x450, and an explicit height="450" HTML attribute (added for the
     Theme Check width/height lint) blocks aspect-ratio from taking effect,
     since CSS aspect-ratio only resolves a dimension left as auto. */
  width: 100%; height: auto;
}
.product-layout .pl-card__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 15px 17px; }
.product-layout .pl-card__title { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 17px; letter-spacing: -0.01em; color: var(--text-primary); text-transform: uppercase; }
.product-layout .pl-card__text { font-size: 14px; line-height: 1.45; color: var(--text-secondary); }

/* ---------- How it works: numbered steps ---------- */
.product-layout .pl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.product-layout .pl-step { display: flex; flex-direction: column; gap: 12px; }
.product-layout .pl-step img { width: 100%; height: auto; }
.product-layout .pl-step__body { display: flex; gap: 11px; }
.product-layout .pl-step__num { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 24px; line-height: 0.95; color: var(--bt-orange); min-width: 30px; }
.product-layout .pl-step__text { margin: 0; font-size: 14px; line-height: 1.5; color: #DCE6EA; }

/* ---------- Cable / orientation callout ---------- */
.product-layout .pl-cable { position: relative; background: var(--bt-grey-050); }
.product-layout .pl-cable img.pl-cable__bg { width: 100%; height: auto; }
.product-layout .pl-cable__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; }
.product-layout .pl-cable__panel { width: 44%; padding-right: 5%; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.product-layout .pl-cable__heading { margin: 0 0 10px; font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 46px; line-height: 1; letter-spacing: var(--pl-ls-tight); text-transform: uppercase; color: var(--text-primary); }
.product-layout .pl-cable__sub { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 600; color: var(--text-secondary); }
.product-layout .pl-cable__card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border-subtle); padding: 12px; box-shadow: var(--shadow-md); }
.product-layout .pl-cable__card img { width: 180px; height: auto; flex: none; }
.product-layout .pl-cable__card span { font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 17px; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text-primary); max-width: 12ch; }

/* ---------- Product callouts diagram ---------- */
.product-layout .pl-callouts-head { max-width: var(--container-lg); margin: 0 auto; padding: 56px var(--gutter) 0; text-align: center; }
.product-layout .pl-callouts-stage { max-width: 1440px; margin: 0 auto; position: relative; }
.product-layout .pl-callouts-stage img { width: 100%; height: auto; }
.product-layout .pl-callouts-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.product-layout .pl-callouts-lines polyline { fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 0.1; }
.product-layout .pl-callout-dot {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: var(--bt-orange); border-radius: 50%;
}
.product-layout .pl-callout-label {
  position: absolute; left: 4%; width: 27%; transform: translateY(-50%); text-align: right; font-size: 13px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #E6EEF1; white-space: nowrap;
}
/* The generic scroll-reveal utility resets transform:none once revealed (so a
   translateY(16px) slide-in settles at rest) — but this label relies on its own
   transform for vertical centering on its top% position, unrelated to the reveal
   slide. Without this override, every label's centering breaks the moment it
   fades in, shifting its visible text ~half its own height below where the
   connector line (which targets the same top% value) actually points.
   Specificity here (4 simple selectors) is deliberately higher than the
   reveal utility's (3) so it wins regardless of source order. Desktop-only:
   the mobile breakpoint further down intentionally sets transform:none since
   labels are static/stacked there, and this must not override that. */
@media (min-width: 768px) {
  .product-layout .pl-callout-label[data-pl-reveal].is-visible { transform: translateY(-50%); }
}

/* ---------- Video lightbox trigger ---------- */
.product-layout .pl-video-frame { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; cursor: pointer; }
.product-layout .pl-video-frame img { width: 100%; height: 100%; object-fit: cover; }
.product-layout .pl-video-frame__scrim { position: absolute; inset: 0; background: rgba(5,16,26,0.25); }
.product-layout .pl-video-frame__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px;
  background: var(--bt-orange); display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.product-layout .pl-video-frame__play::after {
  content: ""; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent;
  border-left: 22px solid #fff; margin-left: 5px;
}
.product-layout .pl-video-frame--placeholder {
  cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.25);
}
.product-layout .pl-video-frame--placeholder .pl-video-frame__play { position: static; opacity: 0.6; }
.product-layout .pl-video-frame__hint { font-size: 13px; font-weight: 600; color: var(--text-on-dark-dim); }
.product-layout .pl-video-modal { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; padding: 24px; }
.product-layout .pl-video-modal.is-open { display: flex; }
.product-layout .pl-video-modal__inner { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16/9; }
.product-layout .pl-video-modal video, .product-layout .pl-video-modal iframe { width: 100%; height: 100%; border: 0; }
.product-layout .pl-video-modal__close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; line-height: 1; }

/* ---------- Comparison table ---------- */
.product-layout .pl-compare { max-width: 960px; margin: 0 auto; }
.product-layout .pl-compare table {
  /* the base theme sets table { background: var(--colorTextBody) } globally, which
     otherwise shows through as a solid light box behind this dark section */
  width: 100%; border-collapse: collapse; background: transparent;
}
.product-layout .pl-compare td, .product-layout .pl-compare th { background: transparent; }
.product-layout .pl-compare thead th:first-child { padding: 14px 0; }
.product-layout .pl-compare thead th:nth-child(2) { background: var(--bt-orange); padding: 14px 10px; font-family: var(--pl-font-display); font-weight: var(--pl-fw-black); font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.product-layout .pl-compare thead th:nth-child(3) { padding: 14px 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #8FA3AC; }
.product-layout .pl-compare td, .product-layout .pl-compare th { text-align: center; border-top: 1px solid rgba(255,255,255,0.12); }
.product-layout .pl-compare td:first-child { text-align: left; padding: 15px 10px 15px 0; font-size: 14px; font-weight: 700; color: #fff; }
.product-layout .pl-compare td:nth-child(2) { padding: 15px 10px; background: rgba(253,80,0,0.10); font-size: 14px; font-weight: 800; color: #fff; }
.product-layout .pl-compare td:nth-child(3) { padding: 15px 0 15px 10px; font-size: 14px; color: #93A6AE; }
.product-layout .pl-compare .pl-tick { color: var(--bt-turquoise); font-weight: 900; }
.product-layout .pl-compare .pl-cross { color: #E05252; font-weight: 900; }

/* ---------- Specifications table ---------- */
.product-layout .pl-specs-table { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.16); font-size: 15px; }
.product-layout .pl-specs-table .pl-spec-row { grid-template-columns: 1fr 1.4fr; padding: 14px 18px; background: none; }
.product-layout .pl-specs-table .pl-spec-row:nth-child(odd) { background: rgba(255,255,255,0.06); }
.product-layout .pl-specs-table .pl-spec-row dt { color: #fff; font-weight: 800; }
.product-layout .pl-specs-table .pl-spec-row dd { color: #C6D5DB; }

/* ---------- Final CTA + repeat offer helpers ---------- */
/* Matches the hazard-stripe divider established in page.mildred-valve-replacement.liquid
   (.mildred-stripe) and page.joey-valve-trade-v2.liquid — same 45deg/9px/18px proportions. */
.product-layout .pl-final-cta { position: relative; }
.product-layout .pl-final-stripe {
  /* full-bleed and flush with the section's top edge — matches .mildred-stripe /
     the joey-valve-trade-v2 stripe divider, not a padded div sitting inside the
     max-width container. */
  position: absolute; top: 0; left: 0; right: 0; height: 22px;
  background: repeating-linear-gradient(45deg, var(--bt-orange) 0 9px, var(--bt-navy) 9px 18px);
}
.product-layout .pl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* ---------- Scroll reveal utility ---------- */
.product-layout [data-pl-reveal] { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.product-layout [data-pl-reveal="up"] { transform: translateY(16px); }
.product-layout [data-pl-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .product-layout [data-pl-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Responsive — 768px breakpoint (matches the theme's existing
   medium-up--* grid convention)
   ============================================================ */
@media (min-width: 768px) {
  .product-layout .pl-gallery { display: flex; }
  .product-layout .pl-carousel { display: none; }
}
@media (max-width: 767px) {
  .product-layout .pl-hero { grid-template-columns: 1fr; padding: 0 0 28px; gap: 0; }
  .product-layout .pl-buybox { padding: 22px 20px 0; gap: 16px; }
  .product-layout .pl-buybox__title { font-size: 42px; }
  .product-layout .pl-h2 { font-size: var(--pl-fs-h2-mobile); }
  .product-layout .pl-cards { grid-template-columns: 1fr; }
  .product-layout .pl-steps { grid-template-columns: repeat(2, 1fr); }
  .product-layout .pl-quotes { grid-template-columns: 1fr; }
  .product-layout .pl-two-col { grid-template-columns: 1fr; gap: 28px; }
  .product-layout .pl-cable__overlay { position: static; }
  .product-layout .pl-cable__panel { width: 100%; padding: 24px 20px; }
  .product-layout .pl-callout-label { position: static; width: auto; transform: none; text-align: left; white-space: normal; display: block; margin-bottom: 10px; }
  .product-layout .pl-callout-label:first-of-type { margin-top: 16px; }
  .product-layout .pl-callouts-stage svg { display: none; }
  .product-layout .pl-callout-dot { display: none; }
  /* Comparison table: keep the row-label column instead of hiding it (it's the only
     thing that says what each row is comparing) — just tighten font/padding so all
     three columns still fit a phone width. */
  .product-layout .pl-compare thead th:first-child { padding: 12px 0; }
  .product-layout .pl-compare thead th:nth-child(2) { font-size: 13px; padding: 12px 6px; }
  .product-layout .pl-compare thead th:nth-child(3) { font-size: 10px; padding: 12px 6px; }
  .product-layout .pl-compare td:first-child { font-size: 12px; padding: 12px 4px 12px 0; }
  .product-layout .pl-compare td:nth-child(2),
  .product-layout .pl-compare td:nth-child(3) { font-size: 12px; padding: 12px 4px; }
  /* In-situ hero: height is normally driven by the image's own aspect ratio, but at
     phone widths that renders too short for the centered heading/label to fit inside
     it — the overlay text overflows past the image into the sections above/below.
     A fixed min-height + overflow:hidden + object-fit:cover keeps the image filling
     a tall-enough box regardless of its native aspect ratio, mobile-only so desktop
     (which was never broken) is untouched. */
  .product-layout .pl-insitu { min-height: 420px; overflow: hidden; }
  .product-layout .pl-insitu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .product-layout .pl-insitu__heading { font-size: 30px; }
  .product-layout .pl-badges { grid-template-columns: 1fr 1fr; }
}