/* Single product (Pazyryk): the rug photo first, then the wall label, actions and the enquiry section.
   Loaded on product pages only. The photo is never cropped (object-fit: contain). */

.rug-page {
  padding: var(--sp-5) var(--gutter) 0;
  max-width: var(--page-max);
  margin-inline: auto;
  scroll-padding-bottom: 72px; /* a focused field never sits behind the sticky phone bar (WCAG 2.4.11) */
}

html:has(.rug-page) {
  scroll-padding-bottom: 72px;
}

.product-photo {
  margin: 0 0 var(--sp-5);
  padding: var(--mat-pad);
  background: var(--c-mat);
  box-shadow: var(--shadow-mat);
}

.product-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}

.product-label h1 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  margin-bottom: var(--sp-4);
}

.product-label .hung-rug {
  margin-bottom: var(--sp-4);
}

.product-label .wall-label {
  padding-top: 0;
  font-size: var(--fs-ui);
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-5);
}

.enquire {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-rule);
}

.enquire h2 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  margin-bottom: var(--sp-4);
}

.enquire [data-enquiry-form] {
  max-width: 40rem;
  padding-bottom: var(--sp-6);
}

.sticky-phone {
  display: none;
}

/* phones: the call bar stays at the bottom edge while the visitor reads */
@media (max-width: 699px) {
  .sticky-phone {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-inline: calc(var(--gutter) * -1);
    background: var(--c-brand);
    color: var(--c-on-brand);
    font: 600 var(--fs-ui) / 1 var(--font-ui);
    text-decoration: none;
  }

  .sticky-phone:focus-visible {
    outline-color: var(--c-on-brand);
    outline-offset: -6px;
  }

  /* while the visitor is filling in the enquiry form the bar steps aside: it sat over the form's fields and checkboxes (axe
     target-size, responsive audit 2026-10-12); it comes back when focus leaves the form */
  .enquire:focus-within ~ .sticky-phone {
    display: none;
  }
}

@media (min-width: 900px) {
  .rug-page {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: var(--sp-8);
    align-items: start;
    padding-top: var(--sp-7);
  }

  /* the column holds the place in the grid; the photo inside it stays in view only as far as the column goes (a sticky grid item
     was held to the whole grid and slid over "More rugs" at the end of the page, 2026-10-12) */
  .product-photo-col {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .product-label {
    grid-column: 2;
    grid-row: 1;
    /* not sticky: the label (with the description) is taller than most viewports, and Chrome constrains a sticky grid item to
       the whole grid, so it slid over the enquiry form when a visitor jumped to #enquire and hid the focused field (WCAG 2.4.11) */
  }

  .enquire {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--sp-5);
  }
}

/* 900 to 1199 px the right column is 318 to 420 px: the form's name field was 85 px wide (responsive audit 2026-10-12) */
@media (min-width: 900px) and (max-width: 1199px) {
  .product-photo-col { grid-row: 1; }
  .enquire { grid-column: 1 / -1; grid-row: 2; max-width: 46rem; }
}

/* WooCommerce's gallery script adds a zoom/full-screen trigger and a thumbnail strip; the stock WooCommerce CSS is dequeued, so
   style them here: no emoji magnifier (the photo opens full size from its own link), thumbnails in a quiet row, photo centred */
.product-photo .woocommerce-product-gallery__trigger {
  display: none;
}

.product-photo .flex-control-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
}

.product-photo .flex-control-nav li {
  margin: 0;
}

.product-photo .flex-control-nav img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.product-photo .flex-control-nav img.flex-active {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.product-photo .woocommerce-product-gallery__image img {
  margin-inline: auto;
}

/* WooCommerce caps its gallery block at 512 px (the photo size it serves); centre it in the wider desktop frame */
.product-photo .wp-block-woocommerce-product-image-gallery {
  margin-inline: auto;
}

/* The gallery keeps one shape before and after WooCommerce's slider script runs (stress test, Fast 3G: the photos first stacked
   full size, then collapsed into one slide and a thumbnail strip; the wall label jumped, CLS 0.13 to 0.19).
   Thumbnails are square boxes with the whole photo inside (contain: never cropped). Before the script, with JavaScript on
   (html[data-motion] is set by the inline head script) and until WooCommerce sets the gallery's inline opacity to 1 in the slider's start callback, photos 2 to n sit in that same 4-column strip under photo 1, and an
   empty square stands where photo 1's own thumbnail will go. Without JavaScript the photos stay stacked, all at full size. */
.product-photo .flex-control-nav img {
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--c-mat);
}

html[data-motion] .product-photo .woocommerce-product-gallery[style*="opacity: 0"]:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}

html[data-motion] .product-photo .woocommerce-product-gallery[style*="opacity: 0"]:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:first-child {
  order: -1;
  grid-column: 1 / -1;
  margin-bottom: calc(var(--sp-3) - var(--sp-2));
}

html[data-motion] .product-photo .woocommerce-product-gallery[style*="opacity: 0"]:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper:has(> :nth-child(2))::before {
  content: "";
  aspect-ratio: 1;
  background: var(--c-mat);
}

html[data-motion] .product-photo .woocommerce-product-gallery[style*="opacity: 0"]:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:nth-child(n+2) {
  order: 1;
  aspect-ratio: 1;
  overflow: hidden;
}

