/* ==========================================================================
   Shop archive and single product.
   Loaded only on WooCommerce pages. See ssc_is_commerce_page().

   Note the restraint here compared to the editorial pages: no decorative
   shapes, quieter cards, nothing competing with the photograph or the
   Add to bag button. Direction A discipline on the commerce surfaces.
   ========================================================================== */

.ssc-shop-wrap { padding-block: var(--ssc-section); }

.woocommerce-products-header { margin-bottom: 1.25rem; }
.woocommerce-products-header__title,
.ssc-shop-wrap .page-title {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  line-height: 1;
}
.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description {
  font-family: var(--ssc-f-ui);
  color: var(--ssc-ink-soft);
  max-width: 60ch;
  margin: .65rem auto 0;
}

/* Woo prints its own ul.products; make it the theme grid. */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ssc-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1000px) { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

ul.products > .ssc-card:nth-child(4n+2) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-turq); }
ul.products > .ssc-card:nth-child(4n+3) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-magenta); }
ul.products > .ssc-card:nth-child(4n+4) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-mustard); }

.woocommerce-ordering select {
  font-family: var(--ssc-f-ui);
  font-size: .9rem;
  padding: .5rem .7rem;
  border: 2px solid var(--ssc-ink);
  border-radius: 0;
  background: var(--ssc-paper);
  color: var(--ssc-ink);
}
.woocommerce-ordering { margin-bottom: 1.5rem; }

/* price */
.ssc-card .price, .woocommerce-Price-amount {
  font-family: var(--ssc-f-ui);
  font-size: .95rem;
  font-weight: 700;
}
.ssc-card .price del { color: var(--ssc-neutral); font-weight: 500; margin-right: .35rem; }
.ssc-card .price ins { text-decoration: none; color: var(--ssc-magenta); }

/* rating */
.ssc-rating {
  --ssc-rating: 0;
  display: inline-block;
  position: relative;
  width: 5.2em;
  height: 1em;
  font-size: .85rem;
  background: linear-gradient(var(--ssc-ground-2), var(--ssc-ground-2));
}
.ssc-rating::before,
.ssc-rating__fill::before {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  inset: 0;
  letter-spacing: .06em;
  line-height: 1;
}
.ssc-rating::before { color: var(--ssc-ground-2); }
.ssc-rating__fill {
  position: absolute;
  inset: 0;
  width: calc(var(--ssc-rating) * 1%);
  overflow: hidden;
  color: var(--ssc-mustard);
}

/* ---------- single product ---------- */

.single-product .ssc-shop-wrap > .ssc-container { }

.product .summary, .woocommerce-product-gallery { min-width: 0; }

.ssc-shop-wrap { --ssc-pdp-gap: clamp(1rem, 2.2vw, 1.75rem); }

/*
 * The gallery column is sized by the gallery, capped at just over half the row.
 *
 * A plain fr track assumes the gallery will fill whatever column it is given.
 * The stock Woo gallery does (width:100%), but a gallery plugin may size itself
 * instead, and then the column keeps its fr width while the gallery sits
 * narrower inside it. That left ~104px of dead space between the thumb rail and
 * the summary, on top of the 28px gap, and no amount of tuning --ssc-pdp-gap
 * touched it because the gap was never the problem.
 *
 * fit-content() covers both without the theme knowing which is in play: it
 * sizes to the gallery's own width, so a self-sizing gallery gets exactly the
 * room it takes, and clamps at 52% so a stock gallery (whose max-content is the
 * full source image, ~1349px) cannot swallow the summary column.
 *
 * Do NOT "fix" a narrow gallery by forcing width:100% on it. Ledge style thumb
 * rails are position:absolute against the gallery box, so stretching the box
 * parks the rail at the far edge and opens a much bigger hole than it closes.
 * Let the gallery own its width; the column follows it.
 */
div.product {
  display: grid;
  grid-template-columns: fit-content(52%) minmax(0, 1fr);
  gap: var(--ssc-pdp-gap);
  align-items: start;
}
@media (max-width: 860px) { div.product { grid-template-columns: 1fr; } }

/* Gallery skin lives in the native gallery block at the bottom of this file. */
.woocommerce-product-gallery { background: none; border: 0; }

