/* BizMoro store top bar, menu, basket and footer: on every store page (home, product, checkout, tracking).
   Colours are CSS variables from storethemes/palette.theme() for light and dark (html[data-mode]).
   Every text colour has been checked against its background (tests/test_store_looks.py). */

:root{--r:14px;--r-s:10px;--r-btn:12px;--w:1240px;--gap:clamp(16px,2.4vw,28px);--shadow:0 1px 2px rgb(0 0 0/.05),0 8px 24px rgb(0 0 0/.06);
  /* names the older shared files use */
  --dark:var(--foot);--light:var(--bg);--soft:var(--well);--paper:var(--surface);--cta:var(--btn);--on-cta:var(--on-btn);
  --brand-ink:var(--link);--on-brand:var(--on-btn);--corn:var(--accent);--corn-soft:var(--badge);--chrome:var(--well)}
:root[data-mode="dark"]{--shadow:0 1px 2px rgb(0 0 0/.4),0 10px 30px rgb(0 0 0/.35)}

/* Personality per business type */
.g-build,.g-materials,.g-logistics{--r:6px;--r-s:4px;--r-btn:6px}
.g-fashion{--r:2px;--r-s:2px;--r-btn:0px}
.g-cakes,.g-beauty{--r:20px;--r-s:14px;--r-btn:999px}
.g-grocery,.g-farm{--r:16px;--r-s:12px;--r-btn:12px}
.g-gadgets{--r:12px;--r-s:10px;--r-btn:10px}
.g-home,.g-services{--r:12px;--r-s:8px;--r-btn:999px}
.g-food{--r:16px;--r-s:12px;--r-btn:999px}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body.kit{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
.tb,.nv,.ft{font-family:var(--body);line-height:1.5}
:where(.tb,.nv,.ft) a{color:inherit;text-decoration:none}
:where(.tb,.nv) button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.tb p,.ft p{margin:0}
.ft h4{margin:0}
.kit .i{width:1.15em;height:1.15em;flex:none}
.kw{width:100%;max-width:var(--w);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.kw-in{padding-left:0;padding-right:0}
.tb a:focus-visible,.nv a:focus-visible,.ft a:focus-visible,.tb button:focus-visible,.nv input:focus-visible{outline:3px solid var(--link);outline-offset:2px}

/* Buttons */
.kb,.kb-o,.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-btn);font:700 15px/1 var(--body);white-space:nowrap;transition:transform .12s,filter .12s}
.kb,.k-btn,.k-req button{background:var(--btn);color:var(--on-btn)!important}
.kb:hover,.k-btn:hover{filter:brightness(1.08)}
.kb:active{transform:translateY(1px)}
.kb-o{border:1.5px solid currentColor;color:inherit}
.kb-o:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.kb-s{min-height:40px;padding:0 16px;font-size:14px}

/* ---------------------------------------------------------------- top bar */
.tb{background:var(--top);color:var(--top-ink);font:500 13.5px/1.3 var(--body)}
.tb-in{display:flex;align-items:center;gap:18px;min-height:42px}
.tb a,.tb button{color:var(--top-ink)}
.tb-track{display:inline-flex;align-items:center;gap:7px;font-weight:700;white-space:nowrap;padding:6px 0}
.tb-track:hover span{text-decoration:underline;text-underline-offset:3px}
.tb-promo{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;overflow:hidden}
.tb-promo>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-promo b{color:var(--top-accent)}
.tb-promo .i{color:var(--top-accent)}
.tb-more{flex:none;font-size:12px;opacity:.85}
.tb-r{display:flex;align-items:center;gap:14px}
.tb-wa{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tb-mode{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--top-ink) 35%,transparent)!important;border-radius:999px;font-weight:600;font-size:12.5px}
.tb-mode:hover{background:color-mix(in srgb,var(--top-ink) 12%,transparent)}
:root[data-mode="light"] .m-sun,:root[data-mode="light"] .m-d,:root[data-mode="dark"] .m-moon,:root[data-mode="dark"] .m-l{display:none}

