/* Stoke Tiles redesign: the tile product page (T6).
   Built from design/product-tile.html, product-tile-mobile.html and
   product-tile-phone.html. */

.st-product { display: flex; flex-direction: column; }

/* --------------------------------------------------- Gallery and buy box */

.st-pdp {
  padding: 24px var(--st-gutter-desktop) 0;
  display: grid;
  grid-template-columns: minmax(0, 720px) 528px;
  column-gap: 32px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.st-pdp__left { display: flex; flex-direction: column; min-width: 0; }
.st-pdp__crumbs { min-height: var(--st-tap-min); display: flex; align-items: center; }

.st-crumbs--light a { color: var(--st-taupe); }
.st-crumbs--light a:hover { color: var(--st-espresso); }
/* Taupe, as the design sets on the whole list. Linen was the on-dark value
   carried over from the category banner, and on cream it came out at
   1.4:1 - a separator nobody could see. */
.st-crumbs--light li[aria-hidden] { color: var(--st-taupe); }
.st-crumbs--light [aria-current] { color: var(--st-espresso); }

.st-gallery { margin-top: 16px; }
.st-gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--st-stone);
}
.st-gallery__slide { margin: 0; width: 100%; height: 100%; }
.st-gallery__slide[hidden] { display: none; }
/* Client round 2: `.st-gallery` added, or WooCommerce's `.woocommerce-page img
   { height: auto }` (same weight, later sheet) won and wide photos sat at the
   top of the square. Contain, centred: the whole photograph shows (square
   tile photos fill the stage either way). */
