/* ============================================================
   store.css — wholesale supplies store
   Extends tokens.css + main.css only; no new brand decisions.
   ============================================================ */

.container--narrow { max-width: 820px; }

/* ---------- hero ---------- */
.store-hero { padding-bottom: var(--s-6); }
.store-hero__inner { max-width: 720px; }

/* ---------- banners ---------- */
.store-banner {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.store-banner a { color: var(--color-primary); font-weight: 600; }
.store-banner--note { border-style: dashed; }
.store-banner--test {
  background: repeating-linear-gradient(
    -45deg, #FFF3D6, #FFF3D6 14px, #FFE9B8 14px, #FFE9B8 28px);
  border: 2px solid var(--color-accent);
  color: var(--ink-900);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: var(--s-5);
}
.store-banner--test strong { display: block; letter-spacing: .04em; }

/* ---------- toolbar ---------- */
.store-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.store-filters { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.store-filter {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-700);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.store-filter:hover { border-color: var(--color-primary); color: var(--color-primary); }
.store-filter[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.store-search { min-width: 220px; flex: 1 1 220px; max-width: 340px; margin-left: auto; }

/* ---------- product grid ---------- */
.store-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }

.store-loading, .store-empty {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-600);
  padding: var(--s-6) 0;
  grid-column: 1 / -1;
}

.product-card { display: flex; flex-direction: column; }
/* Whole photo always visible (contain, never cropped); click for a closer look. */
.product-card__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  margin-bottom: var(--s-4);
  border-radius: var(--radius-md);
}
.product-card__zoom:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.product-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--white);
}

/* ---------- lightbox ---------- */
.store-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-6);
  background: rgba(34, 18, 8, .88);
}
.store-lightbox[hidden] { display: none; }
.store-lightbox__img {
  max-width: min(100%, 1100px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.store-lightbox__caption {
  color: var(--kraft-100);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: center;
}
.store-lightbox__close {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--kraft-100);
  border-radius: 999px;
  background: transparent;
  color: var(--kraft-100);
  cursor: pointer;
}
.store-lightbox__close:hover { background: rgba(255, 252, 245, .15); }
.store-lightbox__close .icon { width: 22px; height: 22px; }
.product-card h3 { margin-bottom: var(--s-2); }
.product-card__pkg {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-600);
  margin-bottom: var(--s-3);
}
.product-card__desc { font-size: var(--text-sm); margin-bottom: var(--s-4); }
.product-card__price-row { margin-top: auto; }
.product-card__note {
  font-size: var(--text-xs);
  color: var(--ink-600);
  margin-top: var(--s-2);
}

.qty-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
.qty-stepper button {
  width: 44px; height: 46px;
  border: 0; background: none;
  font-size: var(--text-lg);
  color: var(--color-primary);
  cursor: pointer;
}
.qty-stepper button:hover { background: var(--kraft-100); }
.qty-stepper input {
  width: 58px; height: 46px;
  border: 0;
  border-inline: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-base);
}
.qty-stepper input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* request card in the grid */
.product-card--request {
  justify-content: center;
  text-align: center;
  border-style: dashed;
  background: var(--kraft-100);
}
.product-card--request .card__icon { margin-inline: auto; }

/* ---------- cart ---------- */
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  padding-block: var(--s-4);
  border-bottom: 1px dashed var(--color-border-strong);
}
.cart-line__name { font-weight: 600; }
.cart-line__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-600);
  margin-top: 2px;
}
.cart-line__controls { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }
.cart-line__total { font-family: var(--font-mono); min-width: 84px; text-align: right; }
.cart-remove {
  border: 0; background: none; cursor: pointer;
  color: var(--ink-600);
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-remove:hover { color: var(--color-primary); background: var(--kraft-100); }
.cart-remove .icon { width: 18px; height: 18px; }

.store-totals { margin-top: var(--s-5); }
.store-totals dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-5); }
.store-totals dt { color: var(--ink-700); }
.store-totals dd { font-family: var(--font-mono); text-align: right; }
.store-totals .grand {
  font-weight: 700;
  font-size: var(--text-lg);
  border-top: 2px solid var(--ink-900);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}
.store-totals .grand dd, .store-totals dt.grand { font-family: var(--font-mono); }
.store-totals .placeholder-note {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--ink-600);
}

/* ---------- checkout ---------- */
.store-checkline { margin-top: var(--s-2); }
.store-check { display: flex; gap: var(--s-3); align-items: center; cursor: pointer; }
.store-check input { width: 22px; height: 22px; accent-color: var(--color-primary); }
.store-billing { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px dashed var(--color-border-strong); }
.store-billing legend { margin-bottom: var(--s-4); }
.store-optional { color: var(--ink-600); font-weight: 400; text-transform: none; letter-spacing: 0; }

.store-errors {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: #FDEDEA;
  color: var(--lacquer-900);
  font-size: var(--text-sm);
}
.store-errors ul { margin: 0; padding-left: 1.2em; }

.store-payment { margin-top: var(--s-5); }
#payment-iframe-holder iframe {
  width: 100%;
  min-height: 640px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
}

/* ---------- confirmation ---------- */
.confirm-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  border: 1.5px dashed var(--color-border-strong);
  margin-bottom: var(--s-4);
}
.confirm-badge--test { border-color: var(--color-accent); background: #FFF3D6; }
.confirm-badge--paid { border-color: var(--herb-600); color: var(--herb-600); }
#confirmation-body h3 { margin-top: var(--s-5); }
#confirmation-body .order-num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: .06em;
}

