/* Catalogue: the product grid, the product card and the product page.
   Colours, radii and spacing all come from tokens.css; the shared primitives
   (buttons, breadcrumb, page head, media slots, sections) come from layout.css.
   Only the catalogue's own layout lives here, and no font or external resource
   is added. Everything is enqueued by inc/setup.php when this file exists. */

/* ---------- Product grid ---------- */
.product-grid{list-style:none;margin:0;padding:0;display:grid;gap:30px 26px;grid-template-columns:repeat(4,minmax(0,1fr))}
.product-grid__item{min-width:0}
.product-grid__heading{margin:0 0 var(--space-md);font-size:1.4rem;line-height:1.25}

/* A range with nothing in it yet: one quiet line rather than an empty grid. */
.product-grid__empty{margin:0;padding:var(--space-md) 0;font-size:.88rem;color:var(--muted)}
/* The pager of a paginated grid, and the "showing x of y" line that stands in
   for the count in the products index's toolbar: a page with no toolbar still
   says how much of the range it is showing. WordPress builds the links and the
   page numbers; only their shape is set here. These live in this sheet rather
   than a page's own because the category pages page as well, and catalog.css is
   the sheet every page loads. */
.product-grid__range{margin:0 0 var(--space-md);font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.product-grid__pagination{margin-top:var(--space-lg)}
.product-grid__pages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.product-grid__pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);color:var(--ink);font-family:var(--font-display);font-size:.82rem;font-weight:700;transition:border-color .22s,background .22s}
.product-grid__pagination a.page-numbers:hover{border-color:var(--ink);background:var(--canvas)}
.product-grid__pagination .page-numbers.current{border-color:var(--clay);background:var(--cream)}
.product-grid__pagination .page-numbers.dots{border-color:transparent;background:transparent}

/* ---------- Product card ---------- */
.product-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card);overflow:hidden;transition:transform .24s,border-color .24s}
.product-card:hover{transform:translateY(-4px);border-color:var(--line)}
/* The card's photograph is square, so the whole item shows: the catalogue's
   uploads are square, and a 4:3 frame cropped the top and bottom off them.
   The frame is shared by the products index, the category pages and the
   related products under a product page, and the photograph fills it. */
.product-card__media{position:relative;aspect-ratio:1/1;background:var(--cream);overflow:hidden}
.product-card__media .media-slot{width:100%;height:100%;border-radius:0}
.product-card__image{display:block;width:100%;height:100%;object-fit:cover}
.product-card__body{padding:20px 22px 24px}
.product-card__title{font-size:1.06rem;line-height:1.3}
.product-card:hover .product-card__title{color:var(--clay)}
.product-card__meta{margin-top:8px;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.product-card__summary{margin-top:10px;font-size:.82rem;line-height:1.5;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-card__image{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.product-card:hover .product-card__image{transform:scale(1.045)}

/* =========================================================================
   Product page (single-product.php)
   The page reads in three movements: the hero pair that answers "what is this
   and how do I ask about it", the sections that answer the buyer's questions
   one at a time, and the closing bands that carry the quote call. A section
   names itself first, at the left edge, and puts its content below it across
   the page's width, so a two-row specification or an option grid has room
   rather than sitting in half a page-wide empty band.
   ========================================================================= */

/* The hero starts the page, so its own air comes from the header above it and
   the closing band meets the footer without an extra strip of canvas. */
.product-page{--layout-width:1340px;padding-top:var(--space-lg);padding-bottom:0}

/* ---------- The hero pair: photographs and the buying summary ---------- */
.product-hero{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--space-2xl);align-items:start}
.product-media{display:grid;gap:14px;min-width:0}
.product-media__main{display:block;background:var(--cream);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 22px 44px rgb(76 55 39 / 10%)}
.product-media__main img{display:block;width:100%;height:auto}
.product-media__thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.product-media__thumbs li{min-width:0}
.product-media__thumbs a{display:block;aspect-ratio:1/1;background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--radius-control);overflow:hidden;transition:border-color .24s,transform .24s}
.product-media__thumbs a:hover{border-color:var(--clay);transform:translateY(-3px)}
.product-media__thumbs img{display:block;width:100%;height:100%;object-fit:cover}

/* The buying summary is the hero's own right column, so every rule is written
   from the hero down. The copy in the record can carry this class too (see the
   prose reset below), and a name alone must never make it a column of the page. */
.product-hero > .product-intro{display:flex;flex-direction:column;gap:var(--space-md);min-width:0}
.product-hero .page-head__eyebrow{margin:0}
.product-hero .page-head__eyebrow a{border-bottom:1px solid currentColor;padding-bottom:2px}
.product-hero .page-head__eyebrow a:hover{color:var(--clay-dark)}
.product-hero .page-head__title{margin:0;font-size:clamp(2rem,3.1vw,2.9rem)}
.product-summary{margin:0;max-width:46ch;font-size:1.02rem;line-height:1.6;color:var(--muted)}
.product-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* The quick specifications, in the one card the page's right column carries:
   the values a buyer checks before writing to anyone. */
.product-facts{margin:0;padding:var(--space-md) var(--space-md) var(--space-xs);background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.product-facts__title{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.product-facts__list{margin:10px 0 0;display:grid}
.product-facts__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);padding:11px 0;border-top:1px solid var(--line-soft)}
.product-facts__row:first-child{border-top:0;padding-top:4px}
.product-facts__label{flex:none;margin:0;font-size:.86rem;color:var(--muted)}
.product-facts__value{margin:0;min-width:0;font-size:.9rem;font-weight:600;text-align:right}
/* A value nobody has confirmed yet takes the whole row and says so. */
.product-facts__row--pending{display:block}
.product-facts__pending{display:block;margin-top:6px;font-size:.84rem;font-weight:400;text-align:left;color:var(--muted)}

/* ---------- The sections ---------- */
.product-section{padding-block:var(--space-section)}
/* A section is one column: its small label first, flush with the left edge, and
   its content below it. The content takes the page's whole width, so a
   specification table, an option grid or a detail photograph is as wide as the
   page allows, and only the running text inside it is held to a reading
   measure. The label stays in source order ahead of the text it names. */
.product-section__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-md);align-items:start}
.product-section__head{min-width:0}
.product-section__head .eyebrow{margin-bottom:12px}
.product-section__head h2{margin:0;font-size:clamp(1.7rem,2.55vw,2.35rem)}
.product-section__body{min-width:0}
.product-section__lead{margin:0 0 var(--space-md);max-width:62ch;color:var(--muted)}

/* Overview copy: whatever the editor put in the product record. Held to a wider
   reading measure than the rest of the site, because this page is drawn wider.

   The copy is a record's own HTML — often a whole guide or landing page pasted
   in — and it arrives with its own sections, headings, tables and rules. So it
   is set from the copy's own level: a heading inside it is a heading of the
   copy and not the page's display h2, and the spacing runs at every depth of it
   rather than only between its first children. */
.product-prose{max-width:76ch;color:var(--ink)}
.product-prose > * + *{margin-top:var(--space-sm)}
.product-prose h1,.product-prose h2{font-size:clamp(1.35rem,1.9vw,1.6rem);line-height:1.3;letter-spacing:-.02em}
.product-prose h3,.product-prose h4{color:var(--ink)}
.product-prose :is(h1,h2,h3,h4,h5,h6){margin-top:var(--space-lg)}
.product-prose :is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}
.product-prose p,.product-prose ul,.product-prose ol,.product-prose dl{margin:var(--space-sm) 0 0}
.product-prose ul,.product-prose ol{padding-left:20px}
.product-prose li + li{margin-top:6px}
.product-prose img{max-width:100%;height:auto;border-radius:var(--radius-card)}
.product-prose hr{margin:var(--space-lg) 0;border:0;border-top:1px solid var(--line)}
.product-prose table{width:100%;margin-top:var(--space-md);border-collapse:collapse;font-size:.9rem}
.product-prose :is(th,td){padding:11px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.product-prose th{background:var(--canvas);font-weight:700}
.product-prose tr:last-child :is(th,td){border-bottom:0}

/* A pasted block that carries one of the theme's own block classes is still
   copy. The layout those classes carry — a grid, a sticky column, a fixed
   width, a card's fill — stops at the prose's edge, so the copy can never lay
   itself out over the page it is written on. */
.product-prose :is(
  [class^="product-"], [class*=" product-"],
  [class^="category-"], [class*=" category-"],
  [class^="panel-"], [class*=" panel-"],
  [class^="subpage-"], [class*=" subpage-"],
  .container, .section, .section-heading, .option-list, .option, .faq-list, .faq,
  .link-grid, .link-card, .step-list, .step, .record, .split, .pair-grid,
  .pair-panel, .check-list, .stack-list, .stack-item, .note-line, .media-slot
){
  position:static;inset:auto;z-index:auto;float:none;display:block;
  grid-template-columns:none;grid-template-rows:none;flex-direction:row;
  gap:normal;justify-content:flex-start;width:auto;max-width:none;height:auto;
  padding:0;background:none;border:0;border-radius:0;box-shadow:none;
  transform:none;overflow:visible;
}

/* ---------- Specifications ---------- */
.spec-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card);overflow:hidden}
.spec-table th,.spec-table td{padding:15px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.spec-table th{width:42%;background:var(--canvas);font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.spec-table td{font-weight:600}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table__note{font-weight:400;color:var(--muted)}

/* ---------- Customisation options ---------- */
.option-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.option{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px 20px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.option__label{font-family:var(--font-display);font-size:.95rem;font-weight:700}
.option__note{margin:0;font-size:.86rem;line-height:1.5;color:var(--muted)}

/* ---------- Detail photographs ---------- */
.product-detail-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-sm)}
.product-detail-grid li{min-width:0}
.product-detail-grid img{display:block;width:100%;height:auto;background:var(--cream);border-radius:var(--radius-card)}

/* ---------- Projects this product suits ---------- */
.product-solutions{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.product-solutions li{min-width:0}
.product-solution-link{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-control);font-family:var(--font-display);font-size:.98rem;font-weight:700;transition:transform .24s,border-color .24s,color .24s}
.product-solution-link:hover{transform:translateY(-2px);border-color:var(--line);color:var(--clay)}
.product-solution-link__title{min-width:0}
.product-solution-link .arrow{flex:none;color:var(--clay)}

/* ---------- Questions buyers ask ---------- */
.faq-list{list-style:none;margin:0;padding:0}
.faq-list > li{border-top:1px solid var(--line-soft)}
.faq-list > li:last-child{border-bottom:1px solid var(--line-soft)}
.faq__question{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);padding-block:var(--space-sm);cursor:pointer;font-family:var(--font-display);font-size:1.02rem;font-weight:700;list-style:none}
.faq__question::-webkit-details-marker{display:none}
.faq__question::after{content:"+";flex:none;color:var(--clay)}
.faq-list details[open] .faq__question::after{content:"–"}
.faq__answer{margin:0 0 var(--space-sm);max-width:66ch;color:var(--muted)}

/* ---------- The related range with nothing in it yet ---------- */
.product-empty{max-width:720px;margin:0;padding:var(--space-md) var(--space-lg);background:var(--white);border:1px dashed var(--line);border-left:3px solid var(--clay);border-radius:var(--radius-control);font-size:.94rem;line-height:1.6;color:var(--muted)}
.product-empty .text-link{margin-left:6px}

/* ---------- The photograph viewer the gallery behaviour drives ---------- */
.product-lightbox{width:min(94vw,1080px);max-width:none;max-height:94vh;padding:0;border:1px solid var(--line-soft);border-radius:var(--radius-card);background:var(--white);color:var(--ink);overflow:hidden}
.product-lightbox::backdrop{background:rgb(52 46 41 / 74%)}
.product-lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:14px 20px;border-bottom:1px solid var(--line-soft)}
.product-lightbox__caption{margin:0;font-family:var(--font-display);font-size:.88rem;font-weight:700;color:var(--muted)}
.product-lightbox__close{padding:9px 15px;border:1px solid var(--line);border-radius:var(--radius-control);background:transparent;font-size:.78rem;font-weight:700}
.product-lightbox__close:hover{border-color:var(--ink)}
.product-lightbox__image{display:block;width:100%;max-height:72vh;object-fit:contain;background:var(--cream)}
.product-lightbox__nav{display:flex;justify-content:flex-end;gap:12px;padding:14px 20px;border-top:1px solid var(--line-soft)}
.product-media[data-state="loading"] .product-lightbox__image{opacity:.5}

/* ---------- The phone's own quote bar ---------- */
.product-sticky-cta{display:none}

/* ---------- Narrow screens ---------- */
@media (min-width:1100px) and (min-height:820px){
  /* The buying summary follows a tall photograph down the page, but only in a
     window tall enough to hold it: a short one would clip its foot. */
  .product-hero > .product-intro{position:sticky;top:calc(var(--layout-header-height) + var(--space-md))}
}
@media (max-width:1100px){
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-hero{grid-template-columns:1fr;gap:var(--space-lg)}
  .product-hero > .product-intro{gap:var(--space-sm)}
  .product-section{padding-block:var(--space-xl)}
  .product-section__inner{grid-template-columns:1fr;gap:var(--space-md)}
  .option-list{grid-template-columns:1fr}
  .product-lightbox{width:100vw;max-height:100vh;border:0;border-radius:0}
  .product-lightbox__image{max-height:64vh}
  .product-sticky-cta{position:fixed;right:0;bottom:0;left:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:rgb(250 248 244 / 97%);border-top:1px solid var(--line);backdrop-filter:blur(12px);box-shadow:0 -8px 24px rgb(76 55 39 / 10%)}
  .product-sticky-cta__name{margin:0;min-width:0;flex:1;font-family:var(--font-display);font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .product-sticky-cta .btn{flex:none}
  /* The bar is fixed, so the footer keeps its last line clear of it. */
  body:has(.product-sticky-cta) .site-footer{padding-bottom:calc(24px + 74px)}
}
@media (max-width:560px){
  .product-grid{grid-template-columns:1fr}
  .product-grid__heading{font-size:1.2rem}
  .product-media__thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-cta .btn{flex:1 1 auto}
  .product-facts__row{flex-direction:column;gap:4px}
  .product-facts__value{text-align:left}
  /* Narrow screens stack the specification table's label over its value. */
  .spec-table th,.spec-table td{display:block;width:100%}
  .spec-table th{padding-bottom:6px;border-bottom:0}
  .spec-table td{padding-top:0}
  .product-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}