/* Masonry storefront layout — quasi full-width, chips d'attributs discrets.
 * No-JS fallback = responsive grid (auto-fill). JS adds `.is-masonry` + spans. */

/* ---- Quasi full-width container (LOCAL override — global --max-w untouched) ---- */
.pc-grid.pc-grid--wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--masonry-gap, 20px);
  /* Full-bleed break-out of the narrow catalog container → quasi full-width,
     WITHOUT touching the global --max-w or the toolbar/breadcrumb width. */
  width: 96vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -48vw;
  margin-right: -48vw;
  max-width: none;
  padding-inline: clamp(12px, 2vw, 32px);
  align-items: start;
  background: var(--design-masonry-surface, var(--bg, #f7f1e7));
}
@media (min-width: 1600px) { .pc-grid.pc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (max-width: 900px)  { .pc-grid.pc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; width: 98vw; margin-left: -49vw; margin-right: -49vw; } }
@media (max-width: 560px)  { .pc-grid.pc-grid--wide { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-inline: 12px; } }
@media (max-width: 360px)  { .pc-grid.pc-grid--wide { grid-template-columns: 1fr; } }

/* JS-enhanced masonry: fine row unit + per-card span (set inline by masonry.js). */
.pc-grid.is-masonry,
.rc-row.is-masonry {
  grid-auto-rows: 8px;   /* == ROW in masonry.js */
  row-gap: 0;
  align-items: start;
}
.pc-grid.is-masonry > *,
.rc-row.is-masonry > * {
  margin-bottom: var(--masonry-gap, 20px);  /* == GAP in masonry.js */
  align-self: start;
  height: max-content;
}
.rc-row--6.is-masonry { row-gap: 0; }

/* ---- Attribute chips (secondary, discreet — CAS A/B/C natural heights) ---- */
.pc-card-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin-top: 8px;
}
.pc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--rule, #e7e0d3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg, #f7f1e7) 55%, #fff);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink, #17120f);
  white-space: nowrap;
  max-width: 100%;
}
.pc-chip__k { color: var(--ink-soft, #8a7f72); font-weight: 500; text-transform: none; }
.pc-chip__v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pc-chip--color .pc-chip__v { position: relative; }
.pc-chip--more { color: var(--ink-soft, #8a7f72); font-weight: 600; }

/* ---- Charger plus ---- */
.cat-adv__more { display: flex; justify-content: center; margin-top: 28px; }
.cat-more-btn {
  appearance: none;
  border: 1px solid var(--ink, #17120f);
  background: transparent;
  color: var(--ink, #17120f);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 12px 34px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}
.cat-more-btn:hover { background: var(--ink, #17120f); color: #fff; }
.cat-more-btn[disabled], .cat-more-btn.is-loading { opacity: .55; cursor: progress; }
.cat-more-btn.is-error { border-color: #b3261e; color: #b3261e; }

/* ---- v2 presets: media aspect-ratio only (image engine untouched) ---- */
.pc-card-media.media-square   { aspect-ratio: 1 / 1; }
.pc-card-media.media-standard { aspect-ratio: 4 / 5; }
.pc-card-media.media-tall     { aspect-ratio: 2 / 3; }
@media (max-width: 560px) { .pc-card-media.media-tall { aspect-ratio: 4 / 5; } } /* neutralize Tall on mobile */

/* landing (Nouveautés grid) — same deterministic grammar on the editorial card */
.rc-pcard__media.media-square   { aspect-ratio: 1 / 1; }
.rc-pcard__media.media-standard { aspect-ratio: 4 / 5; }
.rc-pcard__media.media-tall     { aspect-ratio: 2 / 3; }
@media (max-width: 560px) { .rc-pcard__media.media-tall { aspect-ratio: 4 / 5; } }

/* ---- Highlight: coloured CONTOUR only, WHOLE CARD (image + body) ----
   box-shadow + tone var live on the SAME card root so each tone resolves
   (custom properties inherit downward only). No fill, no size change. A 2px
   crisp ring + a soft same-tone glow gives a visible-but-premium presence. */
.pc-card.is-hl,
.rc-pcard.is-hl {
  border-radius: 16px;
  box-shadow: 0 0 0 2px var(--hl, #b7c4a8), 0 8px 26px -12px var(--hl, #b7c4a8);
}
.is-hl--sage  { --hl: #8FAE82; }
.is-hl--rose  { --hl: #DDA1AC; }
.is-hl--blue  { --hl: #8FB2CE; }
.is-hl--sand  { --hl: #D8BC7C; }

/* ---- VID visual grouping — sibling swatches (presentation only) ---- */
.pc-card-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 0 2px 2px; }
.rc-pcard-swatches { padding: 0; margin-top: 7px; }
.pc-swatch {
  width: 28px; height: 28px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--rule, #e7e0d3); background: #f3ece1; display: block;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pc-swatch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pc-swatch:hover { transform: translateY(-1px); border-color: var(--ink, #17120f); }
.pc-swatch:focus-visible { outline: 2px solid var(--ink, #17120f); outline-offset: 2px; }
.pc-swatch.is-current { border-color: var(--ink, #17120f); box-shadow: 0 0 0 1px var(--ink, #17120f) inset; }
.pc-swatch--more {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--ink-soft, #8a7f72); text-decoration: none;
}

/* ---- Landing responsive count: cards hidden by masonry.js (cols×3−1) ---- */
.rc-row--6 > .mzn-off { display: none !important; }
/* CTA stays a NORMAL masonry tile (one column wide). With exactly cols×3−1
   product tiles + the CTA (last DOM child), the CTA lands in the last column /
   3rd row = bottom-right; Fill (masonry.js) levels the columns around it.
   Drop the shared min-height:100% here so it sizes to its own content (a short
   premium tile) instead of stretching to fill the grid cell. */
.rc-row--6 > .rc-pcard--cta { min-height: 0; align-self: start; }

/* ---- v2 density: tighter gaps + one more column ----
   NOTE: only touch COLUMN gap here. Row spacing in masonry mode must stay
   row-gap:0 (see .is-masonry) — vertical rhythm comes from item margin-bottom.
   Using `gap` here would clobber that row-gap:0 and blow up card spans. */
.pc-grid.pc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 15px; }
@media (min-width: 1600px) { .pc-grid.pc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); } }
@media (max-width: 900px)  { .pc-grid.pc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); column-gap: 12px; } }
@media (max-width: 560px)  { .pc-grid.pc-grid--wide { grid-template-columns: repeat(2, 1fr); column-gap: 10px; } }

.pc-grid.is-masonry > *, .rc-row.is-masonry > * { margin-bottom: 15px; }
@media (max-width:900px){ .pc-grid.is-masonry > * { margin-bottom: 12px; } }
@media (max-width:560px){ .pc-grid.is-masonry > * { margin-bottom: 10px; } }


/* ---- Zero-friction continuation CTA --------------------------------------
   Same full-bleed footprint as .pc-grid--wide. It reads as the continuation
   of the product wall rather than a tiny unrelated pagination button. */
.cat-adv__more {
  display:block;
  width:96vw;
  position:relative;
  left:50%;
  margin:28px 0 0 -48vw;
  padding-inline:clamp(12px,2vw,32px);
  box-sizing:border-box;
}
.cat-more-btn {
  appearance:none;
  width:100%;
  min-height:92px;
  border:1px solid var(--rule,#e7e0d3);
  border-radius:20px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,241,231,.78));
  color:var(--ink,#17120f);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 24px;
  cursor:pointer;
  box-shadow:0 8px 30px -26px rgba(23,18,15,.5);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease;
}
.cat-more-btn:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--ink,#17120f) 28%,var(--rule,#e7e0d3));
  box-shadow:0 14px 34px -24px rgba(23,18,15,.42);
  background:linear-gradient(135deg,#fff,#f7f1e7);
  color:var(--ink,#17120f);
}
.cat-more-btn__icon {
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--ink,#17120f);
  color:#fff;
}
.cat-more-btn__icon svg {
  width:21px;
  height:21px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.cat-more-btn:hover .cat-more-btn__icon svg { transform:translateY(3px); }
.cat-more-btn__copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  text-align:left;
}
.cat-more-btn__copy strong {
  font-size:15px;
  line-height:1.1;
  font-weight:750;
}
.cat-more-btn__copy small {
  font-size:11.5px;
  line-height:1.25;
  color:var(--ink-soft,#8a7f72);
  font-weight:500;
}
.cat-more-btn[disabled],
.cat-more-btn.is-loading {
  opacity:.62;
  cursor:progress;
  transform:none;
}
.cat-more-btn.is-loading .cat-more-btn__icon svg {
  animation:rc-load-more-bob .8s ease-in-out infinite alternate;
}
.cat-more-btn.is-error {
  border-color:#b3261e;
  color:#b3261e;
}
@keyframes rc-load-more-bob {
  from { transform:translateY(-2px); }
  to { transform:translateY(4px); }
}

@media (max-width:900px) {
  .cat-adv__more {
    width:98vw;
    margin-left:-49vw;
    padding-inline:12px;
  }
}
@media (max-width:560px) {
  .cat-adv__more { margin-top:18px; }
  .cat-more-btn {
    min-height:76px;
    border-radius:16px;
    padding:14px 16px;
    gap:11px;
  }
  .cat-more-btn__icon {
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .cat-more-btn__icon svg { width:19px; height:19px; }
  .cat-more-btn__copy strong { font-size:14px; }
  .cat-more-btn__copy small { font-size:10.5px; }
}


/* ---- Continuation CTA v2 -------------------------------------------------
   Full Masonry width, but visually quiet: no black badge, no admin-widget feel. */
.cat-adv__more {
  display:block;
  width:96vw;
  position:relative;
  left:50%;
  margin:26px 0 0 -48vw;
  padding:0;
  box-sizing:border-box;
}
.cat-more-btn {
  appearance:none;
  width:100%;
  min-height:70px;
  border:0;
  border-top:1px solid var(--rule,#e7e0d3);
  border-bottom:1px solid var(--rule,#e7e0d3);
  border-radius:0;
  background:transparent;
  color:var(--ink,#17120f);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:14px 20px;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .16s ease,opacity .16s ease;
}
.cat-more-btn:hover {
  transform:none;
  background:rgba(255,255,255,.48);
  border-color:var(--rule,#e7e0d3);
  box-shadow:none;
  color:var(--ink,#17120f);
}
.cat-more-btn__copy {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}
.cat-more-btn__copy strong {
  font-size:14px;
  line-height:1.15;
  font-weight:750;
}
.cat-more-btn__copy small {
  font-size:11px;
  line-height:1;
  color:var(--ink-soft,#7a7168);
  font-weight:500;
}
.cat-more-btn__arrow {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  color:var(--ink,#17120f);
}
.cat-more-btn__arrow svg {
  width:18px;
  height:18px;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
.cat-more-btn:hover .cat-more-btn__arrow svg { transform:translateY(3px); }
.cat-more-btn[disabled],
.cat-more-btn.is-loading {
  opacity:.55;
  cursor:progress;
}
.cat-more-btn.is-loading .cat-more-btn__arrow svg {
  animation:rc-load-more-bob .8s ease-in-out infinite alternate;
}
.cat-more-btn.is-error {
  color:#b3261e;
  border-color:#b3261e;
}

@media (max-width:900px) {
  .cat-adv__more {
    width:98vw;
    margin-left:-49vw;
  }
}
@media (max-width:560px) {
  .cat-adv__more { margin-top:18px; }
  .cat-more-btn {
    min-height:64px;
    padding:12px 14px;
    gap:10px;
  }
  .cat-more-btn__copy strong { font-size:13.5px; }
  .cat-more-btn__copy small { font-size:10.5px; }
  .cat-more-btn__arrow { width:24px; height:24px; flex-basis:24px; }
  .cat-more-btn__arrow svg { width:16px; height:16px; }
}


/* =========================================================================
   Continuation CTA v3 — ROYALECLAT marketplace
   Same width as the visible Masonry columns, with a stronger commercial pull.
   ========================================================================= */
.cat-adv__more {
  --catalog-wall-pad: clamp(12px, 2vw, 32px);
  width: calc(96vw - (2 * var(--catalog-wall-pad)));
  position: relative;
  left: 50%;
  margin: 28px 0 0;
  transform: translateX(-50%);
  padding: 0;
  box-sizing: border-box;
}
.cat-more-btn {
  appearance: none;
  width: 100%;
  min-height: 84px;
  border: 1px solid color-mix(in srgb, var(--rc-gold,#b1863b) 62%, #8c6c3c);
  border-radius: 18px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--rc-gold,#b1863b) 68%, #d9c08d),
      color-mix(in srgb, var(--rc-gold,#b1863b) 88%, #806238));
  color: #fffdf9;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(190px,28%);
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  cursor: pointer;
  box-shadow:
    0 12px 30px -24px rgba(82,58,25,.72),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cat-more-btn:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--rc-gold,#b1863b) 72%, #d9c08d),
      color-mix(in srgb, var(--rc-gold,#b1863b) 92%, #806238));
  filter: brightness(1.035);
  box-shadow:
    0 18px 38px -24px rgba(82,58,25,.68),
    inset 0 1px 0 rgba(255,255,255,.34);
  color: #fff;
}
.cat-more-btn__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}
.cat-more-btn__copy strong {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(17px,1.25vw,21px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.015em;
}
.cat-more-btn__arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: currentColor;
}
.cat-more-btn__arrow svg {
  width: 20px;
  height: 20px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.cat-more-btn:hover .cat-more-btn__arrow svg { transform: translateY(4px); }
.cat-more-btn__progress {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.44);
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 550;
  color: rgba(255,255,255,.9);
  text-align: center;
}
.cat-more-btn[disabled],
.cat-more-btn.is-loading {
  opacity: .72;
  cursor: progress;
  transform: none;
}
.cat-more-btn.is-loading .cat-more-btn__arrow svg {
  animation: rc-load-more-bob .8s ease-in-out infinite alternate;
}
.cat-more-btn.is-error {
  border-color: #a73b32;
  background: linear-gradient(135deg,#b95850,#91413a);
  color: #fff;
}

@media (max-width:900px) {
  .cat-adv__more {
    --catalog-wall-pad: 12px;
    width: calc(98vw - (2 * var(--catalog-wall-pad)));
  }
}
@media (max-width:560px) {
  .cat-adv__more { margin-top: 18px; }
  .cat-more-btn {
    min-height: 78px;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 13px 15px 11px;
    border-radius: 15px;
  }
  .cat-more-btn__copy strong {
    font-size: 16px;
  }
  .cat-more-btn__arrow {
    width: 28px;
    height: 28px;
  }
  .cat-more-btn__progress {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.34);
    font-size: 10.5px;
  }
}


/* ---- End-of-list state --------------------------------------------------
   Same footprint as the continuation CTA, but clearly non-interactive. */
.cat-adv__more--end {
  margin-top:24px;
}
.cat-list-end {
  width:100%;
  min-height:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:13px 20px;
  border-top:1px solid var(--rule,#e7e0d3);
  border-bottom:1px solid var(--rule,#e7e0d3);
  color:var(--ink,#17120f);
  text-align:center;
  box-sizing:border-box;
}
.cat-list-end strong {
  font-family:var(--serif,Georgia,serif);
  font-size:15px;
  line-height:1.15;
  font-weight:600;
}
.cat-list-end span {
  color:var(--ink-soft,#7a7168);
  font-size:10.5px;
  line-height:1.2;
  font-weight:500;
}
@media(max-width:560px){
  .cat-adv__more--end { margin-top:16px; }
  .cat-list-end { min-height:58px; padding:11px 14px; }
  .cat-list-end strong { font-size:14px; }
  .cat-list-end span { font-size:10px; }
}


/* Storefront listing bottom bands — same outer footprint as .pc-grid--wide. */
.cat-adv__more,
.cat-adv__paging {
  width: 96vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.cat-more-btn,
.cat-list-end,
.cat-adv__paging {
  border-radius: 0;
}
.cat-adv__paging {
  margin: 28px 0 0;
  padding: 12px clamp(12px, 2vw, 32px);
  border-top: 1px solid var(--rule,#e7e0d3);
  border-bottom: 1px solid var(--rule,#e7e0d3);
}
@media (max-width: 900px) {
  .cat-adv__more,
  .cat-adv__paging {
    width: 98vw;
  }
}
@media (max-width: 560px) {
  .cat-more-btn {
    border-radius: 0;
  }
  .cat-adv__paging {
    margin-top: 18px;
    padding-inline: 12px;
  }
}