/* ============================================================
   SITE FOOTER — single compact bar
   Loaded on every page by maison-en-strings, versioned with
   filemtime() so edits are picked up without a manual bump.

   COLOUR
   The header paints no background of its own: header.site-header
   computes rgba(0,0,0,0) and reads as black only because dark page
   content sits behind it. The one colour it does paint is its comb,
   rgb(30,43,36) / #1E2B24, so that is used here for both the bar and
   its teeth - the two then read as a single continuous shape and the
   footer matches the only tone the header actually renders.

   TEETH
   Same repeating-linear-gradient recipe as the header's ::after comb
   (18px tooth, 10px gap, 40px tall), anchored to the top edge rather
   than the bottom so the teeth point up out of the bar.
   ============================================================ */

:root {
  /* The reference shows a neutral black bar. The header paints no background
     of its own (it computes transparent), and the only colour it renders is its
     comb at rgb(30,43,36) - a very dark green. Following the reference here and
     using a neutral near-black; the teeth use this same value so the bar and its
     teeth remain one continuous shape. */
  --footer-bar-bg: #0E0E0E;
  /* Geometry taken from the header's REAL zigzag, which is a
     clip-path: polygon() on .site-header injected by a mu-plugin -
     notches 5px wide x 18px deep on a 15px pitch. The header's
     ::after repeating-gradient (18px tooth / 10px gap / 40px tall)
     is legacy and never renders on its own: a clip-path also clips
     its host's pseudo-elements, so that gradient only ever shows
     through the polygon at 18px depth. Copying the uncropped
     gradient values is what made these teeth twice too tall. */
  --footer-tooth-w: 10px;
  --footer-gap-w: 5px;
  --footer-tooth-h: 18px;
}

/* kill the old multi-column footer's spacing if any rule still targets it */
.site-footer--bar .footer-top,
.site-footer--bar .footer-bottom { display: none !important; }

.site-footer--bar {
  position: relative;
  background: var(--footer-bar-bg) !important;
  margin: var(--footer-tooth-h) 0 0 !important;   /* room for the teeth above */
  padding: 0 !important;
  border: 0 !important;
  overflow: visible;
}

/* toothed strip along the top edge */
.site-footer--bar::before {
  content: "";
  position: absolute;
  top: calc(var(--footer-tooth-h) * -1);
  left: 0;
  right: 0;
  height: var(--footer-tooth-h);
  background: repeating-linear-gradient(
    to right,
    var(--footer-bar-bg) 0,
    var(--footer-bar-bg) var(--footer-tooth-w),
    transparent var(--footer-tooth-w),
    transparent calc(var(--footer-tooth-w) + var(--footer-gap-w))
  );
  pointer-events: none;
}

.footer-bar {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(1.1rem, 2vw, 1.8rem) clamp(1.25rem, 3.2vw, 3.4rem);
  box-sizing: border-box;
}

/* logo — plain img, so maison-logo-protect's 104px inline rule never applies */
.footer-bar__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.footer-bar__logo img {
  /* The new lockup (MM mark + wordmark) is 593x81, ratio 7.32, where the
     previous wordmark-only art was 4.17. Height is reduced so the logo keeps
     a comparable visual weight in the row instead of running twice as wide. */
  height: clamp(20px, 1.9vw, 28px);
  width: auto;
  max-width: none;
  display: block;
  filter: none;
}
.footer-bar__wordmark {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.footer-bar__copy[class][class][class][class][class][class] {
  flex: 0 0 auto;
  margin: 0 !important;
  font-family: 'Consola Mono', ui-monospace, monospace !important;
  font-size: clamp(0.62rem, 0.85vw, 0.86rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  white-space: nowrap;
}

/* icons take the middle, pushing the links to the right */
.footer-bar__social {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.2rem);
}
.footer-bar__icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: #fff;
  transition: opacity 0.25s ease;
}
.footer-bar__icon:hover { opacity: 0.65; }
.footer-bar__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
/* the Pinterest glyph is a solid path, not an outline */
.footer-bar__icon:last-child svg { fill: currentColor; stroke: none; }

.footer-bar__links {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}
.footer-bar__links a[class],
.footer-bar__links a {
  font-weight: 900;
  font-size: clamp(0.68rem, 0.95vw, 0.95rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.footer-bar__links a:hover { opacity: 0.65; }

/* no page should end on a pale strip beneath the bar */
html, body { background-color: #202120; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .footer-bar {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 1.1rem;
    padding: 1.6rem 1.25rem;
  }
  .footer-bar__logo { flex: 1 0 100%; display: flex; justify-content: center; }
  .footer-bar__copy { flex: 1 0 100%; order: 4; }
  .footer-bar__social { flex: 1 0 100%; order: 2; }
  .footer-bar__links { flex: 1 0 100%; order: 3; justify-content: center; }
}
@media (max-width: 480px) {
  .footer-bar__links { gap: 1.75rem; }
  :root { --footer-tooth-h: 14px; }
}


/* ============================================================
   COLLAGE SECTIONS — clip, and stop BODY being a scroll container

   Requested: overflow:hidden on the three collage section wrappers.
   Applied below, and verified safe first — no descendant of any of the
   three extends beyond its section box, so this clips nothing and moves
   nothing. The absolutely-positioned .cimg-hotspot zoom windows all sit
   inside the image bounds.

   On its own that cannot remove the strip, because these sections do not
   scroll: each has clientHeight === scrollHeight. The bar belongs to
   <body>, which the parent theme turns into a scroll container with
   `body { overflow-x: hidden }` (maison/assets/css/main.css:189) — one
   non-visible axis makes the other compute from visible to auto.

   `overflow-x: clip` clips identically but, unlike `hidden`, does NOT
   create a scroll container and does NOT force the other axis to auto.
   Body stops owning a scrollbar altogether, while keeping the theme's
   protection against sideways scrolling. Browsers without `clip`
   support simply ignore the line and keep the theme's `hidden`.
   ============================================================ */
.section-collage-image {
  overflow: hidden;
}

body {
  overflow-x: clip;
}


/* Section 02 needs an ID-level selector to be reached.
   The child stylesheet declares `#collage-02 { overflow: visible }` twice
   (style.css lines 671 and 734), left over from when this section was a
   CSS-built collage whose mix-blend-mode heading had to escape the box.
   It is a flat PNG now, so nothing needs to overflow, but an ID selector
   outranks a class one regardless of load order — hence the compound
   selector below, which matches at 1-1-0 and wins cleanly. */
#collage-01.section-collage-image,
#collage-02.section-collage-image,
#collage-03.section-collage-image {
  overflow: hidden;
}


