/* ============================================================
   PostaMap brand skin over the BTS constructor (celestial.css).
   Loaded AFTER celestial.css; remaps its blue/teal accents to the
   PostaMap palette (ink / brass / verdigris) and matches type.
   Selectors are scoped under .constructor-wrapper to outrank the
   vendor rules; !important only where celestial.css itself uses it.
   ============================================================ */

/* ---- the station rail: 01 Create / 02 Format ----
   The constructor is a genuine two-step sequence, so it earns the numbering the
   landing page uses in #steps — same mono brass index, same weight. Numbers come
   from ::before, so the markup master.js toggles .active on is untouched. */
.constructor-wrapper ul.steps{
    grid-template-columns: 1fr 1fr;
    height: auto;
    margin: 0;
}
.constructor-wrapper ul.steps li{
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 22px;
    text-align: left;
    /* celestial gives these a pointer; they only report progress now */
    cursor: default;
    padding: 0 0 13px;
    font-family: var(--display);
    font-size: 23px;
    font-weight: 700;
    color: var(--muted-paper);
    border-bottom: 2px solid var(--line-paper);
    transition: color .2s, border-color .2s;

    line-height: 1.04;
    letter-spacing: -0.015em;
}
.constructor-wrapper ul.steps li::before{
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 400;
    color: var(--brass);
    opacity: .45;
    transition: opacity .2s;
}
.constructor-wrapper ul.steps li:first-child::before{ content: "01"; }
.constructor-wrapper ul.steps li:last-child::before{ content: "02"; }
.constructor-wrapper ul.steps li.active{
    color: var(--ink);
    border-bottom-color: var(--brass);
}
.constructor-wrapper ul.steps li.active::before{ opacity: 1; }
.constructor-wrapper ul.steps li.active span{ color: var(--brass); }

/* primary NEXT / ADD TO CART buttons (celestial uses !important on mobile) */
.constructor-wrapper #map-next-btn,
.constructor-wrapper #map-save-btn{
    background-color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    color: var(--bone) !important;
    border-radius: 2px;
    font-family: var(--body);
    font-weight: 600;
}
.constructor-wrapper #map-next-btn:hover,
.constructor-wrapper #map-save-btn:hover{
    background-color: var(--brass) !important;
    border-color: var(--brass) !important;
    color: var(--ink) !important;
}

/* radio dial (poster / canvas / frame / matte / glossy) */
.constructor-wrapper .radio_input-poster:checked,
.constructor-wrapper .radio_input-type:checked{ border-color: var(--brass); }
.constructor-wrapper .radio_input-poster:checked + .radio_label:after,
.constructor-wrapper .radio_input-type:checked + .radio_label:after{ background-color: var(--brass); }

/* "digital only" / priority checkboxes */
.constructor-wrapper .checkbox:checked + label::before{ border-color: var(--brass); }
.constructor-wrapper .map-pdf-only strong,
.constructor-wrapper .priority strong{ color: var(--brass); }

/* Design swatches — same object as the city map's .citymap-theme: a square
   sample with its name beneath it, brass ring when chosen. */
/* same rule as .citymap-themes: the swatches span the panel and the space
   between them is the row's leftover, so it tracks the panel width */
.constructor-wrapper ul#map-themes{
    display: flex;
    /* see .citymap-themes: wrapping breaks the line before it shrinks anything */
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
}
.constructor-wrapper ul#map-themes li{
    /* 52px target, allowed to shrink so a row never orphans its last swatch */
    flex: 0 1 52px;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    text-align: center;
    cursor: pointer;
}
/* celestial drew the frame with a ::before overlay on the <li>; the swatch owns
   its own border now, so that overlay has to go or it boxes the label in too */
.constructor-wrapper ul#map-themes li:before{ content: none; }
.constructor-wrapper ul#map-themes li .sw{
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px var(--line-paper);
}
.constructor-wrapper ul#map-themes li.selected .sw{ border-color: var(--brass); }
.constructor-wrapper ul#map-themes li .sw img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* no caption under the swatch — the name is in title/alt (same as city map) */

/* Show every design theme at once — drop the BTS "Show more" gradient peek
   (only a handful of themes, and the set is shrinking). */
.constructor-wrapper #hideshow{ display: none !important; }
.constructor-wrapper #map-themes{ overflow: visible; height: auto; padding-bottom: 0 !important; }

/* frame-color selector */
.constructor-wrapper .frame_selector.selected{
    background-color: var(--ink);
    border-color: var(--ink);
}
.constructor-wrapper .frame_selector.selected:after{
    border-left-color: var(--ink);
    border-bottom-color: var(--ink);
}

/* The running price is set exactly like the active step above it — same display
   face, size, weight and tracking — so the panel opens and closes on the same
   voice. It carries no "Total:" label: the figure in a checkout panel is already
   understood, and the label only diluted it. */
/* No line-height of its own: .bottom-form is a flex row with align-items:center,
   so the price centres against the buttons on its own. Pinning a line box here
   only fought that — and celestial.css sets a 33px one, so it has to be undone
   rather than merely omitted. */
/* The price moved into the buttons (see #map-next-btn::after). The element stays
   in the DOM because both constructors write to it and it is the single place
   the amount is computed — it is simply no longer shown. */
.constructor-wrapper #map-total{ display: none; }

/* options menu hover */
.constructor-wrapper #map-options-menu:hover,
.constructor-wrapper #map-options-menu:hover:after{ color: var(--brass); }

/* ============================================================
   PostaMap 2-step flow + single large flat poster preview.
   The original showed the poster inside a photo of a framed print
   on a wall (room mockup); here we show the composited poster
   (#main-map) large and flat.
   ============================================================ */

/* hide the room-mockup layers + per-size toggle; keep #main-map (the flat poster) */
.constructor-wrapper #stack-preview,
.constructor-wrapper .btns-preview,
.constructor-wrapper #texture-canvas,
.constructor-wrapper #texture-glossy,
.constructor-wrapper .stage-loader{ display: none !important; }

/* Two-column: plate left, control panel right.
   The measure is the site's own — identical to .content (92% / 1280px) — so the
   constructor's left edge lands on the same spine as the hero eyebrow above it
   and the info grid below. It used to sit at 1120px centred, which put it 80px
   inside that spine on both sides and made it read as a widget dropped onto the
   page rather than a section of it.
   The top hairline is the device that opens #steps, #formats and #occasions on
   the landing page; the constructor previously carried no rules at all. */
.constructor-wrapper .constructor{
    display: flex;
    gap: clamp(40px, 4.5vw, 72px);
    align-items: flex-start;
    width: 92%;
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 32px;
}
.constructor-wrapper .celestial-wrapper{
    max-width: none;
    width: auto;
    flex: 1 1 0;
    position: sticky;
    top: 90px;
}
/* the preview box carries the poster aspect (main-map is 800x1030) */
/* the plate takes the room the 420px panel leaves — at 440px it floated in a
   652px column with ~100px of dead paper on either side */
.constructor-wrapper .celestial-preview{
    position: relative;
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 800 / 1030;
    background: transparent;
}
.constructor-wrapper #main-map{
    box-shadow: 0 34px 70px rgba(11,15,26,.32);
    /* celestial nudges this 17px right on phones to centre it inside its own
       old preview box; ours is already centred, so the nudge pushed the plate
       past the constructor's right edge */
    margin: 0;
}
.constructor-wrapper .panel-wrapper{
    flex: 0 0 420px;
    max-width: 420px;
    width: 420px;
    overflow: visible; /* was hidden — clips the sticky total bar */
    /* Below 820px celestial turns this into a floating white sheet
       (box-shadow + #fff) — a leftover from the BTS layout where the panel slid
       up over the preview. The section already supplies the surface, and its
       --white is not #fff, so the card only read as a seam down the page. */
    background: transparent;
    box-shadow: none;
}

/* BTS makes #map-form a fixed-height (75vh / 52vw) inner scroll box so the
   form scrolls independently of the pinned bar. Our constructor scrolls with
   the page, so that inner scroll just clipped the lower fields off-screen.
   Let the form grow to its content and the page do the scrolling. */
.constructor-wrapper #map-form{
    overflow-y: visible;
    max-height: none;
}

/* BTS pins .bottom-form absolute over the form and reserves space with a
   100px step margin; our single-page form is longer, so that collided with
   the last fields. Let the total + CTA sit in flow at the end of the form. */
.constructor-wrapper .step-wrapper{ margin-bottom: 0; }
/* celestial also reserves 100px at the foot of the form for the absolute CTA */
.constructor-wrapper #map-form{ padding-bottom: 0; }
.constructor-wrapper .bottom-form{
    position: static;
    width: auto;
    margin: 26px 0 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    /* One row at every width. The price now rides inside the buttons, so the row
       holds only the button group and it sits right; Back stays to the left of
       the primary action inside that group. */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}
/* neither side stretches — the price is as wide as its figure, the buttons as
   wide as their labels, and space-between does the rest */
.constructor-wrapper #map-total,
.constructor-wrapper .wrapper-bottom-btns{ flex: none; width: auto; }

