/* Stoke Tiles redesign: product page variants (T7).
   Built from design/product-porcelanosa.html, product-install.html and
   pallet-buy-box.html. Loads after st-product.css, which holds the shell. */

/* ------------------------------------------------------------- Shared bits */

.st-buybox__eyebrow-row {
  min-height: var(--st-tap-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.st-badge--inline { position: static; }
.st-buybox__all-pallets { font-size: var(--st-label); color: var(--st-bronze); position: relative; }
/* Inline link, so it gets the hit area rather than being redrawn. */
@media (pointer: coarse) {
  .st-buybox__all-pallets::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--st-tap-min);
  }
}

.st-buybox__price--single { flex-direction: row; align-items: baseline; gap: 10px; }
.st-buybox__price--single .st-buybox__ppm-value { font-size: 44px; }

.st-buybox__short { margin: 16px 0 0; font-size: var(--st-body); line-height: 1.6; }

/* Key specification chips. */
.st-chipslist {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.st-chipslist li {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--st-linen);
  background: var(--st-white);
  border-radius: var(--st-radius);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--st-small);
}
.st-chipslist svg { color: var(--st-sage); flex-shrink: 0; }

/* Quantity with a live total. */
.st-qty { display: flex; flex-direction: column; gap: 8px; }
.st-qty__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.st-qty__total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.st-qty__total-label { font-size: 13px; color: var(--st-taupe); }
.st-qty__total-value { font-family: var(--st-serif); font-size: 32px; line-height: 1; font-weight: 600; }
.st-qty__rule { margin: 4px 0 0; font-size: var(--st-small); line-height: 1.5; }

.st-buybox__pair { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.st-buybox__pair .st-btn { flex-grow: 1; flex-basis: calc(50% - 6px); font-size: var(--st-eyebrow); letter-spacing: 0.12em; gap: 10px; }
.st-buybox__pair--single .st-btn { width: 100%; }
/* The third button on the installation page takes a row of its own
   (design/product-install.html:131). */
.st-buybox__pair-wide { flex-basis: 100%; }

/* ------------------------------------------------------------- Porcelanosa */

.st-buybox__price--request { display: flex; flex-direction: column; gap: 8px; }
.st-buybox__on-request { font-family: var(--st-serif); font-size: 36px; line-height: 1.1; font-weight: 600; }
.st-buybox__request-note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--st-taupe); }

.st-factstrip {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--st-linen);
  background: var(--st-white);
}
.st-factstrip > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.st-factstrip > div + div { border-left: 1px solid var(--st-linen); }
.st-factstrip dt {
  margin: 0;
  font-size: var(--st-eyebrow);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  color: var(--st-taupe);
}
.st-factstrip dd { margin: 0; font-size: var(--st-body); font-weight: 500; }

.st-request__buttons { margin-top: 28px; }
.st-request__buttons[hidden] { display: none; }

.st-request {
  margin-top: 28px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.st-request[hidden] { display: none; }
.st-request__title { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 28px; line-height: 1.15; }
.st-request__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.st-request__done { margin-top: 28px; }

.st-why { background: var(--st-white); border-top: 1px solid var(--st-divider); padding: 80px 0; }
.st-why .st-heading { margin-bottom: 28px; }
.st-why__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.st-why__steps li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--st-linen);
}
.st-why__number { font-family: var(--st-serif); font-size: 28px; font-weight: 600; line-height: 1; color: var(--st-gold); }
.st-why__title {
  font-size: var(--st-label);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  font-weight: 500;
}
.st-why__text { font-size: 15px; line-height: 1.6; color: var(--st-taupe); }

/* Client round 2: the three steps inside the Porcelanosa buy box, stacked
   at every width: a 32px ringed number, then the step's title and words. */
.st-why.st-why--buybox { margin-top: 24px; padding: 24px; background: var(--st-white); border: 1px solid var(--st-linen); }
.st-why.st-why--buybox .st-heading { margin-bottom: 20px; }
.st-why.st-why--buybox .st-h3 { font-size: 26px; line-height: 1.2; }
.st-why.st-why--buybox .st-why__steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.st-why.st-why--buybox .st-why__steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  padding-top: 0;
  border-top: 0;
}
.st-why.st-why--buybox .st-why__number {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--st-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--st-espresso);
}
.st-why.st-why--buybox .st-why__text { font-size: 14px; }
@media (max-width: 1024px) {
  .st-why.st-why--buybox { padding: 20px; }
  .st-why.st-why--buybox .st-h3 { font-size: 24px; }
}
.st-buybox--porcelanosa .st-request__buttons { margin-top: 20px; }