.product_title {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.04;
}
.summary > * + * { margin-top: 1rem; }
.summary .price { font-family: var(--ssc-f-ui); font-size: 1.35rem; font-weight: 700; }
.woocommerce-product-details__short-description { font-family: var(--ssc-f-ui); font-size: .98rem; color: var(--ssc-ink-soft); }

.quantity { display: inline-flex; align-items: center; border: var(--ssc-rule) solid var(--ssc-ink); background: var(--ssc-paper); }
.quantity input[type="number"] {
  width: 3.5rem;
  border: 0;
  text-align: center;
  font-family: var(--ssc-f-ui);
  font-weight: 700;
  padding: .5rem 0;
  background: transparent;
  color: var(--ssc-ink);
}

.single_add_to_cart_button,
.woocommerce button.button.alt {
  font-family: var(--ssc-f-ui);
  font-weight: 700;
  font-size: 1rem;
  background: var(--ssc-magenta);
  color: #fff;
  border: var(--ssc-rule) solid var(--ssc-ink);
  border-radius: var(--ssc-radius-pill);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-ink);
  padding: .75em 1.6em;
  cursor: pointer;
  transition: transform var(--ssc-fast) var(--ssc-ease), box-shadow var(--ssc-fast) var(--ssc-ease);
}
.single_add_to_cart_button:hover { transform: translate(-1px, -1px); }
.single_add_to_cart_button:active { transform: translate(var(--ssc-offset), var(--ssc-offset)); box-shadow: 0 0 0 var(--ssc-ink); }

.variations { width: 100%; }
.variations th { text-align: left; font-family: var(--ssc-f-ui); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .5rem 0; }
.variations select {
  width: 100%;
  font-family: var(--ssc-f-ui);
  padding: .55rem .7rem;
  border: 2px solid var(--ssc-ink);
  border-radius: 0;
  background: var(--ssc-paper);
  color: var(--ssc-ink);
}

.product_meta { font-family: var(--ssc-f-ui); font-size: .82rem; color: var(--ssc-neutral); }
.product_meta a { color: var(--ssc-ink-soft); }

.woocommerce-tabs { grid-column: 1 / -1; margin-top: 3rem; }
.woocommerce-tabs ul.tabs { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.25rem; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  font-family: var(--ssc-f-ui);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ssc-ink);
  padding: .45rem .9rem;
}
.woocommerce-tabs ul.tabs li.active a { background: var(--ssc-ink); color: #fff; }
.woocommerce-tabs .panel { font-family: var(--ssc-f-ui); max-width: 68ch; }

.related.products, .upsells.products { grid-column: 1 / -1; margin-top: 3.5rem; }
.related.products > h2, .upsells.products > h2 {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 1.25rem;
}

/* Woo notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  font-family: var(--ssc-f-ui);
  font-size: .92rem;
  border: var(--ssc-rule) solid var(--ssc-ink);
  background: var(--ssc-paper);
  padding: .85rem 1.1rem;
  margin-bottom: 1.5rem;
  list-style: none;
}
.woocommerce-message { border-left-width: 6px; border-left-color: var(--ssc-turq); }
.woocommerce-error { border-left-width: 6px; border-left-color: var(--ssc-magenta); }

/* ==========================================================================
   PRODUCT PAGE AND SHOP FIXES
   Every rule here answers a specific reported defect.
   ========================================================================== */

/* --- 1. Native Woo gallery fills the product-grid column. FlexSlider owns
       slide width/transform; do not !important those. */

.woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
  opacity: 1 !important;
}

/* --- 2. Shop pagination rendered as nine stacked rows: ul.page-numbers is
       inline-block with list-item children in Woo's own CSS. --- */

.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul.page-numbers {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  list-style: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}
.woocommerce-pagination ul.page-numbers li,
nav.woocommerce-pagination ul.page-numbers li {
  display: block !important;
  list-style: none !important;
  float: none !important;
  border: 0 !important;
  margin: 0;
  overflow: visible;
}
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
  display: block;
  font-family: var(--ssc-f-ui);
  font-weight: 700;
  font-size: .9rem;
  min-width: 2.6rem;
  text-align: center;
  padding: .45rem .75rem;
  border: 2px solid var(--ssc-ink);
  background: var(--ssc-paper);
  color: var(--ssc-ink);
  text-decoration: none;
  transition: transform var(--ssc-fast) var(--ssc-ease), box-shadow var(--ssc-fast) var(--ssc-ease);
}
.woocommerce-pagination .page-numbers a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ssc-turq); }
.woocommerce-pagination .page-numbers span.current { background: var(--ssc-ink); color: var(--ssc-blush); }
.woocommerce-pagination { margin-top: 2.5rem; display: flex; justify-content: center; }

