/* Snake Oil Spices — customer accounts (2026-10-11). Loaded on every page after cart.css.
   1 account button in the menu bar   2 sign-up forms (home band, after an order)   3 the account page + portal
   No boxes around content: sections sit on the page, split by hairlines. Buttons are the site's neon ember. */

/* ── 1 · ACCOUNT BUTTON (left of the cart): a cabinet key when signed out, your initial on a seal when signed in ── */
nav .nav-acct, nav .nav-acct:link, nav .nav-acct:visited {
  display: inline-flex; align-items: center; gap: .45rem; flex: none; min-width: 44px; min-height: 44px;
  margin: 0 0 0 clamp(.5rem, 1.3vw, 1.25rem); padding: 0 .1rem;
  font: 700 .75rem/1 'Lato', sans-serif; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--paper, #F5EDDC); background: none; border: 0; transition: color .2s ease; -webkit-tap-highlight-color: transparent;
}
html.has-acct nav .nav-cart { margin-left: clamp(.35rem, 1vw, 1rem); }
nav .nav-acct .na-ico { width: 28px; height: 28px; flex: none; overflow: visible; transition: filter .25s ease; }
.na-key .na-bow { fill: rgba(255, 138, 61, .08); stroke: #F2DCA6; stroke-width: 1.7; }
.na-key .na-eye { fill: none; stroke: #E8A83A; stroke-width: 1.5; }
.na-key .na-shaft { fill: none; stroke: #F2DCA6; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.na-seal .na-ring { fill: rgba(255, 122, 47, .16); stroke: #FF8A3D; stroke-width: 1.6; }
.na-seal .na-ring2 { fill: none; stroke: rgba(242, 220, 166, .55); stroke-width: .8; stroke-dasharray: 1.2 2.1; }
.na-seal .na-letter { font: 700 15px/1 'Playfair Display', serif; fill: #FFF1E2; }
nav .nav-acct.is-in .na-ico { filter: drop-shadow(0 0 7px rgba(255, 122, 47, .6)); }
nav .nav-acct:hover, nav .nav-acct:focus-visible { color: #fff; }
nav .nav-acct:hover .na-ico, nav .nav-acct:focus-visible .na-ico { filter: drop-shadow(0 0 10px rgba(255, 138, 61, .85)); }
nav .nav-acct:focus-visible, .acct :focus-visible, .acct-band :focus-visible { outline: 2px solid #FFA35C; outline-offset: 3px; }
/* the "Hi, Name" / "Sign in" word is shown or hidden by section 5 (the menu bar system) */
@media (max-width: 1179.98px) {
  nav .nav-acct { margin: 0; padding: 0 .2rem; justify-content: center; }
  html.has-acct nav .nav-cart { margin-left: 0; }
}

/* ── shared form pieces ── */
.acct-form { display: grid; gap: .45rem; margin: 0; align-content: start; }
.acct-form h2 { margin: 0 0 .6rem; font: 700 1.5rem/1.15 'Playfair Display', serif; color: #F5EDDC; }
.acct-form label, .acct-form legend { display: flex; align-items: baseline; gap: .6rem; margin-top: .55rem; padding: 0;
  font: 700 .6875rem/1.2 'Lato', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #E8A83A; }
.acct-hint { font: 400 .75rem/1.3 'Lato', sans-serif; letter-spacing: 0; text-transform: none; color: #B8A98A; }
.acct-form input[type="text"], .acct-form input[type="email"], .acct-form input[type="password"], .acct-form input[type="tel"],
.acct-band input[type="text"], .acct-band input[type="email"], .acct-band input[type="password"] {
  width: 100%; height: 50px; padding: 0 .9rem; border-radius: 2px; border: 1px solid rgba(232, 168, 58, .38);
  background: rgba(255, 255, 255, .05); color: #F5EDDC; font: 400 1rem/1 'Lato', sans-serif; -webkit-appearance: none; appearance: none;
}
.acct-form input::placeholder, .acct-band input::placeholder { color: #A8997C; }
.acct-form input:focus, .acct-band input:focus { outline: none; border-color: #FF8A3D; box-shadow: 0 0 0 1px #FF8A3D, 0 0 14px rgba(255, 122, 47, .35); }
.acct-form input[readonly] { color: #CFC2A4; background: rgba(255, 255, 255, .02); border-style: dashed; }
.acct-form .btn-primary, .acct-form .btn-outline { min-height: 52px; margin-top: 1rem; width: 100%; font-size: .875rem; }
.acct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.acct-three { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 .9rem; }
.acct-two > div, .acct-three > div { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.acct-eye, .acct-link { margin-left: auto; border: 0; background: none; padding: 0; cursor: pointer; font: 700 .6875rem/1.2 'Lato', sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: #FFD7B8; text-decoration: underline; text-underline-offset: 3px; }
.acct-link { margin: 0; font-size: .75rem; }
.acct-eye:hover, .acct-link:hover { color: #fff; }
.acct-check { display: flex !important; align-items: flex-start; gap: .65rem; margin-top: .9rem !important; cursor: pointer;
  font: 400 .875rem/1.4 'Lato', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #E9DDC2 !important; }
.acct-check input { flex: none; width: 20px; height: 20px; margin: .05rem 0 0; accent-color: #F0702A; }
.acct-status { margin: .55rem 0 0; min-height: 1.3em; font: 400 .9375rem/1.4 'Lato', sans-serif; color: #E9DDC2; }
.acct-status.err { color: #FFB199; } .acct-status.ok { color: #C9E7A8; }
.acct-status a, .acct-fine a, .acct-sent a { color: #FFB877; }
.acct-fine { margin: .4rem 0 0; font: 400 .75rem/1.45 'Lato', sans-serif; color: #B8A98A; }
.acct-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.25rem; margin: .9rem 0 0; }
.acct-sent { padding: .25rem 0; }
.acct-sent p { margin: 0 0 .5rem; font: 400 1rem/1.5 'Lato', sans-serif; color: #E9DDC2; }
.acct-sent .acct-sent-big { font: 700 1.75rem/1.1 'Playfair Display', serif; color: #F5EDDC; }
.acct-sent .acct-sent-fine { font-size: .8125rem; color: #B8A98A; }

/* ── 2a · HOME PAGE BAND: create your account right where you are ── */
.acct-band { position: relative; padding: clamp(3rem, 8vh, 5.5rem) var(--gutter, 1.5rem); background:
  radial-gradient(90% 120% at 100% 0%, rgba(255, 122, 47, .13), transparent 60%), linear-gradient(180deg, #15100A, #1B130B);
  border-top: 1px solid rgba(232, 168, 58, .22); border-bottom: 1px solid rgba(232, 168, 58, .22); }
.acct-band-in { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.acct-band h2 { margin: .4rem 0 0; font: 700 clamp(2rem, 4.2vw, 3.25rem)/1.05 'Playfair Display', serif; letter-spacing: -.01em; color: #F5EDDC; }
.acct-band h2 em { font-style: italic; color: #E8A83A; }
.acct-perks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.6rem 0 0; padding: 0; }
.acct-perks li { display: grid; justify-items: start; gap: .55rem; }
.acct-perks svg { width: 46px; height: 46px; filter: drop-shadow(0 0 9px rgba(255, 122, 47, .45)); }
.acct-perks .pk-a { fill: none; stroke: #F2DCA6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acct-perks .pk-b { fill: none; stroke: #FF8A3D; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.acct-perks b { font: 700 .75rem/1.25 'Lato', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #F5EDDC; }
.acct-band form { display: grid; gap: .6rem; }
.acct-band .acct-band-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.acct-band .btn-primary { min-height: 54px; width: 100%; font-size: .9375rem; }
.acct-band .acct-check { margin-top: .2rem !important; }
.acct-band-has { margin: .2rem 0 0; font: 400 .875rem/1.4 'Lato', sans-serif; color: #CFC2A4; }
.acct-band-has a { color: #FFB877; }
.acct-band-in[hidden], .acct-band [hidden] { display: none !important; }
.acct-band-back { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.acct-band-back p { margin: 0; font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.15 'Playfair Display', serif; color: #F5EDDC; }
.acct-band-back .acct-alt { margin: 0; }
@media (max-width: 880px) {
  .acct-band-in { grid-template-columns: 1fr; }
  .acct-perks { gap: .6rem; } .acct-perks svg { width: 38px; height: 38px; } .acct-perks b { font-size: .6875rem; letter-spacing: .1em; }
}
@media (max-width: 420px) { .acct-band .acct-band-row { grid-template-columns: 1fr; } }

/* ── 2b · AFTER AN ORDER (parchment, under the pad): one field makes an account ── */
.rx-acct, .rx-acct-done { max-width: 760px; margin: 1.25rem auto 0; padding: 1.4rem clamp(1.1rem, 4vw, 2rem) 1.5rem; background: #F5EDDC; color: #241A0F;
  border-top: 3px solid #E0561C; display: grid; gap: .6rem; }
.rx-acct-kicker { margin: 0; font: 700 .6875rem/1 'Lato', sans-serif; letter-spacing: .25em; text-transform: uppercase; color: #8A3411; }
.rx-acct-what { margin: 0; font: 400 1rem/1.45 'Lato', sans-serif; }
.rx-acct input[type="email"], .rx-acct input[type="password"] { width: 100%; height: 50px; padding: 0 .9rem; border: 1px solid rgba(60, 44, 24, .4);
  border-radius: 2px; background: #FFFDF6; color: #241A0F; font: 400 1rem/1 'Lato', sans-serif; }
.rx-acct input[readonly] { background: transparent; border-style: dashed; color: #5C4B34; }
.rx-acct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.rx-acct .rx-btn { min-height: 50px; white-space: nowrap; }
.rx-acct-opt { display: flex; gap: .6rem; align-items: flex-start; font: 400 .875rem/1.4 'Lato', sans-serif; cursor: pointer; }
.rx-acct-opt input { width: 18px; height: 18px; margin-top: .1rem; accent-color: #E0561C; }
.rx-acct .acct-status { color: #241A0F; } .rx-acct .acct-status.err { color: #A3260D; } .rx-acct .acct-status a { color: #8A3411; }
.rx-acct-done p, .rx-acct-done .acct-sent-big { color: #241A0F; } .rx-acct-done .acct-sent-fine { color: #5C4B34; } .rx-acct-done a { color: #8A3411; }
.rx-welcome a { color: var(--ember-ink, #8A3411); }
@media (max-width: 560px) { .rx-acct-row { grid-template-columns: 1fr; } }

/* ── 2b · "accounts exist" — the strip on the order page and the band above the footer on every other page ── */
.acct-strip, .acct-promo { position: relative; isolation: isolate; overflow: hidden; color: #F5EDDC;
  background:
    linear-gradient(180deg, rgba(13, 7, 3, .74), rgba(13, 7, 3, .60) 50%, rgba(13, 7, 3, .80)),
    radial-gradient(50% 80% at 85% 20%, rgba(255, 122, 47, .30), transparent 70%),
    url(/assets/account/hearth.jpg?v=1) center / cover no-repeat, #120A05; }
.acct-strip { padding: clamp(1rem, 2.6vh, 1.6rem) var(--gutter, 1.5rem); border-top: 1px solid rgba(255, 170, 110, .35); border-bottom: 1px solid rgba(255, 170, 110, .35); }
.acct-strip [hidden], .acct-promo [hidden] { display: none !important; }
.as-in { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem clamp(1.2rem, 3vw, 2.5rem); }
.as-shot { display: block; width: clamp(120px, 15vw, 190px); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 206, 160, .5); transform: rotate(-2.5deg);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .9), 0 0 30px -6px rgba(255, 122, 47, .6); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.as-shot:hover { transform: rotate(0) scale(1.04); }
.as-shot img { display: block; width: 100%; height: auto; aspect-ratio: 11 / 8; object-fit: cover; object-position: top; }
.as-kicker { margin: 0 0 .3rem; font: 700 .6875rem/1 'Lato', sans-serif; letter-spacing: .25em; text-transform: uppercase; color: #FFC58F; }
.as-lead { margin: 0; font: 700 clamp(1.35rem, 2.6vw, 2rem)/1.12 'Playfair Display', serif; color: #FFF6EA; }
.as-lead em { font-style: italic; color: #FFB45C; }
.acct-strip .acct-perks { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: .8rem 0 0; }
.acct-strip .acct-perks li { display: flex; align-items: center; gap: .55rem; }
.acct-strip .acct-perks svg { width: 30px; height: 30px; }
.acct-strip .acct-perks b { font-size: .6875rem; letter-spacing: .14em; }
.as-btns { display: grid; gap: .55rem; justify-items: stretch; text-align: center; }
.as-btns .btn-primary, .as-btns .btn-outline, .ap-btns .btn-primary, .ap-btns .btn-outline { min-height: 50px; padding-inline: 1.6rem; white-space: nowrap; }
.as-btns span { font: 400 .8125rem/1.3 'Lato', sans-serif; color: #E8C79A; }
.as-back { grid-template-columns: minmax(0, 1fr) auto; }
.acct-promo { padding: clamp(2.6rem, 7vh, 4.75rem) var(--gutter, 1.5rem); border-top: 1px solid rgba(255, 170, 110, .3); }
.ap-in { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: clamp(1.8rem, 5vw, 4.5rem); }
.acct-promo h2 { margin: .4rem 0 0; font: 700 clamp(2rem, 4.2vw, 3.25rem)/1.05 'Playfair Display', serif; letter-spacing: -.01em; color: #FFF6EA; }
.acct-promo h2 em { font-style: italic; color: #FFB45C; }
.ap-sub { margin: .9rem 0 0; max-width: 44ch; font: 400 1.125rem/1.5 'Lato', sans-serif; color: #F1E6CF; }
.acct-band .ap-sub { color: #E9DDC2; }
.ap-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 0; }
.ap-fine { margin: .8rem 0 0; font: 400 .875rem/1.4 'Lato', sans-serif; color: #E8C79A; }
.ap-shot { display: block; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 206, 160, .45); transform: perspective(1200px) rotateY(-9deg) rotateX(3deg) rotate(1deg);
  box-shadow: inset 0 1px 0 rgba(255, 240, 220, .5), 0 34px 70px -30px rgba(0, 0, 0, .95), 0 0 70px -14px rgba(255, 122, 47, .7); transition: transform .7s cubic-bezier(.22, 1, .36, 1); animation: apFloat 7s ease-in-out infinite; }
.ap-shot:hover { transform: perspective(1200px) rotateY(0) rotateX(0) scale(1.02); animation-play-state: paused; }
.ap-shot img { display: block; width: 100%; height: auto; aspect-ratio: 11 / 8.6; object-fit: cover; object-position: top; }
@keyframes apFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 900px) {
  .as-in { grid-template-columns: auto minmax(0, 1fr); } .as-btns { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .as-btns .btn-primary, .as-btns .btn-outline { padding-inline: .6rem; white-space: normal; text-align: center; } .as-btns span { grid-column: 1 / -1; }
  .as-back { grid-template-columns: 1fr; } .as-back .as-btns { grid-template-columns: 1fr; justify-items: start; }
  .ap-in { grid-template-columns: 1fr; } .ap-shot { transform: none; max-width: 560px; }
}
@media (max-width: 520px) {
  .as-shot { width: 96px; } .acct-strip .acct-perks { gap: .4rem 1rem; } .acct-strip .acct-perks svg { width: 24px; height: 24px; } .acct-strip .acct-perks b { font-size: .625rem; letter-spacing: .08em; }
  .ap-btns .btn-primary, .ap-btns .btn-outline { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .ap-shot { animation: none; } }

/* ── 3 · THE ACCOUNT PAGE ── */
.acct { min-height: 70svh; padding: calc(var(--nav-h, 72px) + clamp(1.1rem, 4vh, 3rem)) var(--gutter, 1.5rem) clamp(3rem, 8vh, 5rem);
  background: #120A05; color: #F5EDDC; }
.acct > section { max-width: 1080px; margin: 0 auto; }
.acct section { padding: 0; }                      /* the site's default section spacing does not apply inside the account page */
.acct-h1:focus, .acct-h1:focus-visible { outline: none; }
.acct [hidden] { display: none !important; }
.acct-h1 { margin: .35rem 0 0; font: 700 clamp(2.1rem, 5vw, 3.75rem)/1.04 'Playfair Display', serif; letter-spacing: -.015em; color: #F5EDDC; outline: none; }
.acct-h1 em { font-style: italic; color: #E8A83A; }
.acct-lede { margin: 1rem 0 0; max-width: 46ch; font: 400 1.125rem/1.5 'Lato', sans-serif; color: #E9DDC2; }
.acct-loading { opacity: .7; }
.acct-gate .acct-perks { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin-top: 1.1rem; }
.acct-gate .acct-perks li { display: flex; align-items: center; gap: .6rem; }
.acct-gate .acct-perks svg { width: 34px; height: 34px; }
.acct-cols { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(1.1rem, 3vh, 2.25rem);
  padding-top: clamp(1.1rem, 3vh, 2rem); border-top: 1px solid rgba(232, 168, 58, .22); }
.acct-cols > form + form { padding-left: clamp(2rem, 6vw, 5rem); border-left: 1px solid rgba(232, 168, 58, .22); }
.acct-step { padding-top: clamp(1rem, 6vh, 4rem); }
.acct-narrow { max-width: 440px; }
.acct-step .acct-form { margin-top: 1.5rem; }
@media (max-width: 820px) {
  .acct-cols { grid-template-columns: 1fr; }
  .acct-cols > form + form { padding-left: 0; border-left: 0; padding-top: 2rem; border-top: 1px solid rgba(232, 168, 58, .22); }
}

/* ── 4 · THE PORTAL: see /styles/portal.css (the "magazine" design, 2026-10-11) ── */

/* ── 1b · signed-in menu under the header account button: My account, My orders, Sign out ── */
.nav-acct-menu { position: fixed; z-index: 140; width: 220px; padding: .5rem 0; border: 1px solid rgba(255, 170, 110, .45); border-radius: 4px;
  background: linear-gradient(180deg, rgba(40, 22, 11, .97), rgba(20, 11, 5, .98)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 122, 47, .25), inset 0 1px 0 rgba(255, 236, 210, .12); }
.nav-acct-menu[hidden] { display: none; }
.nav-acct-menu .nam-who { margin: 0; padding: .45rem 1.1rem .6rem; font: 400 .8125rem/1.3 'Lato', sans-serif; color: #CFC2A4; border-bottom: 1px solid rgba(233, 221, 194, .12); }
.nav-acct-menu a, .nav-acct-menu button { display: block; width: 100%; padding: .75rem 1.1rem; border: 0; background: none; text-align: left; cursor: pointer;
  font: 700 .75rem/1 'Lato', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #F5EDDC; text-decoration: none; }
.nav-acct-menu a:hover, .nav-acct-menu a:focus-visible, .nav-acct-menu button:hover, .nav-acct-menu button:focus-visible { color: #FFC69A; background: rgba(255, 138, 61, .1); outline: none; }
.nav-acct-menu .nam-out { border-top: 1px solid rgba(233, 221, 194, .12); margin-top: .3rem; color: #FFB39A; }
.nav-acct-toast { position: fixed; left: 50%; top: calc(var(--nav-h, 72px) + 14px); z-index: 150; transform: translate(-50%, -8px); opacity: 0; transition: opacity .3s ease, transform .3s ease;
  padding: .7rem 1.2rem; border: 1px solid rgba(255, 170, 110, .55); border-radius: 3px; background: rgba(20, 11, 5, .96); color: #F5EDDC; font: 400 .875rem/1.3 'Lato', sans-serif;
  box-shadow: 0 0 18px rgba(255, 122, 47, .3); pointer-events: none; }
.nav-acct-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 2026-10-11: order-page account strip slimmed (Chad: "fat and bloated"). Signed in it is one quiet line; signed out a compact band. */
.acct-strip { padding: .7rem var(--gutter, 1.5rem); }
.acct-strip .as-shot { width: clamp(84px, 9vw, 120px); }
.acct-strip .as-kicker { font-size: .625rem; margin-bottom: .2rem; }
.acct-strip .as-lead { font-size: clamp(1.05rem, 1.7vw, 1.35rem); }
.acct-strip .acct-perks { margin-top: .45rem; }
.acct-strip .acct-perks svg { width: 22px; height: 22px; }
.acct-strip .acct-perks b { font-size: .625rem; }
.acct-strip .as-btns { grid-auto-flow: column; align-items: center; gap: .6rem; }
.acct-strip .as-btns .btn-primary, .acct-strip .as-btns .btn-outline { min-height: 40px; padding-inline: 1.1rem; font-size: .6875rem; }
.acct-strip .as-btns span { grid-column: 1 / -1; font-size: .75rem; }
.acct-strip:has(.as-back:not([hidden])) { padding-block: .55rem; background: rgba(20, 11, 5, .92); border-color: rgba(255, 170, 110, .22); }
.acct-strip .as-back { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; }
.acct-strip .as-back .as-lead { font: 400 .9375rem/1.4 'Lato', sans-serif; color: #E9DDC2; }
.acct-strip .as-back .as-lead em { font-style: normal; font-weight: 700; color: #FFC58F; }
.acct-strip .as-back .as-btns .btn-outline { min-height: 34px; padding-inline: .9rem; font-size: .625rem; }
@media (max-width: 900px) {
  .acct-strip .as-btns { grid-auto-flow: row; }
  .acct-strip .as-back { flex-wrap: wrap; }
}

/* ── 5 · THE MENU BAR: one system for every page (2026-10-12) ─────────────────────────────────────────
   Lives here because this file loads on all 16 pages after site.css, system.css and cart.css, so it has
   the last word on the bar. The promise: nothing in the bar ever breaks onto a second line, touches its
   neighbor or slides under the logo. Signed in or out, cart empty or full, long first names, any screen.
   As the screen narrows the bar gives up space in this order:
     1440 and up     logo · links · SHOP NOW · Hi, Name · Cart
     1300 - 1439     the "Hi, Name" / "Sign in" and "Cart" words drop; the seal or key and the jar (with its count) stay
     1180 - 1299     the links also pull a little closer together
     1179 and below  the links fold into the menu button: logo · menu · account · cart
   Before this, the bar only folded at 880px, so from 881 to about 1440 the links broke onto two lines
   ("THE / BLENDS", "OUR / STORY", "SHOP / NOW") and the logo touched HOME. */

/* 5.1 · one line, always */
nav .nav-logo { flex: none; }
nav .nav-links > li { flex: none; }
nav .nav-links a, nav .nav-links .nav-cta, nav .nav-acct, nav .nav-cart, nav .na-label, nav .nc-label { white-space: nowrap; }
nav .nav-acct .na-label { max-width: 14em; overflow: hidden; text-overflow: ellipsis; }

/* 5.2 · full bar: the links sit together on the right, beside the account and the cart */
@media (min-width: 1180px) {
  nav .nav-links { margin-left: auto; padding-left: clamp(1.5rem, 3vw, 3rem); gap: clamp(1rem, 1.45vw, 1.75rem); }
  nav .nav-links .nav-cta { padding: .7em 1.2em; }
  nav .nav-acct { margin-left: clamp(1rem, 1.6vw, 1.75rem); }
  html.has-acct nav .nav-cart, nav .nav-cart { margin-left: clamp(.75rem, 1.1vw, 1.25rem); }
}
@media (max-width: 1439.98px) {
  nav .nav-acct .na-label, nav .nav-cart .nc-label { display: none; }
}
@media (min-width: 1180px) and (max-width: 1299.98px) {
  nav .nav-links { gap: .9rem; }
  nav .nav-links a { letter-spacing: .1em; }
  nav .nav-links .nav-cta { padding: .7em 1em; }
  nav .nav-acct { margin-left: .9rem; }
  html.has-acct nav .nav-cart, nav .nav-cart { margin-left: .5rem; }
}

/* 5.3 · folded bar, 1179px and below: logo · menu · account · cart. The phone menu (site.css 4.1, system.css 2,
   cart.css 1) used to start at 880px; the same rules now start at 1179px, so tablets and small laptops get
   the menu button instead of a crushed bar. */
@media (max-width: 1179.98px) {
  nav .nav-hamburger { display: grid; gap: 5px; place-content: center; min-width: 44px; min-height: 44px; }
  nav .nav-hamburger span { width: 22px; height: 1px; background: var(--paper); display: block; }
  html.has-cart nav .nav-hamburger { margin-left: auto; }
  nav .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; margin: 0;
    flex-direction: column; justify-content: center; justify-content: safe center; gap: var(--s-5);
    padding-block: 1.25rem; overflow-y: auto;            /* scrolls when a phone on its side can't show every link */
    background: rgba(21, 16, 10, .97); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
    transform: translateX(100%); transition: transform var(--t-base);
  }
  html.rib-off nav.site-nav .nav-links { top: var(--nav-base); }
  nav #nav-toggle:checked ~ .nav-links { transform: translateX(0); }
  nav .nav-links a { font-size: var(--fs-lede); }
  nav .nav-links a.is-current { color: var(--tx); }
  nav .nav-links a:not(.nav-cta)::after { bottom: -9px; }
  nav .nav-links a.is-current::before { bottom: -11.5px; }
  nav .nav-logo .logo-img { height: 38px; }
  nav .nav-cart { margin: 0 -.1rem 0 .1rem; padding: 0 .65rem 0 .3rem; }
  html.has-acct nav .nav-cart { margin-left: .6rem; }
}
/* open menu: the bar drops its frosted blur while the menu is open. The blur made the bar the panel's frame,
   so after scrolling down the panel shrank to a 0-43px strip and the links spilled over the page. */
nav:has(#nav-toggle:checked) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 380px) {
  nav:has(.nav-logo) { padding-inline: .875rem; }
  nav .nav-logo .logo-img { height: 32px; }
  nav .nav-acct, nav .nav-acct:link, nav .nav-acct:visited { margin-left: .5rem; }
  html.has-acct nav .nav-cart { margin-left: .5rem; }
}
/* the widths end in .98 on purpose: on screens scaled 125% / 150% (most Windows laptops) the window can be
   1179.33px wide, which falls between "1179" and "1180" and matched neither layout. */