/* ==========================================================================
   5-Piece Canvas Wall Art — dedicated page, built from the MagicPath design
   "5-Piece Canvas — Luxury Product Page (Desktop + Mobile)".

   This is the FOUNDATION layer: tokens, resets, shared typography and the
   defences against the site's global stylesheets. Section styles build on it.

   Root class: .fpc-page  — every rule in this file and in the section files is
   scoped under it, so nothing here can affect another page.

   ---------------------------------------------------------------------------
   WHY THE DEFENCES BELOW EXIST (all verified against the live cascade)

     single-product-detail.css   h1..h6,p,span,label,a { font-family: inherit !important }
         -> the single reason the old page rendered uniformly in one typeface.
            Any font-family set on a heading here must match that !important.

     style.css:1620              button { width:100px; height:40px;
                                          background:#0872ba; color:#fff }
         -> blue 100x40 buttons unless neutralised.

     style.css                   legacy h2 { width:15% ... 58rem } family
         -> headings get an explicit width unless reset.

     mobile.css:4205/4211/4246   .container { width:1200px !important }
         -> applies on PHONES. Bootstrap's .container is never used here;
            .fpc-shell is the container.

     mobile.css:411              removes focus outlines
         -> :focus-visible below is deliberately NOT in :where().

   Resets are wrapped in :where() so they contribute zero specificity and can
   never outrank the component classes that follow. Writing them the obvious
   way (`.fpc-page button`) makes them 0,1,1 and they silently beat their own
   components at 0,1,0.
   ---------------------------------------------------------------------------

   TYPE SCALE
   The design's body copy sits at 7-13px, which is a canvas-preview artefact.
   Display sizes (h1/h2) are kept exactly as designed; body steps are re-based
   onto a readable ramp with an 11px floor. One multiplier retunes everything:

       .fpc-page { --fpc-scale: 1 }

       design 7-8px   -> --fpc-fs-micro  (letter-spaced uppercase only)
       design 9-10px  -> --fpc-fs-xs
       design 11px    -> --fpc-fs-sm
       design 12px    -> --fpc-fs-md
       design 13px    -> --fpc-fs-lg     (the grouped section paragraph)
   ========================================================================== */

