/* ═══════════════════════════════════════════════════════════════════
   PRO OPTIX — PrestaShop 8.2 child theme stylesheet
   Loaded after Classic's theme.css (priority 200 in theme.yml).
   Tokens/components ported from "Pro Optix Design System"
   (tokens/*.css + components/components.css). Blue #DAEFFF and the
   Bootstrap blues are banned — this sheet purges every leak it can reach.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Webfonts (CDN per design-system fonts.css; self-host post-PoC) ── */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── 2. Tokens ── */
:root {
  /* Brand red */
  --po-red:            #E40521;
  --po-red-core:       #E20402;
  --po-burgundy:       #7C0201;
  --po-red-mid:        #911913;
  --po-red-light:      #AB191B;
  --po-gradient-red:   linear-gradient(180deg, #E20402 0%, #7C0201 100%);
  --po-gradient-red-diagonal: linear-gradient(135deg, #E20402 0%, #7C0201 100%);

  /* Neutrals */
  --po-white:          #FFFFFF;
  --po-black:          #000000;
  --po-ink:            #020609;
  --po-charcoal:       #1A1919;
  --po-charcoal-2:     #262326;
  --po-neutral-dark:   #4D5052;
  --po-grey-600:       #626161;
  --po-grey-500:       #DCD9D9;
  --po-grey-300:       #D9D9DA;
  --po-grey-100:       #F4F4F4;
  --po-grey-50:        #F2F2F2;
  --po-cool-grey-4:    #CCCCCC;

  --po-ink-05:  rgba(2,6,9,0.05);
  --po-ink-15:  rgba(2,6,9,0.15);
  --po-ink-60:  rgba(2,6,9,0.60);

  /* Semantic */
  --text-primary:      var(--po-ink);
  --text-secondary:    var(--po-neutral-dark);
  --text-muted:        var(--po-grey-600);
  --text-inverted:     var(--po-white);
  --text-accent:       var(--po-red);
  --text-price:        var(--po-red);
  --surface-page:      var(--po-white);
  --surface-subtle:    var(--po-grey-100);
  --surface-raised:    var(--po-white);
  --surface-dark:      var(--po-charcoal);
  --border-subtle:     var(--po-ink-15);
  --border-divider:    var(--po-grey-500);
  --border-strong:     var(--po-ink);
  --focus-ring:        var(--po-red);

  /* Type */
  --font-brand:   'Baumans', 'Satoshi', sans-serif;
  --font-sans:    'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-support: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-display: 60px; --fs-h1: 48px; --fs-h2: 34px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px;
  --fs-body-lg: 22px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900;
  --lh-tight: 1.1; --lh-heading: 1.2; --lh-snug: 1.4; --lh-body: 1.5;
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-caps: 0.06em;

  /* Space / radius / elevation / motion */
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 40px; --space-3xl: 64px;
  --container-max: 1280px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --shadow-xs:   0 1px 2px rgba(2,6,9,0.06);
  --shadow-sm:   0 2px 4px rgba(2,6,9,0.08);
  --shadow-card: 0 2px 6px rgba(2,6,9,0.06), 0 12px 28px rgba(2,6,9,0.08);
  --shadow-card-hover: 0 4px 10px rgba(2,6,9,0.08), 0 20px 44px rgba(2,6,9,0.12);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms;
}

/* ── 3. Base ── */
body {
  font-family: var(--font-support);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--po-grey-100);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
}
a { color: var(--po-red); }
a:hover { color: var(--po-red-light); }
#wrapper { background: var(--po-grey-100); padding-top: var(--space-lg); }
.container { max-width: var(--container-max); }
p { color: var(--text-secondary); }

/* ── 4. Bootstrap / Classic reskin — purge blues, radius, focus ── */
.btn-primary, .btn-primary:disabled {
  background: var(--po-gradient-red);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  text-transform: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--po-gradient-red);
  filter: brightness(1.06);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
  border: none;
}
.btn-secondary, .btn-tertiary {
  background: var(--po-grey-50);
  color: var(--text-primary);
  border: none;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  text-transform: none;
}
.btn-secondary:hover, .btn-tertiary:hover { background: var(--po-grey-100); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-primary); }
.btn-unstyle:focus, a:focus, button:focus { outline-color: var(--focus-ring); }
.form-control, .input-group .form-control {
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-md);
  font-family: var(--font-support);
  color: var(--text-primary);
}
.form-control:focus {
  border-color: var(--po-red);
  box-shadow: 0 0 0 3px rgba(228,5,33,0.12);
  outline: none;
  background-color: var(--po-white);
  color: var(--text-primary);
}
.custom-checkbox input[type="checkbox"] + span { border: 1.5px solid var(--po-grey-600); border-radius: var(--radius-sm); }
.custom-checkbox input[type="checkbox"]:checked + span,
.custom-checkbox input[type="checkbox"] + span .checkbox-checked { color: var(--po-red); }
.custom-radio input[type="radio"]:checked + span { background-color: var(--po-red); }
.material-icons.rtl-no-flip.pull-xs-right { color: var(--text-muted); }
/* Kill remaining bootstrap-blue text links in nav/footer widgets */
.dropdown-item:focus, .dropdown-item:hover { background: var(--po-grey-50); color: var(--po-red); }
.pagination .current a { color: var(--po-red); }
.pagination a { color: var(--text-primary); }
.page-list li.current, .pagination .page-list li.current a { color: var(--po-red); font-weight: var(--fw-bold); }

