/*
 * Approved product page - Kingfishers 2501.
 * Values transferred from john-surtees-product-page-review.html
 * (md5 9534bc76f152ce9a8582283215994ce3), :root tokens and the ex-a rules.
 *
 * Scoped to .jspd-pdp, which only exists on the pilot page. Because the class names are
 * ours, Botiga's compiled body.jspp-pilot rules no longer match most of this. Where the
 * theme does still target a shared class (.summary, .price, .single_add_to_cart_button)
 * the selector is written to the same weight as Botiga's (0,4,1) and this sheet is
 * enqueued afterwards, so source order settles it without !important.
 */

.jspd-pdp{
  --jspd-ink:#1b1d1f; --jspd-ink2:#474c52; --jspd-muted:#7b828a;
  --jspd-rule:#e4e0da; --jspd-rule2:#f1eee9; --jspd-canvas:#fbf9f6;
  --jspd-navy:#1d4a76; --jspd-navy-dk:#163a5d; --jspd-accent:#265C91;
  --jspd-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --jspd-text:"EB Garamond",Georgia,"Times New Roman",serif;
  --jspd-ui:Jost,ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
.jspd-pdp *,.jspd-pdp *::before,.jspd-pdp *::after{box-sizing:border-box}
.jspd-pdp [hidden]{display:none !important}
.jspd-pdp :focus-visible{outline:2px solid var(--jspd-accent);outline-offset:2px}

/* ---------------- band 1 ----------------
   EXCESS TOP WHITE SPACE, corrected at source. Two containers were responsible, and
   together they put the breadcrumb text 250px down the page where the reference puts it
   about 97px, under a 75px fixed header:

     1. .botiga-breadcrumb-trail - Botiga's own breadcrumb band, 72px tall with 25px
        padding. The template used to render a SECOND breadcrumb inside the product, so
        the page carried two. The template's one is gone; this is the genuine Rank Math
        trail, restyled here to the reference's 11px uppercase treatment.
     2. .content-wrapper{margin-top:80px} from botiga styles.min.css. Botiga itself
        zeroes this for .botiga-site-layout-boxed.single-product, but this site runs
        botiga-site-layout-default, so the 80px applied. Zeroed on this page only.

   Both are scoped to body.jspd-pdp-active, so no other page changes. */
body.jspd-pdp-active .container.content-wrapper{margin-top:0}
/* NOTE, recorded so it is not re-investigated: Botiga's styles.min.css sets
   body{overflow-x:hidden}, which looks like a classic position:sticky blocker. It is
   not one here. <html> is overflow:visible, so the body's overflow PROPAGATES to the
   viewport and the body itself computes as visible - it never becomes a scroll
   container. Verified on the rendered page. An earlier override of this rule was
   removed again as unnecessary; the only thing preventing sticky was that the grid had
   0px of travel while About and the accordions sat outside the right column. */
/* 3. .botiga-product-navigation contributed 42px of vertical space between the
      breadcrumb and the title. It is no longer hidden: it is RELOCATED into the title
      band by the template, to the right of the H1, so the space it used is reclaimed
      and the links are retained. See the title band rules below. */
body.jspd-pdp-active .botiga-breadcrumb-trail{padding:22px 0 0;margin:0}
body.jspd-pdp-active .botiga-breadcrumb-trail p{margin:0;padding:0}
body.jspd-pdp-active .botiga-breadcrumb-trail nav,
body.jspd-pdp-active .botiga-breadcrumb-trail p,
body.jspd-pdp-active .botiga-breadcrumb-trail a,
body.jspd-pdp-active .botiga-breadcrumb-trail span{font-family:var(--jspd-ui, Jost, sans-serif);
  font-size:11px;font-weight:300;letter-spacing:.11em;text-transform:uppercase;
  color:#7b828a;line-height:1.5;text-decoration:none}
body.jspd-pdp-active .botiga-breadcrumb-trail a:hover{color:#265C91}
/* the reference separates crumbs with a slash, not a guillemet */
body.jspd-pdp-active .botiga-breadcrumb-trail .separator{font-size:0;letter-spacing:0}
body.jspd-pdp-active .botiga-breadcrumb-trail .separator::after{content:"/";font-size:11px;
  letter-spacing:.11em;margin:0 7px;opacity:.5}

/* Title band: title left, Previous / Next right, one row on desktop. A flex row, not
   absolute positioning, so the band's height is set by its tallest child and the title
   divider always sits below both. On narrow widths the title's 420px flex-basis can no
   longer be met beside the controls, so they wrap underneath on their own line. */
.jspd-pdp .jspd-titleband{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:12px 24px}
.jspd-pdp .jspd-titleband > h1.jspd-title{flex:1 1 420px;min-width:0}
.jspd-pdp .jspd-nav{flex:0 0 auto;padding-bottom:3px}

/* Botiga's own controls, made discreet and put on the approved palette. */
body.jspd-pdp-active .jspd-pdp .jspd-nav .botiga-product-navigation{
  float:none;margin:0;grid-gap:8px;gap:8px;z-index:50;justify-content:flex-end}
body.jspd-pdp-active .jspd-pdp .jspd-nav .botiga-product-navigation a{
  width:36px;height:36px;border-radius:36px;border:1px solid var(--jspd-rule);
  background:#fff;color:var(--jspd-ink2);transition:border-color .15s}
body.jspd-pdp-active .jspd-pdp .jspd-nav .botiga-product-navigation a:hover{border-color:var(--jspd-navy)}
body.jspd-pdp-active .jspd-pdp .jspd-nav .botiga-product-navigation a i:before{
  width:7px;height:7px;border-top-width:1px;border-left-width:1px;
  border-top-color:var(--jspd-ink2);border-left-color:var(--jspd-ink2)}
body.jspd-pdp-active .jspd-pdp .jspd-nav .botiga-product-navigation a:hover i:before{
  border-top-color:var(--jspd-navy);border-left-color:var(--jspd-navy)}
/* the hover preview keeps Botiga's behaviour, on the approved type */
body.jspd-pdp-active .jspd-pdp .jspd-nav .botiga-product-navigation a span{
  border-top:2px solid var(--jspd-navy);font-family:var(--jspd-ui)}
body.jspd-pdp-active .jspd-pdp .jspd-nav .botiga-product-navigation a span h2{
  font-family:var(--jspd-ui);font-size:12px;font-weight:300;line-height:1.4;
  letter-spacing:.02em;text-transform:none;color:var(--jspd-ink);margin:8px 0 0}

body.jspd-pdp-active.single-product .jspd-pdp h1.jspd-title{
  font-family:var(--jspd-display);font-size:clamp(23px,2.05vw,31px);font-weight:400;
  line-height:1.16;letter-spacing:.012em;color:var(--jspd-ink);
  margin:8px 0 0;padding:0;max-width:68ch;text-wrap:balance;text-align:left}
.jspd-pdp .jspd-titlerule{height:1px;background:var(--jspd-rule);margin:16px 0 26px}

/* ---------------- band 2: the grid ---------------- */
@media (min-width:1101px){
  /* body prefix takes this to (0,3,0). The older engraving layout emits
     .jspp-lay .product-gallery-summary{display:flow-root} at (0,2,0) from an inline
     <style id="jspp-lay-css">, which collapsed this grid on every engraving product -
     the summary then spanned the full 1410px and the engraving fields were laid out at
     a negative left offset. That class is added by that snippet's own script, so it
     cannot be removed server-side; out-weighting the single offending rule is the
     narrow fix and leaves the rest of that snippet working. */
  body.jspd-pdp-active .jspd-pdp .jspd-grid{display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:24px 56px;align-items:start;position:relative}
  /* Botiga caps both children at flex:0 0 50%; max-width:50% and pads the summary by
     40px (botiga assets/css/woocommerce.css:1898-1911). Inside a grid, that 50% resolves
     against each grid AREA, which collapsed the columns to roughly half their track.
     These two selectors are (0,3,0) against Botiga's (0,2,0), so they win on weight
     alone - no !important needed. */
  .jspd-pdp .jspd-grid > .woocommerce-product-gallery{grid-column:1;grid-row:1;margin:0;
    flex:none;max-width:none;width:auto}
  .jspd-pdp .jspd-grid > .jspd-summary{grid-column:2;grid-row:1;margin:0;padding:0;
    flex:none;max-width:none;width:auto;float:none}
  /* Botiga's vertical gallery layout, re-declared so it survives independently of the
     jspp-pilot rules that no longer apply on this page. */
  .jspd-pdp .jspd-grid > .woocommerce-product-gallery{display:flex;flex-direction:column;gap:20px}
  .jspd-pdp .jspd-grid > .woocommerce-product-gallery .flex-viewport{flex:1 1 auto;width:100%;max-width:none}
  .jspd-pdp .jspd-grid > .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{margin:0}

  /* ---- compact gallery, per the approved .galmain / .thumbs ----
     Reference: square main image capped at 500px with object-fit:contain, then a row of
     70px thumbnails 12px beneath. Measured cause of the tall LIVE gallery: the main image
     filled the 709px column (624x624, bottom at 825) with a vertical 65px thumb rail
     beside it, so on a 1366x768 laptop the photograph ran 57px past the fold. The source
     photograph is NOT the cause - its content box is 860x850 inside 1000x1000, about 8%
     even margin, so capping the container does not crop the piece. object-fit:contain
     keeps the whole subject and its proportions; the intrinsic 1000px file is downscaled,
     not upscaled, so sharpness is unaffected. */
  .jspd-pdp .jspd-grid > .woocommerce-product-gallery .flex-viewport{max-height:500px}
  .jspd-pdp .woocommerce-product-gallery__image img{
    width:100%;height:500px;max-height:500px;object-fit:contain;display:block}

  /* STICKY GALLERY - pure CSS, no script, no height threshold.
     top:95px = the site's 75px fixed header plus the reference's own 20px.
     align-self:start is required, or the grid item stretches to the row height and has
     nothing to travel within. Sticky is self-limiting by definition: it moves only
     while its containing block (the grid) is taller than it, stops at that block's
     bottom edge rather than overlapping what follows, and does nothing at all on short
     pages. Opening an accordion changes the column height and sticky re-resolves on the
     next frame without any measurement of ours. */
  body.jspd-pdp-active .jspd-pdp .jspd-grid > .woocommerce-product-gallery{
    position:sticky;top:95px;align-self:start}
  .jspd-pdp .jspd-grid > .onsale{position:absolute;top:0;left:0;z-index:5}
}
@media (max-width:1100px){
  /* Single column. Both children are pinned to the container's own width: a theme rule
     was giving them an explicit 440px inside a 360px wrapper, overflowing it by 80px.
     The body prefix takes these to (0,5,0) so they win outright, and min-width:0 stops
     a wide descendant (the spec table) from forcing the column open again. */
  .jspd-pdp .jspd-grid{display:flex;flex-direction:column;gap:24px}
  body.jspd-pdp-active .jspd-pdp .jspd-grid > .woocommerce-product-gallery,
  body.jspd-pdp-active .jspd-pdp .jspd-grid > .jspd-summary{
    flex:0 1 auto;width:100%;max-width:100%;min-width:0;float:none;padding:0;margin-left:0;margin-right:0}
}

/* thumbnail rail beneath the image, horizontal, per the reference's .thumbs */
body.jspd-pdp-active .jspd-pdp .flex-control-thumbs{display:flex;flex-direction:row;
  flex-wrap:wrap;gap:10px;margin:12px 0 0;padding:0;position:static;width:auto;list-style:none}
/* flexslider sizes each li inline to an equal share of the rail, which gave 95px
   against the reference's 70px; flex:0 0 70px overrides that without touching its JS */
body.jspd-pdp-active .jspd-pdp .flex-control-thumbs li{flex:0 0 70px;width:70px;height:70px;
  margin:0;padding:0;float:none;list-style:none}
body.jspd-pdp-active .jspd-pdp .flex-control-thumbs li img{width:100%;height:100%;
  object-fit:contain;border:1px solid var(--jspd-rule);background:var(--jspd-canvas);
  cursor:pointer;opacity:1;display:block}
body.jspd-pdp-active .jspd-pdp .flex-control-thumbs li img.flex-active{
  border-color:var(--jspd-navy);outline:1px solid var(--jspd-navy)}

/* ---------------- summary ---------------- */
body.jspd-pdp-active.single-product .jspd-pdp .jspd-summary{
  font-family:var(--jspd-ui);font-weight:300;font-size:15px;line-height:1.6;color:var(--jspd-ink)}

.jspd-pdp .jspd-eyebrow{font-family:var(--jspd-ui);font-size:11px;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;color:var(--jspd-navy);margin:0 0 2px}

body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price,
body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price .amount,
body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price bdi,
body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price ins{
  font-family:var(--jspd-display);font-size:25px;font-weight:500;letter-spacing:.01em;
  color:var(--jspd-ink);font-variant-numeric:tabular-nums;text-decoration:none}
body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price{margin:8px 0 0;display:block;line-height:1.2}
/* Sold, or price-on-application. Shown in place of a price, never alongside one, so a
   sold Vintage & Antique piece cannot display a fabricated 0.00. */
body.jspd-pdp-active.single-product .jspd-pdp p.jspd-sold{
  font-family:var(--jspd-display);font-size:25px;font-weight:500;letter-spacing:.01em;
  color:var(--jspd-muted);margin:8px 0 0;display:block;line-height:1.2}

body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price .jspd-from{
  font-family:var(--jspd-ui);font-size:11px;font-weight:300;letter-spacing:.11em;
  text-transform:uppercase;color:var(--jspd-muted);margin-right:8px;vertical-align:2px;display:inline}

body.jspd-pdp-active.single-product .jspd-pdp .woocommerce-product-details__short-description,
body.jspd-pdp-active.single-product .jspd-pdp .woocommerce-product-details__short-description p{
  font-family:var(--jspd-text);font-size:17px;font-weight:400;line-height:1.62;color:var(--jspd-ink2)}
.jspd-pdp .woocommerce-product-details__short-description{margin:13px 0 0;max-width:44ch}
.jspd-pdp .woocommerce-product-details__short-description p:last-child{margin-bottom:0}

/* selector */
.jspd-pdp .jspd-selector{margin:18px 0 0}
.jspd-pdp .jspd-lab{font-family:var(--jspd-ui);font-size:10.5px;font-weight:300;letter-spacing:.12em;
  text-transform:uppercase;color:var(--jspd-muted);margin-bottom:9px}
.jspd-pdp .jspd-sizes{display:flex;gap:8px;flex-wrap:wrap}
.jspd-pdp .jspd-sizes button{font-family:var(--jspd-ui);font-weight:300;background:#fff;
  border:1px solid var(--jspd-rule);padding:0 16px;height:40px;min-width:78px;cursor:pointer;
  font-size:13px;letter-spacing:.03em;color:var(--jspd-ink);border-radius:0;
  transition:border-color .15s,background .15s,color .15s}
.jspd-pdp .jspd-sizes button:hover{border-color:var(--jspd-ink2)}
.jspd-pdp .jspd-sizes button[aria-pressed="true"]{border-color:var(--jspd-navy);background:var(--jspd-navy);color:#fff}
.jspd-pdp .jspd-sizes button[disabled]{opacity:.4;cursor:not-allowed}
.jspd-pdp .jspd-selmeta{margin-top:12px;font-family:var(--jspd-ui);font-size:13.5px;font-weight:300;
  color:var(--jspd-ink2);min-height:21px;line-height:1.55}
.jspd-pdp .jspd-selmeta b{color:var(--jspd-ink);font-weight:500}
.jspd-pdp .jspd-selmeta .jspd-hint{color:var(--jspd-muted);font-style:italic}

/* PROGRESSIVE ENHANCEMENT.
   WooCommerce's native variation table stays visible and fully functional until the
   script has built the approved buttons AND confirmed them operable, at which point it
   adds .jspd-enhanced to the product root. If the script is deferred, fails or never
   runs, the customer keeps the native selector and can still buy. The approved label and
   button row stay hidden until that same moment, so no empty control is ever shown. */
.jspd-pdp .jspd-selector{display:none}
.jspd-pdp.jspd-enhanced .jspd-selector{display:block}
body.jspd-pdp-active .jspd-pdp.jspd-enhanced .variations_form table.variations{display:none}
.jspd-pdp .jspd-selhidden{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* purchase row */
.jspd-pdp form.cart{margin:22px 0 0}
.jspd-pdp .woocommerce-variation-add-to-cart,
.jspd-pdp form.cart:not(.variations_form){display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.jspd-pdp .quantity{display:inline-flex;align-items:stretch;border:1px solid var(--jspd-rule);
  height:44px;background:#fff;margin:0}
body.jspd-pdp-active.single-product .jspd-pdp .quantity input.qty{
  height:42px;width:38px;border:0;background:#fff;text-align:center;padding:0;margin:0;
  font-family:var(--jspd-ui);font-weight:300;font-size:14px;box-shadow:none;border-radius:0;
  -moz-appearance:textfield;min-height:0}
.jspd-pdp .quantity input.qty::-webkit-outer-spin-button,
.jspd-pdp .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* ---- buying area spacing, causes removed rather than offset ----
   Measured: the Add to Basket button ended at 529 while the assurances began at 608, a
   79px gap. Two real causes, no arbitrary negative margins used:
     1. .single_variation_wrap was 146px tall while its visible children summed to 83px -
        64px of empty block below the button that no child accounted for. Making the
        wrap a column flex container ties its height to its content exactly and the
        phantom space disappears.
     2. WooCommerce's p.stock carries margin-bottom:20px, which collapsed through
        .woocommerce-variation and pushed the buy row down. Set to the reference's 16px.
   The reference puts 22px above the buy row and 18px above the assurances. */
/* These carry the body prefix deliberately. At .jspd-pdp weight (0,2,0) they lost to
   Botiga's own .product-gallery-summary .entry-summary rules, which is why the first
   attempt left the 64px gap, a 15px form margin and a full-width CLEAR untouched. */
/* THE CAUSE of the 79px gap below Add to Basket, found by testing rather than assumed.
   Botiga makes form.cart a flex container: display:flex; flex-direction:column;
   flex-wrap:wrap. In that configuration the form measured 171px and
   .single_variation_wrap 142px while their real content was 114px and 78px - roughly
   64px of empty box below the button that no child accounted for, and which no margin
   on any element explained. Restoring the form to ordinary block layout makes every box
   fit its content again: measured live, the button-to-assurances gap went from 82px to
   exactly 18px, which is the reference value, with no negative margins anywhere.
   The form's fields, submission and WooCommerce behaviour are untouched - only its
   display mode. */
body.jspd-pdp-active .jspd-pdp form.cart{display:block}
body.jspd-pdp-active .jspd-pdp .single_variation_wrap{display:block}
body.jspd-pdp-active .jspd-pdp .woocommerce-variation .stock,
body.jspd-pdp-active .jspd-pdp .woocommerce-variation p.stock{margin:0 0 16px}
/* 10px to CLEAR, then 12px to the buy row: 22px in total above the buying controls,
   matching the reference's .buyrow margin, with CLEAR sitting directly under the sizes */
body.jspd-pdp-active .jspd-pdp form.cart{margin-top:10px}
body.jspd-pdp-active .jspd-pdp .single_variation_wrap{margin-top:12px}
body.jspd-pdp-active .jspd-pdp ul.jspp-assurances{margin-top:18px}
/* About and the accordions now sit in the right column */
body.jspd-pdp-active .jspd-pdp .jspd-summary .jspd-about--col{margin-top:26px;padding-top:22px}
body.jspd-pdp-active .jspd-pdp .jspd-summary .jspd-accs{margin-top:26px}
body.jspd-pdp-active .jspd-pdp .jspd-summary .jspd-accbody{max-width:none}

/* ---- CLEAR: the genuine WooCommerce reset link, placed with the size controls ----
   It is the first visible child of form.cart, which sits directly beneath the size
   buttons, so no repositioning is needed - only its inherited -20px/20px margins
   removed and discreet typography applied. The native reset mechanism, its href and
   keyboard focus are untouched. */
/* display carries !important for one specific, verified reason: WooCommerce's
   add-to-cart-variation script calls jQuery .show() on this link, which writes
   style="display:block" inline. An inline style cannot be beaten by specificity, only
   by !important. Nothing else here needs it. */
body.jspd-pdp-active .jspd-pdp a.reset_variations{display:inline-block !important;width:auto;
  margin:0;padding:0;float:none;font-family:var(--jspd-ui);font-size:10.5px;
  font-weight:300;letter-spacing:.11em;text-transform:uppercase;color:var(--jspd-muted);
  text-decoration:underline;text-underline-offset:3px}
body.jspd-pdp-active .jspd-pdp a.reset_variations:hover{color:var(--jspd-navy)}
body.jspd-pdp-active .jspd-pdp a.reset_variations:focus-visible{outline:2px solid var(--jspd-accent);outline-offset:2px}

/* Botiga's OWN quantity controls, restyled to the reference's stepper. The template no
   longer adds a second pair - that was the visible "- - 1 + +". These are Botiga's
   anchors, so the genuine quantity behaviour is unchanged. */
body.jspd-pdp-active .jspd-pdp .quantity a.botiga-quantity-minus,
body.jspd-pdp-active .jspd-pdp .quantity a.botiga-quantity-plus{
  display:flex;align-items:center;justify-content:center;width:34px;height:42px;
  background:#fff;border:0;border-radius:0;padding:0;margin:0;text-decoration:none;
  font-family:var(--jspd-ui);font-size:15px;line-height:1;color:var(--jspd-ink2)}
body.jspd-pdp-active .jspd-pdp .quantity a.botiga-quantity-minus:hover,
body.jspd-pdp-active .jspd-pdp .quantity a.botiga-quantity-plus:hover{background:var(--jspd-canvas);color:var(--jspd-ink)}
/* removed: stepper is Botiga's own */
.jspd-pdp button.jspd-step-unused{width:34px;background:#fff;border:0;cursor:pointer;color:var(--jspd-ink2);
  font-family:var(--jspd-ui);font-size:15px;line-height:1;padding:0;border-radius:0}
.jspd-pdp button.jspd-step:hover{background:var(--jspd-canvas)}
body.jspd-pdp-active.single-product .jspd-pdp .single_add_to_cart_button{
  font-family:var(--jspd-ui);font-size:11.5px;font-weight:300;letter-spacing:.13em;
  text-transform:uppercase;height:44px;min-height:44px;line-height:1;padding:0 28px;
  background:var(--jspd-navy);border:1px solid var(--jspd-navy);color:#fff;border-radius:0;
  flex:0 1 220px;margin:0}
body.jspd-pdp-active.single-product .jspd-pdp .single_add_to_cart_button:hover{
  background:var(--jspd-navy-dk);border-color:var(--jspd-navy-dk)}
.jspd-pdp .woocommerce-variation-availability{flex:1 1 100%;font-family:var(--jspd-ui);
  font-size:11.5px;font-weight:300;letter-spacing:.09em;text-transform:uppercase;color:#2e7d52;margin:0}
/* the in-form variation price is the data source for the single price above, not a
   second visible price */
.jspd-pdp .woocommerce-variation-price{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* assurances */
/* The site's own assurances list, styled to the reference's navy dot bullets. The
   template renders no second list; this is the existing, owner-editable one. */
.jspd-pdp ul.jspp-assurances{margin:18px 0 0;padding:0;list-style:none}
body.jspd-pdp-active.single-product .jspd-pdp ul.jspp-assurances li{
  font-family:var(--jspd-ui);font-size:13px;font-weight:300;color:var(--jspd-ink2);
  line-height:1.55;margin:5px 0;padding-left:15px;position:relative;list-style:none}
.jspd-pdp ul.jspp-assurances li::marker{content:""}
.jspd-pdp ul.jspp-assurances li::before{content:"";position:absolute;left:0;top:9px;
  width:4px;height:4px;background:var(--jspd-navy);border-radius:50%}

/* size comparison, inside the summary */
.jspd-pdp details.jspd-cmp{margin-top:26px;border-top:1px solid var(--jspd-rule)}
.jspd-pdp details.jspd-cmp > summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;
  align-items:center;justify-content:space-between;gap:12px;font-family:var(--jspd-display);
  font-size:19px;font-weight:400;letter-spacing:.012em;min-height:44px;color:var(--jspd-ink);
  border-bottom:1px solid var(--jspd-rule)}
.jspd-pdp details.jspd-cmp > summary::-webkit-details-marker{display:none}
.jspd-pdp .jspd-chev{font-family:var(--jspd-ui);font-size:11px;color:var(--jspd-muted);
  transition:transform .2s;flex:0 0 auto}
.jspd-pdp details[open] > summary .jspd-chev{transform:rotate(180deg)}
.jspd-pdp .jspd-cmpbody{overflow-x:auto}
.jspd-pdp table.jspd-spec{width:100%;border-collapse:collapse;font-family:var(--jspd-ui);
  font-size:14px;font-weight:300;margin:14px 0 20px}
.jspd-pdp table.jspd-spec th,.jspd-pdp table.jspd-spec td{text-align:left;
  padding:9px 12px 9px 0;border-bottom:1px solid var(--jspd-rule2);vertical-align:top}
.jspd-pdp table.jspd-spec th{font-weight:400;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--jspd-muted);white-space:nowrap}
.jspd-pdp table.jspd-spec tr.jspd-cur{background:#f3f7fb}
.jspd-pdp table.jspd-spec tr.jspd-cur td{font-weight:500}
.jspd-pdp table.jspd-spec .amount,.jspd-pdp table.jspd-spec bdi{font-family:var(--jspd-ui);font-size:14px}

/* the summary action is not fired on this page, so there is nothing to de-duplicate */

/* ---------------- band 3 ---------------- */
.jspd-pdp .jspd-about{border-top:1px solid var(--jspd-rule);margin-top:52px;padding-top:36px}
.jspd-pdp .jspd-ab-kicker{font-family:var(--jspd-ui);font-size:10.5px;font-weight:300;
  letter-spacing:.15em;text-transform:uppercase;color:var(--jspd-muted);margin-bottom:10px}
body.jspd-pdp-active.single-product .jspd-pdp h2.jspd-ab-h2{
  font-family:var(--jspd-display);font-weight:400;font-size:27px;letter-spacing:.012em;
  color:var(--jspd-ink);margin:0 0 18px;padding:0;text-align:left}
body.jspd-pdp-active.single-product .jspd-pdp .jspd-abouttext,
body.jspd-pdp-active.single-product .jspd-pdp .jspd-abouttext p{
  font-family:var(--jspd-text);font-size:18px;font-weight:400;line-height:1.78;color:var(--jspd-ink2)}
.jspd-pdp .jspd-abouttext{max-width:66ch}
.jspd-pdp .jspd-abouttext p{margin:0 0 17px}
.jspd-pdp .jspd-abouttext p:last-child{margin-bottom:0}

.jspd-pdp .jspd-accs{margin:44px 0 0;border-top:1px solid var(--jspd-rule)}
.jspd-pdp details.jspd-acc{border-bottom:1px solid var(--jspd-rule)}
.jspd-pdp details.jspd-acc > summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;
  align-items:center;justify-content:space-between;gap:12px;font-family:var(--jspd-display);
  font-size:19px;font-weight:400;letter-spacing:.012em;min-height:44px;color:var(--jspd-ink)}
.jspd-pdp details.jspd-acc > summary::-webkit-details-marker{display:none}
.jspd-pdp .jspd-accbody{padding:0 0 20px;color:var(--jspd-ink2);max-width:68ch;overflow-x:auto}
body.jspd-pdp-active.single-product .jspd-pdp .jspd-accbody,
body.jspd-pdp-active.single-product .jspd-pdp .jspd-accbody p,
body.jspd-pdp-active.single-product .jspd-pdp .jspd-accbody li{
  font-family:var(--jspd-ui);font-size:14.5px;font-weight:300;line-height:1.7;color:var(--jspd-ink2)}
.jspd-pdp .jspd-accbody p{margin:0 0 11px}
.jspd-pdp .jspd-accbody h2,.jspd-pdp .jspd-accbody h3{display:none}
.jspd-pdp .jspd-accbody table{width:100%;border-collapse:collapse;font-size:14px}
.jspd-pdp .jspd-accbody table th,.jspd-pdp .jspd-accbody table td{text-align:left;
  padding:9px 12px 9px 0;border-bottom:1px solid var(--jspd-rule2);vertical-align:top}
.jspd-pdp .jspd-accbody table th{font-weight:400;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--jspd-muted);white-space:nowrap}

/* ---------------- mobile, per the reference's .stage.m rules ---------------- */
@media (max-width:1100px){
  body.jspd-pdp-active.single-product .jspd-pdp h1.jspd-title{font-size:24px;max-width:none}
  /* wrapped onto its own line: align the controls with the title, not the right edge */
  .jspd-pdp .jspd-titleband{align-items:flex-start}
  .jspd-pdp .jspd-nav{padding-bottom:0}
  body.jspd-pdp-active .jspd-pdp .jspd-nav .botiga-product-navigation{justify-content:flex-start}
  .jspd-pdp .jspd-titlerule{margin:14px 0 20px}
  body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price,
  body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price .amount,
  body.jspd-pdp-active.single-product .jspd-pdp p.jspd-price bdi{font-size:22px}
  body.jspd-pdp-active.single-product .jspd-pdp .woocommerce-product-details__short-description,
  body.jspd-pdp-active.single-product .jspd-pdp .woocommerce-product-details__short-description p{font-size:16px}
  .jspd-pdp .jspd-sizes button{height:44px;min-width:88px}
  .jspd-pdp .quantity{height:46px}
  body.jspd-pdp-active.single-product .jspd-pdp .quantity input.qty{height:44px;width:46px}
  /* removed: stepper is Botiga's own */
.jspd-pdp button.jspd-step-unused{width:44px}
  body.jspd-pdp-active.single-product .jspd-pdp .single_add_to_cart_button{
    height:46px;min-height:46px;flex:1 1 100%}
  .jspd-pdp .jspd-about{margin-top:34px;padding-top:26px}
  body.jspd-pdp-active.single-product .jspd-pdp h2.jspd-ab-h2{font-size:22px}
  body.jspd-pdp-active.single-product .jspd-pdp .jspd-abouttext,
  body.jspd-pdp-active.single-product .jspd-pdp .jspd-abouttext p{font-size:16.5px;line-height:1.72}
  .jspd-pdp .jspd-accs{margin-top:34px}
}