/* ---------------------------------------------------------------- navbar */
.nv{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nv-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;min-height:74px}
.nv-row{border-top:1px solid var(--line)}
.nv-brand{display:flex;align-items:center;gap:12px;min-width:0;justify-self:start}
.nv-name{display:flex;flex-direction:column;min-width:0}
.nv-name b{font:700 21px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-name small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.nv-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 6px;min-height:50px;font:600 15px/1 var(--body)}
.nv-links a{padding:10px 12px;border-radius:999px;white-space:nowrap;color:var(--ink);position:relative}
.nv-links a:hover{background:var(--well)}
.nv-links a[aria-current="page"]{color:var(--link)}
.nv-links a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:currentColor}
.nv-r{display:flex;align-items:center;justify-content:flex-end;gap:10px;justify-self:end}
.nv-search{display:flex;align-items:center;align-self:center;gap:8px;height:42px;width:clamp(200px,22vw,280px);box-sizing:border-box;flex-shrink:1;min-width:0;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--muted);transition:width .2s,border-color .2s}
.nv-search:focus-within{border-color:var(--link);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 16%,transparent)}
.nv-search input:focus,.nv-search input:focus-visible,.nv input[type=search]:focus-visible{outline:0!important;box-shadow:none!important}
.nv-search input{border:0;background:transparent;font:500 14px var(--body);color:var(--ink);outline:0;width:100%;min-width:0;padding:0}
.nv-search input::placeholder{color:var(--muted);opacity:1}
.nv-search-m{display:none}
.kit .kx-burger{color:var(--ink)}

/* The basket: count, total and "View basket" in one button */
.basket{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 14px 0 6px;border-radius:var(--r-btn);background:var(--btn);color:var(--on-btn)!important;white-space:nowrap;box-shadow:0 6px 16px color-mix(in srgb,var(--btn) 28%,transparent)}
.g-fashion .basket,.g-build .basket,.g-materials .basket,.g-logistics .basket{border-radius:var(--r-s)}
.basket:hover{filter:brightness(1.07)}
.bk-n{display:grid;place-items:center;min-width:36px;height:36px;padding:0 6px;border-radius:999px;background:var(--on-btn);color:var(--btn);font:800 14px/1 var(--body)}
.g-fashion .bk-n,.g-build .bk-n,.g-materials .bk-n,.g-logistics .bk-n{border-radius:var(--r-s)}
.bk-t{display:flex;flex-direction:column;line-height:1.1}
.bk-t b{font:800 15px/1.1 var(--body)}
.bk-t small{font-size:11.5px;opacity:.92}
.basket .i{width:22px;height:22px}