/* ── 5. Ported .po-* component classes ── */
.po-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs); padding: 10px 24px; border: none; border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-body);
  line-height: 1.4; letter-spacing: var(--ls-snug); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
              filter var(--dur-base) var(--ease-standard);
  user-select: none;
}
.po-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.po-btn--sm { padding: 7px 16px; font-size: var(--fs-body-sm); border-radius: var(--radius-md); }
.po-btn--block { display: flex; width: 100%; }
.po-btn--primary { background: var(--po-gradient-red); color: var(--po-white); box-shadow: var(--shadow-sm); }
.po-btn--primary:hover { filter: brightness(1.06); box-shadow: var(--shadow-card); transform: translateY(-1px); color: var(--po-white); text-decoration: none; }
.po-btn--outline { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.po-btn--outline:hover { background: var(--po-ink); color: var(--po-white); text-decoration: none; }
.po-btn--inverse { background: var(--po-white); color: var(--text-primary); }
.po-btn--inverse:hover { background: var(--po-grey-100); transform: translateY(-1px); box-shadow: var(--shadow-card); color: var(--text-primary); text-decoration: none; }

.po-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--radius-md); font-family: var(--font-support);
  font-weight: var(--fw-medium); font-size: var(--fs-body-sm); line-height: 1.4; white-space: nowrap;
}
.po-tag--neutral { background: var(--po-ink-05); color: var(--text-primary); }
.po-tag--red { background: var(--po-gradient-red); color: var(--po-white); }

.po-attr {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: var(--radius-md); background: var(--po-grey-50);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  font-family: var(--font-support); font-weight: var(--fw-medium); font-size: var(--fs-body-sm);
  color: var(--text-primary); white-space: nowrap;
}
.po-attr__icon { color: var(--po-red); display: inline-flex; }
.po-attr__icon svg { display: block; }
.po-attr__label { color: var(--text-secondary); }
.po-attr__value { color: var(--text-primary); font-weight: var(--fw-bold); }

.po-card { background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }

.po-product-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--po-white); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card); padding: 16px;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  text-align: left; position: relative;
}
.po-product-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.po-product-card__media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl);
  background: var(--po-grey-50); overflow: hidden; margin-bottom: 16px;
  display: grid; place-items: center;
}
/* Anchor is pinned to the frame: as a grid item with an auto row, height:100%
   never resolves and the square image lays out at intrinsic ratio, getting
   cropped by the frame's overflow:hidden. */
.po-product-card__media a { position: absolute; inset: 0; }
.po-product-card__media picture { display: block; width: 100%; height: 100%; }
.po-product-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.po-product-card__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }
.po-product-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.po-product-card__title { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h5); line-height: var(--lh-heading); margin: 0; }
.po-product-card__title a { color: var(--text-primary); text-decoration: none; }
.po-product-card__title a:hover { color: var(--po-red); }
.po-product-card__price { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h5); color: var(--text-price); white-space: nowrap; }
.po-product-card__specline { font-family: var(--font-support); font-size: var(--fs-body-sm); color: var(--text-secondary); margin: 6px 0 0; line-height: var(--lh-snug); }
.po-product-card__specline p { margin: 0; font-size: inherit; color: inherit; }
.po-product-card__stock { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-support); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.po-product-card__stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #1E9E4A; display: inline-block; flex-shrink: 0; }
.po-product-card__stock-dot--out { background: var(--po-grey-500); }
.po-product-card__attrs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.po-product-card__foot { margin-top: auto; padding-top: 16px; }

.po-accordion__item { border-top: 1px solid var(--border-divider); }
.po-accordion__item:first-child { border-top: none; }
.po-accordion__trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h5);
  color: var(--text-primary); text-align: left;
}
.po-accordion__trigger:focus { outline: none; }
.po-accordion__icon { transition: transform var(--dur-base) var(--ease-standard); color: var(--text-secondary); flex-shrink: 0; }
.po-accordion__trigger[aria-expanded="true"] .po-accordion__icon { transform: rotate(180deg); }
.po-accordion__panel { padding-bottom: 20px; font-family: var(--font-support); font-size: var(--fs-body); color: var(--text-secondary); line-height: var(--lh-body); }

