/* ============ DESIGN TOKENS ============ */
  :root{
    --red: #d71920;
    --red-soft: #fdf3f3;
    --black: #050505;
    --gray-footer: #f3f3f3;
    --divider: #d7d7d7;
    --white: #ffffff;
  }

  *{ box-sizing: border-box; margin: 0; padding: 0; }

  html, body{
    background: #ececea;
    /* Apple's system stack on Apple devices (real SF Pro), Inter as a near-identical fallback elsewhere */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
    color: var(--black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
  }

  /* ============ TOOLBAR (screen-only) ============ */
  .toolbar{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--divider);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    letter-spacing: -0.01em;
  }
  .toolbar strong{ font-weight: 600; }
  .toolbar .hint{ color: #6e6e73; }
  .toolbar button{
    border: none;
    background: var(--black);
    color: #fff;
    padding: 7px 16px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    border-radius: 980px;
    transition: opacity .2s ease, transform .15s ease;
    letter-spacing: -0.01em;
  }
  .toolbar button:hover{ opacity: .85; }
  .toolbar button:active{ transform: scale(.97); }
  .toolbar button.primary{ background: #0071e3; color: #fff; }
  .toolbar button.primary:hover{ background: #0077ed; opacity: 1; }

  /* ============ INSTRUCTIONS WALKTHROUGH ============ */
  #walkthrough[hidden]{ display: none; }
  #walkthrough{
    position: fixed;
    inset: 0;
    z-index: 200;
  }
  .feedback-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  .feedback-modal[hidden]{ display: none; }
  .feedback-modal-card{
    position: relative;
    background: #fff;
    color: var(--black);
    border-radius: 14px;
    padding: 22px 26px 20px;
    box-shadow: 0 20px 48px -12px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.18);
    max-width: 360px;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }
  .feedback-modal-card h3{ margin: 0 0 8px; font-size: 16px; font-weight: 600; }
  .feedback-modal-card p{ margin: 0 0 10px; }
  .feedback-modal-card ul{ margin: 0; padding-left: 18px; }
  .feedback-modal-card li{ margin: 4px 0; }
  .feedback-modal-card a{ color: var(--red); text-decoration: none; }
  .feedback-modal-card a:hover{ text-decoration: underline; }
  .feedback-close{
    position: absolute;
    top: 10px; right: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: var(--black);
    opacity: .55;
    display: flex;
  }
  .feedback-close:hover{ opacity: 1; }

  .wt-blocker{
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
  }
  .wt-spotlight{
    position: fixed;
    top: 0; left: 0;
    width: 0; height: 0;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
    pointer-events: none;
    transition: top .28s cubic-bezier(.2,.8,.2,1),
                left .28s cubic-bezier(.2,.8,.2,1),
                width .28s cubic-bezier(.2,.8,.2,1),
                height .28s cubic-bezier(.2,.8,.2,1);
    z-index: 2;
  }
  .wt-tooltip{
    position: fixed;
    z-index: 3;
    background: #fff;
    color: var(--black);
    border-radius: 14px;
    padding: 18px 20px 16px;
    box-shadow: 0 20px 48px -12px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.18);
    max-width: 360px;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    transition: top .28s cubic-bezier(.2,.8,.2,1),
                left .28s cubic-bezier(.2,.8,.2,1);
  }
  .wt-tooltip.wide{ max-width: 480px; }
  #walkthrough.wt-snap .wt-spotlight,
  #walkthrough.wt-snap .wt-tooltip{ transition: none; }
  .wt-close{
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #6e6e73;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, color .15s ease;
  }
  .wt-close:hover{ background: #f5f5f7; color: var(--black); }
  .wt-step-count{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #86868b;
    margin-bottom: 6px;
    font-weight: 600;
  }
  .wt-title{
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  .wt-body{ margin: 0 0 16px; color: #1d1d1f; }
  .wt-body p{ margin: 8px 0 0; }
  .wt-body strong{ font-weight: 600; }
  .wt-body em{ font-style: normal; color: #6e6e73; }
  .wt-tip{
    margin-top: 12px !important;
    padding: 10px 12px;
    background: #fff7ed;
    border-radius: 8px;
    font-size: 13px;
    color: #4a3500;
  }
  .wt-screenshot{
    width: 100%;
    border-radius: 8px;
    margin-top: 12px;
    display: block;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,.2);
  }
  .wt-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .wt-actions button{
    border: none;
    font: inherit;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 980px;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: opacity .2s ease, transform .15s ease, background .15s ease;
  }
  .wt-actions button:active{ transform: scale(.97); }
  .wt-back{
    background: transparent;
    color: #0071e3;
  }
  .wt-back:hover{ opacity: .7; }
  .wt-back:disabled{
    color: #c7c7cc;
    cursor: not-allowed;
  }
  .wt-back:disabled:hover{ opacity: 1; }
  .wt-next.primary{ background: #0071e3; color: #fff; }
  .wt-next.primary:hover{ background: #0077ed; }

  @media print {
    #walkthrough{ display: none !important; }
  }

  .toolbar button.ghost{ background: transparent; color: #0071e3; }
  .toolbar button.ghost:hover{ opacity: .7; }
  .toolbar button.ghost{ display: inline-flex; align-items: center; gap: 6px; }

  /* ============ PHOTO LIBRARY DROPDOWN ============ */
  .photo-library-wrap{ position: relative; }
  .photo-library-wrap .chevron{
    transition: transform .15s ease;
    margin-left: 1px;
    opacity: .6;
  }
  .photo-library-wrap.open .chevron{ transform: rotate(180deg); }

  .photo-library-panel{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #efeff1;
    border-radius: 12px;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,.18), 0 4px 8px -4px rgba(0,0,0,.08);
    padding: 6px;
    animation: photoPanelIn .18s cubic-bezier(.2,.8,.2,1);
  }
  .photo-library-trigger{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 10px 5px 5px;
    background: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    color: var(--black);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .photo-library-trigger:hover{ border-color: #b8b8c0; }
  .photo-library-trigger:focus{
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0,113,227,.12);
  }
  .photo-library-trigger-thumb{
    flex: 0 0 38px;
    width: 38px;
    height: 30px;
    background: #fafafa;
    border: 1px solid #efeff1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .photo-library-trigger-thumb img{
    max-width: 86%;
    max-height: 86%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }
  .photo-library-trigger-thumb img.dark-bg{ mix-blend-mode: normal; }
  .photo-library-trigger-thumb.is-empty{ background: #f5f5f7; }
  .photo-library-trigger-thumb.is-empty img{ display: none; }
  .photo-library-trigger-text{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 1px;
  }
  .photo-library-trigger-label{
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.012em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .photo-library-trigger-sub{
    font-size: 11px;
    color: #86868b;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .photo-library-trigger .chevron{
    flex: 0 0 auto;
    margin-left: auto;
    color: #6e6e73;
    opacity: 1;
  }
  .photo-library-panel[hidden]{ display: none; }
  @keyframes photoPanelIn{
    from{ opacity: 0; transform: translateY(-4px) scale(.98); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }
  .photo-library-header{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #86868b;
    text-transform: uppercase;
    padding: 10px 10px 8px;
  }
  .photo-library-grid{
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .photo-library-empty{
    padding: 18px 12px;
    text-align: center;
    font-size: 12px;
    color: #86868b;
    letter-spacing: -0.005em;
  }
  .photo-library-panel .photo-library-item{
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background .12s ease, transform .1s ease;
    text-align: left;
    width: 100%;
    font: inherit;
    color: var(--black);
    letter-spacing: 0;
  }
  .photo-library-panel .photo-library-item:hover{
    background: #f5f5f7;
    opacity: 1;
  }
  .photo-library-panel .photo-library-item:active{
    background: #ebebef;
    transform: none;
  }
  .photo-library-thumb{
    flex: 0 0 56px;
    width: 56px;
    height: 42px;
    background: #fafafa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #efeff1;
  }
  .photo-library-thumb img{
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }
  .photo-library-thumb img.dark-bg{
    mix-blend-mode: normal;
  }
  .photo-library-text{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .photo-library-label{
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.25;
    letter-spacing: -0.012em;
  }
  .photo-library-sublabel{
    font-size: 11.5px;
    color: #86868b;
    letter-spacing: -0.005em;
    line-height: 1.25;
  }
  .toolbar input[type=file]{ display: none; }

  .toolbar .app-version{
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    padding: 2px 7px;
    border-radius: 980px;
    background: #f5f5f7;
    margin-left: -4px;
  }


  .preview-wrap{
    padding: 40px 20px 80px;
    display: flex;
    justify-content: center;
  }

  /* ============ THE PAGE (11in x 8.5in landscape) ============ */
  .page{
    width: 11in;
    height: 8.5in;
    background: var(--white);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.18), 0 10px 20px -10px rgba(0,0,0,.08);
    display: grid;
    grid-template-columns: 5.5in 5.5in;
    position: relative;
  }
  .left-half{
    width: 5.5in;
    height: 8.5in;
    background: var(--white);
    position: relative;
  }

  /* ============ RIGHT SHEET (the product sign canvas) ============ */
  .right-sheet{
    width: 5.5in;
    height: 8.5in;
    background: var(--white);
    /* Apple-style: no heavy frame. Subtle hairline only. */
    padding: 0.22in 0.42in 0.22in;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: hidden;
  }

  /* ============ 2. TOP LABEL: Pre-Owned ============ */
  .top-label{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.08in;
  }
  .top-label span{
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    outline: none;
  }

  /* ============ 3. MAIN TITLE: MacBook Air ============ */
  .main-title{
    text-align: center;
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--black);
    margin-bottom: 0.04in;
    outline: none;
    /* Prevent wrapping for any type variant */
    white-space: nowrap;
  }
  .main-subtitle{
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #6e6e73;
    margin-bottom: 0.14in;
    outline: none;
  }

  /* ============ IMAGE SCALE SLIDER (screen-only) ============ */
  .scale-control{
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 16px 8px;
    border-radius: 14px;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
    border: 1px solid #efeff1;
    z-index: 10;
  }

  /* ============ FORM PANEL (screen-only) ============ */
  .form-panel{
    position: absolute;
    left: 30px;
    top: 30px;
    bottom: 30px;
    width: 280px;
    background: #fff;
    border: 1px solid #efeff1;
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.05);
    overflow: visible;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
  }
  .form-panel-title{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #6e6e73;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid #efeff1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .form-reset-btn{
    background: transparent;
    border: 1px solid #d2d2d7;
    color: #6e6e73;
    padding: 4px 10px;
    border-radius: 980px;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-transform: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .form-reset-btn:hover{
    background: #f5f5f7;
    color: var(--black);
    border-color: #b8b8c0;
  }
  .form-reset-btn:active{ transform: scale(.97); }
  .form-reset-btn svg{ width: 11px; height: 11px; }

  /* Empty image hint */
  .image-empty-hint{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #86868b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 1;
  }
  .image-empty-hint.show{ opacity: 1; }
  .image-empty-hint svg{
    width: 36px;
    height: 36px;
    stroke: #c0c0c5;
    stroke-width: 1.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .image-empty-hint .hint-text{ font-size: 12px; }
  .product-image-wrap.is-empty{ background: #fafafa; }
  .form-row{
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .form-row[hidden]{ display: none; }
  .form-panel.is-custom .field-standard{ display: none; }
  .form-panel:not(.is-custom) .field-custom{ display: none; }
  .form-panel:not(.is-ipad) .ipad-only{ display: none; }
  .form-panel:not(.is-imac-24) .imac-24-only{ display: none; }
  .form-panel.is-ipad .macbook-only{ display: none; }
  .form-panel:not(.is-iphone) .iphone-only{ display: none; }
  .form-panel.is-iphone .non-iphone{ display: none; }
  .form-panel.is-iphone .macbook-only{ display: none; }
  .form-panel.is-iphone .form-row-grid{ grid-template-columns: 1fr; }
  .form-panel.is-ipad .non-ipad{ display: none; }
  .form-panel.is-ipad .non-ipad-control{ display: none; }
  .form-panel:not(.is-ipad) .ipad-control{ display: none; }
  /* iPad: Processor + Size visible before a model is identified (overrides the has-photo stage-2 gate). */
  .form-panel.is-ipad:not(.has-photo) .ipad-pre-photo{ display: flex; }
  .form-panel.is-ipad:not(.has-photo) .form-row-grid.ipad-pre-photo{ display: grid; }
  /* Base iPad: Generation dropdown replaces Processor + Size. */
  .form-panel:not(.is-base-ipad) .base-ipad-only{ display: none; }
  .form-panel.is-base-ipad .non-base-ipad{ display: none !important; }
  .checkbox-label{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--black);
    letter-spacing: -0.012em;
    user-select: none;
  }
  .checkbox-label input[type=checkbox]{
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0071e3;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .form-row.compact{
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .form-row.compact > label{ flex: 0 0 auto; min-width: 60px; }
  .form-row.compact > input,
  .form-row.compact > select{ flex: 1; }
  .form-row label{
    font-size: 12px;
    font-weight: 500;
    color: #6e6e73;
    letter-spacing: -0.005em;
  }
  .form-row input,
  .form-row select{
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: var(--black);
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .form-row select{
    -webkit-appearance: none;
    appearance: none;
    padding-right: 28px;
    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' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
  }
  /* Selects with no real value picked yet show their em-dash placeholder in
     muted gray, matching the placeholder behavior of text inputs. */
  .form-row select:has(option[value=""]:checked){ color: #86868b; }
  .form-row input:focus,
  .form-row select:focus{
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0,113,227,.12);
  }
  .form-row input[type=number]::-webkit-inner-spin-button,
  .form-row input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
  .form-row input[type=number]{
    -moz-appearance: textfield;
  }
  .form-suffix{
    position: relative;
  }
  .form-suffix > span{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #86868b;
    pointer-events: none;
  }
  .form-suffix > input{ padding-right: 30px; }
  /* When the form-suffix wraps a <select>, the chevron lives at the right edge,
     so push the unit label left past it and widen the select's right padding. */
  .form-suffix > select{ padding-right: 48px; }
  .form-suffix > select + span{ right: 28px; }

  /* Variant: suffix is a dropdown (e.g. GB/TB) */
  .form-suffix.has-select-suffix{
    display: flex;
    align-items: stretch;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .form-suffix.has-select-suffix:focus-within{
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0,113,227,.12);
  }
  .form-suffix.has-select-suffix > input{
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--black);
    outline: none;
    background: transparent;
  }
  .form-suffix.has-select-suffix > input:focus{ box-shadow: none; }
  .suffix-select{
    flex: 0 0 auto;
    width: auto !important;
    border: none;
    border-left: 1px solid #efeff1;
    border-radius: 0;
    padding: 7px 28px 7px 10px !important;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #6e6e73;
    background-color: #f5f5f7 !important;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    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' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l4 4 4-4'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px 6px !important;
  }
  .suffix-select:focus{ box-shadow: none; }

  /* Price composer: [$] [dollars] [.] [cents] */
  .price-composer{
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    align-self: flex-start;
  }
  .price-composer:focus-within{
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0,113,227,.12);
  }
  .price-prefix{
    background: #f5f5f7;
    color: #6e6e73;
    font-size: 13px;
    font-weight: 600;
    padding: 0 10px;
    display: flex;
    align-items: center;
    line-height: 1;
    flex: 0 0 auto;
  }
  .price-dot{
    color: #6e6e73;
    font-size: 16px;
    font-weight: 600;
    padding: 0 2px;
    display: flex;
    align-items: center;
    line-height: 1;
    flex: 0 0 auto;
    background: #fff;
  }
  .price-composer > input{
    border: none;
    border-radius: 0;
    padding: 7px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--black);
    outline: none;
    background: transparent;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    -moz-appearance: textfield;
  }
  .price-composer > input::-webkit-outer-spin-button,
  .price-composer > input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
  #fPriceDollars{
    flex: 0 1 auto;
    width: 90px;
    text-align: left;
  }
  #fPriceCents{
    flex: 0 0 44px;
    width: 44px;
    text-align: left;
    padding-right: 10px;
    background: #f5f5f7;
    color: #6e6e73;
  }
  #fPriceCents:focus{ background: #fff; color: var(--black); }
  .price-composer > input:focus{ box-shadow: none; }

  /* SKU composer: [U] [number] [-] [A/B/C/D] inline */
  .sku-composer{
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    align-self: flex-start;
  }
  .sku-composer:focus-within{
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0,113,227,.12);
  }
  .sku-prefix,
  .sku-dash{
    background: #f5f5f7;
    color: #6e6e73;
    font-size: 13px;
    font-weight: 600;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
  }
  .sku-dash{
    padding: 0 6px;
    font-weight: 500;
  }
  .sku-composer > input{
    flex: 0 1 auto;
    width: 90px;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--black);
    outline: none;
    font-variant-numeric: tabular-nums;
    background: transparent;
    text-align: left;
  }
  .sku-composer > input:focus{ box-shadow: none; }
  .sku-composer > select.sku-condition{
    flex: 0 0 auto;
    width: auto;
    border: none;
    border-left: 1px solid #efeff1;
    border-radius: 0;
    padding: 7px 28px 7px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    background: #fafafa;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    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' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
  }
  .sku-composer > select.sku-condition:focus{ box-shadow: none; }
  .form-row-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .form-divider{
    height: 1px;
    background: #efeff1;
    margin: 10px 0 6px;
  }
  /* Progressive disclosure:
     stage-2 (specs) appears once a photo is chosen,
     stage-3 (SKU + Price) appears once every spec is filled. */
  .form-panel:not(.has-photo) .stage-2,
  .form-panel:not(.has-photo) .stage-3,
  .form-panel:not(.has-specs) .stage-3{ display: none; }
  .form-panel.has-photo .stage-2{
    animation: stageReveal .32s cubic-bezier(.2,.8,.2,1) both;
  }
  .form-panel.has-photo.has-specs .stage-3{
    animation: stageReveal .32s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes stageReveal{
    from{ opacity: 0; transform: translateY(-6px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  .form-help{
    font-size: 10.5px;
    color: #86868b;
    line-height: 1.35;
    letter-spacing: -0.005em;
    margin-top: -2px;
  }

  /* ============ PILLS (replacing subtitle) ============ */
  .spec-pills{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.14in;
  }
  .spec-pill{
    background: #f5f5f7;
    color: var(--black);
    padding: 5px 14px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.2;
    outline: none;
    transition: background .15s ease, box-shadow .15s ease;
  }
  .spec-pill:hover{
    background: rgba(0,113,227,.08);
  }
  .spec-pill:focus{
    background: rgba(0,113,227,.1);
    box-shadow: 0 0 0 3px rgba(0,113,227,.15);
  }

  /* ============ IMAGE GUIDES (shown while adjusting) ============ */
  .image-guides{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 2;
  }
  .image-guides.show{ opacity: 1; }
  .image-guide-line{
    position: absolute;
    left: 8%;
    right: 8%;
    height: 0;
    border-top: 1px dashed #0071e3;
  }
  .image-guide-line.top{ top: 0; }
  .image-guide-line.bottom{ bottom: 0; }
  .image-guide-line::after{
    content: attr(data-label);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #0071e3;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .scale-control-label{
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #6e6e73;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
  }
  .scale-control-value{
    font-size: 11px;
    font-weight: 600;
    color: var(--black);
    font-variant-numeric: tabular-nums;
    background: #f5f5f7;
    padding: 3px 8px;
    border-radius: 980px;
    min-width: 42px;
    text-align: center;
  }
  .scale-slider{
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 24px;
    height: 180px;
    margin: 0;
    cursor: pointer;
    accent-color: #0071e3;
  }
  .scale-control-buttons{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }
  .scale-control-buttons button{
    background: #f5f5f7;
    color: var(--black);
    border: none;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
  }
  .scale-control-buttons button:hover{ background: #ebebef; }
  .scale-control-buttons button:active{ transform: scale(.96); }
  .product-image-wrap{
    flex: 1 1 auto;
    min-height: 1.8in;
    max-height: 2.4in;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.16in;
    cursor: pointer;
    border-radius: 6px;
    transition: box-shadow .15s ease;
    /* Image renders behind text; this stays on its own layer */
    position: relative;
    z-index: 0;
  }
  .product-image-wrap:hover{ box-shadow: 0 0 0 4px rgba(0,113,227,.1); }
  .product-image{
    /* Absolutely positioned so an oversized image overflows behind text instead of pushing layout */
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Multiply blend drops the white background of stock product photos */
    mix-blend-mode: multiply;
    /* User-controlled scale, defaults to 1 */
    transform: translate(-50%, -50%) scale(var(--image-scale, 1));
    transform-origin: center center;
    transition: transform .15s ease;
    pointer-events: auto;
  }

  /* All content elements sit above the image */
  .top-label,
  .main-title,
  .main-subtitle,
  .spec-pills,
  .specs,
  .warranty,
  .price-block,
  .sku-wrap,
  .footer-band{
    position: relative;
    z-index: 1;
  }

  /* ============ 5. (model heading absorbed into subtitle above) ============ */

  /* ============ 6. SPECS ============ */
  .specs{
    list-style: none;
    margin-bottom: 0.08in;
  }
  .specs li{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 2px;
    border-bottom: 1px solid #efeff1;
    font-size: 15px;
    letter-spacing: -0.012em;
  }
  .specs li:last-child{ border-bottom: none; }
  .spec-icon{
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86868b;
  }
  .spec-icon svg{ width: 22px; height: 22px; }
  .spec-text{
    color: var(--black);
    font-weight: 500;
    flex: 1;
    outline: none;
  }

  /* ============ 7. WARRANTY CALLOUT ============ */
  .warranty{
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fdf6f6;
    border: 1px solid #f5e0df;
    border-radius: 12px;
    padding: 9px 14px;
    margin-bottom: 0.1in;
    box-shadow: 0 1px 2px rgba(0,0,0,.02);
  }
  .warranty-icon{
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--red);
  }
  .warranty-icon svg{ width: 100%; height: 100%; }
  .warranty-text{
    font-size: 13.5px;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.012em;
    line-height: 1.3;
    flex: 1;
    outline: none;
  }

  /* ============ 8. PRICE ============ */
  .price-block{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.06in;
  }
  .price{
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--red);
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    outline: none;
  }
  .price-currency{ font-size: 0.5em; font-weight: 600; margin-right: 2px; outline: none; }
  .price-main{ outline: none; }
  .price-cents{ font-size: 0.38em; font-weight: 600; margin-left: 2px; outline: none; }

  /* ============ 9. SKU PILL ============ */
  .sku-wrap{
    display: flex;
    justify-content: center;
    margin-bottom: 0.08in;
  }
  .sku{
    background: #f5f5f7;
    color: #6e6e73;
    border-radius: 980px;
    padding: 7px 16px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1;
  }
  .sku-label{
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #86868b;
    text-transform: uppercase;
    outline: none;
  }
  .sku-value{
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--black);
    outline: none;
  }

  /* ============ 10. FOOTER ============ */
  .footer-band{
    margin-top: 0;
    margin-bottom: 0;
    background: #f5f5f7;
    padding: 10px 16px 12px;
    height: 0.6in;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: 14px;
    border-radius: 10px;
  }
  .footer-logo-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    overflow: hidden;
  }
  .footer-logo{
    height: 0.4in;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    /* Drop the white box around the PNG/JPG logo */
    mix-blend-mode: multiply;
  }
  .footer-divider{
    background: #efeff1;
    height: 28px;
  }
  .footer-tag{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .footer-tag-icon{
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer-tag-icon svg{ width: 13px; height: 13px; }
  .footer-tag-text{
    font-size: 11px;
    line-height: 1.3;
    color: var(--black);
    font-weight: 500;
    letter-spacing: -0.01em;
    outline: none;
  }
  .footer-tag-text span{ display: block; }
  .footer-tag-text span:first-child{ font-weight: 600; color: var(--black); }
  .footer-tag-text span:last-child{ color: #6e6e73; }

  /* ============ EDITABLE STATE ============ */
  [contenteditable="true"]{
    cursor: text;
    transition: background .15s ease, box-shadow .15s ease;
    border-radius: 4px;
  }
  [contenteditable="true"]:hover{
    background: rgba(0,113,227,.06);
    box-shadow: 0 0 0 4px rgba(0,113,227,.06);
  }
  [contenteditable="true"]:focus{
    background: rgba(0,113,227,.08);
    box-shadow: 0 0 0 4px rgba(0,113,227,.08);
  }

  /* ============ PRINT ============ */
  /* Safari-friendly print sizing. Letter landscape = 279.4mm × 215.9mm.
     Using mm avoids Safari's sub-pixel inch rounding that scales the page down. */
  @page{
    size: 279.4mm 215.9mm;
    margin: 0;
  }

  /* Print-look styles. Applied via the .print-mode class on <body>:
       - Popup window sets it statically (so the popup looks like a true
         print preview the moment it opens).
       - Parent window adds it via a `beforeprint` listener and removes
         it on `afterprint`, so direct printing of the parent works too.
     Single source of truth — no more "change print styles in two places". */
  body.print-mode{
    background: var(--white);
    width: 279.4mm;
    height: 215.9mm;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }
  .print-mode .toolbar,
  .print-mode .scale-control,
  .print-mode .form-panel,
  .print-mode .image-guides,
  .print-mode .image-empty-hint{ display: none !important; }
  .print-mode .preview-wrap{ padding: 0 !important; margin: 0 !important; display: block !important; }
  .print-mode .page{
    box-shadow: none !important;
    width: 279.4mm !important;
    height: 215.9mm !important;
    margin: 0 !important;
    page-break-after: avoid;
    page-break-inside: avoid;
    break-after: avoid;
  }
  .print-mode .left-half{ width: 139.7mm !important; height: 215.9mm !important; }
  .print-mode .right-sheet{ width: 139.7mm !important; height: 215.9mm !important; }
  .print-mode [contenteditable="true"]:hover,
  .print-mode [contenteditable="true"]:focus{ background: transparent !important; box-shadow: none !important; }
  .print-mode .product-image-wrap{ box-shadow: none !important; background: transparent !important; cursor: default !important; }
  .print-mode .footer-band,
  .print-mode .price-block,
  .print-mode .warranty,
  .print-mode .specs{ page-break-inside: avoid; }

  /* Print-rendering hints that have no screen equivalent. */
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }