/* Masowa Stone - Stone Veneer listing
   Tokens lifted from masowa-staging.webflow.shared.c67b70284.min.css (:root) */

@font-face {
  font-family: Masowa;
  src: url(/cdn/68c47429938f36dbbfa99833/68dc19e8fffb5a0bf426b6e1_Masowa.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sand: #bfa78a;          /* --main-blue-color */
  --sand-soft: #d9c7b8;     /* --light-background */
  --sand-tint: #bfa78a26;   /* --royal-blue-2 family */
  --sand-line: #bfa78a4d;
  --ink: #402b19;           /* --font-color / --body-color */
  --muted: #8c7c6d;         /* --slate-grey / --dark-slate-blue */
  --white: #fff;
  --shell: #faf8f6;
  --radius: 3px;            /* site button radius */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Barlow, "Trebuchet MS", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

img { max-width: 100%; display: block; }

a { color: var(--sand); text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: 1248px; /* 1200 grid + 2 x 24 gutter */
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- masthead ---------- */

.masthead {
  background: var(--ink);
  color: var(--white);
  border-bottom: 1px solid var(--sand-line);
}

.masthead .container {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--white);
  padding: .6rem 0;
}

.brand-mark { width: 26px; height: 26px; object-fit: contain; }

.brand-name {
  font-family: Masowa, Barlow, "Trebuchet MS", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: .04em;
}

.brand-slogan {
  margin: 0 0 0 1em;
  padding-left: 1em;
  border-left: 1px solid #ffffff2e;
  color: var(--sand-soft);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}

@media (max-width: 599px) { .brand-slogan { display: none; } }

/* ---------- page head ---------- */

.page-head { padding: 3rem 0 1.75rem; }

.eyebrow {
  margin: 0 0 .9rem;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .35em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.intro {
  max-width: 46em;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 300;
}

/* ---------- controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--sand-tint);
  border-bottom: 1px solid var(--sand-tint);
  margin-bottom: 2rem;
}

.result-count {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
}

.sort {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

.sort label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

.sort select {
  min-height: 44px;
  padding: 0 2.25rem 0 .85rem;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23402b19' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 11px;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  line-height: 1.2;
  appearance: none;
  cursor: pointer;
}

.sort select:hover { border-color: var(--sand); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- grid ---------- */

.grid {
  list-style: none;
  margin: 0 0 3.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1rem;
}

@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; gap: 2.75rem 1.5rem; }
}

/* ---------- card ---------- */

.card { position: relative; display: flex; flex-direction: column; }

.card-media {
  position: relative;
  z-index: 2;
  background: var(--shell);
  border: 1px solid var(--sand-tint);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.media-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.media-track::-webkit-scrollbar { display: none; }

.media-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }

.media-slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dots {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: .55rem;
  display: flex;
  justify-content: center;
  gap: .4rem;
  pointer-events: none;
}

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffffffa6;
  box-shadow: 0 0 0 1px #402b1938;
  transition: background-color .2s;
}

