:root { --shop-ink:#1f2933; --shop-muted:#62707c; --shop-line:#d9dee3; --shop-surface:#fff; --shop-soft:#f5f7f8; --shop-accent:#b45309; }
main[class^="shop-"] { color:var(--shop-ink); max-width:74rem; margin:0 auto; padding:2rem 1rem 3rem; }
main[class^="shop-"] h1, main[class^="shop-"] h2 { line-height:1.2; }
main[class^="shop-"] a { color:#1f5d70; }
.breadcrumbs { color:var(--shop-muted); font-size:.9rem; margin-bottom:1rem; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem; }
.shop-grid article, .shop-detail, .shop-cart, .shop-checkout, .shop-wishlist-table, .shop-compare-table { background:var(--shop-surface); border:1px solid var(--shop-line); border-radius:.4rem; }
.shop-grid article { padding:1rem; }
.shop-detail, .shop-cart, .shop-checkout { padding:1.25rem; }
.shop-categories { display:flex; flex-wrap:wrap; gap:.5rem 1rem; padding:0; list-style:none; }
.shop-wishlist-table, .shop-compare-table { border-collapse:collapse; width:100%; overflow-x:auto; }
.shop-wishlist-table th, .shop-wishlist-table td, .shop-compare-table th, .shop-compare-table td { border:1px solid var(--shop-line); padding:.7rem; text-align:left; vertical-align:top; }
main[class^="shop-"] input, main[class^="shop-"] select, main[class^="shop-"] textarea { border:1px solid #aeb8c2; border-radius:.25rem; padding:.55rem .65rem; max-width:100%; }
main[class^="shop-"] button, main[class^="shop-"] .button { background:var(--shop-accent); border:1px solid var(--shop-accent); border-radius:.25rem; color:#fff; cursor:pointer; padding:.55rem .85rem; }
main[class^="shop-"] button:hover { background:#92400e; }
.flash { background:#e9f4ee; border-left:4px solid #26734d; padding:.75rem; }
.shop-gallery { margin:0 0 1.25rem; }
.shop-gallery__hero-btn { display:block; width:100%; padding:0; border:1px solid var(--shop-line); border-radius:.35rem; background:var(--shop-soft); cursor:zoom-in; overflow:hidden; }
.shop-gallery__hero { display:block; width:100%; max-height:28rem; object-fit:contain; background:var(--shop-soft); }
.shop-gallery__thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr)); gap:.5rem; margin-top:.75rem; }
.shop-gallery__thumb { padding:.2rem; border:1px solid var(--shop-line); border-radius:.3rem; background:#fff; cursor:pointer; }
.shop-gallery__thumb.is-active { border-color:var(--shop-accent); box-shadow:0 0 0 1px var(--shop-accent); }
.shop-gallery__thumb img { display:block; width:100%; height:4.5rem; object-fit:cover; }
.shop-gallery__dialog { border:none; border-radius:.4rem; padding:0; max-width:min(96vw,56rem); background:#0f1419; }
.shop-gallery__dialog::backdrop { background:rgba(15,20,25,.72); }
.shop-gallery__dialog img { display:block; max-width:96vw; max-height:90vh; object-fit:contain; }
.shop-gallery__dialog-close { position:absolute; top:.4rem; right:.4rem; }
.shop-gallery__dialog-close button { background:rgba(0,0,0,.55); border:0; color:#fff; font-size:1.4rem; line-height:1; padding:.35rem .55rem; border-radius:.25rem; cursor:pointer; }
@media (max-width: 42rem) {
  main[class^="shop-"] { padding:1.25rem .75rem 2rem; }
  .shop-grid { grid-template-columns:1fr; }
  .shop-wishlist-table, .shop-compare-table { display:block; overflow-x:auto; white-space:nowrap; }
  .shop-gallery__hero { max-height:18rem; }
}

/* EPIC-055 — Customer account + auth UX */
.shop-btn { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.55rem .9rem; border-radius:.3rem; text-decoration:none; font:inherit; cursor:pointer; border:1px solid transparent; }
.shop-btn--primary { background:var(--shop-accent); border-color:var(--shop-accent); color:#fff; }
.shop-btn--primary:hover { background:#92400e; color:#fff; }
.shop-btn--secondary { background:#fff; border-color:var(--shop-line); color:var(--shop-ink); }
.shop-btn--secondary:hover { border-color:var(--shop-accent); color:var(--shop-accent); }
.shop-chip { display:inline-flex; align-items:center; padding:.45rem .75rem; border:1px solid var(--shop-line); border-radius:.3rem; background:var(--shop-soft); text-decoration:none; color:var(--shop-ink); }
.shop-chip:hover { border-color:var(--shop-accent); color:var(--shop-accent); }
.shop-empty { color:var(--shop-muted); }
.shop-account__layout { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:1.5rem; align-items:start; }
.shop-account__sidebar { background:var(--shop-soft); border:1px solid var(--shop-line); border-radius:.4rem; padding:.75rem; position:sticky; top:1rem; }
.shop-account__nav { display:flex; flex-direction:column; gap:.2rem; }
.shop-account__nav-link { display:flex; align-items:center; gap:.55rem; padding:.55rem .65rem; border-radius:.3rem; text-decoration:none; color:var(--shop-ink); border:0; background:transparent; width:100%; text-align:left; font:inherit; cursor:pointer; }
.shop-account__nav-link:hover, .shop-account__nav-link.is-active { background:#fff; color:var(--shop-accent); }
.shop-account__nav-icon { display:inline-flex; width:1.6rem; height:1.6rem; align-items:center; justify-content:center; border-radius:.25rem; background:#fff; border:1px solid var(--shop-line); font-size:.65rem; font-weight:700; letter-spacing:.02em; color:var(--shop-muted); flex-shrink:0; }
.shop-account__logout { margin:0; margin-top:.35rem; padding-top:.35rem; border-top:1px solid var(--shop-line); }
.shop-account__header { margin-bottom:1.25rem; }
.shop-account__lead { color:var(--shop-muted); margin:.35rem 0 0; max-width:40rem; }
.shop-account__cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1.5rem; }
.shop-card { background:var(--shop-surface); border:1px solid var(--shop-line); border-radius:.4rem; padding:1.1rem; display:flex; flex-direction:column; gap:.65rem; }
.shop-card--wide { grid-column:1 / -1; }
.shop-card__value { font-size:1.25rem; font-weight:650; margin:0; }
.shop-card__meta { color:var(--shop-muted); margin:0; }
.shop-card__list { margin:0; padding-left:1.1rem; color:var(--shop-ink); }
.shop-card__row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
.shop-order-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.65rem; }
.shop-order-card { display:flex; flex-direction:column; gap:.25rem; padding:.75rem; border:1px solid var(--shop-line); border-radius:.35rem; text-decoration:none; color:var(--shop-ink); background:var(--shop-soft); }
.shop-order-card:hover { border-color:var(--shop-accent); }
.shop-account__quick { margin-top:.5rem; }
.shop-account__quick-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.shop-account__panel { background:var(--shop-surface); border:1px solid var(--shop-line); border-radius:.4rem; padding:1.1rem; margin-bottom:1rem; }
.shop-account__main form label { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.85rem; max-width:28rem; }
.shop-auth { display:flex; justify-content:center; padding-top:1rem; }
.shop-auth__panel { width:min(28rem,100%); background:var(--shop-surface); border:1px solid var(--shop-line); border-radius:.45rem; padding:1.5rem; box-shadow:0 8px 28px rgba(31,41,51,.06); }
.shop-auth__eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--shop-muted); margin:0 0 .4rem; }
.shop-auth__lead { color:var(--shop-muted); margin:.35rem 0 1rem; }
.shop-auth__form { display:flex; flex-direction:column; gap:.85rem; }
.shop-auth__field { display:flex; flex-direction:column; gap:.35rem; }
.shop-auth__submit { width:100%; }
.shop-auth__links { display:flex; flex-wrap:wrap; gap:.75rem 1rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--shop-line); }
.shop-auth__error { background:#fde8e8; border-left:4px solid #b42318; padding:.75rem; }
.shop-auth__flash { background:#e9f4ee; border-left:4px solid #26734d; padding:.75rem; }
@media (max-width: 64rem) {
  .shop-account__layout { grid-template-columns:12.5rem minmax(0,1fr); gap:1rem; }
}
@media (max-width: 48rem) {
  .shop-account__layout { grid-template-columns:1fr; }
  .shop-account__sidebar { position:static; }
  .shop-account__nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; }
  .shop-account__logout { grid-column:1 / -1; border-top:0; padding-top:0; margin-top:0; }
  .shop-account__cards { grid-template-columns:1fr; }
}
@media (max-width: 30rem) {
  .shop-account__nav { grid-template-columns:1fr; }
}

/* EPIC-056 — Header account + login modal */
.gm-nav__search{display:inline-flex;align-items:center;margin-left:.5rem}
.gm-nav__search input{min-width:9rem;max-width:14rem;padding:.35rem .55rem;border:1px solid rgba(0,0,0,.15);border-radius:.3rem}
.gm-nav__account{position:relative}
.gm-nav__account-menu{position:absolute;right:0;top:calc(100% + .35rem);min-width:12rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.35rem;padding:.4rem;display:flex;flex-direction:column;gap:.15rem;z-index:40;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.gm-nav__account-menu[hidden]{display:none!important}
.gm-nav__account-menu a,.gm-nav__account-menu button{display:block;width:100%;text-align:left;padding:.45rem .55rem;border:0;background:transparent;text-decoration:none;color:inherit;font:inherit;cursor:pointer;border-radius:.25rem}
.gm-nav__account-menu a:hover,.gm-nav__account-menu button:hover{background:#f5f7f8}
.shop-login-modal{border:none;border-radius:.5rem;padding:0;max-width:min(24rem,92vw)}
.shop-login-modal::backdrop{background:rgba(15,20,25,.55)}
.shop-login-modal__form{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.shop-login-modal__head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.shop-login-modal__close{border:0;background:transparent;font-size:1.4rem;cursor:pointer;line-height:1}
.shop-login-modal__links{display:flex;flex-wrap:wrap;gap:.75rem}
.shop-login-modal__oauth{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.shop-login-modal__oauth button{padding:.5rem;border:1px solid #d9dee3;border-radius:.3rem;background:#f5f7f8;opacity:.7}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* EPIC-057 — Public Shop header tools + icons + search overlay */
.gm-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.1) blur(8px);background:rgba(255,255,255,.92);border-bottom:1px solid rgba(0,0,0,.06)}
.gm-nav__tools{display:inline-flex;align-items:center;gap:.35rem;margin-left:.75rem;flex-wrap:wrap}
.gm-tool{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:2.25rem;padding:.35rem .55rem;border:1px solid transparent;border-radius:.4rem;background:transparent;color:inherit;text-decoration:none;font:inherit;cursor:pointer;position:relative}
.gm-tool:hover,.gm-tool:focus-visible{border-color:rgba(0,0,0,.12);background:#f5f7f8;outline:none}
.gm-tool--icon{width:2.35rem;padding:.35rem}
.gm-tool--cart{width:2.5rem}
.gm-tool__label--desktop{display:none}
.gm-tool__badge:empty{display:none}
.gm-tool__badge:not(:empty){position:absolute;top:.1rem;right:.05rem;min-width:1.05rem;height:1.05rem;padding:0 .25rem;border-radius:999px;background:#b45309;color:#fff;font-size:.65rem;line-height:1.05rem;text-align:center;font-weight:700}
.gm-ico{display:block}
.gm-nav__search--desktop{display:none}
.gm-nav__account{position:relative}
.gm-nav__account-menu{position:absolute;right:0;top:calc(100% + .4rem);min-width:13rem;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:.45rem;padding:.4rem;display:flex;flex-direction:column;gap:.1rem;z-index:60;box-shadow:0 14px 36px rgba(15,20,25,.12)}
.gm-nav__account-menu[hidden]{display:none!important}
.gm-nav__account-menu a,.gm-nav__account-menu button{display:block;width:100%;text-align:left;padding:.55rem .65rem;border:0;background:transparent;text-decoration:none;color:inherit;font:inherit;cursor:pointer;border-radius:.3rem}
.gm-nav__account-menu a:hover,.gm-nav__account-menu button:hover{background:#f3f5f7}
.gm-search-overlay{position:fixed;inset:0;z-index:80;background:rgba(15,20,25,.45);display:flex;align-items:flex-start;justify-content:center;padding:4rem 1rem 1rem}
.gm-search-overlay[hidden]{display:none!important}
.gm-search-overlay__panel{width:min(40rem,100%);background:#fff;border-radius:.6rem;padding:1rem;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.gm-search-overlay__form{display:flex;gap:.5rem;align-items:center}
.gm-search-overlay__form input{flex:1;min-height:2.6rem;padding:.65rem .8rem;border:1px solid #c9d1d8;border-radius:.4rem;font:inherit}
.gm-search-overlay__close{border:0;background:#f3f5f7;border-radius:.35rem;width:2.5rem;height:2.5rem;cursor:pointer}
.gm-search-overlay__suggest{margin-top:1rem;display:grid;gap:1rem}
.gm-search-overlay__suggest h3{margin:0 0 .4rem;font-size:.85rem;color:#62707c;text-transform:uppercase;letter-spacing:.06em}
.gm-search-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.gm-search-chips a{display:inline-flex;padding:.35rem .65rem;border-radius:.3rem;background:#f5f7f8;border:1px solid #e2e7eb;text-decoration:none;color:inherit}
.shop-login-modal{border:none;border-radius:.55rem;padding:0;max-width:min(26rem,94vw);width:100%}
.shop-login-modal::backdrop{background:rgba(15,20,25,.55)}
.shop-login-modal__form{padding:1.35rem;display:flex;flex-direction:column;gap:.8rem}
.shop-login-modal__head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.shop-login-modal__close{border:0;background:transparent;font-size:1.5rem;cursor:pointer;line-height:1}
.shop-login-modal__remember{display:flex;align-items:center;gap:.45rem;font-size:.92rem}
.shop-login-modal__links{display:flex;flex-wrap:wrap;gap:.75rem 1rem}
.shop-login-modal__oauth{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.shop-login-modal__oauth button{padding:.55rem;border:1px solid #d9dee3;border-radius:.35rem;background:#f5f7f8;opacity:.75}
@media (min-width:64rem){
  .gm-nav__search--desktop{display:inline-flex;align-items:center;margin:0 .25rem}
  .gm-nav__search--desktop input{min-width:14rem;max-width:20rem;padding:.55rem .75rem;border:1px solid rgba(0,0,0,.12);border-radius:.4rem}
  .gm-tool--search{display:none}
  .gm-tool__label--desktop{display:inline}
}
/* Account design system */
.shop-ds-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.shop-ds-card{background:var(--shop-surface,#fff);border:1px solid var(--shop-line,#d9dee3);border-radius:.55rem;padding:1.15rem;box-shadow:0 1px 0 rgba(15,20,25,.02)}
.shop-ds-card--stat .shop-ds-card__value{font-size:1.6rem;font-weight:700;margin:.2rem 0}
.shop-ds-card--action{display:flex;flex-direction:column;gap:.7rem}
.shop-ds-alert{border-radius:.45rem;padding:.85rem 1rem;border-left:4px solid #26734d;background:#e9f4ee}
.shop-ds-alert--warn{border-left-color:#b45309;background:#fff7ed}
.shop-ds-alert--error{border-left-color:#b42318;background:#fde8e8}
.shop-ds-span-4{grid-column:span 4}
.shop-ds-span-6{grid-column:span 6}
.shop-ds-span-12{grid-column:span 12}
.shop-auth__steps{display:flex;gap:.4rem;margin:0 0 1rem;flex-wrap:wrap}
.shop-auth__step{padding:.35rem .65rem;border-radius:.3rem;border:1px solid var(--shop-line,#d9dee3);font-size:.82rem;color:var(--shop-muted,#62707c)}
.shop-auth__step.is-active{background:var(--shop-accent,#b45309);border-color:var(--shop-accent,#b45309);color:#fff}
.shop-auth__step-panel[hidden]{display:none!important}
.shop-auth__nav{display:flex;gap:.5rem;margin-top:.5rem}
@media (max-width:48rem){
  .shop-ds-span-4,.shop-ds-span-6{grid-column:span 12}
  .gm-nav__tools{width:100%;margin:.5rem 0 0;justify-content:flex-start}
}
.shop-auth__panel--wide{width:min(36rem,100%)}

/* ===== EPIC-058 — Shop storefront separation + customer portal ===== */
body.gm-shop-storefront .gm-shop-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
}
.gm-shop-header__inner { gap: .75rem 1rem; }
.gm-shop-header__web {
  font-size: .85rem;
  opacity: .75;
  text-decoration: none;
  margin-right: .5rem;
}
.gm-shop-header__web:hover { opacity: 1; }
.gm-nav__corporate-shop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: .75rem;
}
.gm-shop-tools { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.gm-shop-main { min-height: 50vh; }
.shop-account .shop-account__layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: 1.25rem;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}
.shop-account .shop-account__sidebar {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 6.5rem);
  overflow: auto;
}
.shop-account .shop-account__content, .shop-account .shop-account__main { min-width: 0; }
.shop-account .shop-account__head, .shop-account .shop-account__header { margin-bottom: 1rem; }
.shop-account .shop-account__lead { margin: .35rem 0 0; opacity: .8; }
.shop-account .shop-account__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
@media (max-width: 860px) {
  .shop-account .shop-account__layout { grid-template-columns: 1fr; }
  .shop-account .shop-account__sidebar {
    position: relative;
    top: 0;
    max-height: none;
    display: flex;
    overflow-x: auto;
  }
  .shop-account .shop-account__nav {
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
  }
  .shop-account .shop-account__nav-link { white-space: nowrap; }
}