/* Celestial's collapse toggle — a small white tab with #ccc borders stuck to the
   panel's corner, folding the form away to reveal the plate. Not wanted: it is an
   unlabelled control, and the plate already sits above the form on a phone. */
.constructor-wrapper .doHide{ display: none !important; }

/* two tabs share the width evenly */
.constructor-wrapper ul.steps{ grid-template-columns: 1fr 1fr; }

/* One edge for the whole panel. The fields sat 30px inside the column while the
   total row and its rule ran flush to it, so the rule and the CTA overhung the
   inputs by 30px on both sides. */
.constructor-wrapper .step-wrapper,
.constructor-wrapper #map-form .step-wrapper{ margin-left: 0; margin-right: 0; }
/* below 820px celestial moves that inset from the wrapper's margin onto .step's
   padding, so zeroing the margin alone leaves it on phones */
.constructor-wrapper #map-form .step{ padding-left: 0; padding-right: 0; }

/* form section spacing (all config now lives in step 1) */
.constructor-wrapper #map-form .step > .hint{
    margin-bottom: 26px;
    padding-top: 16px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted-paper);
}
/* Field labels are the site's .eyebrow — same face, size, weight, tracking and
   the brass dash — so a step in the designer reads like a section on the rest of
   the site. Only the bottom margin differs: an eyebrow introduces a whole
   section, this one sits right above its own field. */
.constructor-wrapper #map-form label{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-paper);
    margin: 18px 0 8px;
}
.constructor-wrapper #map-form label::before{
    content: "";
    width: 22px;
    height: 1px;
    background: var(--brass);
    flex: none;
}
.constructor-wrapper #map-form .mstep4 > label:first-child,
.constructor-wrapper #map-form .step > div:first-of-type label{ margin-top: 0; }
.constructor-wrapper #map-form input[type=text],
.constructor-wrapper #map-form input[type=datetime-local],
.constructor-wrapper #map-form textarea,
.constructor-wrapper #map-form select{
    width: 100%;
    border: 1px solid var(--line-paper);
    border-radius: 2px;
    background: var(--white);
}

/* The native calendar button is 24px tall against the 22.4px line box of a text
   input, so the picker came out 2px taller than the fields above and below it.
   One pixel off each pad brings it back onto the same rhythm. */
.constructor-wrapper #map-form input[type=datetime-local]{
    padding-top: 10px;
    padding-bottom: 10px;
}

/* celestial.css sets an arrow background-image on <select> with no background-repeat,
   so it tiles into a zigzag. Pin it to a single right-aligned chevron. */
.constructor-wrapper select{
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 11px auto !important;
    padding-right: 34px;
}

/* OpenStreetMap location search suggestions dropdown */
#mm-geo-suggest{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    margin: 3px 0 0;
    padding: 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--line-paper);
    border-radius: 2px;
    box-shadow: 0 14px 30px rgba(11,15,26,.16);
    max-height: 260px;
    overflow-y: auto;
}
#mm-geo-suggest li{
    padding: 10px 12px;
    font-family: var(--body);
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink);
    cursor: pointer;
    border-bottom: 1px solid var(--line-paper);
}
#mm-geo-suggest li:last-child{ border-bottom: 0; }
#mm-geo-suggest li:hover{ background: var(--paper-2); }

/* format cards */
.mm-format-opts{ display: flex; flex-direction: column; gap: 10px; }
.mm-opt{
    display: block;
    position: relative;
    border: 1px solid var(--line-paper);
    border-radius: 2px;   /* the site's radius everywhere else */
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.mm-opt input{ position: absolute; opacity: 0; width: 0; height: 0; }

/* The field labels above are mono caps; these cards are content, not labels.
   They are <label> elements too, so they were picking up `#map-form label`
   (specificity 1,0,1 — it beats any plain class here) and both the option name
   and its one-line explanation came out as the same shouting caps. */
.constructor-wrapper #map-form label.mm-opt{
    display: block;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    margin: 0;
}
/* …and no brass dash on the format cards — it belongs to the field labels */
.constructor-wrapper #map-form label.mm-opt::before{ content: none; }
.constructor-wrapper #map-form label.mm-opt .mm-opt-title{
    display: block;
    font-family: var(--body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}
