/* ==========================================================================
   store.css — Material Design 3–inspired surfaces for the Store page ONLY.
   Reuses the site's existing color tokens (--orange/--blue/--gray/--beige)
   and fonts; does not touch shared components.css so every other page is
   unaffected. MD3 ideas borrowed here: tonal surfaces, pill-shaped segmented
   controls, elevation on hover/press, and a consistent 12/16/28px shape
   scale rather than the site's usual --radius-* tokens (kept local to avoid
   any visual drift on other pages that use --radius-*).
   ========================================================================== */

.store-head{
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.store-badge{
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
  padding: .3em .7em; border-radius: 999px;
  background: rgba(var(--blue-rgb), .22);
  color: var(--beige);
  border: 1px solid rgba(var(--blue-rgb), .4);
}
.store-badge--sm{ font-size: .58rem; padding: .18em .55em; vertical-align: middle; }

.store-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.store-segmented{
  display: inline-flex; padding: 4px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.store-segmented button{
  border: none; background: transparent; color: var(--text-2);
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  padding: .5em 1.1em; border-radius: 999px; display: inline-flex; align-items: center; gap: .4em;
  transition: background .18s ease, color .18s ease;
}
.store-segmented button.is-active{ background: var(--accent); color: #16100a; }
.store-segmented button:not(.is-active):hover{ color: var(--text-0); }

/* ---- Card view (MD3 "filled" tonal card) ---- */
.store-grid{
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.store-card{
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border-radius: 28px; /* MD3 large shape */
  overflow: hidden;
  border: 1px solid var(--line);
  transition: box-shadow .2s ease, transform .2s ease;
  text-decoration: none;
}
.store-card:hover{ box-shadow: 0 10px 28px -12px rgba(0,0,0,.45); transform: translateY(-3px); }
.store-card--disabled{ opacity: .65; pointer-events: none; }
.store-card__media{ aspect-ratio: 4/3; background: var(--bg-1); overflow: hidden; }
.store-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.store-card__body{ padding: var(--sp-3); display: flex; flex-direction: column; gap: .4em; flex: 1; }
.store-card__category{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
}
.store-card__name{ font-family: var(--font-display); font-size: 1.05rem; color: var(--text-0); margin: 0; }
.store-card__desc{ font-family: var(--font-display); font-size: .85rem; color: var(--text-1); line-height: 1.5; flex: 1; }
.store-card__footer{ display: flex; align-items: center; justify-content: space-between; margin-top: .4em; }
.store-card__cta{ font-family: var(--font-display); font-size: .78rem; color: var(--accent); font-weight: 600; }
.store-price{ font-family: var(--font-mono); font-size: 1rem; color: var(--text-0); font-weight: 700; }
.store-price--tbd{ color: var(--text-2); font-size: .78rem; font-weight: 500; }

/* ---- List view (MD3 "list item" surface) ---- */
.store-list{ display: flex; flex-direction: column; gap: var(--sp-2); }
.store-row{
  display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-3); align-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  padding: var(--sp-2); text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.store-row:hover{ box-shadow: 0 8px 22px -12px rgba(0,0,0,.4); transform: translateY(-2px); }
.store-row--disabled{ opacity: .65; pointer-events: none; }
.store-row__media{ width: 96px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--bg-1); }
.store-row__media img{ width: 100%; height: 100%; object-fit: cover; }
.store-row__main{ display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.store-row__end{ display: flex; flex-direction: column; align-items: flex-end; gap: .3em; }

@media (max-width: 640px){
  .store-row{ grid-template-columns: 72px 1fr; }
  .store-row__end{ grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: .3em; }
}

/* ==========================================================================
   v1.4.0 — Store shell, header, side menu, search/filter/sort, cart, order form
   All scoped to the Store pages only; reuses existing tokens, no new colors.
   ========================================================================== */

/* ---- Store shell layout (header + sidebar + main) ---- */
.store-shell{
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-med) var(--ease-orbit);
}
.store-shell__header{ grid-column: 1 / -1; }
.store-shell__sidebar{ grid-column: 1; grid-row: 2; }
.store-shell__main{ grid-column: 2; grid-row: 2; min-width: 0; }

/* Desktop: burger collapses/expands the sidebar column (v1.4.2) */
.store-shell.has-sidebar-collapsed{ grid-template-columns: 0 1fr; }
.store-side.is-collapsed{ display: none; }

@media (max-width: 980px){
  .store-shell{ grid-template-columns: 1fr; }
  .store-shell__sidebar{ grid-column: 1; grid-row: auto; }
  .store-shell__main{ grid-column: 1; grid-row: auto; }
  /* On mobile the sidebar is a slide-in panel — never hidden via collapse */
  .store-shell.has-sidebar-collapsed{ grid-template-columns: 1fr; }
  .store-side.is-collapsed{ display: block; }
}

/* ---- Store header (commerce-focused, distinct from main site nav) ---- */
.store-header{
  position: sticky; top: 0; z-index: 900;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.store-header__inner{
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  height: 64px; gap: var(--sp-2);
}
/* Left section: departments burger (far left) */
.store-header__left{ display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
/* Center section: brand */
.store-header__center{ display: flex; align-items: center; justify-content: center; min-width: 0; }
.store-header__brand{
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
}
.store-header__logo{ width: 30px; height: 30px; flex-shrink: 0; }
.store-header__logo img{ width: 100%; height: 100%; object-fit: contain; }
.store-header__wordmark{
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--text-0); white-space: nowrap;
}
.store-header__wordmark .store-header__x{ color: var(--accent); margin: 0 .15em; }
.store-header__wordmark .store-header__store{ color: var(--accent-2); }
/* Right section: cart (far right). The theme + language toggles live in their own
   .store-header__toggles element (right after the brand), grouped and centered on
   mobile for better proportions. */
.store-header__actions{ display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; flex-wrap: nowrap; }
.store-header__toggles{ display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.store-header__btn{
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em .9em; border-radius: 999px;
  font-family: var(--font-display); font-size: .76rem; font-weight: 600;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--text-1); text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.store-header__btn:hover{ border-color: var(--accent); color: var(--accent); }
.store-header__btn--solid{ background: var(--accent); color: #16100a; border-color: transparent; }
.store-header__btn--solid:hover{ color: #16100a; opacity: .9; }
.store-header__cart-btn{
  position: relative;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em .9em; border-radius: 999px;
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--text-0); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.store-header__cart-btn:hover{ border-color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.store-header__cart-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 .35em;
  border-radius: 999px; background: var(--accent); color: #16100a;
  font-size: .68rem; font-weight: 700; font-family: var(--font-mono);
}
.store-header__burger{
  display: flex; width: 38px; height: 38px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: transparent; position: relative; cursor: pointer;
  flex-shrink: 0; align-items: center; justify-content: center;
}
.store-header__burger span{
  position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--text-0);
  transition: transform var(--dur-fast) var(--ease-orbit), opacity var(--dur-fast);
}
.store-header__burger span:nth-child(1){ top: 13px; }
.store-header__burger span:nth-child(2){ top: 18px; }
.store-header__burger span:nth-child(3){ top: 23px; }

/* ---- Theme toggle (matches landing page nav style) ----
   Base styles live in nav-footer.css on the main site, but store pages
   don't load that file — so the same pill toggle is defined here. */
.theme-toggle{
  position: relative;
  width: 50px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  flex-shrink: 0;
}
.theme-toggle__thumb{
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-orbit);
  font-size: 11px;
}
[data-theme="light"] .theme-toggle__thumb{ transform: translateX(20px); }

/* ---- Language toggle + theme toggle (`.store-header__toggles`, centered on mobile) ----
   Matches the landing page nav toggle. Options are language names and are
   intentionally NOT translated. */
.lang-toggle{
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-2);
  padding: 2px;
  flex-shrink: 0;
}
.lang-toggle .os-lang-btn{
  border: none; background: transparent;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  padding: .45em .7em;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
[data-lang="ar"] .lang-toggle .os-lang-btn{ font-family: "Tahoma Arabic","Segoe UI",Tahoma,sans-serif; }
.lang-toggle .os-lang-btn:hover{ color: var(--text-0); }
.lang-toggle .os-lang-btn.is-active{ background: var(--accent); color: #16100a; }


/* Mobile: keep essential buttons visible, hide secondary text buttons */
@media (max-width: 980px){
  /* Bug fix: on tablet/phone the single-row header squeezed the brand
     (logo + "O Solutions × Store") into a tiny 1fr gap while the theme /
     language / cart controls took most of the width, so the wordmark
     overflowed its column and overlapped the controls on the right.
     The brand now sits centered on its own second row; the top row keeps
     the departments burger (left), the centered theme+language toggles (in `.store-header__toggles`), and the cart (right). */
  .store-header__inner{
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "left toggles actions"
      "brand brand brand";
    height: auto;
    padding: .55rem 0;
    column-gap: .6rem;
    row-gap: .35rem;
  }
  .store-header__left{ grid-area: left; }
  .store-header__center{ grid-area: brand; }
  .store-header__toggles{ grid-area: toggles; justify-content: center; }
  .store-header__actions{ grid-area: actions; }
  .store-header__wordmark{ font-size: .82rem; }
  .store-header__logo{ width: 24px; height: 24px; }
  .store-header__btn{ font-size: .68rem; padding: .4em .6em; }
  .store-header__cart-btn{ font-size: .72rem; padding: .4em .7em; }
  .store-header__cart-btn svg{ width: 14px; height: 14px; }
  .store-header__actions{ gap: .3rem; }
}
@media (max-width: 640px){
  .store-header__inner{ column-gap: .4rem; row-gap: .3rem; }
  .store-header__wordmark{ font-size: .72rem; }
  .store-header__logo{ width: 20px; height: 20px; }
  /* Hide secondary text buttons on small screens to declutter the header */
  .store-header__btn--hide-sm{ display: none; }
  .store-header__cart-btn{ font-size: .65rem; padding: .35em .55em; }
  .store-header__cart-btn svg{ width: 12px; height: 12px; }
  .store-header__burger{ width: 34px; height: 34px; }
  .store-header__burger span{ left: 7px; right: 7px; }
  .store-header__burger span:nth-child(1){ top: 11px; }
  .store-header__burger span:nth-child(2){ top: 16px; }
  .store-header__burger span:nth-child(3){ top: 21px; }
  .theme-toggle{ width: 42px; height: 26px; }
  .theme-toggle__thumb{ width: 18px; height: 18px; }
  [data-theme="light"] .theme-toggle__thumb{ transform: translateX(16px); }
}
/* Very small screens: icon-only cart, tighter brand */
@media (max-width: 420px){
  .store-header__cart-btn{ font-size: 0; padding: .4em .5em; }
  .store-header__cart-btn svg{ width: 16px; height: 16px; margin: 0; }
  .store-header__wordmark{ font-size: .66rem; }
  .store-header__logo{ width: 18px; height: 18px; }
  .store-header__brand{ gap: .4rem; }
  .store-header__actions{ gap: .2rem; }
}

/* ---- Store hero (replaces old promo section, ~90% transparent) ---- */
.store-hero{
  position: relative;
  padding: var(--sp-3) var(--sp-3);
  text-align: center;
  background: rgba(var(--accent-rgb), .03);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.store-hero__bg{
  position: absolute; inset: 0; z-index: -1;
  background: var(--orbit-gradient-soft);
  opacity: .1; /* ~90% transparent */
}
.store-hero__logo{
  width: 75px; height: 75px; margin: 0 auto var(--sp-2);
}
.store-hero__logo img{ width: 100%; height: 100%; object-fit: contain; }
.store-hero__badge{
  display: inline-flex; align-items: center;
  font-family: var(--VT323); font-size: .85rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  padding: .4em 1em; border-radius: 999px;
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .35);
  margin-bottom: var(--sp-2);
}
.store-hero__beta{
  display: inline-flex; align-items: center;
  font-family: var(--VT323); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  padding: .4em 1em; border-radius: 999px;
  background: rgba(var(--blue), .15);
  color: var(--gray);
  border: 1px solid rgba(var(--blue-rgb), .35);
  margin-bottom: var(--sp-2);
}
.store-hero__title{
  font-family: var(--font-display); font-size: var(--fs-xl);
  color: var(--text-0); line-height: 1.1; max-width: 20ch; margin: 0 auto;
}
.store-hero__lede{
  font-family: var(--font-display); font-size: var(--fs-sm);
  color: var(--text-2); max-width: 50ch; margin: var(--sp-2) auto 0;
}

/* ---- Side menu (collapsible departments + sections + checkboxes) ---- */
.store-side{
  position: sticky; top: 64px;
  max-height: calc(100vh - 64px); overflow-y: auto;
  padding: var(--sp-3);
  border-right: 1px solid var(--line);
  background: var(--bg-1);
}
.store-side__title{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2);
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
}
.store-dept{ margin-bottom: var(--sp-1); }
.store-dept__head{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: .6em .4em; background: none; border: none;
  font-family: var(--font-display); font-size: .88rem; font-weight: 600;
  color: var(--text-0); cursor: pointer; text-align: left;
}
.store-dept__head:hover{ color: var(--accent); }
.store-dept__chevron{
  flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-orbit);
  color: var(--text-2);
}
.store-dept.is-open .store-dept__chevron{ transform: rotate(90deg); }
.store-dept__sections{
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-orbit);
  padding-left: .8em;
}
.store-dept.is-open .store-dept__sections{ max-height: 500px; }
.store-section{
  display: flex; align-items: center; gap: .5em;
  padding: .4em .4em; cursor: pointer;
  font-family: var(--font-display); font-size: .82rem; color: var(--text-1);
  border-radius: 8px; transition: background var(--dur-fast);
}
.store-section:hover{ background: var(--bg-2); }
.store-section input[type="checkbox"]{
  width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.store-side__clear{
  display: block; width: 100%; margin-top: var(--sp-2);
  padding: .5em; border: 1px solid var(--line-strong); border-radius: 8px;
  background: transparent; color: var(--text-2);
  font-family: var(--font-display); font-size: .78rem; cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.store-side__clear:hover{ border-color: var(--accent); color: var(--accent); }

/* Mobile: side menu becomes a slide-in panel */
.store-side__backdrop{
  display: none; position: fixed; inset: 0; z-index: 850;
  background: rgba(0,0,0,.5);
}
.store-side__backdrop.is-open{ display: block; }
@media (max-width: 980px){
  .store-side{
    position: fixed; top: 64px; left: 0; bottom: 0; z-index: 860;
    width: 280px; max-height: none;
    /* Use dvh (dynamic viewport height) so the panel fits the visible
       mobile viewport — 100vh on mobile includes the browser chrome,
       which pushed the bottom of the panel off-screen and unreachable.
       The fallback (100vh) must come FIRST so modern browsers override
       it with the dvh value. */
    height: calc(100vh - 64px); /* fallback for browsers without dvh */
    height: calc(100dvh - 64px); /* modern browsers use dynamic viewport height */
    transform: translateX(-100%); transition: transform var(--dur-med) var(--ease-orbit);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Ensure the "Clear filters" button is reachable on notched devices */
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
  .store-side.is-open{ transform: translateX(0); }
}

/* ---- Search / filter / sort toolbar ---- */
.store-controls{
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.store-search{
  position: relative; flex: 1; min-width: 200px;
}
.store-search input{
  width: 100%; padding: .7em 1em .7em 2.6em;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--text-0); font-family: var(--font-display); font-size: .88rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.store-search input:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); outline: none;
}
.store-search input::placeholder{ color: var(--text-2); }
.store-search__icon{
  position: absolute; left: 1em; top: 50%; transform: translateY(-50%);
  color: var(--text-2); pointer-events: none;
}
.store-sort{
  padding: .6em 1em; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  color: var(--text-0); font-family: var(--font-display); font-size: .82rem;
  cursor: pointer; transition: border-color var(--dur-fast);
}
.store-sort:focus{ border-color: var(--accent); outline: none; }
.store-sort option{ background: var(--bg-1); }

/* ---- Cart drawer ---- */
.store-cart{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 950;
  width: 400px; max-width: 90vw;
  background: var(--bg-1); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform var(--dur-med) var(--ease-orbit);
  display: flex; flex-direction: column;
}
.store-cart.is-open{ transform: translateX(0); }
.store-cart__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3); border-bottom: 1px solid var(--line);
}
.store-cart__title{ font-family: var(--font-display); font-size: 1.1rem; color: var(--text-0); }
.store-cart__close{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--text-0); font-size: 1.2rem; cursor: pointer;
}
.store-cart__body{ flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-3); }
.store-cart__empty{ text-align: center; color: var(--text-2); padding: var(--sp-5) var(--sp-2); font-family: var(--font-display); font-size: .9rem; }
.store-cart-item{
  display: grid; grid-template-columns: 64px 1fr auto; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
}
.store-cart-item__img{ width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.store-cart-item__img img{ width: 100%; height: 100%; object-fit: cover; }
.store-cart-item__info{ display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.store-cart-item__name{ font-family: var(--font-display); font-size: .88rem; color: var(--text-0); }
.store-cart-item__price{ font-family: var(--font-mono); font-size: .82rem; color: var(--accent); }
.store-cart-item__qty{ display: flex; align-items: center; gap: .4em; }
.store-cart-item__qty button{
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--text-0); font-size: 1rem; cursor: pointer;
}
.store-cart-item__qty button:hover{ border-color: var(--accent); color: var(--accent); }
.store-cart-item__qty span{ font-family: var(--font-mono); font-size: .88rem; min-width: 24px; text-align: center; }
.store-cart-item__remove{
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-2);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}
.store-cart-item__remove:hover{ color: var(--red); }
.store-cart__foot{
  padding: var(--sp-3); border-top: 1px solid var(--line);
}
.store-cart__total{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display); font-size: 1rem; color: var(--text-0);
}
.store-cart__total b{ font-family: var(--font-mono); color: var(--accent); font-size: 1.1rem; }
.store-cart__checkout{
  width: 100%; padding: .8em; border-radius: 999px;
  background: var(--accent); color: #16100a; border: none;
  font-family: var(--font-display); font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: opacity var(--dur-fast);
}
.store-cart__checkout:hover{ opacity: .9; }
.store-cart__checkout:disabled{ opacity: .5; cursor: not-allowed; }

