/* ==========================================================================
   Five-Piece Canvas — MagicPath sections that were missing from the live page

     §27  Delivery strip        .fp-delivery
     §30  Related + blog card   .fp-related
     §31  Final CTA             .fp-lastcta

   Ported from the MagicPath "5-Piece Canvas — Luxury Product Page" export.
   Every rule is scoped under its own block class. No bare element selectors,
   no global rules, no Bootstrap `.container` (mobile.css forces
   `.container{width:1200px!important}` and it applies on phones).

   TYPE SCALE
   ----------
   The design's body type bottoms out at 7-9px, which is a canvas-preview
   artefact and unreadable on a phone. The hierarchy is the design's, re-based
   onto a five-step ramp with an 11px floor and driven by one multiplier:

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

   Change --fpm-scale alone to retune all three sections together.

   SPECIFICITY
   -----------
   These sections render inside `.fp-experience` / the shared product template,
   where these rules are in play (all verified on the live page):
     .fp-experience section{padding:44px 0}                       (0,1,1)
     .fp-experience img{height:auto;object-fit:contain}           (0,1,1)
     single-product-detail.css  h1..h6,p,a{font-family:inherit!important}
     style.css  button{background:#0872ba;color:#fff;width:100px;height:40px}
   So: block classes are doubled where a declaration would otherwise lose,
   resets live in :where() so they can never outrank their own components, and
   the heading font-family matches the global !important.
   ========================================================================== */

.fp-delivery.fp-delivery,
.fp-related.fp-related,
.fp-lastcta.fp-lastcta {
    --fpm-scale: 1;

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

    --fpm-ink:   #211f1a;
    --fpm-body:  #766c5d;
    --fpm-gold:  #b68d4d;
    --fpm-gold-dark: #967137;
    --fpm-kicker: #94703a;

    box-sizing: border-box;
    color: var(--fpm-ink);
    font-family: "DM Sans", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- shared resets, zero-specificity so components always win -------------- */
.fp-delivery :where(*), .fp-related :where(*), .fp-lastcta :where(*),
.fp-delivery :where(*)::before, .fp-related :where(*)::before, .fp-lastcta :where(*)::before,
.fp-delivery :where(*)::after,  .fp-related :where(*)::after,  .fp-lastcta :where(*)::after {
    box-sizing: border-box;
    min-width: 0;
}

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

/* !important only to match single-product-detail.css's
   `font-family:inherit!important` on every heading. Scoped to these blocks. */
.fp-delivery :where(h2, h3), .fp-related :where(h2, h3), .fp-lastcta :where(h2, h3) {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
}

.fp-delivery :where(button), .fp-related :where(button), .fp-lastcta :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-delivery :where(a), .fp-related :where(a), .fp-lastcta :where(a) {
    color: inherit; text-decoration: none;
}

.fp-delivery :where(p), .fp-related :where(p), .fp-lastcta :where(p) { margin: 0; }
.fp-related :where(ul) { margin: 0; padding: 0; list-style: none; }

/* not in :where() — must outrank mobile.css's outline reset */
.fp-delivery :focus-visible,
.fp-related :focus-visible,
.fp-lastcta :focus-visible {
    outline: 3px solid #bd9657;
    outline-offset: 3px;
}

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

/* ==========================================================================
   §27 — Delivery strip
   ========================================================================== */
.fp-delivery.fp-delivery {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 27px clamp(20px, 7.5vw, 116px);
    background: #e9e0d1;
    border-top: 1px solid #ded0bc;
    border-bottom: 1px solid #ded0bc;
}

.fp-delivery__glyph {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    border: 1px solid #ccb58b;
    color: #98733d;
    font-size: 20px;
}

.fp-delivery__body { flex: 1; }

.fp-delivery__body h2 {
    margin: 4px 0;
    font-size: 21px;
    line-height: 1.2;
}

.fp-delivery__body p {
    color: #827666;
    font-size: var(--fpm-fs-xs);
    line-height: 1.7;
}

.fp-delivery__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid #ccb58b;
    background: #fbf7ef;
    color: #74572b;
    font-size: var(--fpm-fs-sm);
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease;
}

.fp-delivery__cta:hover,
.fp-delivery__cta:focus-visible { background: #efe3ce; border-color: #b89a67; }
.fp-delivery__cta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ==========================================================================
   §30 — Related products + blog card
   The design ships a ~30-declaration `!important` block here forcing
   writing-mode:horizontal-tb, because its three-column grid collapsed a column
   to near-zero width on mobile and rendered text one letter per line. That is
   a symptom fix. The layout below stacks properly at every width
   (min-width:0 on grid children, single column below 768px), so the override
   is not reproduced.
   ========================================================================== */
.fp-related.fp-related {
    display: grid;
    grid-template-columns: .55fr 1fr .65fr;
    align-items: start;
    gap: 28px;
    padding: 58px clamp(20px, 7.5vw, 116px);
    background: #fffdf8;
    border-top: 1px solid #e6dccb;
}

.fp-related > * { min-width: 0; }

.fp-related__intro h2 {
    margin: 10px 0;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -.6px;
}

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

.fp-related__intro p {
    color: #786d5b;
    font-size: var(--fpm-fs-sm);
    line-height: 1.75;
}

.fp-related__links {
    display: grid;
    border-top: 1px solid #e7dece;
}

.fp-related__links a {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 2px 10px;
    padding: 13px 0;
    border-bottom: 1px solid #e7dece;
    transition: background .15s ease;
}

.fp-related__links a:hover { background: #faf5ea; }

.fp-related__links a > span {
    grid-row: span 2;
    color: #ad8950;
    font-size: var(--fpm-fs-micro);
    font-weight: 700;
}

.fp-related__links a > b {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    font-size: var(--fpm-fs-lg);
    line-height: 1.3;
}

.fp-related__links a > small {
    color: #8b7e6d;
    font-size: var(--fpm-fs-xs);
    line-height: 1.5;
}

.fp-related__blog {
    padding: 18px;
    background: #f0e6d4;
    border: 1px solid #dfcfb4;
}

.fp-related__blog > span {
    display: block;
    color: #99743f;
    font-size: var(--fpm-fs-micro);
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
}

.fp-related__blog > b {
    display: block;
    margin-top: 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
}

.fp-related__blog p {
    margin-top: 8px;
    color: #786d5b;
    font-size: var(--fpm-fs-xs);
    line-height: 1.7;
}

.fp-related__blog > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 6px;
    color: #8c662d;
    font-size: var(--fpm-fs-xs);
    font-weight: 700;
}

/* ==========================================================================
   §31 — Final CTA
   ========================================================================== */
.fp-lastcta.fp-lastcta {
    display: grid;
    grid-template-columns: .9fr 1fr;
    align-items: center;
    gap: clamp(35px, 7vw, 100px);
    padding: 62px clamp(25px, 10vw, 150px);
    background: #eee6d8;
}

.fp-lastcta > * { min-width: 0; }

.fp-lastcta__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    padding: 32px;
    overflow: hidden;
    background: linear-gradient(130deg, #d4c2a9, #f0e5d5 55%, #d4c0a7);
    box-shadow: 0 15px 26px #5b442515;
}

.fp-lastcta__art::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 14%;
    background: linear-gradient(#bca78a, #9c8564);
}

/* double-scoped so it beats `.fp-experience img{height:auto;object-fit:contain}` */
.fp-lastcta .fp-lastcta__photo {
    position: relative;
    z-index: 1;
    width: 92%;
    height: 80%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 10px 18px #3b2b1a2e;
}

/* CSS fallback when no product photo resolves (mirrors the design's own mock) */
.fp-lastcta__mock {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.2%;
    width: 92%;
    height: 80%;
}

.fp-lastcta__mock i {
    display: block;
    flex: 1;
    min-width: 0;
    height: 82%;
    border: 3px solid #f7f1e7;
    background: linear-gradient(150deg, #b09b7b, #e7dbc7 45%, #8d9480);
    box-shadow: 0 2px 5px #39281726;
}

.fp-lastcta__mock i:nth-child(2),
.fp-lastcta__mock i:nth-child(4) { height: 94%; }
.fp-lastcta__mock i:nth-child(3) { height: 100%; }

.fp-lastcta__copy h2 {
    margin: 12px 0;
    font-size: clamp(34px, 3.4vw, 48px);
    line-height: 1.08;
    letter-spacing: -1.1px;
}

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

.fp-lastcta__copy > p {
    color: var(--fpm-body);
    font-size: var(--fpm-fs-sm);
    line-height: 1.75;
}

.fp-lastcta__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    margin-top: 20px;
    padding: 0 22px;
    border: 1px solid #a98549;
    background: var(--fpm-gold);
    color: #fff;
    font-size: var(--fpm-fs-sm);
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease;
}

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

.fp-lastcta__cta svg { width: 16px; height: 16px; flex-shrink: 0; }

.fp-lastcta__note {
    display: block;
    margin-top: 10px;
    color: #8e8170;
    font-size: var(--fpm-fs-xs);
}

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

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

@media (max-width: 1024px) {
    .fp-related.fp-related { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .fp-related__intro { grid-column: 1 / -1; }
    .fp-related__blog  { grid-column: 2; }
}

@media (max-width: 991px) {
    .fp-related.fp-related { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .fp-related__intro { grid-column: 1 / -1; }
    .fp-related__blog  { grid-column: auto; }
    .fp-lastcta.fp-lastcta { gap: clamp(28px, 5vw, 60px); }
}

@media (max-width: 767px) {
    /* delivery stacks; the CTA goes full width under the copy */
    .fp-delivery.fp-delivery { flex-wrap: wrap; gap: 14px; padding: 26px 20px; }
    .fp-delivery__body { flex: 1 1 100%; order: 2; }
    .fp-delivery__glyph { order: 1; }
    .fp-delivery__cta { order: 3; width: 100%; min-height: 48px; }

    /* single column, in reading order: heading -> links -> blog card */
    .fp-related.fp-related { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .fp-related__intro,
    .fp-related__blog { grid-column: auto; }
    .fp-related__intro h2 { font-size: 29px; }
    .fp-related__links a { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; padding: 14px 0; }
    .fp-related__links a > span  { font-size: var(--fpm-fs-xs); }
    .fp-related__links a > b     { font-size: 16px; }
    .fp-related__links a > small { font-size: var(--fpm-fs-sm); line-height: 1.5; }
    .fp-related__blog { padding: 17px; }
    .fp-related__blog > b { font-size: 22px; line-height: 1.25; }
    .fp-related__blog p   { font-size: var(--fpm-fs-md); line-height: 1.65; }
    .fp-related__blog > a { font-size: var(--fpm-fs-md); }

    .fp-lastcta.fp-lastcta { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 48px 25px; }
    .fp-lastcta__art { height: 200px; padding: 24px; }
    .fp-lastcta__cta { width: 100%; }
}

@media (max-width: 540px) {
    .fp-delivery.fp-delivery { padding: 23px 20px; gap: 13px; }
    .fp-delivery__glyph { width: 42px; height: 42px; font-size: 18px; }
    .fp-delivery__body h2 { font-size: 20px; }
    .fp-related.fp-related { padding: 44px 15px; gap: 15px; }
    .fp-related__blog > b { font-size: 19px; }
    .fp-lastcta.fp-lastcta { padding: 44px 15px; }
    .fp-lastcta__art { height: 180px; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-delivery__cta,
    .fp-lastcta__cta,
    .fp-related__links a { transition: none; }
}