/* =============================================================================
   JFA design system - SHOP components (product page v2)
   Loaded after jfa-ds.css, only where the shop templates call jfa_ds_shop().
   Same tokens, same rules: no side accent bars, no heading underlines, cyan is
   for action, plate-yellow for the one "tab". Everything scoped under .hv2.
   ============================================================================= */

/* ---- top: title / gallery / buy box ---- */
.hv2 .pd-top{padding:26px 0 40px;background:#fff}
.hv2 .pd-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "gal" "buy";gap:18px}
.hv2 .pd-head{grid-area:head}
.hv2 .pd-gal{grid-area:gal;min-width:0}
.hv2 .pd-buy{grid-area:buy}
.hv2 .pd-head .kick{margin-bottom:8px}
.hv2 .pd-head h1{font-size:var(--h1-3);line-height:1.05}
.hv2 .pd-fits{display:block;margin-top:8px;font-family:'Open Sans',sans-serif;font-weight:600;
  text-transform:none;letter-spacing:0;font-size:15px;line-height:1.45;color:var(--ink2)}
@media (min-width:900px){
  .hv2 .pd-top{padding:40px 0 56px}
  .hv2 .pd-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    grid-template-areas:"gal head" "gal buy";grid-template-rows:auto 1fr;column-gap:44px;row-gap:14px}
  .hv2 .pd-gal{position:sticky;top:110px;align-self:start}
  .hv2 .pd-thumbs{flex-wrap:wrap;overflow:visible}
}

/* "added to your basket" and other WooCommerce notices */
.hv2 .pd-notices:empty{display:none}
.hv2 .pd-notices,html body .hv2 .pd-notices .woocommerce-notices-wrapper{display:block!important;float:none!important;
  width:auto!important;max-width:none!important;position:static!important;margin:0!important;padding:0!important;
  background:none!important;transform:none!important}
.hv2 .pd-grid{clear:both}
/* 1 Oct 2026: on a 360px phone something in the buy box has a 350px minimum width, which pushed the
   whole column 12px off screen. Grid children must be allowed to shrink. */
.hv2 .pd-grid>*{min-width:0}
/* the theme pins <button> to 34px; a thumb-sized target needs more */
html body .hv2 .pd-fitband button.cta,html body .hv2 .pd-sheet button.cta{min-height:52px!important;padding:0 24px!important;display:inline-flex!important;align-items:center;justify-content:center}
@media(max-width:640px){html body .hv2 .pd-fitband button.cta{width:100%}}
html body .hv2 .pd-notices .woocommerce-error,html body .hv2 .pd-notices .woocommerce-info{
  position:static!important;width:auto!important;float:none!important;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);
  font-size:14.5px;line-height:1.5;list-style:none}
.hv2 .pd-notices .woocommerce-error:before{display:none}
html body .hv2 .pd-notices .button{order:2;margin:0!important;min-height:44px;display:inline-flex;align-items:center;
  padding:0 18px!important;border-radius:10px!important;background:var(--dark)!important;color:#fff!important;
  font-family:Oswald,sans-serif!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;float:none!important}