.po-spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-support); font-size: var(--fs-body-sm); }
.po-spec-table td { padding: 10px 14px; color: var(--text-primary); }
.po-spec-table td.po-spec-table__name { color: var(--text-secondary); width: 18%; }
.po-spec-table td.po-spec-table__value { font-weight: 600; width: 32%; }
.po-spec-table tr:nth-child(odd) { background: var(--po-grey-50); }

/* ── 6. Header ── */
.header-banner { display: none; }
.header-nav {
  background: var(--po-grey-100);
  border-bottom: 1px solid var(--border-divider);
  max-height: none;
  font-family: var(--font-support);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.header-nav .right-nav { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-md); }
.header-nav #contact-link, .header-nav .contact-nav { color: var(--text-secondary); }
.header-nav a { color: var(--text-secondary); }
.header-nav a:hover { color: var(--po-red); }
.header-nav .language-selector .expand-more, .header-nav .currency-selector .expand-more { color: var(--text-primary); }
.header-nav .blockcart { background: transparent; }
.header-nav .blockcart.active a:hover { color: var(--po-red); }
.header-nav .cart-preview .shopping-cart { color: var(--text-primary); }
#header {
  background: var(--po-white);
  box-shadow: var(--shadow-xs);
  color: var(--text-secondary);
}
#header .header-top { padding-top: var(--space-md); padding-bottom: var(--space-md); }
#header .po-logo-link { display: inline-block; }
#header .po-logo-link img { max-height: 48px; width: auto; display: block; }
#header .top-menu a[data-depth="0"] {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  color: var(--text-primary);
  text-transform: none;
  position: relative;
  padding: 8px 4px;
}
#header .top-menu a[data-depth="0"]::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px;
  background: var(--po-gradient-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out); border-radius: 2px;
}
#header .top-menu a[data-depth="0"]:hover { color: var(--po-red); }
#header .top-menu a[data-depth="0"]:hover::after, #header .top-menu .current a[data-depth="0"]::after { transform: scaleX(1); }
#header .top-menu .sub-menu { box-shadow: var(--shadow-card); border: none; border-radius: 0 0 var(--radius-md) var(--radius-md); }
#header .top-menu .sub-menu a:hover { color: var(--po-red); }
#header #search_widget { max-width: 320px; float: right; }
#header #search_widget form input {
  background: var(--po-grey-50);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-md);
  font-family: var(--font-support);
  color: var(--text-primary);
  padding: 10px 40px 10px 14px;
}
#header #search_widget form input:focus { border-color: var(--po-red); box-shadow: 0 0 0 3px rgba(228,5,33,0.12); background: var(--po-white); }
#header #search_widget form { position: relative; }
/* ps_searchbar renders <i class="material-icons search"> / <i class="material-icons clear">
   (no submit button). Swap the material glyphs for the design-system outline icons. */
#header #search_widget form i.search {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; font-size: 0; line-height: 0; float: none; margin: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23626161" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>') center / 20px 20px no-repeat;
}
#header #search_widget form i.clear {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%); float: none; margin: 0;
  color: var(--text-muted); font-size: 18px;
}
/* Sign-in: Classic ships an empty material-icons <i>; give it the DS user icon */
#header .user-info .material-icons {
  width: 18px; height: 18px; font-size: 0; line-height: 0; vertical-align: -3px; margin-right: 4px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234D5052" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/></svg>') center / 18px 18px no-repeat;
  display: inline-block;
}

/* Subcategory tiles (category gallery view) — Classic leaves empty image boxes and
   floating H5s; render them as neat link chips instead. */
#subcategories { border: none; padding-bottom: var(--space-xs); }
#subcategories .subcategory-heading { font-family: var(--font-sans); font-weight: var(--fw-bold); color: var(--text-primary); }
#subcategories ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
#subcategories ul li {
  width: auto; margin: 0; text-align: center;
  border: 1px solid var(--border-divider); border-radius: var(--radius-md);
  padding: 10px 18px; transition: border-color var(--dur-fast) var(--ease-standard);
}
#subcategories ul li:hover { border-color: var(--po-red); }
#subcategories .subcategory-image, #subcategories .cat_desc { display: none; }
#subcategories h5 { margin: 0; }
#subcategories h5 a {
  font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-body-sm);
  color: var(--text-primary); text-transform: none;
}
#subcategories ul li:hover h5 a { color: var(--po-red); }
#header .user-info a { color: var(--text-secondary); }
#header .user-info a:hover { color: var(--po-red); }

/* ── 7. Breadcrumb ── */
.breadcrumb { background: transparent; font-family: var(--font-support); font-size: 13px; color: var(--text-muted); padding-left: 0; }
.breadcrumb li::after { color: var(--text-muted); content: "›"; margin: 0 6px; }
.breadcrumb li a { color: var(--text-muted); }
.breadcrumb li:last-child a, .breadcrumb li:last-child span { color: var(--text-primary); font-weight: var(--fw-medium); }