.fpc-page {
    /* ---- the one knob ---- */
    --fpc-scale: 1;

    --fpc-fs-micro: calc(11px * var(--fpc-scale));
    --fpc-fs-xs:    calc(12px * var(--fpc-scale));
    --fpc-fs-sm:    calc(13px * var(--fpc-scale));
    --fpc-fs-md:    calc(14px * var(--fpc-scale));
    --fpc-fs-lg:    calc(15px * var(--fpc-scale));

    /* ---- the design's six custom properties ---- */
    --fpc-ink:       #211f1a;
    --fpc-muted:     #776f63;
    --fpc-paper:     #faf8f3;
    --fpc-line:      #e3dbce;
    --fpc-gold:      #b68d4d;
    --fpc-gold-dark: #8f692f;

    /* ---- consolidated from the design's ~500 one-off hexes ----
       The design differentiates tints by 1-2 points in places; these are the
       distinct roles that actually read differently. */
    --fpc-paper-2:   #fffdf8;   /* raised card surface */
    --fpc-paper-3:   #fbf8f1;   /* alternate section band */
    --fpc-sand:      #f4ecdf;   /* inset / help strip */
    --fpc-sand-2:    #e9e0d1;   /* delivery band */
    --fpc-dark:      #2b2721;   /* dark sections (video, trade) */
    --fpc-dark-ink:  #f4e4c4;   /* text on dark */
    --fpc-body:      #7a7165;   /* grouped section paragraph colour */
    --fpc-kicker:    #94703a;
    --fpc-line-2:    #eee6d9;   /* inner hairline */
    --fpc-line-3:    #d9cbb5;   /* stronger rule */

    --fpc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --fpc-sans:  "DM Sans", Arial, Helvetica, sans-serif;

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* overflow-x only: the design's `overflow:hidden` on the root would clip
       sticky/fixed descendants in some browsers. */
    overflow-x: clip;
    background: var(--fpc-paper);
    color: var(--fpc-ink);
    font-family: var(--fpc-sans);
    font-size: var(--fpc-fs-lg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ========================= base resets (zero specificity) ================= */

.fpc-page :where(*),
.fpc-page :where(*)::before,
.fpc-page :where(*)::after { box-sizing: border-box; }

.fpc-page :where(main, section, article, aside, form, div, header, footer) { min-width: 0; }

.fpc-page :where(button, input, select, textarea) { font: inherit; }
.fpc-page :where(button) {
    width: auto; height: auto; min-height: 0; margin: 0;
    padding: 0; background: transparent; color: inherit;
    border: 0; border-radius: 0; white-space: normal; overflow: visible;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.fpc-page :where(input, textarea, select) { max-width: 100%; min-width: 0; }

.fpc-page :where(a) { color: inherit; text-decoration: none; }
.fpc-page :where(a, button) { -webkit-tap-highlight-color: transparent; }

.fpc-page :where(img, video, canvas, svg) { max-width: 100%; }
.fpc-page :where(img) { display: block; height: auto; }

.fpc-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.fpc-page :where(p) { margin: 0; }
.fpc-page :where(figure) { margin: 0; }

/* The design uses overflow-wrap:anywhere, which breaks long words mid-glyph.
   break-word gives the same protection without mangling ordinary text. */
.fpc-page :where(p, h1, h2, h3, h4, small, span, b, strong, li, td, th) {
    overflow-wrap: break-word;
}

.fpc-page :where(h1, h2, h3, h4, h5, h6) {
    width: auto;            /* defeats the legacy h2{width:15%} family */
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 500;
    text-transform: none;
}

/* Headings carry the design serif. !important is required solely to match
   single-product-detail.css's `font-family:inherit!important`. */
.fpc-page :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--fpc-serif) !important;
}

.fpc-page :where([id]) { scroll-margin-top: 18px; }

/* deliberately NOT in :where() — must outrank mobile.css's outline reset */
.fpc-page :focus-visible {
    outline: 3px solid #bd9657;
    outline-offset: 3px;
}

.fpc-visually-hidden {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ============================ layout shell =============================== */
/* Never Bootstrap's .container — mobile.css forces it to 1200px on phones. */

.fpc-shell {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
}

/* standard section padding, matching the design's clamp */
.fpc-section {
    padding: 78px clamp(20px, 7.5vw, 116px);
}

.fpc-section--band  { background: var(--fpc-paper-3); border-block: 1px solid var(--fpc-line); }
.fpc-section--card  { background: var(--fpc-paper-2); }
.fpc-section--dark  { background: var(--fpc-dark); color: var(--fpc-dark-ink); }

/* ========================== shared typography ============================ */

.fpc-kicker {
    display: block;
    color: var(--fpc-kicker);
    font-family: var(--fpc-sans);
    font-size: var(--fpc-fs-micro);
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.fpc-section--dark .fpc-kicker { color: #d0b27c; }

/* hero only — the design's largest display scale */
.fpc-h1 {
    margin: 16px 0;
    font-size: clamp(40px, 4.2vw, 63px);
    line-height: 1.05;
    letter-spacing: -1.7px;
}

/* large section headings */
.fpc-h2--lg {
    margin: 10px 0;
    font-size: clamp(34px, 3.4vw, 49px);
    line-height: 1.06;
    letter-spacing: -1.7px;
}

/* standard section headings (the design's 15-selector group) */
.fpc-h2 {
    margin: 11px 0;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.08;
    letter-spacing: -1px;
}

.fpc-h3 {
    font-size: clamp(20px, 1.65vw, 25px);
    line-height: 1.16;
}

.fpc-h1 em, .fpc-h2 em, .fpc-h2--lg em, .fpc-h3 em {
    font-style: italic;
    color: #a47d41;
}

.fpc-section--dark .fpc-h1 em,
.fpc-section--dark .fpc-h2 em,
.fpc-section--dark .fpc-h2--lg em { color: #d9bd8a; }

/* the design's grouped section paragraph — final effective value 13px/1.75 */
.fpc-lede {
    color: var(--fpc-body);
    font-family: var(--fpc-sans);
    font-size: var(--fpc-fs-lg);
    line-height: 1.75;
}

.fpc-section--dark .fpc-lede { color: #c9bfae; }

/* ============================== buttons ================================== */

.fpc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    font-family: var(--fpc-sans);
    font-size: var(--fpc-fs-sm);
    font-weight: 700;
    text-align: left;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.fpc-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.fpc-btn--primary {
    background: var(--fpc-gold);
    border-color: #a98549;
    color: #fff;
}
.fpc-btn--primary:hover,
.fpc-btn--primary:focus-visible {
    background: var(--fpc-gold-dark);
    border-color: var(--fpc-gold-dark);
    color: #fff;
}

.fpc-btn--secondary {
    background: #fbf7ef;
    border-color: #cfc0a7;
    color: #74572b;
}
.fpc-btn--secondary:hover,
.fpc-btn--secondary:focus-visible { background: #efe3ce; border-color: #b89a67; }

.fpc-section--dark .fpc-btn--secondary {
    background: #3d3a2f;
    border-color: #8d7a57;
    color: var(--fpc-dark-ink);
}

.fpc-btn--block { width: 100%; }

.fpc-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #85632e;
    font-size: var(--fpc-fs-sm);
    font-weight: 700;
}
.fpc-textlink svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ============================= responsive ================================ */

@media (max-width: 1200px) {
    .fpc-section { padding-left: clamp(22px, 4vw, 48px); padding-right: clamp(22px, 4vw, 48px); }
}

@media (max-width: 991px) {
    .fpc-section { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 767px) {
    .fpc-section { padding: 48px 20px; }
    .fpc-h1     { font-size: clamp(33px, 8.9vw, 44px); letter-spacing: -.9px; }
    .fpc-h2--lg { font-size: clamp(30px, 7vw, 38px); letter-spacing: -.8px; line-height: 1.12; }
    .fpc-h2     { font-size: clamp(28px, 6.6vw, 35px); letter-spacing: -.7px; line-height: 1.12; }
    .fpc-btn    { width: 100%; }
}

@media (max-width: 400px) {
    .fpc-section { padding-left: 15px; padding-right: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .fpc-page *,
    .fpc-page *::before,
    .fpc-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   §5 — HERO
   ========================================================================== */

.fpc-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(35px, 6.5vw, 95px);
    padding: 34px clamp(20px, 7.5vw, 116px) 65px;
    background:
        radial-gradient(ellipse at 77% 10%, #efe4d0 0, transparent 42%),
        linear-gradient(120deg, #fbf9f4, #f2ede4);
}

.fpc-hero__copy { max-width: 720px; min-width: 0; }

.fpc-hero__lede {
    max-width: 465px;
    color: #736b60;
    font-size: var(--fpc-fs-lg);
    line-height: 1.85;
}

/* ---- price ---- */
.fpc-hero__price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.fpc-hero__price small  { color: #756c60; font-size: var(--fpc-fs-xs); }
.fpc-hero__price strong { font-family: var(--fpc-serif); font-weight: 600; font-size: 28px; line-height: 1; }
.fpc-hero__price del    { color: #a09689; font-size: var(--fpc-fs-lg); }
.fpc-hero__price > b    { padding: 4px 7px; background: #e9ddc7; color: #7c5e2d; font-size: var(--fpc-fs-micro); font-weight: 700; }

.fpc-hero__price-note {
    display: block;
    margin-top: 5px;
    color: #908575;
    font-size: var(--fpc-fs-xs);
}

/* ---- actions ---- */
.fpc-hero__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.fpc-hero__jump {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #6a5a43;
    font-size: var(--fpc-fs-sm);
    font-weight: 700;
}

/* ---- social proof ---- */
.fpc-hero__proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #dfd6c8;
}
.fpc-hero__avatars { display: flex; padding-left: 4px; }
.fpc-hero__avatars i {
    display: grid;
    place-items: center;
    width: 25px; height: 25px;
    margin-left: -4px;
    border: 2px solid #f5ede0;
    border-radius: 50%;
    background: #847967;
    color: #fff;
    font-size: var(--fpc-fs-micro);
    font-style: normal;
    font-weight: 600;
}
.fpc-hero__avatars i:nth-child(2) { background: #a17d60; }
.fpc-hero__avatars i:nth-child(3) { background: #5f6a59; }
.fpc-hero__avatars i:nth-child(4) { background: #dec9a6; color: #74592e; }

.fpc-hero__proof > span { display: grid; gap: 2px; min-width: 0; }
.fpc-hero__proof b     { font-size: var(--fpc-fs-sm); font-weight: 600; }
.fpc-hero__proof small { color: #8f8576; font-size: var(--fpc-fs-xs); }

/* ---- room visual ---- */
.fpc-hero__visual { min-width: 0; }

.fpc-hero__room {
    position: relative;
    aspect-ratio: 1.08 / 1;
    min-height: 375px;
    overflow: hidden;
    background: linear-gradient(90deg, #d6c5af, #efe3d1 23%, #f1e5d5 61%, #d5c3ad);
    box-shadow: 0 20px 46px #3d301d13;
}

/* double-scoped so it beats any ancestor `img{height:auto;object-fit:contain}` */
.fpc-hero .fpc-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* fallback when no product photo resolves — the design's own panel mock */
.fpc-hero__mock {
    position: absolute;
    inset: 14% 16% auto 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.3%;
    height: 49%;
    padding: 1%;
    background: #b39b78;
    box-shadow: 0 10px 23px #35291a30;
    transform: rotate(-1.2deg);
}
.fpc-hero__mock i {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 1px solid #c5b292;
    background: linear-gradient(150deg, #b09b7b, #e7dbc7 45%, #8d9480);
}

.fpc-hero__caption {
    position: absolute;
    z-index: 5;
    left: 4%;
    bottom: 5%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    background: #fcfaf3ed;
    box-shadow: 0 4px 15px #3a2c1b18;
}
.fpc-hero__caption > span {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    background: #eee2cc;
    color: #94703a;
}
.fpc-hero__caption > b {
    font-family: var(--fpc-serif);
    font-weight: 500;
    font-size: var(--fpc-fs-sm);
    line-height: 1.3;
}
.fpc-hero__caption small {
    display: block;
    margin-top: 2px;
    color: #877d6e;
    font-family: var(--fpc-sans);
    font-size: var(--fpc-fs-micro);
    font-weight: 400;
}

.fpc-hero__stamp {
    position: absolute;
    z-index: 6;
    right: 5%;
    top: 6%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 9px;
    border: 1px solid #c5a873;
    background: #fbf6e8e8;
    color: #87652e;
    transform: rotate(7deg);
}
.fpc-hero__stamp strong { font-family: var(--fpc-serif); font-weight: 500; font-size: 24px; line-height: 1; }
.fpc-hero__stamp small  { font-size: var(--fpc-fs-micro); letter-spacing: .7px; line-height: 1.25; font-weight: 800; }

.fpc-hero__captionline {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    color: #8d8170;
    font-size: var(--fpc-fs-micro);
    letter-spacing: .07em;
}
.fpc-hero__captionline span:last-child { letter-spacing: 0; }

/* ==========================================================================
   §6 — TRUST STRIP
   ========================================================================== */

.fpc-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 22px clamp(20px, 7.5vw, 116px);
    background: #fdfcf9;
    border-top: 1px solid #e8e1d5;
    border-bottom: 1px solid #e8e1d5;
}

.fpc-trust__cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 16px;
    border-right: 1px solid #e5ded2;
}
.fpc-trust__cell:first-child { padding-left: 0; }
.fpc-trust__cell:last-child  { border-right: 0; }

.fpc-trust__cell svg   { width: 16px; height: 16px; flex-shrink: 0; color: #9f7a42; }
.fpc-trust__cell span  { display: grid; gap: 2px; min-width: 0; }
.fpc-trust__cell b     { font-family: var(--fpc-serif); font-weight: 500; font-size: var(--fpc-fs-md); }
.fpc-trust__cell small { color: #887d6e; font-size: var(--fpc-fs-micro); }

/* ========================== hero + trust responsive ====================== */

@media (max-width: 1024px) {
    .fpc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
    .fpc-hero__room { min-height: 330px; }
}

@media (max-width: 991px) {
    .fpc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 20px 24px; }
    .fpc-trust__cell { padding-left: 0; border-right: 0; }
}

@media (max-width: 767px) {
    .fpc-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 30px 20px 48px;
    }
    .fpc-hero__lede { max-width: 100%; }
    .fpc-hero__room { min-height: 0; aspect-ratio: 1.12 / 1; }
    .fpc-hero__price strong { font-size: 26px; }
    .fpc-hero__actions { gap: 12px; }
    .fpc-hero__jump { width: 100%; justify-content: center; }
    .fpc-hero__captionline { flex-direction: column; gap: 4px; }
}

@media (max-width: 400px) {
    .fpc-hero { padding-left: 15px; padding-right: 15px; }
    .fpc-trust { padding-left: 15px; padding-right: 15px; }
    .fpc-hero__stamp { padding: 8px 7px; }
    .fpc-hero__stamp strong { font-size: 20px; }
}

/* ==========================================================================
   The configurator partial carries two sections the new design replaces:
   the old lifestyle hero (#fp-hero) and the old "Why Five Panels?" block
   (#fp-why-five). Both are hidden rather than removed, so every engine hook
   inside them still exists in the DOM — verified #fp-hero holds 0 of the
   engine's 14 required hooks and only 2 optional price-display nodes.
   Scoped to .fpc-page, so the old page is completely unaffected.
   ========================================================================== */
.fpc-page #fp-hero,
.fpc-page #fp-why-five { display: none !important; }

/* ==========================================================================
   Popular uses + pSEO link cluster (no design equivalent — carried over from
   the old SEO partial so its seven internal landing-page links are not lost)
   ========================================================================== */

.fpc-uses { background: var(--fpc-paper-2); border-top: 1px solid var(--fpc-line); }

.fpc-uses__head { max-width: 680px; }

.fpc-uses__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.fpc-uses__card {
    min-width: 0;
    padding: 20px;
    background: var(--fpc-paper);
    border: 1px solid var(--fpc-line);
}

.fpc-uses__icon { display: block; font-size: 24px; line-height: 1; margin-bottom: 12px; }

.fpc-uses__card h3 { margin-bottom: 8px; color: var(--fpc-ink); }

.fpc-uses__card p {
    color: var(--fpc-body);
    font-size: var(--fpc-fs-md);
    line-height: 1.7;
}

.fpc-uses__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--fpc-line);
}

.fpc-uses__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    background: var(--fpc-sand);
    border: 1px solid var(--fpc-line);
    color: #7c5e2d;
    font-size: var(--fpc-fs-sm);
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease;
}
.fpc-uses__links a:hover,
.fpc-uses__links a:focus-visible { background: #ecdfc9; border-color: #c9b48f; }

.fpc-uses__guide {
    max-width: 640px;
    margin-top: 20px;
    color: var(--fpc-body);
    font-size: var(--fpc-fs-md);
    line-height: 1.7;
}
.fpc-uses__guide a { color: var(--fpc-gold-dark); font-weight: 700; text-decoration: underline; }

@media (max-width: 991px) {
    .fpc-uses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .fpc-uses__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .fpc-uses__card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .fpc-uses__links a { transition: none; }
}

/* ==========================================================================
   SHOW PHOTOGRAPHS IN FULL — added 22 Oct

   The section stylesheets give every photo `object-fit: cover` inside a box
   with a fixed aspect-ratio. That is the right treatment for a plain lifestyle
   photograph, which can lose its edges harmlessly.

   It is the wrong treatment for the assets actually in use. The hero asset is
   a composed marketing banner with text baked into the pixels — "400 GSM
   COTTON CANVAS", the price, the discount flag — and `cover` was slicing the
   left edge off mid-word.

   So the policy here is: never crop a photograph. Two parts.

   1. Every photo switches to `object-fit: contain`, so the whole image is
      always visible. Where the container keeps a fixed box the image is
      letterboxed inside it against the section's own background, which is
      warm and intentional rather than a grey gap.

   2. The hero goes further and drops the fixed box entirely, so the banner
      renders at its own proportions with no letterbox at all.

   `!important` is deliberate: the rules being overridden run from (0,2,0) to
   (0,3,0) across five stylesheets and several are double-scoped on purpose.
   Matching each one individually would be fragile; this is a single policy.

   TO GO BACK TO CROPPED PHOTOS, delete this block. Nothing else depends on it.
   ========================================================================== */

.fpc-page :is(
    .fpc-hero__photo,
    .fpc-why__photo,
    .fpc-insp__photo,
    .fpc-craft__photo,
    .fpc-spaces__photo,
    .fpc-production__photo,
    .fpc-texture__photo,
    .fpc-video__photo,
    .fpc-scale__photo,
    .fpc-ba__photo,
    .fpc-panel__photo
) {
    object-fit: contain !important;
    object-position: center !important;
}

/* ---- the hero banner: no box, no letterbox, natural proportions ----
   :has() is only used to relax the box when a real photo resolved. When
   FivePieceLuxuryAssets::slot() returns null the partial renders the design's
   CSS panel artwork instead, and that still needs its aspect-ratio box — so
   the fallback is untouched. A browser without :has() support simply keeps
   the current box, and the rule above still prevents any cropping. */

.fpc-page .fpc-hero__room:has(.fpc-hero__photo) {
    aspect-ratio: auto;
    min-height: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.fpc-page .fpc-hero__room:has(.fpc-hero__photo) .fpc-hero__photo {
    position: static;
    width: 100%;
    height: auto;
    display: block;
}