html[data-motion] .product-photo .woocommerce-product-gallery[style*="opacity: 0"]:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:nth-child(n+2) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--c-mat);
}

/* the slider's own first frames: it wraps the photos in .flex-viewport, still stacked, about 100 ms before it sizes the slides */
html[data-motion] .product-photo .woocommerce-product-gallery[style*="opacity: 0"] .flex-viewport .woocommerce-product-gallery__image:nth-child(n+2) {
  display: none;
}

html[data-motion] .product-photo .woocommerce-product-gallery[style*="opacity: 0"] .flex-viewport {
  container-type: inline-size;
}

html[data-motion] .product-photo .woocommerce-product-gallery[style*="opacity: 0"] .flex-viewport .woocommerce-product-gallery__image:first-child {
  max-width: 100cqw;
}

/* The first photo paints from the HTML: WooCommerce prints the gallery at inline opacity 0 until its slider script (behind jQuery
   and about 65 KB of gallery scripts) has run, which held the LCP (independent speed review). The rules above keep the shape
   steady while the script starts. */
.product-photo .woocommerce-product-gallery {
  opacity: 1 !important;
}

.product-photo .flex-control-nav img:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* a sold rug: one plain sentence above the actions */
.rug-sold-note {
  margin: var(--sp-3) 0;
  color: var(--c-text);
}

.sticky-phone.is-redundant {
  visibility: hidden;
}

/* a sold rug's page: rugs like it that are on the wall now */
.sold-similar {
  grid-column: 1 / -1;
  margin-top: var(--sp-7, 48px);
}

.sold-similar .sold-similar-wall {
  margin-top: var(--sp-4, 16px);
}

/* "Listed in" category links: 17 px tall; 4 px above and below gives the 24 px minimum target (WCAG 2.5.8, responsive audit 2026-10-12) */
.taxonomy-product_cat a {
  display: inline-block;
  padding-block: 4px;
}

/* ---------- rug page redesign, 2026-10-12 ----------
   Baymard (product pages): the facts a buyer compares in one scannable list beside the call to action, reassurance next to the
   button, the full description after it, and a next step at the end. The photo column stays in view while the details scroll. */
.product-label h1 { margin-bottom: var(--sp-2, 8px); line-height: 1.05; }
/* the wall label's origin and size now live in Details */
.product-label .wall-label-meta,
.product-label .wall-label-size { display: none; }
.product-label .hung-rug { margin-bottom: var(--sp-2, 8px); }
.product-actions .btn { min-height: 52px; padding-inline: var(--sp-5, 24px); }
.product-actions .btn-primary { flex: 1 1 14rem; justify-content: center; }

.rug-details { margin: var(--sp-5, 24px) 0 var(--sp-6, 32px); }
.rug-details-h, .rug-about-h { margin: 0 0 var(--sp-3, 12px); font-size: 1.5rem; }
.rug-spec { margin: 0; border-top: 1px solid var(--c-rule); }
.rug-spec-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--sp-4, 16px); padding: 11px 0; border-bottom: 1px solid var(--c-rule); }
.rug-spec dt { margin: 0; font: 400 var(--fs-ui, 0.9375rem) / 1.4 var(--font-ui); color: var(--c-muted); }
.rug-spec dd { margin: 0; font: 500 var(--fs-ui, 0.9375rem) / 1.4 var(--font-ui); color: var(--c-text); }
.rug-spec-row.is-instock dd::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c-link); vertical-align: 1px; }
.rug-assure { list-style: none; margin: var(--sp-5, 24px) 0 0; padding: var(--sp-4, 16px) var(--sp-5, 24px); background: var(--c-surface); display: grid; gap: var(--sp-3, 12px); }
.rug-assure li { margin: 0; font: 400 var(--fs-ui, 0.9375rem) / 1.55 var(--font-ui); color: var(--c-text); }
.rug-assure strong { font-weight: 600; }
.rug-assure a { color: var(--c-link); }

.rug-about-h { margin-top: var(--sp-6, 32px); }
.rug-about { max-width: 40rem; }
.rug-about p { margin: 0 0 var(--sp-4, 16px); line-height: 1.7; }

.rug-terms-more { margin: var(--sp-5, 24px) 0 0; padding-top: var(--sp-3, 12px); border-top: 1px solid var(--c-rule); font: 400 var(--fs-small, 0.8125rem) / 1.6 var(--font-ui); color: var(--c-muted); }
.rug-terms-more summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 500; color: var(--c-text); }
.rug-terms-more .wp-block-post-terms { margin-top: var(--sp-2, 8px); }

/* the photo stays in view beside the details (desktop); Chrome keeps a sticky grid item inside its own area */
@media (min-width: 900px) {
  .product-photo { position: sticky; top: var(--sp-4, 16px); align-self: start; }
}

/* more rugs like this: a full-width row after the enquiry */
.rug-more { grid-column: 1 / -1; margin-top: var(--sp-8, 72px); padding-top: var(--sp-6, 32px); border-top: 1px solid var(--c-rule); }
.rug-more h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin-bottom: var(--sp-4, 16px); }
.rug-more-all a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-link); font: 500 var(--fs-ui, 0.9375rem) / 1 var(--font-ui); }
@media (max-width: 599px) { .product-actions .btn { flex: 1 1 100%; justify-content: center; } }