.dot.is-on { background: var(--white); box-shadow: 0 0 0 1px #402b1966; }

/* desktop: stacked crossfade on hover (engine-proof; no transforms on the
   scroll container, which Firefox clips differently from Chromium) */
@media (hover: hover) and (pointer: fine) {
  .media-track {
    display: block;
    position: relative;
    overflow: hidden;
  }
  .media-track .media-slide {
    position: absolute;
    inset: 0;
  }
  .media-track .media-slide:first-child { position: relative; }
  .media-track .media-slide + .media-slide {
    opacity: 0;
    transition: opacity .35s ease;
  }
  .card:hover .media-track .media-slide + .media-slide { opacity: 1; }
  .dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .media-track { transition: none; }
  html { scroll-behavior: auto; }
}

/* save toggle: sibling of the media and of the link, never nested in either */
.card-shortlist {
  position: absolute;
  z-index: 5;
  top: 0; right: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.card-shortlist::before {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #ffffffd9;
  box-shadow: 0 0 0 1px #402b1926;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color .2s;
}

.card-shortlist:hover::before { background: var(--white); }

.card-shortlist svg {
  position: relative;
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill .15s;
}

/* anchored to the card corner itself, not the button box: the button is 44px
   and inset rounding left a visible sliver. Radius matches the media corner. */
/* svg.pick-banner: must out-rank .card-shortlist svg's 16px sizing */
.card-shortlist svg.pick-banner {
  display: none;
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  border-top-right-radius: var(--radius);
  overflow: hidden;
  pointer-events: none;
}
.pick-banner polygon { fill: #bfa78a; stroke: none; }
.pick-banner path { stroke: var(--white); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.card-shortlist[aria-pressed="true"] .pick-banner { display: block; }
.card-shortlist[aria-pressed="true"]::before { display: none; }
.card-shortlist[aria-pressed="true"] svg:not(.pick-banner) { display: none; }

/* cap message, injected under the toggle. Absolute so a blocked fifth pick
   never changes the card height and shunts the grid row. */
.cap-note {
  position: absolute;
  z-index: 6;
  top: 46px; left: 6px; right: 6px;
  margin: 0;
  padding: .6rem .7rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: 0 8px 24px #402b1938;
}

/* No z-index here: as a flex item it would become a stacking context and trap
   the ::after overlay below .card-media. */
.card-link {
  margin-top: .85rem;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.3;
}

/* whole-card hit area, drawn from the link, no nested interactives */
.card-link::after { content: ""; position: absolute; inset: 0; }

@media (hover: hover) and (pointer: fine) {
  .card-link::after { z-index: 3; }
  .card:hover .card-link { color: var(--sand); }
}

.card-formats {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.4;
}

.card-price {
  margin: .45rem 0 0;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------- shortlist pill ---------- */

.shortlist-pill {
  position: fixed;
  z-index: 40;
  right: 1rem; bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
  padding: 0 1.35rem;
  border: 1px solid var(--white);
  border-radius: var(--radius);
  background: var(--sand);
  color: var(--white);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 8px 28px #402b1938;
  transition: background-color .2s;
}

.shortlist-pill:hover { background: #a89076; }
.shortlist-pill[hidden] { display: none; }

/* ---------- shortlist page ---------- */

.shortlist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--sand-tint);
  border-bottom: 1px solid var(--sand-tint);
  margin-bottom: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .9rem 2.4rem;
  border: 1px solid var(--white);
  border-radius: var(--radius);
  background: var(--sand);
  color: var(--white);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s;
}

.btn:hover { background: #a89076; }

.btn-quiet {
  background: none;
  border-color: var(--sand-line);
  color: var(--ink);
}

.btn-quiet:hover { background: var(--sand-tint); }

.samples-note {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 300;
}

/* full-width first line of the actions row, above the buttons */
.samples-lead {
  flex-basis: 100%;
  margin: 0;
  font-size: .95rem;
  font-weight: 400;
}

.card-remove {
  position: absolute;
  z-index: 5;
  top: 0; right: 0;
  min-width: 44px;
  height: 44px;
  padding: 0 .85rem;
  border: 0;
  border-radius: 0 var(--radius) 0 var(--radius);
  background: #ffffffd9;
  box-shadow: 0 0 0 1px #402b1926;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--white);
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s;
}

.card-remove:hover { background: var(--ink); }

.empty-state {
  max-width: 34em;
  margin: 0 0 4rem;
  padding: 2.5rem 0 0;
}

.empty-state h2 {
  margin: 0 0 .75rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.empty-state p {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
}

[hidden] { display: none !important; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--sand-soft);
  padding: 3rem 0;
  margin-top: auto;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
}

.site-footer a { color: var(--sand-soft); }
.site-footer a:hover { color: var(--white); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-left: auto;
}

.site-footer .footer-nav a,
.site-footer .footer-home {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* real-touch override: a device that actually touches gets the swipe carousel
   even if it also matches (hover:hover)+(pointer:fine), e.g. touch laptops
   and emulated environments. Set by app.js on first touchstart. */
html.is-touch .media-track {
  overflow-x: auto;
  transition: none;
}
html.is-touch .media-track { display: flex; position: static; }
html.is-touch .media-track .media-slide { position: static; opacity: 1 !important; }
html.is-touch .dots { display: flex; }

.vat-note{font-size:.78rem;color:var(--slate-grey,#8c7c6d);margin:.1rem 0 0;letter-spacing:.04em;text-transform:uppercase;}