/** Shopify CDN: Minification failed

Line 1478:0 Unexpected "}"

**/
/* ============================================================================
   Furniva product page.

   Two columns at 1024px and up — gallery left, buy column right and sticky —
   collapsing to one column below that, with a sticky purchase bar taking over
   at the foot of the viewport.

   The page's argument is fit: measurements, placement, what arrives in the box.
   Everything below the buy column is ordered to answer "will this work in my
   room?" before "what is it made of?".
   ============================================================================ */

.fv-pdp {
  display: block;
  /* The final PDP section must not run directly into the footer. This remains
     useful whether reviews or customer-home media is the last rendered band. */
  padding-bottom: clamp(48px, 6vw, 72px);
}

.fv-pdp__main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px var(--fv-gut) 0;
  display: grid;
  grid-template-columns: var(--fv-pdp-cols);
  gap: var(--fv-pdp-gap);
  align-items: start;
}

/* ----------------------------------------------------------------------------
   Unavailable banner — a listing kept up so old links still work.
   ---------------------------------------------------------------------------- */
.fv-pdp__unavail {
  max-width: 1280px;
  margin: 12px auto 0;
  padding: 0 var(--fv-gut);
}
.fv-pdp__unavail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 0;
  background: var(--fv-status-error-bg);
  border: 1px solid rgba(165, 52, 42, 0.28);
}
.fv-pdp__unavail-text { flex: 1 1 280px; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }

/* ----------------------------------------------------------------------------
   Gallery
   ---------------------------------------------------------------------------- */
/* One spacing value for the whole gallery — hero to thumbnails, thumbnail to
   thumbnail, across and down. The wide layout had none of its own: the hero and
   the thumbnail grid were plain block siblings, so the only gap on the desktop
   gallery was the 12px inside the grid and the hero sat flush against it. */
.fv-gal {
  --fv-gal-gap: 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fv-gal-gap);
}
.fv-gal__mobilebar { display: none; }
.fv-gal__wide { display: flex; flex-direction: column; gap: var(--fv-gal-gap); }
/* The catalogue is a hard square. Owner decision, 2026-09-30: every product
   picture fills its square edge to edge — no bands above, below or beside it.
   A source that is not quite square is trimmed a little by `cover` (the
   catalogue is shot square, so it is a sliver). The thumbnails follow the same
   rule; the zoom, the pinch and the lightbox still show the whole picture. */
.fv-gal__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Plain square material: no radius, no border, nothing drawn over the shot. */
  overflow: hidden;
  background: var(--fv-surface-media);
}
.fv-gal__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: opacity 180ms var(--fv-ease-standard), transform 260ms var(--fv-ease-standard);
}
.fv-gal__hero img.is-changing { opacity: 0.35; transform: scale(1.008); }
/* Magnifying under the pointer, and pinching on a touchscreen, both work by
   scaling this image inside a frame that clips it. Only the scale eases —
   transform-origin is reset on every pointermove and easing it would drag the
   magnified area along behind the cursor. `pan-y` lets a finger scroll the page
   past the gallery while leaving two-finger gestures to the pinch handler. */
.fv-gal__hero { touch-action: pan-y; }

/* The lifted shot during a pinch. Fixed and inert, over everything, so it can
   grow past the frame that clips the original — which is the point. The
   original stays where it is, so nothing below it reflows. */
.fv-pinch {
  position: fixed;
  z-index: 190;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}
.fv-pinch.is-settling { transition: transform 260ms var(--fv-ease-standard); }
.fv-pinch__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(24, 18, 15, 0.45);
}
.fv-pinch__backdrop {
  position: fixed;
  inset: 0;
  z-index: 185;
  pointer-events: none;
  background: rgba(24, 18, 15, 0.9);
  opacity: 0;
  transition: opacity 220ms var(--fv-ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .fv-pinch.is-settling,
  .fv-pinch__backdrop { transition: none; }
}
/* The label pill names what the shot is — product, in a hallway, customer photo
   — so the gallery reads as evidence rather than decoration. */
.fv-gal__label {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--fv-surface-bar);
  backdrop-filter: var(--fv-blur-bar);
  font-size: var(--fv-size-micro);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-gal__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: none;
  background: var(--fv-surface-bar);
  backdrop-filter: var(--fv-blur-bar);
  box-shadow: var(--fv-shadow-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.fv-gal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fv-gal-gap); }
/* The same plain square as the hero. The hairline border, the 10px radius, the
   hover edge and the terracotta ring on the current shot are all gone: the
   thumbnails are the photographs and nothing else. `aria-current` still tells
   a screen reader which one is showing, and :focus-visible below keeps the
   keyboard path visible — that outline is not decoration. */
.fv-gal__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: none;
  background: var(--fv-surface-media);
  padding: 0;
  cursor: pointer;
}
.fv-gal__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-gal__tile:focus-visible { outline: 2px solid var(--fv-walnut); outline-offset: 2px; }
.fv-gal__tile-label {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fv-surface-bar);
  backdrop-filter: var(--fv-blur-bar);
  font-family: var(--fv-font-body);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* ----------------------------------------------------------------------------
   Buy column
   ---------------------------------------------------------------------------- */
.fv-buy {
  min-width: 0;
  position: var(--fv-pdp-buy-pos);
  top: var(--fv-pdp-sticky-top);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.fv-buy__title {
  margin: 0;
  font-family: var(--fv-font-heading);
  font-size: var(--fv-pdp-title);
  line-height: 1.22;
  color: var(--fv-text-heading);
  text-wrap: pretty;
}
.fv-buy__diff {
  font-size: var(--fv-pdp-body);
  color: var(--fv-text-secondary);
  line-height: var(--fv-pdp-lh);
  text-wrap: pretty;
}
.fv-buy__size-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fv-terracotta);
  font-size: var(--fv-size-caption);
  font-weight: var(--fv-weight-semibold);
}
.fv-buy__size-link svg:last-child { transition: transform var(--fv-duration-fast) var(--fv-ease-standard); }
.fv-buy__size-link:hover svg:last-child { transform: translateX(4px); }
.fv-buy__pricebox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0 15px;
  border-top: 1px solid var(--fv-border-subtle);
  border-bottom: 1px solid var(--fv-border-subtle);
}
/* The product price is the page's largest figure after the title. */
.fv-buy__pricebox .fv-price__now { font-size: var(--fv-pdp-price); line-height: 1.15; }
.fv-buy__tax { font-size: var(--fv-pdp-sec); color: var(--fv-text-muted); }

/* The approved Offers & EMI card: a contained, bordered white card at every
   width. It is one button, so the whole card is the click target — an earlier
   version had no border or ground and collapsed into a bare text row. */
.fv-buy__offers {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--fv-surface-card);
  border: 1px solid var(--fv-border-subtle);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  transition: var(--fv-transition-control);
}
.fv-buy__offers:hover { border-color: var(--fv-border-strong); }
.fv-buy__offers:focus-visible {
  outline: 2px solid var(--fv-terracotta);
  outline-offset: 2px;
  border-color: var(--fv-terracotta);
}
/* The ticket glyph keeps its own width so the label starts on the same x at
   every breakpoint. */
.fv-buy__offers > svg { flex: 0 0 auto; }
.fv-buy__offers-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--fv-font-body);
  font-size: var(--fv-pdp-sec);
  color: var(--fv-text-heading);
}
.fv-buy__offers-cta {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--fv-font-body);
  font-size: var(--fv-pdp-sec);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-link);
  white-space: nowrap;
}

/* Stock / delivery / installation status rows, stacked in one bordered block. */
.fv-buy__status {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 1px solid var(--fv-border-subtle);
  overflow: hidden;
}
.fv-buy__statusrow {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  background: var(--fv-surface-card);
  border-bottom: 1px solid var(--fv-border-subtle);
}
.fv-buy__statusrow:last-child { border-bottom: none; }
/* Only the availability row is tinted; delivery and installation stay white. */
.fv-buy__statusrow--stock.is-instock,
.fv-buy__statusrow--stock.is-mto { background: var(--fv-sage-tint); }
.fv-buy__statusrow--stock.is-soldout { background: var(--fv-warm-grey); }
.fv-buy__statusrow--stock.is-soldout .fv-buy__status-label,
.fv-buy__statusrow--stock.is-soldout .fv-buy__status-detail { color: var(--fv-text-heading); }
.fv-buy__statusrow span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fv-buy__status-label {
  font-size: var(--fv-pdp-sec);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-heading);
}
.fv-buy__status-detail {
  font-size: var(--fv-pdp-lbl);
  color: var(--fv-text-secondary);
  line-height: 1.45;
  text-wrap: pretty;
}

/* Variant picker — a finish is a visible choice, so each option carries its own
   thumbnail and its own price. */
