/* no page-change animation: signing in and out redirects right away */
@view-transition{ navigation:none }

/* The /order page: categories, a quick product list, and the order always in view.
 * Brand colors and fonts, with frosted glass, a dark oak order panel and soft gold light. */
:root{ --glow:rgba(193,158,66,.45); --gold-1:#E8CF8B; --gold-2:#C19E42; --oak-glow:#1E6B4A; --line:rgba(14,59,42,.13) }

.page.op{ padding-top:calc(var(--navfull,72px) + 18px); background:none }
.page.op::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 46vh at 4% -6%, rgba(46,125,90,.2), transparent 70%),
    radial-gradient(52vw 50vh at 98% 8%, rgba(193,158,66,.27), transparent 70%),
    radial-gradient(60vw 50vh at 50% 110%, rgba(111,29,43,.08), transparent 70%),
    #F6F2E8 }
.op button, .op a, .op input, .op summary, .obar, .op-info button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation }
.op-wrap{ width:min(96vw,1460px); margin:0 auto; padding-bottom:clamp(30px,5vw,60px) }
.op-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; margin-bottom:16px }
.op-head h1{ margin:0; font-family:var(--disp); font-weight:500; font-size:clamp(26px,3.2vw,40px); line-height:1.1; letter-spacing:-.015em; color:var(--oak); white-space:nowrap }
.op-help{ margin:0; font-size:15.5px; line-height:1.45; color:var(--muted); text-wrap:pretty }
.op-stock{ display:inline-flex; align-items:center; gap:7px; margin:0 0 0 auto; font-size:13.5px; font-weight:500; color:var(--oak); white-space:nowrap }
.op-stock[hidden]{ display:none }
.op-stock::before{ content:""; width:8px; height:8px; border-radius:50%; background:#2E9B69; box-shadow:0 0 0 3px rgba(46,155,105,.22) }

.op-grid{ display:grid; grid-template-columns:216px minmax(0,1fr) 372px; grid-template-rows:auto auto 1fr; gap:0 22px; align-items:start;
  grid-template-areas:"cats tools order" "cats under order" "cats list order" }

/* categories */
.op-cats{ grid-area:cats; position:sticky; top:calc(var(--navh,72px) + 12px); display:flex; flex-direction:column; gap:4px;
  max-height:calc(100vh - var(--navh,72px) - 24px); overflow-y:auto; overscroll-behavior:auto; scrollbar-width:thin; padding:2px }
.op-cat{ display:flex; align-items:center; gap:10px; width:100%; min-height:50px; padding:4px 11px 4px 5px; text-align:left; font-family:var(--body);
  color:var(--ink); background:rgba(255,255,255,.42); border:1px solid transparent; border-radius:14px; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease }
.op-cat:hover{ background:rgba(255,255,255,.9); border-color:var(--line) }
.op-cat:active{ transform:scale(.98) }
.op-cat.on{ color:var(--parchment); background:linear-gradient(120deg,var(--oak),var(--oak-glow)); border-color:rgba(232,207,139,.55); box-shadow:0 8px 20px -10px rgba(14,59,42,.8), 0 0 14px -5px var(--glow) }
.op-catart{ display:grid; place-items:center; flex:none; width:40px; height:40px; padding:2px; overflow:hidden; color:var(--oak); background:#fff; border-radius:11px; box-shadow:0 1px 3px rgba(36,31,27,.14) }
.op-catart img{ display:block; width:100%; height:100%; object-fit:contain }
.op-catart.all{ grid-template-columns:1fr 1fr; gap:3px; padding:10px }
.op-catart.all i{ display:block; width:100%; height:100%; min-height:7px; background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); border-radius:3px }
.op-catname{ flex:1; min-width:0; font-size:14.5px; font-weight:500; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.op-cat b{ font-size:12px; font-weight:600; opacity:.7; font-variant-numeric:tabular-nums }

/* search and filters */
.op-tools{ grid-area:tools; position:sticky; top:var(--navh,72px); z-index:4; padding:10px 0 12px }
.op-search{ display:flex; align-items:center; gap:10px; height:54px; padding:0 8px 0 18px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(14,59,42,.32); border-radius:16px; box-shadow:0 10px 26px -18px rgba(14,59,42,.8); transition:box-shadow .2s ease, border-color .2s ease }
.op-search:focus-within{ border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(193,158,66,.3), 0 0 22px -4px var(--glow) }
.op-search svg{ flex:none; color:var(--oak) }
.op-search input{ flex:1; min-width:0; height:100%; font-family:var(--body); font-size:17px; color:var(--ink); background:none; border:none; outline:none }
.op-search input::placeholder{ color:#6A6157 }
.op-search input::-webkit-search-cancel-button{ display:none }
.op-clear{ flex:none; width:38px; height:38px; font-size:20px; line-height:1; color:var(--oak); background:var(--stone); border:none; border-radius:12px; cursor:pointer }
.op-clear[hidden]{ display:none }
.op-under{ grid-area:under; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px }
.op-filters{ display:flex; gap:6px }
.op-filters .fchip{ min-height:38px; padding:0 14px; white-space:nowrap; background:rgba(255,255,255,.7); border:1px solid var(--line) }
.op-filters .fchip.on{ background:linear-gradient(120deg,var(--oak),var(--oak-glow)); border-color:rgba(232,207,139,.55); color:var(--parchment) }
.op-count{ margin:0 0 0 auto; font-size:13.5px; color:var(--muted); text-wrap:pretty }
.op-subs{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px }
.op-subs[hidden]{ display:none }
.op-subs .schip{ white-space:nowrap }

/* the product list */
.op-list{ grid-area:list; min-width:0 }
.op-group{ margin-bottom:22px }
.op-group h2{ margin:6px 2px 8px; font-family:var(--disp); font-weight:500; font-size:22px; color:var(--oak) }
.op-rows{ background:rgba(255,255,255,.76); border:1px solid rgba(255,255,255,.9); border-radius:18px; overflow:hidden; box-shadow:0 18px 40px -30px rgba(14,59,42,.75), 0 0 0 1px var(--line) }
.op-row{ position:relative; display:grid; grid-template-columns:68px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:84px; padding:8px 14px 8px 8px;
  border-top:1px solid var(--line); transition:background .25s ease }
.op-row:first-child{ border-top:none }
/* the browser skips drawing products that are off screen, which keeps long lists quick */
.op-rows > .op-row{ content-visibility:auto; contain-intrinsic-size:auto 69px }
.op-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--gold-1),var(--gold-2)); box-shadow:0 0 12px var(--glow); opacity:0; transition:opacity .25s ease }
.op-row.in{ background:linear-gradient(90deg,rgba(193,158,66,.2),rgba(193,158,66,.05)) }
.op-row.in::before{ opacity:1 }
.op-row.out .op-pic{ filter:grayscale(.75); opacity:.65 }
.op-row.out .op-name{ color:#5E564C }
.op-picbtn{ display:block; padding:0; background:none; border:none; border-radius:14px; cursor:pointer }
.op-pic{ display:grid; place-items:center; width:68px; height:68px; padding:5px; overflow:hidden; background:radial-gradient(circle at 50% 42%, #fff 0%, #F1E9D8 100%); border-radius:14px; color:#FFF8EA; box-shadow:inset 0 0 0 1px var(--line) }
.op-pic img{ display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(0,0,0,.16)); transition:transform .25s ease }
.op-picbtn:hover img{ transform:scale(1.07) }
.op-txt{ min-width:0 }
.op-name{ display:block; padding:0; font-family:var(--body); font-weight:600; font-size:16px; line-height:1.28; text-align:left; color:var(--oak); background:none; border:none; cursor:pointer; text-wrap:pretty }
.op-name:hover{ text-decoration:underline; text-decoration-color:var(--gold-2); text-underline-offset:3px }
.op-facts{ margin:3px 0 0; font-size:13.5px; line-height:1.4; color:#5E564C; text-wrap:pretty; font-variant-numeric:tabular-nums }
.op-tags{ display:flex; flex-wrap:wrap; gap:5px; margin:5px 0 0 }
.op-tags .cb, .opo-line .cb{ animation:none }
.op-act{ justify-self:end }
.op-ask{ font-size:13.5px; font-weight:500; color:var(--claret); white-space:nowrap }
.op-empty{ padding:50px 20px; text-align:center; background:rgba(255,255,255,.76); border-radius:18px; box-shadow:0 0 0 1px var(--line) }
.op-empty h2{ margin:0 0 8px; font-family:var(--disp); font-weight:500; font-size:25px; color:var(--oak) }
.op-empty p.op-nomatch{ max-width:none }
.op-empty p{ max-width:46ch; margin:0 auto 18px; line-height:1.55; color:var(--muted); text-wrap:pretty }
.op-empty a{ color:var(--claret) }
.op-empty .btn{ cursor:pointer }
.op-row.sk{ pointer-events:none }
.op-row.sk .op-pic{ background:var(--stone); box-shadow:none }

/* Add button and stepper */
.oc{ display:flex; align-items:center; justify-content:flex-end; gap:8px }
.oadd{ display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:96px; min-height:44px; padding:0 16px; font-family:var(--body); font-size:15px; font-weight:600; white-space:nowrap; color:#FBF7EE;
  background:linear-gradient(120deg,var(--oak),var(--oak-glow)); border:none; border-radius:13px; cursor:pointer; box-shadow:0 8px 16px -10px rgba(14,59,42,.9);
  transition:box-shadow .2s ease, transform .12s ease, filter .2s ease }
.oadd:hover{ filter:brightness(1.12); box-shadow:0 8px 18px -8px rgba(14,59,42,.9), 0 0 14px -3px var(--glow) }
.oadd:active{ transform:scale(.94) }
.oadd-plus{ font-size:19px; line-height:1 }
.ounit{ font-size:13px; font-weight:500; color:#5E564C }
.ostep{ display:inline-flex; align-items:center; background:#fff; border:1px solid rgba(14,59,42,.45); border-radius:13px; overflow:hidden; box-shadow:0 0 12px -5px var(--glow) }
.ostep button{ width:40px; height:42px; font-size:21px; line-height:1; color:var(--oak); background:none; border:none; cursor:pointer; transition:background .15s ease }
.ostep button:hover{ background:rgba(14,59,42,.08) }
.ostep button:active{ background:rgba(193,158,66,.3) }
.ostep input{ width:42px; height:42px; padding:0; font-family:var(--body); font-size:16px; font-weight:600; text-align:center; color:var(--oak); background:none; border:none; outline:none; font-variant-numeric:tabular-nums }
.ostep input:focus{ background:rgba(193,158,66,.22) }
.oadd:focus-visible, .ostep button:focus-visible, .obar:focus-visible, .orm:focus-visible, .oclear:focus-visible, .op-cat:focus-visible, .op-name:focus-visible, .op-picbtn:focus-visible, .opo-send:focus-visible, .opo-close:focus-visible, .opo-notesum:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.oc-big{ flex-basis:100%; justify-content:flex-start }
.oc-big .oadd{ width:100%; min-height:52px; font-size:16px }
.oc-big .ounit{ font-size:15px }

/* the order: a dark card shown in full, with past orders on their own card under it */
.op-order{ grid-area:order; position:sticky; top:calc(var(--navh,72px) + 12px); display:flex; flex-direction:column; gap:18px; max-height:calc(100vh - var(--navh,72px) - 24px); color:var(--parchment) }
.opo-card{ flex:0 1 auto; min-height:0; display:flex; flex-direction:column; background:#0E3B2A; border-radius:18px; overflow:hidden; box-shadow:0 18px 36px -24px rgba(10,43,31,.8) }
.opo-head{ display:flex; align-items:baseline; gap:10px; padding:20px 22px 16px; border-bottom:1px solid rgba(251,247,238,.14) }
.opo-head h2{ margin:0; font-family:var(--disp); font-weight:500; font-size:23px; color:#FBF7EE; white-space:nowrap }
.opo-n{ font-size:14px; color:rgba(251,247,238,.8); white-space:nowrap; font-variant-numeric:tabular-nums }
.opo-close{ display:none }
.opo-lines{ flex:1 1 auto; min-height:90px; overflow-y:auto; overscroll-behavior:auto; scrollbar-width:thin; scrollbar-color:rgba(232,207,139,.4) transparent }
.opo-empty{ padding:34px 24px; text-align:center }
.opo-empty p{ margin:0; font-size:15px; line-height:1.55; color:rgba(251,247,238,.86); text-wrap:pretty }
.opo-empty b{ color:var(--gold-1) }
.opo-line{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px 14px; padding:18px 22px; border-top:1px solid rgba(251,247,238,.1) }
.opo-line:first-child{ border-top:none }
.opo-line.off .opo-name{ color:rgba(251,247,238,.72) }
.opo-pic{ display:grid; place-items:center; width:44px; height:44px; padding:3px; overflow:hidden; color:#FFF8EA; background:#F7F3EA; border-radius:11px }
.opo-pic.art{ background:none }
.opo-pic img{ display:block; width:100%; height:100%; object-fit:contain }
.opo-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0 }
.opo-name{ font-family:var(--body); font-weight:600; font-size:15px; line-height:1.28; color:#FBF7EE; text-wrap:pretty }
.opo-facts{ font-size:12.5px; line-height:1.35; color:rgba(251,247,238,.78); font-variant-numeric:tabular-nums }
.opo-lest{ display:block; margin-top:2px; font-size:13px; font-weight:600; line-height:1.35; color:#E9C77B; font-variant-numeric:tabular-nums }
.opo-lest[hidden]{ display:none }
.opo-bad{ font-size:13px; font-weight:500; color:#F5C9B8; text-wrap:pretty }
.opo-act{ grid-column:2; display:flex; flex-flow:row-reverse wrap; align-items:center; justify-content:space-between; gap:6px 10px }
.op-order .ounit{ color:rgba(251,247,238,.82) }
.op-order .ostep{ background:rgba(255,255,255,.08); border-color:rgba(251,247,238,.28); box-shadow:none }
.op-order .ostep button, .op-order .ostep input{ color:#FBF7EE }
.op-order .ostep button:hover{ background:rgba(255,255,255,.12) }
.orm, .oclear{ min-height:32px; font-family:var(--body); font-size:13px; font-weight:500; color:rgba(251,247,238,.8); background:none; border:none; padding:2px 0; cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px }
.orm:hover, .oclear:hover{ text-decoration-color:currentColor }
.opo-foot{ flex:none; display:flex; flex-direction:column; padding:6px 22px 20px; border-top:1px solid rgba(251,247,238,.14) }
.opo-foot[hidden]{ display:none }
.opo-date{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; border-bottom:1px solid rgba(251,247,238,.1) }
.opo-datelabel{ font-size:14px; font-weight:500; color:#FBF7EE }
.opo-datebtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:0 1 170px; min-width:0; min-height:42px; padding:6px 12px; font-family:var(--body); font-size:15px; font-weight:500; color:var(--ink); background:#FBF8F1; border:1px solid transparent; border-radius:11px; cursor:pointer; white-space:nowrap }
.opo-datebtn svg{ flex:none; color:var(--oak) }
.opo-datebtn:hover{ background:#fff }
.opo-datebtn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(232,207,139,.55) }
/* the delivery calendar: sits over everything, including the phone Order screen */
.ocal{ position:fixed; z-index:60; width:min(308px, calc(100vw - 24px)); padding:14px; color:var(--ink); background:#fff; border:1px solid var(--stone,#E7DFCE); border-radius:16px; box-shadow:0 22px 44px -18px rgba(10,43,31,.55); font-family:var(--body) }
.ocal-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px }
.ocal-head b{ font-family:var(--disp); font-size:17px; font-weight:500; color:var(--oak) }
.ocal-nav{ display:grid; place-items:center; width:38px; height:38px; color:var(--oak); background:none; border:none; border-radius:10px; cursor:pointer }
.ocal-nav:hover:not(:disabled){ background:rgba(14,59,42,.08) }
.ocal-nav:disabled{ visibility:hidden }
.ocal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; justify-items:center }
.ocal-week{ margin-bottom:4px; font-size:12.5px; font-weight:600; color:#5E564C }
.ocal-grid:not(.ocal-week){ grid-auto-rows:36px }
.ocal-day{ width:100%; height:36px; max-width:40px; font-family:var(--body); font-size:15px; font-weight:600; color:var(--oak); background:rgba(14,59,42,.07); border:none; border-radius:10px; cursor:pointer; font-variant-numeric:tabular-nums }
.ocal-day:hover{ background:rgba(14,59,42,.16) }
.ocal-day.on{ color:#fff; background:var(--oak) }
.ocal-nav:focus-visible, .ocal-day:focus-visible{ outline:3px solid var(--gold-2); outline-offset:1px }
.opo-notesum{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; font-size:14px; font-weight:500; color:#FBF7EE; cursor:pointer; list-style:none }
.opo-notesum::-webkit-details-marker{ display:none }
.opo-notesum::after{ content:"+"; font-size:20px; font-weight:400; line-height:1; color:rgba(251,247,238,.8) }
.opo-notebox[open] .opo-notesum::after{ content:"\2212" }
.opo-foot textarea{ display:block; width:100%; margin:4px 0 2px; padding:9px 11px; font-family:var(--body); font-size:16px; line-height:1.35; color:var(--ink); background:#FBF8F1; border:1px solid transparent; border-radius:11px; resize:vertical }
.opo-foot textarea::placeholder{ color:#6A6157 }
.opo-foot textarea:focus{ outline:none; box-shadow:0 0 0 3px rgba(232,207,139,.55) }
.opo-msg{ margin:8px 0 0; padding:9px 12px; font-size:14px; line-height:1.4; color:#6F1D2B; background:#FBEDE8; border-radius:11px; text-wrap:pretty }
.opo-msg[hidden]{ display:none }
.opo-send{ width:100%; min-height:52px; margin-top:14px; font-family:var(--body); font-size:16px; font-weight:700; letter-spacing:.01em; color:#0A2B1F;
  background:var(--gold-1); border:none; border-radius:13px; cursor:pointer; transition:filter .2s ease, transform .12s ease }
.opo-send:hover{ filter:brightness(1.07) }
.opo-send:active{ transform:scale(.98) }
.opo-send:disabled{ color:#E7DFCE; background:rgba(255,255,255,.14); box-shadow:none; cursor:not-allowed; filter:none }
.opo-rep{ margin:14px 0 0; font-size:13px; line-height:1.4; text-align:center; color:rgba(251,247,238,.8); text-wrap:pretty }
.oclear{ margin-left:auto; white-space:nowrap }
.is-sent .oclear{ display:none }
.is-sent .opo-lines, .is-sent .opo-foot{ display:none }
.opo-sent{ flex:1 1 auto; padding:26px 22px 22px; overflow-y:auto; text-align:center }
.opo-sent[hidden]{ display:none }
.opo-check{ position:relative; display:grid; place-items:center; width:62px; height:62px; margin:0 auto 14px; color:#0A2B1F; background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); border-radius:50%; box-shadow:0 0 30px -3px var(--glow); animation:opPop .45s cubic-bezier(.2,.9,.3,1.2) }
.opo-check::after{ content:""; position:absolute; inset:-7px; border:1px solid rgba(232,207,139,.5); border-radius:50% }
@keyframes opPop{ from{ transform:scale(.7); opacity:0 } to{ transform:none; opacity:1 } }
.opo-sent h3{ margin:0 0 6px; font-family:var(--disp); font-weight:500; font-size:29px; color:#FBF7EE; outline:none }
.opo-sent > p{ margin:0 0 14px; font-size:15px; line-height:1.5; color:rgba(251,247,238,.86); text-wrap:pretty }
.opo-sent ul{ list-style:none; margin:0 0 14px; padding:0; text-align:left; border-top:1px solid rgba(232,207,139,.2) }
.opo-sent li{ padding:9px 2px; font-size:14.5px; line-height:1.35; border-bottom:1px solid rgba(232,207,139,.2); text-wrap:pretty }
.opo-sent li b{ color:var(--gold-1) }
.opo-sent .opo-sentnote{ text-align:left; font-size:14px }
.opo-sent .opo-sentnote b{ color:var(--gold-1); font-weight:500 }

.obar{ display:none }

/* item details sit above everything */
.op-info{ z-index:40 }
.op-info .sactions{ margin-bottom:0 }
.op-info .shero.photo img{ position:absolute }
.op-info .spanel{ background:#FBF8F1 }

@media(max-width:1240px){
  .op-grid{ grid-template-columns:186px minmax(0,1fr) 320px; gap:0 16px }
  .op-catname{ font-size:13.5px }
  .op-stock{ margin-left:0 }
}

/* phones and tablets: thumb first */
@media(max-width:1000px){
    .page.op{ padding-top:calc(var(--navfull,72px) + 6px) }
  .op-wrap{ width:min(94vw,820px) }
  .op-grid{ display:block }
  .op-head{ align-items:center; justify-content:space-between; margin-bottom:0 }
  .op-help{ display:none }
  .op-stock{ margin:0; font-size:12.5px }
  .op-tools{ top:0; margin:0 -3vw; padding:8px 3vw 6px; background:linear-gradient(180deg,rgba(246,242,232,.97) 70%,rgba(246,242,232,.86));
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
  .op-search{ height:48px; border-radius:14px; padding-left:14px }
  .op-group h2{ font-size:20px }

  /* the open order fills the screen; the header and bar stay behind it */
  .op-order{ position:fixed; top:0; left:0; right:0; bottom:0; height:100vh; height:100dvh; z-index:35; max-height:none; border:none; border-radius:0; box-shadow:none;
    visibility:hidden; transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.9,.3,1), visibility 0s linear .3s }
  body.op-open .op-order{ visibility:visible; transform:none; transition:transform .3s cubic-bezier(.2,.9,.3,1) }
  body.op-open{ overflow:hidden }
  body.op-open .page.op{ z-index:35 }
  body.op-open .obar{ display:none }
  .opo-head{ align-items:center; padding:calc(10px + env(safe-area-inset-top)) 10px 10px 18px }
  .opo-close{ display:block; width:44px; height:44px; margin-left:auto; font-size:28px; line-height:1; color:#FBF7EE; background:none; border:none; cursor:pointer }
  .opo-foot{ padding-bottom:calc(10px + env(safe-area-inset-bottom)) }

  /* the floating bar */
  .obar{ position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:30; transform:translateX(-50%); display:flex; align-items:center; gap:12px;
    width:min(460px, calc(100vw - 20px)); min-height:60px; padding:0 8px 0 20px; font-family:var(--body); color:#FBF7EE;
    background:linear-gradient(120deg,rgba(10,43,31,.95),rgba(20,80,58,.93)); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid rgba(232,207,139,.5); border-radius:20px; box-shadow:0 18px 34px -12px rgba(10,43,31,.85), 0 0 22px -8px var(--glow); cursor:pointer }
  .obar[hidden]{ display:none }
  .obar-n{ font-size:15.5px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums }
  .obar-go{ display:flex; align-items:center; min-height:46px; margin-left:auto; padding:0 16px; font-size:15.5px; font-weight:700; white-space:nowrap; color:#0A2B1F; background:linear-gradient(120deg,var(--gold-1),var(--gold-2)); border-radius:14px }
  .obar.bump{ animation:obump .32s ease }
  body.has-order footer{ padding-bottom:calc(30px + 80px + env(safe-area-inset-bottom)) }
}
@keyframes obump{ 50%{ transform:translateX(-50%) scale(1.03) } }

/* phones: tight rows and a round + button by the thumb */
@media(max-width:600px){
  .op-head h1{ font-size:23px }
  .op-rows{ border-radius:16px }
  .op-row{ grid-template-columns:56px minmax(0,1fr) auto; gap:7px 11px; min-height:0; padding:9px 11px 9px 9px }
  .op-pic{ width:56px; height:56px; padding:4px; border-radius:12px }
  .op-name{ font-size:15.5px }
  .op-facts{ font-size:12.5px; margin-top:2px }
  .op-tags{ margin-top:4px }
  .op-tags .cb{ font-size:10.5px }
  .op-row .oc:not(.oc-big) .oadd{ width:46px; height:46px; min-width:0; padding:0; border-radius:50% }
  .op-row .oc:not(.oc-big) .oadd-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .op-row .oc:not(.oc-big) .oadd-plus{ font-size:26px; font-weight:400 }
  .op-row.in .op-act{ grid-column:2 / -1; justify-self:end }
  .op-row.in .op-pic{ align-self:start }
  .op-row.out .op-act{ grid-column:2 / -1; justify-self:start }
  .op-row.in{ align-items:start }
  .sactions .oc-big .oadd{ font-size:16px }
  .obar-go{ padding:0 14px; font-size:15px }
}
@media(max-width:350px){
  .op-appout span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .op-appout{ width:42px; justify-content:center; padding:0 }
  .obar{ padding-left:14px }
  .obar-n{ font-size:14px }
  .obar-go{ padding:0 11px; font-size:14px }
}
/* the strip above the list: what you are looking at, filters, then types */
.op-under{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 16px; margin-bottom:14px }
.op-sum{ grid-column:1; grid-row:1; display:flex; align-items:baseline; gap:10px; min-width:0 }
.op-title{ margin:0; font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.2vw,28px); line-height:1.15; letter-spacing:-.01em; color:var(--oak); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.op-under .op-count{ flex:none; margin:0; font-size:14px; color:#5E564C; white-space:nowrap; font-variant-numeric:tabular-nums }
.op-under .op-filters{ grid-column:2; grid-row:1; display:flex; gap:6px; margin:0; padding:0 }
.op-under .fchip, .op-under .fchip[data-show]:not(.on){ display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 13px 0 11px; font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--oak);
  background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:12px; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease }
.op-under .fchip:hover{ background:#fff; border-color:rgba(14,59,42,.32); transform:none }
.op-under .fchip:active{ transform:scale(.97) }
.op-under .fchip::before{ flex:none; display:grid; place-items:center; width:16px; height:16px; font-size:13px; line-height:1; color:#8A6A1C }
.op-under .fchip[data-show="stock"]::before{ content:""; width:9px; height:9px; margin:0 3px 0 4px; background:#2E9B69; border-radius:50%; box-shadow:0 0 0 3px rgba(46,155,105,.2) }
.op-under .fchip[data-show="pick"]::before{ content:"\2605" }
.op-under .fchip[data-show="new"]::before{ content:"\2726" }
.op-under .fchip.on{ color:#FBF7EE; background:linear-gradient(120deg,var(--oak),var(--oak-glow)); border-color:rgba(232,207,139,.6); box-shadow:0 8px 16px -10px rgba(14,59,42,.9), 0 0 14px -5px var(--glow) }
.op-under .fchip.on::before{ color:var(--gold-1) }
.op-under .fchip.on[data-show="stock"]::before{ background:var(--gold-1); box-shadow:0 0 0 3px rgba(232,207,139,.28) }
.op-under .op-subs{ grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; gap:3px; margin:0; padding:4px; background:rgba(14,59,42,.075); border-radius:15px; box-shadow:inset 0 0 0 1px var(--line) }
.op-under .op-subs[hidden]{ display:none }
.op-under .schip b{ display:none }
@media(min-width:1001px) and (max-width:1400px){ .op-under .op-subs .schip{ padding:0 7px; font-size:13.5px } }
.op-under .schip{ flex:1 0 auto; justify-content:center; display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 11px; font-family:var(--body); font-size:14px; font-weight:500; white-space:nowrap; color:var(--oak);
  background:none; border:none; border-radius:11px; box-shadow:none; cursor:pointer; transition:background .2s ease, color .2s ease, box-shadow .2s ease }
.op-under .schip:hover{ background:rgba(255,255,255,.75); transform:none }
.op-under .schip b{ font-size:12px; font-weight:600; color:#5E564C; opacity:1; font-variant-numeric:tabular-nums }
.op-under .schip.on, .op-under .schip.on:hover{ color:#FBF7EE; background:linear-gradient(120deg,var(--oak),var(--oak-glow)); box-shadow:0 6px 14px -8px rgba(14,59,42,.95), 0 0 0 1px rgba(232,207,139,.55), 0 0 14px -5px var(--glow) }
.op-under .schip.on b{ color:var(--gold-1) }
.op-under .schip:focus-visible, .op-under .fchip:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
@media(max-width:1240px){
  .op-under{ grid-template-columns:minmax(0,1fr) }
  .op-under .op-filters{ grid-column:1; grid-row:2 }
  .op-under .op-subs{ grid-row:3 }
}
@media(max-width:1000px){
  .op-under{ display:grid; gap:9px; margin:8px 0 10px }
  .op-title{ font-size:21px }
  .op-under .op-count{ order:0; font-size:13px }
  /* nothing scrolls sideways: filters and types wrap onto new lines */
  .op-under .op-filters{ flex-wrap:wrap; padding:0 }
}
/* the All products icon: four solid squares */
.op-catart.all{ place-items:stretch }
.op-catart.all i{ min-height:0; background:linear-gradient(135deg,var(--oak),var(--oak-glow)) }

/* the category button and full-screen category grid (phones and tablets only) */
.op-cats-head, .op-appbar, .op-tabs, .op-stock2{ display:none }
@media(max-width:1000px){
  .op-cats{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:36; height:100vh; height:100dvh; max-height:none; margin:0; padding:0 16px calc(20px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:min-content; align-content:start; gap:10px; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:#F6F2E8; visibility:hidden; opacity:0; transform:translateY(14px); transition:opacity .2s ease, transform .25s cubic-bezier(.2,.9,.3,1), visibility 0s linear .25s }
  body.op-picking .op-cats{ visibility:visible; opacity:1; transform:none; transition:opacity .2s ease, transform .25s cubic-bezier(.2,.9,.3,1) }
  body.op-picking{ overflow:hidden }
  body.op-picking .page.op{ z-index:36 }
  body.op-picking .obar{ display:none }
  .op-cats-head{ grid-column:1 / -1; position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; margin:0 -16px; padding:calc(8px + env(safe-area-inset-top)) 8px 8px 16px; background:rgba(246,242,232,.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
  .op-cats-head h2{ margin:0; font-family:var(--disp); font-weight:500; font-size:24px; color:var(--oak) }
  .op-cat{ position:relative; flex-direction:column; justify-content:flex-start; gap:6px; width:auto; min-height:0; padding:6px 6px 10px; text-align:center; background:#fff; border-color:var(--line); border-radius:16px; box-shadow:0 8px 16px -14px rgba(36,31,27,.6) }
  .op-cat .op-catart{ width:100%; height:auto; aspect-ratio:1.25; padding:5px; border-radius:11px; background:radial-gradient(circle at 50% 42%, #fff 0%, #F1E9D8 100%); box-shadow:none }
  .op-cat .op-catart.all{ padding:16px 26px }
  .op-catname{ flex:none; width:100%; font-size:13px; font-weight:600; line-height:1.2; white-space:normal; overflow:visible; text-wrap:pretty }
  .op-cat b{ position:absolute; top:10px; right:10px; padding:1px 6px; font-size:10.5px; color:var(--oak); background:rgba(255,255,255,.92); border-radius:999px; opacity:1 }
  .op-cat.on b{ color:var(--oak) }
}

/* phones: an even 16px margin, a tighter strip, three categories to a row */
@media(max-width:600px){
  .op-wrap{ width:calc(100% - 32px); min-width:0; margin:0 16px }
  .op-tools{ margin:0 -16px; padding:8px 16px 8px }
  .op-under{ gap:8px; margin:8px 0 10px }
  .op-title{ font-size:20px }
  .op-under .op-filters{ gap:5px }
  .op-under .op-subs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:3px; border-radius:13px }
  .op-under .op-subs::-webkit-scrollbar{ display:none }
  .op-under .fchip, .op-under .fchip[data-show]:not(.on){ min-height:36px; padding:0 10px 0 8px; font-size:13px; gap:5px; border-radius:11px }
  .op-under .schip{ min-height:38px; padding:0 10px; font-size:13.5px; gap:6px }
  .op-cats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .op-catname{ font-size:12.5px }
}
@media(max-width:350px){
  .op-under .fchip, .op-under .fchip[data-show]:not(.on){ padding:0 8px 0 6px; font-size:12.5px; gap:4px }
}
/* stays blank until the login check finishes, so nothing flashes for someone signed out */
body.op-checking .page.op, body.op-checking .obar, body.op-checking .op-tabs{ visibility:hidden }
.op-account{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:2px 8px; margin:0; font-size:13.5px; color:#5E564C }
.op-account[hidden]{ display:none }
.op-account b{ font-weight:600; color:var(--oak) }
.op-account-phone{ display:none }
/* Sign out: in the site menu on computers, in the app bar on phones and tablets */
.n-signout{ flex:none; padding:9px 18px; font:inherit; letter-spacing:inherit; text-transform:inherit; white-space:nowrap; color:var(--claret); background:none; border:none; border-radius:999px; cursor:pointer; transition:background .18s ease, color .18s ease }
.n-signout:hover{ color:var(--claret); background:rgba(111,29,43,.09) }
.op-appout{ display:none }
.n-signout:focus-visible, .op-appout:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
@media(max-width:1000px){
  .op-account-phone:not([hidden]){ display:flex; justify-content:center; margin:14px 0 0; text-align:center }
}

/* ---- the home screen, where customers land ---- */
.op-home{ display:none }
body.op-at-home .op-home{ display:block; max-width:1180px; margin:0 auto }
body.op-at-home .op-grid, body.op-at-home .op-head{ display:none }
.oh-hero{ position:relative; padding:clamp(24px,3.4vw,40px); color:#FBF7EE; background:radial-gradient(70% 120% at 100% 0%, rgba(193,158,66,.3), transparent 70%), linear-gradient(160deg,#0A2B1F 0%,#0E3B2A 60%,#14503A 100%); border:1px solid rgba(232,207,139,.42); border-radius:26px; box-shadow:0 26px 50px -30px rgba(10,43,31,.95), 0 0 30px -16px var(--glow) }
.oh-bar{ display:none }
.oh-barright{ display:flex; align-items:center; gap:8px }
.oh-web{ text-decoration:none }
.oh-hi{ margin:0; font-size:15px; color:var(--gold-1) }
.oh-hero h1{ margin:2px 0 0; font-family:var(--disp); font-weight:500; font-size:clamp(30px,4.2vw,50px); line-height:1.08; letter-spacing:-.015em; color:#FBF7EE; text-wrap:pretty }
.oh-stock{ margin:8px 0 0; font-size:13.5px; color:rgba(251,247,238,.82) }
.oh-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.oh-cta{ flex:0 1 auto; min-height:56px; padding:0 30px; font-family:var(--body); font-size:17px; font-weight:700; color:#0A2B1F; background:linear-gradient(120deg,var(--gold-1),var(--gold-2)); border:none; border-radius:15px; cursor:pointer; box-shadow:0 10px 24px -10px rgba(193,158,66,.95); transition:filter .2s ease, transform .12s ease }
.oh-cta:hover{ filter:brightness(1.07) }
.oh-cta:active{ transform:scale(.98) }
.oh-find{ flex:1 1 280px; max-width:460px; display:flex; align-items:center; gap:10px; min-height:56px; padding:0 16px; font-family:var(--body); font-size:15.5px; text-align:left; color:#3A3530; background:#FBF8F1; border:none; border-radius:15px; cursor:text }
.oh-find svg{ flex:none; color:var(--oak) }
.oh-find input{ flex:1; min-width:0; height:54px; padding:0; font-family:var(--body); font-size:16px; color:var(--ink); background:none; border:none; outline:none }
.oh-find input::placeholder{ color:#5E564C; opacity:1 }
.oh-find:focus-within{ outline:3px solid var(--gold-2); outline-offset:2px }
.oh-msg{ margin:12px 0 0 }
.oh-orderrow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch }
.oh-orderrow .oh-order{ display:flex; flex-direction:column; margin:0 }
.oh-lists{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; align-items:start }
.oh-lists > .oh-sec{ min-width:0 }
/* a list with no partner takes the whole row, with its products two across */
.oh-lists > .oh-sec:last-child:nth-child(odd){ grid-column:1 / -1 }
.oh-lists > .oh-sec:last-child:nth-child(odd) .op-rows{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }
.oh-sec{ margin-top:22px }
.oh-sechead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px }
.oh-sechead h2{ margin:0; font-family:var(--disp); font-weight:500; font-size:23px; line-height:1.15; color:var(--oak) }
.oh-all{ min-height:32px; padding:0 2px; font-family:var(--body); font-size:14px; font-weight:600; color:var(--claret); background:none; border:none; cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px }
.oh-all:hover{ text-decoration-color:currentColor }
.oh-none{ margin:0; padding:20px; font-size:15px; line-height:1.5; text-align:center; color:#5E564C; background:rgba(255,255,255,.76); border-radius:16px; box-shadow:0 0 0 1px var(--line); text-wrap:pretty }
.oh-order{ margin-bottom:10px; padding:4px 16px 14px; background:rgba(255,255,255,.8); border-radius:16px; box-shadow:0 0 0 1px var(--line) }
.oh-order summary{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; min-height:44px; padding:10px 0 6px; list-style:none; cursor:pointer }
.oh-order summary::-webkit-details-marker{ display:none }
.oh-order summary::after{ content:""; grid-column:2; grid-row:1; align-self:center; width:8px; height:8px; border-right:2px solid var(--oak); border-bottom:2px solid var(--oak); transform:rotate(45deg); transition:transform .2s ease }
.oh-order details[open] summary::after{ transform:rotate(-135deg) }
.oh-ordername{ font-size:16px; font-weight:600; color:var(--oak) }
.oh-ordermeta{ font-size:13.5px; color:#5E564C }
.oh-order ul{ list-style:none; margin:2px 0 8px; padding:0; border-top:1px solid var(--line) }
.oh-order li{ padding:7px 0; font-size:14.5px; line-height:1.35; border-bottom:1px solid var(--line); text-wrap:pretty }
.oh-order li b{ color:var(--oak) }
.oh-code{ font-variant-numeric:tabular-nums; white-space:nowrap }
.oh-ordernote{ margin:0 0 8px; font-size:14px; color:#3A3530; text-wrap:pretty }
.oh-again{ width:100%; min-height:44px; margin-top:4px; font-family:var(--body); font-size:15px; font-weight:600; color:var(--oak); background:#fff; border:1px solid rgba(14,59,42,.45); border-radius:12px; cursor:pointer; transition:background .15s ease }
.oh-again:hover{ background:rgba(193,158,66,.18) }
.oh-tiles{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px }
.oh-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; padding:6px 6px 10px; font-family:var(--body); text-align:center; color:var(--oak); background:#fff; border:1px solid var(--line); border-radius:16px; cursor:pointer; box-shadow:0 8px 16px -14px rgba(36,31,27,.6); transition:transform .15s ease, box-shadow .2s ease }
.oh-tile:hover{ transform:translateY(-2px); box-shadow:0 12px 20px -12px rgba(14,59,42,.5), 0 0 12px -5px var(--glow) }
.oh-tileart{ display:grid; place-items:center; width:100%; aspect-ratio:1.25; padding:5px; overflow:hidden; background:radial-gradient(circle at 50% 42%, #fff 0%, #F1E9D8 100%); border-radius:11px }
.oh-tileart img{ display:block; width:100%; height:100%; object-fit:contain }
.oh-tilename{ font-size:13px; font-weight:600; line-height:1.2; text-wrap:pretty }
.oh-all[hidden]{ display:none }
.oh-lists > .oh-sec:last-child:nth-child(odd) .op-row:nth-child(2){ border-top:none }
.op-needhand{ margin:26px 0 0; font-size:15px; line-height:1.5; text-align:center; color:#3A3530; text-wrap:pretty }
.op-needhand b{ font-weight:600; color:var(--oak) }
.op-needhand a{ font-weight:600; color:var(--claret); white-space:nowrap }
.oh-cta:focus-visible, .oh-all:focus-visible, .oh-again:focus-visible, .oh-tile:focus-visible, .oh-order summary:focus-visible, .oh-logo:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.opo-sentnum{ margin:0 0 6px !important; font-size:15px !important; font-weight:600; color:var(--gold-1) !important }
@media(max-width:1000px){
  .op-tabs{ grid-template-columns:repeat(5,1fr) !important }
  body.op-at-home .op-home{ max-width:none }
  .oh-hero{ margin:0 -16px; padding:calc(8px + env(safe-area-inset-top)) 16px 22px; border:none; border-radius:0 0 26px 26px }
  .oh-bar{ display:flex; align-items:center; justify-content:space-between; min-height:46px; margin-bottom:12px }
  .oh-logo{ display:grid; place-items:center; width:42px; height:42px; background:rgba(255,255,255,.1); border:1px solid rgba(232,207,139,.32); border-radius:13px }
  .oh-logo img{ display:block; height:27px; width:auto; filter:brightness(0) invert(1) sepia(.3) saturate(3) hue-rotate(5deg) }
  .oh-orderrow, .oh-lists{ grid-template-columns:minmax(0,1fr) }
  .oh-lists > .oh-sec:last-child:nth-child(odd) .op-rows{ display:block }
  .oh-actions{ flex-direction:column }
  .oh-cta, .oh-find{ flex:none; width:100%; max-width:none }
  .oh-cta{ padding:0 16px }
  .oh-lists{ margin-bottom:6px }
  .oh-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media(max-width:600px){
  .oh-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px }
  .oh-tile{ padding:4px 4px 8px; border-radius:13px }
  .oh-tilename{ font-size:11.5px }
  .oh-sechead h2{ font-size:21px }
}
@media(max-width:350px){
  .oh-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .op-tab{ font-size:11px }
}
@media (prefers-reduced-motion:reduce){
  .oh-cta, .oh-tile, .oh-again, .oh-order summary::after{ transition:none }
}

/* ways back to the home screen */
.opo-tohome{ display:block; width:100%; min-height:46px; margin-top:8px; font-family:var(--body); font-size:15px; font-weight:600; color:#FBF7EE; background:none; border:1px solid rgba(232,207,139,.55); border-radius:13px; cursor:pointer }
.opo-tohome:hover{ background:rgba(255,255,255,.1) }
.opo-tohome:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }

/* the right panel: nothing scrolls inside it, the page does */
.opo-body{ flex:none }
.opo-body .opo-lines{ flex:none; min-height:0; overflow:visible }
.opo-body .opo-sent{ flex:none; overflow:visible }
.opo-past{ padding:20px 22px 14px; color:var(--ink); background:#fff; border:1px solid var(--stone,#E7DFCE); border-radius:18px }
.opo-past:empty{ display:none }
.opo-pasthead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px }
.opo-pasthead h3{ margin:0; font-family:var(--disp); font-weight:500; font-size:18px; color:var(--oak) }
.opo-pasthead span{ font-size:12.5px; color:#5E564C; white-space:nowrap }
.opo-pastnone{ margin:4px 0 8px; font-size:14px; line-height:1.45; color:#5E564C }
.opo-pastitem{ border-top:1px solid var(--stone,#E7DFCE) }
.opo-pastitem summary{ position:relative; display:flex; flex-direction:column; gap:1px; min-height:56px; padding:12px 24px 12px 0; list-style:none; cursor:pointer }
.opo-pastitem summary::-webkit-details-marker{ display:none }
.opo-pastitem summary::after{ content:""; position:absolute; right:4px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--oak); border-bottom:2px solid var(--oak); transform:rotate(45deg); transition:transform .2s ease }
.opo-pastitem[open] summary::after{ margin-top:-2px; transform:rotate(-135deg) }
.opo-pastitem summary:focus-visible{ outline:3px solid var(--gold-2); outline-offset:1px }
.opo-pastdate{ font-size:15px; font-weight:600; line-height:1.25; color:var(--oak) }
.opo-pastmeta{ font-size:13px; color:#5E564C; font-variant-numeric:tabular-nums }
.opo-pastitem ul{ list-style:none; margin:0 0 8px; padding:0 }
.opo-pastitem li{ padding:9px 0; font-size:14px; line-height:1.35; color:var(--ink); border-top:1px solid var(--stone,#E7DFCE); text-wrap:pretty }
.opo-pastitem li b{ color:var(--oak) }
.opo-pastnote{ margin:0 0 8px; font-size:13.5px; line-height:1.4; color:var(--ink); text-wrap:pretty }
.opo-pastnote b{ color:var(--oak); font-weight:600 }
.opo-pastitem .opo-tohome{ margin:0 0 10px; min-height:42px; font-size:14px; color:var(--oak); border-color:rgba(14,59,42,.35) }
.opo-pastitem .opo-tohome:hover{ background:rgba(14,59,42,.06) }
.opo-more{ display:block; width:100%; min-height:44px; margin-top:6px; font-family:var(--body); font-size:15px; font-weight:600; color:#fff; background:var(--oak); border:none; border-radius:12px; cursor:pointer }
.opo-more:hover{ background:#14503A }
.opo-more:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
/* every order, with a search */
.op-pastsheet{ z-index:60 }
.op-pastsheet .spanel{ width:min(640px,100%); padding:0; background:#FBF8F1 }
.op-pasttop{ position:sticky; top:0; z-index:1; padding:20px 22px 2px; background:#FBF8F1; border-bottom:1px solid var(--line) }
.op-pasttop h2{ margin:0 44px 12px 0; font-family:var(--disp); font-weight:500; font-size:24px; color:var(--oak) }
.op-pasttop .ac-find{ margin-bottom:8px }
.op-pastlist{ padding:14px 22px 20px }
/* the help screen */
.op-helpsheet .op-pasttop{ padding-bottom:0 }
.op-helpbody{ padding:6px 22px 22px; font-size:15.5px; line-height:1.5; color:var(--ink) }
.op-helpsec{ padding:14px 0; border-bottom:1px solid var(--line) }
.op-helpsec h3{ margin:0 0 6px; font-family:var(--disp); font-weight:500; font-size:20px; line-height:1.2; color:var(--oak) }
.op-helpsec p{ margin:0 0 8px; text-wrap:pretty }
.op-helpsec p:last-child{ margin-bottom:0 }
.op-helpsec ol, .op-helpsec ul{ margin:0; padding-left:22px }
.op-helpsec li{ margin-bottom:5px; text-wrap:pretty }
.op-helpsec b{ font-weight:600; color:var(--oak) }
.op-helpmaster{ margin:20px 0 0; padding:8px 12px; font-family:var(--body); font-size:14px; font-weight:700; letter-spacing:.02em; color:#FBF7EE; background:var(--oak); border-radius:10px }
.op-helpcall{ margin-top:16px; padding:12px 14px; text-align:center; background:rgba(14,59,42,.06); border-radius:12px }
.op-helpcall b{ color:var(--oak); font-weight:600 }
.op-helpcall a{ font-weight:600; color:var(--claret); white-space:nowrap }
button.op-toweb{ cursor:pointer; background:none; border:none }
.oh-order li.ohit{ margin:0 -8px; padding-left:8px; padding-right:8px; background:rgba(193,158,66,.2); border-radius:6px }
/* phones and tablets: the whole Order screen scrolls, Send stays pinned until the order ends, then past orders follow */
@media(max-width:1000px){
  .op-order{ gap:0; overflow-y:auto; overscroll-behavior:contain; background:#0E3B2A }
  .opo-card{ flex:none; overflow:visible; background:none; border:none; border-radius:0; box-shadow:none }
  .opo-head{ position:sticky; top:0; z-index:2; background:#0E3B2A }
  .opo-foot{ position:sticky; bottom:0; z-index:1; background:#0E3B2A }
  .opo-past{ margin:18px 16px 12px }
}
/* big screens: the order and past orders flow with the page, and the order stays in view */
@media(min-width:1001px){
  .op-order{ align-self:start; display:block; max-height:none }
  .opo-past{ margin-top:18px }
}
/* short laptop screens: tighter, so Send and the order always fit */
@media(min-width:1001px) and (max-height:800px){
  .opo-past{ margin-top:12px }
  .opo-head{ padding:14px 22px 10px }
  .opo-line{ padding:12px 22px }
  .opo-foot{ padding:2px 22px 12px }
  .opo-date{ min-height:52px }
  .opo-notesum{ min-height:42px }
  .opo-send{ margin-top:6px }
  .opo-rep{ margin-top:8px }
  .opo-past{ padding:12px 22px 10px }
  .opo-pasthead{ margin-bottom:6px }
}
@media (prefers-reduced-motion:reduce){ .opo-pastitem summary::after{ transition:none } }

/* the account page */
.ac-page{ display:none }
body.op-at-account .ac-page{ display:block; max-width:980px; margin:0 auto }
body.op-at-account .op-home, body.op-at-account .op-grid, body.op-at-account .op-head{ display:none }
.ac-head{ padding:clamp(20px,3vw,32px); color:#FBF7EE; background:radial-gradient(70% 120% at 100% 0%, rgba(193,158,66,.3), transparent 70%), linear-gradient(160deg,#0A2B1F 0%,#0E3B2A 60%,#14503A 100%); border:1px solid rgba(232,207,139,.42); border-radius:24px }
.ac-head p{ margin:0; font-size:15px; color:var(--gold-1) }
.ac-head h1{ margin:2px 0 6px; font-family:var(--disp); font-weight:500; font-size:clamp(28px,4vw,42px); line-height:1.1; color:#FBF7EE; text-wrap:pretty }
.ac-pill{ display:inline-block; padding:2px 10px; font-size:12px; font-weight:700; line-height:1.5; white-space:nowrap; border-radius:999px; vertical-align:middle }
.ac-pill.master{ color:#0A2B1F; background:linear-gradient(120deg,var(--gold-1),var(--gold-2)) }
.ac-pill.you{ color:var(--oak); background:rgba(14,59,42,.1) }
.ac-pill.on{ color:#22543D; background:#E1F0E7 }
.ac-pill.wait{ color:#6B5216; background:#F6EEDC }
.ac-pill.off{ color:#5E564C; background:#EFE9DF }
.ac-chips{ display:flex; flex-wrap:wrap; gap:6px }
.ac-secs{ margin:14px 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.ac-chip{ min-height:42px; padding:0 15px; font-family:var(--body); font-size:14.5px; font-weight:600; color:var(--oak); background:rgba(255,255,255,.75); border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:background .15s ease }
.ac-chip:hover{ background:#fff }
.ac-chip.on{ color:#FBF7EE; background:linear-gradient(120deg,var(--oak),var(--oak-glow)); border-color:rgba(232,207,139,.6) }
.ac-card{ margin-bottom:12px; padding:18px 20px; background:rgba(255,255,255,.85); border-radius:18px; box-shadow:0 0 0 1px var(--line), 0 18px 34px -30px rgba(14,59,42,.8) }
.ac-card h2{ margin:0 0 10px; font-family:var(--disp); font-weight:500; font-size:22px; color:var(--oak) }
.ac-read{ display:flex; flex-wrap:wrap; gap:2px 10px; margin:0 0 12px; font-size:15px; overflow-wrap:anywhere }
.ac-read span{ color:#5E564C }
.ac-read b{ font-weight:600; color:var(--oak) }
.ac-field{ display:block; margin-bottom:12px; min-width:0 }
.ac-field label{ display:block; margin-bottom:5px; font-size:14px; font-weight:600; color:var(--oak) }
.ac-field input, .ac-find input{ width:100%; height:48px; padding:0 13px; font-family:var(--body); font-size:16px; color:var(--ink); background:#fff; border:1px solid #A89E89; border-radius:12px; outline:none }
.ac-field input:focus, .ac-find input:focus{ border-color:#A9872F; box-shadow:0 0 0 3px rgba(193,158,66,.34) }
.ac-find{ margin:0 0 12px }
.ac-pass{ position:relative; display:block }
.ac-pass input{ padding-right:52px }
.ac-eye{ position:absolute; top:2px; right:2px; display:grid; place-items:center; width:44px; height:44px; padding:0; color:var(--oak); background:none; border:none; border-radius:10px; cursor:pointer }
.ac-eye[aria-pressed="true"]{ color:var(--claret) }
.ac-hint{ margin:-6px 0 12px; font-size:13px; color:#5E564C }
#acAddForm .ac-hint{ margin:10px 0 0 }
.ac-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; font-family:var(--body); font-size:15px; font-weight:600; color:#FBF7EE; text-decoration:none; background:linear-gradient(120deg,var(--oak),var(--oak-glow)); border:none; border-radius:12px; cursor:pointer }
.ac-btn:hover{ filter:brightness(1.12) }
.ac-btn:disabled{ opacity:.6; cursor:progress }
.ac-delete{ background:var(--claret, #6F1D2B); border-color:var(--claret, #6F1D2B); color:#fff }
.ac-leave{ display:flex; flex-wrap:wrap; gap:8px }
.ac-out{ color:#FBF7EE; background:var(--claret) }
.ac-web{ color:var(--oak); background:#fff; border:1px solid rgba(14,59,42,.4) }
.ac-msg{ margin:0 0 12px; padding:10px 12px; font-size:14px; line-height:1.45; color:#6F1D2B; background:#FBEDE8; border-radius:11px; text-wrap:pretty }
.ac-msg.good{ color:#22543D; background:#E1F0E7 }
.ac-msg[hidden]{ display:none }
.ac-count{ margin:0 0 8px; font-size:14px; color:#5E564C }
.ac-addrow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 10px }
.ac-group{ margin-bottom:16px; padding:14px; background:rgba(243,238,235,.7); border-radius:20px; box-shadow:0 0 0 1px var(--line) }
.ac-group h2{ margin:0; display:flex; align-items:center; gap:8px; font-size:17px }
.ac-groupcount{ padding:1px 9px; font-size:12px; font-weight:700; color:#5E564C; background:#fff; border-radius:999px; box-shadow:0 0 0 1px var(--line) }
.ac-groupnote{ margin:2px 0 10px; font-size:13.5px; color:#5E564C; text-wrap:pretty }
.ac-group > :last-child{ margin-bottom:0 }
.ac-cust{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; align-items:center; margin-bottom:8px; padding:14px 16px; background:rgba(255,255,255,.85); border-radius:16px; box-shadow:0 0 0 1px var(--line) }
.ac-cust.off{ background:rgba(255,255,255,.5) }
.ac-cust.off .ac-custname{ color:#5E564C }
.ac-custname{ font-size:16px; font-weight:700; color:var(--oak); text-wrap:pretty }
.ac-custperson{ font-size:14.5px; font-weight:500; color:#3A3530 }
.ac-custemail{ font-size:14px; color:#5E564C; overflow-wrap:anywhere }
.ac-custmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:5px; font-size:13px; color:#5E564C }
.ac-custacts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:min(100%,500px) }
.ac-actrow{ display:contents }
.ac-custacts .ac-mini{ min-width:0 }
.ac-custacts .ac-mini.danger{ grid-column:3 }
.ac-days{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px }
.ac-dayslabel{ margin-right:4px; font-size:13px; font-weight:600; color:var(--oak) }
.ac-day{ min-width:46px; min-height:36px; padding:0 8px; font-family:var(--body); font-size:13px; font-weight:600; color:var(--oak); background:#fff; border:1px solid var(--line); border-radius:10px; cursor:pointer }
.ac-day:hover{ border-color:var(--oak) }
.ac-day[aria-pressed="true"]{ color:#fff; background:var(--oak); border-color:var(--oak) }
.ac-day:disabled{ opacity:.55; cursor:progress }
.ac-day:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.ac-mini{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:4px 10px; font-family:var(--body); font-size:13.5px; font-weight:600; line-height:1.2; text-align:center; text-decoration:none; text-wrap:balance; color:var(--oak); background:#fff; border:1px solid rgba(14,59,42,.28); border-radius:11px; cursor:pointer }
.ac-mini:hover{ background:rgba(193,158,66,.16) }
.ac-mini.danger{ color:#9B2C22; border-color:#E5B5AF }
.ac-mini.danger:hover{ background:#FBEDE8 }
.ac-mini:disabled{ opacity:.6; cursor:progress }
.ac-custorders{ grid-column:1 / -1; padding-top:12px; border-top:1px solid var(--line) }
.ac-custorders h3{ margin:0 0 4px; font-family:var(--disp); font-weight:500; font-size:18px; color:var(--oak); text-wrap:pretty }
.ac-custorders .ac-msg{ display:block }
.ac-custorders .oh-order{ margin-bottom:8px }
.cb-sale{ background:#F6E0DC; color:#7F1D29 }
.sale-icon{ display:inline-block; margin-right:4px; vertical-align:-2px }
.ooff{ display:block; margin-top:2px; font-size:13px; font-weight:600; color:#7F1D29 }
.ac-sale{ margin-bottom:14px; padding:14px 16px; background:rgba(255,255,255,.8); border-radius:16px; box-shadow:0 0 0 1px var(--line) }
.ac-sale h2{ margin:0; font-family:var(--disp); font-weight:500; font-size:20px; color:var(--oak); text-wrap:pretty }
.ac-saleoff{ margin:2px 0 8px; font-size:14.5px; font-weight:700; color:#7F1D29 }
.ac-salewait{ margin:0 0 8px; padding:8px 12px; font-size:14px; color:#5B4310; background:#F6EEDC; border-radius:10px; text-wrap:pretty }
.ac-pickhint{ margin:0 0 10px }
.ac-pickcats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px; margin:0 0 12px }
.ac-pickcats .op-cat{ background:rgba(255,255,255,.72); border-color:var(--line) }
.ac-pickcats .op-cat.on{ background:linear-gradient(120deg,var(--oak),var(--oak-glow)) }
.ac-pickcats .op-catname{ white-space:normal; overflow:visible; text-wrap:balance }
.ac-pickviews{ margin-bottom:10px }
.ac-picks{ list-style:none; margin:0; padding:0; overflow:hidden; background:rgba(255,255,255,.85); border-radius:16px; box-shadow:0 0 0 1px var(--line) }
.ac-pickrow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 14px; border-top:1px solid var(--line) }
.ac-pickrow:first-child{ border-top:none }
.ac-picktext{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.ac-picktext b{ font-size:15px; font-weight:600; line-height:1.3; color:var(--oak); text-wrap:pretty }
.ac-picktext small{ font-size:13px; color:#5E564C; font-variant-numeric:tabular-nums }
.ac-pickbtn{ min-width:126px }
.ac-pickbtn.on, .ac-pickbtn.on:hover{ color:var(--oak); background:var(--gold-1,#E8CF8B); border-color:transparent }
.ac-edit{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 10px; padding-top:10px; border-top:1px solid var(--line) }
.ac-editmsg{ grid-column:1 / -1 }
.ac-editbtns{ grid-column:1 / -1; display:flex; gap:8px; align-items:center }
.ac-logtools{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px }
.ac-log{ list-style:none; margin:0; padding:0; overflow:hidden; background:rgba(255,255,255,.85); border-radius:16px; box-shadow:0 0 0 1px var(--line) }
.ac-log li{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 14px; border-top:1px solid var(--line) }
.ac-log li:first-child{ border-top:none }
.ac-logicon{ display:grid; place-items:center; width:34px; height:34px; color:var(--oak); background:rgba(14,59,42,.08); border-radius:10px }
.k-order .ac-logicon{ color:#22543D; background:#E1F0E7 }
.k-signin .ac-logicon{ color:#6B5216; background:#F6EEDC }
.k-admin .ac-logicon{ color:var(--claret); background:#F6E9E6 }
.ac-logtext{ font-size:14.5px; line-height:1.35; color:var(--ink); text-wrap:pretty }
.ac-logtext small{ display:block; font-size:12.5px; color:#5E564C }
.ac-log time{ font-size:13px; white-space:nowrap; color:#5E564C }
.ac-chip:focus-visible, .ac-btn:focus-visible, .ac-mini:focus-visible, .ac-eye:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
@media(max-width:1000px){
  body.op-at-account .ac-page{ max-width:none }
  .ac-head{ margin:0 -16px; padding:calc(14px + env(safe-area-inset-top)) 18px 18px; border:none; border-radius:0 0 24px 24px }
}
@media(max-width:600px){
  .ac-addrow, .ac-edit{ grid-template-columns:minmax(0,1fr) }
  .ac-pickcats{ display:flex; gap:8px; padding:2px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none }
  .ac-pickcats .op-cat{ flex:none; width:104px }
  .ac-cust{ grid-template-columns:minmax(0,1fr); padding:14px }
  .ac-custacts{ width:100% }
  .ac-log li{ grid-template-columns:34px minmax(0,1fr) }
  .ac-log time{ grid-column:2 }
  .ac-card{ padding:16px }
  .ac-leave .ac-btn{ flex:1 1 100% }
  #acAddBtn{ width:100% }
}

/* logged in: no website menu or footer, just this bar */
.nav, .n-rule, .mobilemenu, .page.op footer{ display:none !important }
.op-topbar{ position:fixed; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; gap:clamp(12px,2vw,28px); min-height:64px; padding:8px clamp(14px,2vw,28px); color:#FBF7EE;
  background:linear-gradient(120deg,#0A2B1F 0%,#0E3B2A 60%,#14503A 100%); box-shadow:0 10px 24px -18px rgba(10,43,31,.95) }
body.op-checking .op-topbar{ visibility:hidden }
.op-brand{ flex:none; display:flex; align-items:flex-end; gap:9px; text-decoration:none }
.op-brand .t{ display:block; height:40px; width:auto; filter:brightness(0) invert(1) sepia(.3) saturate(3) hue-rotate(5deg) }
.op-brand .ft{ display:block; width:118px }
.op-brand .ft img{ display:block; width:100%; filter:brightness(0) invert(1) sepia(.3) saturate(3) hue-rotate(5deg) }
.op-nav{ display:flex; gap:4px }
.op-navbtn{ min-height:40px; padding:0 16px; font-family:var(--body); font-size:14.5px; font-weight:600; color:#FBF7EE; background:none; border:none; border-radius:11px; cursor:pointer; transition:background .15s ease }
.op-navbtn:hover{ background:rgba(255,255,255,.1) }
.op-navbtn.on{ color:#0A2B1F; background:linear-gradient(120deg,var(--gold-1),var(--gold-2)) }
.op-topright{ flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:clamp(8px,1.4vw,16px) }
.op-account-top{ flex:0 1 auto; display:block; min-width:0; font-size:13.5px; color:rgba(251,247,238,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.op-account-top b{ color:var(--gold-1) }
.op-toweb, .op-topout{ flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 13px; font-family:var(--body); font-size:14px; font-weight:600; white-space:nowrap; color:#FBF7EE; background:rgba(255,255,255,.08); border:1px solid rgba(232,207,139,.38); border-radius:11px; text-decoration:none; cursor:pointer; transition:background .15s ease }
.op-toweb:hover, .op-topout:hover{ background:rgba(255,255,255,.17) }
.op-brand:focus-visible, .op-navbtn:focus-visible, .op-toweb:focus-visible, .op-topout:focus-visible{ outline:3px solid var(--gold-1); outline-offset:2px }
.op-legal{ display:block; margin:18px 0 0; font-size:12.5px; line-height:1.6; text-align:center; color:#5E564C; text-wrap:pretty }
.op-legal a{ color:inherit }
@media(max-width:1000px){
  .op-topbar{ display:none }
  .op-account-top{ display:none !important }
}
@media(max-width:350px){
  .oh-web{ padding:0 9px; font-size:13px }
}

/* shown if the login check can't reach the server */
.op-trouble{ position:fixed; top:50%; left:50%; z-index:70; width:min(420px, calc(100vw - 32px)); padding:26px 24px; text-align:center; background:#FBF8F1; border:1px solid rgba(14,59,42,.2); border-radius:20px; box-shadow:0 26px 50px -26px rgba(10,43,31,.8); transform:translate(-50%,-50%) }
.op-trouble h1{ margin:0 0 8px; font-family:var(--disp); font-weight:500; font-size:24px; line-height:1.2; color:var(--oak); text-wrap:pretty }
.op-trouble p{ margin:0 0 6px; font-size:15px; line-height:1.5; color:#5E564C; text-wrap:pretty }
.op-trouble a{ color:var(--claret); white-space:nowrap }

/* slim scrollbars in the brand colors */
html{ scrollbar-color:var(--oak) rgba(14,59,42,.08) }
.opo-lines, .opo-sent{ scrollbar-color:rgba(232,207,139,.55) transparent }
@supports selector(::-webkit-scrollbar){
  /* Chrome, Edge and Safari: the rounded version. These browsers skip it if the plain colors above are set. */
  html, .op-cats, .opo-lines, .opo-sent{ scrollbar-color:auto; scrollbar-width:auto }
  html::-webkit-scrollbar{ width:12px; height:12px }
  .op-cats::-webkit-scrollbar, .opo-lines::-webkit-scrollbar, .opo-sent::-webkit-scrollbar{ width:8px }
  html::-webkit-scrollbar-track{ background:#EFE9DB }
  .op-cats::-webkit-scrollbar-track, .opo-lines::-webkit-scrollbar-track, .opo-sent::-webkit-scrollbar-track{ background:transparent }
  html::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--oak-glow),var(--oak)); border:3px solid #EFE9DB; border-radius:999px }
  html::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--gold-1),var(--gold-2)) }
  .op-cats::-webkit-scrollbar-thumb{ background:rgba(14,59,42,.32); border:2px solid transparent; background-clip:padding-box; border-radius:999px }
  .op-cats::-webkit-scrollbar-thumb:hover{ background:rgba(14,59,42,.55); border:2px solid transparent; background-clip:padding-box }
  .opo-lines::-webkit-scrollbar-thumb, .opo-sent::-webkit-scrollbar-thumb{ background:rgba(232,207,139,.5); border:2px solid transparent; background-clip:padding-box; border-radius:999px }
  .opo-lines::-webkit-scrollbar-thumb:hover, .opo-sent::-webkit-scrollbar-thumb:hover{ background:var(--gold-1); border:2px solid transparent; background-clip:padding-box }
}

/* ---- phones and tablets: an app, not a web page ---- */
@media(max-width:1000px){
  :root{ --tabh:calc(60px + env(safe-area-inset-bottom)) }
  body{ background:#F6F2E8 }
  body, .op button, .op-tabs, .obar{ -webkit-user-select:none; user-select:none }
  .page.op{ padding-top:0 }
  .op-wrap{ width:calc(100% - 32px); padding-bottom:calc(var(--tabh) + 20px) }
  body.has-order .op-wrap{ padding-bottom:calc(var(--tabh) + 76px) }
  .op-head{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0) }

  /* dark app bar with the search built in */
  .op-tools{ position:sticky; top:0; z-index:4; margin:0 -16px; padding:calc(6px + env(safe-area-inset-top)) 14px 12px; color:#FBF7EE;
    background:linear-gradient(160deg,#0A2B1F 0%,#0E3B2A 60%,#14503A 100%); -webkit-backdrop-filter:none; backdrop-filter:none;
    border-radius:0 0 22px 22px; box-shadow:0 14px 26px -18px rgba(10,43,31,.95) }
  .op-appbar{ display:flex; align-items:center; gap:10px; min-height:46px; margin-bottom:8px }
  .op-applogo, .op-appback{ flex:none; display:grid; place-items:center; width:42px; height:42px; padding:0; color:#FBF7EE; background:rgba(255,255,255,.1); border:1px solid rgba(232,207,139,.32); border-radius:13px; cursor:pointer }
  .op-applogo[hidden], .op-appback[hidden]{ display:none }
  .op-applogo img{ display:block; height:27px; width:auto; filter:brightness(0) invert(1) sepia(.3) saturate(3) hue-rotate(5deg) }
  .op-appback:active, .op-applogo:active{ background:rgba(255,255,255,.2) }
  .op-apptitle{ flex:1; display:flex; flex-direction:column; min-width:0 }
  .op-appout{ flex:none; display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:0 11px; font-family:var(--body); font-size:13.5px; font-weight:600; white-space:nowrap; color:#FBF7EE; background:rgba(255,255,255,.1); border:1px solid rgba(232,207,139,.32); border-radius:13px; cursor:pointer }
  .op-appout:active{ background:rgba(255,255,255,.2) }
  .op-apptitle b{ font-family:var(--disp); font-weight:500; font-size:21px; line-height:1.15; letter-spacing:-.01em; color:#FBF7EE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .op-apptitle span{ margin-top:1px; font-size:12.5px; line-height:1.25; color:var(--gold-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums }
  .op-search{ height:46px; padding-left:14px; background:#FBF8F1; border:none; border-radius:14px; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none }
  .op-search:focus-within{ box-shadow:0 0 0 3px rgba(232,207,139,.6) }
  .op-search input{ font-size:16px }
  .op-sum{ display:none }
  .op-under{ margin:12px 0 10px }
  .op-stock2{ display:block; margin:0; font-size:12.5px; color:#5E564C; text-wrap:pretty }
  .op-stock2[hidden]{ display:none }

  /* section labels stay in view while scrolling */
  .op-group h2{ position:sticky; top:calc(var(--toolsh,118px) - 2px); z-index:2; margin:0 -16px 2px; padding:8px 18px 6px; font-size:18px; background:linear-gradient(180deg,#F6F2E8 75%,rgba(246,242,232,0)) }
  .op-row{ transition:background .12s ease }
  .op-row:active{ background:rgba(14,59,42,.05) }
  .op-legal{ display:block; margin:6px 0 0; font-size:12.5px; line-height:1.6; text-align:center; color:#5E564C; text-wrap:pretty }
  .op-legal a{ color:inherit }

  /* Categories and Order are screens above the tab bar */
  .op-cats, .op-order{ top:0; bottom:var(--tabh); height:auto; transform:translateY(10px); opacity:0; transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1), visibility 0s linear .22s }
  body.op-picking .op-cats, body.op-open .op-order{ transform:none; opacity:1; transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1) }
  .op-cats-head{ display:flex; margin:0 -16px 2px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; color:#FBF7EE; background:linear-gradient(160deg,#0A2B1F 0%,#0E3B2A 60%,#14503A 100%); border-radius:0 0 22px 22px }
  .op-cats-head h2{ font-size:23px; color:#FBF7EE }
  .opo-head{ padding:calc(12px + env(safe-area-inset-top)) 18px 12px }
  .opo-close{ display:none }
  .opo-foot{ padding-bottom:12px }

  /* the bottom tab bar */
  .op-tabs{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:repeat(4,1fr); height:var(--tabh); padding-bottom:env(safe-area-inset-bottom);
    background:rgba(251,248,241,.92); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-top:1px solid var(--line); box-shadow:0 -10px 24px -20px rgba(10,43,31,.7) }
  .op-tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; padding:0; font-family:var(--body); font-size:11.5px; font-weight:500; line-height:1.1; color:#5E564C; text-decoration:none;
    background:none; border:none; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:color .15s ease }
  .op-tab svg{ transition:transform .15s ease }
  .op-tab:active svg{ transform:scale(.88) }
  .op-tab.on{ color:var(--oak); font-weight:600 }
  .op-tab.on::before{ content:""; position:absolute; top:-1px; left:50%; width:30px; height:3px; margin-left:-15px; background:linear-gradient(90deg,var(--gold-1),var(--gold-2)); border-radius:0 0 3px 3px; box-shadow:0 0 10px var(--glow) }
  .op-tab:focus-visible{ outline:3px solid var(--gold-2); outline-offset:-4px }
  .op-badge{ position:absolute; top:5px; left:50%; display:grid; place-items:center; min-width:19px; height:19px; margin-left:5px; padding:0 5px; font-size:11px; font-weight:700; color:#0A2B1F; background:linear-gradient(120deg,var(--gold-1),var(--gold-2)); border-radius:999px; box-shadow:0 0 0 2px #FBF8F1; font-variant-numeric:tabular-nums }
  .op-badge[hidden]{ display:none }

  /* Review & send sits just above the tabs */
  .obar{ bottom:calc(var(--tabh) + 8px); z-index:45; min-height:52px; padding:0 6px 0 16px; border-radius:17px }
  .obar-go{ min-height:40px; border-radius:12px }

  /* item details cover the tabs, like a sheet */
  .op-info{ z-index:60 }
}
@media (prefers-reduced-motion:reduce){
  .op-cats, .op-tab, .op-tab svg, .op-row{ transition:none !important }
  .op-order, .obar, .opo-check, .oadd, .op-cat, .op-under .fchip, .op-under .schip{ transition:none !important; animation:none !important }
}

/* Order tools (11/9): changing a sent order, the cutoff note, the estimate, order status */
.opo-edit{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin:0 22px; padding:10px 14px; color:#0A2B1F; background:var(--gold-1); border-radius:12px }
.opo-edit[hidden]{ display:none }
.opo-edit p{ display:flex; flex-direction:column; gap:2px; min-width:0; margin:0; font-size:14px; line-height:1.35; text-wrap:pretty }
.opo-edit b{ font-size:15px }
.opo-edit a{ color:inherit; font-weight:600 }
.opo-stopedit{ min-height:40px; padding:4px 12px; font-family:var(--body); font-size:14px; font-weight:600; color:#0A2B1F; background:rgba(255,255,255,.55); border:1px solid rgba(10,43,31,.35); border-radius:10px; cursor:pointer; white-space:nowrap }
.opo-stopedit:hover{ background:#fff }
.opo-stopedit:focus-visible{ outline:3px solid #0A2B1F; outline-offset:2px }
.opo-cutoff{ margin:8px 0 2px; font-size:13px; line-height:1.4; color:rgba(251,247,238,.82); text-wrap:pretty }
.opo-est{ margin:10px 0 0; padding:10px 12px; background:rgba(255,255,255,.07); border-radius:11px }
.opo-est[hidden]{ display:none }
.opo-esttotal{ margin:0; font-size:15px; color:#FBF7EE }
.opo-esttotal b{ color:var(--gold-1) }
.opo-estnote{ margin:4px 0 0; font-size:12.5px; line-height:1.4; color:rgba(251,247,238,.78); text-wrap:pretty }
.ost{ display:inline-block; margin-left:6px; padding:1px 8px; font-size:12px; font-weight:600; line-height:1.6; color:var(--oak); background:rgba(14,59,42,.08); border-radius:999px; white-space:nowrap }
.ost-cancelled{ color:#6F1D2B; background:#FBEDE8 }
.ost-delivered{ color:#0A2B1F; background:rgba(193,158,66,.25) }
.is-cancelled summary .oh-ordername{ text-decoration:line-through; text-decoration-color:rgba(36,31,27,.4) }
.oh-acts{ display:flex; gap:8px; margin-top:4px }
.oh-act{ flex:1 1 0; min-width:0; min-height:44px; padding:6px 10px; font-family:var(--body); font-size:15px; font-weight:600; color:var(--oak); background:rgba(193,158,66,.16); border:1px solid rgba(14,59,42,.3); border-radius:12px; cursor:pointer }
.oh-act:hover{ background:rgba(193,158,66,.3) }
.oh-actno{ color:#fff; background:#8A1F2B; border-color:#8A1F2B }
.oh-actno:hover{ background:#6F1D2B }
.oh-act:focus-visible, .oh-call:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.oh-ask{ margin-top:4px; padding:10px 12px; background:#FBEDE8; border-radius:12px }
.oh-ask p{ margin:0 0 6px; font-size:14px; line-height:1.4; color:#6F1D2B; text-wrap:pretty }
.oh-call{ display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:4px; padding:6px 10px; font-size:15px; font-weight:600; color:var(--oak); text-align:center; text-decoration:none; background:rgba(14,59,42,.06); border-radius:12px; text-wrap:pretty }
.oh-call:hover{ background:rgba(14,59,42,.12) }
.oh-note{ margin:6px 0 2px; font-size:14px; line-height:1.4; color:var(--oak); text-wrap:pretty }
.opo-pastitem .oh-acts, .opo-pastitem .oh-call, .opo-pastitem .oh-ask{ margin-bottom:8px }

/* Past order cards line up: same height, header on one track, status on its own line, buttons on the bottom. */
.oh-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-width:0 }
.oh-tags{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px }
.oh-tags:empty{ display:none }
.oh-tags .ost{ margin-left:0 }
.oh-orderrow .oh-tags, .oh-orderrow .oh-tags:empty{ display:flex; min-height:22px }
.oh-foot{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:4px }
.oh-foot > *{ margin-top:0 }

/* Nothing on the ordering pages may scroll sideways, even with a desktop scrollbar taking room. */
html, body{ overflow-x:clip }

/* View as customer (Masters only, read only): a band across the top, and everything below it moves down */
:root{ --viewh:0px }
.op-viewas{ position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; padding:8px 16px; color:#0A2B1F; background:var(--gold-1); box-shadow:0 2px 10px -4px rgba(10,43,31,.5); font-family:var(--body) }
.op-viewas p{ flex:1; margin:0; min-width:0; font-size:15px; font-weight:600; line-height:1.3; text-align:left; text-wrap:pretty; overflow-wrap:anywhere }
.op-viewas p small{ display:block; margin-top:1px; font-size:13px; font-weight:500; opacity:.78 }
.op-viewstop{ flex:none; border:0; font-family:var(--body); cursor:pointer; display:inline-flex; align-items:center; min-height:34px; padding:0 12px; font-size:14px; font-weight:700; color:#FBF7EE; text-decoration:none; background:#0E3B2A; border-radius:10px; white-space:nowrap }
.op-viewstop:hover{ background:#0A2B1F }
.op-viewstop:focus-visible{ outline:3px solid #0A2B1F; outline-offset:2px }
body.is-viewas{ padding-top:var(--viewh) }
body.is-viewas .op-topbar{ top:var(--viewh) }
body.is-viewas .sheet{ top:var(--viewh) }
body.is-viewas [data-tab="account"], body.is-viewas .op-account-top, body.is-viewas [data-account]{ display:none !important }
@media(max-width:1000px){
  body.is-viewas .op-tools{ top:var(--viewh) }
  body.is-viewas .op-group h2{ top:calc(var(--viewh) + var(--toolsh,118px) - 2px) }
  body.is-viewas .op-order, body.is-viewas .op-cats{ top:var(--viewh); height:auto }
  body.is-viewas .op-tabs{ grid-template-columns:repeat(3,1fr) }
}

/* the saved estimate on order cards, while the order is on its way */
.oh-est{ display:block; margin-top:2px; font-size:13.5px; font-weight:600; color:var(--oak); text-wrap:pretty }

/* Desktop: the category list is part of the page, not its own scroll box, and long names wrap to two lines */
@media(min-width:1001px){
  .op-cats{ position:static; align-self:start; max-height:none; overflow:visible }
  .op-cat{ min-height:54px }
  .op-catname{ white-space:normal; overflow:hidden; text-overflow:clip; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-wrap:pretty }
}

/* "OK to substitute": a switch on each basket line, and one for the whole order. 44px tall to tap. */
.opo-sub{ position:relative; grid-column:2; display:flex; align-items:center; gap:10px; min-height:44px; margin:-4px 0 -6px; font-size:13.5px; font-weight:500; line-height:1.3; color:rgba(251,247,238,.88); cursor:pointer; text-wrap:pretty; -webkit-tap-highlight-color:transparent }
.opo-sub input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.opo-subtrack{ position:relative; flex:none; width:40px; height:24px; background:rgba(255,255,255,.18); border:1px solid rgba(251,247,238,.35); border-radius:999px; transition:background .15s ease }
.opo-subtrack::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#FBF7EE; border-radius:50%; transition:transform .15s ease }
.opo-sub input:checked + .opo-subtrack{ background:var(--gold-2); border-color:var(--gold-1) }
.opo-sub input:checked + .opo-subtrack::after{ transform:translateX(16px) }
.opo-sub input:focus-visible + .opo-subtrack{ outline:3px solid var(--gold-1); outline-offset:2px }
.opo-suball{ margin:6px 0 0; padding:4px 0; font-size:14px; color:#FBF7EE; border-bottom:1px solid rgba(251,247,238,.1) }
.osubok{ display:block; font-size:12.5px; font-weight:600; color:var(--oak) }
.opo-sent .osubok{ display:inline; margin-left:6px; color:var(--gold-1) }
@media (prefers-reduced-motion:reduce){ .opo-subtrack, .opo-subtrack::after{ transition:none } }

/* My usual on Home */
.oh-usual[hidden]{ display:none }
.oh-ulist{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.oh-urow{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:64px; padding:8px 10px; background:rgba(255,255,255,.8); border-radius:14px; box-shadow:0 0 0 1px var(--line) }
.oh-urow .opo-pic{ background:#F7F3EA }
.oh-urow.off{ opacity:.7 }
.oh-utxt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.oh-uname{ font-size:14.5px; font-weight:600; line-height:1.25; color:var(--ink); text-wrap:pretty; overflow-wrap:anywhere }
.oh-uqty{ font-size:13px; color:#5E564C }
.oh-uadd{ min-width:64px; min-height:44px; padding:4px 12px; font-family:var(--body); font-size:14.5px; font-weight:700; color:#0A2B1F; background:var(--gold-1); border:none; border-radius:12px; cursor:pointer; white-space:nowrap }
.oh-uadd:hover{ filter:brightness(1.05) }
.oh-uadd:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.oh-uin, .oh-uoff{ font-size:12.5px; font-weight:600; color:var(--oak); text-align:right; max-width:90px; text-wrap:pretty }
.oh-uoff{ color:#5E564C }
.oh-uall{ width:100%; margin-top:10px }
.oh-umsg{ margin:8px 0 0; font-size:14px; line-height:1.4; color:var(--oak); text-wrap:pretty }
.oh-umsg[hidden]{ display:none }
@media(max-width:700px){ .oh-ulist{ grid-template-columns:minmax(0,1fr) } }

/* Audit fixes (11/9): OK to substitute sits in the top row, beside the name, so a line keeps its old two-row height */
.opo-line{ grid-template-columns:44px minmax(0,1fr) auto }
.opo-line .opo-act{ grid-column:2 / span 2 }
.opo-linesub{ grid-column:3; grid-row:1; align-self:start; margin:0; gap:7px; min-height:44px }
.opo-linesub .opo-subtrack{ width:36px; height:22px }
.opo-linesub .opo-subtrack::after{ width:16px; height:16px }
.opo-linesub input:checked + .opo-subtrack::after{ transform:translateX(14px) }
.opo-subtext{ font-size:11.5px; line-height:1.15; white-space:nowrap }

/* Everything people tap is at least 44px tall */
.orm, .oclear{ min-height:44px }
.ocal{ width:min(340px, calc(100vw - 24px)) }
.ocal-grid:not(.ocal-week){ grid-auto-rows:44px }
.ocal-day{ height:44px; max-width:44px }
.ocal-nav{ width:44px; height:44px }
.ac-day{ min-height:44px }
.ac-mini{ min-height:44px }
.op-viewstop{ min-height:44px }
.oh-all{ min-height:44px }
.op-filters .fchip, .op-under .fchip, .op-under .fchip[data-show]:not(.on), .op-under .schip{ min-height:44px }
.op-legal a{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px }
@media(max-width:1000px){
  .op-under .fchip, .op-under .fchip[data-show]:not(.on), .op-under .schip{ min-height:44px }
  .op-legal a{ min-height:44px }
}

/* ── Account pages on phones (11/9): tiles, one section at a time, folded cards ── */
@media(max-width:760px){
  .ac-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0 16px }
  .ac-tile{ position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:3px; min-height:118px; padding:14px; font-family:var(--body); text-align:left; color:var(--oak); background:rgba(255,255,255,.9); border:none; border-radius:18px; box-shadow:0 0 0 1px var(--line), 0 14px 26px -22px rgba(14,59,42,.9); cursor:pointer; overflow:hidden; transition:transform .15s ease, box-shadow .2s ease; -webkit-tap-highlight-color:transparent; animation:acTileIn .35s ease both }
  .ac-tile:nth-child(2){ animation-delay:.04s } .ac-tile:nth-child(3){ animation-delay:.08s } .ac-tile:nth-child(4){ animation-delay:.12s } .ac-tile:nth-child(5){ animation-delay:.16s } .ac-tile:nth-child(6){ animation-delay:.2s }
  .ac-tile::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 100% 0, rgba(232,207,139,.42), transparent 42%); pointer-events:none }
  .ac-tile:active{ transform:scale(.97) }
  .ac-tile:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
  .ac-tileicon{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:auto; color:#0A2B1F; background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); border-radius:14px; box-shadow:0 6px 14px -8px rgba(122,90,18,.8) }
  .ac-tile b{ font-size:16px; font-weight:700; line-height:1.2; text-wrap:pretty }
  .ac-tile small{ max-width:100%; font-size:13px; font-weight:500; line-height:1.3; color:#4E473F; overflow-wrap:anywhere }
  @keyframes acTileIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

  .ac-bar{ position:sticky; top:var(--viewh,0px); z-index:5; display:flex; align-items:center; gap:6px; min-height:56px; margin:0 -16px 12px; padding:6px 16px 6px 8px; color:#FBF7EE; background:linear-gradient(160deg,#0A2B1F 0%,#0E3B2A 70%,#14503A 100%); box-shadow:0 10px 22px -18px rgba(10,43,31,.9) }
  .ac-bar h1{ margin:0; min-width:0; font-family:var(--disp); font-weight:500; font-size:22px; line-height:1.15; color:#FBF7EE; text-wrap:pretty }
  .ac-back{ display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:0 10px 0 4px; font-family:var(--body); font-size:14.5px; font-weight:600; color:var(--gold-1); background:none; border:none; border-radius:12px; cursor:pointer }
  .ac-back:focus-visible{ outline:3px solid var(--gold-1); outline-offset:1px }
  .ac-sticky{ position:sticky; top:calc(var(--viewh,0px) + 56px); z-index:4; margin:0 -16px 10px; padding:8px 16px 6px; background:rgba(246,242,232,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
  .ac-sticky .ac-find{ margin:0 }
  .ac-sticky .ac-pickviews{ margin:8px 0 0 }

  /* folded cards: the same size closed, closed to start */
  .ac-fold{ margin-bottom:8px; background:rgba(255,255,255,.9); border-radius:16px; box-shadow:0 0 0 1px var(--line), 0 12px 24px -24px rgba(14,59,42,.8) }
  .ac-fold > summary{ display:flex; align-items:center; gap:10px; min-height:64px; padding:10px 14px; list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent }
  .ac-fold > summary::-webkit-details-marker{ display:none }
  .ac-fold > summary:focus-visible{ outline:3px solid var(--gold-2); outline-offset:-3px; border-radius:16px }
  .ac-foldhead{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0 }
  .ac-foldhead b{ font-size:16px; font-weight:700; line-height:1.25; color:var(--oak); text-wrap:pretty; overflow-wrap:anywhere }
  .ac-foldsum{ font-size:13.5px; line-height:1.3; color:#4E473F; overflow-wrap:anywhere; text-wrap:pretty }
  .ac-chev{ flex:none; width:9px; height:9px; margin:0 4px 0 2px; border-right:2px solid var(--oak); border-bottom:2px solid var(--oak); transform:rotate(45deg); transition:transform .2s ease }
  .ac-fold[open] > summary .ac-chev{ transform:rotate(-135deg) }
  .ac-foldbody{ padding:2px 14px 14px; border-top:1px solid var(--line) }
  .ac-foldbody > :first-child{ margin-top:12px }
  .ac-folddanger > summary b{ color:#7F1D29 }
  .ac-foldadd{ background:linear-gradient(120deg,rgba(232,207,139,.32),rgba(255,255,255,.92) 60%) }
  .ac-pills{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; flex:none; max-width:46% }

  /* text never tiny */
  .ac-pill, .ost{ font-size:13px; padding:2px 10px }
  .ac-count, .ac-hint, .ac-custmeta, .ac-dayslabel, .ac-picktext small, .ac-log time{ font-size:13.5px; color:#4E473F }
  .ac-custemail{ font-size:14px; color:#4E473F }

  /* Your account */
  .ac-phone .ac-leave{ margin-top:14px }
  .ac-phone .ac-btn{ width:100% }
  .ac-leave .ac-btn{ flex:1 1 140px }

  /* Customers */
  .ac-filters{ margin:0 0 10px }
  .ac-filters .ac-chip, .ac-pickviews .ac-chip{ min-height:44px }
  .ac-chip b{ margin-left:4px; font-weight:700; opacity:.75 }
  .ac-addrow{ grid-template-columns:minmax(0,1fr) }
  .ac-custfold.off{ background:rgba(255,255,255,.62) }
  .ac-custfold .ac-foldbody{ padding:0 12px 12px }
  .ac-custfold .ac-cust{ display:block; margin:0; padding:0; background:none; box-shadow:none }
  .ac-custfold .ac-custname, .ac-custfold .ac-custperson{ display:none }
  .ac-custfold .ac-custtext{ margin-top:10px }
  .ac-custacts{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; width:100%; margin-top:12px }
  .ac-custacts .ac-mini.danger{ grid-column:auto }
  .ac-days{ gap:6px }
  .ac-dayslabel{ flex-basis:100% }
  .ac-day{ flex:1 1 0; min-width:0; padding:0 4px; font-size:14px }
  .ac-edit .ac-editbtns{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .ac-custorders{ margin-top:12px }

  /* Staff picks */
  .ac-pickgroup > summary .op-catart{ width:44px; height:44px; flex:none }
  .ac-pickgroup .ac-foldbody{ padding:0 0 4px }
  .ac-pickgroup .ac-picks{ border-radius:0 0 16px 16px; box-shadow:none; background:none }
  .ac-pickgroup .ac-pickbtn{ min-width:118px }
  .ac-picktext b{ font-size:15px }

  /* On sale */
  .ac-salefold .ac-saleoff{ font-weight:700; color:#7F1D29 }
  .ac-salefold .ac-picks{ box-shadow:0 0 0 1px var(--line) }
  .ac-foldhelp > summary{ min-height:56px }

  /* Activity */
  .ac-logtools{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin-bottom:10px }
  .ac-logtools .ac-filters{ flex:1 1 100%; margin:0 }
  .ac-logtools [data-aclogrefresh]{ min-height:44px }
  .ac-lrows{ list-style:none; margin:0; padding:0 }
  .ac-lrows li{ display:grid; grid-template-columns:62px minmax(0,1fr); gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px; line-height:1.4; color:var(--ink) }
  .ac-lrows li:first-child{ border-top:none }
  .ac-lrows time{ font-size:13.5px; font-weight:600; color:#4E473F; font-variant-numeric:tabular-nums }
  .ac-lrows span{ min-width:0; overflow-wrap:anywhere; text-wrap:pretty }
  .ac-lrows small{ display:block; font-size:13px; color:#4E473F }
  .ac-lrows li.k-order time{ color:var(--oak) }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .ac-tile{ animation:none; transition:none }
  .ac-chev{ transition:none }
}

/* Phones: every button group in the Account pages is 3 across, all the same size (11/9) */
@media(max-width:760px){
  .ac-tiles, .ac-custacts, .ac-filters, .ac-pickviews, .ac-leave, .ac-days, .ac-edit .ac-editbtns, .ac-logtools{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:8px; align-items:stretch }
  .ac-logtools .ac-filters, .ac-actrow{ display:contents }
  .ac-dayslabel{ grid-column:1 / -1; margin:0 }
  .ac-days{ grid-auto-rows:auto }
  .ac-days .ac-day{ min-height:44px }
  .ac-tile{ min-height:116px; padding:12px 10px; gap:2px }
  .ac-tileicon{ width:40px; height:40px; border-radius:12px }
  .ac-tile b{ font-size:15px }
  .ac-tile small{ font-size:13px }
  .ac-tiles .ac-tile, .ac-custacts .ac-mini, .ac-filters .ac-chip, .ac-pickviews .ac-chip, .ac-leave .ac-btn, .ac-days .ac-day, .ac-editbtns > *, .ac-logtools [data-aclogrefresh]{
    width:100%; min-width:0; min-height:44px; height:100%; margin:0; padding:6px 6px; flex:none; font-size:13.5px; line-height:1.2; text-align:center; white-space:normal; overflow-wrap:anywhere; text-wrap:balance }
  .ac-tiles .ac-tile{ text-align:left; padding:12px 10px; font-size:inherit; text-wrap:pretty }
  .ac-filters .ac-chip, .ac-pickviews .ac-chip{ display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 4px; padding:6px 4px }
  .ac-chip b{ margin-left:0 }
  .ac-leave{ padding:12px }
  .ac-leave .ac-btn{ flex:none; padding:6px 4px }
  .ac-custacts .ac-mini.danger{ grid-column:auto }
}

/* ---------- Add to home screen / desktop ---------- */
.oh-install{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; min-height:44px; padding:0 18px; font-family:var(--body); font-size:15px; font-weight:600; color:#FBF7EE; background:rgba(251,247,238,.08); border:1px solid rgba(232,207,139,.5); border-radius:999px; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s ease }
.oh-install[hidden]{ display:none }
.oh-install svg{ color:var(--gold-2) }
.oh-install:hover{ background:rgba(251,247,238,.16) }
.oh-install:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.is-app .oh-install{ display:none }
.ins-sheet{ z-index:60 }
.ins-sheet .spanel{ position:relative; width:min(440px,100%); padding:28px 24px 22px; background:#FBF8F1; text-align:left }
.ins-body h2{ margin:12px 44px 14px 0; font-family:var(--disp); font-weight:500; font-size:24px; line-height:1.15; color:var(--oak); text-wrap:pretty }
.ins-icon{ display:block; width:64px; height:64px; border-radius:15px; box-shadow:0 10px 22px -12px rgba(10,43,31,.8) }
.ins-steps{ margin:0; padding:0; list-style:none; counter-reset:ins }
.ins-steps li{ position:relative; margin:0 0 14px; padding-left:42px; font-size:16px; line-height:1.45; color:var(--ink); text-wrap:pretty; counter-increment:ins }
.ins-steps li::before{ content:counter(ins); position:absolute; left:0; top:-2px; width:28px; height:28px; display:grid; place-items:center; font-weight:700; font-size:14px; color:#0A2B1F; background:linear-gradient(120deg,var(--gold-1),var(--gold-2)); border-radius:50% }
.ins-ic{ display:inline-grid; place-items:center; width:28px; height:28px; margin:0 2px; vertical-align:-8px; color:#0A6CFF; background:#fff; border:1px solid var(--line); border-radius:8px }
.ins-note{ margin:4px 0 0; padding:12px 14px; font-size:14.5px; line-height:1.45; color:var(--ink); background:#F1EBDD; border-radius:12px; text-wrap:pretty }
.ins-done{ display:block; width:100%; min-height:52px; margin-top:18px; font-family:var(--body); font-size:16px; font-weight:700; color:#FBF7EE; background:#0A2B1F; border:none; border-radius:14px; cursor:pointer }
.ins-done:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
@media (max-width:1000px){
  .oh-install{ width:100%; justify-content:center }
}
@media (prefers-reduced-motion: reduce){ .oh-install{ transition:none } }

/* ---------- What's new card ---------- */
.oh-news{ position:relative; display:flex; gap:16px; align-items:flex-start; margin:18px 0 0; padding:20px 52px 20px 20px; background:#FBF8F1; border:1px solid rgba(193,158,66,.55); border-radius:22px; box-shadow:0 18px 36px -26px rgba(10,43,31,.75) }
.oh-news img{ flex:none; width:52px; height:52px; border-radius:13px; box-shadow:0 8px 18px -10px rgba(10,43,31,.8) }
.oh-newstag{ display:inline-block; margin:0 0 6px; padding:3px 10px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#0A2B1F; background:linear-gradient(120deg,var(--gold-1),var(--gold-2)); border-radius:999px }
.oh-news h2{ margin:0; font-family:var(--disp); font-weight:500; font-size:22px; line-height:1.2; color:var(--oak); text-wrap:pretty }
.oh-news p:not(.oh-newstag){ margin:6px 0 0; font-size:15px; line-height:1.45; color:var(--ink); text-wrap:pretty }
.oh-newsacts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }
.oh-newsgo{ min-height:46px; padding:0 20px; font-family:var(--body); font-size:15px; font-weight:700; color:#FBF7EE; background:#0A2B1F; border:none; border-radius:13px; cursor:pointer }
.oh-newsno{ min-height:46px; padding:0 16px; font-family:var(--body); font-size:15px; font-weight:600; color:var(--oak); background:transparent; border:1px solid var(--line); border-radius:13px; cursor:pointer }
.oh-newsx{ position:absolute; top:10px; right:10px; width:36px; height:36px; font-size:22px; line-height:1; color:var(--oak); background:transparent; border:none; border-radius:50%; cursor:pointer }
.oh-newsx:hover, .oh-newsno:hover{ background:rgba(14,59,42,.06) }
.oh-newsgo:focus-visible, .oh-newsno:focus-visible, .oh-newsx:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.is-app .oh-news{ display:none }
@media (max-width:1000px){
  .oh-news{ padding:16px 46px 16px 16px; gap:12px }
  .oh-news img{ width:44px; height:44px }
  .oh-newsacts button{ flex:1 1 auto }
}

/* Home-screen app on iPhone: the page runs up behind the clock and battery
   (white text), so a dark green band fills in behind them once the page scrolls. */
.is-app body::before{ content:""; position:fixed; top:0; left:0; right:0; z-index:100; height:env(safe-area-inset-top,0px); background:#0A2B1F; pointer-events:none; opacity:0; transition:opacity .2s ease }
.is-app.is-scrolled body::before{ opacity:1 }
/* Home-screen app: the bottom tabs stand out from the page */
@media(max-width:1000px){
  .is-app .op-tabs{ background:rgba(255,253,248,.97); border-top-color:rgba(14,59,42,.16); border-radius:22px 22px 0 0; box-shadow:0 -12px 28px -14px rgba(10,43,31,.45) }
}
/* Refresh button: only in the home-screen app (no browser reload button there) */
.op-refresh{ display:none !important }
.is-app .op-refresh{ display:inline-flex !important; justify-content:center; padding:0; width:42px }
.op-refresh.spin svg{ animation:op-spin .7s linear infinite }
@keyframes op-spin{ to{ transform:rotate(360deg) } }
.ac-who{ margin:12px 0 14px }
.ac-who .ac-chip{ flex:1 1 0; min-height:46px; font-size:15.5px }
.ac-field select{ width:100%; height:48px; padding:0 13px; font-family:var(--body); font-size:16px; color:var(--ink); background:#fff; border:1px solid #A89E89; border-radius:12px; outline:none }
.ac-field select:focus{ border-color:#A9872F; box-shadow:0 0 0 3px rgba(193,158,66,.34) }
@media(min-width:1001px){ .ac-addrow:has(#acAddRole){ grid-template-columns:repeat(4,minmax(0,1fr)) } }
/* Users on phones: All, Active, Invited and Off on one row */
@media(max-width:1000px){ #acCustFilters{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px } #acCustFilters .ac-chip{ font-size:13.5px } }
/* ---- staff home (Masters and sales reps) ---- */
.op-desk{ display:none }
body.op-at-desk .op-desk{ display:block; max-width:1180px; margin:0 auto }
body.op-at-desk .op-home, body.op-at-desk .op-grid, body.op-at-desk .op-head{ display:none }
.is-staff .op-tab[data-tab="cats"]{ display:none }
.dk-hero .oh-actions{ margin-top:18px }
.dk-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; margin-top:22px; align-items:start }
.dk-side{ display:grid; gap:18px }
.dk-card{ padding:20px; background:#FFFDF8; border-radius:20px; box-shadow:0 0 0 1px var(--line), 0 16px 30px -24px rgba(10,43,31,.6) }
.dk-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px }
.dk-head h2{ margin:0; font-family:var(--disp); font-weight:500; font-size:22px; line-height:1.15; color:var(--oak); text-wrap:pretty }
.dk-list{ margin:0; padding:0; list-style:none }
.dk-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"num biz pill" "num meta pill"; gap:0 12px; align-items:center; padding:11px 0; border-top:1px solid var(--line) }
.dk-row:first-child{ border-top:none }
.dk-num{ grid-area:num; font-weight:700; color:#5E564C; font-variant-numeric:tabular-nums }
.dk-biz{ grid-area:biz; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dk-meta{ grid-area:meta; font-size:13.5px; color:#5E564C }
.dk-pill{ grid-area:pill; padding:4px 10px; font-size:12.5px; font-weight:700; border-radius:999px; color:#0A2B1F; background:linear-gradient(120deg,var(--gold-1),var(--gold-2)) }
.dk-pill.dk-picked{ color:#FBF7EE; background:#2E6B4F }
.dk-pill.dk-delivered{ color:#5E564C; background:#ECE6D8 }
.dk-sub{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line) }
.dk-sub h3{ display:flex; align-items:center; gap:8px; margin:0; font-size:16px; color:var(--oak) }
.dk-note{ margin:4px 0 10px; font-size:13.5px; color:#5E564C; text-wrap:pretty }
.dk-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none }
.dk-chips li{ padding:6px 12px; font-size:14px; font-weight:600; color:#6F1D2B; background:#F6E9E6; border-radius:999px }
.dk-ok{ margin:12px 0 0; padding:12px 14px; font-size:14.5px; color:#2E6B4F; background:#E8F1EA; border-radius:12px; text-wrap:pretty }
.dk-att{ margin:0; padding:0; list-style:none; display:grid; gap:8px }
.dk-att li{ padding:11px 13px; font-size:14.5px; line-height:1.45; color:var(--ink); background:#F6F1E5; border-radius:12px; text-wrap:pretty }
.dk-att li b{ display:block; font-size:12.5px; color:#5E564C; text-transform:uppercase; letter-spacing:.04em }
.dk-att li.dk-warn{ background:#F6E9E6 }
.dk-att li.dk-warn b{ color:#6F1D2B }
.dk-link{ padding:0; font:inherit; font-weight:600; color:var(--oak); background:none; border:none; text-decoration:underline; cursor:pointer }
.dk-quick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.dk-qbtn{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:92px; padding:14px; font-family:var(--body); text-align:left; color:var(--oak); background:#F6F1E5; border:1px solid var(--line); border-radius:16px; cursor:pointer }
.dk-qbtn b{ margin-top:6px; font-size:15.5px }
.dk-qbtn small{ font-size:12.5px; color:#5E564C }
.dk-qbtn:active{ transform:scale(.98) }
.dk-qbtn:focus-visible, .dk-link:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
@media(max-width:1000px){
  body.op-at-desk .op-desk{ max-width:none }
  .dk-grid{ grid-template-columns:minmax(0,1fr); gap:14px; margin-top:16px }
  .dk-side{ gap:14px }
  .dk-card{ padding:16px }
}
/* ---- Permissions screen ---- */
.ac-permhint{ margin:0 0 14px }
.ac-perms{ background:#FFFDF8; border-radius:18px; box-shadow:0 0 0 1px var(--line); overflow:hidden }
.ac-permrow{ display:grid; grid-template-columns:minmax(0,1fr) 92px 92px; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--line) }
.ac-permrow:first-child{ border-top:none }
.ac-permhead{ padding:10px 16px; background:#F1EBDD }
.ac-permhead b{ font-size:13px; text-align:center; color:var(--oak) }
.ac-permname{ font-size:15px; line-height:1.35; color:var(--ink); text-wrap:pretty }
.ac-permcell{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center }
.ac-permcell small, .ac-never{ font-size:11.5px; color:#5E564C }
.ac-permfixed{ background:#FAF6EC }
.ac-switch{ position:relative; width:50px; height:30px; padding:0; background:#D8D0BF; border:none; border-radius:999px; cursor:pointer; transition:background .18s ease }
.ac-switch .ac-knob{ position:absolute; top:3px; left:3px; width:24px; height:24px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease }
.ac-switch.on{ background:linear-gradient(120deg,var(--oak),var(--oak-glow)) }
.ac-switch.on .ac-knob{ transform:translateX(20px) }
.ac-switch:disabled{ opacity:.45; cursor:default }
.ac-switch:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
@media(max-width:520px){ .ac-permrow{ grid-template-columns:minmax(0,1fr) 64px 64px; padding:12px } .ac-permhead b{ font-size:12px } }
@media (prefers-reduced-motion: reduce){ .ac-switch, .ac-switch .ac-knob{ transition:none } }
/* ---- ordering for a customer ---- */
.op-viewas.op-orderfor{ color:#FBF7EE; background:linear-gradient(120deg,#0A2B1F,#14503A) }
.op-viewas.op-orderfor .op-viewstop{ color:#0A2B1F; background:var(--gold-1) }
.of-sheet{ z-index:60 }
.of-sheet .spanel{ padding:24px 20px 20px; background:#FBF8F1 }
.of-sheet h2{ margin:0 44px 14px 0; font-family:var(--disp); font-weight:500; font-size:24px; line-height:1.15; color:var(--oak) }
.of-find{ margin-bottom:12px }
.of-list{ display:grid; gap:6px; max-height:min(52vh,460px); overflow:auto; padding:2px }
.of-row{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; min-height:52px; padding:10px 14px; font-family:var(--body); text-align:left; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:14px; cursor:pointer }
.of-row b{ font-size:16px; color:var(--oak) }
.of-row span{ font-size:13.5px; color:#5E564C }
.of-row:active{ background:#F6F1E5 }
.of-row:focus-visible, .of-self:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.of-self{ display:block; width:100%; min-height:48px; margin-top:12px; font-family:var(--body); font-size:15px; font-weight:600; color:var(--oak); background:none; border:1px dashed rgba(14,59,42,.35); border-radius:14px; cursor:pointer }
.ac-noemail{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:14px; font-weight:500; color:#5E564C; cursor:pointer }
.ac-noemail input{ width:20px; height:20px; accent-color:var(--oak) }

/* Change customer: what's happening now, and a way to empty a mistaken order */
.of-now{ margin:0 0 14px; padding:12px 14px; font-size:14.5px; line-height:1.4; color:var(--ink); background:#F3EDDF; border-radius:14px; text-wrap:pretty }
.of-now p{ margin:0 0 6px }
.of-now .of-pickhint{ margin:6px 0 0; font-weight:600; color:var(--oak) }
.of-clear{ min-height:40px; margin:2px 0 4px; padding:0 14px; font-family:var(--body); font-size:14px; font-weight:700; color:#FBF7EE; background:#7A2E2E; border:0; border-radius:10px; cursor:pointer }
.of-clear:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px }
.of-row.is-now{ border-color:var(--gold-2); background:#FFFBF0 }
.of-row em{ margin-left:6px; padding:2px 8px; font-style:normal; font-size:12px; font-weight:700; color:#0A2B1F; background:var(--gold-1); border-radius:999px; vertical-align:2px }
a.of-home{ display:flex; align-items:center; justify-content:center; text-decoration:none; border-style:solid }