/* ── 8. Category / listing page ── */
#js-product-list-header h1, .block-category .h1 { color: var(--po-red); font-size: var(--fs-h3); }
.block-category { border: none; box-shadow: var(--shadow-card); border-radius: var(--radius-xl); background: var(--po-white); min-height: 0; }
#products .products, .featured-products .products, .product-accessories .products { justify-content: flex-start; }
/* Classic wraps miniatures in .js-product columns; our card fills them */
#products .product, .featured-products .product, .product-accessories .product { padding-bottom: var(--space-lg); }
#products img, .featured-products img { margin: 0; }
.total-products p { font-family: var(--font-support); color: var(--text-muted); }
#js-product-list-top { background: var(--po-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); border: none; padding: 10px 16px; }
.products-sort-order .select-title { border: 1px solid var(--border-divider); border-radius: var(--radius-md); box-shadow: none; }
.products-sort-order .dropdown-menu { border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: none; }
.pagination { font-family: var(--font-support); }
.pagination .disabled { color: var(--po-grey-500); }

/* Faceted search sidebar */
#search_filters, #search_filters_wrapper #search_filters {
  background: var(--po-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-lg);
}
#search_filters .h6, #search_filters_wrapper .h6 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h5); }
#search_filters .facet { border-top: 1px solid var(--border-divider); padding-top: var(--space-sm); margin-bottom: var(--space-sm); }
#search_filters .facet .facet-title { font-family: var(--font-sans); font-weight: var(--fw-bold); color: var(--text-primary); font-size: var(--fs-body-sm); }
#search_filters .facet .facet-label a { font-family: var(--font-support); color: var(--text-secondary); font-size: var(--fs-body-sm); }
#search_filters .facet .facet-label a:hover { color: var(--po-red); }
#search_filters .facet .facet-label.active a { color: var(--text-primary); font-weight: var(--fw-medium); }
#search_filters .facet .magnitude { color: var(--text-muted); }
#search_filters .facet .collapse-icons { color: var(--text-muted); }
.active_filters { background: var(--po-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }
.active_filters .filter-block {
  background: var(--po-ink-05); border-radius: var(--radius-md);
  font-family: var(--font-support); font-size: var(--fs-body-sm); box-shadow: none;
}
.active_filters .filter-block .js-search-link { color: var(--po-red); }

/* Left column misc blocks */
#left-column .block-categories { background: var(--po-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); border: none; }
#left-column .block-categories a { color: var(--text-secondary); font-family: var(--font-support); }
#left-column .block-categories a:hover { color: var(--po-red); }
#left-column .block-categories .category-sub-menu .category-sub-link { font-size: var(--fs-body-sm); }

/* ── 9. PDP ── */
#product #content { max-width: 100%; }
.product-container { background: var(--po-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-xl); margin: 0; }
#product h1 { font-size: var(--fs-h3); color: var(--text-primary); margin-bottom: var(--space-xs); }
.product-prices .current-price, .current-price-display { color: var(--text-price); font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h3); }
.product-prices div { margin-bottom: 4px; }
.tax-shipping-delivery-label { font-family: var(--font-support); color: var(--text-muted); font-size: var(--fs-caption); }
.po-register-price { margin: var(--space-xs) 0 var(--space-sm); }
#product .product-description { font-family: var(--font-support); color: var(--text-secondary); }
.product-cover { margin-bottom: var(--space-md); }
.product-cover img { background: var(--po-grey-50); border-radius: var(--radius-xl); box-shadow: none; }
.product-images > li.thumb-container > .thumb { border-radius: var(--radius-md); border: 1.5px solid var(--border-divider); box-shadow: none; }
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover,
#product .images-container .thumb.selected,
#product .images-container .thumb:hover { border: 1.5px solid var(--po-red); }
.images-container .product-images > li.thumb-container { background: transparent; }

/* Combination selectors */
.product-variants > .product-variants-item .control-label {
  font-family: var(--font-support); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); color: var(--text-primary);
}
.product-variants > .product-variants-item select {
  border: 1px solid var(--border-divider); border-radius: var(--radius-md);
  font-family: var(--font-support); color: var(--text-primary);
  box-shadow: none; height: 44px; padding: 0 14px; min-width: 220px;
}
.product-variants > .product-variants-item select:focus { border-color: var(--po-red); box-shadow: 0 0 0 3px rgba(228,5,33,0.12); }
.product-variants > .product-variants-item ul li { margin-right: var(--space-xs); }
.product-variants .input-radio + span,
.product-variants > .product-variants-item .radio-label {
  border-radius: var(--radius-pill); font-family: var(--font-support); font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm); background: var(--po-grey-50); color: var(--text-primary);
  box-shadow: none; padding: 9px 18px; display: inline-block;
}
.product-variants .input-radio:checked + span { background: var(--po-gradient-red); color: var(--po-white); }
.product-variants .input-color:checked + span, .product-variants .input-color:hover + span { border: 2px solid var(--po-ink); }