/* --- 6. Variation rows: Woo ships a <table>, which put a 201px label cell
       beside a 367px select with a gap in the middle. Rebuilt as a grid. --- */

.woocommerce div.product form.cart .variations,
form.cart table.variations {
  display: grid !important;
  gap: 1rem;
  width: 100%;
  margin: 0 0 1.25rem;
  border: 0;
}
form.cart table.variations tbody,
form.cart table.variations tr {
  display: contents !important;
}
form.cart table.variations th,
form.cart table.variations td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}
form.cart table.variations th.label label {
  font-family: var(--ssc-f-ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ssc-ink);
  display: block;
  margin-bottom: .4rem;
}
form.cart table.variations td.value { margin-bottom: .25rem; }
form.cart table.variations select {
  width: 100%;
  max-width: 100%;
  font-family: var(--ssc-f-ui);
  font-size: .95rem;
  font-weight: 500;
  padding: .7rem .8rem;
  border: var(--ssc-rule) solid var(--ssc-ink);
  border-radius: 0;
  background: var(--ssc-paper);
  color: var(--ssc-ink);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ssc-ink) 50%), linear-gradient(135deg, var(--ssc-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - .8rem) 1.25rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.woocommerce div.product form.cart .reset_variations {
  font-family: var(--ssc-f-ui);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ssc-magenta);
  display: inline-block;
  margin-top: .4rem;
}
.woocommerce-variation-price { margin-bottom: 1rem; }
.woocommerce-variation-price .price { font-family: var(--ssc-f-ui); font-size: 1.25rem; font-weight: 700; }

/* Quantity and Add to cart sat cramped together with no rhythm. */
.woocommerce div.product form.cart,
form.cart.variations_form,
form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
  margin-top: 1.25rem;
}
form.cart .variations,
form.cart .woocommerce-variation,
form.cart .woocommerce-variation-price,
form.cart .woocommerce-variation-availability { flex: 1 0 100%; }

form.cart .quantity {
  display: flex;
  align-items: stretch;
  width: max-content;
  border: var(--ssc-rule) solid var(--ssc-ink);
  background: var(--ssc-paper);
  flex: 0 0 auto;
}
/* Woo ships a label inside .quantity; it was taking flex space. */
form.cart .quantity label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
form.cart .quantity input[type="number"] {
  width: 4.25rem;
  border: 0;
  text-align: center;
  font-family: var(--ssc-f-ui);
  font-size: 1rem;
  font-weight: 700;
  padding: .85rem .4rem;   /* vertical padding was 0, so the box was 23px tall */
  line-height: 1.2;
  background: transparent;
  color: var(--ssc-ink);
  -moz-appearance: textfield;
}
form.cart .quantity input::-webkit-outer-spin-button,
form.cart .quantity input::-webkit-inner-spin-button { opacity: 1; }

form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 12rem;
  max-width: 22rem;
}
form.cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* --- 5. Description block runs the full page and carries an assurance strip. */

.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: var(--ssc-rule) solid var(--ssc-ink);
}
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: none;
  font-family: var(--ssc-f-ui);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ssc-ink);
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-tabs .panel p { max-width: 76ch; }
.woocommerce div.product .woocommerce-tabs .panel p + p { margin-top: 1rem; }
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol { padding-left: 1.3rem; max-width: 74ch; }
.woocommerce div.product .woocommerce-tabs .panel li + li { margin-top: .35rem; }
.woocommerce div.product .woocommerce-tabs .panel img { border: var(--ssc-rule) solid var(--ssc-ink); }

