/* ==========================================================================
   Home Connect - single product 2026 (preview)

   Depends on home-2026.css for tokens/chrome/buttons and archive-2026.css for
   the related-products grid and cards. Both are loaded read-only.

   Mobile-first intent: on a phone the order is image, name, rate, box economics,
   stock, then the real WooCommerce purchase block. Nothing decorative sits
   between the customer and the buy control.
   ========================================================================== */

/* --- Layout -------------------------------------------------------------- */
.hc-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 34px;
  padding: 30px 0 10px;
  align-items: start;
}

/* --- Gallery ------------------------------------------------------------- */
.hc-pdp__main {

/* v22 compact ecommerce product layout */
@media(min-width:901px){.hc-pdp__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:34px}.hc-pdp__main{aspect-ratio:4/3;max-height:520px}.hc-pdp__thumb{width:70px}}
.hc-pdp__summary{align-self:start}
.hc-pdp__spec{font-size:14px;font-weight:700;color:var(--hc-navy);text-transform:uppercase;letter-spacing:.02em}
.hc-pdp__box{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 0;font-size:14px;font-weight:700;color:var(--hc-ink)}

  position: relative; aspect-ratio: 4 / 3; max-height: 520px; overflow: hidden;
  background: var(--hc-grey); border: 1px solid var(--hc-line); border-radius: var(--hc-r);
}
.hc-pdp__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hc-pdp__thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.hc-pdp__thumb {
  display: block; padding: 0; width: 70px; aspect-ratio: 4 / 3; cursor: pointer;
  background: var(--hc-grey); border: 1px solid var(--hc-line);
  border-radius: var(--hc-r); overflow: hidden;
  transition: border-color .14s;
}
.hc-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hc-pdp__thumb:hover { border-color: var(--hc-navy); }
.hc-pdp__thumb.is-on { border-color: var(--hc-navy); }
.hc-pdp__thumb:focus-visible { outline: 3px solid var(--hc-gold-l); outline-offset: 2px; }

/* --- Buy column ---------------------------------------------------------- */
.hc-pdp__title {
  font-size: clamp(23px, 2.6vw, 33px); font-weight: 800;
  letter-spacing: -.01em; color: var(--hc-ink); line-height: 1.15;
}
.hc-pdp__spec { margin-top: 8px; font-size: 13.5px; color: var(--hc-ink-3); }

/* The rate is the advertised price, so it carries the weight; its unit sits
   inline beside it, never as a faint line underneath. */
.hc-pdp__price {
  margin-top: 16px; font-size: 32px; font-weight: 800;
  color: var(--hc-ink); letter-spacing: -.015em;
}
.hc-pdp__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.hc-pdp__price del { font-size: 18px; font-weight: 600; color: var(--hc-ink-3); margin-right: 9px; }
.hc-pdp__price ins { text-decoration: none; color: var(--hc-red); }
.hc-pdp__price small,
.hc-pdp__price .woocommerce-price-suffix,
.hc-pdp__price .hc-pcard__unit {
  display: inline; font-size: 16px; font-weight: 700;
  color: var(--hc-ink-2); letter-spacing: 0; margin-left: 4px;
}
/* A package price is not a rate and must not be dressed as one. */
.hc-pdp__price.is-package { font-size: 26px; }

.hc-pdp__econ { margin-top: 6px; font-size: 13.5px; color: var(--hc-ink-3); }
.hc-pdp__econ .woocommerce-Price-amount { font-weight: 700; color: var(--hc-ink-2); }

.hc-pdp__stock {
  margin-top: 14px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #1D7A44;
}
.hc-pdp__stock.is-out { color: var(--hc-red); }

/* --- The real WooCommerce purchase block --------------------------------- */
/* Deliberately light-touch. WooCommerce, the Measurement Price Calculator and
   variation forms own this markup; we set spacing and make controls reach the
   44px touch target, and otherwise leave their structure alone. */
