/* Additions for the CMS-driven product page (size/finish choices and the enquiry form).
   Uses the template's own tokens from ayobanton.webflow.shared.css. */
.product-content-wrapper a:not(.w-button) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.product-content-wrapper a:not(.w-button):hover { color: var(--dore); }
.enquiry-pills { flex-wrap: wrap; gap: 10px; }
.enquiry-pills .secondary-button { margin-right: 0; }
.enquiry-pills .secondary-button.w--ecommerce-pill-selected { background-color: var(--white); color: var(--black); }
.enquiry-form { margin-top: 20px; display: grid; gap: 6px; }
/* Closed form: laid out but invisible (not display:none), so the button's letter-by-letter label is split
   correctly on load; visibility:hidden also keeps it out of the tab order and away from screen readers. */
.enquiry-form.is-collapsed { visibility: hidden; height: 0; margin-top: 0; overflow: hidden; }
.enquiry-form .text-field { color: inherit; margin-bottom: 10px; }
.enquiry-form textarea.text-field { min-height: 110px; }
.enquiry-summary { margin: 4px 0 10px; color: var(--body-text-grey); }
/* The text column shrinks the enquiry block to its widest line. These changing messages wrap inside the width the
   size and finish buttons set, instead of widening the block (and the button and fields) as their text changes. */
.enquiry-summary, .enquiry-form .w-form-done, .enquiry-form .w-form-fail { width: 0; min-width: 100%; }
.enquiry-form .w-form-done { color: var(--black); }
[data-enquiry-pill]:focus-visible, [data-enquiry-open]:focus-visible { outline: 2px solid var(--dore); outline-offset: 2px; }
.enquiry-form .text-field { transition: border-color .3s ease; }
.enquiry-form .text-field:focus-visible { border-color: var(--dore); outline: 2px solid var(--dore); outline-offset: 2px; }
[data-enquiry-pill] { touch-action: manipulation; }

/* Product page: artwork and "in a room" views. The stage keeps the artwork's proportions and room
   photos fill it, so switching views never shifts the layout. */
.room-stage { position: relative; overflow: hidden; background-color: var(--black); }
.room-sizer { display: block; width: 100%; height: auto; visibility: hidden; }
/* Each view is opaque black, so a room photo of a different shape than the artwork still covers the whole
   frame as it wipes in (the space around it reads as black bars) and the artwork never shows through. */
.room-stage .room-view { position: absolute; inset: 0; display: block; background-color: var(--black); scroll-margin-bottom: 150px; }
.room-stage .room-view[hidden] { display: none; }
/* Room photos fill the artwork-shaped frame (cover): most differ by a few percent; the tallest (Brutiful) and
   squarest (Stardust in Bloom) lose some wall or floor, but the framed work sits mid-photo and stays whole.
   The full photo is still in the click-to-zoom view. */
.room-stage .room-view img { display: block; width: 100%; height: 100%; object-fit: cover; }
.room-sweep { position: absolute; top: 0; left: 0; z-index: 3; width: 2px; height: 100%; margin-left: -1px; background: linear-gradient(to bottom, transparent, var(--dore) 30%, var(--dore) 70%, transparent); box-shadow: 0 0 18px 2px rgba(195, 156, 93, .45); opacity: 0; pointer-events: none; }
/* The artwork is often taller than the screen, so the thumbnails stay pinned to the bottom of the view while it scrolls past. */
.room-tabs { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 14px; padding: 36px 16px 14px; background: linear-gradient(to bottom, rgba(9, 9, 9, 0), rgba(9, 9, 9, .88) 50%); }
.room-tab { display: grid; gap: 8px; justify-items: start; padding: 0; border: 0; background: none; color: var(--body-text-grey); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: color .3s ease; }
.room-tab-thumb { position: relative; display: block; width: 72px; height: 72px; overflow: hidden; }
.room-tab-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .5; transform: scale(1.06); transition: opacity .4s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.room-tab-label { position: relative; padding-bottom: 4px; font-size: .85rem; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.room-tab-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: var(--dore); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.room-tab:hover { color: var(--white); }
.room-tab:hover .room-tab-thumb img { opacity: .85; transform: scale(1.14); }
.room-tab[aria-selected="true"] { color: var(--white); }
.room-tab[aria-selected="true"] .room-tab-thumb img { opacity: 1; transform: scale(1); }
.room-tab[aria-selected="true"] .room-tab-label::after { transform: scaleX(1); }
.room-tab:focus-visible { outline: 2px solid var(--dore); outline-offset: 4px; }
.room-note { margin: 12px 0 0; font-size: .85rem; color: var(--body-text-grey); }
.room-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .room-tab-thumb img, .room-tab-label::after { transition: none; }
}

/* The template sizes the product image by squeezing it against the text column, so its width depended on
   how long the old Webflow descriptions were. Pinned to the width the live site showed on every product
   (measured: 396px at 1440, 323 at 1280, 217 at 1024, 205 at 992), whatever the description length. */
@media screen and (min-width: 992px) {
  .product-grid { width: 100%; }
  .product-grid > .product-image { flex: 0 0 auto; width: calc(42.63vw - 218px); }
  .product-grid > .product-content-wrapper { flex: 1 1 0%; min-width: 0; }
}