/* All rules are scoped to #benike-store so the theme and the store cannot
   fight each other. Do not remove the #benike-store prefix. */
#benike-store,#benike-store-overlays{
  --bk-red:#b5121b; --bk-red-dk:#8d0e15; --bk-ink:#1c1c1c; --bk-mut:#5f6368;
  --bk-line:#dcdcdc; --bk-bg:#f4f4f5; --bk-card:#fff; --bk-radius:10px;
  --bk-shadow:0 1px 3px rgba(0,0,0,.10),0 4px 14px rgba(0,0,0,.06);
  box-sizing:border-box; position:relative; color:var(--bk-ink);
  background:var(--bk-bg); font-size:16px; line-height:1.45;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
#benike-store *,#benike-store *::before,#benike-store *::after,
#benike-store-overlays,#benike-store-overlays *,#benike-store-overlays *::before,
#benike-store-overlays *::after{box-sizing:border-box}
#benike-store p,#benike-store h2,#benike-store h3,#benike-store h4,
#benike-store ul,#benike-store figure,
#benike-store-overlays p,#benike-store-overlays h3,#benike-store-overlays h4,
#benike-store-overlays ul,#benike-store-overlays figure{margin:0}
#benike-store ul,#benike-store-overlays ul{list-style:none;padding:0}
#benike-store button,#benike-store-overlays button{font:inherit;cursor:pointer}
/* MUST come after nothing and before everything: several elements below are
   display:flex / position:fixed, which would otherwise beat the browser's
   default [hidden] rule and leave an invisible overlay eating every click. */
#benike-store [hidden],#benike-store-overlays [hidden]{display:none!important}
#benike-store .bk-sr,#benike-store-overlays .bk-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
#benike-store :focus-visible{outline:3px solid #0b63c5;outline-offset:2px}

/* header */
#benike-store .bk-head{background:var(--bk-red);
  color:#fff;padding:12px 16px 14px}
#benike-store .bk-head-row{display:flex;align-items:center;gap:12px;justify-content:space-between}
#benike-store .bk-title{font-size:1.15rem;font-weight:700;letter-spacing:.2px;color:#fff}
/* margin-left:auto, not justify-content:space-between on the parent: when the
   title is hidden the button is the row's only child, and space-between would
   drop it to the left edge -- the button visibly jumping sideways on scroll. */
#benike-store .bk-cart-btn{display:inline-flex;align-items:center;gap:8px;flex:none;
  margin-left:auto;
  background:#fff;color:var(--bk-red);border:0;border-radius:999px;
  padding:9px 16px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.25)}
#benike-store .bk-cart-btn:hover{background:#ffeaea}
#benike-store .bk-badge{background:var(--bk-red);color:#fff;border-radius:999px;
  min-width:23px;padding:1px 7px;text-align:center;font-size:.85rem}
#benike-store .bk-search-wrap{position:relative;margin-top:11px}
#benike-store .bk-search{width:100%;padding:11px 40px 11px 14px;border:0;
  border-radius:8px;font-size:1rem;background:#fff;color:var(--bk-ink)}
#benike-store .bk-search::-webkit-search-cancel-button,
#benike-store .bk-search::-webkit-search-decoration{-webkit-appearance:none;display:none}
#benike-store .bk-search-clear{position:absolute;right:6px;top:50%;
  transform:translateY(-50%);background:none;border:0;font-size:1.5rem;
  line-height:1;color:var(--bk-mut);padding:0 8px}

/* set when the "gap under your menu bar" setting is 0: the store bar scrolls
   away with the page instead of pinning to the top. */
#benike-store .bk-sentinel{height:1px;margin-bottom:-1px}
#benike-store .bk-stickywrap{position:sticky;top:var(--bk-sticky-top,0px);z-index:30}
#benike-store.bk-nostick .bk-stickywrap{position:static}
/* A shadow once pinned, so the block reads as floating over the grid. */
#benike-store.bk-stuck .bk-cats{box-shadow:0 3px 8px rgba(0,0,0,.09)}

/* Collapse the title only on a narrow screen, where the bar plus the category
   chips really would eat the viewport. On a desktop there is room, so nothing
   moves at all when the block pins. */
@media (max-width:700px){
  #benike-store.bk-stuck .bk-title{display:none}
  #benike-store.bk-stuck .bk-head{padding-top:9px;padding-bottom:9px}
  #benike-store.bk-stuck .bk-search-wrap{margin-top:0}
}

/* categories */
#benike-store .bk-cats{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;
  background:#fff;border-bottom:1px solid var(--bk-line);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
#benike-store .bk-chip{flex:none;border:1px solid var(--bk-line);background:#fff;
  color:var(--bk-ink);border-radius:999px;padding:7px 15px;white-space:nowrap;
  font-size:.92rem}
#benike-store .bk-chip:hover{border-color:var(--bk-red);color:var(--bk-red)}
#benike-store .bk-chip[aria-pressed="true"]{background:var(--bk-red);
  border-color:var(--bk-red);color:#fff;font-weight:600}
#benike-store .bk-chip .bk-n{opacity:.65;font-size:.85em;margin-left:5px}

#benike-store .bk-count-line{padding:12px 16px 0;color:var(--bk-mut);font-size:.88rem}

/* grid */
#benike-store .bk-grid{display:grid;gap:16px;padding:14px 16px 32px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
#benike-store .bk-card{background:var(--bk-card);border-radius:var(--bk-radius);
  box-shadow:var(--bk-shadow);display:flex;flex-direction:column;overflow:hidden}
/* 3:4, because 51 of the 54 product photos are shot 3:4 portrait -- so they
   fill the tile edge to edge with nothing cropped at all. "cover" on the few
   odd ones trims the sides; the lightbox still shows the whole photo. */
#benike-store .bk-thumb{position:relative;width:100%;aspect-ratio:3/4;
  background:#f0f0f1;border:0;padding:0;display:block;overflow:hidden}
#benike-store .bk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Settings -> "Show the whole photo" falls back to letterboxing it. */
#benike-store.bk-fit-contain .bk-thumb{background:#fff}
#benike-store.bk-fit-contain .bk-thumb img{object-fit:contain}
#benike-store .bk-thumb:hover img{transform:scale(1.03)}
#benike-store .bk-thumb img{transition:transform .18s ease}
#benike-store .bk-noimg,#benike-store-overlays .bk-noimg{width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;background:#f0f0f1;
  color:var(--bk-mut);font-size:.78rem;letter-spacing:.3px}
#benike-store .bk-nomark,#benike-store-overlays .bk-nomark{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;background:var(--bk-red);color:#fff;
  font-weight:800;font-size:1.5rem;line-height:1}
#benike-store .bk-noimg-sm,#benike-store-overlays .bk-noimg-sm{width:56px;height:56px;border-radius:6px;
  border:1px solid var(--bk-line)}
#benike-store .bk-noimg-sm .bk-nomark,#benike-store-overlays .bk-noimg-sm .bk-nomark{width:30px;height:30px;font-size:1rem;border-radius:5px}
#benike-store .bk-body{padding:12px 13px 14px;display:flex;flex-direction:column;
  gap:9px;flex:1}
#benike-store .bk-name{font-weight:700;font-size:.98rem;line-height:1.3}
#benike-store .bk-meta{color:var(--bk-mut);font-size:.8rem;margin-top:-4px}
#benike-store .bk-price{font-weight:700;color:var(--bk-red);font-size:1rem}
#benike-store .bk-bucks{display:block;font-weight:600;color:var(--bk-mut);
  font-size:.78rem;letter-spacing:.1px;margin-top:1px}
#benike-store .bk-price.bk-tbd{color:var(--bk-mut);font-weight:600;font-size:.86rem;
  font-style:italic}
#benike-store .bk-pick{display:flex;gap:8px;align-items:flex-end;margin-top:auto}
#benike-store .bk-pick label{display:flex;flex-direction:column;gap:3px;
  font-size:.75rem;color:var(--bk-mut);text-transform:uppercase;
  letter-spacing:.4px;font-weight:600}
