/* =============================================================
   906eh — STORE STYLES
   Header cart button, slide-out cart, cart page, product page.
   Loaded after styles.css on every page; uses the same colors,
   fonts, cards (.paper), buttons (.btn) and spacing.
   ============================================================= */

/* =============================================================
   1. HEADER CART BUTTON
   ============================================================= */
.site-nav__menu { margin-left: auto; }          /* keeps the menu on the right, next to the cart */
.site-nav__cart {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--button-height);
  height: var(--button-height);
  border-radius: var(--radius-small);
  color: inherit;
  text-decoration: none;
}
.site-nav__cart:hover { background: var(--khaki-light); }
.site-nav__cart-icon { width: 26px; height: 26px; }
.site-nav__cart-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blaze);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--nav-bg);
}
.site-nav__cart-count[hidden] { display: none; }
body[data-cart-page] .site-nav__cart { background: var(--khaki-light); }
@media (max-width: 960px) {
  /* phones & tablets: cart sits just left of the menu button */
  .site-nav__cart { order: 2; margin-left: auto; }
  .site-nav__toggle { order: 3; }
  .site-nav__inner { gap: 0.25rem; }
  /* if the logo is centered (Logo tab), the cart takes the push-right instead of the menu button */
  .site-nav__inner:has(> .site-nav__cart) > .site-nav__toggle { margin-left: 0 !important; }
}

/* =============================================================
   2. SHARED PIECES
   ============================================================= */
.store { padding-bottom: var(--space-xl); }
.store-crumbs {
  max-width: var(--page-max-width);
  margin: var(--space-m) auto 0;
  padding: 0 var(--page-gutter);
}
.store-crumbs--bottom { margin-top: var(--space-m); padding: 0; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  font-family: var(--font-heading);
  font-stretch: var(--narrow);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
}
.back-link::before { content: "←"; font-family: var(--font-body); font-stretch: 100%; transition: transform 0.15s ease; }
.back-link:hover::before { transform: translateX(-3px); }
.back-link:hover { text-decoration: underline; text-decoration-color: var(--blaze); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: stretch;
  height: var(--button-height);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: #fff;
  overflow: hidden;
}
.qty__btn {
  width: 44px;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  font: 600 1.25rem/1 var(--font-body);
  cursor: pointer;
}
.qty__btn:hover:not(:disabled) { background: var(--khaki-light); }
.qty__btn:disabled { color: var(--line); cursor: default; }
.qty__input {
  width: 3rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font: 600 1rem var(--font-mono);
  color: var(--charcoal);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus-visible { outline: 3px solid var(--blaze); outline-offset: -3px; }
.qty--small { height: 38px; }
.qty--small .qty__btn { width: 36px; font-size: 1.05rem; }
.qty--small .qty__input { width: 2.4rem; font-size: 0.9rem; }

/* Checkout button (PayPal goes here later) */
.btn--checkout { width: 100%; align-self: stretch; }
.btn--checkout:disabled { opacity: 0.5; cursor: not-allowed; }
.paypal-box { display: flex; flex-direction: column; gap: 0.35rem; }
.paypal-box__flag {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.checkout-message { font-size: var(--text-small); color: var(--alert-text); }
.checkout-message:empty { display: none; }

/* Real checkout form (js/checkout.js) -- built on top of the .form/.field
   rules above so it matches contact.html's inputs */
.checkout-form-mount { position: relative; padding-top: 2.25rem; }
.checkout-form__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.checkout-form__close:hover { background: var(--khaki-light); color: var(--charcoal); }
.checkout-form__row { display: flex; gap: 0.6rem; }
.checkout-form__row > div { flex: 1; min-width: 0; }
.checkout-form__save { gap: 0.3rem; }
.checkout-form__checkbox { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--olive); text-transform: none; }
.checkout-form__checkbox input { width: auto; min-height: 0; }
.checkout-form__disclosure { color: var(--ink-soft); }
.checkout-form__saved-note { color: var(--olive); font-weight: 600; }
.checkout-form__totals {
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--khaki-light);
  border-radius: var(--radius-small);
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0;
}
.checkout-form__totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.2rem 0;
  font-weight: 500;
}
.checkout-form__totals-row strong { color: var(--olive); }
.checkout-form__totals-row--total {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--khaki);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--charcoal);
}
.checkout-form__error { color: var(--alert-text); }
.checkout-form__error:empty { display: none; }
.checkout-form__buttons { margin-top: 0.5rem; }

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
}
.cart-subtotal strong { font-family: var(--font-mono); font-weight: 600; font-size: 1.25rem; color: var(--olive); }

/* =============================================================
   3. CART LINES (slide-out and cart page)
   ============================================================= */
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--line);
}
.cart-line:first-child { padding-top: 0; }
.cart-line:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-line__thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-small);
  background: var(--khaki-light);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.cart-line__img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cart-line__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--charcoal);
}
a.cart-line__name:hover { text-decoration: underline; text-decoration-color: var(--blaze); text-decoration-thickness: 2px; }
.cart-line__opts { font-size: 0.9rem; color: var(--ink-soft); }
.cart-line__unit { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.cart-line__controls { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.4rem; }
.cart-line__remove {
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: 600 0.85rem var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart-line__remove:hover { color: var(--alert-text); }
.cart-line__total { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: var(--olive); white-space: nowrap; }
.cart-line--compact { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 0.75rem; }
.cart-line--compact .cart-line__name { font-size: 0.98rem; }

.cart-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.cart-empty[hidden] { display: none; }

/* =============================================================
   4. SLIDE-OUT CART
   ============================================================= */
.cart-drawer { position: fixed; inset: 0; z-index: 300; }
.cart-drawer[hidden] { display: none; }
.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 36, 32, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--charcoal);
  box-shadow: -12px 0 40px rgba(35, 36, 32, 0.25);
  border-left: 5px solid var(--blaze);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  outline: none;
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer.is-open .cart-drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cart-drawer__backdrop, .cart-drawer__panel { transition: none; }
}
html.cart-open, html.cart-open body { overflow: hidden; }
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--ranger);
  color: var(--cream);
}
.cart-drawer__title {
  font-family: var(--font-heading);
  font-stretch: var(--wide);
  font-weight: 850;
  font-size: 1.3rem;
  text-transform: uppercase;
}
.cart-drawer__count { font-family: var(--font-mono); font-stretch: 100%; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--khaki-on-dark); margin-left: 0.4rem; }
.cart-drawer__close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--cream);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.cart-drawer__close:hover { background: rgba(255, 255, 255, 0.12); }
.cart-drawer__body { flex: 1 1 auto; min-height: 96px; overflow-y: auto; padding: 1.25rem; overscroll-behavior: contain; }
.cart-drawer__foot {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.6rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--khaki-light);
  /* The checkout form (email/address/PayPal buttons) gets injected in here
     and can grow taller than the drawer has room for -- without its own
     scroll, flexbox would just shrink/clip it below the "Pay" button,
     making checkout unreachable (worst on short mobile viewports). */
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cart-drawer__foot[hidden] { display: none; }
.cart-drawer__link { align-self: center; font-weight: 600; font-size: 0.95rem; text-underline-offset: 3px; }

/* =============================================================
   5. CART PAGE
   ============================================================= */
