/* ==========================================================================
   Five-Piece Canvas — format cross-sell ("One photograph. Three distinctive looks.")
   Ported from MagicPath "5-Piece Canvas — Luxury Product Page", Section 21.

   Every rule is scoped under `.fp-format`. There are no bare element selectors
   and no global rules, so this file cannot affect any other page or section.

   TYPE SCALE — the one knob worth knowing about
   ---------------------------------------------
   The MagicPath design's body type bottoms out at 7-8px (82 rules at 8px, 52 at
   7px across the full export). That is a canvas-preview artefact: shipped
   literally it is unreadable on a phone and contradicts the project's own
   readability requirements. The hierarchy below is the design's, re-based onto a
   readable 5-step ramp with an 11px floor, driven by a single multiplier.

     design 7px, 8px  -> --fpf-fs-micro (letter-spaced uppercase only)
     design 9px, 10px -> --fpf-fs-xs
     design 11px      -> --fpf-fs-sm
     design 12px      -> --fpf-fs-md
     design 13px      -> --fpf-fs-lg

   Change --fpf-scale alone to tighten or loosen the whole section.
   Display sizes (h2/h3/side-note numeral) keep the design's own clamp() values.
   ========================================================================== */

/* The class is doubled (specificity 0,2,0) throughout this file wherever a
   declaration would otherwise lose to `.fp-experience section` (0,1,1), which
   sets `padding:44px 0` and would strip this section's horizontal gutters.
   This section renders inside `.fp-experience`, so that rule applies to it. */
.fp-format.fp-format {
    /* dial the whole ramp from here */
    --fpf-scale: 1;

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

    --fpf-ink:        #211f1a;
    --fpf-ink-soft:   #30291f;
    --fpf-body:       #746b5f;
    --fpf-body-alt:   #746b5e;
    --fpf-li:         #615748;
    --fpf-paper:      #fbf8f1;
    --fpf-card:       #fffdf8;
    --fpf-line:       #e8dfd1;
    --fpf-card-line:  #e2d8c9;
    --fpf-rule:       #eee6d9;
    --fpf-gold:       #b68d4d;
    --fpf-gold-dark:  #967137;
    --fpf-gold-text:  #74572b;
    --fpf-gold-soft:  #9a7641;

    box-sizing: border-box;
    padding: 78px clamp(20px, 7.5vw, 116px);
    background: var(--fpf-paper);
    border-top: 1px solid var(--fpf-line);
    border-bottom: 1px solid var(--fpf-line);
    color: var(--fpf-ink);
    font-family: "DM Sans", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- defences against the global stylesheets -------------------------------
   Verified by inspecting the live cascade on /5-piece-canvas-wall-art:

   1. style.css           `button{background:#0872ba;color:#fff;width:100px;height:40px}`
   2. single-product-detail.css
                          `h1,h2,...,a{font-family:inherit!important}`
                          -> this is why the whole page renders in Inter, and the
                             only way to set a different family inside this
                             section is to match its !important. Scoped to
                             `.fp-format`, so nothing outside is affected.
   3. (inline, five-piece-experience)
                          `.fp-experience img{width:100%;height:auto;display:block;
                           object-fit:contain;object-position:center}`
                          -> 0,1,1 and this section renders INSIDE .fp-experience,
                             so single-class rules here lose. Image rules below are
                             therefore double-scoped to 0,2,0.
   4. mobile.css          `.container{width:1200px!important}` applies on phones
                          -> never use Bootstrap `.container` in this section.

   Resets are wrapped in :where() so they contribute no specificity and can
   never outrank the component classes that follow (the mistake that made the
   primary CTA inherit the reset instead of its own styling).
--------------------------------------------------------------------------- */
.fp-format,
.fp-format :where(*),
.fp-format :where(*)::before,
.fp-format :where(*)::after { box-sizing: border-box; }

.fp-format :where(*) { min-width: 0; }

.fp-format :where(h2, h3) {
    width: auto;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
    overflow-wrap: break-word;
    font-weight: 500;
    text-transform: none;
}

/* !important is required here solely to match single-product-detail.css's
   `font-family:inherit!important` on all headings. See note 2 above. */
.fp-format :where(h2, h3) {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
}

.fp-format :where(button) {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    border: 0;
    border-radius: 0;
    white-space: normal;
    overflow: visible;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.fp-format :where(a) { color: inherit; text-decoration: none; }

.fp-format :where(img) {
    display: block;
    max-width: 100%;
}

.fp-format :where(ul) { margin: 0; padding: 0; list-style: none; }
.fp-format :where(p)  { margin: 0; }

/* deliberately NOT in :where() — this has to outrank mobile.css's outline reset */
.fp-format :focus-visible {
    outline: 3px solid #bd9657;
    outline-offset: 3px;
}

/* own container — deliberately not Bootstrap's .container */
.fp-format__inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* --- heading --------------------------------------------------------------- */
.fp-format__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.fp-format__kicker {
    display: block;
    color: #94703a;
    font-size: var(--fpf-fs-micro);
    letter-spacing: 1.6px;
    font-weight: 800;
    text-transform: uppercase;
}

.fp-format__heading h2 {
    max-width: 780px;
    margin: 12px 0;
    font-size: clamp(33px, 3.5vw, 49px);
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.fp-format__heading h2 em {
    font-style: italic;
    color: #a47d41;
}

.fp-format__heading p {
    max-width: 640px;
    color: var(--fpf-body);
    font-size: var(--fpf-fs-lg);
    line-height: 1.8;
}

.fp-format__side-note {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    padding: 12px 0 5px 17px;
    border-left: 1px solid #d9cbb5;
    color: #9f7b43;
}

.fp-format__side-note b {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1;
}

.fp-format__side-note small {
    max-width: 110px;
    color: #837867;
    font-size: var(--fpf-fs-xs);
    line-height: 1.55;
}

/* --- cards ---------------------------------------------------------------- */
.fp-format__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 32px;
    align-items: stretch;
}

.fp-format__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fpf-card-line);
    background: var(--fpf-card);
    box-shadow: 0 8px 24px #37281706;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.fp-format__card:hover {
    transform: translateY(-4px);
    border-color: #c5a875;
    box-shadow: 0 18px 38px #37281712;
}

