/* App mode: shown only when installed (standalone) or inside the native app. Browser visitors see the site unchanged. */
.oa-tabs,.oa-install{display:none}
html.oa-app .mbar,html.oa-app .ao-fab,html.oa-app .topline,html.oa-app .nl-pop,html.oa-app #nl-pop{display:none!important}
html.oa-app body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
html.oa-app .oa-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0;z-index:95;background:rgba(247,243,236,.97);backdrop-filter:blur(10px);border-top:1px solid var(--stone,#e3dacb);padding-bottom:env(safe-area-inset-bottom)}
.oa-tabs a,.oa-tabs button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;font:600 11px/1.1 var(--sans,system-ui);color:var(--muted,#5f6a64);-webkit-tap-highlight-color:transparent}
.oa-tabs svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.oa-tabs [aria-current=page]{color:var(--water-d,#163d5c)}
.oa-tabs [aria-current=page] svg{stroke-width:2.3}
.oa-install{position:fixed;left:12px;right:12px;bottom:calc(150px + env(safe-area-inset-bottom));z-index:96;background:#163d5c;color:#fff;border-radius:16px;padding:14px 14px 14px 16px;align-items:center;gap:12px;box-shadow:0 18px 40px -16px rgba(10,30,40,.6);font:500 14px/1.35 var(--sans,system-ui)}
.oa-install.show{display:flex}
.oa-install img{width:40px;height:40px;border-radius:10px}
.oa-install p{margin:0;flex:1}
.oa-install button{border:0;border-radius:999px;padding:9px 14px;font:600 14px var(--sans,system-ui);cursor:pointer}
.oa-install .go{background:#3a9fd4;color:#fff}.oa-install .no{background:transparent;color:#cfe3ee;padding:9px 6px}
@media(min-width:900px){html.oa-app .oa-tabs{left:50%;right:auto;transform:translateX(-50%);width:520px;border-radius:18px 18px 0 0;border:1px solid var(--stone,#e3dacb)}}

/* v2: app feel */
html.oa-app{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
html.oa-app body{-webkit-touch-callout:none}
html.oa-app input,html.oa-app textarea,html.oa-app select{font-size:16px} /* no iOS zoom on focus */
html.oa-app .nav{padding-top:env(safe-area-inset-top)}
/* launch splash: logo on cream, fades out. Shown once per app session (flag set by inline head script). */
html.oa-splash body::after{content:"";position:fixed;inset:0;z-index:99999;background:#f7f3ec url(/assets/app/splash/splash-1170x2532.png) center/cover no-repeat;pointer-events:none;animation:oa-splash-out .45s ease .85s forwards}
@keyframes oa-splash-out{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){html.oa-splash body::after{animation-duration:.01s}}
/* back bar */
.oa-back{display:none}
html.oa-app .oa-back{display:flex;align-items:center;gap:2px;position:sticky;top:0;z-index:94;width:100%;height:44px;padding:0 12px 0 8px;margin:0;border:0;border-bottom:1px solid var(--stone,#e3dacb);background:rgba(247,243,236,.97);backdrop-filter:blur(10px);font:600 16px/1 var(--sans,system-ui);color:var(--water-d,#163d5c);cursor:pointer;text-align:left}
html.oa-app .oa-back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* offline banner */
.oa-net{position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:97;background:#22302b;color:#fff;border-radius:12px;padding:10px 14px;font:600 14px/1.3 var(--sans,system-ui);text-align:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
/* hide desktop-only chrome that crowds a phone app */
html.oa-app .nav-cta,html.oa-app .nav-links{display:none!important}

/* iPhone/iPad install card (Safari: Share, then Add to Home Screen) */
.oa-install.oa-ios{align-items:flex-start;padding:14px 10px 14px 14px}
.oa-install.oa-ios img{width:44px;height:44px;border-radius:11px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.oa-install.oa-ios p{display:flex;flex-direction:column;gap:3px}
.oa-install.oa-ios p b{font:600 15px/1.2 var(--serif,Georgia,serif);letter-spacing:.01em}
.oa-install.oa-ios p span{color:#e3eef4}
.oa-install.oa-ios p small{font-size:12.5px;color:#a9c6d6}
.oa-install .oa-share{display:inline-block;width:17px;height:17px;vertical-align:-3px;margin:0 3px 0 1px;stroke:#8fd0f2;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oa-install.oa-ios .no{align-self:center}
@media(min-width:700px){.oa-install.oa-ios{left:auto;right:24px;width:420px}}
/* iPhone/iPad home-screen app: notch + home indicator */
html.oa-ios-app body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
html.oa-app .oa-tabs{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
html.oa-app .oa-tabs a,html.oa-app .oa-tabs button{min-height:44px}
/* ===== app-buttons-1027: install sheets + two-choice app buttons + header account button ===== */
html.oa-sheet-open,html.oa-sheet-open body{overflow:hidden}
.oa-sheet{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-end;justify-content:center;font:400 16px/1.45 var(--sans,system-ui,sans-serif);color:#22302b}
.oa-sheet-bg{position:absolute;inset:0;background:rgba(10,24,34,.55);opacity:0;transition:opacity .2s}
.oa-sheet-card{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -20px rgba(0,0,0,.4);transform:translateY(24px);opacity:0;transition:transform .25s,opacity .2s}
.oa-sheet.show .oa-sheet-bg{opacity:1}.oa-sheet.show .oa-sheet-card{transform:none;opacity:1}
@media(min-width:700px){.oa-sheet{align-items:center}.oa-sheet-card{border-radius:22px}}
.oa-sheet-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:#f3eee5;border-radius:50%;font-size:26px;line-height:1;color:#163d5c;cursor:pointer}
.oa-sheet-k{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1f5f60}
.oa-sheet h2{margin:0 48px 8px 0;font:500 23px/1.2 var(--serif,"Fraunces",Georgia,serif);color:#163d5c}
.oa-sheet-i{margin:0 0 10px;color:#3b4742}
.oa-steps{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:10px}
.oa-steps li{display:grid;grid-template-columns:26px 44px 1fr;gap:10px;align-items:center;background:#f7f3ec;border-radius:14px;padding:12px}
.oa-n{width:26px;height:26px;border-radius:50%;background:#163d5c;color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center}
.oa-ic{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.oa-ic svg{width:24px;height:24px}
.oa-sheet svg{fill:none;stroke:#1a7fd0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oa-sheet .oa-ic svg circle[r="1.6"],.oa-sheet .oa-t svg circle[r="1.6"],.oa-sheet-f svg circle[r="1.6"]{fill:#1a7fd0;stroke:none}
.oa-t svg{width:18px;height:18px;vertical-align:-3px;margin:0 1px}.oa-t img{width:22px;height:22px;border-radius:6px;vertical-align:-5px}
.oa-sm{display:block;font-size:14px;color:#5f6a64;margin-top:2px}
.oa-sheet-f{margin:4px 0 12px;font-size:14px;color:#5f6a64}.oa-sheet-f svg{width:16px;height:16px;vertical-align:-3px}
.oa-sheet-b{display:flex;gap:10px}.oa-sheet-b button{flex:1;min-height:50px;border-radius:999px;font:600 16px var(--sans,system-ui);cursor:pointer}
.oa-copy{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1.5px solid #163d5c;color:#163d5c}.oa-copy svg{width:18px;height:18px;stroke:#163d5c}
.oa-copy.ok{border-color:#1d5b34;color:#1d5b34}.oa-done{background:#163d5c;border:0;color:#fff}
/* two-choice buttons */
.oa-pick{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.oa-pick .oa-get{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:8px 12px;border-radius:999px;font:600 16px/1.1 var(--sans,system-ui);cursor:pointer;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;position:relative;text-align:left}
.oa-pick .oa-get svg{width:22px;height:22px;flex:none;fill:currentColor}
.oa-pick .oa-get small{display:block;font-weight:500;font-size:12px;opacity:.85}
.oa-pick .oa-get.is-mine{background:#e9dcc0;border-color:#e9dcc0;color:#163d5c}
.oa-pick .oa-get:focus-visible{outline:3px solid #f2c14e;outline-offset:2px}
.oa-desk{margin:10px 0 0;font-size:14px;color:rgba(255,255,255,.85);grid-column:1/-1}
/* header account button */
.oa-acct{display:inline-flex;align-items:center;gap:6px;flex:none;height:40px;padding:0 12px 0 9px;border-radius:999px;border:1px solid var(--stone,#d8cfbf);background:#fff;color:#163d5c;font:600 14px/1 var(--sans,system-ui);text-decoration:none;white-space:nowrap;order:0}
.oa-acct svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.oa-acct:hover,.oa-acct:focus-visible{border-color:#163d5c}
.oa-acct .oa-av{width:26px;height:26px;border-radius:50%;background:#163d5c;color:#fff;display:grid;place-items:center;font-size:11.5px;letter-spacing:.02em}
.oa-acct.in{padding-left:5px}
.nav .nav-search ~ .oa-acct{margin-left:2px}
.nav .oa-acct ~ .menu-btn.koi-btn{margin-left:2px!important}
@media(min-width:1321px){.nav .oa-acct{margin-left:auto}.nav .nav-search ~ .oa-acct{margin-left:0}}
@media(max-width:700px){.nav .oa-acct{margin-left:auto}.nav .nav-search ~ .oa-acct{margin-left:0}}
/* phones: search becomes an icon that opens full width */
@media(max-width:480px){
  .nav .nav-search{flex:0 0 40px!important;width:40px;min-width:40px!important;max-width:40px!important;margin:0 0 0 auto!important}
  .nav .nav-search input{width:40px!important;height:40px;padding:0!important;color:transparent;background-position:50% 50%!important;cursor:pointer}
  .nav .nav-search input::placeholder{color:transparent}
  .nav .nav-search:focus-within{position:absolute;left:12px;right:12px;width:auto;max-width:none!important;z-index:20}
  .nav .nav-search:focus-within input{background-color:#fff!important;width:100%!important;color:var(--ink,#22302b);padding:9px 10px 9px 32px!important;background-position:10px 50%!important;cursor:text}
  .nav .nav-search:focus-within input::placeholder{color:#8a918d}
  .nav .oa-acct{height:38px;padding:0 10px 0 7px;font-size:13.5px}
  .nav .oa-acct.in{padding-left:4px}
}
@media(max-width:359px){.nav .nav-in{gap:4px!important}.nav .oa-acct{flex-direction:column;justify-content:center;gap:1px;height:44px;width:44px;padding:0!important;border:0;background:transparent;font-size:10.5px;line-height:1}.nav .oa-acct svg{width:20px;height:20px}.nav .oa-acct.in .oa-acct-t{display:none}.nav .oa-acct.in .oa-av{width:30px;height:30px;font-size:12px}}
html.oa-app .oa-acct{height:38px}
@media(min-width:641px){.hp-app .oa-pick{width:auto;flex:0 0 400px}}
.oa-pick .oa-get.is-mine{background:#cdbd9f;border-color:#cdbd9f;color:#132f47}
/* make room for the account button on small phones (koi + gaps a bit tighter; nothing hidden) */
@media(max-width:480px){.nav .nav-in{gap:6px!important}.nav .oa-acct ~ .menu-btn.koi-btn{width:60px!important;min-width:60px!important;margin-left:0!important}.nav .oa-acct ~ .menu-btn.koi-btn span.koi-real,.nav .oa-acct ~ .menu-btn.koi-btn .koi-real img,.nav .oa-acct ~ .menu-btn.koi-btn .koi-real video{width:58px!important;height:31px!important}.nav .oa-acct ~ .cart-link{margin-left:0!important}}
@media(max-width:374px){.nav .wrap.nav-in{padding-left:0!important;padding-right:0!important}.nav .brand-col{flex:0 0 94px!important;width:94px!important;min-width:0!important}.nav .brand-col .brand,.nav .brand-col .brand img{width:94px!important;height:auto!important}.nav .oa-acct ~ .menu-btn.koi-btn{width:52px!important;min-width:52px!important}.nav .oa-acct ~ .menu-btn.koi-btn span.koi-real,.nav .oa-acct ~ .menu-btn.koi-btn .koi-real img,.nav .oa-acct ~ .menu-btn.koi-btn .koi-real video{width:50px!important;height:27px!important}.nav .nav-search{flex-basis:36px!important;width:36px;min-width:36px!important;max-width:36px!important}.nav .nav-search input{width:36px!important;height:36px}}
body:has(.hero-search) .nav .oa-acct{margin-left:auto!important}
@media(min-width:481px){html body .nav .nav-in .oa-acct ~ .menu-btn.koi-btn{margin-left:4px!important}}
@media(max-width:480px){html body .nav .nav-in .oa-acct ~ .menu-btn.koi-btn{margin-left:0!important}}

/* app-dashboard-1027: header account button shows the profile photo when there is one */
.oa-acct .oa-av.has-photo{overflow:hidden;background:#e9dcc0;padding:0}.oa-acct .oa-av.has-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* iphone-fix-1027: iPhone pop-up has one action + a corner close, taps never swallowed */
.oa-pick .oa-get,.oa-install,.oa-sheet button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.oa-install.oa-ios{cursor:pointer;align-items:center;padding-right:44px}
.oa-install.oa-ios .go{flex:none;white-space:nowrap}
.oa-install .no.x{position:absolute;top:4px;right:4px;width:36px;height:36px;padding:0;font-size:24px;line-height:36px;color:#cfe3ee;background:transparent;align-self:auto}