.cart-page {
  max-width: var(--page-max-width);
  margin: var(--space-s) auto 0;
  padding: 0 var(--page-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.cart-page__head { display: flex; flex-direction: column; gap: var(--space-xs); }
.cart-page__head .scribble { order: -1; }
.cart-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-m);
  align-items: start;
}
.cart-page__grid[hidden] { display: none; }
.cart-page__list { padding: var(--space-m); }
.cart-summary {
  position: sticky;
  top: calc(var(--nav-height) + 1rem);
  /* Sticky elements never get their own scroll from the page -- once the
     checkout form (address fields + PayPal buttons) is injected and makes
     this taller than the viewport has room for, anything past the fold is
     permanently unreachable without this. */
  max-height: calc(100vh - var(--nav-height) - 2rem);
  overflow-y: auto;
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cart-summary__title {
  font-family: var(--font-heading);
  font-stretch: var(--wide);
  font-weight: 850;
  font-size: 1.2rem;
  text-transform: uppercase;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.cart-summary__safe { font-size: 0.8rem; }
.cart-empty--page { padding: var(--space-l); max-width: 640px; }

/* =============================================================
   6. PRODUCT PAGE
   ============================================================= */
.product-status {
  max-width: 640px;
  margin: var(--space-m) var(--page-gutter) 0;
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
@media (min-width: 720px) { .product-status { margin-left: auto; margin-right: auto; } }
.product-status[hidden] { display: none; }
.mock-links { margin: 0; padding-left: 1.2rem; }

.product {
  max-width: var(--page-max-width);
  margin: var(--space-s) auto 0;
  padding: 0 var(--page-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}
.product[hidden] { display: none; }

/* Pictures */
.product__gallery { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.product__main { margin: 0 12px 12px 0; }
.product__main-slot { background: var(--khaki-light); }
.product__main-slot > img { object-fit: contain; transition: opacity 0.2s ease; }
.product__main-slot > img.is-swapping { opacity: 0.35; }
.product__thumbs {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.product__thumbs[hidden] { display: none; }
.product__thumb {
  display: block;
  width: 78px;
  height: 78px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--khaki-light);
  overflow: hidden;
  cursor: pointer;
}
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb:hover { border-color: var(--ph-border); }
.product__thumb[aria-current="true"] { border-color: var(--charcoal); box-shadow: 0 0 0 2px var(--blaze); }

/* Info panel */
.product__info {
  position: sticky;
  top: calc(var(--nav-height) + 1rem);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.product__type:empty, .product__type[hidden] { display: none; }
.product__title {
  font-family: var(--font-heading);
  font-stretch: var(--wide);
  font-weight: 850;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.product__price { font-size: 1.5rem; }
.product__form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 0.6rem; }
.product__option { margin: 0; padding: 0; border: 0; min-width: 0; position: relative; }
.product__option[hidden] { display: none; }
.product__label {
  display: block;
  margin-bottom: 0.55rem;
  padding: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}
.product__choice { color: var(--charcoal); letter-spacing: 0.04em; }
.product__option.is-missing .product__label { color: var(--alert-text); }
.product__option.is-missing .swatches,
.product__option.is-missing .sizes { outline: 2px dashed var(--alert-text); outline-offset: 6px; border-radius: var(--radius-small); }
.product__guide {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-underline-offset: 3px;
}
.product__guide[hidden] { display: none; }

/* Color swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.swatch__chip { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(35, 36, 32, 0.25); background-size: cover; }
.swatch:hover { border-color: var(--ph-border); }
input:checked + .swatch { border-color: var(--charcoal); box-shadow: 0 0 0 2px var(--blaze); }
input:focus-visible + .swatch { outline: 3px solid var(--blaze); outline-offset: 3px; }
/* Merch-grid color swatches (small, below the card price -- distinct from
   the bigger .swatch picker above, which belongs to product.html) */
.color-swatches { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.5rem; }
.mini-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(35, 36, 32, 0.25);
  padding: 0;
  cursor: pointer;
  background-color: #ccc;
}
.mini-swatch:hover { border-color: var(--ph-border); }
.mini-swatch.is-selected { border-color: var(--charcoal); box-shadow: 0 0 0 2px var(--blaze); }

.swatch.is-soldout::after {               /* diagonal line through sold-out colors */
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  background: var(--charcoal);
  transform: rotate(-45deg);
  box-shadow: 0 0 0 1px var(--card);
}

/* Size chips */
.sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size-chip {
  min-width: 3.1rem;
  min-height: 44px;
  padding: 0 0.85rem;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: #fff;
  font-family: var(--font-heading);
  font-stretch: var(--narrow);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.size-chip:hover { border-color: var(--charcoal); }
input:checked + .size-chip { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
input:focus-visible + .size-chip { outline: 3px solid var(--blaze); outline-offset: 2px; }
.size-chip.is-soldout { color: var(--ph-border); background: var(--khaki-light); text-decoration: line-through; cursor: not-allowed; }
.size-chip.is-soldout:hover { border-color: var(--line); }

.product__add { width: 100%; align-self: stretch; min-height: 56px; font-size: 1.2rem; }
.product__add.is-incomplete { background: var(--khaki); border-color: var(--khaki); }
.product__add:disabled { background: var(--line); border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; }
.product__add:disabled::after { content: none; }
.product__msg { min-height: 1.3em; font-size: var(--text-small); font-weight: 600; color: var(--olive); }
.product__msg:empty { min-height: 0; }
.product__stock:empty { display: none; }
.product__stock { font-size: var(--text-small); color: var(--alert-text); }
.product__fineprint { border-top: 1px dashed var(--line); padding-top: 0.8rem; margin-top: 0.2rem; }

/* Description, details, care, sizing, shipping */
.product-details {
  max-width: var(--page-max-width);
  margin: var(--space-l) auto 0;
  padding: 0 var(--page-gutter);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.product-details[hidden] { display: none; }
.product-details__item[hidden] { display: none; }
.product-details__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-stretch: var(--narrow);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.product-details__item > summary::-webkit-details-marker { display: none; }
.product-details__item > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--khaki-light);
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 1.2rem;
}
.product-details__item[open] > summary::after { content: "−"; background: var(--blaze); }
.product-details__item > summary:hover::after { background: var(--blaze); }
.product-details__body { padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; max-width: 75ch; }
.product-details__body ul { margin: 0; padding-left: 1.2rem; }
.product-details__body li + li { margin-top: 0.2rem; }
.product-details__body [hidden] { display: none; }

.table-wrap { overflow-x: auto; }
.size-table { border-collapse: collapse; min-width: 320px; font-size: 0.95rem; }
.size-table th, .size-table td { padding: 0.5rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
.size-table thead th {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  border-bottom: 2px solid var(--charcoal);
}
.size-table tbody th { font-family: var(--font-heading); font-weight: 800; }
.size-table td { font-family: var(--font-mono); }

/* =============================================================
   7. SMALLER SCREENS
   ============================================================= */
@media (max-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
  .product__info { position: relative; top: auto; }   /* relative, not static: the card background needs it */
  .cart-page__grid { grid-template-columns: minmax(0, 1fr); }
  /* Below this width the summary drops out of sticky and into normal page
     flow (the page itself scrolls), so the max-height/overflow trick above
     is only needed for the sticky desktop case -- undo it here or a short
     phone screen gets a cramped inner scrollbar instead of just scrolling
     the page like everything else. */
  .cart-summary { position: relative; top: auto; max-height: none; overflow-y: visible; }
}
@media (max-width: 640px) {
  .product__info { padding: var(--space-m) 1.25rem; }
  .product__thumb { width: 64px; height: 64px; }
  .cart-page__list, .cart-summary { padding: 1.25rem; }
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-line__total { grid-column: 2; }
  .cart-empty--page { padding: var(--space-m) 1.25rem; }
}