/* Mobile: cart becomes a full-screen overlay — not a side drawer that
   leaves the page visible beside it. Applies at 980px (not just 640px)
   so tablets and larger phones also get the full-screen cart. */
@media (max-width: 980px){
  .store-cart{
    width: 100vw; max-width: 100vw;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* modern browsers use dynamic viewport height */
    border-left: none;
    transform: translateY(100%);
  }
  .store-cart.is-open{ transform: translateY(0); }
  .store-cart__body{ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .store-cart__foot{ padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Order form modal ---- */
.store-modal-bg{
  display: none; position: fixed; inset: 0; z-index: 980;
  background: rgba(0,0,0,.6); align-items: center; justify-content: center;
  padding: var(--sp-3); overflow-y: auto;
}
.store-modal-bg.is-open{ display: flex; }
.store-modal{
  width: 100%; max-width: 560px; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: 24px;
  padding: var(--sp-4); max-height: 90vh; overflow-y: auto;
}
.store-modal__head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.store-modal__title{ font-family: var(--font-display); font-size: 1.2rem; color: var(--text-0); }
.store-modal__close{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--text-0); font-size: 1.2rem; cursor: pointer;
}
.store-order-summary{
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  font-family: var(--font-mono); font-size: .82rem; color: var(--text-1);
}
.store-order-summary b{ color: var(--accent); }
.store-pay-opt{
  display: flex; align-items: center; gap: .6em;
  padding: .7em 1em; border: 1px solid var(--line-strong); border-radius: 14px;
  margin-bottom: .5em; cursor: pointer;
  font-family: var(--font-display); font-size: .88rem; color: var(--text-0);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.store-pay-opt:hover{ border-color: var(--accent); }
.store-pay-opt input{ width: 18px; height: 18px; accent-color: var(--accent); }
.store-pay-opt--selected{ border-color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.store-pay-opt__logo{
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  padding: .2em .5em; border-radius: 8px;
  background: rgba(var(--blue-rgb),.18); color: var(--beige);
}
.store-receipt{
  margin-top: var(--sp-2); padding: var(--sp-2);
  background: var(--bg-2); border: 1px dashed var(--line-strong); border-radius: 14px;
}
.store-receipt__label{
  font-family: var(--font-mono); font-size: .78rem; color: var(--accent);
  margin-bottom: .5em; display: block;
}
.store-receipt__hint{ font-family: var(--font-display); font-size: .78rem; color: var(--text-2); margin-bottom: .5em; }
.store-receipt input[type="file"]{
  width: 100%; padding: .5em; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--bg-1); color: var(--text-1); font-family: var(--font-display); font-size: .82rem;
}
.store-form-note{
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-2);
  margin-top: var(--sp-2); padding: .6em; border: 1px dashed var(--line); border-radius: 10px;
}

/* ---- Add-to-cart button on cards ---- */
.store-card__add{
  display: inline-flex; align-items: center; gap: .4em;
  padding: .4em .8em; border-radius: 999px;
  background: var(--accent); color: #16100a; border: none;
  font-family: var(--font-display); font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: opacity var(--dur-fast);
}
.store-card__add:hover{ opacity: .85; }
.store-card__add:disabled{ opacity: .4; cursor: not-allowed; }


/* Mobile optimizations */
@media (max-width: 640px){
  /* dev-note (commerce-ready banner) — stack the icon above the text and let
     the long <code> file paths wrap so they don't overflow the viewport.
     This section is planned for removal in a later update. */
  .dev-note{
    flex-direction: column;
    font-size: .78rem;
    padding: var(--sp-2);
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .dev-note code{
    display: inline-block;
    overflow-wrap: break-word;
    word-break: break-all;
    font-size: .72rem;
  }
  .dev-note svg{
    flex-shrink: 0;
    margin-bottom: .2em;
  }
  .store-controls{ flex-direction: column; align-items: stretch; gap: .5rem; }
  .store-search{ min-width: 0; }
  .store-search input{ font-size: .82rem; padding: .6em 1em .6em 2.4em; }
  .store-sort{ width: 100%; font-size: .78rem; }
  .store-segmented{ width: 100%; justify-content: center; }
  .store-segmented button{ flex: 1; justify-content: center; font-size: .76rem; padding: .45em .8em; }
  .store-grid{ grid-template-columns: 1fr; gap: var(--sp-2); }
  .store-card{ border-radius: 20px; }
  .store-card__body{ padding: var(--sp-2); }
  .store-card__name{ font-size: .95rem; }
  .store-card__desc{ font-size: .8rem; }
  .store-card__footer{ flex-wrap: wrap; gap: .4em; }
  .store-card__add{ font-size: .72rem; padding: .35em .7em; }
  /* Cart full-screen behavior is now at the 980px breakpoint (see above).
     These rules only fine-tune cart item sizes for very small screens. */
  .store-cart__head{ padding: var(--sp-2); }
  .store-cart__title{ font-size: 1rem; }
  .store-cart__body{ padding: var(--sp-1) var(--sp-2); }
  .store-cart-item{ grid-template-columns: 48px 1fr; gap: .5rem; }
  .store-cart-item__img{ width: 48px; height: 48px; }
  .store-cart-item__name{ font-size: .82rem; }
  .store-cart-item__qty button{ width: 24px; height: 24px; font-size: .9rem; }
  .store-cart-item__remove{ font-size: .68rem; }
  .store-cart__foot{ padding: var(--sp-2); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); }
  .store-cart__total{ font-size: .92rem; }
  .store-cart__total b{ font-size: 1rem; }
  .store-cart__checkout{ font-size: .85rem; padding: .7em; }
  .store-modal-bg{ padding: 0; }
  .store-modal{ max-width: 100vw; border-radius: 0; min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; padding: var(--sp-3); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
  .store-modal__title{ font-size: 1.05rem; }
  .store-order-summary{ font-size: .78rem; padding: var(--sp-1) var(--sp-2); }
  .store-pay-opt{ font-size: .82rem; padding: .6em .8em; }
  .store-pay-opt input{ width: 16px; height: 16px; }
  .store-receipt input[type=file]{ font-size: .76rem; }
  .store-side{ width: 85vw; max-width: 320px; }
  .store-dept__head{ padding: .8em .4em; font-size: .9rem; }
  .store-section{ padding: .6em .4em; font-size: .85rem; }
  .store-section input[type=checkbox]{ width: 18px; height: 18px; }
  .store-side__clear{ padding: .7em; font-size: .82rem; }
  .store-hero{ padding: var(--sp-4) var(--sp-2); }
  .store-hero__logo{ width: 56px; height: 56px; }
  .store-hero__badge{ font-size: .75rem; padding: .35em .8em; }
  .store-hero__beta{ font-size: .6rem; padding: .35em .8em; }
  .store-hero__title{ font-size: var(--fs-lg); }
  .store-hero__lede{ font-size: var(--fs-xs); }
  .pp-gallery{ grid-template-columns: 1fr; }
  .pp-gallery__side{ flex-direction: row; }
  .pp-gallery__side > div{ aspect-ratio: 1; }
  .pp-spec-table{ font-size: .82rem; }
  .pp-spec-table td, .pp-spec-table th{ padding: .5em .6em; }
}
.pp-spec-table td[contenteditable=false]{ cursor: default; }
.pp-spec-table td[contenteditable=false]:focus{ background: none; box-shadow: none; }