.fp-format__card--featured {
    border-color: #c1a06c;
    box-shadow: 0 10px 28px #94713e12;
}

.fp-format__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 216px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 50% 32%, #f6ecdb 0, #e9ddca 65%, #d8c6ae 100%);
}

.fp-format__visual--five    { background: radial-gradient(ellipse at 50% 24%, #f7eddc 0, #e9ddc9 59%, #d2bea2 100%); }
.fp-format__visual--single  { background: linear-gradient(135deg, #e7ded1 0%, #f8f0e2 50%, #d9c6ad 100%); }
.fp-format__visual--floater { background: radial-gradient(ellipse at 50% 30%, #ede2d1 0, #d8c7b1 70%, #c7b195 100%); }

/* Real product photograph fills the visual (the design mocked this in CSS from
   a stock image; the brief prefers genuine product imagery).
   Double-scoped to 0,2,0 so it beats `.fp-experience img` (0,1,1), which sets
   height:auto and object-fit:contain and would otherwise letterbox the photo. */
.fp-format .fp-format__photo {
    width: 100%;
    height: 100%;
    min-height: 216px;
    object-fit: cover;
    object-position: center;
}

/* hairline on the gradient backdrop — only visible behind the CSS mocks below */
.fp-format__visual::after {
    content: '';
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: 18%;
    height: 1px;
    background: #bca98d80;
}

/* explicit class rather than :has(), for older Android webviews */
.fp-format__visual--photo::after { display: none; }

/* --- fallback visuals, used only when no product photo resolves -----------
   These reproduce the design's own CSS-composed artwork. A neutral canvas
   gradient stands in for the photograph, so nothing is ever hot-linked and
   nothing renders broken. ------------------------------------------------- */
.fp-format__mock {
    position: relative;
    z-index: 1;
}

.fp-format__mock--five {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3%;
    width: 79%;
    height: 122px;
    filter: drop-shadow(0 11px 9px #382a1b26);
}

.fp-format__mock--five i {
    display: block;
    flex: 1;
    min-width: 0;
    height: 86%;
    border: 4px solid #f9f3e8;
    background: linear-gradient(150deg, #b09b7b, #e7dbc7 45%, #8d9480);
    box-shadow: 0 2px 4px #39281722;
}

.fp-format__mock--five i:nth-child(2),
.fp-format__mock--five i:nth-child(4) { height: 100%; }

.fp-format__mock--single {
    width: 62%;
    height: 120px;
    border: 7px solid #f7f1e7;
    background: linear-gradient(140deg, #b4a083, #ece0cc 48%, #90977f);
    box-shadow: 0 11px 17px #39281735;
    transform: rotate(-1deg);
}

.fp-format__mock--floater {
    width: 60%;
    height: 126px;
    padding: 10px;
    background: linear-gradient(135deg, #302a24, #5b4b39 48%, #292520);
    box-shadow: 0 13px 20px #3928173c;
    transform: rotate(-1deg);
}

.fp-format__mock--floater span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, #b4a083, #ece0cc 48%, #90977f);
    border: 1px solid #aa916b;
    box-shadow: inset 0 0 0 4px #4c3f31;
}

.fp-format__visual-label {
    position: absolute;
    z-index: 3;
    left: 13px;
    bottom: 12px;
    padding: 6px 8px;
    background: #fffcf2e8;
    color: #80653a;
    font-size: var(--fpf-fs-micro);
    letter-spacing: 1.05px;
    font-weight: 700;
}

.fp-format__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 21px 21px 20px;
}

.fp-format__eyebrow {
    display: block;
    color: var(--fpf-gold-soft);
    font-size: var(--fpf-fs-micro);
    letter-spacing: 1.25px;
    font-weight: 700;
    text-transform: uppercase;
}

.fp-format__copy h3 {
    margin: 8px 0 9px;
    font-size: clamp(20px, 1.65vw, 25px);
    line-height: 1.16;
    color: var(--fpf-ink-soft);
}

.fp-format__copy > p {
    min-height: 76px;
    color: var(--fpf-body-alt);
    font-size: var(--fpf-fs-md);
    line-height: 1.8;
}

.fp-format__copy ul {
    display: grid;
    gap: 8px;
    padding: 15px 0 16px;
    margin: 14px 0 18px;
    border-top: 1px solid var(--fpf-rule);
    border-bottom: 1px solid var(--fpf-rule);
}

.fp-format__copy li {
    position: relative;
    padding-left: 18px;
    color: var(--fpf-li);
    font-size: var(--fpf-fs-sm);
    line-height: 1.55;
}

.fp-format__copy li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #8d703e;
    font-size: var(--fpf-fs-md);
    font-weight: 700;
}

.fp-format__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin-top: auto;
    padding: 0 13px;
    border: 1px solid #cfc0a7;
    background: #fbf7ef;
    color: var(--fpf-gold-text);
    font-size: var(--fpf-fs-sm);
    font-weight: 700;
    text-align: left;
    transition: background .2s ease, border-color .2s ease;
}

.fp-format__cta svg { width: 14px; height: 14px; flex-shrink: 0; }

.fp-format__cta:hover,
.fp-format__cta:focus-visible {
    background: #efe3ce;
    border-color: #b89a67;
}

.fp-format__cta--primary {
    border-color: #a98549;
    background: var(--fpf-gold);
    color: #fff;
}

.fp-format__cta--primary:hover,
.fp-format__cta--primary:focus-visible {
    background: var(--fpf-gold-dark);
    border-color: var(--fpf-gold-dark);
    color: #fff;
}

/* --- help strip ----------------------------------------------------------- */
.fp-format__help {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 15px 17px;
    border: 1px solid #e4d8c5;
    background: #f4ecdf;
}

.fp-format__help > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: #e9dcc4;
    color: #96723c;
}

.fp-format__help p {
    color: #796e5e;
    font-size: var(--fpf-fs-sm);
    line-height: 1.75;
}

.fp-format__help p b { color: #4e4435; }

.fp-format__help > a {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: #85632e;
    font-size: var(--fpf-fs-xs);
    font-weight: 700;
}

.fp-format__help > a svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ==========================================================================
   Responsive — mirrors the design's own breakpoint transitions
   ========================================================================== */

@media (max-width: 1200px) {
    .fp-format.fp-format { padding-left: clamp(22px, 4vw, 48px); padding-right: clamp(22px, 4vw, 48px); }
    .fp-format__grid { gap: 14px; }
    .fp-format__copy { padding-left: 17px; padding-right: 17px; }
}

@media (max-width: 1024px) {
    .fp-format__grid { gap: 10px; }
    .fp-format__copy { padding: 15px 12px; }
    .fp-format__copy h3 { font-size: 20px; }
    .fp-format__copy > p { min-height: 92px; }
}

/* two-up, featured card spans the row with a side-by-side interior */
@media (max-width: 991px) {
    .fp-format.fp-format { padding: 60px 26px; }
    .fp-format__heading { gap: 18px; }
    .fp-format__side-note { padding-left: 11px; }
    .fp-format__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .fp-format__card--featured {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .fp-format__card--featured .fp-format__visual { height: 100%; min-height: 270px; }
    .fp-format__card--featured .fp-format__photo { min-height: 270px; }
    .fp-format__visual { min-height: 180px; }
    .fp-format__photo { min-height: 180px; }
    .fp-format__copy { padding: 16px 14px; }
    .fp-format__copy > p { min-height: 88px; }
    .fp-format__cta { padding: 0 10px; }

    /* The design leaves this secondary link at its text height (~20px), which is
       an awkward touch target on a tablet. Measured at 768px and raised to 44px. */
    .fp-format__help > a { min-height: 44px; }
}

/* single column */
@media (max-width: 767px) {
    .fp-format__heading { display: block; }
    .fp-format__heading h2 {
        max-width: 100%;
        font-size: clamp(29px, 7vw, 38px);
        line-height: 1.12;
    }
    .fp-format__heading p { font-size: var(--fpf-fs-sm); line-height: 1.75; }
    .fp-format__side-note { display: none; }

    .fp-format__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 23px; }
    .fp-format__card--featured { grid-column: auto; display: flex; }
    .fp-format__card--featured .fp-format__visual { height: auto; min-height: 200px; }
    .fp-format__visual,
    .fp-format__photo,
    .fp-format__card--featured .fp-format__photo { min-height: 200px; }

    .fp-format__copy { padding: 18px; }
    .fp-format__copy h3 { font-size: 24px; line-height: 1.2; }
    .fp-format__copy > p { min-height: 0; font-size: var(--fpf-fs-sm); line-height: 1.75; }
    .fp-format__copy ul { gap: 8px; padding: 14px 0; margin: 14px 0 17px; }
    .fp-format__copy li { font-size: var(--fpf-fs-sm); line-height: 1.6; }

    /* comfortable touch target */
    .fp-format__cta { min-height: 48px; padding: 0 13px; font-size: var(--fpf-fs-sm); }

    .fp-format__help { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 14px; }
    .fp-format__help p { font-size: var(--fpf-fs-sm); line-height: 1.7; }
    .fp-format__help > a {
        grid-column: 2;
        white-space: normal;
        min-height: 44px;
        font-size: var(--fpf-fs-sm);
    }
}

@media (max-width: 540px) {
    .fp-format.fp-format { padding: 45px 15px; }
    .fp-format__heading h2 { font-size: 32px; line-height: 1.12; letter-spacing: -.7px; }
    .fp-format__grid { gap: 13px; margin-top: 22px; }
    .fp-format__visual,
    .fp-format__photo,
    .fp-format__card--featured .fp-format__photo { min-height: 195px; }
    .fp-format__copy h3 { font-size: 23px; }
    .fp-format__help { padding: 13px; }
}

@media (max-width: 400px) {
    .fp-format.fp-format { padding-left: 13px; padding-right: 13px; }
    .fp-format__visual,
    .fp-format__photo,
    .fp-format__card--featured .fp-format__photo { min-height: 185px; }
    .fp-format__copy { padding: 16px; }
    .fp-format__copy h3 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-format__card,
    .fp-format__cta { transition: none; }
    .fp-format__card:hover { transform: none; }
}