* { box-sizing: border-box; margin: 0; padding: 0; }
  #mobile-nav, #mobile-sheet, #mobile-backdrop { display: none; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f0f0f0; height: 100vh; overflow: hidden; color: #222; }

  .app { display: flex; height: 100vh; }

  .nav { width: 64px; background: #1a1a1a; display: flex; flex-direction: column; padding: 16px 0; flex-shrink: 0; }
  .nav button { background: transparent; border: none; color: #6e6e6e; padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; border-left: 4px solid transparent; transition: all 0.18s; font-family: inherit; position: relative; }
  .nav button:hover { color: #cfcfcf; }
  .nav button.active { color: #fff; border-left-color: #d9a94e; background: rgba(255,255,255,0.13); }
  .nav button.active svg { transform: scale(1.06); }
  .nav button.active span { font-weight: 700; }
  .nav button span { font-size: 10px; letter-spacing: 0.5px; }
  .nav svg { width: 18px; height: 18px; transition: transform 0.18s; }

  .controls { width: 340px; background: #fff; overflow-y: auto; padding: 28px 28px 120px; flex-shrink: 0; border-right: 1px solid #eee; }
  .controls-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
  .controls h1 { font-size: 26px; font-weight: 500; color: #111; margin: 0; }
  .controls .intro { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 28px; }
  .hiw-btn { display: none; }
  .section { margin-bottom: 28px; scroll-margin-top: 20px; }
  .section-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #aaa; margin-bottom: 12px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
  .section-label::after { content: ''; flex: 1; height: 1px; background: #f0ede9; }
  .section-sub { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: #bbb; margin: 16px 0 10px; text-transform: uppercase; }

  .search-wrap { position: relative; }
  .search-input { width: 100%; padding: 10px 14px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 14px; font-family: inherit; }
  .search-input:focus { outline: none; border-color: #333; }

  .search-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 4px 4px; max-height: 260px; overflow-y: auto; z-index: 10; display: none; }
  .search-results.open { display: block; }
  .search-result { padding: 10px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f2f2f2; }
  .search-result:hover { background: #ffffff; }
  .search-result .main { color: #111; }
  .search-result .sub { color: #777; font-size: 12px; margin-top: 2px; }

  .popular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
  .popular button { background: transparent; border: 1px solid #e0e0e0; padding: 7px 6px; font-size: 11px; letter-spacing: 0.5px; color: #555; cursor: pointer; font-family: inherit; border-radius: 6px; transition: all 0.15s; text-align: center; width: 100%; }
  .popular button:hover { background: #f8f7f4; color: #111; border-color: #bbb; }

  .style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .style-btn { padding: 0; border: 2px solid transparent; background: transparent; cursor: pointer; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
  .style-thumb-swatch { width: 100%; aspect-ratio: 4/3; display: block; }
  @media (max-width: 768px) {
    .style-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .style-thumb-label { font-size: 10px; }
    .style-thumb-swatch { aspect-ratio: 4/3; }
  }
  .style-swatch-light     { background: linear-gradient(145deg, #FFFFFF 0%, #C6D6E0 42%, #505050 72%, #080808 100%); }
  .style-swatch-rose      { background: linear-gradient(145deg, #16291E 0%, #13383B 42%, #8C9A78 72%, #ECE6CE 100%); }
  .style-swatch-grey      { background: linear-gradient(145deg, #F3ECE1 0%, #B7C29A 40%, #C68E63 70%, #6B3F2A 100%); }
  .style-swatch-dark      { background: linear-gradient(145deg, #16314E 0%, #3A6A92 45%, #A6C4DF 78%, #FFFFFF 100%); }
  .style-swatch-colour    { background: linear-gradient(145deg, #FCFAF7 0%, #C9DEC4 38%, #C5DBEA 68%, #7E6A80 100%); }
  .style-swatch-blackgold { background: linear-gradient(145deg, #0E0E0D 0%, #1E2A38 32%, #C9A24B 68%, #DCBB58 100%); }
  .style-thumb-label { font-size: 11px; font-weight: 500; text-align: center; padding: 6px 4px; color: #555; background: #fafaf8; }
  .style-btn { box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
  .style-btn:hover .style-thumb-label { color: #222; }
  .style-btn.active { border-color: #111; box-shadow: 0 0 0 0px transparent; }
  .style-btn.active .style-thumb-label { color: #111; font-weight: 700; background: #f5f3f0; }

  

  /* Layout tab order: Full Page Style → Map Shape → Border Frame (reordered via flex
     so the large button blocks don't have to be physically moved in the markup). */
  #shape-section { display: flex; flex-direction: column; }
  #shape-section #tutFullPageArea { order: 1; }
  #shape-section #tutShapesArea   { order: 2; margin-top: 18px; }
  #shape-section #borderSection   { order: 3; margin-top: 18px; }
  /* Mirror that Shape-tab order in the mobile bottom-sheet clone, which loses the
     #shape-section id (so the rules above don't reach it). */
  #mobile-sheet-content [data-section="shape-section"] { display: flex; flex-direction: column; }
  #mobile-sheet-content [data-section="shape-section"] #tutFullPageArea { order: 1; }
  #mobile-sheet-content [data-section="shape-section"] #tutShapesArea   { order: 2; margin-top: 18px; }
  #mobile-sheet-content [data-section="shape-section"] #borderSection    { order: 3; margin-top: 18px; }
  /* Border Frame locked while a full-page style is active (frames only apply to map shapes) */
  #borderSection.locked .toggle-btn,
  #borderSection.locked #borderStylePicker { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
  #borderSection.locked::after {
    content: 'Not available on full-page styles — switch to a map shape to add a frame.';
    display: block; margin-top: 10px; font-size: 10.5px; font-style: italic;
    color: #9a6a2e; text-align: center; line-height: 1.4;
  }
  /* Shape Outline locked while a full-page style is active (outlines only apply to map shapes) */
  #outlineSection.locked .toggle-btn,
  #outlineSection.locked p { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
  #outlineSection.locked::after {
    content: 'Not available on full-page styles — switch to a map shape to add an outline.';
    display: block; margin: 4px 0 14px; font-size: 10.5px; font-style: italic;
    color: #9a6a2e; text-align: center; line-height: 1.4;
  }

  .shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .shape-btn {
    position: relative;
    background: #f8f7f4;
    border: 1px solid #e4e0db;
    padding: 10px 6px 8px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 10px;
    font-family: inherit;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .shape-btn:hover { border-color: #bbb; background: #fff; color: #333; }
  .shape-btn svg { width: 32px; height: 32px; }
  .shape-label { font-size: 10px; letter-spacing: 0.2px; line-height: 1; }

  .font-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .font-btn { position: relative; background: #f8f7f4; border: 1px solid #e4e0db; padding: 12px 8px; cursor: pointer; border-radius: 8px; font-size: 18px; font-family: inherit; text-align: center; transition: all 0.15s; color: #111; }
  .font-btn:hover { border-color: #bbb; background: #fff; }
  .font-btn .label { display: block; font-size: 9px; letter-spacing: 1.2px; color: #777; margin-top: 4px; font-family: -apple-system, sans-serif; text-transform: uppercase; font-weight: 600; }
  .font-btn[data-font="modern"]   { font-family: 'Montserrat', sans-serif; font-weight: 500; letter-spacing: 3px; }
  .font-btn[data-font="editorial"] { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: 2px; }
  .font-btn[data-font="classic"]  { font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: 2px; font-size: 21px; }
  .font-btn[data-font="timeless"] { font-family: 'Lora', serif; font-weight: 400; letter-spacing: 1px; font-style: italic; }
  .font-btn[data-font="romantic"] { font-family: 'Great Vibes', cursive; font-weight: 400; letter-spacing: 0; font-size: 24px; }
  .font-btn[data-font="minimal"]  { font-family: 'Josefin Sans', sans-serif; font-weight: 300; letter-spacing: 6px; }
  .font-btn[data-font="heritage"] { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: 2px; font-size: 15px; }
  .font-btn[data-font="bold"]     { font-family: 'Abril Fatface', serif; font-weight: 400; letter-spacing: 1px; font-size: 20px; }
  .font-btn[data-font="clean"]    { font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: 4px; font-size: 16px; }

  .toggle-btn { background: transparent; border: 1px solid #e0e0e0; padding: 11px 14px; cursor: pointer; border-radius: 6px; font-size: 13px; font-family: inherit; text-align: left; display: flex; justify-content: space-between; align-items: center; width: 100%; color: #222; }
  .toggle-btn:hover { border-color: #aaa; }
  .toggle-btn .indicator { width: 32px; height: 18px; border-radius: 10px; background: #d8d8d8; position: relative; transition: background 0.2s; flex-shrink: 0; }
  .toggle-btn .indicator::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
  .toggle-btn.on .indicator { background: #111; }
  .toggle-btn.on .indicator::after { transform: translateX(14px); }

  .heart-options { margin-top: 14px; transition: opacity 0.15s; }
  .heart-options.disabled { opacity: 0.35; pointer-events: none; }

  /* Marker type selector */
  .marker-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .marker-type-btn {
    background: #f8f7f4; border: 1.5px solid #e4e0db; padding: 10px 6px 8px;
    cursor: pointer; border-radius: 8px; font-size: 10px; font-family: inherit; color: #666;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .marker-type-btn:hover { border-color: #bbb; background: #fff; color: #333; }
  .marker-type-btn.active { border-color: #111; border-width: 2px; background: #fff; color: #111; font-weight: 600; }
  .marker-type-btn svg { width: 28px; height: 28px; }

  /* Colour swatches — 4×2 grid, circular */
  .colour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
  .colour-btn {
    width: 100%; aspect-ratio: 1; max-width: 36px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.08);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .colour-btn:hover { transform: scale(1.1); }
  .colour-btn.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222; }

  .marker-size-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
  .divider-style-btn, .border-style-btn, .emblem-btn { position: relative; background: #f8f7f4; border: 1px solid #e4e0db; border-radius: 8px; padding: 9px 4px 7px; font-size: 11px; color: #777; cursor: pointer; text-align: center; font-family: inherit; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .divider-style-btn:hover, .border-style-btn:hover { border-color: #bbb; background: #fff; color: #333; }

  /* ── Unified "selected" state for all option tiles: accent border + a clear
     check badge in the corner (replaces the old heavy black ring). ── */
  .shape-btn.active, .font-btn.active, .divider-style-btn.active, .border-style-btn.active {
    border-color: #1a1a1a; background: #fff; color: #111;
  }
  .style-btn.active { border-color: #1a1a1a; }
  .shape-btn.active::after, .font-btn.active::after,
  .divider-style-btn.active::after, .border-style-btn.active::after,
  .style-btn.active::after {
    content: ''; position: absolute; top: 5px; right: 5px;
    width: 15px; height: 15px; border-radius: 50%;
    background-color: #1a1a1a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 9px 9px; background-position: center; background-repeat: no-repeat;
    box-shadow: 0 1px 3px rgba(0,0,0,0.28);
    z-index: 3;
  }
  .style-btn.active::after { top: 7px; right: 7px; }

  .divider-style-btn .dv-preview { width: 100%; height: 24px; display: flex; align-items: center; justify-content: center; overflow: visible; }
  .divider-style-btn .dv-preview svg { width: 56px; height: auto; max-height: 22px; overflow: visible; display: block; }
  .divider-style-btn .dv-name, .border-style-btn .dv-name { font-size: 9px; letter-spacing: 0.5px; color: inherit; text-transform: uppercase; }
  .poster-text [id] { cursor: pointer; position: relative; }
  .poster-text [id]:hover::after { content: '✎'; position: absolute; top: -8px; right: -14px; font-size: 11px; opacity: 0.45; pointer-events: none; }
  #inline-edit-popover { position: fixed; z-index: 9999; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); padding: 10px 12px; display: none; min-width: 200px; }
  @media (max-width: 768px) {
    #inline-edit-popover { left: 12px !important; right: 12px !important; bottom: 12px !important; top: auto !important; min-width: unset; border-radius: 12px; padding: 14px 16px; }
  }
  #inline-edit-popover.visible { display: block; }
  #inline-edit-popover label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #999; display: block; margin-bottom: 5px; }
  #inline-edit-popover input { width: 100%; border: 1px solid #e0e0e0; border-radius: 5px; padding: 6px 8px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; }
  #inline-edit-popover input:focus { border-color: #aaa; }
  .marker-size-btn {
    background: #f8f7f4; border: 1.5px solid #e4e0db; padding: 11px 6px;
    cursor: pointer; border-radius: 8px; font-size: 12px; font-family: inherit; color: #666;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .marker-size-btn:hover { border-color: #bbb; background: #fff; color: #333; }
  .marker-size-btn.active { border-color: #111; border-width: 2px; background: #fff; color: #111; font-weight: 600; }

  .text-size-btn { background: transparent; border: 1px solid #e0e0e0; padding: 10px; cursor: pointer; border-radius: 6px; font-size: 12px; font-family: inherit; color: #222; }
  .text-size-btn.active { border-color: #000; border-width: 2px; background: #ffffff; }

  .reset-link { background: transparent; border: none; color: #666; font-size: 12px; cursor: pointer; padding: 6px 0; font-family: inherit; text-decoration: underline; }
  #fontSizeSlider, #fontSizeSlider-clone { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: #e0e0e0; outline: none; cursor: pointer; }
  #fontSizeSlider::-webkit-slider-thumb, #fontSizeSlider-clone::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #111; cursor: pointer; }
  #fontSizeSlider::-moz-range-thumb, #fontSizeSlider-clone::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #111; cursor: pointer; border: none; }
  .reset-link:hover { color: #111; }

  .start-over-btn { width: 100%; padding: 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: inherit; color: #555; cursor: pointer; transition: all 0.15s; }
  .start-over-btn:hover { background: #ffffff; border-color: #aaa; color: #222; }

  .label-input { width: 100%; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; font-family: inherit; margin-bottom: 8px; letter-spacing: 1px; color: #111; touch-action: auto; -webkit-user-select: text; user-select: text; }
  .label-input:focus { outline: none; border-color: #333; }
  .label-input::placeholder { color: #aaa; letter-spacing: 0.5px; }

  .template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .template-btn { background: #ffffff; border: 1px solid #e8e8e8; padding: 12px 10px; cursor: pointer; border-radius: 6px; font-size: 12px; font-family: inherit; text-align: center; transition: all 0.15s; }
  .template-btn:hover { background: #f0ebe2; border-color: #aaa; }
  .template-btn .name { font-weight: 600; display: block; margin-bottom: 2px; color: #111; }
  .template-btn .desc { font-size: 10px; color: #777; }

  /* PREVIEW */
  .preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 60px 140px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #f7f6f4 0%, #ececea 100%);
    touch-action: none;
  }

  .poster {
    background: #ffffff;
    background-image:
      radial-gradient(ellipse at top, rgba(0,0,0,0.015) 0%, transparent 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 30px 80px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  .ruler-wrap { pointer-events: none; }
  .poster-map { position: relative; overflow: hidden; background: #eee; border-radius: 50%; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; pointer-events: auto; }
  .poster-map::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; z-index: 0; pointer-events: none; }
  #map-gl { width: 100%; height: 100%; touch-action: none; }
  #posterMap { touch-action: none; pointer-events: auto; }
  .poster-map.dragging { cursor: grabbing; }
  #map-gl { width: 100%; height: 100%; }
  #map-gl .mapboxgl-ctrl-logo, #map-gl .mapboxgl-ctrl-attrib { display: none !important; }

  .poster-map::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s;
  }
  .poster-map.loading::before {
    opacity: 1;
    animation: shimmer 1.2s infinite linear;
  }
  @keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }

  /* Zoom controls — fixed on the right edge of the preview pane, vertically centred */
  .map-zoom-ctrl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
  }
  .map-zoom-btn {
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 400;
    color: #111;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: all 0.15s;
    line-height: 1;
    font-family: inherit;
  }
  .map-zoom-btn:hover { background: #ffffff; border-color: #888; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.15); }
  .map-zoom-btn:active { transform: translateY(0); }

  .heart-marker {
    position: absolute;
    cursor: grab;
    transform: translate(-50%, -50%);
    user-select: none;
    -webkit-user-select: none;
    z-index: 5;
  }
  .heart-marker:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.05); }
  .heart-marker.hidden { display: none; pointer-events: none; touch-action: none; }
  .heart-marker svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

  .heart-hint { position: absolute; top: -38px; left: 50%; transform: translateX(-50%); background: #1a1a1a; color: #fff; font-size: 11px; padding: 6px 10px; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s; font-family: -apple-system, sans-serif; letter-spacing: 0.3px; }
  .heart-hint::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a1a; }
  .heart-hint.show { opacity: 1; }
  body.exporting .heart-hint, body.exporting .marker-recenter { display: none !important; }

  /* ── Global reset for all full-page variants — clear shape mask + border-radius ── */
  .poster.full-layout .poster-map,
  .poster.full-bottom  .poster-map,
  .poster.full-overlay .poster-map,
  .poster.full-bleed   .poster-map,
  .poster.full-minimal .poster-map,
  .poster.full-frame   .poster-map,
  .poster.full-gallery .poster-map,
  .poster.full-band    .poster-map,
  .poster.full-stack   .poster-map {
    border-radius: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* Shell becomes layout-transparent in full-page modes so .poster-map
     participates directly in the poster's flex container */
  .poster.full-layout  #posterMapShell,
  .poster.full-bottom  #posterMapShell,
  .poster.full-overlay #posterMapShell,
  .poster.full-bleed   #posterMapShell,
  .poster.full-minimal #posterMapShell,
  .poster.full-frame   #posterMapShell,
  .poster.full-gallery #posterMapShell,
  .poster.full-band    #posterMapShell,
  .poster.full-stack   #posterMapShell {
    display: contents;
  }

  /* ─ full-bottom: map fills top, text footer mirroring header layout ─ */
  .poster.full-bottom { display: flex; flex-direction: column; overflow: hidden; }
  .poster.full-bottom .poster-map  { order: 1; flex: 1; width: 100% !important; height: auto !important; margin: 0 !important; }
  .poster.full-bottom .poster-text {
    order: 2; padding: calc(14px*var(--ps,1)) 22px calc(16px*var(--ps,1)); text-align: left;
    display: grid;
    grid-template-areas: "tagrow tagrow" "titlerow titlerow" "divrow divrow" "daterow daterow" "coordrow coordrow";
    grid-template-columns: 1fr auto; gap: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
  }
  .poster.full-bottom .poster-text .row[data-row="tagline"]  { grid-area: tagrow; display: block; margin-bottom: 2px; }
  .poster.full-bottom .poster-text .row[data-row="title"]    { grid-area: titlerow; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .poster.full-bottom .poster-text .row[data-row="divider"]  { grid-area: divrow; margin: 4px 0 6px; }
  .poster.full-bottom .poster-text .row[data-row="date"]     { grid-area: daterow; margin: 2px 0; }
  .poster.full-bottom .poster-text .row[data-row="coords"]   { grid-area: coordrow; margin: 0; }
  .poster.full-bottom .poster-text .row[data-row="subtitle"] { display: none; }
  .poster.full-bottom .poster-text .poster-divider { width: 100%; display: block; }
  .poster.full-bottom .poster-title { letter-spacing: 3px; font-weight: 700; }
  .poster.full-bottom .poster-text .row[data-row="tagline"] .poster-tagline { font-style: italic; font-size: 0.75em; color: #666; letter-spacing: 0.5px; }

  /* ─ full-overlay: map 100%, frosted white card at bottom center ─ */
  .poster.full-overlay { position: relative; overflow: hidden; display: block; }
  .poster.full-overlay .poster-map  { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; }
  .poster.full-overlay .poster-text {
    position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
    width: 72%; z-index: 2;
    background: rgba(255,255,255,0.93); backdrop-filter: blur(6px);
    border-radius: 3px; padding: calc(14px*var(--ps,1)) 18px;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
  }
  .poster.full-overlay .poster-text .row { display: flex; justify-content: center; }
  .poster.full-overlay .poster-text .poster-divider { width: 36px; }
  .poster.full-overlay .poster-title { letter-spacing: 4px; font-weight: 700; }

  /* ─ full-bleed (Float): map 100%, text on white fade from bottom ─ */
  .poster.full-bleed { position: relative; overflow: hidden; display: block; }
  .poster.full-bleed .poster-map  { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; }
  .poster.full-bleed .poster-text {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: calc(34px*var(--ps,1)) 24px calc(20px*var(--ps,1)); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.88) 30%, rgba(255,255,255,0.98) 100%);
  }
  .poster.full-bleed .poster-text .row { display: flex; justify-content: center; }
  .poster.full-bleed .poster-title { letter-spacing: 5px; font-weight: 700; }

  /* ─ Minimal: full-bleed map with a clean, SOLID-white caption footer. A centred,
       airy stack (the simplest full-page look) — text sizes come from the font-size
       slider, like Footer. ─ */
  .poster.full-minimal { position: relative; overflow: hidden; display: block; }
  .poster.full-minimal .poster-map  { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; }
  .poster.full-minimal .poster-text {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: calc(11px*var(--ps,1)) 20px calc(12px*var(--ps,1)); background: #ffffff;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border-top: 1px solid rgba(0,0,0,0.10); text-align: center;
  }
  .poster.full-minimal .poster-text .row { display: flex; justify-content: center; max-width: 100%; }
  .poster.full-minimal .poster-text .row.hidden { display: none !important; }
  .poster.full-minimal .poster-tagline  { font-style: italic; color: #888; letter-spacing: 0.5px; }
  .poster.full-minimal .poster-title    { letter-spacing: 3px; font-weight: 400; line-height: 1.18; }
  .poster.full-minimal .poster-subtitle { color: #888; letter-spacing: 2px; text-transform: uppercase; }
  .poster.full-minimal .poster-date     { color: #aaa; letter-spacing: 1px; }
  .poster.full-minimal .poster-coords   { color: #aaa; letter-spacing: 1px; font-style: italic; }

  /* ─ Framed: a refined double-rule frame. An outer hairline at the poster edge (inset
       box-shadow) plus a continuous inner rule wrapping the map and the caption. ─ */
  .poster.full-frame { display: flex; flex-direction: column; overflow: hidden; padding: 14px; box-sizing: border-box; background: #fff; box-shadow: inset 0 0 0 1px #1a1a1a, 0 2px 6px rgba(0,0,0,0.08), 0 30px 80px rgba(0,0,0,0.16); }
  .poster.full-frame .poster-map  {
    order: 1; flex: 1; width: 100% !important; height: auto !important; margin: 0 !important;
    border: 1px solid #1a1a1a; border-bottom: none; box-sizing: border-box;
  }
  .poster.full-frame .poster-text {
    order: 2; padding: calc(12px*var(--ps,1)) 18px calc(14px*var(--ps,1)); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: 1px solid #1a1a1a; border-top: none;
  }
  .poster.full-frame .poster-text .row { display: flex; justify-content: center; }
  .poster.full-frame .poster-text .poster-divider { width: 36px; }
  .poster.full-frame .poster-tagline  { font-style: italic; color: #666; letter-spacing: 0.5px; }
  .poster.full-frame .poster-title    { letter-spacing: 5px; font-weight: 700; }
  .poster.full-frame .poster-subtitle { text-transform: uppercase; letter-spacing: 3px; color: #555; }
  .poster.full-frame .poster-date     { color: #888; letter-spacing: 1.5px; }
  .poster.full-frame .poster-coords   { color: #999; letter-spacing: 1px; }

  /* ─ Classic: full-width map with a formal, solid-white caption panel beneath. The
       traditional gallery look — generous padding, wide-tracked title, uppercase meta. ─ */
  .poster.full-gallery { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
  .poster.full-gallery .poster-map  { order: 1; flex: 1 1 auto; width: 100% !important; height: auto !important; margin: 0 !important; min-height: 0; }
  .poster.full-gallery .poster-text {
    order: 2; flex: 0 0 auto; padding: calc(18px*var(--ps,1)) 24px calc(20px*var(--ps,1)); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  .poster.full-gallery .poster-text .row { display: flex; justify-content: center; }
  .poster.full-gallery .poster-text .poster-divider { width: 44px; }
  .poster.full-gallery .poster-tagline  { font-style: italic; color: #777; letter-spacing: 0.5px; }
  .poster.full-gallery .poster-title    { letter-spacing: 6px; font-weight: 700; }
  .poster.full-gallery .poster-subtitle { text-transform: uppercase; letter-spacing: 3px; color: #555; }
  .poster.full-gallery .poster-date     { color: #888; letter-spacing: 2px; }
  .poster.full-gallery .poster-coords   { color: #999; letter-spacing: 1px; }

  /* ─ Banner: full-bleed map with a smooth white gradient fading up into the map; the
       centred text floats in the fade with no hard panel edge. ─ */
  .poster.full-band { position: relative; overflow: hidden; display: block; }
  .poster.full-band .poster-map  { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; }
  .poster.full-band .poster-text {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: calc(58px*var(--ps,1)) 24px calc(24px*var(--ps,1)); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 26%, rgba(255,255,255,0.92) 52%, #ffffff 78%, #ffffff 100%);
  }
  .poster.full-band .poster-text .row { display: flex; justify-content: center; }
  .poster.full-band .poster-tagline  { font-style: italic; color: #666; letter-spacing: 0.5px; }
  .poster.full-band .poster-title    { letter-spacing: 6px; font-weight: 700; }
  .poster.full-band .poster-subtitle { text-transform: uppercase; letter-spacing: 4px; color: #555; }
  .poster.full-band .poster-date     { color: #777; letter-spacing: 1.5px; }
  .poster.full-band .poster-coords   { color: #888; letter-spacing: 1px; font-style: italic; }

  /* ─ Editorial: full-bleed map with a bottom-LEFT aligned text stack on a soft white
       gradient. Asymmetric, magazine-cover feel — left rule, bolder uppercase meta. ─ */
  .poster.full-stack { position: relative; overflow: hidden; display: block; }
  .poster.full-stack .poster-map  { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; }
  .poster.full-stack .poster-text {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: calc(46px*var(--ps,1)) 28px calc(26px*var(--ps,1)); text-align: left;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 42%, rgba(255,255,255,0.98) 100%);
  }
  .poster.full-stack .poster-text .row { display: flex; justify-content: flex-start; text-align: left; }
  .poster.full-stack .poster-tagline  { font-style: italic; color: #666; letter-spacing: 0.3px; }
  .poster.full-stack .poster-title    { letter-spacing: 3px; font-weight: 700; line-height: 1.05; }
  .poster.full-stack .poster-subtitle { text-transform: uppercase; letter-spacing: 3px; color: #444; font-weight: 600; }
  .poster.full-stack .poster-date     { color: #777; letter-spacing: 2px; }
  .poster.full-stack .poster-coords   { color: #888; letter-spacing: 1px; }

/* ── Map shape outline ── */
  /* Shell has NO mask so filter sees the already-masked child → shadow follows shape */
  #posterMapShell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  #posterMapShell.map-outline {
    filter:
      drop-shadow(1.5px 0 0 rgba(0,0,0,0.55))
      drop-shadow(-1.5px 0 0 rgba(0,0,0,0.55))
      drop-shadow(0 1.5px 0 rgba(0,0,0,0.55))
      drop-shadow(0 -1.5px 0 rgba(0,0,0,0.55))
      drop-shadow(1px 1px 0 rgba(0,0,0,0.4))
      drop-shadow(-1px -1px 0 rgba(0,0,0,0.4));
  }

  .poster-map.square { border-radius: 0; }
  .poster-map.heart-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 90 90' preserveAspectRatio='none'><path d='M50,90 C50,90 5,62 5,32 C5,18 16,8 28,8 C38,8 46,14 50,24 C54,14 62,8 72,8 C84,8 95,18 95,32 C95,62 50,90 50,90 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 90 90' preserveAspectRatio='none'><path d='M50,90 C50,90 5,62 5,32 C5,18 16,8 28,8 C38,8 46,14 50,24 C54,14 62,8 72,8 C84,8 95,18 95,32 C95,62 50,90 50,90 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .poster-map.house-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 86 86' preserveAspectRatio='none'><path d='M8,46 L8,94 L94,94 L94,46 L78,32 L78,18 L66,18 L66,22 L50,8 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 86 86' preserveAspectRatio='none'><path d='M8,46 L8,94 L94,94 L94,46 L78,32 L78,18 L66,18 L66,22 L50,8 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .poster-map.chapel-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='130 244 334 352' preserveAspectRatio='none'><rect x='293' y='251' width='8' height='54' fill='black'/><rect x='277' y='266' width='40' height='8' fill='black'/><polygon points='297,299 227,394 227,568 367,568 367,394' fill='black'/><polygon points='219,421 153,462 153,568 219,568' fill='black'/><polygon points='375,421 441,462 441,568 375,568' fill='black'/><rect x='137' y='575' width='320' height='14' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='130 244 334 352' preserveAspectRatio='none'><rect x='293' y='251' width='8' height='54' fill='black'/><rect x='277' y='266' width='40' height='8' fill='black'/><polygon points='297,299 227,394 227,568 367,568 367,394' fill='black'/><polygon points='219,421 153,462 153,568 219,568' fill='black'/><polygon points='375,421 441,462 441,568 375,568' fill='black'/><rect x='137' y='575' width='320' height='14' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .poster-map.arch-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M8,100 L8,48 A42,48 0 0 1 92,48 L92,100 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M8,100 L8,48 A42,48 0 0 1 92,48 L92,100 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .poster-map.pill-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><rect x='18' y='3' width='64' height='94' rx='32' ry='32' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><rect x='18' y='3' width='64' height='94' rx='32' ry='32' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .poster-map.tag-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M12,4 L88,4 L88,72 L50,96 L12,72 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M12,4 L88,4 L88,72 L50,96 L12,72 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .poster-map.rounded-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><rect x='3' y='3' width='94' height='94' rx='20' ry='20' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><rect x='3' y='3' width='94' height='94' rx='20' ry='20' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .poster-map.diamond-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='50,2 98,50 50,98 2,50' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='50,2 98,50 50,98 2,50' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .poster-map.star-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='50,2 62,34 96,35 69,56 78,89 50,70 22,89 31,56 4,35 38,34' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='50,2 62,34 96,35 69,56 78,89 50,70 22,89 31,56 4,35 38,34' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .poster-map.pin-shape {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M50,96 C30,80 8,64 8,44 A42,42 0 0 0 92,44 C92,64 70,80 50,96 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M50,96 C30,80 8,64 8,44 A42,42 0 0 0 92,44 C92,64 70,80 50,96 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }

  .poster-text { padding: 18px 22px 24px; text-align: center; width: 100%; font-family: 'Montserrat', sans-serif; box-sizing: border-box; pointer-events: auto; }
  /* Poster lives inside .ruler-wrap (pointer-events:none) — explicitly re-enable
     the text so click-to-edit works on desktop, not just mobile. */
  .poster-text, .poster-text .row, .poster-text [id] { pointer-events: auto; }
  .poster-title { font-weight: 700; letter-spacing: 5px; color: #111; text-transform: uppercase; line-height: 1.1; }
  .poster-tagline { color: #444; font-style: italic; line-height: 1.3; letter-spacing: 0.5px; }
  .poster-subtitle { letter-spacing: 4px; color: #555; text-transform: uppercase; line-height: 1.3; font-weight: 400; }
  .poster-divider { display: inline-block; width: 32px; height: 1px; background: #888; margin: 8px auto; vertical-align: middle; }
  .poster-date { letter-spacing: 2.5px; color: #666; text-transform: uppercase; line-height: 1.4; }
  .poster-coords { letter-spacing: 1.5px; color: #777; font-style: italic; line-height: 1.4; }
  .poster-text .row { margin-bottom: 8px; }
  .poster-text .row[data-row="title"] { margin-bottom: 10px; }
  .poster-text .row[data-row="tagline"] { margin-bottom: 12px; }
  .poster-text .row[data-row="divider"] { margin: 4px 0; }
  .poster-text .row[data-row="date"] { margin-top: 2px; }
  .poster-text .row[data-row="coords"] { margin-top: 2px; }
  .poster-text .row.hidden { display: none !important; }

  /* ── Divider styles ── line types are crisp CSS rules; motif types render a clean
     inline SVG (built in applyDividerStyle) and just need to be centred. ── */
  .poster-divider.dv-hair     { width: 32px; height: 1px; background: currentColor; border: none; opacity: 0.85; border-radius: 0; }
  .poster-divider.dv-rule     { width: 58%;  height: 1px; background: currentColor; border: none; opacity: 0.75; border-radius: 0; }
  .poster-divider.dv-double   { width: 44px; height: 5px; background: none; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: 0.8; }
  .poster-divider.dv-diamond,
  .poster-divider.dv-stars,
  .poster-divider.dv-ornament,
  .poster-divider.dv-heart,
  .poster-divider.dv-hearts,
  .poster-divider.dv-heartline {
    width: auto; height: auto; background: none; opacity: 1;
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
  }
  .poster-divider svg { display: block; height: auto; overflow: visible; }

  .poster-divider.dv-dash { color: currentColor; }
  /* Rule + Double span the full text width on every full-page layout (and stay
     visible on Float / Editorial / Minimal). Hair stays a short accent. */
  .poster[class*="full-"] .poster-text .poster-divider.dv-rule,
  .poster[class*="full-"] .poster-text .poster-divider.dv-double { width: 100% !important; display: block; }
  .poster[class*="full-"] .poster-text .poster-divider.dv-hair { width: 56px !important; display: block; }
  /* The centred flex-column full-page captions shrink-wrap each row to its content width,
     which collapsed width:100% Rule/Double lines to nothing. Stretch the divider row to the
     full caption width so Rule and Double render on every full-page style. */
  .poster[class*="full-"] .poster-text .row[data-row="divider"]:not(.hidden) { display: block !important; width: 100% !important; text-align: center; align-self: stretch; }
  .poster.full-bottom .poster-text .row[data-row="divider"],
  .poster.full-layout .poster-text .row[data-row="divider"],
  .poster.full-stack  .poster-text .row[data-row="divider"] { text-align: right; }

  /* ── Full-page layout variants ── */
  .poster.full-layout { display: flex; flex-direction: column; }
  .poster.full-layout .poster-text {
    order: 1;
    padding: calc(18px*var(--ps,1)) 22px calc(14px*var(--ps,1));
    text-align: left;
    display: grid;
    grid-template-areas:
      "tagrow   tagrow"
      "titlerow titlerow"
      "divrow   divrow"
      "daterow  daterow"
      "coordrow coordrow";
    grid-template-columns: 1fr auto;
    gap: 0;
  }
  .poster.full-layout .poster-text .row[data-row="tagline"] {
    grid-area: tagrow;
    display: block;
    margin-bottom: 2px;
  }
  .poster.full-layout .poster-text .row[data-row="tagline"] .poster-tagline {
    font-style: italic;
    font-size: 0.75em;
    color: #666;
    letter-spacing: 0.5px;
  }
  .poster.full-layout .poster-text .row[data-row="title"] {
    grid-area: titlerow;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
  }
  .poster.full-layout .poster-text .row[data-row="subtitle"] { display: none; } /* shown inline via title row */
  .poster.full-layout .poster-text .row[data-row="divider"] { grid-area: divrow; margin: 4px 0 6px; }
  .poster.full-layout .poster-text .row[data-row="date"] { grid-area: daterow; margin: 2px 0; }
  .poster.full-layout .poster-text .row[data-row="coords"] { grid-area: coordrow; margin: 0; }
  .poster.full-layout .poster-text .row[data-row="divider"] .poster-divider { width: 100%; display: block; }
  .poster.full-layout .poster-text .row[data-row="divider"] .poster-divider.dv-dots,
  .poster.full-layout .poster-text .row[data-row="divider"] .poster-divider.dv-ornament { width: auto; display: inline-block; }
  .poster.full-layout .poster-title { text-align: left; letter-spacing: 3px; line-height: 1.05; }
  .poster.full-layout .poster-subtitle { letter-spacing: 2px; font-size: calc(0.55em * var(--font-scale,1)) !important; color: #555; text-align: right; align-self: flex-end; flex-shrink: 0; }
  .poster.full-layout .poster-coords { letter-spacing: 1px; font-style: normal; color: #777; }
  .poster.full-layout .poster-map {
    order: 2;
    flex: 1;
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Story-mode: tagline IS the hero — title becomes supporting text */
  .poster-text.story-mode .poster-title  { font-weight: 300; letter-spacing: 5px; color: #888; }
  .poster-text.story-mode .poster-tagline { color: #111; font-weight: 600; font-style: italic; }

  /* Per-font tagline hero treatments */
  .poster-text.story-mode.font-modern   .poster-tagline { font-weight: 600; font-style: italic; letter-spacing: 1px; }
  .poster-text.story-mode.font-editorial .poster-tagline { font-style: italic; font-weight: 700; }
  .poster-text.story-mode.font-classic  .poster-tagline { font-style: italic; font-weight: 500; }
  .poster-text.story-mode.font-timeless .poster-tagline { font-style: italic; font-weight: 500; }
  .poster-text.story-mode.font-romantic .poster-tagline { font-family: 'Great Vibes', cursive !important; font-style: normal; font-size: calc(1.35em * var(--font-scale,1)) !important; }
  .poster-text.story-mode.font-romantic .poster-title   { font-family: 'Montserrat', sans-serif; font-weight: 300; }
  .poster-text.story-mode.font-minimal  .poster-tagline { font-style: normal; letter-spacing: 3px; font-weight: 300; }
  .poster-text.story-mode.font-heritage .poster-tagline { font-style: normal; letter-spacing: 2px; font-weight: 400; }
  .poster-text.story-mode.font-bold     .poster-tagline { font-family: 'Montserrat', sans-serif !important; font-style: italic; font-weight: 500; }
  .poster-text.story-mode.font-bold     .poster-title   { font-family: 'Montserrat', sans-serif; font-weight: 300; }

  /* Playfair Display — luxury editorial, high contrast */
  .poster-text.font-editorial { font-family: 'Playfair Display', serif; }
  .poster-text.font-editorial .poster-title { font-weight: 700; letter-spacing: 4px; }
  .poster-text.font-editorial .poster-tagline { font-style: italic; font-weight: 400; }
  .poster-text.font-editorial .poster-subtitle { letter-spacing: 3px; font-weight: 400; }

  /* Cormorant Garamond — European refined elegance */
  .poster-text.font-classic { font-family: 'Cormorant Garamond', serif; }
  .poster-text.font-classic .poster-title { font-weight: 500; letter-spacing: 5px; }
  .poster-text.font-classic .poster-tagline { font-style: italic; font-weight: 400; }
  .poster-text.font-classic .poster-subtitle { letter-spacing: 4px; font-weight: 400; }

  /* Lora — warm calligraphic serif, emotional and timeless */
  .poster-text.font-timeless { font-family: 'Lora', serif; }
  .poster-text.font-timeless .poster-title { font-weight: 500; letter-spacing: 4px; }
  .poster-text.font-timeless .poster-tagline { font-style: italic; font-weight: 400; }
  .poster-text.font-timeless .poster-subtitle { letter-spacing: 3px; font-weight: 400; }

  /* Great Vibes — flowing romantic script; small text in Montserrat */
  .poster-text.font-romantic { font-family: 'Great Vibes', cursive; }
  .poster-text.font-romantic .poster-tagline { font-style: normal; }
  .poster-text.font-romantic .poster-title { font-family: 'Montserrat', sans-serif; font-weight: 400; letter-spacing: 5px; text-transform: uppercase; }
  .poster-text.font-romantic .poster-subtitle { font-family: 'Montserrat', sans-serif; letter-spacing: 4px; font-weight: 300; }
  .poster-text.font-romantic .poster-coords { font-family: 'Montserrat', sans-serif; letter-spacing: 2px; font-weight: 300; }
  .poster-text.font-romantic .poster-date { font-family: 'Montserrat', sans-serif; letter-spacing: 2px; font-weight: 300; }

  /* Josefin Sans — ultra-clean Scandinavian geometric */
  .poster-text.font-minimal { font-family: 'Josefin Sans', sans-serif; }
  .poster-text.font-minimal .poster-title { font-weight: 300; letter-spacing: 10px; }
  .poster-text.font-minimal .poster-tagline { font-style: normal; letter-spacing: 2px; font-weight: 300; }
  .poster-text.font-minimal .poster-subtitle { letter-spacing: 7px; font-weight: 300; }

  /* Cinzel — Roman inscription type, classical and monumental */
  .poster-text.font-heritage { font-family: 'Cinzel', serif; }
  .poster-text.font-heritage .poster-title { font-weight: 500; letter-spacing: 5px; }
  .poster-text.font-heritage .poster-tagline { font-style: normal; letter-spacing: 2px; font-weight: 400; text-transform: uppercase; font-size: 0.8em; }
  .poster-text.font-heritage .poster-subtitle { letter-spacing: 4px; font-weight: 400; }

  /* Abril Fatface — impactful display serif with real character */
  .poster-text.font-bold { font-family: 'Abril Fatface', serif; }
  .poster-text.font-bold .poster-title { font-weight: 400; letter-spacing: 2px; }
  .poster-text.font-bold .poster-tagline { font-family: 'Montserrat', sans-serif; font-style: normal; letter-spacing: 2px; font-weight: 300; }
  .poster-text.font-bold .poster-subtitle { font-family: 'Montserrat', sans-serif; letter-spacing: 4px; font-weight: 300; }
  .poster-text.font-bold .poster-coords { font-family: 'Montserrat', sans-serif; letter-spacing: 2px; font-weight: 300; }
  .poster-text.font-bold .poster-date { font-family: 'Montserrat', sans-serif; letter-spacing: 2px; font-weight: 300; }

  /* Inter — true minimal grotesque, clean and architectural */
  .poster-text.font-clean { font-family: 'Inter', sans-serif; }
  .poster-text.font-clean .poster-title { font-weight: 400; letter-spacing: 6px; }
  .poster-text.font-clean .poster-tagline { font-style: normal; letter-spacing: 1px; font-weight: 300; }
  .poster-text.font-clean .poster-subtitle { letter-spacing: 5px; font-weight: 300; }
  .poster-text.font-clean .poster-date { letter-spacing: 2px; font-weight: 300; }
  .poster-text.font-clean .poster-coords { letter-spacing: 1.5px; font-weight: 300; }
  .poster-text.story-mode.font-clean .poster-tagline { font-style: normal; letter-spacing: 2px; font-weight: 300; }

  .size-label { display: none; }

  /* ════════════════════════════════════════════════════════════
     BORDER FRAME — minimal whole-poster frames (9 designs)
     A single overlay div inset from the poster edge. Inset px is set
     in JS (applyPosterSize) so it scales with the poster.
     ════════════════════════════════════════════════════════════ */
  #posterBorder { position: absolute; inset: 16px; pointer-events: none; z-index: 6; display: none; box-sizing: border-box; }
  #poster.has-border #posterBorder { display: block; }
  #posterBorder::after, #posterBorder::before { content: none; }
  /* Border Frame applies only to standard map-shape layouts — never on full-page
     styles (it framed the whole poster incl. the text footer and looked wrong). */
  .poster.full-layout  #posterBorder,
  .poster.full-bottom  #posterBorder,
  .poster.full-overlay #posterBorder,
  .poster.full-bleed   #posterBorder,
  .poster.full-minimal #posterBorder,
  .poster.full-frame   #posterBorder,
  .poster.full-gallery #posterBorder,
  .poster.full-band    #posterBorder,
  .poster.full-stack   #posterBorder { display: none !important; }

  #posterBorder.bf-line    { border: 1px solid #1a1a1a; }
  #posterBorder.bf-fine    { border: 1px solid rgba(26,26,26,0.5); }
  #posterBorder.bf-double  { border: 1px solid #1a1a1a; }
  #posterBorder.bf-double::after  { content: ''; position: absolute; inset: 6px; border: 1px solid #1a1a1a; }
  #posterBorder.bf-bold    { border: 2.5px solid #1a1a1a; }
  #posterBorder.bf-bold::after    { content: ''; position: absolute; inset: 7px; border: 1px solid #1a1a1a; }
  #posterBorder.bf-rounded { border: 1px solid #1a1a1a; border-radius: 12px; }
  #posterBorder.bf-dashed  { border: 1px dashed #1a1a1a; }
  #posterBorder.bf-dotted  { border: 1.5px dotted #1a1a1a; }
  #posterBorder.bf-ruletb  { border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; }
  #posterBorder.bf-corners {
    --c: #1a1a1a; --len: 26px; --th: 1.5px;
    background:
      linear-gradient(var(--c),var(--c)) left top, linear-gradient(var(--c),var(--c)) left top,
      linear-gradient(var(--c),var(--c)) right top, linear-gradient(var(--c),var(--c)) right top,
      linear-gradient(var(--c),var(--c)) left bottom, linear-gradient(var(--c),var(--c)) left bottom,
      linear-gradient(var(--c),var(--c)) right bottom, linear-gradient(var(--c),var(--c)) right bottom;
    background-repeat: no-repeat;
    background-size:
      var(--len) var(--th), var(--th) var(--len), var(--len) var(--th), var(--th) var(--len),
      var(--len) var(--th), var(--th) var(--len), var(--len) var(--th), var(--th) var(--len);
  }

  /* Border picker chips (mini previews) */
  .bf-chip { display: block; width: 30px; height: 38px; margin: 0 auto 5px; box-sizing: border-box; position: relative; background: #fff; }
  .bf-chip.bf-line    { border: 1px solid #555; }
  .bf-chip.bf-fine    { border: 1px solid #aaa; }
  .bf-chip.bf-double  { border: 1px solid #555; }
  .bf-chip.bf-double::after  { content: ''; position: absolute; inset: 3px; border: 1px solid #555; }
  .bf-chip.bf-bold    { border: 2px solid #555; }
  .bf-chip.bf-bold::after    { content: ''; position: absolute; inset: 3px; border: 1px solid #555; }
  .bf-chip.bf-rounded { border: 1px solid #555; border-radius: 6px; }
  .bf-chip.bf-dashed  { border: 1px dashed #555; }
  .bf-chip.bf-dotted  { border: 1.5px dotted #555; }
  .bf-chip.bf-ruletb  { border-top: 1px solid #555; border-bottom: 1px solid #555; }
  .bf-chip.bf-corners {
    --c: #555; --len: 11px; --th: 1.5px;
    background:
      linear-gradient(var(--c),var(--c)) left top, linear-gradient(var(--c),var(--c)) left top,
      linear-gradient(var(--c),var(--c)) right top, linear-gradient(var(--c),var(--c)) right top,
      linear-gradient(var(--c),var(--c)) left bottom, linear-gradient(var(--c),var(--c)) left bottom,
      linear-gradient(var(--c),var(--c)) right bottom, linear-gradient(var(--c),var(--c)) right bottom;
    background-repeat: no-repeat;
    background-size:
      var(--len) var(--th), var(--th) var(--len), var(--len) var(--th), var(--th) var(--len),
      var(--len) var(--th), var(--th) var(--len), var(--len) var(--th), var(--th) var(--len);
  }
  #borderStylePicker { transition: opacity 0.18s ease; }

  .bottom-bar { position: absolute; bottom: 0; left: 404px; right: 0; background: #fff; border-top: 1px solid #eee; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; z-index: 20; }
  .price-info .label { font-size: 10px; letter-spacing: 1.5px; color: #777; text-transform: uppercase; }
  .price-info .price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
  .price-old { font-size: 14px; color: #aaa; text-decoration: line-through; }
  .price-new { font-size: 24px; font-weight: 500; color: #111; }
  .price-badge { background: #e8f5e9; color: #2e7d32; font-size: 11px; padding: 3px 8px; border-radius: 3px; font-weight: 500; }

  .bottom-bar .right-group { display: flex; align-items: flex-end; gap: 16px; }
  .bottom-select-wrap { display: flex; flex-direction: column; gap: 4px; }
  .bottom-select-wrap .label { font-size: 10px; letter-spacing: 1.5px; color: #777; text-transform: uppercase; }
  .bottom-select { padding: 10px 32px 10px 12px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; font-family: inherit; background: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; color: #111; }
  .bottom-select:focus { outline: none; border-color: #333; }

  .add-cart { padding: 14px 32px; background: #111; color: #fff; border: none; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 4px; transition: all 0.15s; }
  .add-cart:hover { background: #000; }
  .add-cart:disabled { background: #ccc; cursor: not-allowed; color: #666; }
  .add-cart:disabled:hover { background: #ccc; }

  /* Hide mobile-only elements on desktop */
  #mobile-nav { display: none; }
  #mobile-sheet { display: none; }
  #mobile-backdrop { display: none; }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    #mobile-nav, #mobile-sheet, #mobile-backdrop { display: flex; }
    #mobile-backdrop { display: block; }
    body {
      overflow: hidden;
      position: fixed;
      width: 100%;
      height: 100%;
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
    }
    .preview { touch-action: none; }

    .app { flex-direction: column; height: 100vh; height: 100dvh; }

    /* Hide desktop nav and sidebar */
    .nav { display: none; }
    .controls { display: none; }

    /* Preview fills full screen */
    .preview {
      flex: 1;
      padding: 0;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    /* Poster centred in preview — offset for 60px top nav */
    #poster {
      position: absolute;
      top: calc(50% + 30px);
      left: 50%;
      transform: translate(-50%, -50%);
      touch-action: none;
    }
    #poster * {
      touch-action: none;
    }
    .poster-map, #map-gl {
      touch-action: none;
    }
    /* poster-text sits below map, no overlap — allow taps for inline edit */
    .poster-text {
      pointer-events: auto;
    }
    .poster-text * {
      pointer-events: auto;
      touch-action: manipulation;
    }
    /* Only ruler lines block touches, not the container */
    .ruler {
      pointer-events: none;
    }
    #posterMap, #map-gl {
      pointer-events: auto !important;
    }

    /* Hide bottom bar on mobile — cart moved to nav tab */
    .bottom-bar { display: none !important; }
    #captureDesignBtn { display: none !important; }
    .size-label { display: none; }
    .bottom-bar .right-group { gap: 10px; }
    .add-cart { padding: 12px 20px; font-size: 13px; }
    .price-new { font-size: 20px; }
    .price-info .label { display: none; }

    /* Zoom controls — bottom-right of preview on mobile */
    .map-zoom-ctrl {
      display: flex;
      top: auto;
      bottom: 16px;
      right: 12px;
      transform: none;
    }
    .map-zoom-btn { width: 38px; height: 38px; font-size: 20px; }

    /* Mobile nav bar — top */
    #mobile-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #1a1a1a;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: env(safe-area-inset-top, 6px) 0 6px;
      z-index: 500;
      height: 60px;
    }
    #mobile-nav button {
      background: transparent;
      border: none;
      color: #8f8f8f;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      cursor: pointer;
      padding: 6px 10px;
      font-family: inherit;
      transition: color 0.15s, transform 0.15s;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }
    #mobile-nav button.active { color: #fff; }
    #mobile-nav button.active::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 2.5px; border-radius: 2px; background: #d9a94e; }
    #mobile-nav button.active svg { transform: scale(1.06); }
    #mobile-nav button svg { width: 20px; height: 20px; transition: transform 0.15s; }
    #mobile-nav button span { font-size: 9px; letter-spacing: 0.5px; }

    /* Sheet drops down from top nav */
    #mobile-sheet {
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      background: #fff;
      border-radius: 0 0 20px 20px;
      box-shadow: 0 4px 32px rgba(0,0,0,0.18);
      z-index: 400;
      max-height: 58vh;
      transform: translateY(-110%);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      display: flex;
      flex-direction: column;
    }
    #mobile-sheet.open {
      transform: translateY(0);
    }
    #mobile-sheet-handle {
      width: 56px;
      height: 4px;
      background: #ccc;
      background-clip: content-box;
      border-radius: 3px;
      margin: 6px auto 12px;
      flex-shrink: 0;
      order: 99;
      cursor: grab;
      touch-action: none;
    }
    #mobile-sheet-handle::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 30px;
    }
    #mobile-sheet-title {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1.2px;
      color: #777;
      text-transform: uppercase;
      text-align: center;
      padding: 12px 20px 0;
      flex-shrink: 0;
    }
    #mobile-sheet-content {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 16px 20px 20px;
      flex: 1;
    }
    #mobile-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.18);
      z-index: 390;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    #mobile-backdrop.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* Hide heart marker when any sheet is open */
    body.sheet-open .heart-marker { display: none !important; }

    /* Mobile cart sheet — drops from top nav */
    #mobile-cart-sheet {
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      background: #fff;
      border-radius: 0 0 20px 20px;
      box-shadow: 0 4px 32px rgba(0,0,0,0.18);
      z-index: 400;
      padding: 16px 20px 32px;
      transform: translateY(-110%);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #mobile-cart-sheet.open { transform: translateY(0); }
    #mobile-cart-handle { width: 36px; height: 4px; background: #ddd; border-radius: 2px; margin: 0 auto 16px; }
    #mobile-cart-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
    #mobile-cart-price-old { font-size: 14px; color: #aaa; text-decoration: line-through; }
    #mobile-cart-price-new { font-size: 28px; font-weight: 500; color: #111; }
    #mobile-cart-badge { background: #e8f5e9; color: #2e7d32; font-size: 11px; padding: 3px 8px; border-radius: 3px; font-weight: 500; }
    #mobile-cart-size-label { font-size: 10px; letter-spacing: 1.5px; color: #777; text-transform: uppercase; margin-bottom: 6px; }
    #mobile-cart-select { width: 100%; padding: 12px 14px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 14px; font-family: inherit; background: #fff; color: #111; margin-bottom: 14px; appearance: none; -webkit-appearance: none; }
    #mobile-cart-btn { width: 100%; padding: 16px; background: #111; color: #fff; border: none; font-size: 15px; font-weight: 500; cursor: pointer; border-radius: 6px; letter-spacing: 0.5px; }

    /* Tutorial on mobile */
    #tutorial-card {
      width: calc(100vw - 32px) !important;
      left: 16px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      max-height: 80vh;
      overflow-y: auto;
    }
    #tutorial-card.active {
      opacity: 1 !important;
      transform: translateY(-50%) !important;
    }
    #tutorial-btn { bottom: 70px; right: 16px; }
    /* Highlight the active mobile nav button during tutorial */
    #mobile-nav button.tut-highlight {
      outline: 2px solid #fff !important;
      outline-offset: 3px !important;
      background: rgba(255,255,255,0.18) !important;
      border-radius: 6px;
    }
  }

  /* ── Tutorial ── */
  #tutorial-card {
    position: fixed;
    background: #ffffff;
    z-index: 9010;
    border-radius: 14px;
    padding: 28px 28px 22px;
    width: 310px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
  }
  #tutorial-card.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
  #tutorial-progress { display: flex; gap: 5px; margin-bottom: 20px; }
  #tutorial-progress span { flex: 1; height: 3px; background: #e8e8e8; border-radius: 2px; transition: background 0.3s; }
  #tutorial-progress span.done { background: #111; }
  #tutorial-step-icon { width: 42px; height: 42px; background: #f4f1eb; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  #tutorial-step-icon svg { width: 22px; height: 22px; }
  #tutorial-step-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: #bbb; text-transform: uppercase; margin-bottom: 5px; }
  #tutorial-step-title { font-size: 19px; font-weight: 600; color: #111; margin-bottom: 10px; line-height: 1.25; }
  #tutorial-step-body { font-size: 13px; color: #555; line-height: 1.65; margin-bottom: 24px; }
  #tutorial-step-body strong { color: #111; font-weight: 600; }
  #tutorial-step-body code { background: #f4f1eb; color: #555; padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 11.5px; }
  #tutorial-actions { display: flex; align-items: center; justify-content: space-between; }
  #tutorial-skip { background: none; border: none; font-size: 12px; color: #bbb; cursor: pointer; font-family: inherit; padding: 0; }
  #tutorial-skip:hover { color: #666; }
  #tutorial-next { background: #111; color: #fff; border: none; padding: 11px 24px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.15s; letter-spacing: 0.2px; }
  #tutorial-next:hover { background: #000; }
  #tutorial-prompt { display: none; }
  #tutorial-btn { position: fixed; top: 16px; right: 16px; width: 38px; height: 38px; background: #fff; border: 1px solid #e0e0e0; border-radius: 50%; color: #111; font-size: 15px; font-weight: 600; cursor: pointer; z-index: 8999; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; font-family: inherit; transition: background 0.15s, box-shadow 0.15s; }
  #tutorial-btn:hover { background: #f4f1eb; box-shadow: 0 4px 14px rgba(0,0,0,0.14); }
  @media (max-width: 768px) {
    #tutorial-btn { top: auto; right: auto; bottom: 14px; left: 16px; width: 42px; height: 42px; background: #111; color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
    #tutorial-prompt { display: flex; align-items: center; gap: 6px; position: fixed; bottom: 20px; left: 68px; z-index: 8998; pointer-events: none; }
    #tutorial-prompt span { background: #1a1a1a; color: #fff; font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 20px; white-space: nowrap; letter-spacing: 0.3px; font-family: -apple-system, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
    #tutorial-prompt svg { color: #1a1a1a; flex-shrink: 0; }
    #tutorial-btn:hover { background: #000; }
  }
  /* ── Smoothness & performance polish ── */
  * { -webkit-tap-highlight-color: transparent; }
  #tutorial-card { transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), top 0.18s ease, left 0.18s ease; will-change: transform, opacity, top; }
  #tut-content { transition: opacity 0.08s ease, transform 0.08s ease; }
  #tut-content.fading { opacity: 0; transform: translateY(3px); }
  .poster-map { transition: border-radius 0.25s ease; will-change: transform; }
  #map-gl { will-change: transform; }
  .shape-btn, .style-btn, .font-btn, .colour-btn, .marker-size-btn, .text-size-btn, .nav button {
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.1s ease;
  }
  .shape-btn:active, .style-btn:active, .font-btn:active, .colour-btn:active { transform: scale(0.97); }
  #controls, .sheet, .sheet-body { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

  /* ── Tutorial arrow indicator ── */
  #tut-arrow { display: none !important; }
  /* Active section gets a subtle left accent */
  /* Sidebar sections get a clean outline box */
  .tut-highlight {
    outline: 2.5px solid #111 !important;
    outline-offset: 5px !important;
  }
  /* Poster element gets a ring */
  #poster.tut-highlight {
    outline: 3px solid #111 !important;
    outline-offset: 8px !important;
  }
  /* Size select and Add-to-cart button */
  #sizeSelect.tut-highlight, #addCartBtn.tut-highlight {
    outline: 2.5px solid #111 !important;
    outline-offset: 6px !important;
  }

  /* ════════════════════════════════════════════════════════════
     LOCATION SECTION — overhauled search, coordinate helper, examples
     ════════════════════════════════════════════════════════════ */
  .search-input { transition: border-color 0.16s ease, box-shadow 0.16s ease; }
  .search-input:focus { box-shadow: 0 0 0 3px rgba(17,17,17,0.06); }

  .search-note { font-size: 11.5px; line-height: 1.5; margin-top: 8px; padding: 9px 11px; border-radius: 6px; display: none; }
  .search-note.show { display: block; }
  .search-note.info  { background: #f4f1eb; color: #6a6256; }
  .search-note.warn  { background: #fdf3e7; color: #9a6a2e; border: 1px solid #f1ddc2; }
  .search-note.ok    { background: #eaf5ec; color: #2e7d46; }
  .search-note a { color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

  .coord-help-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; margin-top: 12px; padding: 9px 12px;
    background: #faf9f6; border: 1px solid #ececea; border-radius: 7px;
    font-family: inherit; font-size: 12px; color: #555; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .coord-help-toggle:hover { background: #f4f1eb; border-color: #ddd; color: #222; }
  .coord-help-toggle .chev { transition: transform 0.2s ease; flex-shrink: 0; color: #999; }
  .coord-help-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .coord-help {
    margin-top: 8px; padding: 13px 15px; background: #fbfaf8;
    border: 1px solid #efece7; border-radius: 8px;
    font-size: 12px; color: #5a5650; line-height: 1.55;
    animation: coordHelpIn 0.22s ease;
  }
  @keyframes coordHelpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .coord-help p { margin: 0 0 8px; }
  .coord-help p:last-child { margin-bottom: 0; }
  .coord-help ol { margin: 0 0 4px; padding-left: 18px; }
  .coord-help li { margin-bottom: 5px; }
  .coord-help strong { color: #333; }
  .coord-help .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; background: #f0ece4; color: #4a463f; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

  .example-row { margin-top: 16px; }
  .example-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: #bbb; text-transform: uppercase; display: block; margin-bottom: 8px; }

  /* ════════════════════════════════════════════════════════════
     LETTER-SPACING slider (shares font-slider styling)
     ════════════════════════════════════════════════════════════ */
  #letterSpaceSlider, #letterSpaceSlider-clone { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: #e0e0e0; outline: none; cursor: pointer; }
  #letterSpaceSlider::-webkit-slider-thumb, #letterSpaceSlider-clone::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #111; cursor: pointer; }
  #letterSpaceSlider::-moz-range-thumb, #letterSpaceSlider-clone::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #111; cursor: pointer; border: none; }

  /* ============================================================
     STATIC UNDO / START-OVER control cluster (desktop + mobile)
     ============================================================ */
  .history-dock {
    position: fixed; z-index: 600; display: flex; align-items: center; gap: 8px;
    left: 424px; top: 18px; bottom: auto;
  }
  .history-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 14px;
    background: #fff; border: 1px solid #dcdcdc; border-radius: 9px;
    font-family: inherit; font-size: 13px; color: #333; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .history-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  .history-btn:hover { background: #faf9f6; border-color: #bbb; transform: translateY(-1px); }
  .history-btn:active { transform: translateY(0); }
  .history-btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; transform: none; }
  .history-btn.danger { color: #a33; }
  .history-btn.danger:hover { color: #c0392b; border-color: #e3b7b1; background: #fdf4f3; }
  .history-btn .hb-label { letter-spacing: 0.2px; }

  @media (max-width: 768px) {
    .history-dock {
      left: 50%; transform: translateX(-50%);
      bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
      top: auto;
    }
    body.sheet-open .history-dock { display: none; }
    .history-btn { height: 38px; padding: 0 13px; font-size: 12.5px; box-shadow: 0 4px 16px rgba(0,0,0,0.16); }
    .history-btn .hb-label { display: none; }
    .history-btn.has-text .hb-label { display: inline; }
  }

  /* ============================================================
     MARKER off-screen "recenter" floating button (over the map)
     ============================================================ */
  .marker-recenter {
    position: absolute; z-index: 11; left: 50%; top: 18px; transform: translateX(-50%) translateY(-8px);
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 14px;
    background: #fff; color: #333; border: 1px solid #dcdcdc; border-radius: 9px;
    font-family: inherit; font-size: 13px;
    cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent; white-space: nowrap;
  }
  .marker-recenter:hover { background: #faf9f6; border-color: #bbb; }
  .marker-recenter.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .marker-recenter svg { width: 16px; height: 16px; flex-shrink: 0; color: #a33; }
  @media (max-width: 768px) {
    .marker-recenter { top: 72px; height: 38px; font-size: 12.5px; }
    body.sheet-open .marker-recenter { display: none; }
  }

  /* Marker section cohesion */
  .marker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
  .marker-action-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 8px; background: #f8f7f4; border: 1px solid #e4e0db; border-radius: 7px;
    font-family: inherit; font-size: 11.5px; color: #555; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .marker-action-btn:hover { border-color: #bbb; background: #fff; color: #222; }
  .marker-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
  .marker-divider { height: 1px; background: #f0ede9; margin: 16px 0 14px; border: none; }

  /* ============================================================
     RENDER MODE (?render) — strip the whole UI down to just the poster
     so render.js (Puppeteer) can screenshot a clean print file.
     ============================================================ */
  body.render-mode #tut-arrow,
  body.render-mode #tutorial-card,
  body.render-mode #tutorial-btn,
  body.render-mode #tutorial-prompt,
  body.render-mode #mobile-nav,
  body.render-mode #mobile-backdrop,
  body.render-mode #mobile-sheet,
  body.render-mode #mobile-cart-sheet,
  body.render-mode .nav,
  body.render-mode .controls,
  body.render-mode .bottom-bar,
  body.render-mode .history-dock,
  body.render-mode .marker-recenter,
  body.render-mode #captureDesignBtn,
  body.render-mode #inline-edit-popover,
  body.render-mode .ruler { display: none !important; }

  body.render-mode, body.render-mode .app {
    margin: 0 !important; padding: 0 !important; width: 100vw; height: 100vh;
    background: #fff !important; overflow: hidden;
  }
  body.render-mode .app { display: block; }
  body.render-mode .preview {
    position: fixed !important; inset: 0 !important;
    width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important;
    background: #fff !important; display: flex !important; align-items: center; justify-content: center;
  }
  body.render-mode .ruler-wrap {
    width: 100% !important; height: 100% !important; margin: 0 !important;
    display: flex !important; align-items: center; justify-content: center;
  }
  body.render-mode #poster { box-shadow: none !important; }

  /* First-time welcome popover (replaces the always-on example row) */
  .example-row { display: none; }
  #welcome-pop { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 8800; background: #fff; border: 1px solid #ececec; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.16); padding: 18px 20px 16px; width: min(420px, 92vw); display: none; }
  #welcome-pop.show { display: block; }
  #welcome-close { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 20px; line-height: 1; color: #aaa; cursor: pointer; font-family: inherit; }
  #welcome-pop .welcome-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 4px; letter-spacing: 0.2px; }
  #welcome-pop .welcome-sub { font-size: 12px; color: #777; line-height: 1.45; margin-bottom: 12px; }
  #welcome-pop .welcome-cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  #welcome-pop .welcome-cities button { background: #f8f7f4; border: 1px solid #e4e0db; border-radius: 7px; padding: 9px 4px; font-size: 12px; color: #444; cursor: pointer; font-family: inherit; transition: all 0.15s; }
  #welcome-pop .welcome-cities button:hover { background: #fff; border-color: #c8c2b8; }

  /* Permanent Lock-pin button on the preview */
  .lock-pin-float { position: absolute; top: 18px; right: 18px; z-index: 600; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; background: #fff; color: #333; border: 1px solid #d8d8d8; border-radius: 20px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.12); transition: all 0.15s; }
  .lock-pin-float svg { width: 14px; height: 14px; }
  .lock-pin-float:hover { border-color: #bbb; }
  .lock-pin-float.locked { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
  body.exporting .lock-pin-float { display: none !important; }

  /* ── Reset for the new full-page styles (map full-bleed) ── */
  .poster.full-postcard .poster-map, .poster.full-emblem .poster-map { border-radius: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .poster.full-postcard #posterMapShell, .poster.full-emblem #posterMapShell { display: contents; }

  /* ─ Postcard: full-bleed map with a solid white caption band + double top rule ─ */
  .poster.full-postcard { position: relative; overflow: hidden; display: block; }
  .poster.full-postcard .poster-map { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; }
  .poster.full-postcard .poster-text {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: calc(24px*var(--ps,1)) 26px calc(26px*var(--ps,1)); background: #fff;
    display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
    border-top: 2px solid #1a1a1a;
  }
  .poster.full-postcard .poster-text::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: #1a1a1a; }
  .poster.full-postcard .poster-text .row { display: flex; justify-content: center; }
  .poster.full-postcard .poster-tagline  { font-style: italic; color: #777; letter-spacing: 0.5px; }
  .poster.full-postcard .poster-title    { letter-spacing: 5px; font-weight: 600; }
  .poster.full-postcard .poster-subtitle { text-transform: uppercase; letter-spacing: 3px; color: #666; }
  .poster.full-postcard .poster-date, .poster.full-postcard .poster-coords { color: #888; letter-spacing: 1px; }

  /* ─ Emblem: full-bleed map with a soft white vignette and centred text (no hard panel) ─ */
  .poster.full-emblem { position: relative; overflow: hidden; display: block; }
  .poster.full-emblem .poster-map { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; }
  .poster.full-emblem::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 78% 56% at 50% 80%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0) 72%); }
  .poster.full-emblem .poster-text {
    position: absolute; left: 0; right: 0; bottom: 12%; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 30px;
  }
  .poster.full-emblem .poster-text .row { display: flex; justify-content: center; }
  .poster.full-emblem .poster-tagline  { font-style: italic; color: #555; letter-spacing: 0.5px; }
  .poster.full-emblem .poster-title    { letter-spacing: 6px; font-weight: 600; }
  .poster.full-emblem .poster-subtitle { text-transform: uppercase; letter-spacing: 4px; color: #444; }
  .poster.full-emblem .poster-date, .poster.full-emblem .poster-coords { color: #555; letter-spacing: 1px; }

  /* ── Atlas full-bleed styles: text colour matches the map (var --poster-ink) ── */
  .poster.full-atlas .poster-map, .poster.full-atlas-left .poster-map { border-radius: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .poster.full-atlas #posterMapShell, .poster.full-atlas-left #posterMapShell { display: contents; }
  .poster.full-atlas, .poster.full-atlas-left { position: relative; overflow: hidden; display: block; }
  .poster.full-atlas .poster-map, .poster.full-atlas-left .poster-map { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; }
  .poster.full-atlas::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 98% 42% at 50% 87%, var(--poster-scrim, rgba(255,255,255,0.82)) 0%, transparent 70%); }
  .poster.full-atlas-left::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 84% 46% at 25% 86%, var(--poster-scrim, rgba(255,255,255,0.82)) 0%, transparent 72%); }
  .poster.full-atlas .poster-text {
    position: absolute; left: 0; right: 0; bottom: calc(7% * var(--ps,1)); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 0 28px;
    color: var(--poster-ink, #1A1A1A);
  }
  .poster.full-atlas-left .poster-text {
    position: absolute; left: 0; right: 0; bottom: calc(7% * var(--ps,1)); z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 0 34px;
    color: var(--poster-ink, #1A1A1A);
  }
  .poster.full-atlas .poster-text .row { display: flex; justify-content: center; }
  .poster.full-atlas-left .poster-text .row { display: flex; justify-content: flex-start; text-align: left; }
  /* every label + line divider inherits the style-matched ink */
  .poster.full-atlas .poster-title, .poster.full-atlas .poster-tagline, .poster.full-atlas .poster-subtitle, .poster.full-atlas .poster-date, .poster.full-atlas .poster-coords,
  .poster.full-atlas-left .poster-title, .poster.full-atlas-left .poster-tagline, .poster.full-atlas-left .poster-subtitle, .poster.full-atlas-left .poster-date, .poster.full-atlas-left .poster-coords { color: var(--poster-ink, #1A1A1A); }
  .poster.full-atlas .poster-divider.dv-rule, .poster.full-atlas .poster-divider.dv-double, .poster.full-atlas .poster-divider.dv-hair,
  .poster.full-atlas-left .poster-divider.dv-rule, .poster.full-atlas-left .poster-divider.dv-double, .poster.full-atlas-left .poster-divider.dv-hair { background: var(--poster-ink, #1A1A1A); }
  .poster.full-atlas .poster-tagline  { font-style: italic; opacity: 0.82; letter-spacing: 0.5px; }
  .poster.full-atlas .poster-title    { letter-spacing: 8px; font-weight: 600; }
  .poster.full-atlas .poster-subtitle { text-transform: uppercase; letter-spacing: 5px; opacity: 0.85; }
  .poster.full-atlas .poster-date     { letter-spacing: 2px; opacity: 0.78; }
  .poster.full-atlas .poster-coords   { letter-spacing: 2px; opacity: 0.7; font-style: italic; }
  .poster.full-atlas-left .poster-tagline  { font-style: italic; opacity: 0.82; letter-spacing: 0.3px; }
  .poster.full-atlas-left .poster-title    { letter-spacing: 4px; font-weight: 700; line-height: 1.05; }
  .poster.full-atlas-left .poster-subtitle { text-transform: uppercase; letter-spacing: 3px; opacity: 0.85; }
  .poster.full-atlas-left .poster-date     { letter-spacing: 2px; opacity: 0.78; }
  .poster.full-atlas-left .poster-coords   { letter-spacing: 1.5px; opacity: 0.7; font-style: italic; }

  /* Emblem motif (heart/rings) — sits above the title, inherits the text/ink colour */
  .poster-emblem { display: inline-flex; align-items: center; justify-content: center; color: inherit; line-height: 0; }
  .poster-emblem svg { display: block; width: auto; height: calc(22px * var(--font-scale, 1)); }
  .poster-text .row[data-row="emblem"] { justify-content: center; margin-bottom: 8px; }
  .emblem-btn .em-preview { display: flex; align-items: center; justify-content: center; height: 22px; color: #555; }
  .emblem-btn.active .em-preview { color: #111; }

  /* Section order on desktop sidebar (importance/flow): Location, Map Style, Shape, Labels, Font, Marker */
  #controls { display: flex; flex-direction: column; }
  #controls > * { flex-shrink: 0; }
  #controls .controls-header { order: 0; }
  #controls #map-section   { order: 1; }
  #controls #labels-section{ order: 2; }
  #controls #style-section { order: 3; }
  #controls #shape-section { order: 4; }
  #controls #font-section  { order: 5; }
  #controls #heart-section { order: 6; }

  @media (max-width: 768px) {
    /* Import is a desktop power-tool — keep the small mobile preview clean */
    #importDesignBtn { display: none; }
    /* Lock-pin sits below the fixed top nav on mobile, and buttons are a touch smaller */
    .lock-pin-float { top: 72px; right: 14px; padding: 7px 11px; font-size: 12px; }
    #downloadPrintBtn { bottom: 14px; left: 14px; padding: 10px 15px; font-size: 12.5px; }
  }

  /* The grid-based Footer/Header captions are too tight for the emblem — keep it to the roomier layouts */
  .poster.full-bottom .poster-text .row[data-row="emblem"],
  .poster.full-layout .poster-text .row[data-row="emblem"] { display: none !important; }

  /* Custom colour swatch — rainbow to signal "pick any colour" (native hex picker) */
  .colour-custom { position: relative; overflow: hidden; padding: 0 !important; background: conic-gradient(from 90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #5856d6, #af52de, #ff2d55, #ff3b30) !important; }
  .colour-custom input[type="color"] { position: absolute; inset: -25%; width: 150%; height: 150%; border: none; padding: 0; margin: 0; cursor: pointer; background: transparent; opacity: 0; }

  /* Divider is for map shapes, Emblem is for full-page styles — the off-context one is disabled */
  #dividerSection.locked .toggle-btn, #dividerSection.locked #dividerStylePicker,
  #emblemSection.locked #emblemPicker, #emblemSection.locked .colour-grid, #emblemSection.locked .section-sub { opacity: 0.4; pointer-events: none; filter: grayscale(1); }

  /* Collapse Map Shape / Outline / Border when a full-page style is active */
  #shape-section .fp-expander { display: none; order: 1; width: 100%; margin-top: 16px; padding: 11px 14px; background: #f8f7f4; border: 1px solid #e4e0db; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #555; cursor: pointer; align-items: center; justify-content: space-between; }
  #shape-section .fp-expander svg { transition: transform 0.2s; }
  #shape-section.fp-active .fp-expander { display: flex; }
  #shape-section.fp-active #tutShapesArea, #shape-section.fp-active #borderSection { display: none; }
  #shape-section.fp-active.fp-expanded #tutShapesArea, #shape-section.fp-active.fp-expanded #borderSection { display: block; }
  #shape-section.fp-active.fp-expanded .fp-expander svg { transform: rotate(180deg); }