#benike-store .bk-pick select,#benike-store .bk-pick input{border:1px solid var(--bk-line);
  border-radius:7px;padding:8px;font-size:.95rem;background:#fff;color:var(--bk-ink);
  min-height:40px}
#benike-store .bk-pick .bk-size{flex:1;min-width:0}
#benike-store .bk-pick .bk-qty{width:66px;text-align:center}
#benike-store .bk-onesize{flex:1;font-size:.82rem;color:var(--bk-mut);padding-bottom:10px}
#benike-store .bk-add{width:100%;background:var(--bk-red);color:#fff;border:0;
  border-radius:8px;padding:11px;font-weight:700;font-size:.95rem}
#benike-store .bk-add:hover{background:var(--bk-red-dk)}
#benike-store .bk-add.bk-done{background:#177245}

#benike-store .bk-empty{padding:40px 16px;text-align:center;color:var(--bk-mut)}
#benike-store .bk-link{background:none;border:0;color:var(--bk-red);
  text-decoration:underline;padding:0 4px}
#benike-store .bk-noscript{padding:20px;background:#fff3cd;color:#664d03}

/* drawer */
#benike-store .bk-overlays,#benike-store-overlays{display:contents}
#benike-store .bk-scrim,#benike-store-overlays .bk-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998}
#benike-store .bk-drawer,#benike-store-overlays .bk-drawer{position:fixed;top:0;right:0;height:100%;width:min(430px,100%);
  background:#fff;z-index:9999;display:flex;flex-direction:column;
  box-shadow:-6px 0 26px rgba(0,0,0,.25)}
#benike-store .bk-drawer-head,#benike-store-overlays .bk-drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--bk-red);color:#fff;flex:none}
#benike-store .bk-drawer-head h3,#benike-store-overlays .bk-drawer-head h3{font-size:1.08rem;font-weight:700}
#benike-store .bk-x,#benike-store-overlays .bk-x{background:none;border:0;color:#fff;font-size:1.9rem;line-height:1;
  padding:0 6px}
#benike-store .bk-drawer-body,#benike-store-overlays .bk-drawer-body{overflow-y:auto;padding:16px;flex:1;
  -webkit-overflow-scrolling:touch}
#benike-store .bk-cart-empty,#benike-store-overlays .bk-cart-empty{color:var(--bk-mut);padding:12px 0 4px}
#benike-store .bk-line,#benike-store-overlays .bk-line{display:grid;grid-template-columns:56px 1fr auto;gap:11px;
  padding:11px 0;border-bottom:1px solid var(--bk-line);align-items:center}
#benike-store .bk-line img,#benike-store-overlays .bk-line img{width:56px;height:56px;object-fit:contain;background:#fff;
  border:1px solid var(--bk-line);border-radius:6px}
#benike-store .bk-line .bk-ln,#benike-store-overlays .bk-line .bk-ln{font-weight:600;font-size:.92rem;line-height:1.25}
#benike-store .bk-line .bk-ls,#benike-store-overlays .bk-line .bk-ls{color:var(--bk-mut);font-size:.8rem;margin-top:2px}
#benike-store .bk-line-right,#benike-store-overlays .bk-line-right{text-align:right;display:flex;flex-direction:column;
  gap:5px;align-items:flex-end}
#benike-store .bk-line-right input,#benike-store-overlays .bk-line-right input{width:58px;text-align:center;padding:5px;
  border:1px solid var(--bk-line);border-radius:6px;font-size:.9rem}
#benike-store .bk-rm,#benike-store-overlays .bk-rm{background:none;border:0;color:var(--bk-mut);font-size:.78rem;
  text-decoration:underline;padding:0}
#benike-store .bk-rm:hover,#benike-store-overlays .bk-rm:hover{color:var(--bk-red)}
#benike-store .bk-totals,#benike-store-overlays .bk-totals{padding:13px 0;font-size:.94rem;border-bottom:1px solid var(--bk-line)}
#benike-store .bk-totals div,#benike-store-overlays .bk-totals div{display:flex;justify-content:space-between;padding:3px 0}
#benike-store .bk-totals .bk-grand,#benike-store-overlays .bk-totals .bk-grand{font-weight:700;font-size:1.06rem;padding-top:7px}
#benike-store .bk-totals .bk-note,#benike-store-overlays .bk-totals .bk-note{color:var(--bk-mut);font-size:.8rem;display:block;
  padding-top:5px}