.hc-pdp__cart { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hc-line); }
.hc-pdp__cart input[type="number"],
.hc-pdp__cart input[type="text"],
.hc-pdp__cart select {
  font: inherit; font-size: 16px; /* 16px avoids the iOS focus zoom */
  min-height: 46px; padding: 8px 12px; color: var(--hc-ink); background: #fff;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r); max-width: 100%;
}
.hc-pdp__cart input:focus-visible,
.hc-pdp__cart select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hc-gold-l); }
.hc-pdp__cart button[type="submit"],
.hc-pdp__cart .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 34px; width: 100%; cursor: pointer;
  background: var(--hc-red); border: 1px solid var(--hc-red); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--hc-r); transition: background .14s, border-color .14s;
}
.hc-pdp__cart button[type="submit"]:hover,
.hc-pdp__cart .single_add_to_cart_button:hover {
  background: var(--hc-red-d); border-color: var(--hc-red-d);
}
.hc-pdp__cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }
.hc-pdp__cart .quantity { display: inline-flex; margin: 0 0 14px; }
.hc-pdp__cart table { width: 100%; }

.hc-pdp__short { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--hc-ink-2); }
.hc-pdp__short p { margin: 0 0 8px; }

.hc-pdp__trust { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hc-line); display: grid; gap: 9px; }
.hc-pdp__trust li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--hc-ink-2); }
.hc-pdp__trust svg { flex: 0 0 auto; color: var(--hc-gold-btn); }

/* --- Description + related ----------------------------------------------- */
.hc-pdp__h2 {
  font-size: clamp(19px, 2vw, 25px); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; color: var(--hc-ink);
}
.hc-pdp__desc { padding: 40px 0 6px; border-top: 1px solid var(--hc-line); margin-top: 40px; }
.hc-pdp__descbody { margin-top: 14px; max-width: 78ch; font-size: 15.5px; line-height: 1.65; color: var(--hc-ink-2); }
.hc-pdp__descbody h3, .hc-pdp__descbody h4, .hc-pdp__descbody h5 { margin: 18px 0 8px; color: var(--hc-ink); line-height: 1.25; }
.hc-pdp__descbody ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.hc-pdp__descbody li { margin-bottom: 5px; }
.hc-pdp__descbody p { margin: 0 0 12px; }

.hc-pdp__rel { padding: 40px 0 54px; border-top: 1px solid var(--hc-line); margin-top: 40px; }
.hc-pdp__rel .hc-pgrid { margin-top: 18px; }

/* --- Specifications (ACF "features" repeater, same data as the old detail-list) --- */
.hc-pdp__specs { padding: 40px 0 6px; border-top: 1px solid var(--hc-line); margin-top: 40px; }
.hc-pdp__specgroup { margin-top: 16px; max-width: 78ch; }
.hc-pdp__h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--hc-ink-2); margin: 0 0 8px; }
.hc-pdp__dl { margin: 0; border: 1px solid var(--hc-line); border-radius: var(--hc-r); overflow: hidden; }
.hc-pdp__dlrow { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--hc-line-2); font-size: 14.5px; }
.hc-pdp__dlrow:nth-child(odd) { background: var(--hc-grey); }
.hc-pdp__dlrow:last-child { border-bottom: 0; }
.hc-pdp__dlrow dt { margin: 0; font-weight: 700; color: var(--hc-ink-2); }
.hc-pdp__dlrow dd { margin: 0; color: var(--hc-ink); }

/* --- Carpet: manufacturer-attributed PureColor block (v11 wording) ---------- */
.hc-pdp__carpet { padding: 40px 0 6px; border-top: 1px solid var(--hc-line); margin-top: 40px; }
.hc-pdp__carpetlead { margin-top: 14px; max-width: 78ch; font-size: 15.5px; line-height: 1.6; color: var(--hc-ink-2); }
.hc-pdp__carpetlist { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 22px; max-width: 900px; }
.hc-pdp__carpetlist li { font-size: 14.5px; line-height: 1.5; color: var(--hc-ink-2); padding-left: 16px; position: relative; }
.hc-pdp__carpetlist li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-gold); }
.hc-pdp__carpetlist strong { color: var(--hc-ink); }
.hc-pdp__carpettm { margin-top: 14px; font-size: 13px; color: var(--hc-ink-3); }
.hc-pdp__carpettm a { color: var(--hc-navy); text-decoration: underline; }

@media (max-width: 640px) {
  .hc-pdp__specs, .hc-pdp__carpet { margin-top: 28px; padding-top: 28px; }
  .hc-pdp__dlrow { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Mobile sticky buy bar ----------------------------------------------- */
/* Hidden on desktop, where the buy column is already in view. */
.hc-pdp__sticky { display: none; }

@media (max-width: 900px) {
  .hc-pdp__grid { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; }
  .hc-pdp__title { font-size: 22px; }
  .hc-pdp__price { font-size: 27px; margin-top: 13px; }
  .hc-pdp__price.is-package { font-size: 22px; }
  .hc-pdp__desc, .hc-pdp__rel { margin-top: 28px; padding-top: 28px; }
  .hc-pdp__rel { padding-bottom: 96px; } /* clearance for the sticky bar */

  .hc-pdp__sticky {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--hc-line);
    box-shadow: 0 -4px 18px rgba(12, 31, 56, .10);
  }

  .hc-pdp__stickyprice { font-size: 17px; font-weight: 800; color: var(--hc-ink); }
  .hc-pdp__stickyprice .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
  .hc-pdp__stickyprice del { display: none; }
  /* DEFECT FOUND IN LOCAL RENDER: <ins> carries the browser's default underline
     here, so a sale price appeared underlined in the sticky bar. The main price
     block already resets this; the sticky bar needs its own reset. */
  .hc-pdp__stickyprice ins { text-decoration: none; color: var(--hc-red); }
  .hc-pdp__stickyprice small,
  .hc-pdp__stickyprice .woocommerce-price-suffix { font-size: 12px; font-weight: 700; color: var(--hc-ink-2); margin-left: 3px; }
  .hc-pdp__sticky .hc-btn { flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .hc-pdp__thumb { width: 68px; }
  .hc-pdp__title { font-size: 20px; }
  .hc-pdp__price { font-size: 24px; }
}

/* -------------------------------------------------------------------------
 * Colour swatches (Carpet Catalog B, Phase 3)
 * Progressive enhancement over WooCommerce's variation <select>. Hidden
 * until the script confirms the select exists; the select stays visible in
 * the form below as the accessible, no-JS path.
 * ---------------------------------------------------------------------- */
.hc-pdp__unit { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--hc-ink-2); }
.hc-pdp__ncol, .hc-pcard__ncol { font-weight: 700; color: var(--hc-ink-2); }

.hc-swatch { margin-top: 18px; }
.hc-swatch[hidden] { display: none; }
.hc-swatch__head { margin: 0 0 10px; font-size: 13.5px; color: var(--hc-ink-3); }
.hc-swatch__label { font-weight: 700; color: var(--hc-ink); margin-right: 6px; }
.hc-swatch__current { font-weight: 600; color: var(--hc-ink-2); }

.hc-swatch__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px;
}
.hc-swatch__grid li { margin: 0; }

.hc-swatch__btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; margin: 0; padding: 6px 4px 8px; cursor: pointer;
  background: #fff; border: 2px solid var(--hc-line); border-radius: var(--hc-r);
  color: var(--hc-ink-2); font: inherit; font-size: 11.5px; line-height: 1.25; text-align: center;
  transition: border-color .14s, box-shadow .14s;
}
/* DEFECT FOUND ON THE DEPLOYED PREVIEW, 5 Sep 2026 (v8). A site-wide rule
   (outside this theme's 2026 files) styles every <button> at 16px with
   white-space: nowrap and out-specifies the single-class rule above, so
   the swatch names rendered at 16px on one line and were clipped
   ("Gardenia 2", "Sun Washe") on 15 of 16 Palmetto III swatches at 1280px
   and 16 of 16 at 375px. Re-stating the typography at (0,3,0) specificity
   wins without !important; verified live: 0 clipped at both widths. */