/* Die-cut assurance cards. Same construction as product cards and FAQ. */
.ssc-assure {
  width: 100%;
  background: var(--ssc-paper);
  border-top: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: clamp(1.75rem, 3.6vw, 2.85rem);
}
.ssc-assure .ssc-wide { width: var(--ssc-shell); margin-inline: auto; }
.ssc-assure__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ssc-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .ssc-assure__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ssc-assure__grid { grid-template-columns: 1fr; } }
.ssc-assure__item {
  background: #fff;
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-turq);
  padding: 1.05rem 1.1rem 1.15rem;
}
.ssc-assure__item:nth-child(2) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-magenta); }
.ssc-assure__item:nth-child(3) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-mustard); }
.ssc-assure__item:nth-child(4) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-ink); }
.ssc-assure__h {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.05;
  margin: 0 0 .45rem;
}
.ssc-assure__p {
  margin: 0;
  font-family: var(--ssc-f-ui);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ssc-ink-soft);
}



/* --- variable products: qty and Add to cart sit inside two nested wrappers --- */

form.cart .single_variation_wrap { flex: 1 0 100%; width: 100%; }
form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
  margin-top: 1rem;
}
form.cart .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 12rem;
  max-width: 22rem;
}
form.cart .woocommerce-variation-description { flex: 1 0 100%; font-family: var(--ssc-f-ui); font-size: .95rem; color: var(--ssc-ink-soft); }
form.cart .woocommerce-variation-availability { font-family: var(--ssc-f-ui); font-size: .9rem; }

/* ---------- WooCommerce native gallery (FlexSlider + thumbs + zoom) ----------
   This theme dequeues woocommerce-general, so the layout FlexSlider needs has
   to live here. Do not set transform or slide width with !important: Woo's
   slider positions the wrapper with translate3d and sizes each slide in px.
   -------------------------------------------------------------------------- */

.woocommerce div.product div.images.woocommerce-product-gallery {
  position: relative;
  opacity: 1 !important;
  margin-bottom: 0;
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}

/*
 * Before FlexSlider inits, extra slides would stack and blow the layout. Hide
 * them with a normal declaration so FlexSlider's inline display wins after.
 */
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n + 2) {
  display: none;
}

/* Frame the visible stage: the viewport after init, the wrapper before it. */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  border: 3px solid var(--ssc-ink);
  background: var(--ssc-paper);
  box-shadow: 8px 8px 0 var(--ssc-turq);
}
.woocommerce-product-gallery .flex-viewport {
  overflow: hidden;
}

.woocommerce-product-gallery__image a {
  display: block;
}
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image--placeholder img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.woocommerce-product-gallery:not(.bossy-gallery-ledge):not(.bossy-gallery-ledge-reverse) .flex-control-thumbs,
.woocommerce-product-gallery:not(.bossy-gallery-ledge):not(.bossy-gallery-ledge-reverse) ol.flex-control-nav.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  overflow: visible;
  zoom: 1;
}
@media (max-width: 520px) {
  .woocommerce-product-gallery:not(.bossy-gallery-ledge):not(.bossy-gallery-ledge-reverse) .flex-control-thumbs,
  .woocommerce-product-gallery:not(.bossy-gallery-ledge):not(.bossy-gallery-ledge-reverse) ol.flex-control-nav.flex-control-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Bossy ledge: thumbs are a side rail. Do not use the 5-across strip or top margin. */
.woocommerce-product-gallery.bossy-gallery-ledge .flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery-ledge-reverse .flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery-ledge ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery-ledge-reverse ol.flex-control-nav.flex-control-thumbs {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  width: var(--bossy-thumb-size, 88px);
  gap: var(--bossy-thumb-gap, 6px);
  margin: 0;
  padding: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li {
  list-style: none;
  margin: 0;
  width: auto;
  float: none;
}
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border: 2px solid var(--ssc-ink);
  opacity: 1;
  cursor: pointer;
  transition: transform var(--ssc-fast) var(--ssc-ease), box-shadow var(--ssc-fast) var(--ssc-ease), border-color var(--ssc-fast) var(--ssc-ease);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ssc-turq); }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs .flex-active img {
  border-color: var(--ssc-magenta);
  box-shadow: 3px 3px 0 var(--ssc-magenta);
}