/* Quantity + add-to-cart */
.product-quantity .qty, .product-quantity .add { margin-right: var(--space-sm); }
.product-quantity #quantity_wanted {
  border: 1px solid var(--border-divider); border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--po-white); color: var(--text-primary); height: 44px; box-shadow: none;
}
.bootstrap-touchspin { border: none; box-shadow: none; }
.bootstrap-touchspin .btn-touchspin { border: 1px solid var(--border-divider); background: var(--po-white); }
.bootstrap-touchspin .btn-touchspin:hover { background: var(--po-grey-50); }
.product-add-to-cart .add-to-cart {
  background: var(--po-gradient-red); border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-weight: var(--fw-medium); text-transform: none;
  padding: 12px 28px; height: 44px; line-height: 1;
}
.product-add-to-cart .add-to-cart .shopping-cart { color: var(--po-white); }
.product-add-to-cart { margin-top: var(--space-md); }
.product-actions .control-label { width: auto; }

/* prooptixstock block */
.po-stock { font-family: var(--font-support); font-size: var(--fs-body-sm); color: var(--text-secondary); margin-top: var(--space-sm); }
.po-stock__row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.po-stock__dot { width: 8px; height: 8px; border-radius: 50%; background: #1E9E4A; display: inline-block; flex-shrink: 0; }
.po-stock strong { color: var(--text-primary); }

/* PDP attribute chips row */
.po-pdp-attrs { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-md) 0; }

/* PDP accordion panel */
.po-pdp-panel {
  border: 1px solid var(--border-divider); border-radius: var(--radius-xl);
  padding: 8px 28px 12px; margin-top: var(--space-2xl); background: var(--po-white);
}
.po-pdp-panel .product-description { color: var(--text-secondary); }
/* the js-product-details div must stay in DOM; neutralize tab-pane hiding */
.po-pdp-panel .js-product-details.tab-pane { display: block; opacity: 1; }
/* Bootstrap-alpha collapse safety: open panels display regardless of in/show variant */
.po-pdp-panel .collapse.in, .po-pdp-panel .collapse.show { display: block; }
.po-pdp-panel .data-sheet { margin: 0; }
.po-pdp-panel .product-features > .h6, .po-pdp-panel .product-features { margin-top: 0; }
.po-pdp-panel .product-manufacturer, .po-pdp-panel .product-reference,
.po-pdp-panel .product-quantities, .po-pdp-panel .product-out-of-stock,
.po-pdp-panel .product-availability-date {
  font-family: var(--font-support); font-size: var(--fs-body-sm); color: var(--text-secondary);
  display: inline-block; margin-right: var(--space-lg); margin-bottom: var(--space-sm);
}
.po-pdp-panel .label { color: var(--text-muted); font-weight: var(--fw-medium); }

/* Product flags (PDP + anywhere Classic renders them) — never Classic blue */
.product-flags li.product-flag,
.product-flags li.product-flag.new,
.product-flags .product-flag, li.product-flag {
  background: var(--po-gradient-red);
  font-family: var(--font-support);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  box-shadow: none;
}
li.product-flag.discount { background: var(--po-charcoal); }

/* Certifications strip */
.po-certifications { display: flex; justify-content: center; padding: var(--space-xl) 0 var(--space-md); }
.po-certifications img { max-width: 620px; width: 100%; height: auto; }

/* Accessories / related */
.product-accessories .h5 { font-family: var(--font-sans); color: var(--po-red); font-size: var(--fs-h4); text-transform: none; }

/* Hide social sharing + comments cruft that fights the B2B layout (modules stay hooked) */
.social-sharing { display: none; }

/* ── 10. Home ── */
.po-hero {
  background: var(--po-charcoal) var(--po-gradient-red-diagonal);
  background-image: var(--po-gradient-red-diagonal);
  border-radius: var(--radius-xl);
  color: var(--po-white);
  padding: 72px 64px;
  margin-bottom: var(--space-xl);
}
.po-hero__eyebrow {
  font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: var(--space-sm);
}
.po-hero h1 {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h1);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--po-white);
  max-width: 720px; margin: 0 0 var(--space-md);
}
.po-hero p { font-family: var(--font-support); font-size: var(--fs-h5); color: rgba(255,255,255,0.9); max-width: 640px; margin: 0 0 var(--space-xl); }
.po-hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.page-home > * { margin-bottom: var(--space-xl); }
.featured-products .h2, .featured-products h2 { font-family: var(--font-sans); color: var(--text-primary); }
.featured-products .all-product-link { color: var(--po-red); font-family: var(--font-sans); font-weight: var(--fw-bold); }
/* Hide the default Classic banner/slider/custom-text demo blocks — branding handled by hero (modules stay hooked) */
.carousel, #custom-text, .banner, a.banner { display: none; }

