/* Component styles. Lifted verbatim from app.py BASE_CSS, plus a new-components
   section at the end (breadcrumb, header actions, cart page). Every rule consumes
   only tokens from tokens.css. */

:root {
  --text-h3:22px; --text-body:16px; --text-body-sm:14px; --text-caption:11px;
  --tracking-wide:0.15em;
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-8:48px; --space-10:64px; --space-16:120px;
  --gutter:24px; --container-wide:1280px;
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:var(--font-body); color:var(--text);
  background:var(--canvas); -webkit-font-smoothing:antialiased;
}

/* --- Header --- */
.site-header { position:sticky; top:0; z-index:50; }
.logo-bar {
  background:var(--nav-bg); height:72px; display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--gutter);
  border-bottom:var(--border-w) solid transparent;
}
.logo { display:flex; align-items:center; text-decoration:none;
        color:var(--nav-text); }
.logo-img { height:30px; width:auto; display:block; }

/* Theme toggle — lives in the nav, mirrors nav colors in both systems. */
.theme-toggle {
  display:flex; gap:0; border:var(--border-w) solid var(--nav-text);
  background:transparent;
}
.theme-toggle button {
  font-family:var(--font-body); font-size:var(--text-caption); font-weight:600;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:8px 14px; min-height:36px; cursor:pointer; border:0;
  background:transparent; color:var(--nav-text);
  transition:background-color 150ms ease, color 150ms ease;
}
.theme-toggle button[aria-pressed="true"] {
  background:var(--nav-text); color:var(--nav-bg);
}
.theme-toggle button:focus-visible { outline:2px solid var(--focus);
                                     outline-offset:2px; }

.category-bar {
  background:var(--canvas); border-bottom:var(--border-w) solid var(--border);
  padding:var(--space-3) var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--space-2); max-width:var(--container-wide); margin:0 auto;
}
.cat-btn {
  background:var(--surface); border:var(--border-w) solid var(--border);
  border-radius:var(--radius); color:var(--text); font-family:var(--font-body);
  font-size:var(--text-caption); font-weight:600;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:14px 10px; cursor:pointer; min-height:44px;
  transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease;
  /* anchors now, not buttons: keep them looking like the old buttons */
  display:flex; align-items:center; justify-content:center; text-align:center;
  text-decoration:none;
}
.cat-btn:hover { border-color:var(--border-strong); }
.cat-btn--active {
  background:var(--border-strong); color:var(--canvas);
  border-color:var(--border-strong);
}
.cat-btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

/* --- Product grid --- */
main { max-width:var(--container-wide); margin:0 auto;
       padding:var(--space-10) var(--gutter) var(--space-16); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr);
                gap:var(--grid-gap); }
.product-grid + .product-grid { margin-top:var(--grid-gap); }
.product-card { display:flex; flex-direction:column; gap:var(--card-gap);
                background:var(--surface); }
.product-card__imgwrap { position:relative; display:block; aspect-ratio:1/1;
                         width:100%; overflow:hidden;
                         background:var(--surface-alt); cursor:pointer; }
.product-card__image { width:100%; height:100%; object-fit:cover; display:block;
                       transition:opacity 200ms ease; }
.product-card__imgwrap:hover .product-card__image { opacity:0.85; }
.product-card__meta { color:var(--text-accent); font-size:var(--text-body-sm);
                      letter-spacing:0.08em; text-transform:uppercase; }
.product-card__title { margin:0; }
.product-card__titlelink { color:inherit; text-decoration:none; }
.product-card__titlelink:hover { color:var(--text-accent); }
.product-card__titlelink:focus-visible { outline:2px solid var(--focus);
                                         outline-offset:2px; }
.type-h3 {
  font-family:var(--font-display); font-size:var(--text-h3);
  font-weight:var(--display-weight); letter-spacing:var(--display-tracking);
  text-transform:var(--display-transform); color:var(--text); line-height:1.2;
}
.product-card__desc { font-size:var(--text-body-sm); line-height:1.5;
                      color:var(--text); margin:0; }
.product-card__desc--empty { color:var(--text-muted); font-style:italic; }
.product-card__price { font-size:var(--text-body); font-weight:600;
                       color:var(--text); letter-spacing:0.05em; }
.product-card__cta { margin-top:auto; }

.btn-primary {
  display:inline-block; padding:16px 40px; background:var(--cta-bg);
  color:var(--cta-text); font-family:var(--font-body);
  font-size:var(--text-caption); font-weight:var(--cta-weight);
  letter-spacing:var(--cta-tracking); text-transform:var(--cta-transform);
  border:var(--border-w) solid var(--cta-border); border-radius:var(--radius);
  box-shadow:var(--shadow); cursor:pointer; width:100%; text-align:center;
  text-decoration:none;
  transition:background-color 200ms ease, box-shadow 150ms ease,
             transform 150ms ease;
}
.btn-primary:hover { background:var(--cta-hover); }
.btn-primary:active { background:var(--cta-active); box-shadow:var(--shadow-press); }
.btn-primary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] {
  background:var(--surface-alt); color:var(--text-muted);
  border-color:var(--border); box-shadow:none; cursor:not-allowed;
}

/* --- Category card: a child category sitting in its parent's grid --- */
.category-card { display:flex; }
.category-card__btn {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3);
  width:100%; height:100%; min-height:220px; padding:var(--space-6);
  background:var(--surface-alt); cursor:pointer; text-align:left;
  border:var(--border-w) solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); font-family:var(--font-body); color:var(--text);
  transition:border-color 200ms ease, background-color 200ms ease;
  text-decoration:none;
}
.category-card__btn:hover { border-color:var(--border-strong); }
.category-card__btn:focus-visible { outline:2px solid var(--focus);
                                    outline-offset:2px; }
.category-card__eyebrow { font-size:var(--text-caption); font-weight:700;
                          letter-spacing:var(--tracking-wide);
                          text-transform:uppercase; color:var(--text-accent); }
.category-card__count { font-size:var(--text-body-sm); color:var(--text-muted); }
.category-card__go { margin-top:auto; font-size:var(--text-body-sm);
                     font-weight:600; letter-spacing:0.05em;
                     text-transform:uppercase; color:var(--text-accent); }

.grid-empty { padding:var(--space-16) 0; text-align:center;
              color:var(--text-muted); font-size:var(--text-body); }

/* --- Product detail --- */
.pdp { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10);
       align-items:start; }
.pdp__imgwrap { position:relative; aspect-ratio:1/1; background:var(--surface-alt);
                overflow:hidden; }
.pdp__image { width:100%; height:100%; object-fit:cover; display:block; }
.pdp__eyebrow { color:var(--text-accent); font-size:var(--text-body-sm);
                letter-spacing:0.08em; text-transform:uppercase;
                margin-bottom:var(--space-3); }
.pdp__title { margin:0 0 var(--space-4); }
.pdp__desc { font-size:var(--text-body); line-height:1.5; color:var(--text);
             margin:0 0 var(--space-8); }
.pdp__desc--empty { color:var(--text-muted); font-style:italic; }

/* --- Attribute chips --- */
.chip-group { margin-bottom:var(--space-6); }
.chip-group__label { font-size:var(--text-caption); font-weight:700;
                     letter-spacing:var(--tracking-wide); text-transform:uppercase;
                     color:var(--text); margin-bottom:var(--space-3); }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.chip { position:relative; display:inline-flex; align-items:center;
        min-height:44px; padding:10px 20px;
        border:var(--border-w) solid var(--chip-border);
        border-radius:var(--radius); background:var(--chip-bg); cursor:pointer;
        font-size:var(--text-body-sm); letter-spacing:0.04em; color:var(--text);
        transition:border-color 200ms ease, background-color 200ms ease; }
.chip input { position:absolute; opacity:0; width:0; height:0; }
.chip:hover { border-color:var(--border-strong); }
.chip:has(input:checked) { border-color:var(--chip-on-border);
                           background:var(--chip-on-bg);
                           color:var(--chip-on-text); font-weight:600; }
.chip:has(input:focus-visible) { outline:2px solid var(--focus);
                                 outline-offset:2px; }

.resolve-panel { margin-top:var(--space-8); padding-top:var(--space-6);
                 border-top:var(--border-w) solid var(--border);
                 display:flex; flex-direction:column; gap:var(--space-4);
                 align-items:flex-start; }
.resolve-panel .btn-primary { width:auto; min-width:240px; }
.resolve-panel__sku { font-size:var(--text-body-sm); letter-spacing:0.08em;
                      text-transform:uppercase; color:var(--text-accent); }
.resolve-panel__price { font-size:28px; font-weight:600; color:var(--text);
                        letter-spacing:0.03em; }
.resolve-panel__hint { font-size:var(--text-body-sm); color:var(--text-muted);
                       margin:0; }
.resolve-panel__unavailable { font-size:var(--text-body-sm);
                              color:var(--danger); margin:0; }

@media (max-width:1023px) { .product-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px)  { .pdp { grid-template-columns:1fr; gap:var(--space-6); } }
@media (max-width:640px)  {
  .product-grid { grid-template-columns:1fr; }
  .logo-bar { height:60px; }
  .logo-img { height:24px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* =========================================================================
   THEME-SPECIFIC STRUCTURE (from app.py) — lo-fi swaps photos/logo for stubs.
   ========================================================================= */
:root[data-theme="lofi"] .product-card__image,
:root[data-theme="lofi"] .pdp__image { visibility:hidden; }
:root[data-theme="lofi"] .product-card__imgwrap,
:root[data-theme="lofi"] .pdp__imgwrap {
  border:var(--border-w) dashed var(--border);
  background:
    linear-gradient(to top right,
      transparent calc(50% - 1px), var(--border) 50%,
      transparent calc(50% + 1px)),
    linear-gradient(to bottom right,
      transparent calc(50% - 1px), var(--border) 50%,
      transparent calc(50% + 1px)),
    var(--surface-alt);
}
:root[data-theme="lofi"] .product-card__imgwrap::after,
:root[data-theme="lofi"] .pdp__imgwrap::after {
  content:"IMG"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  font-family:'Courier New',monospace; font-size:var(--text-body-sm);
  font-weight:700; letter-spacing:0.2em; color:var(--text-muted);
  background:var(--surface-alt);
  width:64px; height:28px; margin:auto;
  border:var(--border-w) solid var(--border);
}
:root[data-theme="lofi"] .logo-img { display:none; }
:root[data-theme="lofi"] .logo::after {
  content:"[ LOGO ]"; font-family:'Courier New',monospace; font-weight:700;
  font-size:var(--text-body); letter-spacing:0.1em; color:var(--nav-text);
}
:root[data-theme="lofi"] .logo-bar { border-bottom-color:var(--border); }
:root[data-theme="lofi"] .product-card {
  border:var(--border-w) solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--space-4);
}

/* =========================================================================
   NEW COMPONENTS (static build) — header actions, breadcrumb, page title, cart.
   Token-only, same contract as the lifted rules above.
   ========================================================================= */

.header-actions { display:flex; align-items:center; gap:var(--space-4); }
.cart-link {
  color:var(--nav-text); text-decoration:none; font-family:var(--font-body);
  font-size:var(--text-caption); font-weight:600; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; padding:9px 14px; min-height:36px;
  display:inline-flex; align-items:center;
  border:var(--border-w) solid var(--nav-text);
  transition:background-color 150ms ease, color 150ms ease;
}
.cart-link:hover { background:var(--nav-text); color:var(--nav-bg); }
.cart-link:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

.breadcrumb { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center;
  margin-bottom:var(--space-6); font-size:var(--text-body-sm);
  letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); }
.breadcrumb a { color:var(--text); text-decoration:none;
  border-bottom:var(--border-w) solid transparent; padding-bottom:1px; }
.breadcrumb a:hover { color:var(--text-accent); border-color:var(--text-accent); }
.breadcrumb [aria-current] { color:var(--text-muted); }

.page-title { margin:0 0 var(--space-8); }
.cart-lead { color:var(--text-muted); font-size:var(--text-body-sm);
             margin:0 0 var(--space-8); }

/* --- Cart page --- */
.cart-list { display:flex; flex-direction:column;
             border-top:var(--border-w) solid var(--border); }
.cart-row { display:grid;
  grid-template-columns:1fr auto auto auto; gap:var(--space-5);
  align-items:center; padding:var(--space-4) 0;
  border-bottom:var(--border-w) solid var(--border); }
.cart-row__title { font-weight:600; }
.cart-row__attr { font-size:var(--text-body-sm); color:var(--text-accent);
                  margin-top:2px; }
.cart-row__sku { font-size:var(--text-caption); letter-spacing:0.08em;
                 text-transform:uppercase; color:var(--text-muted); margin-top:2px; }
.cart-row__qty { display:flex; align-items:center; gap:var(--space-3); }
.cart-row__qty button {
  min-width:36px; min-height:36px; cursor:pointer;
  border:var(--border-w) solid var(--border); background:var(--surface);
  color:var(--text); border-radius:var(--radius); font-size:var(--text-body);
  font-family:var(--font-body); }
.cart-row__qty button:hover { border-color:var(--border-strong); }
.cart-row__qty span { min-width:24px; text-align:center; font-weight:600; }
.cart-row__price { font-weight:600; min-width:90px; text-align:right;
                   letter-spacing:0.03em; }
.cart-row__remove { background:none; border:0; cursor:pointer;
  color:var(--danger); font-family:var(--font-body); font-size:var(--text-body-sm);
  text-decoration:underline; }
.cart-foot { display:flex; justify-content:space-between; align-items:center;
  padding:var(--space-5) 0; font-size:var(--text-h3); font-weight:600; }
.cart-note, .cart-empty { color:var(--text-muted); font-style:italic; }

@media (max-width:640px) {
  .cart-row { grid-template-columns:1fr auto; gap:var(--space-3);
              row-gap:var(--space-3); }
  .cart-row__price { grid-column:2; }
}