/* ============================================================
   CaseTech Products — front-end single product page + quote form
   ============================================================ */
.ctp-single{
  --navy:#0d1330;--navy2:#131c46;--indigo:#2a2f9c;--indigo6:#3a41c0;
  --red:#d1202f;--red2:#b21826;--ink:#101425;--slate:#4a5169;--slate3:#6b7288;
  --line:#e5e7f0;--paper:#f5f6fb;--gold:#c9a24b;
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,#f6f7fc 0%,#eef0f8 100%);padding:0 0 4rem;
}
.ctp-single *{box-sizing:border-box}
.ctp-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.ctp-wrap-body{margin-top:-2.4rem;position:relative;z-index:2}
/* The z-index above (and the hero's z-index:1) only ever needed to order the
   white card against the navy band it overlaps. Without isolation they are not
   local at all: .ctp-single has no positioned ancestor, so both land in the
   ROOT stacking context, and level 2 there was enough to paint over the site
   header's dropdown menu — which resolves to level 2 as well and loses the tie
   on DOM order. Isolating keeps the pair scoped to this template, where they
   belong, and takes the product page out of the page-wide z-index contest
   entirely. (v0.41.1) */
.ctp-single{isolation:isolate}

/* Navy product header band (brand color, diagonal texture like the hero) */
.ctp-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 140% at 85% 0%,var(--navy700,#1c2864) 0%,var(--navy,#0d1330) 60%);
  padding:2rem 0 4rem;
}
.ctp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(115deg,rgba(42,47,156,.35),transparent 45%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 22px);}
.ctp-hero .ctp-wrap{position:relative;z-index:1}

/* Breadcrumb (on navy) */
.ctp-breadcrumb{font-size:.82rem;color:#aeb4d4;margin-bottom:1.1rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.ctp-breadcrumb a{color:#cfd3ec;text-decoration:none}
.ctp-breadcrumb a:hover{color:#fff;text-decoration:underline}
.ctp-breadcrumb .current{color:#8b91b7}

/* Layout */
.ctp-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:2.6rem;align-items:start}

/* Gallery */
.ctp-gallery{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fafbff}
.ctp-gallery-main{display:flex;align-items:center;justify-content:center;padding:1.2rem;min-height:340px;background:#fff}
.ctp-gallery-main img{max-width:100%;height:auto;max-height:460px;object-fit:contain;display:block}
.ctp-thumbs{display:flex;gap:.6rem;padding:.9rem 1.2rem;flex-wrap:wrap;border-top:1px solid var(--line);background:#fff}
.ctp-thumb{width:64px;height:64px;border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:#fff;cursor:pointer;padding:0;transition:.15s ease}
.ctp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ctp-thumb:hover{border-color:#c2c7dd}
.ctp-thumb.is-active{border-color:var(--indigo);box-shadow:0 0 0 2px rgba(42,47,156,.18)}
.ctp-noimg{display:flex;align-items:center;justify-content:center;min-height:300px;color:var(--slate3);
  font-size:.9rem;letter-spacing:.05em;text-transform:uppercase}

/* Product title + meta (in the navy hero) */
.ctp-title{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  font-weight:700;line-height:1.05;font-size:clamp(1.9rem,3.2vw,2.9rem);color:#fff;margin:0 0 .7rem}
.ctp-meta{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;font-size:.9rem;color:#c7cce4}
.ctp-meta .ctp-sku b{color:#fff}
.ctp-meta a{color:#8f95ff;text-decoration:none}
.ctp-meta a:hover{color:#fff;text-decoration:underline}

/* Cards sit on the tinted page as white panels */
.ctp-main{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.6rem;
  box-shadow:0 10px 30px rgba(16,20,37,.06)}
.ctp-body{margin-top:1.6rem}

/* Specs table */
.ctp-specs{margin:1.6rem 0}
.ctp-specs h2,.ctp-options-display h2{font-family:'Barlow Condensed','Inter',sans-serif;
  text-transform:uppercase;font-size:1.15rem;letter-spacing:.03em;color:var(--navy);
  margin:0 0 .7rem;padding-bottom:.4rem;border-bottom:2px solid var(--red);display:inline-block}
.ctp-specs table{width:100%;border-collapse:collapse;font-size:.92rem}
.ctp-specs th,.ctp-specs td{text-align:left;padding:.6rem .8rem;border:1px solid var(--line)}
.ctp-specs th{background:var(--paper);color:var(--slate);font-weight:600;width:42%}

/* Options display */
.ctp-options-display{margin:1.6rem 0}
.ctp-optgroup{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap;margin:.5rem 0}
.ctp-optname{font-weight:700;color:var(--ink);font-size:.9rem;min-width:150px}
.ctp-chip{display:inline-block;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:.25rem .7rem;font-size:.82rem;color:var(--slate);margin:.15rem}
.ctp-chip-color{font-weight:600;box-shadow:0 1px 2px rgba(16,20,37,.12)}

/* Description (legacy HTML content) */
.ctp-description{margin-top:1.8rem;font-size:.98rem;line-height:1.7;color:#2a3042}
.ctp-description h2{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  color:var(--navy);font-size:1.15rem;margin:1.4rem 0 .6rem}
.ctp-description ul{margin:.6rem 0 1rem;padding-left:1.2rem}
.ctp-description li{margin:.3rem 0}
.ctp-description hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0}
.ctp-description img{max-width:100%;height:auto}

/* ---- Legacy-description containment (v0.41.0) ----------------------------
   A grid column is `min-width:auto` by default: its minimum size is the minimum
   size of its CONTENT. The Shell descriptions carry a spec-sheet image tagged
   width="1525", which therefore grew the .ctp-main track, widened the grid past
   the 1200px wrapper and pushed the quote form off the page — measured at 1927px
   on a 1440px viewport. `min-width:0` is what breaks that chain; the rest is
   belt and braces for the other shapes imported WooCommerce content arrives in
   (tables with width attributes, iframes, unbroken part numbers). */
.ctp-grid > *{min-width:0}

/* Long unbroken strings (part numbers, pasted URLs) must be allowed to wrap. */
.ctp-description{overflow-wrap:break-word;word-break:break-word}

/* Blunt, and deliberately so: this block is arbitrary third-party HTML and
   nothing in it has a right to be wider than the column it sits in. */
.ctp-description *{max-width:100%}

.ctp-description img,
.ctp-description video,
.ctp-description iframe,
.ctp-description embed,
.ctp-description object{max-width:100%;height:auto}

/* A wide table keeps its shape and scrolls inside itself, rather than dragging
   the page sideways. display:block makes the table its own scroll container;
   the rows still lay out as a table inside it. */
.ctp-description table{display:block;width:100%;max-width:100%;overflow-x:auto}

.ctp-description pre{overflow-x:auto;white-space:pre-wrap}

/* ---------- Sidebar quote form ---------- */
.ctp-aside{position:sticky;top:24px}
.ctq-wrap{--navy:#0d1330;--navy2:#131c46;--indigo:#2a2f9c;--red:#d1202f;--red2:#b21826;
  --ink:#101425;--slate:#4a5169;--line:#e5e7f0;--paper:#f7f8fc;
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);position:relative}
.ctq-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;
  box-shadow:0 16px 40px rgba(13,19,48,.16);overflow:hidden}
.ctq-title{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.5rem;font-weight:700;color:#fff;
  margin:-22px -20px 1.2rem;padding:16px 20px;
  background:linear-gradient(135deg,var(--indigo) 0%,var(--navy2) 100%)}
.ctq-field{display:block;margin:0 0 1.15rem}
.ctq-label{display:block;font-size:.76rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);margin-bottom:.35rem}
.ctq-row{display:flex;gap:.7rem}
.ctq-row .ctq-field{flex:1}
.ctq-form input,.ctq-form textarea{width:100%;border:1px solid #d7dae8;border-radius:9px;
  padding:.72rem .8rem;font-size:.92rem;font-family:inherit;color:var(--ink);background:#fff;
  transition:.15s ease}
.ctq-form input:focus,.ctq-form textarea:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(42,47,156,.12)}
.ctq-readonly{background:var(--paper);color:var(--navy);font-weight:600}
.ctq-qty{max-width:120px}
.ctq-fieldset{border:0;padding:0;margin:.4rem 0 .2rem}
.ctq-fieldset legend{padding:0}
.ctq-radio{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;border:1px solid #d7dae8;
  border-radius:9px;margin-bottom:.45rem;cursor:pointer;font-size:.92rem;transition:.15s ease}
.ctq-radio:hover{border-color:#b9bed8;background:var(--paper)}
.ctq-radio input{width:auto;accent-color:var(--indigo)}
.ctq-radio:has(input:checked){border-color:var(--indigo);background:rgba(42,47,156,.05)}
.ctq-divider{height:1px;background:var(--line);margin:.4rem 0 1rem}
.ctq-custom{animation:ctqFade .2s ease}
@keyframes ctqFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ctq-btn-ghost{background:#fff;border:1px dashed #b9bed8;color:var(--indigo);font-weight:600;
  padding:.55rem .9rem;border-radius:9px;cursor:pointer;font-size:.88rem;width:100%;transition:.15s}
.ctq-btn-ghost:hover{background:var(--paper);border-color:var(--indigo)}
.ctq-file{margin-top:.6rem}
.ctq-note{font-size:.82rem;color:var(--red2);margin:.5rem 0 0;font-weight:600}
.ctq-submit{width:100%;background:var(--red);color:#fff;border:0;border-radius:10px;
  padding:.85rem 1rem;font-size:.98rem;font-weight:700;cursor:pointer;margin-top:.6rem;
  box-shadow:0 6px 18px rgba(209,32,47,.28);transition:.15s ease}
.ctq-submit:hover{background:var(--red2);transform:translateY(-1px)}
.ctq-disclaimer{font-size:.76rem;color:var(--slate);text-align:center;margin:.7rem 0 0}
.ctq-modal{--navy:#0d1330;--navy2:#131c46;--indigo:#2a2f9c;--indigo6:#3a41c0;--red:#d1202f;--red2:#b21826;--ink:#101425;--slate:#4a5169;--slate3:#6b7288;--paper:#f5f6fb;--line:#e5e7f0;position:fixed;inset:0;z-index:99999;background:rgba(13,19,48,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:16px;display:flex;
  align-items:center;justify-content:center;border-radius:14px;z-index:20;padding:14px}
/* Keep hidden elements hidden even though .ctq-modal sets display:flex */
.ctq-wrap [hidden]{display:none !important}
/* Honeypot — off-screen, not display:none (bots skip display:none) */
.ctq-hp{position:absolute !important;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}
.ctq-intro{font-size:.86rem;color:var(--slate);margin:0 0 1rem}
/* Submit feedback */
.ctq-feedback{margin:.4rem 0 0;padding:.6rem .8rem;border-radius:9px;font-size:.86rem}
.ctq-feedback.is-err{background:#fdecee;color:#b21826;border:1px solid #f5c6cc}
.ctq-feedback.is-ok{background:#e8f6ec;color:#1e7a3a;border:1px solid #bfe6c9}
.ctq-submit:disabled{opacity:.7;cursor:default;transform:none}
.ctq-success{background:#e8f6ec;border:1px solid #bfe6c9;color:#1e7a3a;border-radius:10px;
  padding:1.2rem;text-align:center;font-size:.95rem;line-height:1.5}
.ctq-turnstile{margin:.2rem 0 .6rem}
.ctq-modal-card{background:#fff;border-radius:12px;padding:20px;max-width:320px;width:100%;
  box-shadow:0 20px 50px rgba(13,19,48,.4);animation:ctqFade .2s ease}
.ctq-modal-card h4{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  color:var(--navy);font-size:1.15rem;margin:0 0 .5rem;letter-spacing:.01em}
.ctq-modal-card p{font-size:.86rem;color:var(--slate);margin:0 0 1rem}
.ctq-modal-actions{display:flex;gap:.6rem}
.ctq-btn-red,.ctq-btn-dark{flex:1;border:0;border-radius:9px;padding:.6rem;font-weight:700;
  cursor:pointer;font-size:.9rem;transition:.15s}
.ctq-btn-red{background:var(--red);color:#fff}.ctq-btn-red:hover{background:var(--red2)}
.ctq-btn-dark{background:var(--navy2);color:#fff}.ctq-btn-dark:hover{background:var(--navy)}

/* ---------- Archive (shop) grid ---------- */
.ctp-hero-sub{color:#aeb4d4;font-size:.9rem;margin:.2rem 0 0;letter-spacing:.02em}

/* Filter bar */
.ctp-filters{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin-bottom:1.8rem;
  box-shadow:0 6px 18px rgba(16,20,37,.06)}
.ctp-filter-field{flex:1;min-width:150px}
.ctp-filter-search{flex:2;min-width:200px}
.ctp-filters input[type=search],.ctp-filters select{width:100%;border:1px solid #d7dae8;border-radius:9px;
  padding:.55rem .7rem;font-size:.9rem;font-family:inherit;color:var(--ink);background:#fff}
.ctp-filters input:focus,.ctp-filters select:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(42,47,156,.12)}
.ctp-filter-apply{background:var(--indigo);color:#fff;border:0;border-radius:9px;padding:.6rem 1.3rem;
  font-weight:600;font-size:.9rem;cursor:pointer;transition:.15s}
.ctp-filter-apply:hover{background:var(--navy2)}
.ctp-filter-clear{color:var(--slate);font-size:.85rem;text-decoration:none;padding:.3rem .5rem}
.ctp-filter-clear:hover{color:var(--red)}
@media(max-width:700px){.ctp-filter-field,.ctp-filter-search{flex:1 1 100%}}
/* Wider container + bigger minimum now that the rail is gone — the product shot
   is the thing customers scan, so it gets the space back. */
.ctp-archive .ctp-wrap{max-width:1400px}
.ctp-archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem}
.ctp-archive .ctp-card-img{aspect-ratio:4/3;padding:.85rem}
.ctp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);
  box-shadow:0 4px 14px rgba(16,20,37,.06);transition:.18s ease}
.ctp-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(16,20,37,.14);border-color:#cfd3e6}
.ctp-card-img{display:flex;align-items:center;justify-content:center;background:#fff;
  aspect-ratio:4/3;padding:1rem;border-bottom:1px solid var(--line)}
.ctp-card-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.ctp-card-img img.ctp-img-ph{opacity:.9}
.ctp-card-body{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem 1.2rem;flex:1}
.ctp-card-title{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  font-weight:700;font-size:1.12rem;line-height:1.1;color:var(--navy)}
.ctp-card-sku{font-size:.78rem;color:var(--slate3);letter-spacing:.03em}
.ctp-card-cta{margin-top:auto;padding-top:.5rem;font-weight:600;font-size:.85rem;color:var(--red)}
.ctp-card:hover .ctp-card-cta{color:var(--red2)}

/* Pagination */
.ctp-pagination{margin-top:2.4rem;display:flex;justify-content:center}
.ctp-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;margin:0 3px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);text-decoration:none;font-size:.9rem;transition:.15s}
.ctp-pagination .page-numbers:hover{border-color:var(--indigo);color:var(--indigo)}
.ctp-pagination .page-numbers.current{background:var(--indigo);border-color:var(--indigo);color:#fff}
.ctp-pagination .dots{border:0;background:none}
.ctp-empty{padding:2rem 0;color:var(--slate);font-size:1rem}

/* Responsive */
@media(max-width:900px){
  .ctp-grid{grid-template-columns:1fr;gap:2rem}
  .ctp-aside{position:static}
}
@media(max-width:560px){
  .ctp-archive-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
}

/* ---- Custom extra fields (v0.10.0 form builder) ---- */
.ctq-form select.ctq-select{width:100%;border:1px solid #d7dae8;border-radius:9px;
  padding:.6rem .7rem;font-size:.92rem;font-family:inherit;color:var(--ink);background:#fff;
  transition:.15s ease;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5169' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center}
.ctq-form select.ctq-select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(42,47,156,.12)}
.ctq-req{color:var(--red);font-weight:700}

/* ---- Image-choice fields (v0.11.0 form builder) ---- */
.ctq-imgset{margin:.6rem 0 1rem}
.ctq-imggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.55rem;margin-top:.15rem}
.ctq-imgopt{position:relative;display:block;cursor:pointer;margin:0}
.ctq-imgopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ctq-imgopt-inner{display:block;border:1px solid #d7dae8;border-radius:9px;overflow:hidden;background:#fff;transition:.15s ease;position:relative}
.ctq-imgopt:hover .ctq-imgopt-inner{border-color:#b9bed8;box-shadow:0 4px 12px rgba(16,20,37,.10)}
.ctq-imgopt-inner img,.ctq-imgopt-ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper,#f5f6fb)}
.ctq-imgopt-label{display:block;padding:.4rem .45rem;font-size:.74rem;font-weight:600;line-height:1.25;color:var(--ink,#101425);text-align:center}
.ctq-imgopt-tick{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--indigo,#272d92);color:#fff;font-size:.7rem;line-height:20px;text-align:center;opacity:0;transform:scale(.6);transition:.15s ease}
.ctq-imgopt input:checked ~ .ctq-imgopt-inner{border-color:var(--indigo,#272d92);box-shadow:0 0 0 2px rgba(39,45,146,.18)}
.ctq-imgopt input:checked ~ .ctq-imgopt-inner .ctq-imgopt-tick{opacity:1;transform:scale(1)}
.ctq-imgopt input:focus-visible ~ .ctq-imgopt-inner{outline:2px solid var(--indigo,#272d92);outline-offset:2px}

/* ---- Color-swatch choice fields (v0.18.0) ----
   Same tile language as the image options, only smaller: four across, the colour
   does the talking, and the name arrives as a tooltip on hover/focus. */
.ctq-swset{margin:.6rem 0 1rem}
.ctq-swgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem;margin-top:.35rem}
.ctq-swopt{position:relative;display:block;cursor:pointer;margin:0}
.ctq-swopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}

.ctq-swchip{display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1/1;border:1px solid #d7dae8;border-radius:8px;
  transition:transform .15s ease,box-shadow .15s ease;position:relative}
.ctq-swopt:hover .ctq-swchip{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,20,37,.20)}

.ctq-swtick{opacity:0;transform:scale(.5);font-size:.95rem;font-weight:700;
  line-height:1;transition:.15s ease}
.ctq-swopt input:checked ~ .ctq-swchip{box-shadow:0 0 0 2px var(--indigo,#272d92);
  border-color:var(--indigo,#272d92)}
.ctq-swopt input:checked ~ .ctq-swchip .ctq-swtick{opacity:1;transform:scale(1)}
.ctq-swopt input:focus-visible ~ .ctq-swchip{outline:2px solid var(--indigo,#272d92);outline-offset:2px}

/* Tooltip. Hidden by default; shown on hover, on keyboard focus, and while the
   swatch is selected so touch users still learn the name they picked. */
.ctq-swtip{position:absolute;left:50%;top:calc(100% + 8px);
  transform:translate(calc(-50% + var(--tipShift,0px)),-4px);
  z-index:20;display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:max-content;max-width:180px;padding:.4rem .6rem;border-radius:7px;
  background:var(--navy,#0d1330);color:#fff;text-align:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
/* Tooltip sits BELOW the chip: above it, a selected swatch in the top row
   collided with the fieldset legend. */
.ctq-swtip::after{content:"";position:absolute;bottom:100%;
  left:calc(50% - var(--tipShift,0px));transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--navy,#0d1330)}
.ctq-swopt:hover .ctq-swtip,
.ctq-swopt input:focus-visible ~ .ctq-swtip{opacity:1;visibility:visible;
  transform:translate(calc(-50% + var(--tipShift,0px)),0)}

/* At six across a tooltip pinned open on the selected chip buries the two rows
   under it, so the selection is reported in a caption below the grid instead. */
.ctq-swpicked{margin:.6rem 0 0;font-size:.78rem;font-weight:700;letter-spacing:.03em;
  color:var(--navy,#0d1330);line-height:1.4}
.ctq-swpicked:empty{display:none}
.ctq-swpicked b{color:var(--slate,#4a5169);font-weight:600}
.ctq-swname{font-size:.74rem;font-weight:700;letter-spacing:.02em;line-height:1.25;white-space:nowrap}
.ctq-swspec{font-size:.63rem;font-weight:600;opacity:.75;line-height:1.2;white-space:nowrap}

@media (max-width:420px){
  .ctq-swgrid{grid-template-columns:repeat(4,1fr)}
}

/* Modal is viewport-fixed (v0.12.3) so it lands in view no matter how far down the
   form the customer has scrolled. Body scroll locks while it's open. */
html.ctq-modal-open,html.ctq-modal-open body{overflow:hidden}
.ctq-modal-card{animation:ctqPop .16s ease-out}
@keyframes ctqPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ctq-modal-card{animation:none}}

/* v0.12.4 — the modal is moved to <body> on open, which orphans it from the
   custom properties defined on .ctq-wrap. It now declares its own palette above,
   and these fallbacks guarantee the Yes/No buttons are never white-on-white. */
.ctq-modal .ctq-btn-red{background:var(--red,#d1202f) !important;color:#fff !important}
.ctq-modal .ctq-btn-red:hover{background:var(--red2,#b21826) !important}
.ctq-modal .ctq-btn-dark{background:var(--navy2,#131c46) !important;color:#fff !important}
.ctq-modal .ctq-btn-dark:hover{background:var(--navy,#0d1330) !important}
.ctq-modal .ctq-modal-actions{display:flex;gap:.6rem}
.ctq-modal .ctq-modal-card h4{color:var(--navy,#0d1330)}
.ctq-modal .ctq-modal-card p{color:var(--slate,#4a5169)}

/* v0.12.5 — the ONLY hide rule was `.ctq-wrap [hidden]`, which stopped matching once the
   modal was moved to <body>, so hidden=true no longer beat .ctq-modal{display:flex}.
   This unscoped rule closes it wherever the modal lives. */
.ctq-modal[hidden]{display:none !important}
.ctq-modal-card{cursor:default}


/* ---- Opt-in text fields (v0.17.0) ---- */
.ctq-reveal{margin:.4rem 0 .9rem}
.ctq-reveal-toggle{margin-bottom:0}
.ctq-reveal-toggle:has(input:checked){border-color:var(--indigo);background:rgba(42,47,156,.05)}
.ctq-reveal-box{margin:.55rem 0 0;padding:.85rem .9rem;border:1px solid #d7dae8;border-left:3px solid var(--red);
  border-radius:9px;background:var(--paper);animation:ctqFade .2s ease}
.ctq-reveal-box .ctq-field{margin-bottom:0}
.ctq-reveal-box textarea{background:#fff}
.ctq-wrap .ctq-reveal-box[hidden]{display:none !important}


/* ---- Option group titles (v0.17.3) ----
   The <legend> on each image/swatch/radio group was the same small gray as the
   field micro-labels, so groups ran together. Now: darker, heavier, larger, with
   the same red underline the product-page section headings use. */
.ctq-form .ctq-fieldset > .ctq-label{
  display:inline-block;
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.25;
  color:var(--navy);
  padding:0 0 .38rem;
  margin:0 0 .75rem;
  border-bottom:2px solid var(--red);
}
/* more air between groups so each title clearly owns what's under it */
.ctq-form .ctq-fieldset{margin:1.5rem 0 .3rem}
.ctq-form .ctq-fieldset:first-of-type{margin-top:.5rem}
.ctq-form .ctq-imgset,.ctq-form .ctq-swset{margin:1.5rem 0 .3rem}


/* ---- Field spacing (v0.17.3) ---- */
.ctq-form .ctq-row{margin-bottom:.2rem}
.ctq-form .ctq-row .ctq-field{margin-bottom:1.15rem}
.ctq-form .ctq-radio{padding:.62rem .8rem;margin-bottom:.5rem}
.ctq-reveal-box .ctq-field{margin-bottom:0}
.ctq-form .ctq-qty{margin-bottom:0}


/* ---- "Clear" control on single-choice groups (v0.17.4) ----
   Only applies once JS has wrapped the legend text; without JS the legend keeps
   its plain inline-block + underline treatment. */
.ctq-form .ctq-fieldset > .ctq-label.has-clear{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  width:100%;border-bottom:0;padding-bottom:0}
.ctq-form .ctq-fieldset > .ctq-label.has-clear .ctq-legend-text{
  display:inline-block;padding-bottom:.38rem;border-bottom:2px solid var(--red)}
.ctq-clear{
  flex:none;background:none;border:0;padding:0 0 .38rem;cursor:pointer;
  font-family:inherit;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);line-height:1.3;
  transition:color .15s ease}
.ctq-clear:hover,.ctq-clear:focus{color:var(--red);text-decoration:underline}
.ctq-clear[hidden]{display:none}


/* ---- Opt-in text tiles (v0.18.0) ----
   I.D. Plate / Custom Stencil now read as image options. The text box is a sibling
   under the grid rather than nested in the label, so ticking a tile can't be
   swallowed by a click landing inside the revealed box. */
.ctq-revealset{display:block;margin:0 0 1.15rem}
.ctq-revgrid{margin-bottom:0}
.ctq-revealset .ctq-reveal-box{margin-top:.9rem}
.ctq-revealset .ctq-reveal-box[hidden]{display:none}


/* ---- Search results page (v0.19.0) ----
   Reuses the shop archive's hero + card grid; these are the extra pieces:
   the in-hero search bar and the empty state. */
.ctp-searchbar{
  display:flex;align-items:center;gap:.6rem;max-width:620px;margin:1.6rem 0 0;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  border-radius:12px;padding:.35rem .35rem .35rem .9rem;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .15s ease,box-shadow .15s ease}
.ctp-searchbar:focus-within{border-color:rgba(255,255,255,.62);
  box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.ctp-searchbar svg{width:19px;height:19px;flex:none;color:#AEB4D4}
.ctp-searchbar input[type=search]{
  flex:1;min-width:0;border:0 !important;outline:0 !important;background:transparent !important;
  box-shadow:none !important;font-family:inherit;font-size:1rem;font-weight:500;
  color:#fff !important;padding:.72rem 0}
.ctp-searchbar input[type=search]::placeholder{color:#9AA1C4}
.ctp-searchbar input[type=search]::-webkit-search-cancel-button{display:none}
.ctp-searchbar button{
  flex:none;cursor:pointer;border:0;border-radius:9px;
  background:var(--red,#d1202f);color:#fff !important;
  font-family:inherit;font-weight:600;font-size:.9rem;padding:.7rem 1.2rem;transition:.18s ease}
.ctp-searchbar button:hover{background:var(--red2,#b21826)}

/* Empty state — shared card (search page + shop archive).
   Hardened against theme CSS: every var() carries a literal fallback and the
   anchor visuals are pinned with !important. Divi's global link styles were
   stripping the pill backgrounds/borders on the live site while the plain
   text rules survived — same "link-color wars" as the page sections. */
.ctp-noresults{
  background:#fff !important;border:1px solid var(--line,#e5e7f0);border-radius:16px;
  padding:2.4rem 2rem;max-width:760px;margin:0 auto;text-align:center;
  box-shadow:0 10px 30px rgba(16,20,37,.06)}
.ctp-noresults-code{display:inline-block;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red,#d1202f) !important;
  background:rgba(209,32,47,.08);border:1px solid rgba(209,32,47,.24);
  border-radius:3px;padding:5px 10px;margin-bottom:1rem}
.ctp-noresults h2{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;
  color:var(--navy,#0d1330) !important;margin:0 0 .7rem}
.ctp-noresults p{color:var(--slate,#4a5169);font-size:.98rem;line-height:1.65;margin:0 auto;max-width:52ch}
.ctp-noresults-terms{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.6rem 0 0}
.ctp-noresults-terms a,
.ctp-noresults-terms a:link,
.ctp-noresults-terms a:visited{
  display:inline-block;padding:.45rem .9rem !important;border-radius:20px !important;
  background:var(--paper,#f5f6fb) !important;border:1px solid var(--line,#e5e7f0) !important;
  color:var(--navy,#0d1330) !important;font-size:.85rem;font-weight:600;
  text-decoration:none !important;transition:.15s ease}
.ctp-noresults-terms a:hover{background:var(--navy,#0d1330) !important;
  color:#fff !important;border-color:var(--navy,#0d1330) !important}
.ctp-noresults-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.8rem 0 0}
.ctp-noresults-cta a,
.ctp-noresults-cta a:link,
.ctp-noresults-cta a:visited{display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.4rem !important;border-radius:10px !important;font-weight:600;font-size:.93rem;
  text-decoration:none !important;transition:.18s ease}
.ctp-noresults-cta a *{color:inherit !important}
.ctp-noresults-cta .ctp-btn-red,
.ctp-noresults-cta .ctp-btn-red:link,
.ctp-noresults-cta .ctp-btn-red:visited{background:var(--red,#d1202f) !important;
  background-image:none !important;color:#fff !important;border:0 !important;
  box-shadow:0 6px 18px rgba(209,32,47,.30)}
.ctp-noresults-cta .ctp-btn-red:hover{background:var(--red2,#b21826) !important;transform:translateY(-1px)}
.ctp-noresults-cta .ctp-btn-ghost-dark,
.ctp-noresults-cta .ctp-btn-ghost-dark:link,
.ctp-noresults-cta .ctp-btn-ghost-dark:visited{background:#fff !important;
  background-image:none !important;color:var(--navy,#0d1330) !important;
  border:1px solid var(--line,#e5e7f0) !important}
.ctp-noresults-cta .ctp-btn-ghost-dark:hover{border-color:var(--navy,#0d1330) !important;transform:translateY(-1px)}

@media (max-width:560px){
  .ctp-searchbar{flex-wrap:wrap}
  .ctp-searchbar button{width:100%}
  .ctp-noresults{padding:1.8rem 1.2rem}
}


/* ---- Controlled-drawing notice (v0.19.1) ----
   Replaces the "Add a Drawing" button when the customer says yes, so the form
   never looks like a place to put a controlled document. */
.ctq-secure{display:flex;gap:.75rem;align-items:flex-start;
  margin:.2rem 0 0;padding:.85rem 1rem;border-radius:10px;
  background:rgba(209,32,47,.06);border:1px solid rgba(209,32,47,.28);
  border-left:3px solid var(--red,#d1202f)}
.ctq-secure[hidden]{display:none}
.ctq-secure-ico{flex:none;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:rgba(209,32,47,.12);color:var(--red,#d1202f)}
.ctq-secure-ico svg{width:16px;height:16px}
.ctq-secure p{margin:0;font-size:.86rem;line-height:1.55;color:var(--slate,#4a5169)}
.ctq-secure p b{display:block;color:var(--navy,#0d1330);font-weight:700;margin-bottom:.15rem}


/* ============================================================
   "By Size" dropdown (v0.20.1)
   Lives in the filter bar; the rail is gone so the grid runs full width.
   ============================================================ */
.ctp-filter-size{position:relative}

.ctp-sizedrop{position:relative}
.ctp-sizedrop > summary{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  padding:.62rem .85rem;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-family:inherit;font-size:.92rem;color:var(--ink);white-space:nowrap;
  transition:border-color .15s ease,box-shadow .15s ease}
.ctp-sizedrop > summary::-webkit-details-marker{display:none}
.ctp-sizedrop > summary:hover{border-color:#c2c7dd}
.ctp-sizedrop[open] > summary{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(42,47,156,.12)}
.ctp-sizedrop-caret{flex:none;margin-left:auto;width:8px;height:8px;
  border-right:2px solid var(--slate3);border-bottom:2px solid var(--slate3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.ctp-sizedrop[open] > summary .ctp-sizedrop-caret{transform:rotate(-135deg) translate(-2px,-2px)}

.ctp-sizedrop-panel{
  position:absolute;z-index:60;top:calc(100% + 8px);right:0;
  width:max(340px,100%);max-height:min(78vh,720px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 50px rgba(16,20,37,.20);padding:1.1rem 1.2rem 1.3rem}
/* the panel is a sibling of <summary>; make sure dragging a handle near the top
   edge can never register as a click on the summary and collapse the dropdown */
.ctp-sizedrop-panel{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ctp-sizedrop-note{margin:0 0 1rem;font-size:.76rem;line-height:1.5;color:var(--slate3)}

/* ---- Exterior / Interior segmented toggle ----
   One set of sliders at a time: the pair stacked together read as one confusing
   wall of controls. CSS drives the swap via :has(), so it works before the JS
   runs; browsers without :has() simply show both sets, which is the old layout. */
.ctp-dimmode{display:flex;margin:0 0 1.1rem;background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.ctp-dimmode label{flex:1;position:relative;cursor:pointer}
.ctp-dimmode input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ctp-dimmode span{display:flex;align-items:center;justify-content:center;
  padding:.5rem .6rem;border-radius:7px;
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;font-size:.88rem;color:var(--slate);
  transition:background .15s ease,color .15s ease}
.ctp-dimmode label:hover span{color:var(--navy)}
.ctp-dimmode input:checked + span{background:var(--navy);color:#fff;
  box-shadow:0 2px 8px rgba(13,19,48,.25)}
.ctp-dimmode input:focus-visible + span{outline:2px solid var(--indigo);outline-offset:1px}

/* One set visible at a time. Written as "hide everything that is not the
   chosen set" so adding a fourth measuring set later needs one line, not a
   grid of pairs. front.js also sets [hidden] on the same elements, which is
   what carries browsers without :has(). */
.ctp-sizedrop-panel:has(.ctp-dimmode input[value="u"]:checked)   .ctp-sizedrop-set:not(.ctp-set-u){display:none}
.ctp-sizedrop-panel:has(.ctp-dimmode input[value="ext"]:checked) .ctp-sizedrop-set:not(.ctp-set-ext){display:none}
.ctp-sizedrop-panel:has(.ctp-dimmode input[value="int"]:checked) .ctp-sizedrop-set:not(.ctp-set-int){display:none}
.ctp-sizedrop-set[hidden]{display:none}

/* ---- one dual-range row ---- */
.ctp-dim{margin:0 0 1.3rem}
.ctp-dim:last-child{margin-bottom:0}
.ctp-dim-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin:0 0 .5rem}
.ctp-dim-label{font-size:.82rem;font-weight:600;color:var(--ink)}
.ctp-dim-read{font:700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--indigo)}
.ctp-dim-read output{font:inherit}

.ctp-dim-track{position:relative;height:24px}
.ctp-dim-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;
  transform:translateY(-50%);background:#E2E5F0;border-radius:4px}
.ctp-dim-fill{position:absolute;top:50%;height:4px;transform:translateY(-50%);
  background:var(--indigo);border-radius:4px;
  left:var(--f-lo,0%);right:calc(100% - var(--f-hi,100%))}

.ctp-dim-track input[type=range]{
  position:absolute;left:0;top:0;width:100%;height:24px;margin:0;padding:0;
  background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.ctp-dim-track input[type=range]:focus{outline:none}
.ctp-dim-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;cursor:grab;
  width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--indigo);box-shadow:0 2px 6px rgba(16,20,37,.25)}
.ctp-dim-track input[type=range]::-moz-range-thumb{
  pointer-events:auto;cursor:grab;
  width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--indigo);box-shadow:0 2px 6px rgba(16,20,37,.25)}
.ctp-dim-track input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--red);outline-offset:2px}
.ctp-dim-track input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--red);outline-offset:2px}

.ctp-dim-ends{display:flex;justify-content:space-between;margin:.3rem 0 0;
  font-size:.68rem;color:var(--slate3)}

/* the size dropdown goes full-width on small screens (shop filter bar) */
@media(max-width:640px){
  .ctp-filter-size{width:100%}
  .ctp-sizedrop > summary{width:100%}
  .ctp-sizedrop-panel{left:0;right:auto;width:auto}
}

/* ---- grouped results ---- */
.ctp-group-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  margin:0 0 1.2rem;padding-bottom:.7rem;border-bottom:2px solid var(--line)}
.ctp-group-head h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  font-weight:700;font-size:1.4rem;line-height:1;color:var(--navy) !important;margin:0}
.ctp-group-head span{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate3)}
.ctp-group{margin:0 0 3rem}
.ctp-group:last-child{margin-bottom:0}
.ctp-group-empty{color:var(--slate3);font-size:.92rem;margin:0}

/* ---- Required-field reporting (v0.25.0) ----------------------------------
   The little red asterisk is enough to warn, not enough to accuse. When a
   question is actually missing an answer it gets a red rule down its left
   edge, a tinted panel and a line of plain English underneath, so it is
   obvious at a glance which one the form is waiting on. */
/* No negative margins here. Bleeding the panel outward looked tidier on a
   full-width question and overlapped the neighbour on the two-column rows
   (Name/Company, Email/Phone), covering the label next to it. The panel stays
   inside the field's own box. */
.ctq-bad{
  position:relative;
  box-sizing:border-box;
  background:#FEF4F5;
  border-left:3px solid var(--red,#D1202F);
  border-radius:8px;
  padding:.6rem .75rem .65rem;
  outline:none;
  animation:ctq-bad-in .22s ease both}
@keyframes ctq-bad-in{from{background:#FBE3E6}to{background:#FEF4F5}}
@media(prefers-reduced-motion:reduce){.ctq-bad{animation:none}}

/* the field itself, so the eye lands on the control and not just the panel */
.ctq-bad input[type=text],.ctq-bad input[type=email],.ctq-bad input[type=tel],
.ctq-bad input[type=number],.ctq-bad textarea,.ctq-bad select{
  border-color:var(--red,#D1202F);
  box-shadow:0 0 0 3px rgba(209,32,47,.12)}

/* choice tiles and chips: ring the whole grid rather than 1px inputs nobody
   can see, since that invisible input is what made this hard to spot */
.ctq-bad .ctq-imggrid,.ctq-bad .ctq-swgrid{
  outline:1px dashed rgba(209,32,47,.5); outline-offset:6px; border-radius:8px}

.ctq-bad > legend,.ctq-bad > .ctq-label{color:#A8121F !important}

.ctq-fielderr{
  display:block; margin:.45rem 0 0;
  font-size:.82rem; font-weight:600; line-height:1.35;
  color:#A8121F}
.ctq-fielderr::before{content:"!\00a0"; font-weight:800}

@media(max-width:620px){
  .ctq-bad{padding:.55rem .6rem .6rem}
}

/* ---- File upload field (v0.28.0) ---------------------------------------- */
.ctq-filefield .ctq-file{
  width:100%;padding:.7rem .8rem;border:1px dashed #C3CAE4;border-radius:9px;
  background:#FAFBFF;font-size:.9rem;color:var(--ink,#101425);cursor:pointer}
.ctq-filefield .ctq-file:hover{border-color:var(--indigo,#272d92);background:#F5F7FF}
.ctq-filefield .ctq-file::file-selector-button{
  margin-right:.8rem;padding:.45rem .8rem;border:1px solid var(--indigo,#272d92);
  border-radius:6px;background:#fff;color:var(--indigo,#272d92);
  font-weight:700;font-size:.82rem;cursor:pointer}
.ctq-filefield .ctq-file::file-selector-button:hover{background:var(--indigo,#272d92);color:#fff}
.ctq-filehint{display:block;margin:.45rem 0 0;font-size:.8rem;line-height:1.5;color:var(--slate,#4A5169)}
.ctq-filehint b{color:#A8121F}

/* Visually hidden but available to screen readers. Not display:none, not
   visibility:hidden — both remove the element from the accessibility tree,
   which is the opposite of what a hidden LABEL is for. */
.ctp-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Per-option follow-up questions (v0.37.0) ----
   The cell only exists on options that ask something, so tiles without questions
   keep their original markup and their original place in the grid. */
.ctq-imgcell{display:flex;flex-direction:column;min-width:0}
.ctq-imgcell > .ctq-imgopt{flex:0 0 auto}
.ctq-asks{margin:.45rem 0 0;padding:.6rem .7rem;border-radius:8px;
  background:rgba(39,45,146,.05);border:1px solid rgba(39,45,146,.16)}
.ctq-asks[hidden]{display:none}
.ctq-ask + .ctq-ask{margin-top:.5rem}
.ctq-ask-q{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate3,#6b7288);margin:0 0 .25rem}
.ctq-asks select.ctq-ask-a{width:100%;max-width:100%;padding:.42rem .55rem;
  font-size:.9rem;border:1px solid var(--line,#E5E7F0);border-radius:6px;background:#fff}
.ctq-asks select.ctq-ask-a:focus{outline:2px solid var(--indigo,#272D92);outline-offset:1px}

/* ---- Show/hide rules (v0.39.0) --------------------------------------------
   The UA's [hidden]{display:none} is a bare type-less rule, so every author
   rule here outranks it — .ctq-imgopt{display:block}, .ctq-radio{display:flex}
   and .ctq-field{display:block} would all keep a "hidden" element on screen.
   This is the rule that actually makes it disappear. */
.ctq-wrap [data-ctq-off]{display:none !important}

/* ============================================================
   Brand landing hero (Products → Brands → Edit hero fields)
   A richer /products/-style header on top of the brand archive
   product grid. Falls back to the plain hero when a brand has
   no hero content filled in.
   ============================================================ */
/* ---- Brand hero (v0.42.0) --------------------------------------------------
   Matched to the /products/ landing hero rather than the plain archive band:
   the same layered lighting, the same pink eyebrow and accented headline, the
   same pair of buttons and the same three-fact proof row. The case sits in the
   circular spotlight further down this file.

   The lighting is three stacked layers, and the order matters: warm/cool pools
   first so they read as light in the room, a fine diagonal hatch over them for
   texture, then a vignette to stop the corners competing with the case. */
.ctp-brand-hero{
  padding:3.6rem 0 4.6rem;
  background:
    radial-gradient(58% 90% at 74% 46%,rgba(76,99,255,.30) 0%,transparent 62%),
    radial-gradient(60% 120% at 6% 96%,rgba(209,32,47,.20) 0%,transparent 62%),
    linear-gradient(180deg,#141C46 0%,#111838 52%,#0D1330 100%);
}
.ctp-brand-hero::before{
  content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0;opacity:.85;
  background:
    repeating-linear-gradient(114deg,rgba(143,160,232,.05) 0 2px,transparent 2px 190px),
    radial-gradient(circle,rgba(160,175,240,.14) 1px,transparent 1.4px);
  background-size:auto,26px 26px;background-position:center;
}
/* An optional per-brand background photo, faded in from the left so the copy
   never has to fight it. Only present when the term has one set. */
.ctp-brand-hero[style*="--ctp-brand-img"]::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--ctp-brand-img) center/cover no-repeat;opacity:.22;
  mask-image:linear-gradient(90deg,transparent,#000 40%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);
}
/* Without a photo the vignette does that job instead. */
.ctp-brand-hero:not([style*="--ctp-brand-img"])::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(130% 100% at 50% 50%,transparent 44%,rgba(13,19,48,.55) 100%);
}

/* Headline accent — the same pink tail as the Products hero. */
.ctp-brand-hero .ctp-title em{font-style:normal;color:#FF8F97 !important}

/* Buttons. Every link state is spelled out because Divi colours anchors with
   !important, and a half-declared button turns blue on :visited only. */
.ctp-brand-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.5rem 0 0}
.ctp-brand-actions .ctp-btn{
  display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.45rem;border-radius:10px;
  font-weight:700;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none !important;transition:.18s ease}
.ctp-brand-actions .ctp-btn-red,
.ctp-brand-actions .ctp-btn-red:link,.ctp-brand-actions .ctp-btn-red:visited,
.ctp-brand-actions .ctp-btn-red:hover,.ctp-brand-actions .ctp-btn-red:focus,
.ctp-brand-actions .ctp-btn-red:active{
  background:#D1202F !important;color:#fff !important;
  box-shadow:0 12px 30px rgba(209,32,47,.4)}
.ctp-brand-actions .ctp-btn-red *{color:#fff !important}
.ctp-brand-actions .ctp-btn-red:hover{background:#B31A28 !important;transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(209,32,47,.5)}
.ctp-brand-actions .ctp-btn-ghost,
.ctp-brand-actions .ctp-btn-ghost:link,.ctp-brand-actions .ctp-btn-ghost:visited,
.ctp-brand-actions .ctp-btn-ghost:hover,.ctp-brand-actions .ctp-btn-ghost:focus,
.ctp-brand-actions .ctp-btn-ghost:active{
  background:rgba(255,255,255,.04) !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.34)}
.ctp-brand-actions .ctp-btn-ghost *{color:#fff !important}
.ctp-brand-actions .ctp-btn-ghost:hover{background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.ctp-brand-actions .ctp-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Proof row — three facts that never go stale. */
.ctp-brand-proof{display:flex;gap:2.4rem;flex-wrap:wrap;margin:2rem 0 0;
  padding-top:1.5rem;border-top:1px solid rgba(143,160,232,.22)}
.ctp-brand-proof div{display:flex;flex-direction:column;gap:.15rem}
.ctp-brand-proof b{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;
  font-size:1.35rem;line-height:1;color:#fff}
.ctp-brand-proof span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#9aa2c8}
.ctp-brand-hero .ctp-wrap{position:relative;z-index:1}
.ctp-brand-hero-in{display:flex;align-items:center;gap:2.4rem;justify-content:space-between}
.ctp-brand-hero-text{flex:1 1 auto;max-width:760px}
.ctp-brand-tagline{
  font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-weight:600;font-size:.86rem;margin:0 0 .6rem;
  color:#FF8F97;
}
.ctp-brand-hero .ctp-title{margin:0 0 .8rem}
.ctp-brand-intro{color:#C7CCE4;font-size:1.06rem;line-height:1.68;max-width:56ch}
.ctp-brand-intro b,.ctp-brand-intro strong{color:#fff;font-weight:700}
.ctp-brand-intro p{margin:0 0 .7rem}
.ctp-brand-intro p:last-child{margin-bottom:0}
.ctp-brand-hero .ctp-hero-sub{margin-top:1rem}
.ctp-brand-hero-logo{flex:0 0 auto;width:180px;max-width:34%}
.ctp-brand-hero-logo img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
@media(max-width:820px){
  .ctp-brand-hero-in{flex-direction:column-reverse;align-items:flex-start;gap:1.4rem}
  .ctp-brand-hero-logo{width:150px}
}

/* Brand hero — representative case in a circular navy spotlight
   (same treatment as the Products landing hero). */
.ctp-brand-hero-figure{
  position:relative;flex:0 0 auto;width:min(380px,40%);aspect-ratio:1/1;
  display:grid;place-items:center;margin:0}
.ctp-brand-hero-figure::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%,rgba(120,130,255,.28) 0%,rgba(42,47,156,.16) 42%,transparent 68%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.05),transparent 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ctp-brand-hero-figure::after{
  content:"";position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  width:56%;height:5%;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(9px)}
.ctp-brand-hero-figure img{
  position:relative;z-index:1;max-width:88%;max-height:88%;width:auto;height:auto;
  object-fit:contain;filter:drop-shadow(0 22px 34px rgba(0,0,0,.45));
  animation:ctp-brand-float 7s ease-in-out infinite}
@keyframes ctp-brand-float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){
  .ctp-brand-hero-figure img{animation:none}
  .ctp-brand-actions .ctp-btn{transition:none}
}
.ctp-brand-hero-figure.is-ph img{opacity:.5;filter:none}
.ctp-brand-hero-figmark{
  position:absolute;z-index:2;right:4%;bottom:2%;max-width:34%;max-height:26%;
  opacity:.92;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
@media(max-width:820px){
  .ctp-brand-hero-figure{width:min(300px,72%)}
}

/* ============================================================
   Shop by Series — child-brand tile grid on a brand archive
   (Products-page look, rendered by CTP_Brand::series())
   ============================================================ */
.ctp-series{background:#f5f6fb;border-top:1px solid #e5e7f0;padding:3.2rem 0 3.6rem}
.ctp-series .ctp-wrap{max-width:1400px}
.ctp-series-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.6rem;flex-wrap:wrap;margin:0 0 1.8rem}
.ctp-series-eyebrow{display:block;font-family:'Barlow Condensed','Inter',sans-serif;
  text-transform:uppercase;letter-spacing:.2em;font-weight:600;font-size:.8rem;color:#d1202f;margin:0 0 .35rem}
.ctp-series-title{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  font-weight:700;line-height:1.05;font-size:clamp(1.6rem,3vw,2.3rem);color:#1c2864;margin:0}
.ctp-series-sub{color:#4a5169;font-size:.98rem;line-height:1.55;margin:.4rem 0 0;max-width:52ch}

/* "Browse all {brand}" link (right of the header) */
.ctp-series-all{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding-bottom:.25rem;border-bottom:2px solid #d1202f;color:#2a2f9c;transition:color .15s ease}
.ctp-series-all:hover{color:#d1202f}

/* tile grid — /products/-style: a 2x2 featured tile (most-stocked series) + singles.
   Three columns: a 2x2 featured plus five singles fills 3x3 exactly, which is the
   common brand case (Pelican's six series). */
.ctp-series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;grid-auto-rows:1fr}
.ctp-series-tile:nth-of-type(1){grid-column:span 2;grid-row:span 2}
.ctp-series-tile:nth-of-type(1) .ctp-series-img{flex:1 1 auto;aspect-ratio:auto;min-height:280px}
.ctp-series-tile:nth-of-type(1) .ctp-series-body{flex:0 0 auto;padding:1.4rem 1.6rem 1.6rem}
.ctp-series-tile:nth-of-type(1) .ctp-series-name{font-size:1.6rem}
.ctp-series-tile:nth-of-type(1) .ctp-series-blurb{font-size:.95rem;max-width:44ch}
.ctp-series-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px;background:#fff;border:1px solid #dfe3f0;text-decoration:none;
  box-shadow:0 1px 2px rgba(16,20,37,.05),0 12px 26px rgba(16,20,37,.08);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ctp-series-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:3;
  background:linear-gradient(90deg,#d1202f,#dfe6f7 48%,#4c63ff);
  clip-path:inset(0 calc(100% - 60px) 0 0);transition:clip-path .38s ease}
.ctp-series-tile:hover::before,.ctp-series-tile:focus-visible::before{clip-path:inset(0 0 0 0)}
.ctp-series-tile:nth-of-type(even)::before{background:linear-gradient(90deg,#272d92,#dfe6f7 48%,#d1202f)}
.ctp-series-tile:hover{transform:translateY(-6px);border-color:#c6cde6;
  box-shadow:0 2px 4px rgba(16,20,37,.07),0 26px 50px rgba(16,20,37,.16)}
.ctp-series-img{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;
  background:linear-gradient(160deg,#e4e8f4,#eff1f8 52%,#dfe4f2)}
.ctp-series-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .5s ease}
.ctp-series-tile:hover .ctp-series-img img{transform:scale(1.06)}
.ctp-series-img img.ctp-img-ph{object-fit:contain;padding:1.4rem;background:#fff}
.ctp-series-body{display:flex;flex-direction:column;flex:1 1 auto;padding:1rem 1.15rem 1.15rem}
.ctp-series-name{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  font-weight:700;letter-spacing:.02em;font-size:1.18rem;line-height:1.12;color:#1c2864;margin:0 0 .35rem}
.ctp-series-blurb{color:#4a5169;font-size:.86rem;line-height:1.5;margin:0 0 .8rem}
.ctp-series-go{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#2a2f9c}
.ctp-series-go span{transition:transform .2s ease}
.ctp-series-tile:hover .ctp-series-go span{transform:translateX(4px)}

@media(max-width:1040px){
  .ctp-series-grid{grid-template-columns:repeat(2,1fr)}
  .ctp-series-tile:nth-of-type(1){grid-column:span 2;grid-row:span 1}
  .ctp-series-tile:nth-of-type(1) .ctp-series-img{aspect-ratio:16/8;flex:none;min-height:0}
}
@media(max-width:560px){
  .ctp-series-grid{grid-template-columns:1fr}
  .ctp-series-tile:nth-of-type(1){grid-column:span 1}
  .ctp-series-tile:nth-of-type(1) .ctp-series-img{aspect-ratio:16/11}
  .ctp-series-tile:nth-of-type(1) .ctp-series-name{font-size:1.18rem}
  .ctp-series-head{gap:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  .ctp-series-tile,.ctp-series-img img,.ctp-series-go span,.ctp-series-tile::before{transition:none}
  .ctp-series-tile:hover{transform:none}
  .ctp-series-tile:hover .ctp-series-img img{transform:none}
}