.st-gallery .st-gallery__slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.st-gallery__empty { width: 100%; height: 100%; }
.st-gallery__flag {
  position: absolute;
  left: 16px;
  top: 16px;
  height: 30px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--st-ivory) 94%, transparent);
  color: var(--st-espresso);
  font-size: 11px;
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.st-gallery__nav {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-gallery__counter {
  height: var(--st-tap-min);
  padding: 0 14px;
  background: color-mix(in srgb, var(--st-ivory) 94%, transparent);
  color: var(--st-espresso);
  font-size: var(--st-label);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
}
.st-gallery__btn {
  width: var(--st-tap-min);
  height: var(--st-tap-min);
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--st-ivory) 94%, transparent);
  color: var(--st-espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.st-gallery__btn:hover { background: var(--st-ivory); }

.st-gallery__thumbs { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.st-gallery__thumb {
  width: 104px;
  height: 104px;
  padding: 4px;
  border: 1px solid var(--st-linen);
  border-radius: var(--st-radius);
  background: var(--st-white);
  cursor: pointer;
  box-sizing: border-box;
}
.st-gallery__thumb.is-current { padding: 3px; border: 2px solid var(--st-espresso); }
.st-gallery .st-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-gallery__caption { margin: 12px 0 0; font-size: 13px; color: var(--st-taupe); }

/* ------------------------------------------------------------ Trust panel */

.st-trust {
  margin-top: 28px;
  border: 1px solid var(--st-linen);
  background: var(--st-white);
  display: flex;
  flex-direction: column;
}
.st-trust__grid {
  margin: 0;
  padding: 24px 24px 20px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 20px;
}
.st-trust__grid li { display: flex; gap: 10px; align-items: flex-start; }
.st-trust__grid svg { flex-shrink: 0; color: var(--st-bronze); stroke-width: 1.3; margin-top: 2px; }
.st-trust__grid li > span { display: flex; flex-direction: column; gap: 2px; }
.st-trust__grid strong { font-size: var(--st-small); font-weight: 500; line-height: normal; }
.st-trust__grid span span { font-size: 13px; line-height: 1.45; color: var(--st-taupe); }
/* The lower half of the panel is a row per delivery service, each 64px with
   its own rule, then the Northern Ireland line. It was one summary sentence,
   which fitted the same 720px panel into 207px against the design's 400px. */
.st-trust__delivery {
  border-top: 1px solid var(--st-divider);
  display: flex;
  flex-direction: column;
}
.st-trust__row {
  min-height: 64px;
  box-sizing: border-box;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--st-divider);
}
.st-trust__row svg { flex-shrink: 0; color: var(--st-bronze); stroke-width: 1.3; }
.st-trust__row-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
/* `normal` rather than the scope's 1.6, because that is what the design sets
   nothing and therefore gets: Jost's own metric, about 1.45. At 1.6 each row
   came to 72px against the design's 68; forced tighter it went to 64. */
.st-trust__row-label { font-size: 15px; font-weight: 500; line-height: normal; }
.st-trust__row-note { font-size: 13px; line-height: normal; color: var(--st-taupe); }
.st-trust__row-price { font-size: 16px; font-weight: 500; }
.st-trust__note { margin: 0; padding: 14px 20px; font-size: 13px; line-height: normal; color: var(--st-taupe); }
.st-trust__note a { color: var(--st-bronze); font-weight: 500; }

.st-trust__links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-size: 14px;
}
.st-trust__link {
  min-height: var(--st-tap-min);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--st-bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- Buy box */

.st-buybox { display: flex; flex-direction: column; min-width: 0; }
.st-buybox__eyebrow {
  min-height: var(--st-tap-min);
  display: flex;
  align-items: center;
  font-size: var(--st-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--st-bronze);
}
.st-buybox__title { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.st-buybox__name { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 48px; line-height: 1.05; }
.st-buybox__meta {
  font-size: var(--st-small);
  color: var(--st-taupe);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.st-buybox__collection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--st-bronze);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.st-buybox__collection:hover { color: var(--st-espresso); }

.st-buybox__price {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--st-divider);
  border-bottom: 1px solid var(--st-divider);
}
.st-buybox__ppm { display: flex; align-items: baseline; gap: 10px; }
.st-buybox__ppm-value { font-family: var(--st-serif); font-size: 46px; line-height: 1; font-weight: 600; }
.st-buybox__ppm-unit { font-size: 17px; }
.st-buybox__box-price { font-size: 15px; color: var(--st-taupe); }
.st-buybox__box-price strong { font-weight: 500; color: var(--st-espresso); }

.st-buybox__rooms { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.st-buybox__label {
  font-size: var(--st-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--st-taupe);
}
.st-buybox__rooms ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.st-buybox__rooms li {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--st-linen);
  border-radius: var(--st-radius);
  background: var(--st-white);
  display: flex;
  align-items: center;
  font-size: var(--st-small);
}

/* -------------------------------------------------------------- Calculator */

.st-calc {
  margin-top: 24px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.st-calc__title { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 28px; line-height: 1.15; }
.st-calc__area { position: relative; }
.st-calc__area .st-field { width: 100%; padding-right: 56px; }
/* The browser's own spinner competes with the unit label. */
.st-calc__area input::-webkit-outer-spin-button,
.st-calc__area input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-calc__area input { -moz-appearance: textfield; }
.st-calc__unit {
  position: absolute;
  right: 16px;
  top: 0;
  height: var(--st-control-h);
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--st-taupe);
  pointer-events: none;
}
.st-calc__wastage { display: flex; flex-direction: column; gap: 2px; }
.st-calc__why { padding-left: 34px; font-size: 13px; line-height: 1.5; color: var(--st-taupe); }

.st-calc__result { display: flex; flex-direction: column; gap: 10px; }
.st-calc__result[hidden] { display: none; }
.st-calc__figures { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.st-calc__figure { display: flex; flex-direction: column; gap: 4px; }
.st-calc__figure--end { align-items: flex-end; }
.st-calc__figure-label {
  font-size: var(--st-eyebrow);
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  color: var(--st-taupe);
}
.st-calc__figure-value { font-family: var(--st-serif); font-size: 38px; line-height: 1; font-weight: 600; }
.st-calc__figure-value--sm { font-size: 30px; }
.st-calc__working { font-size: var(--st-small); color: var(--st-taupe); }

.st-calc__stepper-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* padding-top, not align-items: the design drops this block 26px so its first
   line sits level with the stepper's numbers rather than with its top edge. */
.st-calc__min { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; padding-top: 26px; }
.st-calc__min-label { font-size: var(--st-small); font-weight: 500; }
.st-calc__min-note { font-size: 13px; color: var(--st-taupe); }

/* ---------------------------------------------------------------- Actions */

.st-buybox__actions { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.st-buybox__stock { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--st-small); }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-success); flex-shrink: 0; }
.st-dot--off { background: var(--st-alert); }
.st-buybox__stock strong { font-weight: 500; }
.st-buybox__error { margin: 0; font-size: var(--st-small); color: var(--st-alert); }
.st-buybox__error[hidden] { display: none; }
.st-buybox__sample { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.st-buybox__sample-note { font-size: 13px; line-height: 1.5; color: var(--st-taupe); text-align: center; }

/* ---------------------------------------------------------------- Details */

.st-details { padding: 104px 0; }
.st-details__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 96px; align-items: start; }
.st-details__aside { position: sticky; top: 96px; }
/* As wide as its longest link, not the whole 260px column - the aside is a
   block, so align-self alone does not shrink it, and the hover and current
   states were painting the full column width. */