/* ── 11. Footer ── */
.footer-container { background: var(--po-charcoal); color: var(--po-white); padding-top: 0; box-shadow: none; margin-top: var(--space-3xl); overflow: hidden; }
.po-footer-brand { padding-top: 56px; }
.po-footer-brand__logo img { height: 40px; width: auto; display: block; }
.po-footer-brand__strapline { font-family: var(--font-sans); font-size: var(--fs-body-sm); color: rgba(255,255,255,0.85); margin-top: 10px; }
.po-footer-brand__details { margin-top: var(--space-lg); font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.7); font-family: var(--font-support); }
.po-footer-brand__details strong { color: var(--po-white); }
.po-footer-brand__social { display: flex; gap: 10px; margin-top: var(--space-lg); }
.po-footer-brand__social a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); color: var(--po-white); background: rgba(255,255,255,0.08);
}
.po-footer-brand__social a:hover { background: rgba(255,255,255,0.16); color: var(--po-white); }
.footer-container .row > .col-md-12 { padding-top: 0; }
.footer-container .links { padding-top: 56px; }
.footer-container .h3, .footer-container .links .h3, .footer-container .block-contact .h3,
.footer-container .myaccount-title a, .footer-container p.h3 {
  font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-body-sm);
  color: var(--po-white); text-transform: none;
}
#footer .footer-container p.h3, #footer .footer-container p.h3 a,
#footer .footer-container .h4, #footer .footer-container .block-contact-title,
#footer .footer-container .myaccount-title a {
  font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-body-sm);
  color: var(--po-white); text-transform: none;
}
.footer-container li a, .footer-container .block-contact { color: rgba(255,255,255,0.72); font-family: var(--font-support); font-size: 13px; }
.footer-container li a:hover { color: var(--po-white); }
.footer-container .block-contact { color: rgba(255,255,255,0.72); }
.po-footer-legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-2xl); padding: 18px 0; }
.po-footer-legal .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 11px; color: rgba(255,255,255,0.55); font-family: var(--font-support); }
.po-footer-legal a { color: var(--po-red); text-decoration: none; }
.po-footer-legal .po-footer-legal__links { display: flex; gap: 20px; }
/* newsletter band above footer */
.block_newsletter { font-family: var(--font-support); }
.block_newsletter form input[type=email] { border: 1px solid var(--border-divider); border-radius: var(--radius-md) 0 0 var(--radius-md); }
.block_newsletter form input[type=submit], .block_newsletter form button {
  background: var(--po-gradient-red); color: var(--po-white); border: none; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-sans); font-weight: var(--fw-medium);
}
/* hide wishlist + my-account footer noise for the B2B guest PoC (modules stay hooked) */
.footer-container .wishlist-footer-link { display: none; }

/* blockreassurance: neutralise its default look */
#block-reassurance, .blockreassurance { background: transparent; }
#block-reassurance li .block-reassurance-item { font-family: var(--font-support); }

/* ── 12. Search page / misc ── */
#search #wrapper h2 { font-family: var(--font-sans); }
.page-not-found { border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }

/* ── 12b. CMS content pages (Solutions / Resources / About us) ──
   Section components consumed by CMS-page HTML (cms_pages/). No Smarty —
   pages inline their own SVG icons from the design-system outline set. */
.po-cms { font-family: var(--font-support); color: var(--text-primary); }
.po-cms section, .po-cms .po-sec { margin-bottom: var(--space-3xl); }
.po-cms h1 {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h1);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 var(--space-md); max-width: 760px;
}
.po-cms h2 {
  font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2);
  line-height: var(--lh-heading); letter-spacing: var(--ls-tight); margin: 0 0 var(--space-md); max-width: 720px;
}
.po-cms h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-heading); margin: 0 0 var(--space-xs); }
.po-overline {
  display: block; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--po-red); margin-bottom: var(--space-sm);
}
.po-lead { font-family: var(--font-support); font-size: var(--fs-h5); color: var(--text-secondary); line-height: var(--lh-body); max-width: 680px; margin: 0 0 var(--space-lg); }
.po-cms p { color: var(--text-secondary); line-height: var(--lh-body); max-width: 680px; }
.po-link-arrow { font-family: var(--font-sans); font-weight: var(--fw-bold); color: var(--po-red); text-decoration: none; white-space: nowrap; }
.po-link-arrow:hover { color: var(--po-burgundy); text-decoration: none; }

