/* ==========================================================================
   Maison Aurevia — page-level layouts
   ========================================================================== */

/* ---------- Page header (inner pages) --------------------------------- */
.phead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 1.2rem + 3vw, 4rem);
}
.phead__in { display: grid; gap: var(--s-4); max-width: 56rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Shop ------------------------------------------------------ */
.shop { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) {
  .shop { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s-9); }
}
.shop__side { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .shop__side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.facet__h {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 750;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-3);
}
.facet__list { display: grid; gap: var(--s-1); }
.facet__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; min-height: 46px; padding: 0 var(--s-3);
  border-radius: var(--r-sm); cursor: pointer; text-align: left;
  font-size: var(--t-sm); color: var(--ink-2);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.facet__btn:hover { background: var(--paper); color: var(--ink); }
.facet__btn[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 650; }
.facet__btn .n { font-size: var(--t-xs); opacity: .65; font-variant-numeric: tabular-nums; }

.shop__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.shop__count { font-size: var(--t-sm); color: var(--muted); }
.shop__sort { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.shop__sort .select { min-height: 46px; width: auto; min-width: 13rem; }
.shop__chips { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin; }
@media (min-width: 1024px) { .shop__mobile-facets { display: none; } }

/* ---------- Product detail -------------------------------------------- */
.pdp { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s-9); }
  .pdp__media { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.pdp__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.pdp__frame img { width: 100%; height: 100%; object-fit: cover; }
.pdp__flags { position: absolute; top: var(--s-4); left: var(--s-4); display: flex; flex-wrap: wrap; gap: 6px; }

.pdp__info > * + * { margin-top: var(--s-5); }
.pdp__title { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); letter-spacing: var(--track-display); line-height: 1.06; }
.pdp__sub { font-size: var(--t-lead); color: var(--muted); }
.pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.pdp__price .price__now { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); }
.pdp__buy { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pdp__qty { display: flex; align-items: center; gap: var(--s-3); }
.qty {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden;
  background: var(--paper);
}
.qty button {
  width: 48px; height: 50px; display: grid; place-items: center;
  cursor: pointer; color: var(--ink);
  transition: background-color var(--dur-2) var(--ease);
}
.qty button:hover { background: var(--canvas-2); }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }
.qty input {
  width: 3.25rem; height: 50px; text-align: center; border: 0;
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  background: transparent;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input[type=number] { -moz-appearance: textfield; }

.spec-table { width: 100%; font-size: var(--t-sm); }
.spec-table th, .spec-table td { text-align: left; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 36%; font-family: var(--font-display); font-weight: 650; color: var(--ink); padding-right: var(--s-4); }
.spec-table td { color: var(--ink-2); }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; min-height: 62px; padding: var(--s-4) 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 700; color: var(--ink);
}
.acc__btn .ico { transition: transform var(--dur-2) var(--ease); color: var(--muted); }
.acc__btn[aria-expanded="true"] .ico { transform: rotate(45deg); color: var(--brand); }
.acc__panel { padding-bottom: var(--s-5); font-size: var(--t-sm); color: var(--ink-2); }
.acc__panel[hidden] { display: none; }

/* ---------- Cart ------------------------------------------------------ */
.cart { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) {
  .cart { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-8); }
  .cart__side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .line { grid-template-columns: 116px minmax(0, 1fr); gap: var(--s-5); } }