#benike-store .bk-checkout,#benike-store-overlays .bk-checkout{padding-top:18px}
#benike-store .bk-checkout h4,#benike-store-overlays .bk-checkout h4{font-size:1rem;font-weight:700;margin-bottom:11px}
#benike-store .bk-field,#benike-store-overlays .bk-field{display:block;margin-bottom:13px}
#benike-store .bk-field>span,#benike-store-overlays .bk-field>span{display:block;font-size:.82rem;font-weight:600;
  color:var(--bk-mut);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
#benike-store .bk-field b,#benike-store-overlays .bk-field b{color:var(--bk-red)}
#benike-store .bk-field input,#benike-store .bk-field textarea,#benike-store .bk-field select,#benike-store-overlays .bk-field input,#benike-store-overlays .bk-field textarea,#benike-store-overlays .bk-field select{width:100%;
  border:1px solid var(--bk-line);border-radius:7px;padding:10px;font:inherit;
  font-size:.97rem;background:#fff;color:var(--bk-ink)}
#benike-store .bk-field textarea,#benike-store-overlays .bk-field textarea{resize:vertical}
#benike-store .bk-field select,#benike-store-overlays .bk-field select{min-height:42px;background:#fff}
#benike-store .bk-field.bk-bad input,#benike-store .bk-field.bk-bad textarea,#benike-store .bk-field.bk-bad select,#benike-store-overlays .bk-field.bk-bad input,#benike-store-overlays .bk-field.bk-bad textarea,#benike-store-overlays .bk-field.bk-bad select{
  border-color:var(--bk-red);background:#fff6f6}
#benike-store .bk-err,#benike-store-overlays .bk-err{display:none;color:var(--bk-red);font-size:.8rem;
  font-style:normal;margin-top:4px}
#benike-store .bk-field.bk-bad .bk-err,#benike-store-overlays .bk-field.bk-bad .bk-err{display:block}
#benike-store .bk-submit,#benike-store-overlays .bk-submit{width:100%;background:var(--bk-red);color:#fff;border:0;
  border-radius:8px;padding:14px;font-weight:700;font-size:1.02rem}
#benike-store .bk-submit:hover,#benike-store-overlays .bk-submit:hover{background:var(--bk-red-dk)}
#benike-store .bk-submit[disabled],#benike-store-overlays .bk-submit[disabled]{opacity:.6;cursor:not-allowed}
#benike-store .bk-fineprint,#benike-store-overlays .bk-fineprint{color:var(--bk-mut);font-size:.8rem;margin-top:10px;
  padding-bottom:24px}
#benike-store .bk-hint,#benike-store-overlays .bk-hint{display:block;color:var(--bk-mut);font-size:.78rem;
  line-height:1.35;margin-top:5px}
#benike-store .bk-formwarn,#benike-store-overlays .bk-formwarn{background:#fff3cd;border:1px solid #ffe08a;color:#664d03;
  padding:10px;border-radius:7px;font-size:.85rem;margin-bottom:12px}

/* lightbox */
#benike-store .bk-lightbox,#benike-store-overlays .bk-lightbox{position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;
  padding:24px}
#benike-store .bk-lightbox img,#benike-store-overlays .bk-lightbox img{max-width:min(92vw,620px);max-height:78vh;
  background:#fff;border-radius:8px;display:block}
#benike-store .bk-lightbox figcaption,#benike-store-overlays .bk-lightbox figcaption{color:#fff;text-align:center;padding-top:12px;
  font-weight:600}
#benike-store .bk-lb-x,#benike-store-overlays .bk-lb-x{position:absolute;top:12px;right:16px;font-size:2.4rem}

