/* Option 3: visible shopping shortcuts with a complete-store menu. */
.shop-header{background:var(--body);color:var(--ink);border-bottom:1px solid var(--line)}
.shop-header-inner{max-width:1280px;margin-inline:auto;padding:17px clamp(20px,4vw,56px);display:grid;grid-template-columns:180px minmax(0,1fr) auto;align-items:center;gap:28px}
.shop-brand{display:flex;align-items:center;min-height:44px;grid-column:1;grid-row:1;text-decoration:none;flex:none}
.shop-brand .shop-logo{display:block;width:180px;height:auto;max-width:none;filter:var(--logo-filter)}
.shop-tools{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.shop-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:44px;min-width:44px;min-height:48px;padding:5px 0;border:0;border-radius:7px;background:transparent;color:var(--ink);font-family:inherit;font-size:9px;font-weight:600;line-height:1.15;cursor:pointer}
.shop-tool{text-decoration:none}
.shop-tool svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.shop-tool:hover,.shop-tool[aria-expanded="true"]{background:var(--soft)}
.shop-menu-line-top,.shop-menu-line-bottom{transform-origin:12px 12px;transition:transform 160ms ease}
.shop-menu-toggle[aria-expanded="true"] .shop-menu-line-top{transform:translateY(4px) rotate(45deg);transform-origin:12px 8px}
.shop-menu-toggle[aria-expanded="true"] .shop-menu-line-bottom{transform:translateY(-4px) rotate(-45deg);transform-origin:12px 16px}
.shop-shortcuts{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-width:0;max-width:525px;width:100%;justify-self:center}
.shop-shortcut{display:grid;grid-template-columns:21px minmax(0,1fr);align-items:center;gap:9px;min-width:0;min-height:62px;padding:12px 11px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);text-decoration:none}
.shop-shortcut:hover{border-color:var(--ink);background:var(--soft)}
.shop-shortcut-icon{display:block;line-height:0}
.shop-shortcut-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.shop-shortcut-copy{display:block;min-width:0}
.shop-shortcut-copy strong{display:block;font-size:12px;line-height:1.2;font-weight:750;letter-spacing:-.015em}
.shop-shortcut-copy>span{display:block;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.35;white-space:normal}
.shop-header a:focus-visible,.shop-header button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:root.theme-changing .shop-logo{transition:filter 360ms ease}
@media(min-width:901px) and (max-width:1120px){
  .shop-header-inner{gap:18px;padding-inline:25px}
  .shop-shortcuts{gap:7px}
  .shop-shortcut{grid-template-columns:18px minmax(0,1fr);gap:7px;padding-inline:10px}
  .shop-shortcut-icon svg{width:18px;height:18px}
  .shop-shortcut-copy strong{font-size:12px}
  .shop-shortcut-copy>span{font-size:9px}
  .shop-tools{gap:1px}
}
@media(max-width:900px){
  .shop-header-inner{grid-template-columns:minmax(0,1fr) auto;gap:15px 12px;padding:14px clamp(18px,4vw,30px) 15px}
  .shop-brand{grid-column:1;grid-row:1}
  .shop-brand .shop-logo{width:150px}
  .shop-tools{grid-column:2;grid-row:1;gap:1px}
  .shop-shortcuts{grid-column:1 / -1;grid-row:2;max-width:none;gap:8px}
  .shop-shortcut{grid-template-columns:minmax(0,1fr);grid-template-rows:20px auto;align-items:start;gap:7px;min-height:83px;padding:11px 10px 10px}
  .shop-shortcut-icon{grid-column:1;grid-row:1}
  .shop-shortcut-icon svg{width:19px;height:19px}
  .shop-shortcut-copy{grid-column:1 / -1;grid-row:2}
  .shop-shortcut-copy strong{font-size:13px}
  .shop-shortcut-copy>span{font-size:10px;line-height:1.35;margin-top:4px}
}
@media(max-width:380px){
  .shop-shortcuts{gap:7px}
  .shop-shortcut{padding-inline:8px}
  .shop-shortcut-copy strong{font-size:12px}
  .shop-shortcut-copy>span{font-size:9px}
  .shop-tools{gap:0}
}
@media(max-width:340px){
  .shop-header-inner{column-gap:2px;padding-inline:18px}
  .shop-shortcut{padding-inline:7px}
  .shop-shortcut-copy strong{font-size:11px}
  .shop-shortcut-copy>span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .shop-menu-line-top,.shop-menu-line-bottom,:root.theme-changing .shop-logo{transition:none}
}

/* Store navigation and search use the same calm, accessible panel. */
.shop-panel{
  position:fixed;inset:16px 16px auto auto;margin:0;
  width:min(460px,calc(100vw - 32px));max-width:none;
  max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);
  padding:0;border:1px solid var(--line);border-radius:16px;
  background:var(--body);color:var(--ink);overflow:hidden;
  box-shadow:0 18px 65px rgba(0,0,0,.22);
  font-family:inherit;
}
.shop-panel[open]{display:flex;flex-direction:column}
.shop-panel::backdrop{background:rgba(20,18,16,.5);backdrop-filter:blur(3px)}
.shop-panel-heading{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 19px 18px 25px;border-bottom:1px solid var(--line);flex:none;
}
.shop-panel-heading h2{font-size:25px;line-height:1.15;letter-spacing:-.035em;font-weight:800;font-stretch:normal;margin:0}
.shop-panel-close{
  display:grid;place-items:center;width:44px;min-width:44px;height:44px;
  margin:0;padding:0;border:1px solid transparent;border-radius:50%;
  background:transparent;color:var(--ink);font:inherit;font-size:27px;line-height:1;cursor:pointer;
}
.shop-panel-close:hover{background:var(--soft);border-color:var(--line)}
.shop-panel-close svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.shop-panel-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 25px max(25px,env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:var(--control-border) transparent}
.shop-menu-links,.shop-menu-links ul{display:grid;gap:0;list-style:none;padding:0;margin:0}
.shop-menu-links li{margin:0;padding:0;list-style:none}
.shop-menu-links a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:53px;padding:15px 1px;border-bottom:1px solid var(--line);
  color:var(--ink);font-size:15px;font-weight:650;line-height:1.4;text-decoration:none;
}
.shop-menu-links a:hover{color:var(--accent-ink)}
.shop-menu-links a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.shop-menu-links a small{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:400}
.shop-menu-secondary{display:grid;gap:0;margin-top:18px;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:9px}
.shop-menu-secondary a{display:flex;align-items:center;justify-content:space-between;gap:13px;min-height:44px;padding:9px 0;color:var(--ink);font-size:12px;font-weight:550;line-height:1.45;text-decoration:none}
.shop-menu-secondary a:hover{text-decoration:underline;text-underline-offset:4px}
.shop-menu-secondary a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.shop-settings{display:grid;gap:23px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.shop-settings section{margin:0;padding:0;min-width:0}
.shop-settings h3{margin:0 0 11px;color:var(--muted);font-size:10px;font-weight:750;line-height:1.4;letter-spacing:.09em;text-transform:uppercase}
.shop-appearance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.shop-appearance button{
  display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:44px;
  padding:10px 8px;border:1px solid var(--control-border);border-radius:7px;
  background:var(--body);color:var(--muted);font-family:inherit;font-size:11px;font-weight:550;line-height:1.35;cursor:pointer;
}
.shop-appearance button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.shop-appearance button:hover{border-color:var(--ink);color:var(--ink)}
.shop-appearance button[aria-pressed="true"]{border-color:var(--ink);background:var(--soft);color:var(--ink);font-weight:750;box-shadow:inset 0 0 0 .5px var(--ink)}
.shop-region{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:44px;padding:11px 13px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);color:var(--ink);font-size:12px;font-weight:550;line-height:1.45;text-decoration:none;
}
.shop-region:hover{border-color:var(--ink)}
.shop-settings p.shop-region{padding:0;min-height:0;border:0;border-radius:0;background:transparent}
.shop-region svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.shop-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px 9px;padding-top:17px}
.shop-search-form label{grid-column:1 / -1;display:block;font-size:13px;line-height:1.5;font-weight:650;color:var(--ink)}
.shop-search-form input[type="search"]{
  width:100%;min-width:0;min-height:48px;padding:12px 13px;
  border:1px solid var(--control-border);border-radius:7px;background:var(--panel);color:var(--ink);
  font:inherit;font-size:16px;line-height:1.4;appearance:none;
}
.shop-search-form input[type="search"]::placeholder{color:var(--muted);opacity:1;font-size:13px}
.shop-search-form button[type="submit"]{
  display:flex;align-items:center;justify-content:center;gap:7px;min-width:48px;min-height:48px;padding:12px 15px;
  border:1px solid var(--contrast);border-radius:7px;background:var(--contrast);color:var(--contrast-ink);
  font:inherit;font-size:12px;font-weight:700;line-height:1.35;cursor:pointer;
}
.shop-search-form button[type="submit"]:hover{background:var(--contrast-hover);border-color:var(--contrast-hover)}
.shop-search-form button[type="submit"] svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.shop-search-form input[type="search"],.shop-search-form button[type="submit"]{grid-column:1 / -1}
.shop-search-hint{margin:15px 0 0;font-size:12px;line-height:1.65;color:var(--muted)}
.shop-panel :is(a,button,input):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:600px){
  .shop-panel{inset:max(10px,env(safe-area-inset-top)) 10px auto 10px;width:calc(100vw - 20px);max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);border-radius:13px}
  .shop-panel-heading{padding:14px 13px 14px 19px}
  .shop-panel-heading h2{font-size:23px}
  .shop-panel-body{padding:6px 19px max(21px,env(safe-area-inset-bottom))}
  .shop-menu-links a{min-height:51px;font-size:14px}
  .shop-appearance{gap:6px}
  .shop-appearance button{gap:5px;padding-inline:6px;font-size:10px}
  .shop-search-form{gap:10px 7px}
  .shop-search-form button[type="submit"]{padding-inline:12px}
}
@supports(padding:max(0px)){
  .shop-header-inner{padding-left:max(clamp(18px,4vw,56px),env(safe-area-inset-left));padding-right:max(clamp(18px,4vw,56px),env(safe-area-inset-right))}
}

/* The complete-store menu opens as a drawer; search keeps its existing panel. */
#shop-menu{
  inset:0 0 0 auto;margin:0;
  width:min(440px,calc(100vw - 24px));max-width:none;
  height:100vh;height:100dvh;max-height:none;
  border:0;border-left:1px solid var(--line);border-radius:0;
  background:var(--body);overflow:hidden;
  box-shadow:-18px 0 54px rgba(0,0,0,.2);
  transform:translateX(calc(100% + 72px));
  transition:transform 340ms cubic-bezier(.22,1,.36,1),background-color 360ms ease,color 360ms ease,border-color 360ms ease,box-shadow 360ms ease;
}
#shop-menu[open].is-visible{transform:translateX(0)}
#shop-menu::backdrop{
  background:rgba(20,18,16,.45);opacity:0;
  transition:opacity 340ms cubic-bezier(.22,1,.36,1);
}
#shop-menu[open].is-visible::backdrop{opacity:1}
#shop-menu .shop-panel-heading{
  position:sticky;top:0;z-index:1;flex:none;background:var(--body);
  padding: max(18px,env(safe-area-inset-top)) max(19px,env(safe-area-inset-right)) 18px 25px;
}
#shop-menu .shop-panel-body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:8px max(25px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) 25px;
}
@media(max-width:600px){
  #shop-menu .shop-panel-heading{padding:max(14px,env(safe-area-inset-top)) max(13px,env(safe-area-inset-right)) 14px 19px}
  #shop-menu .shop-panel-body{padding:6px max(19px,env(safe-area-inset-right)) max(21px,env(safe-area-inset-bottom)) 19px}
}
@media(prefers-reduced-motion:reduce){
  #shop-menu,#shop-menu::backdrop{transition:none!important}
}