.woocommerce-product-gallery__trigger {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  background: var(--ssc-paper);
  border: 2px solid var(--ssc-ink);
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { color: var(--ssc-ink); }
.woocommerce-product-gallery { position: relative; }

.woocommerce-product-gallery__wrapper .zoomImg {
  background-color: var(--ssc-paper);
}

/*
 * Placement only, for the extra element Bossy injects on variable SKUs.
 *
 * Everything that used to live here forcing the gallery's own size is gone: a
 * grid-template-columns override, and a width:max-content on the gallery box.
 * Both were the theme reaching in to size a gallery the plugin already sizes
 * itself, and together they were what opened the dead space beside the thumb
 * rail. A gallery plugin has to work across themes, so it owns its own width
 * and the theme's job is to leave room for it: see the fit-content() column on
 * div.product above, which handles a self-sizing gallery and the stock Woo one
 * with a single rule and no knowledge of either.
 *
 * The rules below only say WHERE Bossy's variation stack sits in the grid,
 * which is genuine integration glue rather than an override.
 */
@media (min-width: 860px) {
  /*
   * Bossy rebuilds this grid as 50% + 1fr with !important. That 50% track is
   * wider than the packed ledge gallery, so leftover space sits between the
   * thumb rail and the title. Simple SKUs never get that class, so they already
   * use fit-content(52%) from div.product. Match them.
   */
  body.single-product.ssc.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) {
    grid-template-columns: fit-content(52%) minmax(0, 1fr) !important;
    gap: var(--ssc-pdp-gap) !important;
    column-gap: var(--ssc-pdp-gap) !important;
    justify-items: start !important;
  }

  body.single-product.ssc.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > #bossy-attr-wrap {
    grid-column: 1;
    justify-self: start;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}

/*
 * TEMPORARY. The only place the theme still touches the gallery's width, and
 * it exists to work around a conflict inside Bossy rather than a theme problem.
 * Delete it once Bossy is fixed; nothing else here depends on it.
 *
 * Bossy ships two rules that disagree about the same box on a variable SKU:
 *
 *   .bossy-gallery-ledge-reverse:not(:has(.flexy-container))     width: max-content
 *   (inline) .bossy-variable-product-shell ... > div.images      width: 100%
 *
 * Both are !important; the inline one is two points more specific, so it wins
 * and stretches the gallery to fill its column. The ledge rail is
 * position:absolute against the right edge of that box, so stretching it
 * strands the thumbnails 101px from the photograph instead of 16px. Same
 * settings on a simple SKU give 604px and a correct rail.
 *
 * The fix belongs in Bossy: let the ledge rule win on the variable shell, or
 * stop forcing width:100% there. When that lands, drop this block and the
 * fit-content() column above will close the variable gap to 28px on its own,
 * exactly as it already does for simple SKUs, which carry no Bossy CSS at all.
 *
 * The selector is deliberately shaped to match Bossy's inline rule, because
 * anything weaker simply does not reach it.
 */
@media (min-width: 860px) {
  body.single-product.ssc.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery {
    width: max-content !important;
    max-width: 100% !important;
  }
}

/* Empty variation stack must not occupy a grid cell next to the main gallery. */
body.single-product.ssc div.product > #bossy-attr-wrap.bossy-variation-galleries:not(:has(.bossy-attr-gallery)) {
  display: none !important;
}



/* ==========================================================================
   REDESIGN ISSUE LIST
   Product page, product catalog. Each block answers one reported item.
   ========================================================================== */

/* --- Breadcrumb ("Home / Shop / Category / Product") -----------------------
   It was rendering at body size in body navy, indistinguishable from real
   copy, and with margin-bottom 0 it sat flush on top of the gallery with the
   two touching at the pixel. Smaller, quieter, links in brand magenta, and
   real air beneath it. */

.woocommerce-breadcrumb {
  font-family: var(--ssc-f-ui);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ssc-neutral);
  margin-bottom: clamp(1.25rem, 2.6vw, 2rem);
}
.woocommerce-breadcrumb a {
  color: var(--ssc-magenta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ssc-fast) var(--ssc-ease), color var(--ssc-fast) var(--ssc-ease);
}
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
  color: var(--ssc-ink);
  border-bottom-color: var(--ssc-ink);
}

/* --- Short description: "read the full description" jump ------------------
   .summary > * + * puts 1rem above every child. This one belongs tight under
   the paragraph it continues, so it reads as part of it. */

.summary > .ssc-readmore-wrap { margin-top: .5rem; }