/* ---------------------------------------------------------------- footer */
.ft{margin-top:clamp(56px,7vw,96px);background:var(--foot);color:var(--foot-ink);font-size:15px}
.ft a{color:var(--foot-ink)}
.ft a:hover{color:var(--foot-accent);text-decoration:underline;text-underline-offset:3px}
.ft-cta{border-bottom:1px solid var(--foot-line)}
.ft-cta-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;padding-bottom:28px;flex-wrap:wrap}
.ft-cta b{display:block;font:700 22px/1.2 var(--display)}
.ft-cta span{color:var(--foot-muted)}
.ft-cta .kb{color:var(--on-btn)}
.ft-cta .kb:hover{color:var(--on-btn);text-decoration:none}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px;padding-top:48px;padding-bottom:36px}
.ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ft-logo b{font:700 21px/1.1 var(--display)}
.ft-brand p{color:var(--foot-muted);font-size:14.5px;margin-top:6px;max-width:34ch}
.ft h4{font:700 12.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--foot-accent);margin-bottom:16px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft ul a,.ft ul span{color:var(--foot-muted)}
.ft ul a:hover{color:var(--foot-accent)}
.ft-contact li{display:flex;gap:9px;align-items:flex-start}
.ft-contact .i,.ft-contact .lk-ico{color:var(--foot-accent);margin-top:3px}
.ft-social{display:flex;gap:8px;margin-top:16px}
.ft-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--foot-line)}
.ft-social .lk-ico{margin:0}
.ft-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:18px;padding-bottom:18px;border-top:1px solid var(--foot-line);color:var(--foot-muted);font-size:13.5px}
.ft-pay em{font-style:normal;font-weight:600;color:var(--foot-ink);border:1px solid var(--foot-line);border-radius:6px;padding:4px 10px}
.ft-prot{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.ft-bottom{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;padding-top:18px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--foot-line);color:var(--foot-muted);font-size:13.5px}
.ft-bottom a{color:var(--foot-muted);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- shared pieces, in the design's colours */
.kit .k-preview{background:var(--ink);color:var(--bg)}
.kit .k-preview a{color:var(--bg)}
.kit .k-cartbar{background:var(--ink);color:var(--bg);font-family:var(--body)}
.kit .k-cartbar a{background:var(--btn);color:var(--on-btn)}
.kit .k-toast{background:var(--ink);color:var(--bg)}
.kit .kx-panel{background:var(--surface);color:var(--ink)}
.kit .kx-panel .kx-plinks a{color:var(--ink)!important;border-color:var(--line)}
.kit .kx-panel .kx-plinks a[aria-current="page"]{color:var(--link)!important}
.kit .kx-plinks a small{color:var(--muted)}
.kit .kx-x{background:var(--surface);border-color:var(--line);color:var(--ink)}
.kit .kx-psearch{border-color:var(--line)}
.kit .kx-psearch button{background:var(--btn);color:var(--on-btn)}
.kit .kx-pfoot .kx-pbtn{background:var(--btn);color:var(--on-btn)}
.kit .kcn-btn{background:var(--btn)!important;color:var(--on-btn)!important}
.kit .kcn-head,.kit .kcn-form button,.kit .kcn-log p.me{background:var(--btn)!important;color:var(--on-btn)!important}
.k-results{background:var(--surface);color:var(--ink);border-color:var(--line)}
.k-results a{border-bottom-color:var(--line)}
.k-results a:hover,.k-results a.on{background:var(--well)}
.k-results small,.k-results .none,.k-results .pr s{color:var(--muted)}
.k-results .all{color:var(--link)}
.vwrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vwrap iframe,.vwrap video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vwrap .vlink{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;color:#fff;font-weight:700;background:var(--foot)}

/* phones */
@media (max-width:1100px){
  .ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-brand{grid-column:1/-1}
}
@media (max-width:980px){
  .nv-in{min-height:64px}
  .nv-row{display:none}
  .kit .kx-burger{display:flex}
  .nv-r .nv-search{display:none}
  .nv .nv-search-m,.nv-search-m{display:flex;box-sizing:border-box;width:calc(100% - 32px);margin:0 16px 10px;max-width:none;padding-inline:12px}
  .nv-search-m:focus-within{width:calc(100% - 32px)}
}
@media (max-width:760px){
  .tb-wa{display:none}
  .tb-in{gap:10px;min-height:38px;font-size:12.5px}
  .tb-promo{justify-content:flex-start}
  .tb-mode .m-l,.tb-mode .m-d{display:none}
  .nv-name small{display:none}
  .nv-name b{font-size:18px}
  .basket{height:44px;padding:0 10px 0 5px;gap:8px}
  .bk-t small{display:none}
  .bk-n{min-width:32px;height:32px}
  .basket>.i{display:none}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-top:36px}
  .ft-prot{margin-left:0}
}
.tb-ann{padding-left:14px;margin-left:6px;border-left:1px solid color-mix(in srgb,var(--top-ink) 35%,transparent)}
@media (max-width:1100px){.tb-ann{display:none}}
[data-mode-toggle], .tb-mode { display: none !important; }