.line:first-child { border-top: 1px solid var(--line); }
.line__media { border-radius: var(--r-md); overflow: hidden; background: var(--canvas-2); aspect-ratio: 1; }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__main { display: grid; gap: var(--s-2); align-content: start; }
.line__top { display: flex; justify-content: space-between; gap: var(--s-4); align-items: start; }
.line__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1.3; }
.line__name a:hover { color: var(--brand-ink); }
.line__meta { font-size: var(--t-xs); color: var(--muted); }
.line__price { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.line__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.line__rm {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-inline: var(--s-2);
  font-size: var(--t-xs); color: var(--muted); cursor: pointer;
}
.line__rm:hover { color: var(--danger); }

.summary {
  display: grid; gap: var(--s-4);
  padding: var(--s-6);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.summary__rows { display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.summary__row { display: flex; justify-content: space-between; gap: var(--s-4); }
.summary__row span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.summary__row--muted span { color: var(--muted); }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.summary__total dt { font-family: var(--font-display); font-weight: 750; font-size: var(--t-h4); color: var(--ink); }
.summary__total dd {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.02em;
}
.summary__cur { font-size: var(--t-xs); color: var(--muted); font-weight: 600; }

.ship-bar { display: grid; gap: var(--s-2); }
.ship-bar__track { height: 7px; border-radius: var(--r-pill); background: var(--canvas-2); overflow: hidden; }
.ship-bar__fill { height: 100%; background: var(--verde); border-radius: inherit; transition: width var(--dur-3) var(--ease); }

/* ---------- Checkout -------------------------------------------------- */
.co { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) {
  .co { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-9); }
  .co__side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.co__step { display: grid; gap: var(--s-5); padding-block: var(--s-7); border-top: 1px solid var(--line); }
.co__step:first-of-type { border-top: 0; padding-top: 0; }
.co__step-h { display: flex; align-items: center; gap: var(--s-3); }
.co__step-n {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 750;
  flex: none;
}
.co__step-h h2 { font-size: var(--t-h3); letter-spacing: var(--track-head); }

.paytabs { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.paytab {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3);
  align-items: center; padding: var(--s-4);
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.paytab:hover { border-color: var(--muted); }
.paytab:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.paytab input { width: 20px; height: 20px; accent-color: var(--brand); }
.paytab b { display: block; font-family: var(--font-display); font-size: var(--t-sm); color: var(--ink); }
.paytab small { display: block; font-size: var(--t-xs); color: var(--muted); }
.paytab[data-disabled="true"] { opacity: .5; cursor: not-allowed; }

.paypane { display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas); }
.paypane[hidden] { display: none; }
.pay-mount { min-height: 150px; }
#sq-card { min-height: 108px; }
.pay-secure {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--muted);
}
.pay-secure .ico { color: var(--verde); }
.pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pay-logos img { height: 30px; width: auto; }

.mini-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.mini-line img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-xs); background: var(--canvas-2); }
.mini-line b { display: block; font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; color: var(--ink); line-height: 1.35; }
.mini-line small { font-size: var(--t-xs); color: var(--muted); }
.mini-line .amt { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Confirmation ---------------------------------------------- */
.conf { display: grid; gap: var(--s-6); max-width: 46rem; margin-inline: auto; }
.conf__mark {
  display: grid; place-items: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--verde-tint); color: var(--ok); margin-inline: auto;
}
.conf__mark .ico { width: 38px; height: 38px; stroke-width: 2.25; }
.conf__card { padding: var(--s-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.kv { display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.kv__row { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.kv__row dt { color: var(--muted); }
.kv__row dd { color: var(--ink); font-weight: 600; text-align: right; }

/* ---------- Editorial / about ----------------------------------------- */
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); }
  .split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.split__art { border-radius: var(--r-xl); overflow: hidden; background: var(--paper); box-shadow: var(--e-3); aspect-ratio: 4 / 3; }
.split__art img { width: 100%; height: 100%; object-fit: cover; }

.colour-block {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--brand); color: #fff;
  padding: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
}
.colour-block::after {
  content: ""; position: absolute; right: -12%; bottom: -34%;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.colour-block h2, .colour-block .display { color: #fff; position: relative; }
.colour-block p { color: rgba(255,255,255,.85); position: relative; }
.colour-block .btn { position: relative; }

.stat-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.stat b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: var(--t-sm); color: var(--muted); }

.card-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.icard {
  display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-6);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.icard:hover { transform: translateY(-3px); box-shadow: var(--e-2); border-color: transparent; }
.icard__ico {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-tint, var(--brand-tint)); color: var(--accent-deep, var(--brand-ink));
}
.icard h3 { font-size: var(--t-h4); }
.icard p { font-size: var(--t-sm); color: var(--muted); }

/* ---------- Legal / doc pages ----------------------------------------- */
.doc { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
  .doc { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s-9); }
  .doc__toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.doc__toc { padding: var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.doc__toc a { display: block; min-height: 40px; padding: var(--s-2) var(--s-3); border-radius: var(--r-xs); font-size: var(--t-sm); color: var(--muted); }
.doc__toc a:hover { background: var(--canvas); color: var(--ink); }
.doc__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6);
  background: var(--brand-tint); border-radius: var(--r-md);
  font-size: var(--t-xs); color: var(--brand-deep);
}

/* ---------- Contact --------------------------------------------------- */
.contact { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-9); } }
.contact__card { padding: var(--s-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.contact__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.contact__row:last-child { border-bottom: 0; }
.contact__row .icard__ico { width: 44px; height: 44px; }
.contact__row b { display: block; font-family: var(--font-display); font-size: var(--t-sm); color: var(--ink); }
.contact__row a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.contact__row p, .contact__row address { font-size: var(--t-sm); color: var(--muted); font-style: normal; }

/* ---------- FAQ ------------------------------------------------------- */
.faq-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--s-9); } }

/* ---------- 404 ------------------------------------------------------- */
.nf { display: grid; gap: var(--s-6); justify-items: center; text-align: center; padding-block: var(--s-11); }
.nf__code {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(5rem, 3rem + 12vw, 12rem); line-height: .9; letter-spacing: -.05em;
  background: linear-gradient(100deg, var(--brand), var(--plum) 55%, var(--ember));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ==========================================================================
   Narrow-viewport hardening
   Grid children default to `auto`, which is max-content — a single nowrap
   chip row or a wide table then stretches the page. Every top-level grid
   gets an explicit shrinkable track, and long tokens are allowed to break.
   ========================================================================== */
.shop, .cart, .co, .doc, .pdp, .contact, .faq-grid, .split, .conf {
  grid-template-columns: minmax(0, 1fr);
}
.shop > *, .cart > *, .co > *, .doc > *, .pdp > *,
.contact > *, .faq-grid > *, .split > *, .conf > * { min-width: 0; }

/* Horizontal chip rails scroll inside themselves, never widen the page. */
.shop__chips { max-width: 100%; }
.shop__mobile-facets { min-width: 0; max-width: 100%; overflow: hidden; }

/* Emails, order references and URLs must be allowed to break. */
.ftr__contact a, .contact__row a, .contact__row address,
.prose a, .kv__row dd, .doc__meta a, .line__meta, .mini-line small {
  overflow-wrap: anywhere;
}

/* Wide data tables scroll in place instead of stretching the layout. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-wrap > table { min-width: 30rem; }
.prose table, .spec-table { max-width: 100%; }
.prose th, .prose td, .spec-table th, .spec-table td { overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .prose th, .prose td { padding: var(--s-3) var(--s-2); }
  .spec-table th { width: 42%; padding-right: var(--s-3); }
  .pdp__qty { flex-wrap: wrap; }
  .summary, .contact__card, .conf__card, .doc__toc { padding: var(--s-5); }
  .icard { padding: var(--s-5); }
}