.fv-variants { display: flex; flex-direction: column; gap: 10px; }
.fv-variants__label {
  font-size: var(--fv-size-caption);
  font-weight: var(--fv-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fv-text-heading);
}
.fv-variants__list { display: flex; flex-wrap: wrap; gap: 10px; }
.fv-variant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px 7px 7px;
  border-radius: 0;
  border: 1px solid var(--fv-border-subtle);
  background: var(--fv-surface-card);
  cursor: pointer;
  text-decoration: none;
  transition: var(--fv-transition-control);
}
.fv-variant:hover { border-color: var(--fv-border-strong); text-decoration: none; }
.fv-variant[aria-pressed='true'],
.fv-variant[aria-current='true'] {
  border-color: var(--fv-selected-border);
  background: var(--fv-selected-bg);
}
.fv-variant img { width: 36px; height: 36px; object-fit: cover; border-radius: 0; background: var(--fv-surface-media); }
.fv-variant__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.fv-variant__label {
  font-family: var(--fv-font-body);
  font-size: var(--fv-size-caption);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-heading);
}
.fv-variant__price {
  font-family: var(--fv-font-body);
  font-size: var(--fv-size-micro);
  color: var(--fv-text-muted);
  font-variant-numeric: var(--fv-numeric-price);
}
.fv-variant__out {
  font-family: var(--fv-font-body);
  font-size: var(--fv-size-micro);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-warm-grey-dark);
}
.fv-variant--out { opacity: 0.62; }


/* ----------------------------------------------------------------------------
   Purchase controls
   ---------------------------------------------------------------------------- */
.fv-buy__actions { display: flex; flex-direction: column; gap: 10px; }

/* Quantity, Add to cart and Saved items are ONE row.

   This was `flex-wrap: wrap` with `.fv-buy__add { flex: 1 1 180px }`. On a
   narrow product column the three controls plus their gaps outgrew the line and
   the heart wrapped underneath the stepper — and the "Added to cart" line then
   sat below the wrapped heart, so pressing Add to cart appeared to move the
   control. A grid cannot wrap: the stepper and the heart take their intrinsic
   width, Add to cart takes whatever is left, and 1fr is free to shrink. */
.fv-buy__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.fv-buy__add { min-height: 48px; min-width: 0; }

.fv-buy__note {
  font-size: var(--fv-size-caption);
  line-height: 1.55;
  color: var(--fv-text-secondary);
  text-wrap: pretty;
}

.fv-assembly__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fv-assembly__row > div { display: flex; flex-direction: column; gap: 5px; }
.fv-assembly__panel { max-width: 560px; }
.fv-assembly__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fv-assembly__links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fv-assembly__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 13px 14px;
  border: 1px solid var(--fv-border-subtle);
  border-radius: 0;
  color: var(--fv-text-heading);
  background: var(--fv-surface-card);
  transition: var(--fv-transition-control);
}
.fv-assembly__link:hover { border-color: var(--fv-terracotta-border); transform: translateY(-1px); box-shadow: var(--fv-shadow-sm); }
.fv-assembly__link span { display: flex; flex-direction: column; gap: 2px; }
.fv-assembly__link small { color: var(--fv-text-muted); font-size: var(--fv-size-micro); }

@media (max-width: 1023.98px) {
  /* The main shot runs to the edges of the screen — it is the subject of the
     page, and the gutter was only ever there for the copy. The thumbnails below
     stay inside the gutter, so the strip reads as a caption to the hero rather
     than a second full-width band. */
  .fv-gal__hero { margin-inline: calc(50% - 50vw); width: 100vw; border-radius: 0; }
  .fv-assembly__row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-gal__hero img,
  .fv-pin__result-card,
  .fv-assembly__link { animation: none; transition: none; }
}

/* A panel that replaces the purchase controls when the piece cannot be bought:
   sold out, or a record whose commercial fields are not confirmed. */
.fv-buy__blocked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 0;
  border: 1px solid var(--fv-border-subtle);
  background: var(--fv-surface-card-quiet);
}
.fv-buy__blocked-title {
  font-size: var(--fv-size-body-sm);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-heading);
  text-wrap: pretty;
}
.fv-buy__blocked-body {
  font-size: var(--fv-size-caption);
  line-height: 1.6;
  color: var(--fv-text-secondary);
  text-wrap: pretty;
}
.fv-buy__blocked-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ----------------------------------------------------------------------------
   Sections below the fold
   ---------------------------------------------------------------------------- */
.fv-pdpsec {
  max-width: 1280px;
  margin: 0 auto;
  /* The top padding is the air under the PREVIOUS band's content, before this
     band's rule — so it is the same value as the padding under this rule. */
  padding: var(--fv-pdpsec-band) var(--fv-gut) 0;
}
/* The rule that says a new section has started is the border-top on
   .fv-pdpsec__inner below, driven by --fv-sec-rule. It is the one mechanism for
   this — a second hairline drawn here as well is what put two lines on desktop. */
.fv-pdpsec__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: var(--fv-sec-rule);
  padding-top: var(--fv-sec-rule-pt);
}
.fv-pdpsec__title {
  margin: 0;
  font-family: var(--fv-font-heading);
  font-size: var(--fv-pdp-h2);
  line-height: 1.2;
  color: var(--fv-text-heading);
}
.fv-pdpsec__sub { font-size: var(--fv-pdp-sec); color: var(--fv-text-muted); }
.fv-pdpsec__overview-body { width: 100%; max-width: none; }

/* Why this one — benefit cards. */
/* More air between the heading and the row than the 16px the section's own
   stack gives every other block: four tiles read as a group, and a group needs
   a gap that separates it from its heading rather than one that ties it to the
   paragraph rhythm above. */
.fv-benefits {
  margin-top: 14px;
  display: flex;
  flex-wrap: var(--fv-why-wrap);
  gap: 14px;
  overflow-x: var(--fv-why-ovf);
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
  align-items: stretch;
}
/* The cards stretch to the tallest of the row, so one benefit with a paragraph
   under it leaves every other card with its icon and label stranded at the top
   and a block of nothing beneath. Centred on both axes: the content sits in the
   middle of whatever height the row settles on, and the icon sits over its own
   label rather than off to one side of it. */
.fv-benefit {
  flex: var(--fv-why-flex);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  /* Roughly 55% taller than the 89px these settled at, so a tile is a panel
     rather than a strip and the centred icon has room to sit above its label
     instead of beside it. */
  min-height: 138px;
  padding: 22px 18px;
  border-radius: 0;
  border: 1px solid var(--fv-border-subtle);
  background: var(--fv-surface-card);
}
.fv-benefit__label {
  font-size: var(--fv-pdp-body);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-heading);
  text-wrap: pretty;
}
.fv-benefit__detail {
  font-size: var(--fv-pdp-sec);
  line-height: var(--fv-pdp-lh);
  color: var(--fv-text-secondary);
  text-wrap: pretty;
}

/* Dimensions & placement. */
/* The drawing is taller than the figures beside it, and aligning both to the
   top left the measurements hanging at the ceiling of a column with the bottom
   half of it empty. Centred against each other vertically; the columns keep
   their own horizontal alignment. */
.fv-dims { display: grid; grid-template-columns: var(--fv-dim-cols); gap: 24px 40px; align-items: center; }
.fv-dims__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fv-dims__figure { display: flex; flex-direction: column; gap: 3px; }
.fv-dims__key {
  font-size: var(--fv-pdp-lbl);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fv-text-muted);
}
.fv-dims__value {
  font-family: var(--fv-font-heading);
  font-size: var(--fv-pdp-dim);
  line-height: 1.15;
  color: var(--fv-text-heading);
  font-variant-numeric: var(--fv-numeric-price);
}
.fv-dims__notes {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 6px;
}
.fv-dims__notes--tight { padding-top: 0; }
/* With no drawing uploaded the figures and notes use the full width rather
   than leaving a column-shaped hole where an illustration would have been. */
.fv-dims--nodrawing { grid-template-columns: minmax(0, 940px); }
.fv-dims__note { display: flex; gap: 10px; align-items: flex-start; }
.fv-dims__note span {
  font-size: var(--fv-pdp-sec);
  line-height: var(--fv-pdp-lh);
  color: var(--fv-text-secondary);
  text-wrap: pretty;
}


/* Delivery & assembly — the one sage band on the page. */
.fv-deliv {
  margin-top: var(--fv-sec);
  background: var(--fv-sage-tint);
  padding: var(--fv-sec) 0;
}
.fv-deliv__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fv-gut);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fv-deliv__sub {
  font-size: var(--fv-pdp-sec);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-sage-dark);
}
.fv-deliv__steps { display: grid; grid-template-columns: var(--fv-deliv-cols); gap: 12px; }
.fv-deliv__step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 0;
  background: var(--fv-surface-card);
}
.fv-deliv__glyph {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--fv-walnut-tint);
  display: grid;
  place-items: center;
}
.fv-deliv__step-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fv-deliv__step-label {
  font-size: var(--fv-pdp-body);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-heading);
  text-wrap: pretty;
}
.fv-deliv__step-detail {
  font-size: var(--fv-pdp-sec);
  line-height: var(--fv-pdp-lh);
  color: var(--fv-text-secondary);
  text-wrap: pretty;
}
.fv-deliv__rows { display: grid; grid-template-columns: var(--fv-spec-cols); gap: 0 40px; }
.fv-deliv__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(42, 29, 22, 0.1);
}
.fv-deliv__row-key { font-size: var(--fv-pdp-sec); color: var(--fv-text-secondary); }
.fv-deliv__row-value { font-size: var(--fv-pdp-sec); font-weight: var(--fv-weight-semibold); color: var(--fv-text-heading); text-align: right; }
.fv-deliv__caveat { display: flex; gap: 10px; align-items: flex-start; max-width: 70ch; }
.fv-deliv__caveat span {
  font-size: var(--fv-pdp-sec);
  line-height: var(--fv-pdp-lh);
  color: var(--fv-text-secondary);
  text-wrap: pretty;
}

/* Specifications — two columns of grouped rows. */
.fv-specs { display: grid; grid-template-columns: var(--fv-spec-cols); gap: 4px 40px; align-items: start; }
.fv-specgroup { display: flex; flex-direction: column; padding-bottom: 14px; }
.fv-specgroup__title {
  padding: 10px 0 6px;
  font-size: var(--fv-pdp-lbl);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-muted);
}
.fv-specgroup__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-top: 1px solid var(--fv-border-subtle);
}
.fv-specgroup__key { font-size: var(--fv-pdp-sec); color: var(--fv-text-secondary); }
.fv-specgroup__value {
  font-size: var(--fv-pdp-sec);
  font-weight: var(--fv-weight-medium);
  color: var(--fv-text-primary);
  text-align: right;
  text-wrap: pretty;
}

/* Good to know. */
.fv-goodtoknow {
  margin-top: var(--fv-sec);
  background: var(--fv-bg-alt);
  border-top: 1px solid var(--fv-border-subtle);
  border-bottom: 1px solid var(--fv-border-subtle);
  padding: var(--fv-sec-half) 0;
}
.fv-goodtoknow__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fv-gut);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Buy now — the approved full-width secondary control under Add to cart. Only
   rendered when an isolated checkout endpoint is configured, so it is never a
   button that cannot do what it says. */
.fv-buy__now { margin-top: 10px; min-height: 48px; }

/* While Razorpay's own "Processing…" overlay and spinner are on the button,
   our label keeps its box but shows no text, so exactly one state is readable
   and the button does not change size. */
.fv-buy__now.is-handing-off [data-fv-buy-now-label] { visibility: hidden; }
.fv-buy__now-state { min-height: 1em; font-size: var(--fv-size-caption); }
.fv-buy__now-state.is-error { color: var(--fv-status-error-fg); }
/* The one Buy now message that is not a failure: the bag is not empty, so the
   purchase goes through the cart instead. A caution, not an error. */
.fv-buy__now-state.is-notice { color: var(--fv-status-notice-fg); }


/* ----------------------------------------------------------------------------
   Sticky purchase bar — below 1024px, once the real Add to cart is off screen.

   It used to be pinned to `bottom: 0`, the same edge the bottom navigation
   occupies, and the collision was papered over by hiding the navigation while
   the bar was up: the customer lost Home, Search, Saved and Cart for most of
   the page. The bar now rests on top of the navigation instead. Its offset is
   the navigation's measured height, published as --fv-bottom-nav-h by
   furniva.js; the fallback keeps it on the bottom edge if that never arrives,
   and on a viewport with no bottom navigation the value is 0.

   The safe-area inset belongs to whichever bar is actually against the edge —
   adding it here as well would pad the purchase bar for a home indicator that
   the navigation below is already clearing.
   ---------------------------------------------------------------------------- */
.fv-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--fv-bottom-nav-h, 0px);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px var(--fv-gut);
  min-height: var(--fv-sticky-bar-height);
  background: var(--fv-surface-bar);
  backdrop-filter: var(--fv-blur-bar);
  border-top: 1px solid var(--fv-border-subtle);
  box-shadow: var(--fv-shadow-md);
  /* Far enough to clear its own height and the navigation it sits on. */
  transform: translateY(calc(100% + var(--fv-bottom-nav-h, 0px) + 10px));
  transition: transform var(--fv-duration-base) var(--fv-ease-standard);
}
.fv-buybar.is-visible { transform: none; }
/* The navigation it rests on slides away while the page scrolls down, and the
   bar follows it to the bottom edge rather than floating over a gap. It stops
   short of the home indicator, which the navigation had been clearing. */
.fv-chrome-hidden .fv-buybar.is-visible {
  transform: translateY(calc(var(--fv-bottom-nav-h, 0px) - env(safe-area-inset-bottom)));
}
.fv-buybar__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fv-buybar__title {
  font-size: var(--fv-size-micro);
  color: var(--fv-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-buybar__prices { display: flex; align-items: baseline; gap: 8px; }
.fv-buybar__price {
  font-size: var(--fv-size-body);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-price);
  font-variant-numeric: var(--fv-numeric-price);
}
.fv-buybar__mrp {
  font-size: var(--fv-size-micro);
  color: var(--fv-text-mrp);
  text-decoration: line-through;
  font-variant-numeric: var(--fv-numeric-price);
}
.fv-buybar__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fv-size-micro);
  color: var(--fv-text-muted);
}
/* At 1024px and up the buy column is sticky instead, so the bar is redundant. */
@media (min-width: 1024px) {
  .fv-buybar { display: none; }
}

/* ----------------------------------------------------------------------------
   Zoom + offers dialogs
   ---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   Lightbox — one for the gallery, the dimension drawing and the room photos.
   ---------------------------------------------------------------------------- */
.fv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  /* A hard stop. Everything below is sized so nothing reaches this, but a
     lightbox must never be the thing that bleeds off the screen. */
  overflow: hidden;
}
.fv-lightbox[hidden] { display: none; }
.fv-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 18, 15, 0.92);
  opacity: 0;
  transition: opacity var(--fv-duration-exit) var(--fv-ease-exit);
}
.fv-lightbox.is-open .fv-lightbox__scrim {
  opacity: 1;
  transition-duration: var(--fv-duration-panel);
  transition-timing-function: var(--fv-ease-enter);
}
/* The stage is the full viewport minus its padding, and the picture is sized to
   fit inside it. That is what keeps the lightbox from ever scrolling: there is
   nothing to scroll to. */
.fv-lightbox__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.97);
  transition: opacity var(--fv-duration-exit) var(--fv-ease-exit),
    transform var(--fv-duration-exit) var(--fv-ease-exit);
}
.fv-lightbox.is-open .fv-lightbox__stage {
  opacity: 1;
  transform: none;
  transition-duration: var(--fv-duration-panel);
  transition-timing-function: var(--fv-ease-enter);
}
.fv-lightbox__figure {
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
/* The picture is capped against the VIEWPORT, not against its parent.

   It was capped with percentages — max-width: 100%, max-height: calc(100% - 46px)
   — measured against a figure whose own height is decided by its contents. A
   percentage height against an auto-height parent resolves to `none`, so neither
   cap ever applied: the image rendered at its natural 1600px and hung off every
   edge of the screen. Viewport units always resolve, so they always hold.

   The subtractions are the lightbox's own padding, the caption and the gap above
   it, and enough width either side that the arrows are not sitting on the
   picture. */
.fv-lightbox__figure img {
  display: block;
  max-width: min(calc(100vw - 132px), 1100px);
  max-height: calc(100dvh - 104px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}
.fv-lightbox__caption {
  max-width: 68ch;
  text-align: center;
  font-size: var(--fv-size-body-sm);
  line-height: 1.5;
  color: rgba(247, 243, 236, 0.82);
  text-wrap: pretty;
}
.fv-lightbox__close,
.fv-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(247, 243, 236, 0.28);
  background: rgba(42, 29, 22, 0.62);
  backdrop-filter: blur(6px);
  color: var(--fv-ivory);
  cursor: pointer;
  transition: var(--fv-transition-control);
}
.fv-lightbox__close:hover,
.fv-lightbox__nav:hover { background: rgba(42, 29, 22, 0.9); border-color: rgba(247, 243, 236, 0.5); }
.fv-lightbox__close:focus-visible,
.fv-lightbox__nav:focus-visible { outline: 2px solid var(--fv-ivory); outline-offset: 2px; }
.fv-lightbox__close { top: 0; right: 0; }
.fv-lightbox__nav { top: 50%; transform: translateY(-50%); }
.fv-lightbox__nav--prev { left: 0; }
.fv-lightbox__nav--next { right: 0; }
.fv-lightbox__nav[hidden] { display: none; }

@media (max-width: 759.98px) {
  .fv-pdp__main { padding-top: 0; }
  .fv-crumbs__back { display: none; }
  .fv-gal {
    /* Break out of the PDP copy gutter so the gallery and photograph retain
       their full mobile width. This is a page edge, not a rounded card. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    gap: 0;
  }
  .fv-gal__mobilebar {
    min-height: 68px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--fv-border-subtle);
    border-radius: 0;
    background: var(--fv-surface-card-quiet);
  }
  .fv-gal__mobileback,
  .fv-gal__mobilewish {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fv-walnut);
    text-decoration: none;
  }
  .fv-gal__mobileback:focus-visible,
  .fv-gal__mobilewish:focus-visible {
    outline: 2px solid var(--fv-walnut);
    outline-offset: 1px;
    border-radius: 999px;
  }
  .fv-gal__mobiletitle {
    padding: 0 10px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--fv-font-heading);
    font-size: var(--fv-size-body);
    color: var(--fv-text-secondary);
  }
  .fv-gal__hero {
    margin-inline: 0;
    width: 100%;
    border: 0;
  }
  .fv-gal__grid { padding-inline: var(--fv-gut); }
  .fv-gal__label { top: 12px; }
  .fv-buy__row > [data-fv-wish] { display: none; }

  /* The arrows come off the edges and sit at the foot, where a thumb is. */
  .fv-lightbox__nav { top: auto; bottom: 0; transform: none; width: 44px; height: 44px; }
  .fv-lightbox__nav--prev { left: 18%; }
  .fv-lightbox__nav--next { right: 18%; }
  /* The arrows are along the foot here rather than the sides, so the width is
     free and the height has to give them room. */
  .fv-lightbox__figure img {
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 168px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fv-lightbox__scrim,
  .fv-lightbox__stage { transition: none; }
  .fv-lightbox__stage { transform: none; }
}
.fv-offers__panel { max-width: 560px; }
.fv-offers__group { display: flex; flex-direction: column; gap: 8px; }
.fv-offers__title {
  font-size: var(--fv-pdp-lbl);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-muted);
}
.fv-offers__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--fv-border-subtle);
}
.fv-offers__row span {
  font-size: var(--fv-pdp-sec);
  line-height: var(--fv-pdp-lh);
  color: var(--fv-text-secondary);
  text-wrap: pretty;
}
.fv-offers__foot { font-size: var(--fv-size-micro); line-height: 1.5; color: var(--fv-text-muted); text-wrap: pretty; }

/* ----------------------------------------------------------------------------
   Similar pieces
   ---------------------------------------------------------------------------- */
/* The bottom padding matches the top. It was --fv-sec (72px) against a 64px
   top, and under it sat a rail-nav row that is empty whenever the row does not
   scroll — the wrap's 24px gap plus an invisible control left the section
   looking like the page had run out of content. */
/* No bottom padding by design, matching .fv-collection: main#MainContent
   already carries 72px of clearance before the footer, and this section is
   always last on the page. Its own 64px sat on top of that, so the row ended
   136px above the footer where every other page ends 72px above it. */
.fv-similar { padding: clamp(40px, 4vw, 56px) 0 0; }
/* With Similar pieces after it, the product section's own bottom padding
   (kept for when the footer follows) would stack on top of this gap. */
main:has(.fv-similar) .fv-pdp { padding-bottom: 0; }
.fv-similar .fv-railwrap.is-static { gap: 0; }
.fv-similar .fv-railwrap.is-static .fv-railnav { display: none; }
.fv-similar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fv-gut);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ----------------------------------------------------------------------------
   Gallery layout switch.
   The two-column hero + grid is a desktop layout; below 1024px the same media
   becomes a snap rail, matching where the buy column stops being sticky.
   ---------------------------------------------------------------------------- */
/* Below the desktop breakpoint the thumbnail grid becomes a strip that scrolls
   sideways under the hero, which is the phone shape: one large shot, the rest as
   a row beneath it. The current one is marked rather than merely bordered,
   because on a phone it is the only thing telling you where you are in the set. */
@media (max-width: 1023.98px) {
  .fv-gal__grid {
    display: flex;
    gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .fv-gal__grid::-webkit-scrollbar { height: 0; }
  .fv-gal__tile {
    flex: 0 0 76px;
    scroll-snap-align: start;
    border-radius: 0;
    opacity: .5;
    transition: opacity var(--fv-duration-base) var(--fv-ease-standard),
      transform var(--fv-duration-base) var(--fv-ease-standard);
  }
  .fv-gal__tile[aria-current='true'] { opacity: 1; transform: translateY(-3px); }
  /* The chip belongs to the hero at this size; on a 76px thumbnail it is
     unreadable and covers the shot it is labelling. */
  .fv-gal__tile-label { display: none; }
}

/* ----------------------------------------------------------------------------
   Reviews
   ---------------------------------------------------------------------------- */
.fv-reviews__app:empty { display: none; }
/* The rating summary. Sized to its contents rather than stretched across the
   page: one short row of figure, stars and count, which is all it says. */
.fv-reviews__summary {
  display: inline-flex;
  flex-wrap: wrap;
  /* Centred, not baseline: the stars are SVGs with no useful baseline, so
     against a 30px figure they sat visibly off the text line. */
  align-items: center;
  gap: 6px 12px;
  width: max-content;
  max-width: 100%;
  align-self: flex-start;
  padding: 12px 16px;
  border-radius: 0;
  background: var(--fv-surface-card-quiet);
  border: 1px solid var(--fv-border-subtle);
}
/* The count sits apart from the figure, behind a thin rule. */
.fv-reviews__summary .fv-reviews__basis {
  padding-left: 12px;
  border-left: 1px solid var(--fv-border-subtle);
}
.fv-reviews__summary .fv-stars { align-self: center; }
/* The figure and "out of 5" keep their own baseline relationship inside the
   centred row. */
.fv-reviews__summary .fv-reviews__number { line-height: 1; }
.fv-reviews__summary .fv-reviews__outof,
.fv-reviews__summary .fv-reviews__basis { line-height: 1.2; }
.fv-reviews__score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
@media (max-width: 559.98px) {
  .fv-reviews__summary { width: 100%; }
  .fv-reviews__summary .fv-reviews__basis { padding-left: 0; border-left: none; }
}
.fv-reviews__number {
  font-family: var(--fv-font-heading);
  /* 40px belonged to a full-width band; in a compact row it shouted. */
  font-size: 30px;
  line-height: 1;
  color: var(--fv-text-heading);
  font-variant-numeric: var(--fv-numeric-price);
}
.fv-reviews__outof { font-size: var(--fv-size-caption); color: var(--fv-text-muted); }
.fv-reviews__basis { font-size: var(--fv-size-caption); color: var(--fv-text-secondary); }
.fv-reviews__note {
  margin: 0;
  max-width: 70ch;
  font-size: var(--fv-pdp-sec);
  line-height: var(--fv-pdp-lh);
  color: var(--fv-text-secondary);
}
.fv-reviews__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.fv-review {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  border-radius: 0;
  background: var(--fv-surface-card);
  border: 1px solid var(--fv-border-subtle);
}
.fv-review__title {
  font-size: var(--fv-size-body-sm);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-heading);
}
.fv-review__body {
  margin: 0;
  font-size: var(--fv-pdp-sec);
  line-height: var(--fv-leading-body);
  color: var(--fv-text-secondary);
  text-wrap: pretty;
}
.fv-review__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: var(--fv-size-micro);
  color: var(--fv-text-muted);
}
.fv-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fv-sage-dark);
  font-weight: var(--fv-weight-semibold);
}

/* A confirmed warranty statement, shown only where the product record is flagged
   furniva.warranty_eligible. Unconfirmed products show nothing at all. */
.fv-warranty-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 0;
  background: var(--fv-surface-card-quiet);
  border: 1px solid var(--fv-border-subtle);
  font-size: var(--fv-size-caption);
  line-height: 1.6;
  color: var(--fv-text-secondary);
}

/* ----------------------------------------------------------------------------
   PDP — breadcrumb, identity block
   ---------------------------------------------------------------------------- */
/* The breadcrumb belongs in the PDP content container, aligned with the gallery
   and the purchase column, not against the browser edge. */
.fv-crumbs-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px var(--fv-gut) 0;
}

.fv-buy__flags { display: flex; flex-wrap: wrap; gap: 8px; }
/* A verified bestseller rank. Never rendered without furniva.bestseller_rank_verified. */
.fv-badge--rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fv-terracotta-tint, #F6E7DE);
  color: var(--fv-terracotta-hover, #9C4F26);
  border: 1px solid transparent;
}
.fv-buy__rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fv-buy__rating-link {
  font-size: var(--fv-size-caption);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-link);
}
.fv-buy__rating-link:hover { color: var(--fv-text-link-hover); }
.fv-buy__diff { font-size: var(--fv-size-body-sm); color: var(--fv-text-secondary); }
.fv-buy__tax { font-size: var(--fv-size-caption); line-height: 1.55; color: var(--fv-text-muted); }

/* ----------------------------------------------------------------------------
   AR and 360 controls — drawn only when the product record carries the assets.
   ---------------------------------------------------------------------------- */
.fv-ar360 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fv-ar360__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 0;
  border: 1px solid var(--fv-border-strong);
  background: var(--fv-surface-card);
  cursor: pointer;
  font-family: var(--fv-font-body);
  font-size: var(--fv-size-caption);
  font-weight: var(--fv-weight-semibold);
  color: var(--fv-text-heading);
  transition: var(--fv-transition-control);
}
.fv-ar360__btn:hover { background: var(--fv-action-ghost-bg-hover); }
.fv-ar360__btn[aria-busy="true"] { opacity: .75; cursor: progress; }

/* "View in 3D": the one control on the gallery that is about the piece itself,
   so it gets a quiet but deliberate look — walnut ink, cube mark, AR chip. */
.fv-ar360__btn--3d {
  gap: 10px;
  padding: 0 14px 0 12px;
  border-color: var(--fv-walnut);
  color: var(--fv-walnut);
  background: var(--fv-ivory, #fbf6ee);
}
.fv-ar360__btn--3d:hover { background: var(--fv-walnut); color: var(--fv-ivory, #fbf6ee); }
.fv-ar360__cube { flex: none; }
.fv-ar360__chip {
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: var(--fv-weight-bold);
  background: var(--fv-terracotta);
  color: #fff;
}
@media (max-width: 759px) { .fv-ar360__btn--3d { width: 100%; justify-content: center; } }
/* A computer (wide screen, mouse) can only turn the model: it is a 360° view
   there, and the button sits on the main photo instead of below the whole
   picture grid. Touch screens, tablets included, keep AR and the old place. */
.fv-ar360__desk { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .fv-ar360__touch { display: none; }
  .fv-ar360__desk { display: revert; }
  .fv-pdp__gallery { position: relative; }
  /* No z-index: it would trap the 3D window (inside .fv-ar360) under the header. */
  .fv-pdp__gallery > .fv-ar360 { position: absolute; top: 14px; right: 14px; margin: 0; justify-content: flex-end; }
  .fv-pdp__gallery > .fv-ar360 .fv-ar360__btn { min-height: 40px; box-shadow: 0 6px 18px rgba(28, 20, 14, .16); }
  .fv-ar3d__hint b { color: var(--fv-walnut); }
}

/* The 3D window. */
.fv-ar3d { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fv-ar3d[hidden] { display: none; }
.fv-ar3d__scrim { position: absolute; inset: 0; background: rgba(28, 20, 14, .55); opacity: 0; transition: opacity 220ms ease; }
.fv-ar3d.is-open .fv-ar3d__scrim { opacity: 1; }
.fv-ar3d__panel {
  position: relative; display: flex; flex-direction: column;
  width: min(1040px, 100%); height: min(760px, calc(100vh - 48px));
  background: var(--fv-ivory, #fbf6ee); box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(12px) scale(.985); transition: opacity 240ms ease, transform 240ms ease;
}
.fv-ar3d.is-open .fv-ar3d__panel { opacity: 1; transform: none; }
.fv-ar3d__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; border-bottom: 1px solid var(--fv-border-subtle); }
.fv-ar3d__eyebrow { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fv-warm-grey); }
.fv-ar3d__title { margin: 2px 0 0; font-size: 17px; font-weight: var(--fv-weight-semibold); color: var(--fv-walnut); line-height: 1.3; }
.fv-ar3d__close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--fv-border-subtle); background: transparent; cursor: pointer; color: var(--fv-walnut); }
.fv-ar3d__close:hover { background: var(--fv-walnut); color: var(--fv-ivory, #fbf6ee); }
.fv-ar3d__stage { flex: 1; min-height: 0; background: radial-gradient(ellipse at 50% 38%, #ffffff 0%, #f3ece2 62%, #e9dfd1 100%); }
.fv-ar3d__stage model-viewer { width: 100%; height: 100%; display: block; background: transparent; --poster-color: transparent; }
.fv-ar3d__hint { margin: 0; padding: 12px 20px 16px; font-size: 12.5px; color: var(--fv-warm-grey); text-align: center; }
html.fv-ar3d-open, html.fv-ar3d-open body { overflow: hidden; }
@media (max-width: 759px) {
  .fv-ar3d { padding: 0; }
  .fv-ar3d__panel { height: 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fv-ar3d__scrim, .fv-ar3d__panel { transition: none; }
}
.fv-ar360__model model-viewer { width: 100%; height: 420px; display: block; background: var(--fv-surface-media); }

/* 360 viewer. The stage is .fv-spin360, not .fv-spin: .fv-spin is the
   loading circle (furniva-core.css), and sharing the name squared it — no
   radius, a grey ground — wherever this file loads, i.e. on every product
   page's pincode check. */
.fv-spin__panel { max-width: 640px; }
.fv-spin360 {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--fv-radius-media);
  overflow: hidden;
  background: var(--fv-surface-media);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.fv-spin360.is-dragging { cursor: grabbing; }
.fv-spin__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
.fv-spin__frame.is-on { display: block; }
.fv-spin__control { display: block; margin-top: 14px; }
.fv-spin__control input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--fv-terracotta); }
.fv-spin__hint { display: block; margin: 6px 0 14px; font-size: var(--fv-size-caption); color: var(--fv-text-muted); }

/* Offers feed rows (only rendered from a verified provider payload). */
.fv-offers__feed { display: flex; flex-direction: column; gap: 10px; }
.fv-offers__label { font-size: var(--fv-size-body-sm); font-weight: var(--fv-weight-semibold); color: var(--fv-text-heading); }
.fv-offers__detail { font-size: var(--fv-size-caption); color: var(--fv-text-secondary); }
.fv-offers__terms { font-size: var(--fv-size-micro); color: var(--fv-text-link); }
.fv-offers__stamp { font-size: var(--fv-size-micro); color: var(--fv-text-muted); }
.fv-offers__empty { margin: 0; font-size: var(--fv-size-body-sm); line-height: 1.6; color: var(--fv-text-secondary); }
.fv-buy__offers-sub { color: var(--fv-text-muted); font-weight: var(--fv-weight-regular); }
.fv-ar360__poster { width: 24px; height: 24px; border-radius: 0; object-fit: cover; }

/* Dimensions — three aligned cells, notes beneath, drawing panel at the side.

   The figures and the notes used to be separated by full-width rules top and
   bottom, which cut the section into three strips for no reason: the three
   measurements and the notes are one statement about fit. Spacing separates
   them now. */
.fv-dims__figures { padding-bottom: 2px; }
/* A button now, so it opens the zoom modal; it keeps the look it had. */
.fv-dims__drawing {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--fv-surface-media);
  border: 1px solid var(--fv-border-subtle);
  cursor: zoom-in;
  transition: var(--fv-transition-control);
}
.fv-dims__drawing:hover { border-color: var(--fv-border-strong); }
.fv-dims__drawing:focus-visible { outline: 2px solid var(--fv-walnut); outline-offset: 2px; }
.fv-dims__drawing img {
  width: 100%;
  height: auto;
  display: block;
  /* Only the scale eases. transform-origin is deliberately not transitioned —
     it is reset every pointermove, and easing it would drag the magnified area
     along behind the cursor. */
  transition: transform var(--fv-duration-base) var(--fv-ease-standard);
}
.fv-dims__drawing.is-zooming { cursor: zoom-in; }
.fv-dims__drawing.is-zooming img { transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .fv-dims__drawing img { transition: none; }
}
/* ----------------------------------------------------------------------------
   Add-to-cart success. The control keeps its box so nothing below it shifts.
   ---------------------------------------------------------------------------- */
.fv-buy__add.is-added,
button[name="add"].is-added {
  background: var(--fv-sage-dark, #4F6140);
  border-color: var(--fv-sage-dark, #4F6140);
  color: var(--fv-ivory);
}
.fv-added { display: inline-flex; align-items: center; gap: 8px; }
/* Its own full-width row under the controls, with its height reserved, so a
   message appearing or clearing never moves the row above it. */
.fv-addstate {
  display: block;
  width: 100%;
  /* Two lines' worth, so a wrapped message at narrow widths still does not
     push the content below it. */
  min-height: 2.6em;
  font-size: var(--fv-size-caption);
  line-height: 1.5;
}
.fv-addstate.is-success { color: var(--fv-sage-dark, #4F6140); }
/* Success is only announced (the button's animation and the bag count are
   the visible confirmation), so it must take no room: writing the hidden
   "Added to cart." into the line used to give it two lines of height and
   push the whole buy column about — owner-reported, 2026-09-30. Only an
   error, which the customer must read, takes space. */
.fv-addstate:not(.is-error) {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.fv-addstate.is-error { color: var(--fv-danger); }
.fv-pdpsec__lead { margin: 0; max-width: 70ch; font-size: var(--fv-size-body-sm); line-height: 1.65; color: var(--fv-text-secondary); }

/* Review-provider takeover: the app owns the section, so the native summary,
   list, aggregate note and empty state are all suppressed together. */
.fv-reviews--provider [data-fv-reviews-native] { display: none !important; }

/* Room-photography card actions. */
.fv-homecard__add {
  min-height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 0;
  background: var(--fv-action-bg);
  color: var(--fv-white, #fff);
  cursor: pointer;
  font-family: var(--fv-font-body);
  font-size: var(--fv-size-caption);
  font-weight: var(--fv-weight-semibold);
  transition: var(--fv-transition-control);
}
.fv-homecard__add:hover:not(:disabled) { background: var(--fv-action-bg-hover); }
.fv-homecard__add:disabled { opacity: 0.75; cursor: default; }
.fv-homecard__add.is-added { background: var(--fv-sage-dark, #4F6140); }
.fv-homecard__soldout {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(247, 243, 236, 0.4);
  font-size: var(--fv-size-caption);
  color: rgba(247, 243, 236, 0.8);
  text-decoration: none;
}
.fv-homecard__state { min-height: 1em; font-size: 10px; color: rgba(247, 243, 236, 0.86); }
/* The same success family as the PDP's Add to cart, lightened to stay legible
   on the photograph's scrim — #4F6140 is unreadable there. */
.fv-homecard__state.is-success { color: #B7D3A0; font-weight: var(--fv-weight-medium); }
.fv-homecard__state.is-error { color: #FFC9B8; }

/* Customer photos on a review. A strip of squares that wraps; each opens the
   full-size image. Only drawn when a review actually has photos attached. */
.fv-review__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.fv-review__photo {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--fv-border-subtle);
  background: var(--fv-surface-media);
  display: block;
  transition: var(--fv-transition-control);
}
.fv-review__photo:hover { border-color: var(--fv-border-strong); }
.fv-review__photo:focus-visible { outline: 2px solid var(--fv-terracotta); outline-offset: 2px; }
.fv-review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }


}

/* ----------------------------------------------------------------------------
   Enhanced content (A+) — curated blocks for one product.
   Editorial, so it reads at a measured column width rather than filling the
   page, and it borrows the page's own type scale rather than inventing one.
   ---------------------------------------------------------------------------- */
.fv-aplus__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 52px);
  width: 100%;
  margin-inline: auto;
}
.fv-aplus--narrow .fv-aplus__stack { max-width: 760px; }
.fv-aplus--medium .fv-aplus__stack { max-width: 1080px; }
.fv-aplus--wide .fv-aplus__stack { max-width: 1280px; }

/* A soft band, when the content wants to sit apart from the page. Full-bleed,
   so the colour runs edge to edge while the copy keeps its column. */
.fv-aplus[data-tone='alt'] {
  background: var(--fv-bg-alt);
  max-width: none;
  padding-bottom: var(--fv-sec);
}
.fv-aplus[data-tone='alt'] .fv-pdpsec__inner { max-width: 1280px; margin-inline: auto; }

.fv-aplus__text--centre { text-align: center; }
.fv-aplus__text--centre .fv-prose__body { margin-inline: auto; }
.fv-aplus__h {
  margin: 0 0 10px;
  font-family: var(--fv-font-heading);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: var(--fv-text-heading);
}
.fv-aplus__text .fv-prose__body { max-width: 68ch; }

.fv-aplus__figure { margin: 0; }
.fv-aplus__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: var(--fv-surface-media);
}
.fv-aplus__caption {
  margin-top: 10px;
  font-size: var(--fv-size-caption);
  line-height: 1.5;
  color: var(--fv-text-muted);
  text-wrap: pretty;
}

/* Two or three across, stacking on a phone. The count comes from Liquid so a
   row with one image left blank does not leave a hole where it was. */
.fv-aplus__row { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.fv-aplus__row[data-count='1'] { grid-template-columns: minmax(0, 1fr); }
.fv-aplus__row[data-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fv-aplus__row[data-count='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fv-aplus__cell { margin: 0; min-width: 0; }

/* The scrollable strip is the shared rail, so furniva.js gives it swipe and
   arrows without another line of script. */
.fv-aplus__rail { gap: clamp(14px, 1.6vw, 22px); padding-bottom: 2px; }
.fv-aplus__slide { flex: 0 0 clamp(240px, 32vw, 380px); margin: 0; }

/* The escape hatch. Anything can arrive here, so it is kept from breaking the
   page around it: nothing may exceed the column, and a table or a wide embed
   scrolls inside its own box rather than pushing the page sideways. */
.fv-aplus__html { max-width: 100%; overflow-x: auto; }
.fv-aplus__html img,
.fv-aplus__html video,
.fv-aplus__html iframe { max-width: 100%; height: auto; }
.fv-aplus__html table { border-collapse: collapse; }
.fv-aplus__html table td,
.fv-aplus__html table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--fv-border-subtle);
  font-size: var(--fv-size-body-sm);
  text-align: left;
}

@media (max-width: 759.98px) {
  .fv-aplus__row[data-count='2'],
  .fv-aplus__row[data-count='3'] { grid-template-columns: minmax(0, 1fr); }
  .fv-aplus__slide { flex-basis: 82vw; }
}

/* `metafield_tag` wraps rich text in a div of its own. It carries no styling of
   its own worth keeping, and left in the flow it breaks the prose rules that
   target .fv-prose__body > p, so it is removed from the layout and the
   paragraphs inside it are treated as if they were direct children. */
.fv-pdpsec__overview-body > .metafield-rich_text_field { display: contents; }

/* "Why this one" is the only band whose content is a row of panels rather than
   prose, and a row of panels needs to finish before the next rule rather than
   run into it. Its own bottom padding, on top of the band value every section
   shares. */
.fv-pdpsec--why { padding-bottom: 22px; }
@media (max-width: 759.98px) {
  .fv-pdpsec--why { padding-bottom: 14px; }
  .fv-benefit { min-height: 120px; }
}

/* The room photograph is the lightbox trigger; it fills the card behind the
   labels and the product row, which keep their own place above it. */
.fv-homecard__open {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
.fv-homecard__open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-homecard__open:focus-visible { outline: 2px solid var(--fv-ivory); outline-offset: -4px; }
.fv-homecard__top,
.fv-homecard__foot { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------------
   The status lines under Add to cart.

   Both reserve height so a message appearing cannot shove the page — 2.6em for
   a wrapped add-to-cart message, 1em for Buy now. On a wide screen that costs
   nothing; on a phone it is 47px of blank page under the buttons, plus the
   column's two 10px gaps, and the next section's rule then arrives after most
   of a thumb's worth of nothing.

   They only reserve it when they are holding something. An empty one collapses
   entirely. The shift it was guarding against still cannot strand anyone: it
   happens the instant you press Add to cart, on the element directly under your
   finger, and it grows downward into the page rather than moving the button you
   just pressed.

   `:empty` rather than a class, so it is true of the live regions whatever
   writes to them — and they stay in the DOM throughout, which is what the
   aria-live announcement depends on.
   ---------------------------------------------------------------------------- */
.fv-addstate:empty,
.fv-buy__now-state:empty {
  display: none;
}

/* The same bar the product cards use, on the product page's own photographs —
   the hero while it decodes or swaps, and each thumbnail until it arrives.
   Indeterminate, because an image reports no progress and a bar that pretends
   to know is worse than one that does not claim to. */
.fv-gal__hero.is-photo-loading::after,
.fv-gal__tile.is-photo-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 34%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--fv-terracotta), transparent);
  animation: fv-photo-bar 1150ms cubic-bezier(.45, 0, .55, 1) infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .fv-gal__hero.is-photo-loading::after,
  .fv-gal__tile.is-photo-loading::after { animation: none; width: 100%; opacity: .5; }
}


/* ----------------------------------------------------------------------------
   Video in the gallery.

   The player fills the hero frame the still occupies, so the column does not
   change height when you move between them. While one is showing, the controls
   that belong to a photograph step aside: there is no magnifying a moving
   picture, and the view pill would sit on top of it.
   ---------------------------------------------------------------------------- */
.fv-gal__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--fv-walnut-dark);
}
.fv-gal__video[hidden] { display: none; }
.fv-gal__video video,
.fv-gal__video iframe,
.fv-gal__video > * {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: contain;
}
.fv-gal__hero.is-playing { cursor: default; }
.fv-gal__hero.is-playing img { visibility: hidden; }

/* The play badge on a video thumbnail — a disc in the corner rather than a
   plate across the middle, so the frame it is marking is still readable. */
.fv-gal__tile--video .fv-gal__play {
  position: absolute;
  left: auto;
  top: auto;
  right: 6px;
  bottom: 6px;
  transform: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(42, 29, 22, 0.78);
  color: var(--fv-ivory);
  backdrop-filter: blur(4px);
}
@media (min-width: 1024px) {
  .fv-gal__tile--video .fv-gal__play { right: 10px; bottom: 10px; width: 32px; height: 32px; }
}

/* An app block sitting under the Offers & EMI row — Razorpay's affordability
   widget. It gets the row's width and a little air, and nothing else: the app
   owns its own styling and should not inherit ours. */
.fv-buy__appblock { margin-top: 10px; }
.fv-buy__appblock:empty { display: none; }
/* Razorpay's EMI and offers widget is drawn by its own script well after the
   page, and arrived as a 127px block that pushed Add to cart and Buy now down
   under the customer's thumb. Its height is the same at every width, so the
   room is held from the start and the widget fades into it. */
#razorpay-affordability-widget { min-height: 127px; }
#razorpay-affordability-widget.rzp-container { animation: fv-appblock-in 320ms var(--fv-ease-enter) both; }
@keyframes fv-appblock-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #razorpay-affordability-widget.rzp-container { animation: none; }
}

/* A product with no rating and no written review has no reviews section. It
   is still in the markup so a review app can take it over; see
   snippets/furniva-product-reviews.liquid. */
.fv-reviews--empty:not(.fv-reviews--provider) { display: none; }

/* ----------------------------------------------------------------------------
   Phone gallery slider (below 1024px).
   Owner feedback, 2026-09-30: swiping swapped the hero's source, so the shot
   blinked and loaded on every move. The track holds every shot side by side
   and the finger drags it (native scroll snap on the compositor): one
   continuous, buttery motion. The single hero stays for a laptop.
   ---------------------------------------------------------------------------- */
.fv-gal__slider { display: none; }
@media (max-width: 1023.98px) {
  .fv-gal__wide:has(.fv-gal__slider) > .fv-gal__hero { display: none; }
  .fv-gal__slider { position: relative; display: block; }
  .fv-gal__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--fv-surface-media);
  }
  .fv-gal__track::-webkit-scrollbar { display: none; }
  .fv-gal__slide {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    touch-action: pan-x pan-y;
  }
  .fv-gal__slide img,
  .fv-gal__slide video,
  .fv-gal__slide iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; user-select: none; -webkit-user-drag: none; }
  .fv-gal__count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--fv-walnut);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .fv-gal__track { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------------------
   The sections under the buy area, as closed panels (owner, 2026-09-30).
   Why this one, the overview, size and placement, delivery and assembly,
   specifications and good to know: one quiet stack of rows, each opened only
   when wanted. Reviews and the room photographs below stay open.
   ---------------------------------------------------------------------------- */
.fv-pdpacc { display: block; interpolate-size: allow-keywords; }
.fv-pdpacc__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
}
.fv-pdpacc__sum::-webkit-details-marker { display: none; }
.fv-pdpacc__sum .fv-pdpsec__title { font-size: clamp(17px, 1.4vw, 20px); transition: color 200ms ease; }
.fv-pdpacc__sum:hover .fv-pdpsec__title { color: var(--fv-terracotta); }
.fv-pdpacc__sum:focus-visible { outline: 2px solid var(--fv-walnut); outline-offset: 2px; }
.fv-pdpacc__head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fv-pdpacc__head .fv-pdpsec__sub,
.fv-pdpacc__head .fv-deliv__sub { font-size: 13px; }
.fv-pdpacc[open] .fv-pdpacc__head .fv-pdpsec__sub,
.fv-pdpacc[open] .fv-pdpacc__head .fv-deliv__sub { color: var(--fv-text-secondary); }
.fv-pdpacc__chev { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.fv-pdpacc__chev::before,
.fv-pdpacc__chev::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--fv-walnut);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fv-pdpacc__chev::after { transform: rotate(90deg); }
.fv-pdpacc[open] .fv-pdpacc__chev::after { transform: rotate(0deg); }
.fv-pdpacc__body { display: flex; flex-direction: column; gap: 18px; padding: 2px 0 28px; }
@media (prefers-reduced-motion: no-preference) {
  .fv-pdpacc::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 420ms cubic-bezier(0.22, 1, 0.36, 1), content-visibility 420ms allow-discrete;
  }
  .fv-pdpacc[open]::details-content { block-size: auto; }
}

/* ----------------------------------------------------------------------------
   Under the price (owner direction, 2026-09-30, from reference screenshots):
   a trust strip, the live Offers & EMI row, and — under Buy now — one quiet
   coupon line.
   ---------------------------------------------------------------------------- */
.fv-pdptrust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0 2px;
  padding: 14px 0;
  list-style: none;
  border-top: 1px solid var(--fv-border-subtle);
  border-bottom: 1px solid var(--fv-border-subtle);
}
/* With no Offers & EMI row under it (Razorpay has nothing for this price, so
   the row hides itself) and no app block, the trust row would end in a line
   just above the price box's own: one line, not two (owner, 2026-10-02). */
.fv-buy__pricebox:not(:has(.fv-offers:not([hidden]), .fv-buy__appblock)) .fv-pdptrust {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.fv-pdptrust__item { display: flex; min-width: 0; }
.fv-pdptrust__item + .fv-pdptrust__item { border-left: 1px solid var(--fv-border-subtle); }
.fv-pdptrust__item > :is(a, .fv-icon, span),
.fv-pdptrust__link { color: var(--fv-text-secondary); }
.fv-pdptrust__item,
.fv-pdptrust__link { flex-direction: column; align-items: center; gap: 8px; padding: 2px 6px; text-align: center; }
.fv-pdptrust__link { display: flex; width: 100%; text-decoration: none; }
.fv-pdptrust__link:hover .fv-pdptrust__label { color: var(--fv-text-heading); }
.fv-pdptrust .fv-icon, .fv-pdptrust svg { color: var(--fv-walnut); opacity: 0.85; }
.fv-pdptrust__label {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fv-text-secondary);
  transition: color 200ms ease;
}