/* ----------------------------------------------------------------- Pallet */

.st-pallet-contents {
  margin-top: 20px;
  background: var(--st-stone);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.st-pallet-contents svg { flex-shrink: 0; color: var(--st-espresso); }
.st-pallet-contents > span { display: flex; flex-direction: column; gap: 4px; }
.st-pallet-contents__label {
  font-size: var(--st-eyebrow);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  color: var(--st-bronze);
}
.st-pallet-contents__value { font-size: var(--st-body-l); font-weight: 500; }

.st-pallet-delivery {
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-pallet-delivery__title {
  font-size: var(--st-label);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  font-weight: 500;
}
.st-pallet-delivery__lead { margin: 0; font-size: var(--st-small); line-height: 1.5; }
.st-pallet-delivery__lead strong { font-weight: 500; }
.st-pallet-delivery ul { margin: 0; padding: 0; list-style: none; }
.st-pallet-delivery li { list-style: none; }
.st-pallet-delivery li + li { margin-top: 8px; }

/* The chosen option is a statement, not a choice: there is nothing to pick. */
.st-radio-card--fixed { border: 1.5px solid var(--st-espresso); padding: 16px 18px; cursor: default; }
.st-radio-card__dot--on { border-color: var(--st-espresso); }
.st-radio-card__dot--on::after { opacity: 1; }

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

@media (max-width: 1024px) {
  .st-factstrip { grid-template-columns: minmax(0, 1fr); }
  .st-factstrip > div + div { border-left: 0; border-top: 1px solid var(--st-linen); }
  .st-buybox__pair { flex-direction: column; }
  .st-why { padding: 56px 0; }
  .st-why__steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .st-qty__row { align-items: flex-start; }
  .st-request { padding: 20px; }
}


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

   These components are drawn in product-porcelanosa.html. They live in this
   file, which loads after st-product.css, so their phone values have to be
   here too - a media query adds no specificity, and an unmediated rule in a
   later sheet wins. */

@media (max-width: 1024px) {
  .st-factstrip dt { font-size: 11px; letter-spacing: 0.12em; }

  /* Each step is a row: a 32px ringed number, then the words. Stacked under a
     rule, as at desktop, they read as three separate headings. */
  .st-why__steps { gap: 20px; }
  /* Each step is a row: a 32px ringed number, then the words. Stacked with a
     rule above, as at desktop, they read as three separate headings. */
  .st-why__steps { gap: 20px; }
  .st-why__steps li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    padding-top: 0;
    border-top: 0;
  }
  .st-why__number {
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid var(--st-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--st-espresso);
  }
  .st-why__text { font-size: 14px; }
}

@media (max-width: 1024px) {
  /* The fact strip keeps its three columns on a phone - the design narrows
     the padding rather than stacking them. */
  .st-factstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-factstrip > div { padding: 12px; }
  .st-factstrip > div + div { border-left: 1px solid var(--st-linen); border-top: 0; }
  .st-factstrip dd { font-size: 15px; line-height: 1.4; }
}

/* Porcelanosa's on-this-page rail is 240px, not the tile page's 260px, which
   moves the whole content column 20px left. Desktop only: unqualified, it
   outranked the single-column phone rule and pushed the details 240px right. */
@media (min-width: 1025px) {
  .st-porcelanosa .st-details__inner { grid-template-columns: 240px minmax(0, 1fr); }
}

/* ---------------------------------------------- Porcelanosa sticky bar

   "Price on request / Sold per sheet" and a Request a price button, phones
   only like the tile bar (design/product-porcelanosa-mobile.html:371-381).
   The bar's visibility rules live in st-product.css; this only sizes the
   serif line, which carries words here rather than a figure. */
.st-buybar--request .st-buybar__total { font-size: 20px; white-space: nowrap; }
.st-buybar--request .st-btn { padding: 0 14px; }

/* ------------------------------------------- Porcelanosa request, CF7

   Oct 2026: the request form is Contact Form 7. Its markup carries the
   theme's field classes; these rules undo CF7's own wrappers and spacing and
   draw its validation in the design's inline error and message styles. */

.st-request [hidden],
.st-request__done[hidden] { display: none !important; }

.st-request--cf7 .wpcf7 { margin: 0; }
.st-request--cf7 .wpcf7-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.st-request--cf7 .hidden-fields-container,
.st-request--cf7 .st-request__hidden { display: none; }
.st-request--cf7 .wpcf7-form-control-wrap { display: block; position: static; }
.st-request--cf7 .st-field { width: 100%; }
.st-request--cf7 .st-calc__area .st-field { padding-right: 56px; }
.st-request--cf7 .st-field.wpcf7-not-valid { border-color: var(--st-alert); }

/* Inline error under a field, as .st-field-error. */
.st-request--cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--st-alert);
}

/* The form-level message sits at the top of the form, as the theme form's
   error did, in the plain .st-message panel. */
.st-request--cf7 .wpcf7 form .wpcf7-response-output {
  order: -1;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--st-linen);
  background: var(--st-white);
  font-size: 15px;
  line-height: 1.5;
  color: var(--st-espresso);
}
.st-request--cf7 .wpcf7 form.invalid .wpcf7-response-output,
.st-request--cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.st-request--cf7 .wpcf7 form.payment-required .wpcf7-response-output,
.st-request--cf7 .wpcf7 form.failed .wpcf7-response-output,
.st-request--cf7 .wpcf7 form.aborted .wpcf7-response-output,
.st-request--cf7 .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--st-alert);
  color: var(--st-alert);
}

/* Submit is an <input> in CF7; keep it the design's 56px button. */
.st-request--cf7 .st-request__actions { position: relative; }
.st-request--cf7 input.st-btn { -webkit-appearance: none; appearance: none; width: 100%; line-height: 1; }
.st-request--cf7 input.st-btn:disabled { opacity: 0.6; cursor: wait; }
.st-request--cf7 .wpcf7-spinner { position: absolute; top: 16px; right: 16px; margin: 0; }

/* Honeypot hiding now lives in st-components.css for every CF7 form. */

/* ------------------------------------------ Variable product (round 3)

   WooCommerce's own variation form (single-product/add-to-cart/variable.php)
   inside the rebuilt buy box: its table laid out as stacked fields, the
   selects as the design's 52px field (the st-field classes are added by
   st_variable_select_args()), the quantity as a 52px box and the button as
   the 56px primary button. The variation's own price line is hidden: the
   buy box header shows it instead (st-variants.js). */

.st-varform .variations_form { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.st-varform table.variations,
.st-varform table.variations tbody,
.st-varform table.variations tr,
.st-varform table.variations th,
.st-varform table.variations td { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; }
.st-varform table.variations { border-collapse: collapse; }
.st-varform table.variations tr + tr { margin-top: 16px; }
.st-varform table.variations th.label label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--st-taupe);
}
.st-varform table.variations td.value { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.st-varform select.st-field { width: 100%; height: 52px; min-height: 52px; cursor: pointer; }
.st-varform .reset_variations {
  font-size: var(--st-small);
  color: var(--st-espresso);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.st-varform .single_variation_wrap { display: flex; flex-direction: column; gap: 12px; }
.st-varform .woocommerce-variation-price { display: none; }
.st-varform .woocommerce-variation-description p { margin: 0; font-size: var(--st-small); line-height: 1.5; }
.st-varform .woocommerce-variation-availability p.stock { margin: 0; font-size: var(--st-small); font-weight: 500; }
.st-varform .woocommerce-variation-availability p.out-of-stock { color: var(--st-alert); }
.st-varform .variations_button { display: flex; gap: 12px; align-items: stretch; }
.st-varform .quantity { flex-shrink: 0; }
.st-varform .quantity .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.st-varform .quantity input.qty {
  width: 88px;
  height: 56px;
  padding: 0 8px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  border-radius: var(--st-radius);
  font-family: var(--st-sans);
  font-size: var(--st-body);
  color: var(--st-espresso);
  text-align: center;
  box-sizing: border-box;
}
.st-varform .single_add_to_cart_button {
  flex-grow: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--st-control-h-lg);
  padding: 0 24px;
  border: 0;
  border-radius: var(--st-radius);
  background: var(--st-sage);
  color: var(--st-white);
  font-family: var(--st-sans);
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  cursor: pointer;
}
.st-varform .single_add_to_cart_button:hover { background: var(--st-sage-dark); }
/* Before a colour is chosen WooCommerce keeps the button but marks it; it
   explains itself when pressed. */
.st-varform .single_add_to_cart_button.disabled { opacity: 0.55; cursor: not-allowed; }
.st-varform p.stock.out-of-stock { margin: 0; color: var(--st-alert); }
.st-buybox__sku[hidden] { display: none; }

/* -------------------------------- Porcelanosa request: delivery postcode

   Client round 3. Shown for price requests only (st-variants.js); typed
   in capitals however it is entered. */
.st-request--cf7 .st-request__postcode[hidden] { display: none; }
.st-request--cf7 #st-req-postcode { text-transform: uppercase; }
.st-request--cf7 #st-req-postcode::placeholder { text-transform: none; }