.po-grid { display: grid; gap: var(--space-md); }
.po-grid--2 { grid-template-columns: repeat(2, 1fr); }
.po-grid--3 { grid-template-columns: repeat(3, 1fr); }
.po-grid--4 { grid-template-columns: repeat(4, 1fr); }

.po-icon-tile {
  background: var(--po-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
  padding: var(--space-lg); transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.po-icon-tile:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.po-icon-tile__icon { display: block; width: 40px; height: 40px; color: var(--po-red); margin-bottom: var(--space-sm); }
.po-icon-tile__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.po-icon-tile h3 { font-size: var(--fs-h5); }
.po-icon-tile p { font-size: var(--fs-body-sm); margin: 0; }

.po-case-card {
  background: var(--po-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
  padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm);
}
.po-case-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.po-case-card p { font-size: var(--fs-body-sm); margin: 0; flex-grow: 1; }

.po-stat { text-align: left; }
.po-stat__number { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h2); color: var(--po-red); line-height: var(--lh-tight); }
.po-stat__label { font-family: var(--font-support); font-size: var(--fs-body-sm); color: var(--text-secondary); }

.po-cta-band {
  background: var(--po-charcoal); background-image: var(--po-gradient-red-diagonal);
  border-radius: var(--radius-xl); color: var(--po-white); padding: 56px 64px;
}
.po-cta-band--dark { background-image: none; }
.po-cta-band h2 { color: var(--po-white); }
.po-cta-band p { color: rgba(255,255,255,0.9); }
.po-cta-band__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }

/* Icon classes for CMS pages - PS's HTML sanitizer strips inline <svg>,
   so pages use <span class="po-ic po-ic--name"> and the shape ships here
   as a mask data-URI (same pattern as the ps_searchbar icon swap). */