.fv-offers { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.fv-offers[hidden] { display: none; }
.fv-offers__heading { font-size: 14px; font-weight: 600; color: var(--fv-text-heading); }
.fv-offers__cards {
  display: flex;
  gap: 10px;
  margin: 0 -2px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.fv-offers__cards::-webkit-scrollbar { display: none; }
.fv-ocard {
  display: flex;
  flex: 0 0 188px;
  flex-direction: column;
  min-height: 112px;
  padding: 0;
  border: 1px solid var(--fv-border-subtle);
  background: var(--fv-white);
  color: var(--fv-text-heading);
  font: inherit;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.fv-ocard:hover { border-color: var(--fv-border-strong); box-shadow: 0 8px 20px -14px rgba(59, 42, 32, 0.35); }
.fv-ocard:focus-visible { outline: 2px solid var(--fv-walnut); outline-offset: 2px; }
.fv-ocard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #F7EFE9;
}
.fv-ocard__title { font-size: 14px; font-weight: 600; }
.fv-ocard__go {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.3px solid currentColor;
  border-radius: 50%;
  opacity: 0.7;
}
.fv-ocard__go::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-top: 1.3px solid currentColor;
  border-right: 1.3px solid currentColor;
  transform: translate(-65%, -50%) rotate(45deg);
}
.fv-ocard__body { padding: 10px 12px 6px; color: var(--fv-text-secondary); font-size: 14px; line-height: 1.35; }
.fv-ocard__body strong { color: var(--fv-text-heading); font-weight: 600; }
.fv-ocard__logos { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 4px 12px 11px; }
.fv-ocard__logos img { width: 22px; height: 22px; object-fit: contain; }
.fv-ocard__more { color: var(--fv-text-secondary); font-size: 13px; font-weight: 600; }
.fv-ocard--skeleton { cursor: default; background: linear-gradient(100deg, #F6F1EA 30%, #FBF8F3 50%, #F6F1EA 70%) 0 0 / 220% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .fv-ocard--skeleton { animation: fv-photo-loading 1.35s ease-in-out infinite; }
  .fv-offers.is-ready .fv-ocard { animation: fvOcardIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .fv-offers.is-ready .fv-ocard:nth-child(2) { animation-delay: 60ms; }
  .fv-offers.is-ready .fv-ocard:nth-child(3) { animation-delay: 120ms; }
}
@keyframes fvOcardIn { from { opacity: 0; transform: translateY(6px); } }

.fv-coupon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 0 0;
  text-align: center;
}
.fv-coupon__kicker { color: var(--fv-text-muted); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; }
.fv-coupon__line { color: var(--fv-text-secondary); font-size: 15px; }
.fv-coupon__code {
  position: relative;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #A8843F;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: copy;
}
.fv-coupon__code::after {
  content: 'Copied';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  padding: 3px 8px;
  background: var(--fv-walnut);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.fv-coupon__code.is-copied::after { opacity: 1; transform: translate(-50%, 0); }

/* The plans, in the dialog. */
.fv-oplans { display: flex; flex-direction: column; gap: 22px; margin-bottom: 8px; }
.fv-oplans[hidden] { display: none; }
.fv-oplans__group { display: flex; flex-direction: column; gap: 10px; }
.fv-oplans__label { color: var(--fv-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fv-oplans__offer { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--fv-border-subtle); font-size: 14px; }
.fv-oplans__offer span { color: var(--fv-text-secondary); font-size: 13px; }
.fv-oplans__banks { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: none; }
.fv-oplans__banks::-webkit-scrollbar { display: none; }
.fv-oplans__bank {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--fv-border-subtle);
  border-radius: 999px;
  background: var(--fv-white);
  color: var(--fv-text-secondary);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.fv-oplans__bank img { width: 18px; height: 18px; object-fit: contain; }
.fv-oplans__bank[aria-selected='true'] { border-color: var(--fv-walnut); color: var(--fv-text-heading); font-weight: 600; }
.fv-oplans__table { display: flex; flex-direction: column; border-top: 1px solid var(--fv-border-subtle); }
.fv-oplans__row { display: grid; grid-template-columns: 0.7fr 1fr 1fr 1fr; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--fv-border-subtle); font-size: 14px; font-variant-numeric: tabular-nums; }
.fv-oplans__row--head { color: var(--fv-text-muted); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.fv-oplans__row .is-free { color: var(--fv-sage-dark, #4F6140); font-weight: 600; }
.fv-oplans__note { margin: 2px 0 0; color: var(--fv-text-muted); font-size: 12.5px; line-height: 1.5; }
.fv-oplans__all { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--fv-text); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fv-oplans__all:hover { color: var(--fv-terracotta); }
@media (max-width: 759.98px) {
  .fv-pdptrust__label { font-size: 9.5px; letter-spacing: 0.08em; }
  .fv-ocard { flex-basis: 172px; }
}

/* One stack, one rule (owner feedback, 2026-09-30: the separators were of
   different widths, some doubled, and the rows felt cramped). Every row —
   the panels and the Assembly & care row — sits in the same 1280px column
   with the same gutter, carries one hairline below it, and the first carries
   one above. Space before the stack, and the reviews after it begin without
   a rule of their own, so the stack is closed by exactly one line. */
.fv-pdprow {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fv-gut);
  border: 0;
  background: none;
}
.fv-pdprow > .fv-pdpsec__inner,
.fv-pdprow > .fv-pdpacc {
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--fv-border-subtle);
}
.fv-pdprow:not(.fv-pdprow + .fv-pdprow) { margin-top: clamp(44px, 4.4vw, 72px); }
.fv-pdprow:not(.fv-pdprow + .fv-pdprow) > * { border-top: 1px solid var(--fv-border-subtle); }
.fv-pdprow--plain .fv-assembly__row { align-items: center; padding: 22px 0; }
.fv-pdprow--plain .fv-pdpsec__title { font-size: clamp(17px, 1.4vw, 20px); }
.fv-pdprow--plain .fv-pdpsec__sub { margin: 3px 0 0; font-size: 13px; }
.fv-pdprow ~ #fv-reviews > #reviews { padding-top: clamp(48px, 5vw, 80px); }
.fv-pdprow ~ #fv-reviews > #reviews > .fv-pdpsec__inner { border-top: 0; padding-top: 0; }
@media (max-width: 759.98px) {
  .fv-pdpacc__sum { padding: 20px 0; }
  .fv-pdprow--plain .fv-assembly__row { gap: 14px; }
}

/* ----------------------------------------------------------------------------
   Material & finish (snippets/furniva-pdp-material.liquid). A sample chip —
   finish face over the board's cut edge — then the facts, each on its own
   ruled line, with panel thicknesses drawn to scale.
   ---------------------------------------------------------------------------- */
.fv-mat {
  margin-top: 22px;
  padding: 22px 22px 18px;
  border: 1px solid var(--fv-border-subtle);
  background: #FFFFFF;
}
.fv-mat__kicker { margin: 0; color: #A8843F; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.fv-mat__title {
  margin: 8px 0 16px;
  font-family: var(--fv-font-heading);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--fv-text-heading);
}
.fv-mat__title::first-letter { text-transform: uppercase; }
.fv-mat__tiles { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px; }
.fv-mat__tile { margin: 0; min-width: 0; }
.fv-mat__pic { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; overflow: hidden; background: #E9E1D4; box-shadow: inset 0 0 0 1px rgba(30, 20, 12, 0.06); }
button.fv-mat__pic { cursor: zoom-in; }
button.fv-mat__pic:focus-visible { outline: 2px solid var(--fv-walnut); outline-offset: 2px; }
.fv-mat__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fv-mat__tile figcaption { margin-top: 8px; color: var(--fv-text-heading); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.fv-mat__tile figcaption span { display: block; margin-bottom: 2px; color: var(--fv-text-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fv-mat__rows { margin: 16px 0 0; }
.fv-mat__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--fv-border-subtle);
}
.fv-mat__row dt {
  padding-top: 3px;
  color: var(--fv-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.fv-mat__row dd { margin: 0; color: var(--fv-text-secondary); font-size: 13px; line-height: 1.55; }
.fv-mat__row dd strong { display: block; color: var(--fv-text-heading); font-size: 14.5px; font-weight: 600; }
.fv-mat__row dd strong + span { display: block; margin-top: 2px; }
.fv-mat__row dd strong em { margin-left: 8px; color: var(--fv-text-muted); font-size: 11.5px; font-style: normal; font-weight: 500; letter-spacing: 0.02em; }
.fv-mat__grade {
  display: inline-block !important;
  margin-bottom: 4px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  letter-spacing: 0.06em;
}
.fv-mat__gauge { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.fv-mat__gauge li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 50px; align-items: center; gap: 12px; }
.fv-mat__part { color: var(--fv-text-heading); font-size: 13.5px; }
/* To scale: 1.25px a millimetre, the finish on both faces. */
.fv-mat__edge {
  height: calc(var(--mm) * 1.25px);
  border-top: 2px solid var(--face, #7A5E48);
  border-bottom: 2px solid var(--face, #7A5E48);
  background-color: #D6BE95;
  background-size: 110px;
  background-position: center;
  box-shadow: 0 1px 2px rgba(30, 20, 12, 0.18);
}
.fv-mat__mm { color: var(--fv-text-heading); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fv-mat__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--fv-border-subtle); color: var(--fv-text-muted); font-size: 11.5px; line-height: 1.55; }
@media (max-width: 759.98px) {
  .fv-mat { padding: 18px 16px 14px; }
  .fv-mat__tiles { gap: 10px; }
  .fv-mat__row { grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
  .fv-mat__gauge li { grid-template-columns: minmax(0, 1fr) 52px 46px; gap: 10px; }
}

/* Inside a panel the last question closes on the panel's own rule, not on
   a second one of its own just above it. */
.fv-pdpacc .fv-acc__item:last-child { border-bottom: 0; }

/* Laptop gallery: the grid under the hero is the rest of the photographs,
   so the main shot's own tile is not repeated there, and a tile or the hero
   opens the viewer. */
@media (min-width: 1024px) {
  .fv-gal__grid > [data-fv-hero-thumb] { display: none; }
  .fv-gal__hero[data-fv-zoom-open] { cursor: zoom-in; }
  .fv-gal__tile[data-fv-zoom-open] { cursor: zoom-in; }
}

/* Phone gallery: a double tap zooms into the spot tapped; one finger then
   moves around the enlarged photograph, and a second double tap lets go. The
   browser's own double-tap page zoom is switched off on the track so it
   cannot fight it. */
@media (max-width: 1023.98px) {
  .fv-gal__track { touch-action: pan-x pan-y pinch-zoom; }
  .fv-gal__slide img { transform-origin: 0 0; will-change: transform; }
  .fv-gal__slide.is-zoomed { touch-action: none; }
  .fv-gal__track:has(.is-zoomed) ~ .fv-gal__count { opacity: 0; }
}

/* Compact reviews (owner, 2026-10-10): smaller cards and photos, three shown
   until "Show all", long text cut to three lines until "Read more". */
.fv-reviews__list { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fv-reviews__list:not(.is-open) > .fv-review:nth-child(n + 4) { display: none; }
.fv-review { padding: 14px 16px; gap: 6px; }
.fv-review__body { font-size: var(--fv-size-body-sm); }
.fv-review__body--clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fv-review__photo { width: 56px; height: 56px; }
.fv-review__photos { gap: 6px; }
.fv-review__more, .fv-reviews__all {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fv-size-body-sm); font-weight: var(--fv-weight-semibold);
  color: var(--fv-terracotta); text-decoration: underline; text-underline-offset: 3px;
}
.fv-reviews__all { margin-top: 14px; }