/* ============================================================
   PAGE SCROLLBAR — painted in the page background

   Hiding it outright was tried twice and did not take effect in the
   browser being used, so this colours it instead: track, thumb, corner
   and buttons are all #202120, the page background, which makes the
   strip indistinguishable from the page whether or not the browser
   honours a hide.

   Three mechanisms are declared because they apply to different
   engines and versions, and only one wins in any given browser:
     scrollbar-width  - removes it where supported (Chrome 121+, FF)
     scrollbar-color  - colours it (Chrome 121+, FF 64+); note Chrome
                        ignores ::-webkit-scrollbar when this is set
     ::-webkit-*      - colours it on older Chrome/Safari/Edge
   Every path resolves to the same background colour, so the result is
   identical either way.

   Both html AND body are targeted deliberately. The parent theme sets
   `body { overflow-x: hidden }`, which makes body the element that
   propagates the viewport scrollbar, so rules on html alone are
   ignored — that is what defeated the earlier attempts.
   ============================================================ */
html,
body {
  scrollbar-width: none;
  scrollbar-color: #202120 #202120;   /* thumb, track */
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: #202120 !important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: #202120 !important;
  box-shadow: none !important;
  border: 0 !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background: #202120 !important;
  border: 0 !important;
  box-shadow: none !important;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-button {
  background: #202120 !important;
  display: none !important;
}


/* ============================================================
   BUSINESS COLLECTION — solid black header

   This page is the only one whose hero starts at y=0, behind the
   header, so at the top of the page the nav sat on a bright glass
   atrium (measured: mean luminance 123, 35% of pixels above 140).

   A gradient scrim was tried first; a solid fill was requested
   instead, so the scrim is removed rather than layered underneath.

   #000 is not an arbitrary choice: maison-header-scroll already
   switches this header to rgb(0,0,0) once the page is scrolled. Using
   the same value at the top means the header is black from the first
   paint AND stops changing colour on scroll, which removes a flash
   that was previously masked by the transparency.

   The selector needs the ID. A mu-plugin declares
   `.site-header, #site-header { background-color: transparent !important }`,
   and because this header carries id="site-header" that list matches at
   ID specificity (1,0,0) — which outranks a class-only selector even
   with !important. Matching on #site-header.site-header scores (1,2,1)
   and wins cleanly.
   ============================================================ */
body.term-kolekcja-kontraktowa #site-header.site-header,
body.term-codzienne-rytualy #site-header.site-header,
body.term-monumenty-scienne #site-header.site-header {
  background-color: #000 !important;
}


/* ============================================================
   SINGLE PRODUCT — card layout
   Applies to every product page: the markup (.mp-single__*) is
   emitted by one template, so this styles all of them at once.

   THE BUG THIS FIXES
   The gallery image had no definite box. Its natural size is a tall
   portrait (231x760), and with width:100% / height:auto the <img>
   resolved to 800x2631 inside a 700px figure that never clipped, so
   the render ran down the whole page behind the header, the related
   products and the footer. object-fit:cover could not help - the box
   already matched the image's own ratio, so there was nothing to
   crop against.

   The fix is the same one used for the Wall Monuments cards: give the
   frame a definite aspect-ratio, then let the image fill THAT and
   contain itself inside it. A percentage or auto height against an
   indefinite parent is what lets each render drive its own box.
   ============================================================ */

.mp-single__inner[class] {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3.5rem) clamp(1rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
}

/* ---------- media ---------- */