.constructor-wrapper #map-form label.mm-opt .mm-opt-sub{
    display: block;
    font-family: var(--body);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-paper);
    margin-top: 3px;
}
.mm-opt:hover{ border-color: var(--brass); }
.mm-opt:has(input:checked){ border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.mm-opt:focus-within{ outline: 2px solid var(--brass); outline-offset: 2px; }

/* stack on the constructor's mobile breakpoint */
@media only screen and (max-width: 890px){
    .constructor-wrapper .constructor{ flex-direction: column; gap: 50px; }
    .constructor-wrapper .celestial-wrapper{ position: static; width: 100%; }
    /* Once the columns stack, the plate takes the panel's own width (420px), so
       on a tablet it matches the form beneath it and on a phone the column is
       narrower than that and the plate simply fills it, lining up with the
       fields. /city-map's .citymap-poster carries the same value. */
    .constructor-wrapper .celestial-preview{ max-width: 420px; }
    .constructor-wrapper .panel-wrapper{ flex: 1 1 auto; max-width: 100%; width: 100%;}
}

/* Step buttons. Celestial ships them as fixed-width boxes (100px for next, 120px
   for add-to-cart) with the 18px chevron parked on a percentage offset, so the
   label breaks over two lines and the arrow lands on top of it. That is wrong at
   every width — the form panel is only ~420px even on a wide screen — so these
   live outside the media query below. */
.constructor-wrapper #map-next-btn,
.constructor-wrapper #map-prev-btn{
    width: auto;
    min-width: 0;
    white-space: nowrap;
}
/* All three read as buttons on hover — celestial leaves them on the default
   arrow, and .steps above deliberately sets `cursor: default`, so without this
   nothing in the panel's bottom row looks clickable. */
.constructor-wrapper #map-next-btn,
.constructor-wrapper #map-prev-btn,
.constructor-wrapper #map-save-btn{ cursor: pointer; }
/* The primary buttons carry the price instead of an arrow: the figure belongs to
   the action it commits to, and standing alone on the left it was just another
   number to reconcile. Both buttons become inline-flex rows — label, hairline,
   price — so they size to their own content and the price cannot overlap the
   label the way the absolutely-placed chevron used to.
   The price text comes from data-price, written by citymap.js / master.js
   alongside #map-total. */
.constructor-wrapper #map-next-btn,
.constructor-wrapper #map-save-btn{
    display: inline-flex;
    align-items: baseline;
    gap: 13px;
    padding: 13px 20px;
}
.constructor-wrapper #map-next-btn:before{ content: none; }   /* the chevron */
.constructor-wrapper #map-next-btn::after,
.constructor-wrapper #map-save-btn::after{
    content: attr(data-price);
    padding-left: 13px;
    border-left: 1px solid color-mix(in srgb, currentColor 38%, transparent);
}
/* Back keeps its arrow and its own padding — untouched. */
.constructor-wrapper #map-prev-btn{ padding: 13px 18px 13px 46px; }
.constructor-wrapper #map-prev-btn:before{ right: auto; left: 18px; }
/* celestial ships the chevron as a base64 PNG; Back draws its arrow as type
   (the same glyph as #cta-final .cta-arrow) and inherits the colour. The next
   button has no arrow any more — its price took that place. */
.constructor-wrapper #map-prev-btn:before{
    background-image: none !important;
    width: auto;
    height: auto;
    font-family: var(--body);
    font-size: 17px;
    line-height: 1;
    color: currentColor;
    content: "←";
}
.constructor-wrapper #map-next-btn:before{ background-image: none !important; }
.constructor-wrapper #map-save-btn{
    width: auto;
    white-space: nowrap;
    padding: 13px 22px;
}
/* once the buttons size to their content they sit edge to edge on step 2 */
.constructor-wrapper .wrapper-bottom-btns{ gap: 12px; }

/* Celestial pins the CTA to a 100px box and lets the row shrink-wrap, so the price
   ends up touching the button and the label breaks over two lines. That happens on
   every width where the constructor is single-column, not just on phones — 1024 is
   where .panel-wrapper goes full width above. */
@media only screen and (max-width: 1024px){
    .constructor-wrapper .bottom-form{
        width: 100%;
    }
    /* celestial.css shrinks the price to 18px/26px with !important on narrow
       screens; the steps above keep their size, so the price has to answer in
       kind to stay their twin — and its line box has to be released again. */
    .constructor-wrapper #map-total{
        white-space: nowrap;
        font-size: 23px !important;
        line-height: normal !important;
    }
    .constructor-wrapper .wrapper-bottom-btns{ gap: 12px; }
}

/* Fields sit a shade smaller than the vendor's 16px on desktop. Held at 16 on
   touch on purpose: Safari on iOS zooms the page whenever a focused field is
   under 16px, and the visitor is then stranded mid-form at 1.2x. */
@media only screen and (min-width: 891px){
    .constructor-wrapper #map-form input[type=text],
    .constructor-wrapper #map-form input[type=datetime-local],
    .constructor-wrapper #map-form textarea,
    .constructor-wrapper #map-form select{
        font-size: 15px;
    }
}