.hc-pdp .hc-swatch .hc-swatch__btn { font-size: 11.5px; white-space: normal; line-height: 1.25; }
.hc-pdp .hc-swatch .hc-swatch__name { display: -webkit-box; white-space: normal; }
.hc-swatch__btn img,
.hc-swatch__noimg {
  display: block; width: 100%; max-width: 72px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 4px; background: var(--hc-grey);
}
.hc-swatch__noimg { border: 1px dashed var(--hc-line); }
.hc-swatch__name {
  /* Two lines max, then clip: "Forget Me Not 4255" must not become "Forget..." */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  width: 100%; overflow: hidden; overflow-wrap: break-word; min-height: 2.5em;
}
.hc-swatch__btn:hover { border-color: var(--hc-navy); }
.hc-swatch__btn:focus-visible { outline: 3px solid var(--hc-gold-l); outline-offset: 2px; }
.hc-swatch__btn.is-on {
  border-color: var(--hc-navy); color: var(--hc-ink);
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px var(--hc-navy);
}
.hc-swatch__btn.is-on .hc-swatch__name { font-weight: 700; }
.hc-swatch__btn.is-out { opacity: .55; }
.hc-swatch__btn.is-out img { filter: grayscale(1); }

@media (max-width: 640px) {
  .hc-swatch__grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .hc-swatch__btn,
  .hc-pdp .hc-swatch .hc-swatch__btn { font-size: 10.5px; padding: 5px 3px 7px; }
}

/* ==========================================================================
   v23 — PDP buying actions follow the approved colour system (8 Sep 2026)

   The legacy site-wide sheet still carries, at style.css:164-165:

     .woocommerce button.button.alt, .single_add_to_cart_button
       { background-image: linear-gradient(90deg,#C9132A 21%,#EEAC17 66%) !important; }
     .qib-button-wrapper button.qib-button  { ...the same gradient!important... }

   That red-to-gold gradient paints over the flat red this stylesheet already
   sets, so the PDP's primary action rendered orange (measured rgb(255,111,15))
   with the wrong weight and a square corner. It is the last gold left in the
   buying path.

   These rules are scoped to .hc-pdp so they can only ever apply inside the 2026
   product page. The legacy rule is left exactly as it is, so the current live
   PDP, cart and checkout are unaffected - this does not change any page the
   public sees today. !important is required only because the legacy declaration
   uses it.
   ========================================================================== */

/* Primary action: flat Home Connect red, per the approved system.
   The selector is deliberately specific. The legacy rule is
   `.woocommerce button.button.alt` (0,3,1) plus !important, and it is enqueued
   after this sheet, so a 3-class selector loses to it. Matching the element and
   both WooCommerce classes inside the PDP scope wins cleanly. Verified against
   the live product page: background resolves to rgb(200,16,46). */
body.hc-pdp .hc-pdp__cart form.cart button.single_add_to_cart_button.button.alt {
  background-image: none !important;
  background: var(--hc-red) !important;
  border: 1px solid var(--hc-red) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: var(--hc-r) !important;
}
body.hc-pdp .hc-pdp__cart form.cart button.single_add_to_cart_button.button.alt:hover {
  background: var(--hc-red-d) !important;
  border-color: var(--hc-red-d) !important;
}
body.hc-pdp .hc-pdp__cart form.cart button.single_add_to_cart_button.button.alt.disabled,
body.hc-pdp .hc-pdp__cart form.cart button.single_add_to_cart_button.button.alt:disabled {
  opacity: .5; cursor: not-allowed;
}

/* Quantity stepper: a secondary control, so navy outline - never a second
   button competing with Add to Cart. Same legacy gradient, same treatment. */
body.hc-pdp .hc-pdp__cart .qib-button-wrapper button.qib-button.qib-button {
  background-image: none !important;
  background: #fff !important;
  border: 1px solid var(--hc-line) !important;
  color: var(--hc-navy) !important;
  font-weight: 700 !important;
  border-radius: var(--hc-r) !important;
}
body.hc-pdp .hc-pdp__cart .qib-button-wrapper button.qib-button.qib-button:hover {
  background: var(--hc-navy) !important;
  border-color: var(--hc-navy) !important;
  color: #fff !important;
}