.po-ic { background-color: currentColor; -webkit-mask: var(--po-ic-url) center / contain no-repeat; mask: var(--po-ic-url) center / contain no-repeat; }
.po-ic--box { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%203%207.5V16.5L12%2021l9-4.5V7.5L12%203Z%22/%3E%3Cpath%20d%3D%22M3%207.5%2012%2012l9-4.5M12%2012v9%22/%3E%3C/svg%3E"); }
.po-ic--cable { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208V6a2%202%200%200%201%202-2h1a2%202%200%200%201%202%202v12a2%202%200%200%200%202%202h1a2%202%200%200%200%202-2v-2%22/%3E%3Cpath%20d%3D%22M4%208h5M15%2016h5%22/%3E%3Cpath%20d%3D%22M18%2012h2a2%202%200%200%200%202-2V8M6%2012H4a2%202%200%200%201-2-2V8%22/%3E%3C/svg%3E"); }
.po-ic--compatibility { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2012h3M13%2012h3%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%222.5%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212%22%20r%3D%222.5%22/%3E%3Cpath%20d%3D%22m9%209%201.5%201.5M15%209l-1.5%201.5%22/%3E%3C/svg%3E"); }
.po-ic--connector { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%229%22%20width%3D%229%22%20height%3D%226%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M13%2010.5h3l4-2v7l-4-2h-3%22/%3E%3Cpath%20d%3D%22M7%209V7.5M10%209V7.5%22/%3E%3C/svg%3E"); }
.po-ic--dataRate { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015a3%203%200%201%200%200-6%203%203%200%200%200%200%206Z%22/%3E%3Cpath%20d%3D%22m13.8%2010.2%203.2-3.2%22/%3E%3Cpath%20d%3D%22M4.2%2018a9%209%200%201%201%2015.6%200%22/%3E%3C/svg%3E"); }
.po-ic--datacentre { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%227%22%20rx%3D%221%22/%3E%3Crect%20x%3D%224%22%20y%3D%2214%22%20width%3D%2216%22%20height%3D%227%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M8%206.5h.01M8%2017.5h.01%22/%3E%3Cpath%20d%3D%22M12%206.5h4M12%2017.5h4%22/%3E%3C/svg%3E"); }
.po-ic--diagnostics { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h3l2-6%204%2012%202-6h3%22/%3E%3Cpath%20d%3D%22M18%2012h3%22/%3E%3C/svg%3E"); }
.po-ic--document { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h8l4%204v14a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1Z%22/%3E%3Cpath%20d%3D%22M13%203v5h5M8%2013h8M8%2017h5%22/%3E%3C/svg%3E"); }
.po-ic--duplex { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209h13M4%209l3-3M4%209l3%203%22/%3E%3Cpath%20d%3D%22M20%2015H7M20%2015l-3-3M20%2015l-3%203%22/%3E%3C/svg%3E"); }
.po-ic--fiber { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M6%2012h0.01%22/%3E%3Cpath%20d%3D%22M10%2012c4%200%204-6%208-6M10%2012c4%200%204%206%208%206%22/%3E%3C/svg%3E"); }
.po-ic--globe { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M3%2012h18M12%203c2.5%202.5%202.5%2015%200%2018M12%203c-2.5%202.5-2.5%2015%200%2018%22/%3E%3C/svg%3E"); }
.po-ic--link { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2015%2015%209%22/%3E%3Cpath%20d%3D%22M10.5%206.5%2012%205a3.5%203.5%200%200%201%205%205l-1.5%201.5M13.5%2017.5%2012%2019a3.5%203.5%200%200%201-5-5l1.5-1.5%22/%3E%3C/svg%3E"); }
.po-ic--network { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%225%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2218%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2218%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M12%207v4M12%2011%206.5%2016M12%2011l5.5%205%22/%3E%3C/svg%3E"); }
.po-ic--optical { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M12%203v2M12%2019v2M3%2012h2M19%2012h2M6%206l1.5%201.5M16.5%2016.5%2018%2018M18%206l-1.5%201.5M7.5%2016.5%206%2018%22/%3E%3C/svg%3E"); }
.po-ic--power { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%203%204%2014h6l-1%207%209-11h-6l1-7Z%22/%3E%3C/svg%3E"); }
.po-ic--reach { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h14%22/%3E%3Cpath%20d%3D%22m13%207%205%205-5%205%22/%3E%3Cpath%20d%3D%22M20%206v12%22/%3E%3C/svg%3E"); }
.po-ic--standard { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h9l3%203v15a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1Z%22/%3E%3Cpath%20d%3D%22M14%203v4h4%22/%3E%3Cpath%20d%3D%22m8.5%2014%202%202%204-4%22/%3E%3C/svg%3E"); }
.po-ic--transceiver { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%228%22%20rx%3D%221.5%22/%3E%3Cpath%20d%3D%22M16%2010.5h3a1%201%200%200%201%201%201v1a1%201%200%200%201-1%201h-3%22/%3E%3Cpath%20d%3D%22M5%2011.5v1M8%2011.5v1%22/%3E%3C/svg%3E"); }
.po-ic--user { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M5%2020a7%207%200%200%201%2014%200%22/%3E%3C/svg%3E"); }
.po-ic--warranty { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%205%206v5c0%204.5%203%208%207%2010%204-2%207-5.5%207-10V6l-7-3Z%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E"); }
.po-ic--wavelength { --po-ic-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012c2.2%200%203-4%205-4s2.8%208%205%208%202.8-8%205-8%202.8%204%205%204%22/%3E%3C/svg%3E"); }

@media (max-width: 991px) {
  .po-grid--3, .po-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .po-cta-band { padding: 40px 28px; }
}
@media (max-width: 767px) {
  .po-grid--2, .po-grid--3, .po-grid--4 { grid-template-columns: 1fr; }
}

/* ── 13. Responsive ── */
@media (max-width: 991px) {
  .po-hero { padding: 48px 28px; }
  .po-hero h1 { font-size: var(--fs-h2); }
  .product-container { padding: var(--space-md); }
  .po-pdp-panel { padding: 4px 16px 8px; }
  .po-footer-brand { padding-top: var(--space-xl); }
  #header .top-menu a[data-depth="0"] { color: var(--text-primary); }
}
@media (max-width: 767px) {
  :root { --fs-h1: 34px; --fs-h2: 28px; --fs-h3: 24px; }
  .po-hero__actions .po-btn { width: 100%; }
  .po-product-card { padding: 12px; }
}

/* ── 0.8.0 additions: SKU line + Key Features bullets ── */
.po-sku-line {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  margin: 2px 0 10px; font-family: var(--font-support);
}
.po-sku-line__sku { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-primary); }
.po-sku-line__hansa { font-size: var(--fs-caption); color: var(--text-muted); }

.po-feature-list {
  margin: 12px 0 4px; padding-left: 20px;
  font-family: var(--font-support); font-size: var(--fs-body-sm);
  color: var(--text-secondary); line-height: var(--lh-body);
}
.po-feature-list li { margin-bottom: 4px; }
.po-feature-list li::marker { color: var(--po-red); }

/* ── 0.8.4: single-row header — logo | Products + nav links | search ── */
@media (min-width: 768px) {
  #header .header-top > .container > .row:first-child {
    display: flex; align-items: center; flex-wrap: nowrap;
  }
  #header #_desktop_logo { min-height: 69px; display: flex; align-items: center; }
  #header .header-top-right {
    display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  }
  #header .header-top-right .po-megamenu { flex: 1 1 auto; min-width: 0; }
  #header .header-top-right #search_widget,
  #header .header-top-right .search-widget {
    flex: 0 0 auto; margin-left: auto; width: 300px; max-width: 34vw;
    float: none; padding-top: 0;
  }
  #header .header-top { padding-bottom: 12px; }
}