/* ==========================================================================
   8X Gear — single product
   Maps the prototype's product page (tools/custom/product-template.html, the
   `.pd-*` block) onto Flatsome + WooCommerce markup. Woo keeps ownership of the
   variation logic, cart and gallery behaviour; only the surface changes.
   ========================================================================== */

/* ------------------------------------------------------------- headline */
/* .pd-name: the prototype's product title is display-weight, not body-weight. */
.single-product .product-title,
.single-product .product-title a{
  /* Flatsome's heading stack is Barlow Condensed; `.pd-name` takes the body
     face, so the family is restated rather than inherited from h1. */
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(32px,3.8vw,52px);
  line-height:.92;font-weight:900;letter-spacing:-.05em;text-transform:uppercase;
  color:#0E1013;margin:0;
}

/* .pd-crumb */
.single-product .product-info .breadcrumbs,
.single-product .shop-page-title .breadcrumbs{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.55);
}
.single-product .breadcrumbs a{color:rgba(0,0,0,.55);text-decoration:none;}
.single-product .breadcrumbs a:hover{color:#0E1013;}

/* ---------------------------------------------------------------- price */
/* .pd-price: 28px, 950, tabular figures so digits do not shift on variation
   change. Flatsome ships it at body size, which reads as a caption. */
/* The custom layout prints the price as p.price.product-page-price inside
   .product-price-container — not inside .product-info, which is where Flatsome's
   stock layout puts it. Scoping to that container keeps related-product cards
   (.product-small .price) at their own size. */
.single-product .product-price-container .price,
.single-product p.price.product-page-price,
.single-product .product-price-container .price .woocommerce-Price-amount,
.single-product .product-info .price,
.single-product .product-info .price .woocommerce-Price-amount{
  color:#0E1013;font-size:28px;font-weight:900;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.single-product .product-price-container .price del,
.single-product .product-price-container .price del .woocommerce-Price-amount,
.single-product .product-info .price del,
.single-product .product-info .price del .woocommerce-Price-amount{
  color:rgba(0,0,0,.45);font-size:18px;font-weight:700;
}
.single-product .product-price-container .price ins,
.single-product .product-info .price ins{text-decoration:none;}
.single-product .product-price-container .price ins .woocommerce-Price-amount,
.single-product .product-info .price ins .woocommerce-Price-amount{color:var(--ct-red-ink);}
/* .pd-note — the line under the price */
.single-product .product-info .stock,
.single-product .product-info .product_meta{
  font-size:13px;color:rgba(0,0,0,.55);
}

@media (max-width:849px){
  .single-product .cart .single_add_to_cart_button{width:100%;flex:1 1 100%;}
}

/* ==========================================================================
   Parts the inherited layout was missing, matched to the prototype's measured
   values: breadcrumb 12px/700 with 22px of lead-in, a red collection eyebrow,
   a 13px note under the price, and the three facts behind a hairline rule.
   ========================================================================== */
.single-product .x-pd-crumb{
  padding:22px 0 0;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.single-product .x-pd-crumb a{color:rgba(0,0,0,.55);text-decoration:none;}
.single-product .x-pd-crumb a:hover{color:#0E1013;}
.single-product .x-pd-crumb i{font-style:normal;color:rgba(0,0,0,.35);padding:0 8px;}
.single-product .x-pd-crumb span{color:#0E1013;}

.single-product .x-pd-kicker{
  margin:0 0 10px;
  font-size:10px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;
}
.single-product .x-pd-kicker a{color:var(--ct-red-ink);text-decoration:none;}
.single-product .x-pd-kicker a:hover{text-decoration:underline;text-underline-offset:3px;}

.single-product .x-pd-note{margin:6px 0 0;color:rgba(0,0,0,.55);font-size:13px;}

.single-product .x-pd-facts{
  list-style:none;margin:22px 0 0;padding:20px 0 0;
  border-top:1px solid var(--ct-line);
  display:flex;flex-direction:column;gap:11px;
}
.single-product .x-pd-facts li{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:rgba(0,0,0,.78);margin:0;
}
.single-product .x-pd-facts svg{width:16px;height:16px;flex:none;color:var(--ct-red-ink);}

/* Prototype rhythm: the price sits 16px under the title and the note carries the
   gap to the facts, instead of Flatsome's 36px block margin. */
.single-product .product-price-container .price,
.single-product p.price.product-page-price{margin:16px 0 0;}
/* --------------------------------------------------------- page geometry */
/* The prototype's .pd-main is two 588px columns with a 48px gutter inside a
   1224px content width. Flatsome's row is wider and uses a 30px gutter, so the
   whole page reads a size larger than the design. 1272 = 1224 + the 24px of
   column padding either side, which lands each column on exactly 588px. */
/* The layout block wraps every row in .custom-product-page, not .product-main —
   Flatsome's stock wrapper is absent when product_layout is 'custom'. */
.single-product .custom-product-page > .row{
  max-width:1272px!important;margin-left:auto;margin-right:auto;
}
.single-product .custom-product-page > .row > .col{padding-left:24px;padding-right:24px;}

/* The breadcrumb is injected as a full-bleed html block; align it to the same
   content column instead of letting it start at the viewport edge. */
.single-product .x-pd-crumb{
  max-width:1224px;margin:0 auto;padding:22px 24px 0;
}

@media (max-width:849px){
  .single-product .custom-product-page > .row > .col{padding-left:15px;padding-right:15px;}
  .single-product .x-pd-crumb{padding:16px 15px 0;}
}

/* ------------------------------------------------------------- gallery */
/* Flatsome runs the thumbnails as a Flickity slider with a -10px bleed, so the
   strip measures 608px against a 588px column and the cells render 130px. The
   prototype's .pd-thumbs is a plain 88px row, 12px gap, left aligned — five
   thumbs fit in 488px, so the slider has nothing to slide and is flattened
   rather than fought. Overrides are !important because Flickity writes the
   position and offset as inline styles. */
.single-product .product-thumbnails{
  margin:14px 0 0!important;width:100%;max-width:100%;
}
.single-product .product-thumbnails .flickity-viewport{height:auto!important;}
.single-product .product-thumbnails .flickity-slider{
  position:static!important;transform:none!important;
  display:flex;flex-wrap:wrap;gap:12px;
}
.single-product .product-thumbnails .col{
  position:static!important;left:auto!important;
  width:88px!important;max-width:88px;flex:0 0 88px;padding:0!important;
}
.single-product .product-thumbnails .col-inner,
.single-product .product-thumbnails .box-image{width:88px;}
.single-product .product-thumbnails img{
  width:88px;height:88px;object-fit:cover;
  border:1px solid var(--ct-line);
}
.single-product .product-thumbnails .flickity-button{display:none!important;}
/* .pd-gallery stacks the shot and the strip with a 14px gutter. */
.single-product .product-gallery .woocommerce-product-gallery__wrapper{margin-bottom:0;}

/* ------------------------------------------------------------ stage */
/* `.pd-stage` is a bordered 4/5 frame over the warm placeholder, capped at
   620px so a tall shot cannot outgrow the column. Woo renders the photograph at
   its own ratio inside Flatsome's slider, which left a square frame with no
   edge. The ratio is set on the slide rather than the slider so Flickity keeps
   owning the track it positions. */
.single-product .product-images{
  position:relative;border:1px solid var(--ct-line);background:#fff;overflow:hidden;
}
.single-product .woocommerce-product-gallery__image{
  aspect-ratio:4/5;max-height:620px;
}
.single-product .woocommerce-product-gallery__image img{
  width:100%;height:100%;object-fit:cover;
}
/* `.pd-thumb.is-active` — Flatsome marks the current cell through Flickity's
   nav class, so the prototype's selected state hangs off that. */
.single-product .product-thumbnails .col.is-nav-selected img,
.single-product .product-thumbnails .col.is-selected img{
  border-color:#0E1013;box-shadow:3px 3px 0 var(--ct-red);
}

/* ==========================================================================
   Prototype v2 — shell, back bar, hero frame, gallery
   `product.html` was redesigned on 2026-09-17. The breadcrumb, the facts list,
   the accordion, the note under the price, the sticky info column and the red
   notch are all gone from it; what follows is the frame the new page sits in.
   Plan: plans/260917-1007-product-page-report-v2/phase-01-shell-and-hero.md
   ========================================================================== */

/* The page surface is cream. Flatsome paints white on the wrapper as well as the
   body, so both are named or the hero sits in a white box on a cream page. */
body.single-product,
.single-product #main,
.single-product .page-wrapper{background:var(--ct-cream);}

/* `.pd-bar` / `.pd-back` — one backwards link where the breadcrumb was. The rule
   runs full width; the link inside it holds the content measure, so the hit area
   stays the size of the label rather than the row. */
.single-product .x-pd-bar{border-bottom:1px solid var(--ct-line);}
.single-product .x-pd-wrap{max-width:1272px;margin:0 auto;padding:0 24px;}
.single-product .x-pd-back{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  color:var(--ct-quiet);text-decoration:none;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.single-product .x-pd-back:hover{color:#0E1013;text-decoration:underline;text-underline-offset:4px;}
.single-product .x-pd-back svg{width:15px;height:15px;flex:none;}
/* A two-word nav label with a full row to itself should never break. */
.single-product .x-pd-back span{white-space:nowrap;}

/* `.pd-hero` — the band the gallery and buy column share. */
.single-product .x-pd-hero{
  padding:26px 0 52px;border-bottom:3px solid var(--ct-ink);
}
/* `.pd-main` is 1.12fr / 1fr with a 52px gutter. Flatsome's span="6" split is 1:1,
   so the columns are given their widths here instead of through the attribute. */
/* The two columns carry 100px of padding between them (24 left of the gallery, the
   52px gutter and 24 right of the buy column), so the 1.12:1 split is taken over
   what is left rather than over the row: 1.12/2.12 of (100% - 100px), plus that
   column's own 24px. Subtracting the gutter from both columns, as a first pass
   did, loses it twice and leaves the row 52px short. */
@media (min-width:850px){
  .single-product .x-pd-hero > .col.large-6:first-child{
    flex:0 0 calc(52.83% - 28.8px);max-width:calc(52.83% - 28.8px);
    padding-left:24px;padding-right:0;
  }
  .single-product .x-pd-hero > .col.large-6:last-child{
    flex:0 0 calc(47.17% + 28.8px);max-width:calc(47.17% + 28.8px);
    padding-left:52px;padding-right:24px;
  }
}

/* `.pd-gallery` — 88px of thumbnails down the left, stage to their right. Woo
   renders the strip as a sibling under the stage, so the column is the grid and
   the two children are placed into it. */
@media (min-width:881px){
  .single-product .x-pd-gallery > .col-inner{
    display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start;
  }
  .single-product .x-pd-gallery .product-thumbnails{
    grid-column:1;grid-row:1;margin:0!important;width:88px;max-width:88px;
  }
  .single-product .x-pd-gallery .product-images{grid-column:2;grid-row:1;}
  /* Stacked, not in a row — the flattened Flickity track runs down the column. */
  .single-product .x-pd-gallery .product-thumbnails .flickity-slider{
    flex-direction:column;flex-wrap:nowrap;gap:12px;
  }
}
/* `.pd-thumb` — a 4/5 tile; the selected one is a red border now, not a shadow. */
.single-product .product-thumbnails img{
  width:88px;height:auto;aspect-ratio:4/5;object-fit:cover;
  border:1px solid var(--ct-line);background:#fff;
  transition:border-color .16s ease;
}
.single-product .product-thumbnails .col:hover img{border-color:rgba(0,0,0,.45);}
.single-product .product-thumbnails .col.is-nav-selected img,
.single-product .product-thumbnails .col.is-selected img{
  border:2px solid var(--ct-red-ink);box-shadow:none;
}

@media (max-width:1080px){
  .single-product .x-pd-hero > .col.large-6:first-child,
  .single-product .x-pd-hero > .col.large-6:last-child{
    flex:0 0 100%;max-width:100%;padding-left:24px;padding-right:24px;
  }
}
@media (max-width:880px){
  /* The strip goes back under the stage, horizontal, at 76px. */
  .single-product .x-pd-gallery .product-thumbnails{order:2;width:100%;max-width:100%;}
  .single-product .product-thumbnails img{width:76px;}
  .single-product .x-pd-hero{padding:20px 0 36px;}
}

/* ==========================================================================
   Prototype v2 — buy column
   Plan: plans/260917-1007-product-page-report-v2/phase-02-buy-column.md
   ========================================================================== */

.single-product .x-pd-kicker{margin:0 0 12px;}

/* `.pd-rating` */
.single-product .x-pd-rating{display:flex;align-items:center;gap:12px;margin:16px 0 0;}
.single-product .x-pd-stars{display:inline-flex;gap:2px;}
.single-product .x-pd-star svg{width:17px;height:17px;display:block;color:rgba(0,0,0,.18);}
.single-product .x-pd-star.is-on svg{color:var(--ct-red);}
.single-product .x-pd-score{font-size:15px;font-weight:900;color:#0E1013;font-variant-numeric:tabular-nums;}
.single-product .x-pd-revlink{
  color:#0E1013;font-size:13px;font-weight:800;
  text-decoration:underline;text-underline-offset:4px;
}
.single-product a.x-pd-revlink:hover{color:#000;}
/* Nothing to link to until a review exists. */
.single-product .x-pd-revlink.is-empty{color:var(--ct-quiet);text-decoration:none;font-weight:700;}

/* `.pd-blurb` */
.single-product .x-pd-blurb{
  margin:18px 0 0;max-width:52ch;
  font-size:15px;line-height:1.7;color:var(--ct-quiet);
}

/* `.pd-pricerow`. The prototype's `.pd-hr` is a 1px ink rule with 24px either
   side; as a border on the block it needs no element of its own. */
.single-product .x-pd-pricebox{
  margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--ct-ink);
}
.single-product .x-pd-pricerow{display:flex;align-items:center;flex-wrap:wrap;gap:14px;}
.single-product .x-pd-price,
.single-product .x-pd-price .woocommerce-Price-amount{
  margin:0;color:#0E1013;font-size:40px;font-weight:900;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;
}
.single-product .x-pd-was,
.single-product .x-pd-was .woocommerce-Price-amount{
  color:var(--ct-quiet);font-size:19px;font-weight:700;
  text-decoration:line-through;font-variant-numeric:tabular-nums;
}
.single-product .x-pd-save{
  padding:7px 11px;background:var(--ct-red-ink);color:#fff;
  font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.single-product .x-pd-save .woocommerce-Price-amount{color:inherit;font-size:inherit;font-weight:inherit;}
.single-product .x-pd-tax{margin:10px 0 0;font-size:12px;font-weight:700;color:var(--ct-quiet);}

/* `.pd-stock` */
.single-product .x-pd-stock{
  margin:24px 0 0;padding:16px 18px;
  border:2px solid var(--ct-red);background:#fff;
}
.single-product .x-pd-stock-h{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  color:#0E1013;font-size:15px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;
}
.single-product .x-pd-stock-h svg{width:18px;height:18px;flex:none;color:var(--ct-red-ink);}
.single-product .x-pd-stock-track{display:block;height:7px;background:rgba(0,0,0,.10);overflow:hidden;}
.single-product .x-pd-stock-fill{display:block;height:100%;background:var(--ct-red);}
.single-product .x-pd-stock-note{margin:10px 0 0;font-size:12px;font-weight:600;color:var(--ct-quiet);}

/* ------------------------------------------------------ variation tiles */
/* `.pd-optlabel` + `.pd-sizes`. Woo prints the attributes as a table, so the
   label sits in a cell beside its options; the prototype stacks them. The table
   parts are un-tabled rather than the form being rebuilt, which leaves the
   swatch plugin owning the availability logic that disables impossible pairs. */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations th,
.single-product .variations td{display:block;width:auto;padding:0;border:0;}
.single-product .variations th.label{
  margin:26px 0 10px;padding:0;
  color:#0E1013;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
}
.single-product .variations th.label label{margin:0;font:inherit;color:inherit;}

/* `.pd-sizes` — a four-up grid that wraps. Both attributes stay, so a product
   with twenty terms runs to five rows instead of being cut to the design's one. */
.single-product ul.variable-items-wrapper{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0;
}
.single-product li.button-variable-item{
  margin:0!important;min-height:48px;padding:0!important;
  border-radius:0!important;border:1px solid var(--ct-ink)!important;
  background:#fff!important;box-shadow:none!important;
  transition:background-color .16s ease;
}
.single-product li.button-variable-item .variable-item-span{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 8px;
  color:#0E1013;font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.single-product li.button-variable-item:hover{background:#E8E0D4!important;}
.single-product li.button-variable-item.selected,
.single-product li.button-variable-item[aria-checked="true"]{
  background:var(--ct-red-ink)!important;border-color:var(--ct-red-ink)!important;
}
.single-product li.button-variable-item.selected .variable-item-span,
.single-product li.button-variable-item[aria-checked="true"] .variable-item-span{color:#fff;}
.single-product li.button-variable-item.selected:hover,
.single-product li.button-variable-item[aria-checked="true"]:hover{background:#A50A0A!important;}
/* Disabled is the one state allowed to drop contrast. */
.single-product li.button-variable-item.disabled,
.single-product li.button-variable-item.out-of-stock{opacity:.4;border-style:dashed!important;}
.single-product li.button-variable-item:focus-visible{outline:3px solid var(--ct-red-ink);outline-offset:3px;}

/* ------------------------------------------------------------- buy row */
/* `.pd-qtyrow` — stepper then a filling add-to-cart. */
.single-product form.cart{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-top:20px;}
.single-product form.cart .variations,
.single-product form.cart .woocommerce-variation{flex:1 1 100%;}
.single-product .cart .ux-quantity{
  border:1px solid var(--ct-ink);background:#fff;height:48px;flex:none;
}
.single-product .cart .ux-quantity__button{
  width:48px;height:46px;border:0;border-radius:0;background:none;
  color:#0E1013;font-size:19px;font-weight:800;
}
.single-product .cart .ux-quantity__button:hover{background:#E8E0D4;}
.single-product .cart .ux-quantity input.qty{
  width:56px;height:46px;border:0;border-radius:0;background:none;
  text-align:center;font-size:15px;font-weight:900;color:#0E1013;
}
/* `.pd-add` */
.single-product .cart .single_add_to_cart_button{
  flex:1 1 auto;min-height:56px;padding:0 20px;border-radius:0;border:0;
  background:var(--ct-red-ink);color:#fff;
  font-size:14px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  transition:background .16s ease;
}
.single-product .cart .single_add_to_cart_button:hover{background:#A50A0A;}

/* `.pd-secure` */
.single-product .x-pd-secure{
  margin:14px 0 0;text-align:center;font-size:12px;font-weight:600;color:var(--ct-quiet);
}

@media (max-width:520px){
  .single-product ul.variable-items-wrapper{grid-template-columns:repeat(2,1fr);}
  .single-product .cart .single_add_to_cart_button{flex:1 0 100%;width:100%;}
}

/* ==========================================================================
   Prototype v2 — tab strip + trust row
   Plan: plans/260917-1007-product-page-report-v2/phase-03-tabs-and-trust.md
   ========================================================================== */

/* `.pd-tabsec` */
.single-product .x-pd-tabsec{padding:44px 0 52px;border-bottom:3px solid var(--ct-ink);}
.single-product .x-pd-tabs{max-width:1272px;margin:0 auto;padding:0 24px;}

/* `.pd-tablist`. The column count comes from the strip itself, so a tab whose
   source is empty is dropped without leaving a gap in the grid. */
.single-product .x-pd-tablist{
  display:grid;grid-template-columns:repeat(var(--x-pd-tabcount,4),1fr);
  border:1px solid var(--ct-ink);border-bottom:0;background:#fff;
}
.single-product .x-pd-tab{
  /* Flatsome spaces every `button` with `margin:0 12px 12px 0`. Inside the grid
     that left each tab 12px short of its column — a white sliver down the right
     of the active fill — and 12px short of the strip's height, so the fill never
     reached the panel below it. */
  margin:0;width:100%;
  min-height:54px;padding:0 12px;cursor:pointer;
  background:#fff;border:0;border-right:1px solid var(--ct-line);border-radius:0;
  font-family:inherit;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ct-quiet);
  transition:background .16s ease,color .16s ease;
}
.single-product .x-pd-tab:last-child{border-right:0;}
.single-product .x-pd-tab:hover{background:var(--ct-cream);color:#0E1013;}
.single-product .x-pd-tab[aria-selected="true"]{background:var(--ct-red-ink);color:#fff;}
.single-product .x-pd-tab:focus-visible{outline:3px solid var(--ct-red-ink);outline-offset:-3px;}

/* `.pd-panel` */
.single-product .x-pd-panel{
  border:1px solid var(--ct-ink);background:#fff;padding:30px 32px 32px;
}
.single-product .x-pd-panel[hidden]{display:none;}
.single-product .x-pd-panel h2{
  margin:0 0 16px;color:#0E1013;
  font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1.05;
}
.single-product .x-pd-panel p{
  margin:0 0 14px;max-width:88ch;font-size:15px;line-height:1.75;color:var(--ct-quiet);
}
.single-product .x-pd-panel p:last-child{margin-bottom:0;}

/* `.pd-marks` */
.single-product .x-pd-marks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:22px 0 0;padding:0;list-style:none;
}
.single-product .x-pd-marks li{
  margin:0;padding-left:14px;border-left:4px solid var(--ct-red);
  color:#0E1013;font-size:13px;font-weight:800;line-height:1.5;
}

/* `.pd-trust` */
.single-product .x-pd-trust{padding:34px 0;background:#fff;border-bottom:1px solid var(--ct-line);}
.single-product .x-pd-trust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);background:var(--ct-cream);
  max-width:1272px;margin:0 auto;
}
.single-product .x-pd-trust-cell{
  padding:26px 24px;text-align:center;border-right:1px solid rgba(0,0,0,.10);
}
.single-product .x-pd-trust-cell:last-child{border-right:0;}
.single-product .x-pd-trust-cell svg{width:24px;height:24px;margin:0 auto 12px;color:var(--ct-red);}
.single-product .x-pd-trust-cell b{
  display:block;color:#0E1013;font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.single-product .x-pd-trust-cell span{display:block;margin-top:6px;font-size:13px;color:var(--ct-quiet);}

@media (max-width:880px){
  /* Two up, so the borders that divided four columns have to be redrawn. */
  .single-product .x-pd-tablist{grid-template-columns:1fr 1fr;}
  .single-product .x-pd-tab:nth-child(2){border-right:0;}
  .single-product .x-pd-tab:nth-child(-n+2){border-bottom:1px solid var(--ct-line);}
  .single-product .x-pd-panel{padding:22px 20px 24px;}
  .single-product .x-pd-marks{grid-template-columns:1fr;gap:12px;}
  .single-product .x-pd-trust-grid{grid-template-columns:1fr;}
  .single-product .x-pd-trust-cell{border-right:0;border-bottom:1px solid rgba(0,0,0,.10);}
  .single-product .x-pd-trust-cell:last-child{border-bottom:0;}
  .single-product .x-pd-tabs{padding:0 20px;}
}

/* ==========================================================================
   Prototype v2 — review band + related strip
   Plan: plans/260917-1007-product-page-report-v2/phase-04-reviews-and-related.md
   ========================================================================== */

/* `.pd-rev` — the one section on an inverted surface. */
.single-product .x-pd-rev{background:var(--ct-deep);color:#fff;padding:62px 0 68px;}
.single-product .x-pd-rev .x-pd-kicker{color:var(--ct-red);margin:0 0 12px;}
.single-product .x-pd-rev-grid{
  display:grid;grid-template-columns:0.62fr 1fr;gap:48px;align-items:start;
}
.single-product .x-pd-rev-score{display:flex;align-items:center;gap:6px;}
.single-product .x-pd-rev-score b{
  font-size:62px;font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;
}
.single-product .x-pd-rev-score svg{width:52px;height:52px;color:var(--ct-red);}
.single-product .x-pd-rev-based{margin:12px 0 26px;font-size:14px;font-weight:800;color:rgba(255,255,255,.88);}

.single-product .x-pd-bars{display:grid;gap:9px;}
/* Named apart from `.x-pd-bar`, which is the back-link bar at the top of the
   page — sharing the name had each rule set styling the other's element. */
.single-product .x-pd-revbar{
  display:grid;grid-template-columns:30px 1fr 38px;gap:12px;align-items:center;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.80);
}
.single-product .x-pd-revbar-track{height:7px;background:rgba(255,255,255,.14);overflow:hidden;}
.single-product .x-pd-revbar-fill{display:block;height:100%;background:var(--ct-red);}
.single-product .x-pd-revbar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;}

.single-product .x-pd-rev-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.single-product .x-pd-rev-card{
  padding:22px 24px 24px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);
}
.single-product .x-pd-rev-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;
}
.single-product .x-pd-rev-top .x-pd-star svg{width:15px;height:15px;}
.single-product .x-pd-rev-top .x-pd-star svg{color:rgba(255,255,255,.22);}
.single-product .x-pd-rev-top .x-pd-star.is-on svg{color:var(--ct-red);}
.single-product .x-pd-rev-check{width:17px;height:17px;color:var(--ct-red);flex:none;}
.single-product .x-pd-rev-card h3{
  margin:0 0 10px;color:#fff;font-size:15px;font-weight:900;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.3;
}
.single-product .x-pd-rev-card blockquote{
  margin:0 0 16px;padding:0;border:0;font-size:14px;line-height:1.65;color:rgba(255,255,255,.78);
}
.single-product .x-pd-rev-by{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);
}
.single-product .x-pd-rev-by svg{width:13px;height:13px;color:var(--ct-red);flex:none;}
/* Nothing to quote yet. The column still holds its place beside the score. */
.single-product .x-pd-rev-empty{
  margin:0;align-self:center;font-size:15px;color:rgba(255,255,255,.62);
}
.single-product .x-pd-rev :focus-visible{outline-color:#fff;}

/* `.pd-related` */
.single-product .x-pd-related{padding:58px 0 72px;background:#fff;border-top:1px solid var(--ct-line);}
.single-product .x-pd-rel-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;
}
.single-product .x-pd-rel-title{
  margin:0;color:#0E1013;font-size:clamp(24px,2.9vw,36px);font-weight:900;
  letter-spacing:-.045em;text-transform:uppercase;line-height:1;
}
.single-product .x-pd-rel-title span{color:var(--ct-red);}
.single-product .x-pd-rel-all{
  color:#0E1013;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:4px;white-space:nowrap;
}
.single-product .x-pd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
/* `.pd-card` — a border that moves on hover, no shadow and no notch. */
.single-product .x-pd-card{
  display:block;border:1px solid var(--ct-line);background:#fff;text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
.single-product .x-pd-card:hover{border-color:var(--ct-ink);transform:translateY(-3px);}
.single-product .x-pd-card-media{display:block;background:var(--ct-cream);}
.single-product .x-pd-card-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;}
.single-product .x-pd-card-info{display:block;padding:14px 15px 17px;}
.single-product .x-pd-card-col{
  display:block;margin:0 0 6px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
/* The catalogue carries full SEO names, the same reason the collection card
   clamps. Two lines here as well, so a long name cannot push the price out of
   line with the tile beside it. */
.single-product .x-pd-card-name{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  margin:0 0 8px;color:#0E1013;font-size:14px;font-weight:800;line-height:1.35;
}
.single-product .x-pd-card-price,
.single-product .x-pd-card-price .woocommerce-Price-amount{
  display:block;margin:0;color:#0E1013;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;
}

@media (max-width:1080px){
  .single-product .x-pd-rev-grid{grid-template-columns:1fr;gap:30px;}
  .single-product .x-pd-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:880px){
  .single-product .x-pd-rev-cards{grid-template-columns:1fr;}
  .single-product .x-pd-rel-head{flex-direction:column;align-items:flex-start;}
}

/* CusRev opens its shortcode with its own score, stars and histogram. The band
   above now carries all three, so the plugin's copy of them is hidden and only
   the part the design has no equivalent for is kept: the review list and the
   form a customer writes through. Hiding rather than removing the shortcode is
   deliberate — dropping it would take the submission form with it. */
.single-product .cr-all-reviews-shortcode .cr-summaryBox-wrap{display:none;}

/* The recently viewed strip reuses the related band wholesale and only changes
   its surface: two white bands stacked would read as one long band, and cream
   keeps the page's alternation going into the footer. */
.single-product .x-pd-related--viewed{background:var(--ct-cream);}

/* A long product name steps the headline down. 52px is right for the two or
   three words the design was drawn with; at ninety-odd characters it runs to
   five lines and pushes the price below the fold. */
.single-product.x-pd-longname .product-title,
.single-product.x-pd-longname .product-title a{
  font-size:clamp(26px,2.4vw,34px);line-height:1.02;letter-spacing:-.035em;
}

/* Sticky gallery. The design has no sticky column — its buy column is short
   enough to sit beside the stage. Here the column carries two attribute grids,
   the bundle table and the tier box, so it runs far past the gallery and the
   shot would otherwise scroll away from the options being chosen. The offset
   clears the stuck header. */
@media (min-width:881px){
  .single-product .x-pd-gallery > .col-inner{position:sticky;top:94px;}
}