.hv2 .pd-notices .woocommerce-error{background:#FDF3F0;border-color:#F0D8D0}

/* gallery: swipe on phones (scroll-snap, no slider library), thumbnails underneath */
.hv2 .pd-main{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.hv2 .pd-main::-webkit-scrollbar{display:none}
.hv2 .pd-slide{flex:0 0 100%;margin:0;scroll-snap-align:center;aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center;padding:14px}
.hv2 .pd-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* on a phone a square photo pushes the price below the fold; 4:3 keeps photo, price and button closer */
@media (max-width:600px){.hv2 .pd-slide{aspect-ratio:auto;height:min(66vw,280px);padding:10px}}
.hv2 .pd-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
/* the theme gives every <button> a fixed 34px height and squeezes the image inside to 0 wide */
html body .hv2 .pd-th{flex:0 0 64px;width:64px!important;min-width:64px!important;height:64px!important;
  padding:4px!important;margin:0!important;border:1px solid var(--line)!important;border-radius:10px!important;
  background:#fff!important;cursor:pointer;display:block;line-height:0}
html body .hv2 .pd-th img{display:block!important;width:54px!important;height:54px!important;max-width:none!important;
  object-fit:contain;opacity:1!important;visibility:visible!important}
html body .hv2 .pd-slide img{opacity:1!important;visibility:visible!important}
html body .hv2 .pd-th.on{border-color:var(--ink)!important}
.hv2 .pd-th.on{border-color:var(--ink)}

/* buy box */
.hv2 .pd-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.hv2 .pd-price .now,.hv2 .pd-price .now *{font-family:Oswald,sans-serif;font-weight:600;font-size:34px;
  line-height:1;color:var(--ink)}
.hv2 .pd-price .was,.hv2 .pd-price .was *{font-size:15px;color:var(--ink2);text-decoration:line-through}
.hv2 .pd-price .tab{align-self:center}
.hv2 .pd-vat{margin:4px 0 16px;font-size:13px}
.hv2 .pd-row{display:flex;gap:10px;align-items:stretch}
/* quantity is changed in the basket; the real input stays in the form, visually hidden */
.hv2 .pd-qty-h{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html body .hv2 .pd-add,html body .hv2 .pd-bar-b{flex:1 1 auto;min-height:52px;height:52px!important;margin:0!important;border:0!important;
  border-radius:12px!important;background:var(--cyan)!important;color:#04141C!important;
  font-family:Oswald,sans-serif!important;font-weight:600!important;font-size:17px!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;cursor:pointer;width:auto!important;
  padding:0 18px!important;line-height:1!important;box-shadow:none!important}
html body .hv2 .pd-add:hover,html body .hv2 .pd-bar-b:hover{filter:brightness(1.06)}
html body .hv2 .pd-add.loading{opacity:.7}
.hv2 .pd-form{margin:0}
.hv2 .pd-form .wc-stripe-express-checkout-element,.hv2 .pd-form #wc-stripe-express-checkout-element{margin-top:10px}
/* ---- variable products (exhausts etc.): the theme's table of dropdowns, restyled ---- */
.hv2 .pd-price .from{font-family:Oswald,sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);align-self:center}
html body .hv2 .pd-var table.variations,html body .hv2 .pd-var table.variations tbody,
html body .hv2 .pd-var table.variations tr,html body .hv2 .pd-var table.variations td{display:block!important;
  width:100%!important;border:0!important;padding:0!important;margin:0!important;background:none!important}
html body .hv2 .pd-var table.variations{margin:0 0 6px!important}
html body .hv2 .pd-var table.variations tr{margin-bottom:12px!important}
html body .hv2 .pd-var table.variations td,html body .hv2 .pd-var td.label label{position:static!important;
  transform:none!important;top:auto!important;left:auto!important;background:none!important;float:none!important}
html body .hv2 .pd-var td.label label{display:block;margin:0 0 6px!important;padding:0!important;font-family:Oswald,sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
html body .hv2 .pd-var select{width:100%!important;height:52px!important;margin:0!important;padding:0 40px 0 14px!important;
  border:1px solid #C9D3DC!important;border-radius:12px!important;background-color:#fff!important;color:var(--ink)!important;
  font:500 16px/1.2 'Open Sans',sans-serif!important;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2310171E' stroke-width='2'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:14px 9px!important;
  box-shadow:none!important}
html body .hv2 .pd-var select:focus{outline:3px solid var(--cyanText);outline-offset:1px}
html body .hv2 .pd-var .reset_variations{display:inline-block;margin-top:10px;font-size:13.5px;color:var(--cyanText);text-decoration:underline}
/* the range price inside the form repeats the one above, and the Klarna/PayPal "available at checkout" pop-ups go */
html body .hv2 .pd-var form > p.price,html body .hv2 .pd .btn-payl8r,html body .hv2 .pd #payl8rBtn{display:none!important}
html body .hv2 .pd-var .single_variation .woocommerce-variation-price{display:none}
html body .hv2 .pd-var .single_variation .woocommerce-variation-availability p{margin:4px 0 10px;font-size:14px;color:var(--ink2)}
html body .hv2 .pd-var .single_variation .woocommerce-variation-description p{font-size:14px}
html body .hv2 .pd-var .single_add_to_cart_button{display:block;width:100%!important;min-height:52px;height:52px!important;
  margin:6px 0 0!important;border:0!important;border-radius:12px!important;background:var(--cyan)!important;color:#04141C!important;
  font-family:Oswald,sans-serif!important;font-weight:600!important;font-size:17px!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;box-shadow:none!important;padding:0 18px!important;line-height:1!important}
html body .hv2 .pd-var .single_add_to_cart_button.disabled{background:#CFE9F3!important;color:#3B5563!important;cursor:not-allowed}
.hv2 .pd-bar-p small{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:600;color:var(--ink2)}
.hv2 .pd-pay{margin:14px 0 0;font-size:13px;color:var(--ink2);line-height:1.5}
.hv2 .pd-pay span{display:block;margin-top:8px}
/* payment marks (shared with the basket) */
.jfa-pay{display:flex;flex-wrap:wrap;gap:6px;list-style:none!important;margin:0!important;padding:0!important}
.jfa-pay li{margin:0!important;padding:0!important;list-style:none!important;display:flex;align-items:center;justify-content:center;
  width:46px;height:30px;border:1px solid #E2E8EE;border-radius:6px;background:#fff;overflow:hidden}
.jfa-pay li::before,.jfa-pay li::marker{content:none!important;display:none!important}
.jfa-pay img{display:block;width:100%!important;height:100%!important;object-fit:contain;padding:2px;box-sizing:border-box}
.hv2 .pd-ticks{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.hv2 .pd-ticks li{font-size:14px}
.hv2 .pd-ticks b{color:var(--ink)}
.hv2 .pd-ticks a,.hv2 .pd-prose a{color:var(--cyanText);text-decoration:underline;text-underline-offset:3px}
.hv2 .pd-rev{margin:10px 0 0;font-size:13.5px;color:var(--ink2)}

/* ---- description + spec ---- */
.hv2 .pd-two{display:grid;grid-template-columns:1fr;gap:34px}
@media (min-width:900px){.hv2 .pd-two{grid-template-columns:1.2fr 1fr;gap:48px}}
.hv2 .pd-spec{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;font-size:14.5px}
.hv2 .pd-spec th,.hv2 .pd-spec td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.hv2 .pd-spec tr:last-child th,.hv2 .pd-spec tr:last-child td{border-bottom:0}
.hv2 .pd-spec th{width:44%;font-weight:600;color:var(--ink)}
.hv2 .pd-spec td{color:var(--ink2)}
.hv2 .pd-spec td p{margin:0;font-size:inherit}

/* imported product copy: tame old inline styles, capitals and empty spacers */
.hv2 .pd-prose{max-width:780px}
.hv2 .pd-prose,.hv2 .pd-prose p,.hv2 .pd-prose li{font-size:15.5px;line-height:1.75;color:var(--ink2)}
.hv2 .pd-prose h2,.hv2 .pd-prose h3,.hv2 .pd-prose h4{font-size:19px;line-height:1.25;margin:26px 0 10px;color:var(--ink)}
.hv2 .pd-prose ul{padding-left:20px;margin:0 0 16px}
.hv2 .pd-prose img{max-width:100%;height:auto;border-radius:10px}
.hv2 .pd-prose iframe{max-width:100%}
.hv2 .pd-prose p:empty,.hv2 .pd-prose div:empty{display:none}
.hv2 .pd-prose [style*="height"]{height:auto!important;min-height:0!important}
.hv2 .pd-prose strong{color:var(--ink)}

/* related */
.hv2 .pd-rel{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.hv2 .pd-rimg{display:block;aspect-ratio:4/3;margin:-4px -4px 12px;border-radius:10px;overflow:hidden;background:var(--soft)}
.hv2 .pd-rimg img{width:100%;height:100%;object-fit:contain}
.hv2 .pd-rel h3{font-size:15px}
.hv2 .pd-rprice,.hv2 .pd-rprice *{margin:6px 0 0!important;font-family:Oswald,sans-serif;font-weight:600;color:var(--ink)!important;font-size:17px!important}

/* buy box: "Get a fitted price" - a real secondary button (John, 1 Oct 2026). Outline so Add to basket stays
   the main action; full width, 56px, icon + two lines so it reads as a service, not a link. */
html body .hv2 .pd-fitbtn{display:grid!important;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;
  align-items:center;width:100%!important;min-height:58px!important;height:auto!important;margin:12px 0 0!important;padding:10px 16px!important;
  background:#fff!important;color:var(--ink)!important;border:2px solid var(--ink)!important;border-radius:12px!important;
  text-align:left!important;cursor:pointer;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important;
  font:inherit!important;transition:background .15s,color .15s,transform .15s}
html body .hv2 .pd-fitbtn svg{grid-row:1/3;color:var(--cyanText)}
html body .hv2 .pd-fitbtn span{font-family:Oswald,sans-serif!important;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
html body .hv2 .pd-fitbtn i{grid-column:2;font-style:normal;font-size:12.5px;color:var(--ink2);line-height:1.3}
html body .hv2 .pd-fitbtn:after{content:"\2192";grid-column:3;grid-row:1/3;position:static!important;display:block!important;margin:0 0 0 6px!important;font-size:20px;color:var(--ink);transform:none!important}
html body .hv2 .pd-fitbtn:hover{background:var(--ink)!important;color:#fff!important;transform:translateY(-1px)}
html body .hv2 .pd-fitbtn:hover i,html body .hv2 .pd-fitbtn:hover:after{color:#fff}
html body .hv2 .pd-fitbtn:hover svg{color:var(--cyan)}
html body .hv2 .pd-fitbtn:focus-visible{outline:3px solid var(--cyanText);outline-offset:2px}

/* reviews card - the rating, made to stand out */
.hv2 .pd-revcard{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border-radius:var(--radius);
  background:var(--dark);color:#fff;transition:transform .15s}
.hv2 .pd-revcard:hover{transform:translateY(-1px)}
.hv2 .pd-rev-score{flex:0 0 auto;font-family:Oswald,sans-serif;font-weight:600;font-size:38px;line-height:1;color:#fff}
.hv2 .pd-rev-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hv2 .pd-stars{color:var(--plate);font-size:17px;letter-spacing:2px;line-height:1}
.hv2 .pd-rev-txt b{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:15px;color:#fff}
.hv2 .pd-rev-sub{font-size:12.5px;color:#B8C4CE}

/* no photo yet: brand tile */
.hv2 .pd-noimg{background:linear-gradient(160deg,#F4F7FA 0%,#E6EDF3 100%)}
.hv2 .pd-noimg-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;width:100%;height:100%}
html body .hv2 .pd-noimg-logo{max-width:62%!important;max-height:42%!important;width:auto!important;height:auto!important;object-fit:contain;
  mix-blend-mode:multiply}
.hv2 .pd-noimg-name{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(30px,6vw,46px);color:var(--ink);line-height:1}
.hv2 .pd-noimg-note{font-family:Oswald,sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}

/* "Want us to fit it?" band */
.hv2 .pd-fitband{padding:34px 0}
.hv2 .pd-fitband-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.hv2 .pd-fitband-in h2{font-size:var(--h2);margin:4px 0 8px}
.hv2 .pd-fitband-in p{margin:0;max-width:600px}
html body .hv2 .pd-fitband .cta,html body .hv2 .pd-tune .cta,html body .hv2 .pd-sheet .cta{border:0;cursor:pointer;min-height:50px;height:auto!important;
  padding:0 22px;font-family:Oswald,sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;border-radius:12px}

/* tuning upsell */
.hv2 .pd-tune .shead h2{color:#fff}
.hv2 .pd-tune .shead p{color:#B8C4CE}
/* figures + dyno graph: the tuning builder's own tiles (.jfx-fig) and chart, same values as jfa-vehicle-v1 */
.hv2 .pd-dyno{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;align-items:start;margin-top:22px}
.hv2 .pd-dyno.nochart{grid-template-columns:1fr}
@media(max-width:820px){.hv2 .pd-dyno{grid-template-columns:1fr;gap:12px}
  /* phone: figures, then the graph, then the button */
  .hv2 .pd-dyno-l{display:contents}.hv2 .pd-tune .jfx-figs{order:1}.hv2 .pd-dyno-chart{order:2}.hv2 .pd-dyno-go{order:3;margin-top:0}}
.hv2 .pd-tune .jfx-figs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hv2 .pd-tune .jfx-fig{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 22px;background:#151B22;text-align:center}
.hv2 .pd-tune .jfx-fig .big{font-family:Oswald,sans-serif;font-weight:600;font-size:clamp(34px,5.6vw,52px);line-height:1;color:#fff;letter-spacing:.01em}
.hv2 .pd-tune .jfx-fig .big b{color:#00C6FF;font-weight:600}
.hv2 .pd-tune .jfx-fig .big .ar{color:#7C8790;font-size:.6em;vertical-align:.12em;padding:0 4px}
.hv2 .pd-tune .jfx-fig .cap{font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.24em;color:#7C8790;margin-top:8px;text-transform:uppercase}
.hv2 .pd-tune .jfx-fig .cap b{color:#7FD8F7}
.hv2 .pd-dyno-go{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:12px;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px;background:#151B22;color:#C7D3DD;font-size:14.5px;line-height:1.5}
.hv2 .pd-dyno-go span{flex:1 1 220px}
html body .hv2 .pd-dyno-go .cta{margin:0}
.hv2 .pd-dyno-chart{background:#0C0F12;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 14px 8px}
.hv2 .pd-dyno-chart svg{width:100%;height:auto;display:block}
.hv2 .pd-dyno-chart .leg{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#7C8790;padding:6px 4px 4px;font-family:Oswald,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.hv2 .pd-dyno-chart .leg i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px;border-radius:2px}
.hv2 .pd-dyno-chart .note{margin:6px 4px 4px;font-size:12.5px;color:#8FA0AE;background:none;border:0;padding:0}
@media(max-width:640px){
  .hv2 .pd-tune .jfx-figs{grid-template-columns:1fr}
  .hv2 .pd-dyno-go{flex-direction:column;align-items:stretch;text-align:center}
  .hv2 .pd-dyno-go span{flex:0 0 auto}
  html body .hv2 .pd-dyno-go .cta{width:100%;justify-content:center}
}

/* ---- fitted-price sheet ---- */
html.pd-lock,html.pd-lock body{overflow:hidden}
.hv2 .pd-sheet{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-end;justify-content:center}
.hv2 .pd-sheet[hidden]{display:none}
.hv2 .pd-sheet-bg{position:absolute;inset:0;background:rgba(11,17,22,.55)}
.hv2 .pd-sheet-in{position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:18px 18px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.5);animation:pdUp .22s ease}
@media (min-width:700px){.hv2 .pd-sheet{align-items:center}.hv2 .pd-sheet-in{border-radius:18px;padding:28px}}
@keyframes pdUp{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hv2 .pd-sheet-in{animation:none}}
html body .hv2 .pd-sheet-x{position:absolute;top:10px;right:10px;width:40px!important;height:40px!important;min-height:0!important;
  padding:0!important;border:0!important;border-radius:50%!important;background:var(--soft)!important;color:var(--ink)!important;font-size:24px!important;line-height:1!important;cursor:pointer}
.hv2 .pd-sheet h2{font-size:clamp(24px,5vw,30px);margin:4px 0 6px}
.hv2 .pd-fit-sub{font-size:14px;margin:0 0 14px}
.hv2 .pd-fit-item{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--soft);margin-bottom:14px}
.hv2 .pd-fit-item b{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:16px}
.hv2 .pd-fit-item span{font-size:13.5px;color:var(--ink2)}
.hv2 .pd-fit-item .pd-fit-p,.hv2 .pd-fit-item .pd-fit-p *{font-weight:600;color:var(--ink)}
/* The form inside the sheet is the house quote form (.jqf, jfa-ds.css) - same labels, step tabs, plate,
   dial-code phone, buttons. Only the bits that differ in a white sheet are set here. */
.hv2 .pd-jqf{max-width:none}
.hv2 .pd-jqf .jqf-form{border:0;padding:0;background:none}
.hv2 .pd-jqf .jqf-steps{margin-bottom:18px}
.hv2 .pd-opt{font-style:normal;font-family:'Open Sans',sans-serif;letter-spacing:0;text-transform:none;color:var(--ink2);margin-left:4px}
/* the theme and WooCommerce both style bare inputs on product pages; pin the house look (plate excluded) */
html body .hv2 .pd-jqf input:not([type=checkbox]):not([name=registration_no]):not(.pd-hp),html body .hv2 .pd-jqf textarea,html body .hv2 .pd-jqf select{
  width:100%;min-height:50px;margin:0!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:13px 14px!important;
  font:16px/1.4 'Open Sans',sans-serif!important;color:var(--ink)!important;background:#fff!important;box-shadow:none!important;height:auto!important}
html body .hv2 .pd-jqf .jqf-tel select{padding-right:28px!important}
html body .hv2 .pd-jqf textarea{min-height:70px!important;resize:vertical}
html body .hv2 .pd-jqf input:focus,html body .hv2 .pd-jqf textarea:focus,html body .hv2 .pd-jqf select:focus{outline:none;
  border-color:var(--cyanText)!important;box-shadow:0 0 0 3px rgba(0,198,255,.18)!important}
html body .hv2 .pd-jqf input.bad:not([type=checkbox]):not([name=registration_no]):not(.pd-hp){border-color:#B4381F!important;background:#FDF3F0!important}
.hv2 .pd-regnote{margin-top:8px}
html body .hv2 .pd-jqf .jqf-plate{margin:0!important}
.hv2 .pd-jqf input::placeholder,.hv2 .pd-jqf textarea::placeholder{color:#8B98A4;opacity:1}
html body .hv2 .pd-jqf .jqf-plate input::placeholder{color:rgba(16,23,30,.4)}
/* the house tick rows are drawn for the dark form panel; this sheet is white */
.hv2 .pd-jqf .jqf-ck{background:var(--soft);border-color:var(--line);color:var(--ink)}
.hv2 .pd-jqf .jqf-ck:hover{color:var(--ink);border-color:var(--cyanText)}
.hv2 .pd-jqf .jqf-ck:has(input:checked){background:rgba(0,198,255,.1);border-color:var(--cyanText);color:var(--ink)}
.hv2 .pd-jqf .jqf-ck em{font-style:normal;color:var(--ink2);white-space:nowrap;margin-left:4px}
html body .hv2 .pd-jqf .jqf-next,html body .hv2 .pd-jqf .jqf-submit{border:0!important;height:auto!important;min-height:52px}
html body .hv2 .pd-jqf .jqf-next{width:100%;justify-content:center}
html body .hv2 .pd-jqf .jqf-back{height:auto!important;min-height:0!important;padding:8px 0!important;box-shadow:none!important}
.hv2 .pd-jqf .jqf-row .jqf-submit{flex:1 1 220px;justify-content:center}
.hv2 .pd-jqf .jqf-consent input{accent-color:var(--cyanText)}
.hv2 .pd-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.hv2 .pd-jqf .jqf-note a{color:var(--cyanText);text-decoration:underline}
.hv2 .pd-fit-done{text-align:center;padding:20px 0}
.hv2 .pd-fit-done a{color:var(--cyanText);text-decoration:underline}

.hv2 .pd-legal{max-width:1080px;margin:0 auto;padding:22px;font-size:12px;line-height:1.6;color:var(--ink2);text-align:center}

/* sticky buy bar on phones once the real button has scrolled away */
.hv2 .pd-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -12px 28px -20px rgba(16,23,30,.6);transform:translateY(110%);transition:transform .22s ease;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.hv2 .pd-bar.on{transform:none}
.hv2 .pd-bar-in{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto}
.hv2 .pd-bar-p,.hv2 .pd-bar-p *{font-family:Oswald,sans-serif;font-weight:600;font-size:22px;color:var(--ink)}
html body .hv2 .pd-bar-b{min-height:48px;height:48px!important}
@media (min-width:900px){.hv2 .pd-bar{display:none}}
@media (prefers-reduced-motion:reduce){.hv2 .pd-bar{transition:none}}

/* ---- "Added to your basket" (1 Oct 2026: the theme's grey bar did not match the rest of the site) ---- */
.hv2 .woocommerce-notices-wrapper{margin:0}
html body .hv2 .woocommerce-message{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;
  margin:0 0 18px!important;padding:16px 18px!important;position:relative;background:#fff!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:0 14px 36px -22px rgba(15,23,32,.45)!important;
  font-size:14.5px;line-height:1.45;outline:0;animation:pdDrop .28s ease}
html body .hv2 .woocommerce-message:not(:has(.jfa-added))::before{display:none!important}
/* the green tick only on a real "added" message - not on "you cannot add another" and the like */
html body .hv2 .woocommerce-message:has(.jfa-added){padding-left:58px!important}
html body .hv2 .woocommerce-message:has(.jfa-added)::before{content:""!important;position:absolute;left:18px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;
  background:#1E9E5A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat!important;
  color:transparent!important;font-size:0!important;display:block!important}
.hv2 .jfa-added{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.hv2 .jfa-added b{font-family:Oswald,sans-serif;font-weight:600;font-size:17px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.hv2 .jfa-added span{color:var(--ink2);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hv2 .jfa-added-go{display:flex;gap:10px;align-items:center;flex:0 0 auto}
html body .hv2 .woocommerce-message .button.wc-forward{float:none!important;order:0;margin:0!important;display:inline-flex!important;align-items:center;
  height:46px!important;min-height:46px;padding:0 20px!important;border-radius:11px!important;border:0!important;background:var(--cyan)!important;color:#04141C!important;
  font-family:Oswald,sans-serif!important;font-weight:600!important;font-size:15px!important;letter-spacing:.06em!important;text-transform:uppercase!important;box-shadow:none!important}
.hv2 .jfa-added-co{font-family:Oswald,sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)!important;text-decoration:none!important;padding:12px 6px}
.hv2 .jfa-added-co:hover{color:var(--cyanText)!important}
@media(max-width:560px){.hv2 .jfa-added-go{width:100%}html body .hv2 .woocommerce-message .button.wc-forward{flex:1;justify-content:center}}
@keyframes pdDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html body .hv2 .woocommerce-message{animation:none}}

@media(max-width:420px){.jfa-pay{gap:5px}.jfa-pay li{width:40px!important;height:27px!important}}