.ssc-readmore {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--ssc-f-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ssc-magenta);
  border-bottom: 2px solid var(--ssc-magenta);
  padding-bottom: 2px;
  transition: color var(--ssc-fast) var(--ssc-ease), border-color var(--ssc-fast) var(--ssc-ease);
}
.ssc-readmore:hover,
.ssc-readmore:focus-visible { color: var(--ssc-ink); border-bottom-color: var(--ssc-ink); }

.ssc-readmore__arrow {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform var(--ssc-fast) var(--ssc-ease);
}
.ssc-readmore:hover .ssc-readmore__arrow { transform: translateY(2px); }

/* --- Long description: one centred column that flows ----------------------
   The panel ran the full page width while each paragraph was capped at 76ch,
   so the copy hugged the left edge of a very wide box with a ragged right.
   Centring the column instead of the sentences keeps the measure readable and
   the block anchored to the middle of the page. */

.woocommerce div.product .woocommerce-tabs {
  scroll-margin-top: var(--ssc-anchor-offset, 88px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs { justify-content: center; }

/* 74ch measured 674px in a 1377px container, which left the copy stranded in
   the middle with a third of the page empty either side. 60rem is the point
   where the longest paragraph stops re-wrapping (5 lines to 4, ~75 characters);
   64rem and up gains nothing and only lengthens the line. */
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: 60rem;
  margin-inline: auto;
  font-size: 1.02rem;
  line-height: 1.8;
}
/* Let paragraphs fill the centred measure rather than setting a second one. */
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol { max-width: none; }
.woocommerce div.product .woocommerce-tabs .panel > * + * { margin-top: 1.15rem; }
.woocommerce div.product .woocommerce-tabs .panel p + p { margin-top: 1.15rem; }
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4 {
  font-family: var(--ssc-f-display);
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 1.9rem;
}
.woocommerce div.product .woocommerce-tabs .panel:focus { outline: none; }
.woocommerce div.product .woocommerce-tabs .panel img { margin-inline: auto; }

/* --- Catalog card: the photograph is a link ------------------------------- */

.ssc-card__medialink {
  position: absolute;
  inset: 0;
  display: block;
}
/* quick-view.js appends its trigger to the same box; keep it above the link. */
.ssc-card .ssc-qv-trigger { z-index: 2; }

/* --- Catalog card: the title reads as clickable --------------------------- */

.ssc-card__title { transition: color var(--ssc-fast) var(--ssc-ease); }
.ssc-card:hover .ssc-card__title,
.ssc-card__link:hover .ssc-card__title,
.ssc-card__link:focus-visible .ssc-card__title { color: var(--ssc-magenta); }
.ssc-card__link:hover .ssc-card__title { text-decoration: underline; text-underline-offset: 3px; }

/* --- Shop, category and tag archives: header and copy centred -------------
   Shop uses .page-description (the Shop page body). Categories use
   .term-description. Same stack either way: breadcrumb, Ultra H1, 60ch intro.
   Scoped away from single products, where the two column grid below is
   left aligned and a centred breadcrumb would not line up with anything. */

body:not(.single-product) .ssc-shop-wrap {
  padding-block: clamp(1.15rem, 2.4vw, 1.85rem) var(--ssc-section);
}

body:not(.single-product) .ssc-shop-wrap .woocommerce-breadcrumb {
  text-align: center;
  margin-bottom: .85rem;
}

.woocommerce-products-header { text-align: center; }
.woocommerce-products-header__title,
.ssc-shop-wrap .page-title { text-align: center; }

.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description {
  margin-inline: auto;
  text-align: center;
}

.woocommerce-products-header .term-description p,
.woocommerce-products-header .page-description p {
  margin: 0;
  padding-block: 0;
  padding-inline: 0 !important;
}

.woocommerce-products-header .term-description p + p,
.woocommerce-products-header .page-description p + p {
  margin-top: .65rem;
}

.woocommerce-products-header .term-description p:empty,
.woocommerce-products-header .page-description p:empty {
  display: none;
}

/* Woo prints the category description outside the header on some archives. */
body:not(.single-product) .ssc-shop-wrap > .ssc-container > .term-description,
body:not(.single-product) .ssc-shop-wrap > .ssc-container > .page-description,
body:not(.single-product) .ssc-shop-wrap .woocommerce-no-products-found {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}