/* ---------- floating cart chip ---------- */
.store-cart-chip {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-5);
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.store-cart-chip:hover { background: var(--brick-500); transform: translateY(-2px); }
.store-cart-chip[hidden] { display: none; }
.store-cart-chip .icon { width: 20px; height: 20px; }

@media (max-width: 559px) {
  .store-search { max-width: none; margin-left: 0; }
  .cart-line { grid-template-columns: 1fr; }
  .cart-line__controls { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .store-cart-chip, .store-filter { transition: none; }
}

/* ---------- equipment carousel ---------- */
.store-equipment { background: var(--color-bg); }
.carousel {
  position: relative;
  margin-bottom: var(--s-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 520ms var(--ease-out);
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding: var(--s-5);
  align-items: center;
}
@media (min-width: 900px) {
  .carousel__slide {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s-7);
    padding: var(--s-7);
  }
}
.carousel__media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--kraft-100);
  border-radius: var(--radius-md);
  cursor: zoom-in;
  overflow: hidden;
}
.carousel__media:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.carousel__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--white);
}
.carousel__body h3 { margin: var(--s-2) 0 var(--s-3); }
.carousel__desc { color: var(--ink-700); margin-bottom: var(--s-2); }
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-top: 1px dashed var(--color-border-strong);
}
.carousel__btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.carousel__btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.carousel__btn .icon { width: 20px; height: 20px; }
.carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.carousel__dot {
  width: 12px; height: 12px;
  padding: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
  /* enlarge the hit area without growing the dot */
  position: relative;
}
.carousel__dot::after { content: ''; position: absolute; inset: -8px; }
.carousel__dot[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* ---------- store sub-nav (Supplies | Equipment | Cart) ---------- */
.store-subnav {
  background: var(--kraft-100);
  border-bottom: 1px solid var(--color-border);
}
.store-subnav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  min-height: 52px;
  padding-block: var(--s-2);
}
.store-subnav__label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-600);
  margin-right: var(--s-3);
}
.store-subnav a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: var(--s-2) var(--s-4);
  min-height: 40px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  color: var(--ink-700);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.store-subnav a:hover { color: var(--color-primary); border-color: var(--color-border-strong); }
.store-subnav a[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.store-subnav__cart { margin-left: auto; }

/* ---------- item numbers ---------- */
.product-card { position: relative; }
.product-card__num {
  position: absolute;
  top: var(--s-4); left: var(--s-4);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--kraft-100);
}
.store-cart-note {
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--color-border-strong);
}

/* ---------- equipment production lines (sub-sections) ---------- */
.equipment-line-nav { margin-top: var(--s-5); }
.equipment-line-nav .store-filter { text-decoration: none; }
.equipment-line + .equipment-line {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px dashed var(--color-border-strong);
}
.equipment-line__head { max-width: 640px; margin-bottom: var(--s-5); }
.equipment-line__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  margin: var(--s-2) 0 var(--s-3);
}
.equipment-line__blurb { color: var(--ink-700); }

/* ---------- Zelle payment step ---------- */
.store-zelle { margin-top: var(--s-5); }
.store-zelle__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  margin: var(--s-2) 0 var(--s-5);
}
.store-zelle__total {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius-md);
  background: var(--ink-900);
  color: var(--kraft-100);
  margin-bottom: var(--s-6);
}
.store-zelle__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--crust-500);
}
.store-zelle__amount {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--white);
}
.store-zelle__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 700px) {
  .store-zelle__grid { grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); }
}
.store-zelle__send { font-size: var(--text-sm); color: var(--ink-700); margin: 0 0 var(--s-1); }
.store-zelle__send strong { color: var(--ink-900); }
.store-zelle__to, .store-zelle__memo {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  padding: var(--s-3) var(--s-4);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  margin: 0 0 var(--s-5);
  word-break: break-all;
}
.store-zelle__memo { font-weight: 600; }
.store-zelle__alt { font-size: var(--text-sm); color: var(--ink-700); margin: calc(-1 * var(--s-3)) 0 var(--s-5); }
.store-zelle__hint {
  font-size: var(--text-sm);
  padding: var(--s-3) var(--s-4);
  border-left: 4px solid var(--crust-500);
  background: #FFF3D6;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.store-zelle__placeholder-note {
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: #FDEDEA;
  color: var(--lacquer-900);
}
.store-zelle__qr { margin: 0; text-align: center; }
.store-zelle__qr img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto var(--s-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
}
.store-zelle__qr figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-600);
}
.store-zelle__actions { margin-top: var(--s-6); align-items: center; }
.btn--xl { font-size: var(--text-base); padding: var(--s-4) var(--s-7); min-height: 60px; }
.store-zelle__fine { font-size: var(--text-xs); color: var(--ink-600); margin-top: var(--s-4); }
.store-zelle__fine a { color: var(--color-primary); }
.confirm-badge--pending { border-color: var(--crust-500); background: #FFF3D6; color: var(--ink-900); }

/* ---------- product option select (e.g. Electric / Gas) ---------- */
.option-select {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.option-select__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-600);
}
.option-select select {
  min-height: 46px;
  padding: var(--s-2) var(--s-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-900);
}
.option-select select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }