/* ============================================================
   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);box-shadow:0 4px 12px rgba(16,20,37,.10)}
.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:none;transition:.15s ease}
.ctq-submit:hover{background:var(--red2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(209,32,47,.28)}
.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:none}
.ctp-noresults-cta .ctp-btn-red:hover{background:var(--red2,#b21826) !important;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(209,32,47,.30)}
.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);
  box-shadow:0 6px 18px rgba(16,20,37,.12)}

@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}
/* U-size-only brand (Hardigg …): no tabs, just the U slider (v0.58.0). */
.ctp-sizedrop.is-u-only .ctp-dimmode{display:none}
.ctp-sizedrop.is-u-only .ctp-sizedrop-set:not(.ctp-set-u){display:none}
/* Every other brand: no U at all (v0.59.0). The U tab and set stay in the page
   (hidden) so picking Hardigg can switch to them; with interior search off the
   only thing left is Inches, so the tab bar goes too. */
.ctp-sizedrop:not(.is-u-only) .ctp-dimmode .ctp-mode-u,
.ctp-sizedrop:not(.is-u-only) .ctp-set-u{display:none}
.ctp-sizedrop:not(.is-u-only):not(.has-int) .ctp-dimmode{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. Same treatment as the Custom
   Solutions hero (v0.61.0): the photo at full strength under a flat 78% #0D1330
   overlay — no fade, no mask, no faded opacity — so it reads as a clear image
   behind the copy instead of a muted wash. Only present when the term has one. */
.ctp-brand-hero[style*="--ctp-brand-img"]::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(13,19,48,.78),rgba(13,19,48,.78)),
    var(--ctp-brand-img) center/cover no-repeat;
}
/* the dot/line pattern belongs to the no-photo version; over a photo it is noise */
.ctp-brand-hero[style*="--ctp-brand-img"]::before{display:none}
/* 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:#D1202F !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:none}
.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);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.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:#D1202F;
}
.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{
  /* v0.62.0: bigger and planted. No bobbing animation, no glowing halo disc and
     no floor-shadow ellipse: together those made the case look like it was
     floating. The photo now sits as a straight product shot. */
  position:relative;flex:0 0 auto;width:min(560px,46%);
  display:flex;align-items:center;justify-content:center;margin:0}
.ctp-brand-hero-figure img{
  position:relative;z-index:1;display:block;
  width:100%;max-width:100%;height:auto;max-height:400px;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.40))}
@media(prefers-reduced-motion:reduce){
  .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(440px,100%)}
}

/* ============================================================
   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}
/* A brand with only ONE series tile (Shell): the featured tile spans two rows, but with
   no other tiles those rows collapse to its own content and it came out half height.
   Force it to the height it has on the other brand pages: two normal tiles (image at
   16:11 of a column + ~160px body) plus the gap. cqw = the grid's own width (v0.67.0). */
.ctp-series-grid{container-type:inline-size}
@media(min-width:1041px){
  .ctp-series-grid:not(.ctp-series-grid--group) > .ctp-series-tile:only-of-type{
    min-height:calc((100cqw - 2.6rem) / 3 * 11 / 8 + 320px + 1.3rem)}
}
/* Section break inside the Shop-by-Series grid (v0.66.0), e.g. "Rackmount Cases".
   A full-width heading between two grids: the house red|blue slash, the title,
   then a hairline running out to the right edge. */
.ctp-series-group{display:flex;align-items:center;gap:1rem;margin:3.2rem 0 1.6rem}
.ctp-series-group-mark{flex:none;width:8px;height:38px;border-radius:2px;
  background:linear-gradient(135deg,#d1202f 0 50%,#272d92 50% 100%)}
.ctp-series-group-text{flex:none;min-width:0}
.ctp-series .ctp-series-group-title{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.9rem;line-height:1;letter-spacing:.01em;color:#1c2864;margin:0;padding:0}
.ctp-series .ctp-series-group-sub{color:#4a5169;font-size:.92rem;line-height:1.45;margin:.35rem 0 0;padding:0}
.ctp-series-group-rule{flex:1 1 auto;height:1px;min-width:40px;background:linear-gradient(90deg,#c9cfe3,rgba(201,207,227,0))}
.ctp-series-grid:not(.ctp-series-grid--group) > .ctp-series-tile:nth-of-type(1){grid-column:span 2;grid-row:span 2}
.ctp-series-grid:not(.ctp-series-grid--group) > .ctp-series-tile:nth-of-type(1) .ctp-series-img{flex:1 1 auto;aspect-ratio:auto;min-height:280px}
.ctp-series-grid:not(.ctp-series-grid--group) > .ctp-series-tile:nth-of-type(1) .ctp-series-body{flex:0 0 auto;padding:1.4rem 1.6rem 1.6rem}
.ctp-series-grid:not(.ctp-series-grid--group) > .ctp-series-tile:nth-of-type(1) .ctp-series-name{font-size:1.6rem}
.ctp-series-grid:not(.ctp-series-grid--group) > .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 0 50%,#4c63ff 50% 100%);
  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 0 50%,#d1202f 50% 100%)}
.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-grid:not(.ctp-series-grid--group) > .ctp-series-tile:nth-of-type(1){grid-column:span 2;grid-row:span 1}
  .ctp-series-grid:not(.ctp-series-grid--group) > .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-group{margin:2.4rem 0 1.2rem;gap:.75rem}
  .ctp-series-group-mark{height:30px;width:6px}
  .ctp-series .ctp-series-group-title{font-size:1.5rem}
  .ctp-series-grid:not(.ctp-series-grid--group) > .ctp-series-tile:nth-of-type(1){grid-column:span 1}
  .ctp-series-grid:not(.ctp-series-grid--group) > .ctp-series-tile:nth-of-type(1) .ctp-series-img{aspect-ratio:16/11}
  .ctp-series-grid:not(.ctp-series-grid--group) > .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}
}

/* ---------- Pinned product strip (v0.56) ----------
   Slides down from the top once the product title has scrolled out of view, so the
   case being quoted stays named while the visitor works through the pinned form.
   Hidden with visibility (not display) so it can animate, and so its link drops out
   of the tab order while it is off-screen. --ctp-ab = the WP admin bar height when
   that bar is fixed (set by front.js); 0 for visitors. */
.ctp-pin{position:fixed;left:0;right:0;top:var(--ctp-ab,0px);z-index:9990;
  background:rgba(13,19,48,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:3px solid #D1202F;box-shadow:0 10px 28px rgba(13,19,48,.30);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  transform:translateY(calc(-100% - 6px));visibility:hidden;
  transition:transform .28s ease,visibility 0s linear .28s}
.ctp-pin.is-on{transform:none;visibility:visible;transition:transform .28s ease}
.ctp-pin-in{display:flex;align-items:center;gap:14px;min-height:64px;padding-top:9px;padding-bottom:9px}
.ctp-pin-img{flex:0 0 56px;height:46px;border-radius:8px;background:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ctp-pin-img img{width:100%;height:100%;object-fit:contain;padding:3px;display:block}
.ctp-pin-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ctp-pin-brand{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#B9C0DA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctp-pin-name{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.35rem;line-height:1.05;letter-spacing:.01em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctp-pin-chip{flex:0 0 auto;font-size:.8rem;font-weight:500;color:#E4E7F4;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.4rem .8rem}
.ctp-pin-chip b{color:#fff;font-weight:700}
/* the form sits beside the content on desktop, so the button is only for the stacked layout */
.ctp-pin-cta{display:none}
.ctp-pin a.ctp-pin-cta,.ctp-pin a.ctp-pin-cta:link,.ctp-pin a.ctp-pin-cta:visited,
.ctp-pin a.ctp-pin-cta:hover,.ctp-pin a.ctp-pin-cta:focus,.ctp-pin a.ctp-pin-cta:active{
  color:#fff !important;text-decoration:none !important}
.ctp-pin a.ctp-pin-cta{flex:0 0 auto;background:#D1202F;border-radius:9px;padding:.6rem .95rem;
  font-size:.85rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.ctp-pin a.ctp-pin-cta:hover{background:#B31A28}
.ctp-pin a.ctp-pin-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* keep the pinned quote form clear of the strip while it is showing */
.ctp-aside{transition:top .28s ease}
html.ctp-pin-on .ctp-aside{top:calc(var(--ctp-ab,0px) + var(--ctp-pin-h,67px) + 18px)}

@media(max-width:900px){
  .ctp-pin a.ctp-pin-cta{display:inline-block}
  .ctp-pin-chip{display:none}
  .ctp-pin-in{min-height:58px;gap:12px}
  .ctp-pin-img{flex-basis:48px;height:40px}
  .ctp-pin-name{font-size:1.15rem}
}
@media(prefers-reduced-motion:reduce){
  .ctp-pin,.ctp-pin.is-on,.ctp-aside{transition:none}
}


/* ============================================================
   Brand hero — Case Finder bar + proof row with quote (v0.71.0)
   Steven's mockup. Every colour and link state is pinned with
   !important where Divi would otherwise win (buttons, inputs).
   ============================================================ */
.ctp-bfind{
  /* The bar fills the hero's text column and reflows by its OWN width
     (container query), so it never pushes the column wider than the copy. */
  container-type:inline-size;margin:1.6rem 0 0;
  border:1px solid rgba(143,160,232,.24);border-radius:12px;
  background:
    linear-gradient(rgba(143,160,232,.05) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(143,160,232,.05) 1px,transparent 1px) 0 0/22px 22px,
    rgba(10,14,38,.48);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ctp-bfind-in{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem}
.ctp-bfind-ic{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:9px;
  color:#fff;background:rgba(209,32,47,.14);border:1px solid rgba(209,32,47,.45)}
.ctp-bfind-ic svg{display:block}
.ctp-bfind-ic svg path:last-child{stroke:#FF6B78}
.ctp-bfind-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.ctp-bfind-eyebrow{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:600;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:#FF5A68;line-height:1}
.ctp-bfind-title{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;font-size:1.12rem;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1.1}
.ctp-bfind-sub{font-size:.75rem;line-height:1.4;color:#B4BBDB}
.ctp-bfind-fields{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;min-width:0}
/* Grid, not flex (v0.71.4): each box lives in a fixed track, so nothing a theme does to
   input widths or font size (Divi) can push the bar wider than its column. */
.ctp-bfind-dims{display:grid;grid-template-columns:44px auto 44px auto 44px;align-items:center;column-gap:.38rem;min-width:0}
.ctp-bfind-dims > label{position:absolute}
.ctp-bfind-x{color:#7E87B3;font-size:.8rem;line-height:1}
.ctp-bfind input[type=text],
.ctp-bfind select{
  height:38px !important;margin:0 !important;border-radius:7px !important;
  border:1px dashed rgba(180,190,235,.38) !important;background:rgba(255,255,255,.04) !important;
  color:#fff !important;font:600 .9rem/1 'Inter',sans-serif !important;box-shadow:none !important;
  transition:border-color .15s ease,background .15s ease}
.ctp-bfind input[type=text]{width:100% !important;min-width:0 !important;max-width:100% !important;box-sizing:border-box !important;
  padding:0 .25rem !important;text-align:center}
.ctp-bfind input[type=text]::placeholder{color:#8F98C4;opacity:1;font-weight:600}
.ctp-bfind select{min-width:118px;max-width:100%;box-sizing:border-box !important;padding:0 2rem 0 .7rem !important;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#B4BBDB 50%),linear-gradient(135deg,#B4BBDB 50%,transparent 50%) !important;
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50% !important;background-size:5px 5px,5px 5px !important;background-repeat:no-repeat !important}
.ctp-bfind select option{color:#101425;background:#fff}
.ctp-bfind input[type=text]:hover,.ctp-bfind select:hover{border-color:rgba(200,208,245,.6) !important}
.ctp-bfind input[type=text]:focus,.ctp-bfind select:focus{outline:none;border-style:solid !important;
  border-color:#8FA0E8 !important;background:rgba(255,255,255,.08) !important}
.ctp-bfind-go,.ctp-bfind-go:hover,.ctp-bfind-go:focus,.ctp-bfind-go:active{
  display:inline-flex;max-width:100%;box-sizing:border-box;align-items:center;gap:.45rem;height:38px;margin:0;padding:0 1rem;
  border:0 !important;border-radius:8px !important;cursor:pointer;white-space:nowrap;
  font:700 .84rem/1 'Inter',sans-serif !important;letter-spacing:.01em;color:#fff !important;
  background:#D1202F !important;box-shadow:none;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.ctp-bfind-go:hover{background:#B31A28 !important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(209,32,47,.42)}
.ctp-bfind-go:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Size | U toggle (Hardigg) */
.ctp-bfind-toggle{display:inline-flex;margin-top:.35rem;padding:2px;border-radius:7px;
  background:rgba(255,255,255,.05);border:1px solid rgba(143,160,232,.26)}
.ctp-bfind-toggle label{position:relative;margin:0;cursor:pointer}
.ctp-bfind-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.ctp-bfind-toggle span{display:block;min-width:34px;padding:.34rem .6rem;border-radius:5px;text-align:center;
  font:700 .68rem/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#B4BBDB;
  transition:background .15s ease,color .15s ease}
.ctp-bfind-toggle label:hover span{color:#fff}
.ctp-bfind-toggle input:checked + span{background:#fff;color:#0D1330}
.ctp-bfind-toggle input:focus-visible + span{outline:2px solid #8FA0E8;outline-offset:1px}

/* Which mode is showing */
.ctp-bfind .ctp-bfind-uonly,.ctp-bfind .ctp-bfind-u{display:none}
.ctp-bfind[data-mode="u"] .ctp-bfind-size,.ctp-bfind[data-mode="u"] .ctp-bfind-dims{display:none}
.ctp-bfind[data-mode="u"] .ctp-bfind-uonly{display:inline}
.ctp-bfind[data-mode="u"] .ctp-bfind-u{display:block}

/* Empty submit: a short nudge instead of a dead click */
.ctp-bfind.is-empty input[type=text],.ctp-bfind.is-empty select{border-color:#FF5A68 !important;border-style:solid !important}
.ctp-bfind.is-empty .ctp-bfind-dims,.ctp-bfind.is-empty .ctp-bfind-u{animation:ctpBfNudge .32s ease}
@keyframes ctpBfNudge{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Proof row + the (smaller) quote button to its right */
.ctp-brand-foot{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(143,160,232,.22)}
.ctp-brand-foot .ctp-brand-proof{margin:0;padding:0;border:0}
.ctp-brand-quote,.ctp-brand-quote:link,.ctp-brand-quote:visited,
.ctp-brand-quote:hover,.ctp-brand-quote:focus,.ctp-brand-quote:active{
  display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.15rem;border-radius:9px !important;
  font:700 .8rem/1 'Inter',sans-serif !important;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none !important;color:#fff !important;background:#D1202F !important;border:0 !important;
  box-shadow:none;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.ctp-brand-quote *{color:#fff !important}
.ctp-brand-quote:hover{background:#B31A28 !important;transform:translateY(-1px);box-shadow:0 12px 28px rgba(209,32,47,.42)}
.ctp-brand-quote:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Not enough room for one row: fields drop under the text, aligned to it. */
@container (max-width:640px){
  .ctp-bfind-in{flex-wrap:wrap}
  .ctp-bfind-txt{flex:1 1 calc(100% - 60px)}
  .ctp-bfind-fields{flex:1 1 100%;padding-left:calc(40px + .85rem)}
}
/* Phone: everything full width, the three boxes share the row, button below. */
@container (max-width:440px){
  .ctp-bfind-in{padding:.85rem}
  .ctp-bfind-fields{padding-left:0;flex-wrap:wrap}
  .ctp-bfind-dims,.ctp-bfind-u{flex:1 1 100%;min-width:0}
  .ctp-bfind-dims{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}
  /* 16px stops iOS zooming the page when a box is tapped */
  .ctp-bfind input[type=text],.ctp-bfind select{height:44px !important;font-size:16px !important}
  .ctp-bfind select{width:100% !important;min-width:0}
  .ctp-bfind-go,.ctp-bfind-go:hover,.ctp-bfind-go:focus,.ctp-bfind-go:active{flex:1 1 100%;width:100%;height:44px;justify-content:center;white-space:normal;text-align:center}
}
@media(max-width:820px){
  /* The hero stacks here; let the copy column take the full width so the bar can. */
  .ctp-brand-hero-in > .ctp-brand-hero-text{align-self:stretch;width:100%;max-width:100%}
}
@media(max-width:560px){
  .ctp-brand-foot{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .ctp-bfind-go,.ctp-brand-quote{transition:none}
  .ctp-bfind.is-empty .ctp-bfind-dims,.ctp-bfind.is-empty .ctp-bfind-u{animation:none}
}

/* ============================================================
   Brand Case Finder — nothing in range, closest sizes (v0.71.0)
   ============================================================ */
.ctp-nearest{display:flex;align-items:center;gap:1rem;margin:0 0 1.4rem;padding:1.1rem 1.25rem;
  background:#fff;border:1px solid #e5e7f0;border-left:4px solid #D1202F;border-radius:12px}
.ctp-nearest-ic{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  color:#D1202F;background:#FDECEE}
.ctp-nearest-txt{flex:1 1 auto;min-width:0}
.ctp-nearest-title{margin:0 0 .25rem !important;padding:0 !important;font-family:'Barlow Condensed','Inter',sans-serif !important;
  font-weight:700 !important;font-size:1.3rem !important;line-height:1.15 !important;text-transform:uppercase;
  letter-spacing:.02em;color:#0D1330 !important}
.ctp-nearest-txt p{margin:0 !important;padding:0 !important;font-size:.92rem;line-height:1.55;color:#4a5169}
.ctp-nearest-txt b{color:#0D1330;font-weight:700}
.ctp-nearest-cta{flex:0 0 auto;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.ctp-nearest-quote,.ctp-nearest-quote:link,.ctp-nearest-quote:visited,.ctp-nearest-quote:hover,.ctp-nearest-quote:focus{
  display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.1rem;border-radius:9px !important;
  font:700 .8rem/1 'Inter',sans-serif !important;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none !important;color:#fff !important;background:#D1202F !important;box-shadow:none;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.ctp-nearest-quote *{color:#fff !important}
.ctp-nearest-quote:hover{background:#B31A28 !important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(209,32,47,.32)}
.ctp-nearest-back,.ctp-nearest-back:link,.ctp-nearest-back:visited{font-weight:600;font-size:.88rem;
  color:#2a2f9c !important;text-decoration:none !important;border-bottom:1px solid rgba(42,47,156,.3)}
.ctp-nearest-back:hover{color:#0D1330 !important;border-bottom-color:#0D1330}
@media(max-width:760px){
  .ctp-nearest{flex-wrap:wrap}
  .ctp-nearest-txt{flex:1 1 calc(100% - 60px)}
  .ctp-nearest-cta{flex:1 1 100%;padding-left:calc(44px + 1rem)}
}
@media(max-width:480px){.ctp-nearest-cta{padding-left:0}}

/* v0.73.0: small helper line under a field (e.g. "Company email only") */
.ctq-form .ctq-hint{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:#5B6278}