/* toast */
#benike-store .bk-toast,#benike-store-overlays .bk-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:#177245;color:#fff;padding:12px 20px;border-radius:999px;z-index:10001;
  font-weight:600;font-size:.92rem;box-shadow:0 4px 16px rgba(0,0,0,.3);
  max-width:90vw;text-align:center}

@media (max-width:560px){
  /* 140px floor means two columns on any normal phone, and it drops to one
     by itself on something very narrow rather than crushing the controls. */
  #benike-store .bk-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:10px;padding:10px 10px 28px}
  #benike-store .bk-cart-label{display:none}
  #benike-store .bk-title{font-size:1rem}
  #benike-store .bk-body{padding:9px 9px 11px;gap:7px}
  #benike-store .bk-name{font-size:.88rem}
  #benike-store .bk-meta{font-size:.72rem}
  #benike-store .bk-price{font-size:.92rem}
  #benike-store .bk-pick{gap:6px}
  #benike-store .bk-pick label{font-size:.66rem;letter-spacing:.2px}
  #benike-store .bk-pick select,#benike-store .bk-pick input{padding:7px 4px;
    font-size:.9rem;min-height:38px}
  #benike-store .bk-pick .bk-qty{width:50px}
  #benike-store .bk-add{padding:10px 6px;font-size:.88rem}
  #benike-store .bk-cats{padding:10px 10px}
  #benike-store .bk-chip{padding:6px 12px;font-size:.86rem}
  #benike-store .bk-head{padding:10px 12px 12px}
  #benike-store .bk-count-line{padding:10px 12px 0}
  /* full-height order panel on a phone, and room for the on-screen keyboard */
  #benike-store .bk-drawer{width:100%}
  #benike-store .bk-drawer-body{padding:14px 14px 40px}
}
/* very narrow: one column, controls get their full width back */
@media (max-width:359px){
  #benike-store .bk-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  #benike-store *{transition:none!important;animation:none!important}
}
@media print{
  #benike-store .bk-head,#benike-store .bk-cats,#benike-store .bk-add,
  #benike-store .bk-pick{display:none!important}
}
/* hides the real Formidable form. Offscreen (not display:none) so Formidable's
   own anti-spam scripts still run normally. */
#benike-order-form{position:absolute!important;left:-9999px!important;top:0;
  width:1px;height:1px;overflow:hidden}
#benike-order-form.bk-reveal{position:static!important;left:auto!important;
  width:auto;height:auto;overflow:visible}

/* ---------- stock ------------------------------------------------------
   Availability markers. Everything here is additive: with no stock file the
   classes are never emitted and the store looks exactly as it did.          */

.bk-oos,
.bk-oos-badge {
  color: #c43e1c;
  font-weight: 600;
}

.bk-oos-badge {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 2px 8px;
  border: 1px solid #f0c3b8;
  border-radius: 999px;
  background: #fdece8;
  font-size: 12px;
  letter-spacing: .02em;
}

.bk-left {
  color: #b26b00;
  font-weight: 600;
}

/* Out-of-stock cards stay in the grid on purpose — hiding them loses the
   demand signal and people ask where things went — but they step back. */
.bk-card-oos .bk-thumb img { opacity: .55; }
.bk-card-oos .bk-name      { color: #6e6e6e; }

.bk-card-oos .bk-add[disabled] {
  background: #e7e9ec;
  border-color: #d3d7dd;
  color: #7a7f87;
  cursor: not-allowed;
}

.bk-size select option:disabled { color: #a0a4ab; }

/* ---------- online vs in store ----------------------------------------
   Two tap targets, sized for a thumb, because this gets used on a phone at
   the counter.                                                           */

.bk-ordertype > span {
  display: block;
  margin-bottom: 6px;
}

.bk-ot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bk-ot {
  display: block;
  padding: 10px 12px;
  border: 2px solid #d3d7dd;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.bk-ot strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.bk-ot em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  color: #6e6e6e;
}

.bk-ot:hover { border-color: #9aa1ab; }

.bk-ot.is-on {
  border-color: #203660;
  background: #eef3fb;
}

.bk-ot.is-on em { color: #203660; }

@media (max-width: 380px) {
  .bk-ot-row { grid-template-columns: 1fr; }
}