.st-onthispage { display: flex; flex-direction: column; gap: 2px; align-self: start; width: fit-content; max-width: 100%; }
.st-onthispage .st-eyebrow { margin-bottom: 16px; }
.st-onthispage a {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--st-taupe);
  text-decoration: none;
  font-size: 15px;
}
.st-onthispage a:hover { color: var(--st-espresso); }
.st-onthispage__dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex-shrink: 0; }
.st-onthispage a.is-current { color: var(--st-espresso); font-weight: 500; }
.st-onthispage a.is-current .st-onthispage__dot { background: var(--st-bronze); }

.st-details__body { display: flex; flex-direction: column; gap: 72px; }
/* No scroll-margin here any more: `html { scroll-padding-top }` in
   st-chrome.css clears the fixed header for every anchor on the site, and a
   local margin on top of it landed these sections 120px further down than
   everything else. */
.st-details__section { display: flex; flex-direction: column; gap: 20px; }
.st-prose { font-size: var(--st-body-l); line-height: 1.7; font-weight: 300; max-width: 820px; }
.st-prose p { margin: 0 0 1em; }
.st-prose p:last-child { margin-bottom: 0; }

/* Key features: the tile's attributes said as sentences, ticked. */
.st-features__label { margin-top: 12px; }
.st-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-features li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.st-features svg { flex-shrink: 0; color: var(--st-success); }

/* Specification. The design sets the attributes in two tables side by side
   rather than one long column, so a tile's dozen attributes read at a glance
   instead of running past the fold. */
.st-spec-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.st-spec { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--st-linen); }
.st-spec__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--st-divider);
}
.st-spec dt { font-size: 15px; font-weight: 400; color: var(--st-taupe); margin: 0; }
.st-spec dd { margin: 0; font-size: 15px; font-weight: 500; }

/* Delivery. Three cards, one per service - a product with no next day option
   shows two, and the grid closes up round it. */
.st-delcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.st-delcard {
  background: var(--st-white);
  border: 1px solid var(--st-divider);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.st-delcard svg { color: var(--st-bronze); }
.st-delcard__label {
  font-size: var(--st-label);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  font-weight: 500;
}
.st-delcard__price { font-family: var(--st-serif); font-size: 30px; font-weight: 600; line-height: 1; }
.st-delcard__note { font-size: 14px; line-height: 1.55; color: var(--st-taupe); }

/* The line under the delivery cards, and the way through to the policy. */
.st-delpolicy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.st-delpolicy p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--st-taupe); }
.st-delpolicy__link {
  flex-shrink: 0;
  min-height: var(--st-tap-min);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--st-label);
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--st-bronze);
  text-decoration: none;
  border-bottom: 1px solid var(--st-gold);
  box-sizing: border-box;
}
.st-delpolicy__link:hover { color: var(--st-espresso); }

/* Returns. The design draws this as a collapsed disclosure with nothing
   behind it; it goes to the returns page instead, which is somewhere to
   actually end up. */