.mp-single__media .woocommerce-product-gallery {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

/* WooCommerce sizes the gallery figure itself (its columns-4 rules leave it
   narrower than the column), which left the frame 560px inside a 639px column
   and stranded the lightbox trigger outside it. Pinning both to the column
   makes the frame fill the space and puts the trigger back inside the frame. */
.mp-single__media .woocommerce-product-gallery__wrapper[class],
.mp-single__media .woocommerce-product-gallery__image[class] {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* The frame. A definite ratio is what stops the image driving its own
   height; the panel colour is the same ground the catalogue cards use, so
   a cut-out render sits on tone rather than on a white hole. */
.mp-single__media .woocommerce-product-gallery__wrapper,
.mp-single__media .woocommerce-product-gallery__image {
  display: block;
  margin: 0;
  max-width: none;
}

.mp-single__media .woocommerce-product-gallery__image {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;              /* belt and braces: nothing escapes the frame */
  background: #202120;
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: clamp(1rem, 2.5vw, 2.75rem);
  box-sizing: border-box;
}

/* The image is wrapped in the lightbox anchor, and it is that ANCHOR which
   becomes the flex item of the frame. Left alone it shrinks to the image's
   natural width, so width:100% on the image resolved against 231px instead of
   the frame. Stretching the wrapper first is what gives the image a real box
   to fill. */
.mp-single__media .woocommerce-product-gallery__image > * {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Specificity note: WooCommerce ships
   .woocommerce div.product div.images img { height: auto }  at (0,3,3),
   and the parent theme adds .mp-single__media img { height: auto }. A single
   [class] hook scored (0,3,1) and lost, so the image kept resolving to its
   natural 760px height. Repeating [class] on the same element climbs above
   both without reaching for a tag-soup selector. */
.mp-single__media .woocommerce-product-gallery__image img[class][class][class] {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;   /* never crop the piece */
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* a restrained lift on hover - the frame clips it, so it reads as a zoom
   into the panel rather than the image growing out of the layout */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mp-single__media .woocommerce-product-gallery__image:hover img[class][class][class] {
    transform: scale(1.04);
  }
}

/* WooCommerce's lightbox trigger, pinned inside the frame */
.mp-single__media .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  font-size: 0;
  text-indent: 0;
  transition: background 0.25s ease;
}
.mp-single__media .woocommerce-product-gallery__trigger:hover {
  background: rgba(0, 0, 0, 0.8);
}
.mp-single__media .woocommerce-product-gallery__trigger img {
  width: 18px;
  height: 18px;
}

/* extra gallery images, when a product has them */
.mp-single__media .flex-control-thumbs {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.mp-single__media .flex-control-thumbs li {
  flex: 0 0 88px;
  margin: 0;
}
.mp-single__media .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #202120;
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0.35rem;
  box-sizing: border-box;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.mp-single__media .flex-control-thumbs img.flex-active,
.mp-single__media .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---------- info column ---------- */

.mp-single__info[class] {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  padding-top: clamp(0.5rem, 1.5vw, 1.5rem);
}

/* the column is shorter than the frame, so it follows the eye down it */
@media (min-width: 1100px) {
  .mp-single__info[class] {
    position: sticky;
    top: calc(var(--bc-header-h, 140px) + 2rem);
  }
}

.mp-single__eyebrow[class] {
  color: var(--clr-accent, #009933);
  letter-spacing: 0.24em;
  text-decoration: none;
  font-size: clamp(0.65rem, 0.78vw, 0.8rem);
  margin: 0;
  transition: opacity 0.25s ease;
}
.mp-single__eyebrow[class]:hover { opacity: 0.7; }

.mp-single__title[class] {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-shadow: none;             /* no chromatic-aberration glitch on headings */
}

.mp-single__price[class] {
  margin: 0;
  padding-bottom: clamp(1rem, 2vw, 1.6rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  font-variant-numeric: tabular-nums;   /* prices line up between products */
  line-height: 1.2;
}
.mp-single__price .woocommerce-Price-amount { color: inherit; }

.mp-single__desc[class] {
  max-width: 46ch;               /* a comfortable measure, not the full column */
  line-height: 1.85;
  opacity: 0.82;
  margin: 0;
}

/* ---------- buy row ---------- */

.mp-single__buy[class] {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.9rem;
  margin: clamp(0.4rem, 1vw, 1rem) 0 0;
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mp-single__buy form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.9rem;
  margin: 0;
  width: 100%;
}

.mp-single__buy .quantity {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}
.mp-single__buy .quantity input.qty {
  width: 3.5rem;
  height: 56px;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.mp-single__buy .quantity input.qty::-webkit-outer-spin-button,
.mp-single__buy .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mp-single__buy .quantity button,
.mp-single__buy .quantity .qty-btn {
  width: 44px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.mp-single__buy .quantity button:hover,
.mp-single__buy .quantity .qty-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.07);
}

body.single-product .mp-single__buy .single_add_to_cart_button[class][class][class] {
  flex: 1 1 260px !important;
  max-width: none !important;    /* was pinned to 340px, leaving a gap in the row */
  height: 56px !important;
  line-height: 1 !important;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1.5rem, 3vw, 3rem);
  border: 0;
  border-radius: 0;
  background: var(--clr-accent, #009933);
  color: #fff;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.25s ease;
}
body.single-product .mp-single__buy .single_add_to_cart_button[class][class][class]:hover {
  filter: brightness(1.12);
}
body.single-product .mp-single__buy .single_add_to_cart_button[class][class][class]:active {
  transform: translateY(1px);
}

/* ---------- wishlist ---------- */

.mp-single__wishlist[class] {
  margin: 0;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mp-single__wishlist a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  letter-spacing: 0.16em;
  opacity: 0.85;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.mp-single__wishlist a:hover {
  opacity: 1;
  color: var(--clr-accent, #009933);
}

/* ---------- meta ---------- */

.mp-single__meta[class] {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: 0.55rem clamp(1rem, 2.5vw, 2.5rem);
  margin: 0;
  font-size: clamp(0.7rem, 0.85vw, 0.85rem);
}
.mp-single__meta dt {
  opacity: 0.5;
  letter-spacing: 0.18em;
  margin: 0;
}
.mp-single__meta dd {
  margin: 0;
  letter-spacing: 0.1em;
}

/* ---------- related ---------- */

.mp-related[class] {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mp-related__title[class] {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: 0.16em;
  text-shadow: none;
}
.mp-related__grid[class] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-related__grid > * { width: auto !important; margin: 0 !important; float: none !important; }

/* ---------- responsive ---------- */

@media (max-width: 1099px) {
  .mp-single__inner[class] { grid-template-columns: minmax(0, 1fr); }
  .mp-single__info[class] { position: static; }
}

@media (max-width: 767px) {
  .mp-single__media .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; }
  body.single-product .mp-single__buy .single_add_to_cart_button[class][class][class] { flex: 1 1 100%; }
  .mp-related__grid[class] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .mp-related__grid[class] { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   CART + CHECKOUT (WooCommerce Blocks)

   Both pages shipped squeezed into a 780px column pinned to the
   left of a 1600px viewport, with the summary reduced to 273px.
   The block layout is given a real container here, the summary
   becomes a panel on the catalogue's own ground, and the form
   fields are rebuilt for a dark page - the stock fields painted
   near-white boxes and inherited white placeholder text, so the
   placeholders were white on near-white and unreadable.
   ============================================================ */

/* ---------- container ---------- */

.wp-block-woocommerce-cart[class],
.wp-block-woocommerce-checkout[class] {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem);
  box-sizing: border-box;
}

/* The block ships its own two-column sidebar layout; only the gap and
   alignment are adjusted. Overriding grid-template-columns here collapsed the
   columns, because the real constraint was an ancestor (see .page-content
   below), not the block. */
/* NO gap here. The layout is display:flex with flex-wrap:wrap, and the two
   columns already measure exactly 100% of the container between them - adding
   a gap pushed the total past the line and wrapped the summary underneath the
   items. Column separation comes from the sidebar panel padding instead. */
.wc-block-cart[class],
.wc-block-checkout[class] {
  align-items: flex-start;
  width: 100%;
}

/* THE ACTUAL CONSTRAINT
   The theme caps .page-content at 780px - a sensible measure for prose, far
   too narrow for a two-column checkout, which is why both pages sat squeezed
   against the left of a 1600px viewport. Widened on these two templates only,
   so article pages keep their reading width. */
.woocommerce-cart .page-content[class],
.woocommerce-checkout .page-content[class] {
  max-width: 100%;
  width: 100%;
}

/* Only the inner padding is reset here. An earlier attempt also set
   width:auto / max-width:none on these two, which stripped the widths the
   block layout itself relies on and dropped the summary below the items
   instead of beside them. min-width:0 is kept: without it a long product name
   can force a grid child wider than its track. */
.wc-block-cart__main[class],
.wc-block-checkout__main[class],
.wc-block-cart__sidebar[class],
.wc-block-checkout__sidebar[class] {
  padding: 0;
  min-width: 0;
}

/* the summary follows the eye down a long billing form */
@media (min-width: 1100px) {
  .wc-block-cart__sidebar[class],
  .wc-block-checkout__sidebar[class] {
    position: sticky;
    top: calc(var(--bc-header-h, 140px) + 2rem);
  }
}

/* The cart page title inherits the page background colour, so it rendered as
   an invisible 88px block followed by a large gap before the cart began. */
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 auto clamp(1rem, 2.5vw, 2rem);
  padding: 0 clamp(1rem, 4vw, 4rem);
  max-width: 1360px;
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  text-shadow: none;
}

/* ---------- summary / totals panel ---------- */

.wc-block-cart__sidebar[class],
.wc-block-checkout__sidebar[class] { padding-left: clamp(0px, 2.5vw, 2.5rem); }

/* Panel the summary block itself, not every child of the sidebar: the sidebar
   also holds an empty wrapper, which as a styled child rendered as a stray
   dark bar above the summary. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
  background: #202120;
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: clamp(1.25rem, 2.2vw, 2rem);
  box-sizing: border-box;
}

.wc-block-components-totals-item {
  padding: 0.55rem 0;
  font-variant-numeric: tabular-nums;
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  letter-spacing: 0.04em;
}

.wc-block-components-totals-item__label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78em;
  opacity: 0.72;
}

/* hairline rules instead of the stock heavy borders */
.wc-block-components-totals-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 0.75rem 0 !important;
}
.wc-block-components-totals-wrapper:first-child { border-top: 0 !important; }

/* ---------- line items ---------- */

.wc-block-cart-items__row,
.wc-block-components-order-summary-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* cut-out renders, never crop them */
  background: #1a1b1a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0.4rem;
  box-sizing: border-box;
}

.wc-block-cart-item__image {
  width: clamp(72px, 8vw, 108px);
}

.wc-block-cart-item__product .wc-block-components-product-name {
  letter-spacing: 0.1em;
  text-decoration: none;
}

/* the short description is repeated under every line - keep it quiet */
.wc-block-cart-item__product .wc-block-components-product-metadata {
  opacity: 0.6;
  font-size: 0.82em;
  line-height: 1.7;
}

/* ---------- form fields ---------- */

.wc-block-components-text-input input,
.wc-block-components-textarea[class],
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-address-form input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 0 !important;
  color: #fff !important;
  min-height: 54px;
  transition: border-color 0.22s ease, background 0.22s ease;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea[class]:focus,
.wc-block-components-select .wc-block-components-select__container:focus-within {
  border-color: var(--clr-accent, #009933) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* The stock fields inherit the page's white text for placeholders, which on a
   near-white field is invisible. Floating labels sit in the same layer. */
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
  opacity: 1;
}

.wc-block-components-text-input label,
.wc-block-components-checkout-step__heading label {
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.08em;
}
.wc-block-components-text-input.is-active label {
  color: rgba(255, 255, 255, 0.6) !important;
}

.wc-block-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
}
/* the native dropdown list is painted by the OS, so its options need a
   readable pairing of their own */
.wc-block-components-select select option { background: #202120; color: #fff; }

/* The country and state fields are comboboxes, not plain inputs, so they miss
   the rules above and kept the stock white box. */
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-combobox input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-form .components-combobox-control__suggestions-container {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  border-radius: 0 !important;
  color: #fff !important;
}
.wc-block-components-combobox input::placeholder { color: rgba(255, 255, 255, 0.42) !important; }

/* the suggestion list is drawn over the page, so it needs its own ground */
.components-form-token-field__suggestions-list,
.wc-block-components-combobox-control .components-form-token-field__suggestions-list {
  background: #202120 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}
.components-form-token-field__suggestion.is-selected,
.components-form-token-field__suggestion:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
}

/* ---------- section headings ---------- */

.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-title {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: none;
}

.wc-block-components-checkout-step {
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wc-block-components-checkout-step:last-of-type { border-bottom: 0; }

/* ---------- buttons ---------- */

.wc-block-cart__submit-button[class],
.wc-block-components-checkout-place-order-button[class] {
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-accent, #009933) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: filter 0.25s ease, transform 0.2s ease;
}
.wc-block-cart__submit-button[class]:hover,
.wc-block-components-checkout-place-order-button[class]:hover {
  filter: brightness(1.12);
}
.wc-block-cart__submit-button[class]:active,
.wc-block-components-checkout-place-order-button[class]:active {
  transform: translateY(1px);
}

/* coupon / panel toggles read as quiet links, not buttons */
.wc-block-components-panel__button {
  letter-spacing: 0.1em;
  color: #fff;
}

/* ---------- notices ---------- */

/* The stock notice is a pale pink card, which on this ground looks like a
   rendering fault rather than a message. */
.wc-block-components-notice-banner[class] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-left: 3px solid #c8102e !important;
  border-radius: 0 !important;
  color: #fff !important;
}
.wc-block-components-notice-banner.is-error[class] { border-left-color: #c8102e !important; }
.wc-block-components-notice-banner.is-success[class] { border-left-color: var(--clr-accent, #009933) !important; }
.wc-block-components-notice-banner > svg { fill: currentColor; }

/* ---------- responsive ---------- */

@media (max-width: 1099px) {
  .wc-block-cart[class],
  .wc-block-checkout[class] {
    grid-template-columns: minmax(0, 1fr);
  }
  .wc-block-cart__sidebar[class],
  .wc-block-checkout__sidebar[class] { position: static; }
}

/* ============================================================
   ORDER SUMMARY panel — cart + checkout

   Six things were wrong in the stock rendering:
     - the thumbnail wrapper stretched to the row height, so a 48px
       wide image ran 185px tall
     - the quantity badge was a white disc with white text on it
     - the line price printed twice (once under the name, once in
       the total column)
     - the full product description wrapped to seven lines inside a
       285px column
     - the discount and fee blocks render as empty 25px wrappers
       when unused, drawing two blank ruled rows above the total
     - no separation or hierarchy between the rows
   ============================================================ */

.wc-block-components-order-summary-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.2vw, 1.1rem);
  padding: clamp(0.9rem, 1.6vw, 1.25rem) 0;
}

/* a square tile, so the thumbnail cannot be stretched by the row */
.wc-block-components-order-summary-item__image[class][class] {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  position: relative;
}
.wc-block-components-order-summary-item__image img[class],
.wc-block-components-order-summary-item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #1a1b1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.3rem;
  box-sizing: border-box;
}

/* the badge was white on white; it now matches the panel and sits on the corner */
.wc-block-components-order-summary-item__quantity[class] {
  top: -9px;
  right: -9px;
  left: auto;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #202120 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  box-shadow: none;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The text column had no flex grow, so image and price took the row and left
   it 66px - narrow enough to break PLEXUS across two lines. It now takes the
   free space, and the name is kept from breaking inside a word. */
.wc-block-components-order-summary-item__description[class] {
  flex: 1 1 auto;
  min-width: 0;
}
/* overflow-wrap:anywhere was the cause of PLEXUS breaking after the fifth
   letter - it permits a break inside a word. The display face is very wide, so
   the name is also stepped down slightly and allowed to wrap only at spaces. */
.wc-block-components-order-summary-item__description .wc-block-components-product-name[class] {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}

/* The full product copy belongs on the product page, not in a 280px summary
   column, where it truncated to two words and starved the name of width. The
   cart page keeps its description - there the line has the room. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata {
  display: none !important;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin: 0 0 0.35rem;
}

/* the per-line price already appears in the total column to the right */
.wc-block-components-order-summary-item__description .wc-block-cart-item__prices[class] {
  display: none !important;
}

/* the summary is a glance, not a product page: two lines is enough */
.wc-block-components-product-metadata__description p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  opacity: 0.55;
  font-size: 0.78em;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.wc-block-components-order-summary-item__total-price {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* WooCommerce always prints the discount and fee wrappers; unused they are
   empty boxes that still draw their rule and padding. :has() lets them be
   hidden only when they hold nothing, so a real coupon still appears. */
.wc-block-components-totals-wrapper:not(:has(*)) {
  display: none !important;
}

/* ---------- panel header + total ---------- */

.wc-block-components-checkout-order-summary__title {
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.wc-block-components-checkout-order-summary__title-text {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0;
}

.wc-block-components-totals-footer-item {
  padding-top: 0.4rem;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  opacity: 1;
  letter-spacing: 0.18em;
}


/* ============================================================
   CONTACT PAGE
   Scoped to the contact template only, so nothing here can leak
   onto the catalogue or the shop.

   The hero was a flat grey band with centred type; it now carries
   one of the collection photographs behind a scrim. The info
   blocks become panels, the map is graded to the site's palette,
   and the form fields are rebuilt dark - they were white boxes
   with near-black text sitting on a dark page.
   ============================================================ */

/* ---------- hero ---------- */

body.page-template-template-contact .contact-hero {
  position: relative;
  min-height: min(66vh, 640px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #202120;
}

/* The photograph. Desaturated and darkened so it reads as ground rather than
   as a picture competing with the heading - the same treatment the Business
   Collection washes use. */
body.page-template-template-contact .contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../wm/s7.jpg");
  background-size: cover;
  background-position: center 58%;
  filter: grayscale(0.3) brightness(0.82) contrast(1.05);
  transform: scale(1.04);
  z-index: 0;
}

/* A scrim, heavier at the left where the copy sits, so the type keeps its
   contrast without flattening the whole image. */
body.page-template-template-contact .contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(26, 27, 26, 0.88) 0%, rgba(26, 27, 26, 0.55) 40%, rgba(26, 27, 26, 0.12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 28%, rgba(26, 27, 26, 0.6) 100%);
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  body.page-template-template-contact .contact-hero::before {
    animation: ctc-drift 26s ease-in-out infinite alternate;
  }
  @keyframes ctc-drift {
    from { transform: scale(1.04); }
    to   { transform: scale(1.12); }
  }
}

body.page-template-template-contact .contact-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 4rem);
  text-align: left;
  box-sizing: border-box;
}

body.page-template-template-contact .contact-hero__inner .label {
  color: var(--clr-accent, #009933);
  letter-spacing: 0.26em;
  display: inline-block;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

body.page-template-template-contact .contact-hero__title {
  margin: 0;
  max-width: 16ch;
  line-height: 0.94;
  text-shadow: none;            /* no chromatic-aberration glitch on headings */
}

/* a hairline between the title and the standfirst, as on the catalogue pages */
body.page-template-template-contact .contact-hero__sub {
  position: relative;
  max-width: 46ch;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  opacity: 0.85;
  line-height: 1.8;
}
body.page-template-template-contact .contact-hero__sub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

body.page-template-template-contact .contact-hero__scroll {
  position: relative;
  z-index: 2;
  opacity: 0.5;
}

/* ---------- info strip ---------- */

body.page-template-template-contact .contact-strip {
  background: #202120;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

body.page-template-template-contact .contact-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* panels rather than columns divided by rules - the dividers read as seams
   against the photograph above */
body.page-template-template-contact .contact-strip__block {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.02);
  padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1rem, 1.8vw, 1.5rem);
  text-align: center;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
body.page-template-template-contact .contact-strip__block:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-3px);
}

body.page-template-template-contact .contact-strip__block .label {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2em;
}

/* ---------- map + form ---------- */

body.page-template-template-contact .contact-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: #202120;
}

body.page-template-template-contact .contact-body__map {
  position: relative;
  min-height: 520px;
}

/* Google's tiles are bright and blue; graded here so the panel belongs to the
   page instead of punching a window in it. */
body.page-template-template-contact .contact-body__map iframe {
  width: 100%;
  height: 100%;
  filter: grayscale(1) invert(0.92) contrast(0.86) brightness(0.92);
  border: 0;
}

body.page-template-template-contact .contact-body__map-pin {
  background: #202120;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.9rem 1.1rem;
}

body.page-template-template-contact .contact-body__form {
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 4vw, 4rem);
  box-sizing: border-box;
}

body.page-template-template-contact .contact-body__form-inner {
  width: 100%;
  max-width: 560px;
}

body.page-template-template-contact .contact-body__form-title {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  line-height: 1;
  text-shadow: none;
}

/* ---------- form fields ---------- */

body.page-template-template-contact .contact-form .cf-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  margin-bottom: clamp(0.75rem, 1.4vw, 1.1rem);
}

body.page-template-template-contact .contact-form .cf-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

body.page-template-template-contact .contact-form label {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

/* The fields shipped white with near-black text on a dark page. */
body.page-template-template-contact .contact-form input,
body.page-template-template-contact .contact-form select,
body.page-template-template-contact .contact-form textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  color: #fff !important;
  padding: 0 1rem;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.22s ease, background 0.22s ease;
}
body.page-template-template-contact .contact-form textarea {
  padding: 0.9rem 1rem;
  min-height: 150px;
  resize: vertical;
  line-height: 1.7;
}

body.page-template-template-contact .contact-form input:focus,
body.page-template-template-contact .contact-form select:focus,
body.page-template-template-contact .contact-form textarea:focus {
  border-color: var(--clr-accent, #009933) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  outline: none;
}

body.page-template-template-contact .contact-form input::placeholder,
body.page-template-template-contact .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
  opacity: 1;
}

/* the native list is painted by the OS and needs its own readable pairing */
body.page-template-template-contact .contact-form select option {
  background: #202120;
  color: #fff;
}

body.page-template-template-contact .contact-form button,
body.page-template-template-contact .contact-form input[type="submit"] {
  width: 100%;
  min-height: 56px;
  margin-top: clamp(0.5rem, 1.2vw, 1rem);
  background: var(--clr-accent, #009933) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.2s ease;
}
body.page-template-template-contact .contact-form button:hover,
body.page-template-template-contact .contact-form input[type="submit"]:hover {
  filter: brightness(1.12);
}
body.page-template-template-contact .contact-form button:active {
  transform: translateY(1px);
}

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
  body.page-template-template-contact .contact-body { grid-template-columns: minmax(0, 1fr); }
  body.page-template-template-contact .contact-body__map { min-height: 360px; }
  body.page-template-template-contact .contact-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body.page-template-template-contact .contact-strip__grid { grid-template-columns: minmax(0, 1fr); }
  body.page-template-template-contact .contact-form .cf-row { grid-template-columns: minmax(0, 1fr); }
  body.page-template-template-contact .contact-hero { min-height: 58vh; }
}


/* ============================================================
   WISHLIST / FAVOURITES

   YITH renders this as a plain data table on white - no product
   name shown, a thumbnail at icon size, and coloured share
   buttons. The table is rebuilt here as a card grid: the rows
   keep their semantics for assistive technology, only the
   presentation changes.
   ============================================================ */

/* the theme's narrow prose measure caps this page at 780px */
.wishlist_table,
body:has(.wishlist_table) .page-content[class] {
  max-width: 100%;
  width: 100%;
}

/* the minimal hero prints its title in the page background colour */
.page-hero-minimal .page-title {
  color: #fff;
  text-shadow: none;
}
.page-hero-minimal {
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
}

.wishlist-title-container .wishlist-title h2,
.wishlist-title h2 {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: none;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

/* ---------- table -> card grid ---------- */

.wishlist_table[class] {
  display: block;
  background: transparent;
  border: 0;
  margin: 0;
}
.wishlist_table thead { display: none; }        /* column headings make no sense as cards */

.wishlist_table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
}

.wishlist_table tbody tr {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #202120;
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0 0 clamp(1rem, 1.8vw, 1.4rem);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.wishlist_table tbody tr:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-3px);
}

/* WooCommerce paints table cells white at a higher specificity than a plain
   class selector reaches, so the card would show white bands between rows. */
.wishlist_table tbody td[class] {
  display: block;
  width: auto;
  border: 0 !important;
  background: transparent !important;
  padding: 0 clamp(0.9rem, 1.6vw, 1.25rem);
  text-align: left;
}

/* ---------- thumbnail ---------- */

.wishlist_table td.product-thumbnail[class][class] {
  padding: 0 !important;
  margin-bottom: clamp(0.9rem, 1.6vw, 1.25rem);
}
.wishlist_table td.product-thumbnail a { display: block; }
.wishlist_table td.product-thumbnail img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: contain;          /* cut-out renders, never cropped */
  background: #1a1b1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  box-sizing: border-box;
  display: block;
}

/* ---------- text ---------- */

.wishlist_table td.product-name {
  order: 1;
  margin-bottom: 0.4rem;
}
.wishlist_table td.product-name a {
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.25s ease;
}
.wishlist_table td.product-name a:hover { color: var(--clr-accent, #009933); }

.wishlist_table td.product-price {
  order: 2;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}
.wishlist_table td.product-price .woocommerce-Price-amount { color: #fff; }

.wishlist_table td.product-stock-status {
  order: 3;
  margin-bottom: clamp(0.75rem, 1.4vw, 1.1rem);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wishlist_table td.product-stock-status .wishlist-in-stock { color: var(--clr-accent, #009933); }
.wishlist_table td.product-stock-status .wishlist-out-of-stock { color: rgba(255, 255, 255, 0.45); }

/* ---------- actions ---------- */

.wishlist_table td.product-add-to-cart { order: 4; margin-top: auto; }
.wishlist_table td.product-add-to-cart a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  background: var(--clr-accent, #009933) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 1rem;
  box-sizing: border-box;
  transition: filter 0.25s ease;
}
.wishlist_table td.product-add-to-cart a:hover { filter: brightness(1.12); }

/* the remove control becomes a corner button over the thumbnail */
.wishlist_table td.product-remove[class][class] {
  position: absolute !important;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  padding: 0;
  width: 34px;
  height: 34px;
}
.wishlist_table td.product-remove a,
.wishlist_table td.product-remove .remove_from_wishlist {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  font-size: 0.85rem;
  line-height: 1;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.wishlist_table td.product-remove a:hover {
  background: #c8102e !important;
  color: #fff !important;
}

/* ---------- empty state ---------- */

/* YITH emits its empty-state row even when the list has items, which left a
   stray outlined box beside the cards. It is only a real empty state when it
   is the only row. */
.wishlist_table tbody tr:has(td.wishlist-empty):not(:only-child) {
  display: none !important;
}

/* The thumbnail is wrapped in a link and carries width/height attributes, so
   the tile is sized on the LINK and the image told to fill it. */
.wishlist_table td.product-thumbnail > a,
.wishlist_table td.product-thumbnail a[href] {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5;
  background: #1a1b1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  box-sizing: border-box;
}
.wishlist_table td.product-thumbnail > a img,
.wishlist_table td.product-thumbnail a[href] img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
}

/* The empty state is a cell, but the grid item is its ROW - spanning the td
   alone left the message in a single narrow column. */
.wishlist_table tbody tr:has(td.wishlist-empty) {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  padding: 0;
}
.wishlist_table tbody tr:has(td.wishlist-empty):hover { transform: none; }

.wishlist_table td.wishlist-empty[class] {
  grid-column: 1 / -1;
  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
  text-align: center;
  background: #202120;
  border: 1px solid rgba(255, 255, 255, 0.09);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ---------- share row ---------- */

.yith-wcwl-share {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.yith-wcwl-share .yith-wcwl-share-title,
.yith-wcwl-share h4 {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem;
  opacity: 0.6;
  margin: 0 0 0.9rem;
  text-shadow: none;
}
/* the stock buttons arrive in brand colours, which fight the page */
.yith-wcwl-share ul li a {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  border-radius: 0 !important;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.yith-wcwl-share ul li a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================
   MOBILE

   The header did not fit a phone. The logo rendered 265px wide
   inside a 390px viewport, leaving 101px for an action bar that
   needs 139px, so the cart was pushed off the right edge - and
   the menu button was display:none while the desktop nav was
   also hidden. On a phone there was therefore no way to reach
   the navigation OR the cart.
   ============================================================ */

@media (max-width: 900px) {

  /* ---------- header ---------- */

  /* On the shop template this computed 398px inside a 390px viewport, giving
     the whole page an 8px sideways scroll. Clamped to the viewport. */
  .site-header .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    gap: 0.5rem;
    padding-left: clamp(0.75rem, 3vw, 1.25rem);
    padding-right: clamp(0.75rem, 3vw, 1.25rem);
  }

  /* the logo takes what is left, not what it likes */
  .site-header .custom-logo-link {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46vw;
  }
  /* the logo carries width/height attributes and a theme width rule, so it
     kept rendering 265px wide inside its own 164px link and ran under the
     action buttons */
  .site-header .custom-logo-link img[class],
  .site-header a[class] img.custom-logo,
  .site-header img.custom-logo[class] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
  }

  .site-header .header-actions {
    flex: 0 0 auto;
    gap: 0.35rem !important;
    margin-left: auto;
  }

  /* the menu button is the only route to the navigation on a phone */
  .site-header .header-actions button.menu-toggle,
  .site-header button.menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  /* comfortable touch targets across the bar */
  .site-header .header-actions > a,
  .site-header .header-actions > button {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ---------- generic guards ---------- */

  /* nothing may introduce a sideways scroll on a phone */
  img,
  video,
  iframe,
  table {
    max-width: 100%;
  }

  /* the catalogue carousels scroll inside themselves, so their track must be
     clipped rather than allowed to widen the page */
  .bc-carousel__viewport,
  .wc-block-cart,
  .wc-block-checkout {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ---------- phone ---------- */

@media (max-width: 600px) {

  .site-header .custom-logo-link { max-width: 42vw; }

  /* single-column product card */
  .mp-single__inner[class] { padding-left: 1rem; padding-right: 1rem; }

  /* the wishlist cards go one-up so the image is not postage-stamp sized */
  .wishlist_table tbody { grid-template-columns: minmax(0, 1fr); }

  /* keep long prices and names from forcing a row wider than the screen */
  .wc-block-components-totals-item,
  .mp-single__meta[class] { word-break: break-word; }
}

/* Wishlist thumbnail, final sizing.
   YITH sizes this image at 40px through its own stylesheet and the image also
   carries width/height attributes. The tile is put on the LINK (a real block
   with a definite ratio) and the image told to fill it, with the specificity
   raised past the plugin's own rule. */
.wishlist_table td.product-thumbnail[class] > a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 5;
  background: #1a1b1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: clamp(0.75rem, 1.6vw, 1.25rem) !important;
  box-sizing: border-box !important;
}
.wishlist_table td.product-thumbnail[class] > a > img[class],
.wishlist_table td.product-thumbnail[class] > a > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* ============================================================
   CATALOGUE CARD - ADD TO CART
   It was an inline span 118px wide at 18px, floating under the
   price with no button affordance. It is now a full-width
   control with the label centred and stepped up, matching the
   product page CTA.
   ============================================================ */

.bc-card__cta[class][class][class][class][class][class],
.dr-card__cta[class][class][class][class][class][class] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  margin-top: clamp(0.5rem, 1vw, 0.9rem);
  padding: 0 1rem !important;
  font-size: clamp(0.95rem, 1.25vw, 1.35rem) !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
  text-transform: uppercase;
  color: #fff !important;
  background: var(--clr-accent, #009933);
  border: 0;
  cursor: pointer;
  text-shadow: none !important;
  transition: filter 0.25s ease, transform 0.15s ease;
}

.bc-card__cta[class][class][class][class][class][class]:hover,
.dr-card__cta[class][class][class][class][class][class]:hover { filter: brightness(1.12); }
.bc-card__cta[class][class][class][class][class][class]:active,
.dr-card__cta[class][class][class][class][class][class]:active { transform: translateY(1px); }

/* keyboard users get a visible focus ring, since this is now a real control */
.bc-card__cta:focus-visible,
.dr-card__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* the transient states must not resize the card */
.bc-card__cta[data-busy=1],
.dr-card__cta[data-busy="1"] { opacity: 0.75; }