/* =========================================================================
   RJR APPS - one stylesheet for every front-end app
   =========================================================================

   Both apps load this file and nothing else. The Packing Assistant is the
   reference: where the two declared the same property, its value is the one
   that survived.

   HOW TO WORK IN HERE

   .rjr-app          rules that belong to every app. Both wrappers carry the
                     class, so a change here is a change in both.
   #rjr-packing-app  the Packing Assistant alone.
   #rjr-shoefinder   the Shoe Finder alone.

   An id outranks a class, so an app override wins wherever it sits in the
   file. Reach for one only where the two apps genuinely have to differ.
   Anything else belongs in the shared rule, which is the point of this file.

   Unscoped rules are deliberate, and there are three kinds: the tokens on
   :root, the page ground on body, and the print rules that hide the theme's
   own header, nav and footer. None of those is inside an app, so none can be
   scoped to one. This file only loads on a page carrying an app shortcode.

   A NEW APP
   1. wrap its markup in <div id="rjr-your-app" class="rjr-app">
   2. use the shared furniture: .wrap, .hero, .panel, .kicker, h2.step,
      .lead, .cta, .opts/.opt, .progwrap, .sys, .tip, .app-foot
   3. add only what is genuinely its own, under its own id
   ========================================================================= */
  /* Every token reads from the Ready Jet Roam theme's design system first and
     falls back to the value this app shipped with. On a site with the theme
     the app wears the site's palette and faces; on a site without it, nothing
     changes at all. To pin any one of these back, delete the var() and leave
     the literal. */:root{
    /* navy-600. The theme's heading token is navy-800, which read as a
       near-black slab wherever this is used as a fill. */
    --teal:var(--rjr-navy-600,#1b6f86);
    --teal-deep:var(--rjr-navy-700,#155a6e);
    --orange:var(--rjr-accent,#ef6a1e);
    --orange-soft:var(--rjr-orange-400,#f7913f);
    /* navy-700, not the theme's --rjr-text-primary: that is the darkest
       value on the ramp and made every line of copy read as black. */
    --ink:var(--rjr-navy-700,#2b3a40);
    --paper:var(--rjr-cream,#f6f1e7);
    --paper-2:var(--rjr-paper,#efe7d7);
    --card:var(--rjr-ctx-card-bg,#fffdf8);
    --blue-band:var(--rjr-sea,#cfe2ea);
    --cream-tip:var(--rjr-callout-tip-bg,#f3e7d8);
    --line:var(--rjr-border,#d9cfbd);
    /* No theme equivalent: success and failure are states, not brand colour. */
    --ok:#3a9d5d;
    --warn:#c9542a;
    --shadow:var(--rjr-shadow-lg,0 14px 30px rgba(43,58,64,.14));
    --radius:var(--rjr-radius-lg,18px);

    /* Faces. The theme self-hosts EB Garamond, Poppins and Breathing; without
       it these fall back to the Google families the app was built on, which
       content.php then enqueues. Two script tokens because the app uses two
       different hands, and the theme has one. */
    --font-head:var(--rjr-font-display,'Fraunces',Georgia,serif);
    --font-body:var(--rjr-font-body,'Nunito Sans',sans-serif);
    --font-script:var(--rjr-font-script,'Dancing Script',cursive);
    --font-hand:var(--rjr-font-script,'Caveat',cursive);

    /* The theme draws a hard line between decorative orange and things you
       click, and buttons follow the CTA colour. Without the theme they stay
       the orange they have always been. Revert by setting this to
       var(--orange). */
    --btn-radius:var(--rjr-radius,13px);
    --cta-bg:var(--rjr-cta,#ef6a1e);
    --cta-bg-hover:var(--rjr-cta-hover,#f7913f);
    --cta-text:var(--rjr-cta-text,#fff);
  }
  .rjr-app *{box-sizing:border-box}
  html,
body{margin:0;padding:0}
  /* Still !important: X/Cornerstone and the RJR theme both print their own
     body rule after this file (see BUILD-GUIDE section 5). The difference now
     is that with the theme present these resolve to the theme's OWN tokens,
     so the declaration sets the value the theme was going to set anyway
     instead of fighting it. */body{
    font-family:var(--font-body) !important;
    color:var(--ink) !important;
    background:
      radial-gradient(circle at 12% 8%, rgba(239,106,30,.06), transparent 40%),
      radial-gradient(circle at 88% 92%, rgba(27,111,134,.07), transparent 42%),
      var(--paper) !important;
    background-attachment:fixed !important;
    line-height:1.55 !important;
    -webkit-font-smoothing:antialiased !important;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  }
  /* The app wrapper is as wide as the page, so this crops what hangs off
     the hero at the edge of the viewport - which is where the page actually
     ends. Clip rather than hidden: clip makes no scroll container, so the
     sticky progress bar inside still sticks to the viewport. */
  .rjr-app{overflow-x:clip}

  .rjr-app .wrap{max-width:920px;margin:0 auto;position:relative;z-index:1}


  /* Centred as a group, not pushed to the two edges. space-between put the
     headline hard left and the polaroid hard right with a hole between
     them, which grew with every pixel of viewport. The text column now
     takes a measure rather than filling whatever is left. */.rjr-app .hero{margin:18px 0 26px;display:flex;align-items:center;justify-content:center;
    gap:clamp(24px,4vw,56px);overflow:visible;}
  .rjr-app .hero-text{flex:0 1 560px;min-width:0}
  .rjr-app .hero h1{
    font-family:var(--font-head);font-weight:600;color:var(--teal);
    font-size:clamp(34px,7vw,58px);line-height:.95;margin:0;letter-spacing:-.5px}
  /* Its own line, and 2em of leading. The script face carries tall
     ascenders and deep descenders, so at the old 1.12em/inline it collided
     with the line above and below. */.rjr-app .hero h1 .pop{color:var(--orange);font-family:var(--font-script);font-weight:700;
    display:block;font-size:.8em;line-height:2em;transform:rotate(-1deg)}
  .rjr-app .hero p.tag{font-size:17px;max-width:560px;margin:14px 0 0;color:var(--teal-deep)}

  /* taped polaroid flourish */.rjr-app .polaroid:not(.rjr-polaroid){flex:none;width:270px;background:#fffdf8;padding:12px 12px 18px;border-radius:3px;
    box-shadow:0 12px 26px rgba(43,58,64,.2);transform:rotate(3deg);position:relative;margin-top:-35px}
  .rjr-app .polaroid:not(.rjr-polaroid) .tape{position:absolute;top:-15px;left:50%;transform:translateX(-50%) rotate(-3deg);
    width:78px;height:28px;background:rgba(207,226,234,.6);border:1px solid rgba(255,255,255,.4);
    box-shadow:0 1px 2px rgba(0,0,0,.07)}
  .rjr-app .polaroid:not(.rjr-polaroid) .photo{width:246px;height:246px;border-radius:1px;overflow:hidden}
  .rjr-app .polaroid:not(.rjr-polaroid) .photo img{display:block;width:100%;height:100%;object-fit:cover}


  /* Step shell */.rjr-app .panel{background:var(--card);border-radius:18px;padding:26px 26px 30px;
    box-shadow:var(--shadow);position:relative}
  /* The synthetic washi-tape strip that used to sit here is gone. It was
     drawn in CSS to echo the polaroid back when the polaroid was also drawn
     in CSS; beside the theme's real taped frame scan it read as a stray
     artifact rather than a flourish. */

  /* The theme sizes an eyebrow for a full-width section head and leaves
     24px under it. Above a panel heading that is a gap, not a rhythm - the
     heading carries its own top margin. Two classes so it outweighs the
     theme's own single-class rule, which loads after this file. */.rjr-app .kicker.rjr-eyebrow{margin-bottom:0}

  /* Only when the theme's brush-stroke eyebrow is NOT on this element.
     With the theme installed the markup carries .rjr-eyebrow as well and the
     theme paints the stroke; this flat chip is the standalone fallback. */.rjr-app .kicker:not(.rjr-eyebrow){display:inline-block;background:var(--teal);color:#fff;font-weight:800;
    font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:7px 16px;border-radius:4px;
    transform:rotate(-1deg);box-shadow:var(--shadow)}
  .rjr-app h2.step{font-family:var(--font-head);font-weight:600;color:var(--teal);
    font-size:clamp(30px,3.2vw,40px);line-height:1.15;margin:6px 0 14px}
  /* Same leading fix as .pop, but inline: this is an aside to the
     heading, not a second line of it. */.rjr-app h2.step .scr{font-family:var(--font-hand);color:var(--orange);font-size:.8em;
    display:inline;line-height:2em;margin-left:.4em}
  .rjr-app .lead{color:#54636a;margin:6px 0 22px;max-width:640px}

  /* Form */.rjr-app .field{margin-bottom:38px}
  .rjr-app .field > label{display:block;font-weight:800;color:var(--teal-deep);margin-bottom:9px;font-size:15px}
  .rjr-app .field .hint{font-weight:600;color:#8a8270;font-size:12.5px;margin-left:6px}
  .rjr-app input[type=text],
.rjr-app input[type=number]{
    width:100%;padding:13px 15px !important;border:1.5px solid var(--line) !important;border-radius:11px !important;
    font-family:inherit !important;font-size:16px !important;background:#fffef9 !important;color:var(--ink) !important;transition:.15s}
  .rjr-app input:focus{outline:none !important;border-color:var(--teal) !important;box-shadow:0 0 0 3px rgba(27,111,134,.15) !important}
  .rjr-app input[type=number]{-moz-appearance:textfield !important;appearance:textfield !important}
  .rjr-app input[type=number]::-webkit-outer-spin-button,
.rjr-app input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none !important;margin:0 !important}
  .rjr-app .opts{display:flex;flex-wrap:wrap;gap:9px}
  .rjr-app .opt{border:1.5px solid var(--line);background:#fffef9;border-radius:11px;padding:10px 15px;
    cursor:pointer;font-weight:600;font-size:14px;color:var(--ink);transition:.15s;user-select:none}
  .rjr-app .opt:hover{border-color:var(--teal)}
  .rjr-app .opt.sel{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:var(--shadow)}
  .rjr-app .opt.sel.orange{background:var(--orange);border-color:var(--orange)}

  .rjr-app .field.invalid > label{color:var(--warn)}
  .rjr-app .field.invalid .opts,
.rjr-app .field.invalid input{animation:nudge .4s ease}
  .rjr-app .field.invalid input{border-color:var(--warn)}
  .rjr-app .field.invalid .opt{border-color:var(--warn)}
  .rjr-app .field-warn{color:#a8401d;background:#fde4d8;border:1px solid #f1b69e;border-radius:9px;
    font-weight:700;font-size:13.5px;margin:10px 0 0;padding:9px 12px 9px 34px;position:relative;display:none}
  .rjr-app .field-warn::before{content:"⚠";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:15px}
  .rjr-app .field.invalid .field-warn{display:block}
  .rjr-app #addWarn.show{display:block}
  .rjr-app .type-cap{color:#155a6e;background:#dcecf2;border:1px solid #aacede;border-radius:9px;
    font-weight:700;font-size:13px;margin:10px 0 0;padding:9px 12px 9px 32px;position:relative;display:none}
  .rjr-app .type-cap::before{content:"💡";position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:13px}
  .rjr-app .type-cap.show{display:block}
  @keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  .rjr-app .build-warn{background:#fde4d8;border:1.5px solid var(--warn);color:#8a3a1e;border-radius:11px;
    padding:13px 16px 13px 42px;margin:0 0 16px;font-weight:800;font-size:14.5px;position:relative;display:none}
  .rjr-app .build-warn::before{content:"⚠";position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:18px}
  .rjr-app .build-warn.show{display:block;animation:nudge .4s ease}
  .rjr-app .dest-nudge{color:#155a6e;background:#dcecf2;border:1px solid #aacede;border-radius:9px;
    font-weight:700;font-size:13.5px;margin:10px 0 0;padding:9px 12px 9px 34px;position:relative;display:none}
  .rjr-app .dest-nudge::before{content:"💡";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px}
  .rjr-app .dest-nudge.show{display:block;animation:nudge .4s ease}

  .rjr-app .nights-tip{color:#155a6e;background:#dcecf2;border:1px solid #aacede;border-radius:9px;font-weight:600;font-size:13.5px;margin:12px 0 0;padding:9px 12px 9px 34px;position:relative}
  .rjr-app .nights-tip::before{content:"💡";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px}

  .rjr-app .nights-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .rjr-app .nights-row input{width:110px}
  .rjr-app .stepper{display:flex;gap:6px}
  .rjr-app .stepper button{width:42px;height:42px;border-radius:10px;border:1.5px solid var(--line);
    background:#fffef9;font-size:22px;font-weight:700;cursor:pointer;color:var(--teal);line-height:1}
  .rjr-app .stepper button:hover{border-color:var(--teal);background:#f0f7f9}

  .rjr-app .palette-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .rjr-app .swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid transparent;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative;transition:.12s}
  .rjr-app .swatch.sel{border-color:var(--teal);transform:scale(1.08)}
  .rjr-app .swatch.sel::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;color:#fff;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.5);font-size:15px}

  .rjr-app .cta{display:inline-flex;align-items:center;gap:10px;background:var(--cta-bg);color:var(--cta-text);
    border:none;border-radius:var(--btn-radius);padding:15px 30px;font-family:var(--font-body);font-weight:800;
    font-size:17px;cursor:pointer;transition:.15s;margin-top:6px}
  .rjr-app .cta:hover{background:var(--cta-bg-hover);transform:translateY(-1px)}
  .rjr-app .cta.ghost{background:transparent;color:var(--teal);box-shadow:none;border:1.5px solid var(--line)}
  .rjr-app .cta.ghost:hover{border-color:var(--teal);background:#f0f7f9}
  .rjr-app .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

  .rjr-app .toptools{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin:-6px 0 14px}
  .rjr-app .cta.sm{padding:9px 16px;font-size:14px;border-radius:10px;margin-top:0}
  .rjr-app #setupTools.hide{display:none !important}

  .rjr-app .it-remove{flex:none;border:none;background:transparent;color:#bcae96;cursor:pointer;
    font-size:13px;font-weight:800;padding:4px 8px;border-radius:8px;align-self:center;transition:.12s;white-space:nowrap}
  .rjr-app .it-remove:hover{background:#fdeee6;color:var(--warn)}

  /* Collapsible system summary */
  /* The same stock as the paper cards on the home page: no border, a 3px
     corner rather than a rounded one, the theme's crumpled scan multiplied
     into the fill, its two-layer shadow, and a hair of rotation so it does
     not sit perfectly square. The texture stack is published as a custom
     property by PHP, because a relative url() in this file would resolve
     against this file rather than the theme's. */.rjr-app .sys{
    border:0;border-radius:3px;margin:0 0 26px;overflow:hidden;
    background-image:var(--rjr-app-paper-stack,none);
    background-size:cover;
    background-position:center;
    background-blend-mode:multiply;
    box-shadow:1px 2px 3px rgba(5,39,49,.05),3px 7px 18px rgba(5,39,49,.07);
    transform:rotate(-.35deg);
  }
  .rjr-app .sys summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;gap:18px;
    font-weight:800;color:var(--teal-deep);font-size:15px;user-select:none;transition:.15s;flex-wrap:wrap}
  .rjr-app .sys summary:hover,
.rjr-app .sys summary:focus-visible{background:rgba(255,255,255,.35)}
  .rjr-app .sys summary::-webkit-details-marker{display:none}
  /* A heading, so it takes the heading colour. Orange here fought the
     orange button beside it and left the row with no clear hierarchy. */.rjr-app .sys summary .sys-label{font-family:var(--font-head);font-weight:700;font-size:21px;
    color:var(--teal);letter-spacing:0;line-height:1.3;flex:1 1 260px}
  /* A link with an arrow, not a filled button. The paper cards on the home
     page end in exactly this, and a solid pill on paper stock reads as a
     control bolted onto a note rather than part of it. */.rjr-app .sys-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.45em;
    background:none;box-shadow:none;padding:0;border-radius:0;
    color:var(--orange);font-weight:600;font-size:15.5px;
    flex:none;white-space:nowrap;transition:color .15s,gap .15s}
  .rjr-app .sys summary:hover .sys-cta{color:var(--orange-soft);gap:.75em}
  .rjr-app .sys-cta .chev{color:inherit;font-size:1.25em;transition:transform .2s;line-height:1}
  .rjr-app .sys[open] .sys-cta{color:var(--orange-soft)}
  .rjr-app .sys[open] .sys-cta .chev{transform:rotate(90deg)}
  .rjr-app .sys .body{padding:2px 22px 22px;border-top:1px solid rgba(5,39,49,.09)}
  .rjr-app .sys .body p{margin:14px 0 12px;color:#54636a;font-size:14.5px}
  .rjr-app .sys ul.sysrules{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .rjr-app .sys ul.sysrules li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:#4d5a60}
  .rjr-app .sys ul.sysrules li b{color:var(--ink)}
  .rjr-app .sys .num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;
    font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:1px}
  .rjr-app .sys .payoff{background:var(--cream-tip);border-radius:11px;padding:13px 16px;margin-top:16px;font-size:14px;color:#4d5a60}
  .rjr-app .sys .payoff b{font-family:var(--font-hand);font-size:20px;color:var(--ink);font-weight:700;display:block;margin-bottom:2px}

  /* Tip callouts in Lisa's voice */.rjr-app .tip{background:var(--teal);border-radius:14px;padding:16px 18px;margin:18px 0;position:relative}
  .rjr-app .tip .lbl{font-family:var(--font-hand);font-size:35px;color:#fff;font-weight:700;line-height:.9;margin-bottom:4px}
  .rjr-app .tip p{margin:6px 0 0;font-size:14.5px;color:#eaf4f7}
  .rjr-app .tip label{color:#fff}
  .rjr-app .tip #newsletterMsg{color:#eaf4f7}
  .rjr-app .linkstrip{background:var(--blue-band);border-radius:11px;padding:13px 16px;margin:16px 0;
    display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
  .rjr-app .linkstrip .ck{color:var(--orange);font-size:20px;line-height:1.2;flex:none}
  .rjr-app .linkstrip a{color:var(--teal-deep);font-weight:800;text-decoration:underline}

  /* RESULTS */.rjr-app .summary{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 18px}
  .rjr-app .pill{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 15px;
    font-weight:700;font-size:13.5px;color:var(--teal-deep)}
  .rjr-app .pill b{color:var(--orange)}

  /* Sticky progress bar. Two adjustments to make sticky actually work here:

     top is the theme header's height, not 0. That header is itself sticky at
     z-index 100, so a bar parked at 0 sits UNDERNEATH it and disappears on
     scroll. --rjr-header-h is measured by the theme's navigation.js, with the
     declared 102px as the fallback.

     And it needs an opaque fill. A sticky element with no background lets the
     list scroll straight through it. */.rjr-app .progwrap{
    position:sticky;
    top:calc(var(--rjr-header-h,102px) + 8px);
    z-index:5;
    margin-bottom:15px;
    padding:10px 0 8px;
    background:var(--card);
    border-bottom:1px solid var(--line);
  }
  .rjr-app .progbar{height:13px;background: var(--rjr-navy-50);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
  .rjr-app .progfill{height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-soft));
    border-radius:999px;transition:width .35s ease}
  .rjr-app .progtxt{font-weight:800;font-size:14.5px;color:var(--teal-deep);margin-top:8px;display:flex;
    justify-content:space-between}

  .rjr-app .cat{margin:26px 0 0}
  .rjr-app .cat-head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--teal);
    padding-bottom:7px;margin-bottom:4px}
  .rjr-app .cat-head h3{font-family:var(--font-head);font-weight:600;color:var(--teal);margin:0;font-size:23px}
  .rjr-app .cat-head .cnt{font-weight:800;font-size:12.5px;color:#9a917d;margin-left:auto}
  .rjr-app .cat-note{font-size:13.5px;color:#6d6553;font-style:italic;margin:8px 0 4px}

  .rjr-app ul.items{list-style:none;margin:6px 0 0;padding:0}
  .rjr-app ul.items li{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:11px;
    transition:.12s;border:1px solid transparent}
  .rjr-app ul.items li:hover{background:#fbf7ee}
  .rjr-app .box{width:24px;height:24px;border-radius:7px;border:2px solid var(--teal);flex:none;margin-top:1px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;
    font-size:14px;background:#fff;transition:.12s}
  .rjr-app .box.on{background:var(--ok);border-color:var(--ok)}
  .rjr-app li.done .it-name{text-decoration:line-through;color:#a59c89}
  .rjr-app .it-body{flex:1;cursor:pointer}
  .rjr-app .it-name{font-weight:700;font-size:15.5px}
  .rjr-app .it-name .qty{color:var(--orange);font-weight:800}
  .rjr-app .it-sub{font-size:13px;color:#73798a;margin-top:1px}
  .rjr-app .it-sub a{color:var(--teal-deep);font-weight:700}

  .rjr-app .skip-box{background:#fdeee6;border:1px dashed var(--warn);border-radius:13px;padding:16px 18px;margin:24px 0 4px}
  .rjr-app .skip-box h4{margin:0 0 8px;color:var(--warn);font-family:var(--font-head);font-size:18px}
  .rjr-app .skip-box ul{margin:6px 0 0;padding-left:18px}
  .rjr-app .skip-box li{font-size:14px;color:#6b4b3e;margin:5px 0}

  .rjr-app .add-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .rjr-app .add-row input{flex:1;min-width:160px}
  .rjr-app .add-row select{border:1.5px solid var(--line);border-radius:10px;padding:0 12px;font-family:inherit;
    font-size:15px;background:#fffef9;color:var(--ink);cursor:pointer;min-width:130px}
  .rjr-app .add-row select:focus{outline:none;border-color:var(--teal)}
  .rjr-app .add-row button{border:1.5px solid var(--teal);background:#fff;color:var(--teal);border-radius:10px;
    padding:13px 16px;font-weight:800;cursor:pointer}
  .rjr-app .add-row button:hover{background:var(--teal);color:#fff}

  /* Compact controls - intentionally shorter (30px) than the main form fields/CTAs.
     Targets only the add-item row and the newsletter opt-in inputs/buttons. */
  /* The newsletter field and button used to be clamped here too, which
     squashed them into a 30px strip inside a large panel. They are sized
     properly in the newsletter block below; this clamp is for the
     add-an-item row, where compact is the point. */.rjr-app #addInput,
.rjr-app #addCat,
.rjr-app #addBtn{
    height:30px !important;
    min-height:30px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    font-size:14px !important;
    line-height:1 !important;
  }

  /* Quick "how to use this list" instructions (inside the .sys details section) */.rjr-app .howto-sub{font-weight:800;color:var(--teal-deep);font-size:14.5px;margin:14px 0 6px}
  .rjr-app .howto-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
  .rjr-app .howto-list li{position:relative;padding-left:18px;color:#4d5a60;
    font-size:14.5px;font-weight:600;line-height:1.55}
  .rjr-app .howto-list li b{color:var(--ink)}
  .rjr-app .howto-list li::before{content:"\203A";position:absolute;left:0;top:-2px;
    color:var(--orange);font-size:20px;font-weight:800;line-height:1.15}

  /* Inline reset confirmation (replaces native confirm dialog) */.rjr-app #resetConfirm{position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--card);border-top:2px solid var(--teal);box-shadow:0 -8px 24px rgba(43,58,64,.18)}
  .rjr-app #resetConfirm .rc-inner{max-width:920px;margin:0 auto;padding:16px 20px;display:flex;
    align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-weight:700;color:var(--ink)}
  .rjr-app #resetConfirm .rc-btns{display:flex;gap:10px;flex-wrap:wrap}
  .rjr-app #resetConfirm .cta.sm{margin-top:0}

  /* ---------- Footer ----------
     The same block in both apps, so a change here is a change in both. It used
     to be a <footer> element and, in the packing app, an unscoped one: the bare
     `footer{}` rule reached the theme's own footer and put 46px of margin above
     the navy band on any page carrying the shortcode. */.rjr-app .app-foot{text-align:center;margin-top:46px;color:#7d7563;font-size:13.5px}

  .rjr-app .app-foot p{margin-bottom:10px}

  .rjr-app .app-foot a{color:var(--orange-soft)}

  /* Navy, not orange: an address is something you copy, not a call to action,
     and orange in this app means "click me". */.rjr-app .app-foot a[href^="mailto:"]{color:var(--teal-deep);font-weight:700}

  .rjr-app .app-foot .sig{font-family:var(--font-script);font-weight:700;font-size:2.1rem;
    color:var(--orange);line-height:1.1;margin-bottom:8px}

  .rjr-app .app-foot .disc{font-size:11px;color:#a59c89;max-width:560px;margin:14px auto 0}

  .rjr-app .hide{display:none !important}

  /* ---- Accessibility helpers ---- */.rjr-app .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
  /* Visible keyboard focus everywhere (only when navigating by keyboard) */.rjr-app a:focus-visible,
.rjr-app button:focus-visible,
.rjr-app input:focus-visible,
.rjr-app select:focus-visible,
.rjr-app summary:focus-visible,
.rjr-app [role="checkbox"]:focus-visible,
.rjr-app .opt:focus-visible,
.rjr-app .swatch:focus-visible{
    outline:3px solid var(--teal);outline-offset:2px;border-radius:8px}
  .rjr-app .skip-link{position:absolute;left:-999px;top:8px;background:var(--teal);color:#fff;
    padding:10px 16px;border-radius:8px;font-weight:800;z-index:50;text-decoration:none}
  .rjr-app .skip-link:focus{left:8px}
  @media(prefers-reduced-motion:reduce){
    .rjr-app *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  
}

  @media print{
    /* The base body rule sets background + background-attachment with !important,
       so this override must also use !important or the gradients still print.
       background-attachment:fixed is the culprit behind the huge orange/black
       blocks in iOS Safari's print preview - it must be reset, not just recoloured. */html,
body{background:#fff !important;background-image:none !important;
      background-attachment:scroll !important}
    /* .brand and .band are gone from the markup now; the rest still print-hide. */body::before,
.rjr-app .progwrap,
.rjr-app .cta-row,
.rjr-app .add-row,
.rjr-app .hero p,
.rjr-app .kicker,
.rjr-app .toptools,
.rjr-app .it-remove,
.rjr-app .polaroid{display:none !important}
    .rjr-app #newsletterOptin,
.rjr-app #addPersonalField,
.rjr-app #howto,
.rjr-app .app-foot{display:none !important}
    .rjr-app .panel{box-shadow:none;border:none;padding:0;background:#fff !important}
    .rjr-app ul.items li:hover{background:none}
    .rjr-app .box{border-color:#999}
    .rjr-app li.done .it-name{text-decoration:none;color:inherit}
  
}
  @media(max-width:600px){
    .rjr-app .wrap{padding: 30px 20px 80px;}
    /* The photo hangs 40px past the hero on a phone, which is past the
       viewport with it. Clip that axis only: the vertical overhang above
       the headline is the point of the flourish.

       The clip itself sits on .rjr-app, not here: on the hero it cropped the
       photo at the edge of the measure, which is 20px inside the screen once
       .wrap has its padding, so the print looked chopped rather than bled. */
    .rjr-app .hero{display:block;position:relative}
    /* text column on the left with a clear channel reserved for the photo on the right */.rjr-app .hero-text{position:relative;z-index:2;padding-right:96px}
    /* photo pinned to the top-right corner, cropped by the hero's overflow */.rjr-app .polaroid:not(.rjr-polaroid){display:block;position:absolute;top:-15px;right:-48px;z-index:1;
      width:132px;margin-top:0;transform:rotate(3deg);pointer-events:none}
    .rjr-app .polaroid:not(.rjr-polaroid) .photo{width:150px;height:150px}
    .rjr-app .polaroid:not(.rjr-polaroid) .tape{width:56px;height:20px;top:-10px}
    /* item rows: push "Don't need" to its own right-aligned line so the item has more width */.rjr-app ul.items li{flex-wrap:wrap}
    .rjr-app .it-remove{flex:0 0 100%;text-align:right;margin-top:2px}
  
}
  @media(max-width:560px){
    .rjr-app .hero h1{font-size:40px}
    .rjr-app .panel{padding:20px 16px 24px}
    .rjr-app .sys summary{flex-wrap:wrap;gap:12px}
    .rjr-app .sys-cta{margin-left:0}
  
}

  /* ---- Newsletter opt-in ----
     Sits on a navy panel, so it does not inherit the page's field styling.
     The heading is the same script face as .pop and needed the same leading:
     at line-height .9 its ascenders overlapped the paragraph underneath. */.rjr-app .tip.newsletter{padding:30px 30px 32px}

  /* The script face overshoots its line box in both directions, so the gap
     under it is margin rather than leading - leading alone just moved the
     whole block down and kept the overlap. */.rjr-app .tip.newsletter .lbl{
    font-size:clamp(28px,4.8vw,38px);
    line-height:1.2;
    margin:0 0 30px;
  }

  .rjr-app .tip.newsletter p{margin:0;font-size:15px;line-height:1.65;max-width:58ch}

  .rjr-app .news-check{
    display:flex;align-items:center;gap:11px;
    margin-top:22px;cursor:pointer;
    font-weight:600;font-size:15px;color:#fff;
  }
  .rjr-app .news-check input{
    width:20px;height:20px;flex:none;margin:0;
    accent-color:var(--orange);cursor:pointer;
  }

  .rjr-app .news-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}

  .rjr-app #newsletterEmail{
    flex:1 1 240px;min-width:0;
    padding:14px 16px;border:1.5px solid transparent;border-radius:11px;
    font-family:inherit;font-size:16px;background:#fff;color:var(--ink);transition:.15s;
  }
  .rjr-app #newsletterEmail::placeholder{color:#8aa0a8}
  .rjr-app #newsletterEmail:focus{
    outline:none;border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(244,131,31,.35);
  }

  /* Deliberately NOT var(--cta-bg): the CTA colour is navy, and this button
     sits on a navy panel. Orange is the only thing that reads as clickable
     here. */.rjr-app #newsletterSubmit{
    background:var(--orange);color:#fff;border:1.5px solid var(--orange);border-radius:11px;
    padding:14px 26px;font-weight:800;font-size:15.5px;cursor:pointer;
    transition:.15s;white-space:nowrap;
  }
  .rjr-app #newsletterSubmit:hover{background:var(--orange-soft);border-color:var(--orange-soft)}

  .rjr-app .news-msg{margin:14px 0 0;font-weight:700;font-size:14px;color:#eaf4f7}
  .rjr-app .tip.newsletter .field-warn{margin:14px 0 0}

  .rjr-app #newsletterWarn.show{display:block}

  @media(max-width:560px){
    .rjr-app .tip.newsletter{padding:22px 20px 24px}
    .rjr-app #newsletterSubmit{width:100%}
  
}

  /* ---- WordPress plugin addition: build loading state ---- */
  /* An overlay, not a panel in the flow.

     Scrolling to it could not be made reliable. Hiding the setup panel
     collapses the document, so the browser clamps the scroll position; and
     the RJR theme runs Lenis, which drives the real scroll position from its
     own frame loop and puts it back on the next frame. Scrolling first got
     it working on touch, where Lenis leaves scrolling alone, but not on a
     desktop wheel where Lenis is in charge.

     Taking it out of the flow removes the question entirely: there is no
     scroll position that can hide it, on any device, with or without a
     smooth-scroll library. */
  /* The backdrop. Plain page ground, and opaque: this covers the whole page
     while the list builds, so anything showing through would read as a
     rendering fault rather than a loading state. */.rjr-app #buildingState{
    position:fixed;inset:0;z-index:9998;
    display:flex;align-items:center;justify-content:center;
    margin:0;border:0;border-radius:0;box-shadow:none;
    padding:24px;
    background:var(--paper);
  }

  /* The card the bar sits in: the same fill, radius and shadow as .panel. */.rjr-app .building-inner{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:18px;text-align:center;
    width:100%;max-width:520px;
    padding:46px 32px;
    background:var(--card);
    border-radius:18px;
    box-shadow:var(--shadow);
  }
  .rjr-app .building-text{font-family:var(--font-head);font-weight:600;color:var(--teal);font-size:26px;
    margin:0;min-height:1.4em}
  .rjr-app .building-bar{width:100%;max-width:320px;height:10px;background:#e7ddc9;border-radius:999px;
    overflow:hidden;border:1px solid var(--line)}
  .rjr-app .building-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--orange),var(--orange-soft));
    border-radius:999px;transition:width 2.7s cubic-bezier(.4,0,.2,1)}

  /* ==========================================================================
     THEME POLAROID
     Only present when the Ready Jet Roam theme is installed: the template
     renders the theme's framed figure instead of the CSS one above, and the
     theme's own .rjr-polaroid rules do the framing, clipping and tilt.

     All this has to do is size it. The theme caps --portrait-2 at 26rem
     because it uses it as a page-hero photo; here it is a flourish beside a
     headline, so the cap is replaced. Height comes from the frame scan's own
     aspect ratio (981 x 1530), so only a width is set.
     ========================================================================== */.rjr-app .hero .rjr-polaroid{
    flex:none;
    width:290px;
    max-width:290px;
    margin-top:-10px;
  }

  /* Which part of a square photo survives the portrait crop. Slightly above
     centre keeps a face in frame rather than cutting the top of the head. */.rjr-app .hero .rjr-polaroid .rjr-polaroid__photo{--rjr-pl-pos:50% 42%}

  @media(max-width:600px){
    /* Same treatment the CSS polaroid gets at this width: out of the flow,
       tucked into the channel the hero text leaves on the right. */.rjr-app .hero .rjr-polaroid{
      position:absolute;top:-18px;right:-40px;z-index:1;
      width:200px;max-width:200px;margin-top:0;pointer-events:none;
    }
  
}

  @media(max-width:560px){
    .rjr-app .hero .rjr-polaroid{width:158px;max-width:158px;right:-30px}
  
}

  /* ---- Mobile rhythm ----
     Every gap between the panel's top-level pieces was set by a different
     rule, so on a narrow screen they read as a pile rather than a sequence.
     One block, one scale. */@media(max-width:600px){
    .rjr-app .toptools{margin:-4px 0 20px}

    /* The eyebrow's own margin comes from the theme and is sized for a
       full-width section head; it is too much above a panel heading. */.rjr-app .kicker{margin-bottom:14px !important}

    .rjr-app h2.step{margin:0 0 16px}

    /* .scr is inline and carries 2em of leading, which is right on one line
       and far too much once the heading wraps - which it always does here. */.rjr-app h2.step .scr{line-height:1.5em;margin-left:.3em}

    .rjr-app .summary{gap:8px;margin:0 0 20px}
    .rjr-app .pill{font-size:13px;padding:6px 13px}

    .rjr-app .progwrap{margin:0 0 20px}

    .rjr-app .lead{margin:0 0 18px}
  
}

  /* =========================================================================
     PRINT, part two
     The first print block predates the apps living inside the theme. The
     theme ships no print rules of its own, so its header, its mobile nav
     drawer and its footer were all landing in the printout - the stray
     header at the foot of the last page was the mobile drawer, which is
     off-screen on screen but has nowhere to hide on paper.
     ========================================================================= */@media print{
    /* Theme chrome. Safe to name here: this stylesheet only loads on a page
       carrying the shortcode. */.rjr-header,
.rjr-nav,
.rjr-footer,
.rjr-skip-link,
.rjr-decor,
#wpadminbar{display:none !important}

    /* The app is the page now, so it gets the page. */.rjr-app-page,
.rjr-app .wrap{max-width:none !important;margin:0 !important;padding:0 !important}

    /* The masthead was three stacked lines with the script word on its own,
       which cost most of the first sheet before a single item. Inline, and
       smaller. */
    /* Millimetres, not pixels: this is paper. The masthead sat hard
       against the top edge of the sheet with the pills right under it. */.rjr-app .hero{display:block !important;margin:0 0 6px !important;padding:9mm 0 6mm !important}
    .rjr-app .hero h1{font-size:26pt !important;line-height:1.15 !important;margin:0 !important}
    .rjr-app .hero h1 br{display:none}
    .rjr-app .hero h1 .pop{
      display:inline !important;
      font-size:.9em !important;
      line-height:1 !important;
      transform:none !important;
      margin:0 .18em;
    }

    .rjr-app h2.step{font-size:15pt !important;margin:0 0 8px !important}
    .rjr-app h2.step .scr{line-height:1 !important}

    .rjr-app .sys{transform:none !important;box-shadow:none !important;background-image:none !important}

    /* The overlay must never print: it is fixed, so it would otherwise stamp
       itself onto the first sheet. */.rjr-app #buildingState{display:none !important}
  
}

  /* The page heading, gone.

     The plugin filters the title away (see rjr_apps_hide_page_title), which
     is enough for a theme that prints it with the_title() - that bails on an
     empty string. The RJR theme's page.php builds its own heading block, so
     an empty <h1> and its wrapper survive the filter. This removes them.

     Naming a theme class is safe here for the same reason it is in the print
     block: this stylesheet only loads on a page carrying the shortcode, and
     on such a page the app supplies the only heading worth having. A theme
     that ships a page-<slug>.php - as this one does for both apps - never
     renders the block at all, so this is the fallback path, not the usual
     one. */.rjr-app .rjr-page-head{display:none}


/* =========================================================================
   SHOE FINDER
   What the quiz adds on top of the shared furniture. Rules under
   #rjr-shoefinder are either a place the two apps genuinely differ, or a
   component whose class name the packing app also uses.
   ========================================================================= */


#rjr-shoefinder{box-sizing:border-box;margin:0;padding:0}

/* The reset above is `#id *`, so it carries ID specificity and beat the
   theme's own .rjr-eyebrow padding - which left the brush stroke sized to a
   tight text box and the label spilling out of it. Anything borrowed from the
   theme has to have its geometry handed back afterwards. */.rjr-app .rjr-eyebrow{
  padding:.55em 3em .65em;
  margin:0;
}

/* font-size and padding used to live on <body>. They cannot any more: the app
   is no longer on a blank template, so anything set on body also reshapes the
   theme's header, footer and everything else on the page. They belong to the
   app, so they sit on the app. */#rjr-shoefinder{font-size:18px}

#rjr-shoefinder .polaroid:not(.rjr-polaroid) .tape{border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6)}

#rjr-shoefinder .polaroid:not(.rjr-polaroid) .photo{background:var(--blue-band);display:flex;align-items:center;justify-content:center;font-size:2.6rem}

#rjr-shoefinder .sys summary{justify-content:space-between}

/* A link with an arrow, not a filled button. The paper cards on the home page
   end in exactly this, and a solid pill on paper stock reads as a control
   bolted onto a note rather than part of it. */#rjr-shoefinder .sys-cta{letter-spacing:0;text-transform:none}

#rjr-shoefinder .sys-cta .chev{display:inline-block}

#rjr-shoefinder .sys .body p{margin-bottom:12px}

#rjr-shoefinder .sys ul.sysrules{margin-top:6px}

#rjr-shoefinder .sys ul.sysrules li{margin-bottom:12px}


/* ---------- Fields and options ---------- */#rjr-shoefinder .field{margin-top:18px}

#rjr-shoefinder .field label,
.rjr-app .qlabel{
  display:block;font-weight:700;font-size:1.05rem;margin-bottom:4px;color:var(--teal);
}

#rjr-shoefinder .hint{font-weight:600;font-size:.86rem;color:var(--teal-deep)}

#rjr-shoefinder .opts{flex-direction:column;margin-top:14px}

#rjr-shoefinder .opt{display:block;width:100%;text-align:left;font-family:var(--font-body)}

.rjr-app .opt .sub{display:block;font-size:.88rem;font-weight:400;color:var(--teal-deep);margin-top:3px}

#rjr-shoefinder .opt:active{transform:translateY(1px)}

#rjr-shoefinder .cta:active{transform:translateY(1px)}

#rjr-shoefinder .cta:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

#rjr-shoefinder .cta.sm{min-height:0}


/* ---------- Results ---------- */#rjr-shoefinder .summary{background:var(--blue-band);border-radius:14px;padding:14px 18px;font-size:.98rem}

/* No border: the fill and the shadow already lift a slot off the page, and
   the outline on top of them was the card-with-a-box look. */.rjr-app .slot{
  background:var(--card);border-radius:16px;
  padding:30px;margin-bottom:28px;box-shadow:var(--shadow);
}

/* Spacing through the slot, top to bottom: the numbered title, the reason
   for the slot, then the shoe. Each step gets more room than the last so the
   photo row reads as the payload and not as a fourth line of text. */.rjr-app .slot .slot-no{
  display:flex;align-items:center;gap:13px;margin-bottom:12px;
}

#rjr-shoefinder .slot .num{
  flex:0 0 34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;
  font-weight:800;font-size:.95rem;display:flex;align-items:center;justify-content:center;
}

#rjr-shoefinder .slot h3{font-family:var(--font-head);font-weight:700;font-size:1.6rem;
  line-height:1.2;color:var(--teal)}

.rjr-app .slot .why-slot{color:var(--teal-deep);font-size:.97rem;line-height:1.6;
  margin-bottom:22px}

.rjr-app .pick{display:flex;gap:30px;align-items:flex-start}

/* The photo is the point of the card, so it gets the room. No shadow: the
   slot it sits in already carries one, and two stacked shadows read as a
   sticker on a card. */.rjr-app .pick-img{
  flex:0 0 168px;width:168px;background:#fff;padding:9px;border-radius:3px;
  transform:rotate(-2deg);
}

.rjr-app .pick-img .ph{
  width:100%;aspect-ratio:1;background:var(--blue-band);border-radius:2px;
  display:flex;align-items:center;justify-content:center;font-size:3.2rem;
}

.rjr-app .pick-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;display:block}

.rjr-app .pick-img .ph-note{
  font-family:var(--font-script);font-size:.85rem;color:var(--teal-deep);
  text-align:center;line-height:1;margin-top:4px;
}

.rjr-app .pick-info{flex:1;min-width:0}

/* Body face, not the display face: it is a product name, and at 1.2rem the
   serif read as a second heading competing with the slot title above it.
   --font-body resolves to Poppins from the theme. */.rjr-app .pick-info .name{font-family:var(--font-body);font-weight:700;
  font-size:1.2rem;line-height:1.3;color:var(--teal);margin-bottom:14px}

.rjr-app .pick-info .why{font-size:.97rem;line-height:1.6;margin:16px 0 24px}

.rjr-app .badge,
.rjr-app .fits{
  display:inline-block;border-radius:99px;font-size:.76rem;font-weight:800;
  padding:5px 12px;line-height:1.35;
}

.rjr-app .badge{background:var(--orange);color:#fff}

.rjr-app .fits{background:var(--blue-band);color:var(--teal-deep)}

/* Affiliate buttons are actions, so they take the CTA colour and the theme
   radius like every other button on the site. */.rjr-app .buy{
  display:inline-block;background:var(--cta-bg);color:var(--cta-text);text-decoration:none;
  border-radius:var(--btn-radius);font-weight:700;font-size:.95rem;padding:14px 26px;min-height:48px;
}

.rjr-app .buy:hover{background:var(--cta-bg-hover);color:var(--cta-text);
  box-shadow:var(--rjr-shadow-lg,0 14px 30px rgba(43,58,64,.14))}

.rjr-app .checked{font-size:.78rem;color:var(--teal-deep);margin-top:10px}

#rjr-shoefinder .tip ul{list-style:none}

#rjr-shoefinder .tip li{display:flex;gap:12px;margin-bottom:14px;font-size:14.5px;line-height:1.6;color:#eaf4f7}

#rjr-shoefinder .tip li:last-child{margin-bottom:0}

.rjr-app .tip li .dot{flex:0 0 8px;height:8px;border-radius:50%;background:var(--orange);margin-top:8px}

#rjr-shoefinder .skip-box h4{font-weight:700;margin-bottom:8px}

#rjr-shoefinder .skip-box p{font-size:14.5px;color:var(--teal-deep)}

.rjr-app .app-foot .foot-cta{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;font-size:1rem;color:var(--teal);margin-bottom:40px;text-align:left;
}


/* ---------- Print ---------- */@media print{

  .rjr-app .no-print,
.rjr-app .buy,
.rjr-app .app-foot .foot-cta{display:none !important}

  .rjr-app .slot{box-shadow:none;border:0;break-inside:avoid}
#rjr-shoefinder .panel{break-inside:avoid}

  #rjr-shoefinder .tip,
#rjr-shoefinder .summary{background:#fff;border:0}

  #rjr-shoefinder a{color:#000;text-decoration:none}
}


/* The packing app's treatment, verbatim in shape: the photo comes out of the
   flow and tucks into the top-right corner, cropped by the hero's overflow,
   with the text column reserving a channel for it. Stacking them instead
   pushed the photo a screen down and left the headline alone at the top. */@media (max-width:600px){

  /* A slot stacks: the photo, then what it is and why. Below this the two
     columns leave the copy setting three or four words to a line. */.rjr-app .pick{flex-direction:column;align-items:flex-start;gap:18px}
  .rjr-app .pick-img{flex:0 0 auto;width:200px;max-width:100%}
  .rjr-app .hero .polaroid:not(.rjr-polaroid){
    display:block;position:absolute;top:-15px;right:-48px;z-index:1;
    width:132px;margin-top:0;pointer-events:none;
  }
}

@media (max-width:560px){
}

@media (max-width:520px){

  #rjr-shoefinder{font-size:17px}


  .rjr-app .polaroid:not(.rjr-polaroid){flex-basis:112px;padding:8px 8px 22px}

  .rjr-app .polaroid:not(.rjr-polaroid) .photo{width:96px;height:96px;font-size:2rem}

  #rjr-shoefinder .panel{padding:22px 18px}

  #rjr-shoefinder h2.step{font-size:1.5rem}

  #rjr-shoefinder h2.step .scr{font-size:1.65rem}
}


/* =========================================================================
   ADDED FOR THE WORDPRESS BUILD
   Everything above this line is the prototype's CSS, scoped. Everything
   below was added: the opt-in block, accessibility affordances, and a
   proper print stylesheet.
   ========================================================================= */

/* ---------- Screen-reader-only ---------- */.rjr-app .rjr-sr-only,
.rjr-app .rjr-sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Focus visibility ----------
   The prototype styled :focus-visible on .opt only. Everything interactive
   needs a visible ring, and the heading takes programmatic focus after each
   step, which must NOT draw a ring - it was not focused by the keyboard. */

/* The packing app's focus ring, so a keyboard user meets the same affordance
   in both tools. */#rjr-shoefinder [role="radio"]:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:2px;
  border-radius:8px;
}

#rjr-shoefinder h2.step:focus{outline:none}

/* ---------- Newsletter opt-in ---------- */.rjr-app .optin{margin-top:20px}

.rjr-app .optin-toggle{
  display:flex;align-items:center;gap:11px;
  cursor:pointer;font-weight:600;color:var(--teal);line-height:1.45;
}

#rjr-shoefinder .optin-toggle input{
  width:20px;height:20px;flex:none;margin-top:2px;
  accent-color:var(--orange);cursor:pointer;
}

.rjr-app .optin-fields{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;
}

#rjr-shoefinder .optin-fields input[type="email"]{
  flex:1 1 240px;min-width:0;
  font-family:var(--font-body);font-size:1rem;
  padding:13px 15px;
  border:2px solid var(--line);border-radius:12px;
  background:var(--paper);color:var(--ink);
}

#rjr-shoefinder .optin-fields input[type="email"]:focus{
  border-color:var(--orange);outline:none;
}

.rjr-app .optin-msg{margin-top:12px;font-size:.95rem;min-height:1.2em}
.rjr-app .optin-msg.is-ok{color:var(--teal);font-weight:700}
.rjr-app .optin-msg.is-error{color:#c0442a;font-weight:600}

/* ---------- Motion ---------- */@media (prefers-reduced-motion:reduce){
  #rjr-shoefinder *::before,
#rjr-shoefinder *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
#rjr-shoefinder *{animation-iteration-count:1 !important}
}

/* ---------- Print ----------
   The prototype's print rules are above; these finish the job. She is
   printing this to take shopping or to pack from, so the shoe photos and
   the three slot cards have to survive, and nothing interactive should. */@media print{
  #rjr-shoefinder,
#rjr-shoefinder *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  .rjr-app .optin,
#rjr-shoefinder .skip-link,
.rjr-app #rjrStatus{display:none !important}
#rjr-shoefinder .sys{display:none !important}

  /* Keep a slot and its photo together on one page. */.rjr-app .slot{
    break-inside:avoid;page-break-inside:avoid;
    margin-bottom:12px;
  }

  .rjr-app .pick-img img{max-width:96px;height:auto}

  /* The disclosure is a legal requirement - it prints. */#rjr-shoefinder .disc{display:block !important;font-size:9pt}
}

/* These live here, next to the base rule, and not up in the general mobile
   block: same specificity, so whichever is declared last wins, and declared
   first they lost. The packing app keeps its pair together for this reason. */@media (max-width:600px){
}

@media (max-width:560px){
}

/* The emoji stands in when there is no photo. In the theme frame it sits
   inside the clipped window rather than in a CSS matte, so it needs its own
   centring and a ground to sit on. */.rjr-app .rjr-polaroid__window{
  background:var(--blue-band);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.4rem;
  line-height:1;
}

@media (max-width:520px){
  .rjr-app .rjr-polaroid__window{font-size:1.9rem}
}

/* ==========================================================================
   PRINT, part two
   The blocks above predate this app living inside the theme. The theme ships
   no print rules of its own, so its header, its mobile nav drawer and its
   footer were all landing in the printout.
   ========================================================================== */@media print{

  #rjr-shoefinder{padding:0 !important;font-size:11pt}
  #rjr-shoefinder .hero p.tag{font-size:10.5pt !important;margin-top:6px !important}

  /* The tips callout is navy with near-white text on screen. The block above
     whitens its background for paper, which left the text invisible - white
     on white. Everything inside it has to come back to ink. */#rjr-shoefinder .tip,
#rjr-shoefinder .tip .lbl,
#rjr-shoefinder .tip li{color:#000 !important}
  #rjr-shoefinder .tip .lbl{font-size:20pt !important;margin-bottom:10px !important}

  /* Keep a slot and its photo on one sheet, and stop panels being padded and
     bordered like screen cards. */#rjr-shoefinder .panel{margin:0 0 10px !important}
  .rjr-app .slot{
    border:0 !important;box-shadow:none !important;
    break-inside:avoid;page-break-inside:avoid;margin-bottom:10px !important;padding:14px !important;
  }
  .rjr-app .pick-img{flex-basis:120px !important;width:120px !important;transform:none !important}

  #rjr-shoefinder .skip-box{break-inside:avoid;page-break-inside:avoid}
  #rjr-shoefinder .app-foot{margin-top:18px !important}
}

.rjr-app #sfBuildingState{
  position:fixed;inset:0;z-index:9998;
  display:flex;align-items:center;justify-content:center;
  margin:0;border:0;border-radius:0;box-shadow:none;
  padding:24px;
  background:var(--paper);
}

@media print{
  /* It is fixed, so it would otherwise stamp itself onto the first sheet. */.rjr-app #sfBuildingState{display:none !important}
}


/* ---------- Shoe Finder: spacing that the packing app does not want --------
   Three pieces of shared furniture sit differently in this app, because what
   is under them is different.

   .panel      here a panel is followed by the three slot cards, so it needs
               to end. In the packing app it is the page.
   .tip        the packing app's tip is the newsletter box: one heading, no
               list. This one is a heading over a list, and the packing app's
               35px script face at .9 leading dropped its descenders straight
               through the first line of it.
   -------------------------------------------------------------------------- */
#rjr-shoefinder .panel{margin:20px 0 50px}

#rjr-shoefinder .tip{padding:36px 28px 28px;margin:34px 0}

#rjr-shoefinder .app-foot .sig{margin-top:14px}

#rjr-shoefinder .tip .lbl{line-height:1.15;margin-bottom:35px}

#rjr-shoefinder .skip-box{margin:34px 0 4px}

#rjr-shoefinder .optin{margin-top:34px}

/* On a phone the slot is one column, so the gap between the photo and the
   copy is doing the work the 30px column gap does on a desktop. */
@media (max-width:600px){
  #rjr-shoefinder .slot{padding:24px 20px}
  #rjr-shoefinder .pick{gap:22px}
  #rjr-shoefinder .pick-info .name{margin-bottom:12px}
  #rjr-shoefinder .pick-info .why{margin:14px 0 22px}
  #rjr-shoefinder .tip{padding:30px 20px 24px;margin:28px 0}
  #rjr-shoefinder .tip .lbl{font-size:30px;margin-bottom:18px}
}