.st-returns {
  margin-top: 8px;
  min-height: 52px;
  box-sizing: border-box;
  border-top: 1px solid var(--st-linen);
  border-bottom: 1px solid var(--st-linen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  color: var(--st-espresso);
  text-decoration: none;
}
.st-returns:hover { color: var(--st-bronze); }
.st-returns__text { display: flex; flex-direction: column; gap: 2px; }
.st-returns__title { font-size: 17px; font-weight: 500; }
.st-returns__note { font-size: 13px; line-height: 1.4; color: var(--st-taupe); }
.st-returns svg { flex-shrink: 0; }

/* Related products. Deliberately not the catalogue card: no price, no
   per-m2 line, no badges. A picture, a name on a fixed two-line block so the
   links line up, and the way in. */
.st-relgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.st-relcard { display: flex; flex-direction: column; text-decoration: none; color: var(--st-espresso); }
.st-relcard__media {
  height: 302px;
  overflow: hidden;
  background: var(--st-stone);
  display: block;
}
.st-relcard .st-relcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* client round 2: outweighs .woocommerce-page img */
.st-relcard__body {
  background: var(--st-white);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Two lines, fixed, so "View tile" sits on the same line across the row
   whatever the names do. */
.st-relcard__name {
  height: 58px;
  overflow: hidden;
  font-family: var(--st-serif);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
}
.st-relcard__more {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--st-label);
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--st-bronze);
}
.st-relcard:hover .st-relcard__more { color: var(--st-espresso); }

/* ------------------------------------------------------------ About strip */

.st-pabout { background: var(--st-stone); padding: 88px 0; }
.st-pabout__inner { display: flex; flex-direction: column; gap: 44px; }
.st-pabout__head { display: flex; flex-direction: column; gap: 12px; }
.st-pabout__title { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 36px; line-height: 1.1; }
.st-pabout__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
/* Each column sits under its own gold rule, which is what holds the three
   together as a set rather than three loose paragraphs. */
.st-pabout__point {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--st-gold);
}
.st-pabout__point svg { color: var(--st-bronze); }
.st-pabout__point-body { display: contents; }
.st-pabout__point-title { font-family: var(--st-serif); font-size: 24px; font-weight: 500; line-height: 1.2; }
.st-pabout__point p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--st-taupe); }
.st-pabout__point p a { color: var(--st-bronze); font-weight: 500; }
.st-pabout__quote { font-family: var(--st-serif); font-size: 48px; line-height: 1; color: var(--st-gold); }
.st-pabout__review { margin: 0; font-family: var(--st-serif); font-size: 21px; line-height: 1.4; color: var(--st-espresso); }
.st-pabout__by { font-size: var(--st-label); color: var(--st-taupe); }
.st-pabout__more {
  align-self: flex-start;
  min-height: var(--st-tap-min);
  display: inline-flex;
  align-items: center;
  color: var(--st-bronze);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.st-pabout__legal { margin: 0; font-size: var(--st-label); color: var(--st-taupe); }

/* ---------------------------------------------------------------- Reviews */

/* White behind the reviews, ivory behind the related tiles - the build had
   these the other way round, which left the related cards' white bodies
   invisible against a white section. */
.st-previews { padding: 96px 0; background: var(--st-white); }
.st-previews__inner { display: flex; flex-direction: column; gap: 40px; }
.st-previews__cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
.st-previews__body { display: flex; flex-direction: column; gap: 12px; }
.st-previews__sub { margin: 0 0 16px; font-size: 14px; color: var(--st-taupe); }
.st-previews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.st-previews__note { margin: 24px 0 0; font-size: var(--st-small); color: var(--st-taupe); }

/* The line about this product, as opposed to the company or the site. */
.st-previews__foot {
  border-top: 1px solid var(--st-divider);
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.st-previews__empty { margin: 0; font-size: 15px; color: var(--st-taupe); }
.st-previews__write {
  color: var(--st-bronze);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The company's Google standing. Kept visibly separate from the product's own
   reviews, and never fed into the product schema. */
.st-google {
  background: var(--st-ivory);
  border: 1px solid var(--st-divider);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-google__score { font-family: var(--st-serif); font-size: 64px; font-weight: 600; line-height: 1; }
.st-google__stars { display: flex; gap: 3px; color: var(--st-gold); }
.st-google__line { margin: 0; font-size: 15px; line-height: 1.5; }
.st-google__cta { margin-top: 8px; min-height: 52px; padding: 0 20px; }

/* A placeholder is meant to be seen: it is a question for the client, not a
   button. It must not look clickable. */
.is-placeholder { cursor: default; opacity: 0.75; }

.st-related { padding: 104px 0; }
.st-pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------- Sticky buy bar */

.st-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 850;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--st-gutter-mobile);
  background: var(--st-white);
  border-top: 1px solid var(--st-linen);
  box-shadow: 0 -4px 16px rgba(31, 28, 25, 0.08);
  transform: translateY(100%);
  /* visibility, not just aria-hidden: a bar that is off screen must not be
     reachable by Tab either, and Lighthouse rightly flags an aria-hidden
     container holding a focusable button. */
  visibility: hidden;
  transition: transform 200ms ease, visibility 200ms;
}
.st-buybar.is-visible { transform: translateY(0); visibility: visible; }
.st-buybar__price { display: flex; flex-direction: column; }
.st-buybar__total { font-family: var(--st-serif); font-size: 24px; font-weight: 600; line-height: 1.1; }
.st-buybar__note { font-size: 13px; color: var(--st-taupe); }
.st-buybar .st-btn { flex-shrink: 0; }

/* ---------------------------------------------------------------- Tablet */

@media (max-width: 1200px) {
  .st-pdp { grid-template-columns: minmax(0, 1fr) 440px; column-gap: 24px; }
  .st-buybox__name { font-size: 38px; }
  .st-buybox__ppm-value { font-size: 38px; }
  .st-details__inner { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
  .st-pabout__inner { gap: 32px; }
  .st-pabout__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .st-previews__cols { grid-template-columns: minmax(0, 1fr); }
  .st-relgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-previews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-pgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 1024px) {
  .st-pdp { grid-template-columns: minmax(0, 1fr); padding: 12px var(--st-gutter-mobile) 0; row-gap: 24px; }
  .st-gallery__thumbs { gap: 8px; }
  .st-gallery__thumb { width: 72px; height: 72px; }
  .st-buybox__name { font-size: 32px; }
  .st-buybox__ppm-value { font-size: 36px; }
  .st-calc { padding: 20px; }
  .st-calc__figure-value { font-size: 32px; }
  .st-calc__figure-value--sm { font-size: 24px; }
  /* The design keeps these side by side at 390: the stepper on the left, the
     minimum against the right edge. Wrapping put the minimum on its own line
     and shrank it to its own width, which read as left aligned. */
  .st-calc__stepper-row { align-items: flex-end; flex-wrap: nowrap; }

  /* Still two across at 390, as product-tile-mobile.html draws it - one
     column made each cell as wide as its own sentence and pushed everything
     below it down the page. */
  .st-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 16px 4px; column-gap: 14px; row-gap: 16px; }
  /* Icon above the label at this width, not beside it - the cells are half a
     390px screen wide and a row leaves nothing for the words. */
  .st-trust__grid li { flex-direction: column; gap: 6px; }
  .st-trust__grid li > span { gap: 6px; }
  .st-trust__grid svg { margin-top: 0; }
  .st-trust__grid strong { font-size: 13px; line-height: 1.35; }
  .st-trust__grid span span { font-size: 12px; }

  /* The rows tighten with the panel. */
  .st-trust__row { padding: 12px 16px; gap: 12px; }
  .st-trust__row-label { font-size: 14px; }
  .st-trust__row-price { font-size: 15px; }
  .st-trust__note { padding: 14px 16px; }

  .st-details { padding: 56px 0; }
  .st-details__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* The menu becomes a scrolling row of chips above the sections. */
  .st-details__aside { position: static; }
  .st-onthispage { flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .st-onthispage .st-eyebrow { display: none; }
  .st-onthispage a {
    flex-shrink: 0;
    min-height: var(--st-tap-min);
    padding: 0 16px;
    border: 1px solid var(--st-linen);
    border-radius: var(--st-radius);
    background: var(--st-white);
    font-size: var(--st-small);
    white-space: nowrap;
  }
  .st-onthispage a.is-current { border-color: var(--st-espresso); }
  .st-onthispage__dot { display: none; }
  .st-details__body { gap: 48px; }
  .st-spec-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Stacked, the second table would draw a rule against the first. */
  .st-spec-pair .st-spec + .st-spec { border-top: 0; }
  .st-spec__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .st-delcards { grid-template-columns: minmax(0, 1fr); }
  .st-delpolicy { flex-direction: column; align-items: flex-start; gap: 12px; }

  .st-pabout { padding: 48px 0; }
  .st-pabout__points { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* Icon beside the words at this width, not above them. */
  .st-pabout__point--icon { flex-direction: row; align-items: flex-start; gap: 14px; padding-top: 16px; }
  .st-pabout__point-body { display: flex; flex-direction: column; gap: 6px; }
  .st-pabout__point--icon svg { margin-top: 2px; }
  .st-pabout__point-title { font-size: 19px; line-height: 1.25; }
  .st-pabout__point p { font-size: 14px; line-height: 1.55; }
  .st-pabout .st-btn { width: 100%; }

  .st-previews { padding: 56px 0; }
  .st-previews__grid { grid-template-columns: minmax(0, 1fr); }
  .st-previews__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* A scroller on a phone, like the other card rows. */
  .st-relgrid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .st-relgrid::-webkit-scrollbar { display: none; }
  .st-relgrid > li { width: 220px; flex-shrink: 0; scroll-snap-align: start; }
  .st-relcard__media { height: 220px; }
  .st-relcard__body { padding: 14px; }
  .st-relcard__name { height: 48px; font-size: 20px; }
  .st-related { padding: 56px 0; }
  .st-pgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* The buy bar is a phone thing: on a tablet the buy box is still reachable. */
  .st-buybar { display: flex; }
  /* Leave room for it so the footer is not trapped underneath. */
  body:has(.st-buybar) { padding-bottom: 92px; }
}

/* Touch targets.

   The inline links on this page - breadcrumbs, the collection link, the About
   strip's text link, and any link inside the client's own description copy -
   are drawn at the design's text size. Each gets the transparent 44px hit
   area on coarse pointers, the same approach as T1's sample button, rather
   than being redrawn. */
@media (pointer: coarse) {
  .st-crumbs a,
  .st-buybox__collection,
  .st-pabout .st-link,
  .st-prose a,
  .st-message__actions a { position: relative; }
  .st-crumbs a::after,
  .st-buybox__collection::after,
  .st-pabout .st-link::after,
  .st-prose a::after,
  .st-message__actions a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--st-tap-min);
  }
}


/* ============================================================ Design pass

   One rule per measured difference against design/product-tile.html,
   product-tile-mobile.html, product-porcelanosa.html and
   product-porcelanosa-mobile.html. Kept together at the end of the file so
   the reason for each is legible, rather than scattered through the
   components they correct.                                                */

/* The eyebrow over a details section is tracked a little tighter here than
   the shared one: 0.22em, not 0.24em. */
.st-onthispage .st-eyebrow,
.st-details__section .st-eyebrow { letter-spacing: 0.22em; }
.st-porcelanosa .st-onthispage .st-eyebrow { letter-spacing: 0.24em; }

/* Porcelanosa's key features heading. */
.st-features__heading {
  margin: 8px 0 0;
  font-family: var(--st-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
}

/* "Read our Google reviews" is tracked 0.14em, not the 0.16em the other
   secondary buttons use. */
.st-google .st-btn { letter-spacing: 0.14em; }

/* The returns heading: 17px on the tile design, 16px on Porcelanosa's. */
.st-returns__title { font-size: 17px; }
.st-porcelanosa .st-returns__title { font-size: 16px; }

/* The product breadcrumb is untracked, unlike the category one. */
.st-crumbs--light { letter-spacing: normal; }

/* Why there is no price: a serif heading, larger than the shared .st-h3. */
.st-why .st-h3 { font-size: 36px; }

.st-pabout__more { font-weight: 500; }
.st-porcelanosa .st-pabout__more { font-weight: 400; }


@media (max-width: 1024px) {
  .st-gallery__flag { font-size: 10px; letter-spacing: 0.16em; }

  .st-buybox__meta { font-size: 13px; }
  .st-buybox__ppm-unit { font-size: 16px; }
  .st-buybox__box-price { font-size: 14px; }
  .st-buybox__rooms li { font-size: 13px; }
  .st-buybox__sample .st-btn { letter-spacing: 0.14em; }

  .st-calc__title { font-size: 26px; }
  /* The minimum sits against the right edge, under the stepper. */
  .st-calc__min { align-items: flex-end; text-align: right; padding-top: 0; padding-bottom: 4px; }
  .st-calc__min-label { font-size: 14px; font-weight: 500; }
  .st-calc__min-note { font-size: 12px; }

  .st-features li,
  .st-features span { font-size: 15px; }

  .st-features__heading { font-size: 22px; }

  .st-pabout__title { font-size: 30px; }
  .st-pabout__legal { font-size: 12px; }
  .st-pabout__point-title { font-size: 19px; }
  .st-porcelanosa .st-pabout__point-title { font-size: 22px; }

  .st-google__score { font-size: 48px; }
  .st-google__line { font-size: 14px; }

  .st-previews .st-h2 { font-size: 32px; }
  .st-previews__sub { font-size: 13px; }

  /* The review cards scroll sideways rather than stacking, as the design
     draws them: 280px wide, snapping, running off the right gutter. */
  .st-previews__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .st-previews__grid > .st-review {
    flex: 0 0 280px;
    min-height: 290px;
    padding: 24px;
    scroll-snap-align: start;
  }

  /* The foot is one row with a rule above it, not a stack. */
  .st-previews__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--st-divider);
    font-size: 14px;
  }
  .st-previews__empty { font-size: 14px; }
  .st-previews__write { font-size: 14px; }

  /* "You may also like". */
  .st-related .st-heading .st-h1 { font-size: 34px; }
  .st-porcelanosa .st-related .st-heading .st-h1 { font-size: 40px; }

  /* Below the cards the link becomes a full width outlined button, espresso
     rather than the bronze it is at desktop. */
  .st-related .st-section__head { flex-direction: column; align-items: stretch; }
  .st-related .st-section__head .st-link {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    margin-top: 8px;
    border: 1px solid var(--st-espresso);
    border-radius: var(--st-radius);
    justify-content: center;
    color: var(--st-espresso);
    text-decoration: none;
  }

  .st-trust__note a { font-size: 15px; color: var(--st-espresso); }

  .st-why .st-h3 { font-size: 30px; }

}

@media (max-width: 1024px) {
  /* The gallery runs edge to edge on a phone, so the flag sits 12px from the
     screen rather than 12px from a gutter. */
  .st-gallery { margin-left: calc(var(--st-gutter-mobile) * -1); margin-right: calc(var(--st-gutter-mobile) * -1); }
  .st-gallery__flag { left: 12px; top: 12px; }

  /* The three controls part company at this size: an arrow against each edge,
     halfway down the picture, and the counter as a dark pill in the corner.
     `display: contents` drops the row wrapper so each one can be placed
     against the stage itself. */
  .st-gallery__nav { display: contents; }
  .st-gallery__btn { position: absolute; top: 50%; transform: translateY(-50%); }
  .st-gallery__btn[data-st-gallery-prev] { left: 8px; }
  .st-gallery__btn[data-st-gallery-next] { right: 8px; }
  .st-gallery__counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    height: 28px;
    padding: 0 10px;
    background: color-mix(in srgb, var(--st-espresso) 72%, transparent);
    color: var(--st-ivory);
    font-size: 12px;
  }
}


/* ======================================================= WP2/3 additions */

/* WooCommerce's notices at the top of the page, in the design's message
   panels. */
.st-product__notices { padding-top: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
.st-product__notices .st-message { margin: 0; }
.st-product__notices .st-message a { color: var(--st-bronze); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* The samples plugin's button, redrawn as the design's secondary button. The
   plugin's own <style> block is dropped before the markup is printed, so no
   !important fight; `order_sample_product` stays for its click handler. */
.st-buybox__sample .order_sample_product { gap: 10px; }
.st-buybox__sample .order_sample_product.loading { opacity: 0.6; cursor: progress; }
.st-buybox__sample .st-message { margin-top: 4px; }

/* ----------------------------------------------------- Lead time panel

   A message panel over a scrim (styles.html "Messages"), centred on a
   desktop and rising from the bottom on a phone like the design's sheets. */
.st-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--st-gutter-mobile); }
.st-modal[hidden] { display: none; }
.st-modal__scrim { position: absolute; inset: 0; background: rgba(31, 28, 25, 0.55); }
.st-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  padding: 32px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  display: flex;
  flex-direction: column;
  gap: 14px;
  outline: none;
}
.st-modal__panel:focus-visible { box-shadow: 0 0 0 2px var(--st-gold); }
.st-modal__title { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 32px; line-height: 1.1; }
.st-modal__text { margin: 0; font-size: 16px; line-height: 1.55; }
.st-modal__note { margin: 0; font-size: var(--st-small); line-height: 1.5; color: var(--st-taupe); }
.st-modal__note a { color: var(--st-bronze); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.st-modal__actions { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
body.st-modal-open { overflow: hidden; }

@media (max-width: 767px) {
  .st-modal { align-items: flex-end; padding: 0; }
  .st-modal__panel { max-width: none; padding: 28px var(--st-gutter-mobile) 32px; border-left: 0; border-right: 0; border-bottom: 0; }
  .st-modal__title { font-size: 28px; }
}

/* --------------------------------------------------- Phone section order

   The design's phone pages run: gallery, buy section, calculator and
   actions, then the trust row and the delivery panel. At desktop the trust
   panel sits under the gallery in the left column; on a phone that column
   dissolves (`display: contents`) so its children and the buy box become
   grid items of .st-pdp and can be ordered. */
@media (max-width: 1024px) {
  .st-pdp__left { display: contents; }
  .st-pdp__crumbs { order: 1; }
  .st-gallery { order: 2; }
  .st-buybox { order: 3; }
  .st-trust { order: 4; margin-top: 8px; }
  .st-trust__links { order: 5; }
}

/* ------------------------------------------------------ Client round 1

   The trust panel lost its delivery rows (they repeated the Delivery and
   returns cards), so the grid is now the panel's last child and closes it
   with its own bottom padding. */
.st-trust__grid { padding-bottom: 24px; }
@media (max-width: 1024px) {
  .st-trust__grid { padding-bottom: 16px; }
}

/* Complete the job: moved to st-components.css (client round 2) so the
   basket's row shows the same whole pack shots. */

/* Client round 2: pack shots (installation, pallets) show whole. */
.st-gallery--packshot .st-gallery__stage { background: var(--st-white); }
.st-gallery.st-gallery--packshot .st-gallery__slide img { object-fit: contain; padding: 24px; box-sizing: border-box; }
.st-gallery.st-gallery--packshot .st-gallery__thumb img { object-fit: contain; background: var(--st-white); }
.st-relcard--packshot .st-relcard__media { background: var(--st-white); }
.st-relcard.st-relcard--packshot .st-relcard__media img { object-fit: contain; padding: 16px; box-sizing: border-box; }

/* Product FAQs and the ask-a-question form (installation pages). */
.st-pfaq__empty { margin: 0 0 8px; }
.st-pfaq__ask { margin-top: 32px; padding: 28px; background: var(--st-panel); display: flex; flex-direction: column; gap: 8px; }
.st-pfaq__ask-title { margin: 0; font-family: var(--st-serif); font-size: 26px; font-weight: 500; line-height: 1.2; }
.st-pfaq__ask-note { margin: 0 0 8px; font-size: var(--st-small); color: var(--st-taupe); }
.st-pfaq__form { display: flex; flex-direction: column; gap: 16px; }
.st-pfaq__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-pfaq__form .st-btn { align-self: flex-start; }
.st-pfaq__form .faq-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-pfaq__message:empty { display: none; }
.st-pfaq__message { margin-top: 12px; font-size: 15px; }
.st-pfaq__message.success { color: var(--st-espresso); }
.st-pfaq__message.error { color: var(--st-alert); }
@media (max-width: 767px) {
  .st-pfaq__ask { padding: 20px 16px; }
  .st-pfaq__row { grid-template-columns: minmax(0, 1fr); }
  .st-pfaq__form .st-btn { align-self: stretch; }
}