/* Shop listing, product page and reservation confirmation. */

/* ---------- Category links ---------- */
.category-nav ul { display: flex; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: 0 0 4px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.category-nav li { flex: none; scroll-snap-align: start; }
/* On phones the row runs to the screen edges and fades where more categories are hidden. */
@media (max-width: 899px) {
  .category-nav ul { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .category-nav ul::-webkit-scrollbar { display: none; }
  .category-nav ul.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .category-nav ul.has-more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
  .category-nav ul.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
}
.category-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2);
  color: var(--heading); font-weight: 500; white-space: nowrap;
}
.category-nav a:hover { text-decoration: none; border-color: #b9c7da; color: var(--heading); }
.category-nav a[aria-current="page"] { background: var(--selected-bg); border-color: var(--selected-bg); color: var(--selected-text); }
.category-nav__count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.category-nav a[aria-current="page"] .category-nav__count { color: var(--selected-muted); }

/* ---------- Layout ---------- */
.shop-section { padding-top: clamp(32px, 4vw, 48px); }
.shop-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1000px) {
  .shop-layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-7); }
}
.shop-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
.shop-sidebar__note { display: none; }
@media (min-width: 1000px) { .shop-sidebar__note { display: block; } }
.shop-sidebar__title { font-size: 1rem; margin-bottom: var(--space-3); }

.shop-filters { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--mist); }
.shop-filters__toggle {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px;
  font-weight: 600; color: var(--heading); cursor: pointer; list-style: none;
}
.shop-filters__toggle::-webkit-details-marker { display: none; }
.shop-filters__toggle::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--heading); border-bottom: 2px solid var(--heading); transform: rotate(45deg); transition: transform .15s ease; }
.shop-filters[open] .shop-filters__toggle::after { transform: rotate(-135deg); }
.shop-filters__toggle .icon { width: 20px; height: 20px; color: var(--blue); }
.shop-filters__badge { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; background: var(--blue); color: var(--white); padding: 2px 7px; border-radius: 999px; }
.shop-filters__form { display: flex; flex-direction: column; gap: var(--space-4); padding: 4px 18px 18px; }
@media (min-width: 1000px) {
  .shop-filters__toggle { cursor: default; pointer-events: none; }
  .shop-filters__toggle::after { display: none; }
}

.reserve-steps { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.reserve-steps li { display: flex; gap: 12px; align-items: flex-start; }
.reserve-steps__num {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 999px; background: var(--blue-tint); color: var(--blue);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
}
.reserve-steps strong { color: var(--heading); }

/* ---------- Results ---------- */
.shop-results__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.shop-results__count { font-weight: 600; color: var(--heading); }
.shop-sort { display: flex; align-items: center; gap: 10px; }
.shop-sort__label { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.select--sm { min-height: 44px; padding-block: 8px; width: auto; }

.product-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.product-grid > li { display: flex; }
@media (max-width: 559px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 359px) { .product-grid { grid-template-columns: 1fr; } }

/* ---------- Product card ---------- */
.product-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
.product-card:hover { border-color: #b9c7da; box-shadow: var(--shadow-soft); }
.product-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.product-card__media { aspect-ratio: 4 / 3; background: var(--mist); display: grid; place-items: center; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__placeholder { width: 56px; height: 56px; color: var(--muted); stroke-width: 1.2; }
.product-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex-grow: 1; }
.product-card__meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.product-card__title { font-size: 1.0625rem; line-height: 1.3; font-stretch: normal; }
.product-card__title a { color: var(--heading); }
.product-card__title a::after { content: ""; position: absolute; inset: 0; }
.product-card__title a:hover { text-decoration: none; }
.product-card__title a:focus-visible { outline: none; }
.product-card__text { font-size: var(--fs-small); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
@media (max-width: 559px) {
  .product-card__body { padding: 12px; }
  .product-card__title { font-size: 0.9375rem; }
  .product-card__text { display: none; }
}

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.price__now { font-size: 1.1875rem; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.price__was { color: var(--muted); font-size: var(--fs-small); }
.price__request { font-weight: 600; color: var(--heading); }
.price--lg .price__now { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-stretch: var(--stretch-wide); }
.price--lg .price__was { font-size: 1rem; }

.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.stock--in { color: var(--success); }
.stock--low { color: var(--warning); }
.stock--out { color: var(--muted); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.pagination__status { font-size: var(--fs-small); color: var(--muted); }

.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  border: 1px dashed #c3cfdd; border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px);
}
.empty-state__icon { width: 40px; height: 40px; color: var(--blue); }
.empty-state p { max-width: 52ch; }

/* ---------- Product page ---------- */
.page-head--compact { padding-block: 18px; }
.product-section { padding-top: clamp(28px, 4vw, 48px); }
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
/* Long model codes or pasted web addresses wrap instead of widening the page. */
.product-info { overflow-wrap: anywhere; }
@media (min-width: 900px) { .product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); } }

.product-gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.product-gallery__main {
  position: relative;
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}

/* ---- Stepping through the photos ---- */
.gallery-step {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--heading);
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(11, 27, 51, 0.5);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.gallery-step--prev { left: 10px; }
.gallery-step--next { right: 10px; }
.gallery-step .icon { width: 22px; height: 22px; }
.gallery-step:hover { border-color: var(--blue); color: var(--blue); }
.gallery-step:active { transform: translateY(-50%) scale(.94); }
.gallery-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.no-js .gallery-step { display: none; }

/* Which photo you are on, e.g. 3 / 8 */
.gallery-count {
  position: absolute; bottom: 10px; right: 12px;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted);
}
.no-js .gallery-count { display: none; }

/* On a narrow phone the arrows sit tight to the edges. */
@media (max-width: 420px) {
  .gallery-step--prev { left: 6px; }
  .gallery-step--next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-step { transition: none; }
  .gallery-step:active { transform: translateY(-50%); }
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__placeholder { width: 96px; height: 96px; color: var(--muted); stroke-width: 1; }
/* Thumbnails wrap onto a second row rather than hiding off the side of a phone. */
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 88px)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.product-gallery__thumb { display: block; width: 100%; border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--mist); }
.product-gallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.product-gallery__thumb[aria-current="true"] { border-color: var(--blue); }

.product-info { display: flex; flex-direction: column; gap: var(--space-4); }
.product-info__title { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); }
.product-info__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding-block: var(--space-4); border-block: 1px solid var(--line-soft); }

.reserve-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1000px) { .reserve-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); } }
.reserve-layout .reserve-steps { font-size: 1rem; }
.textarea--short { min-height: 100px; }

/* Side panels only stay pinned while scrolling when the whole panel fits on screen. */
@media (min-width: 1000px) and (min-height: 860px) {
  .shop-sidebar { position: sticky; top: 108px; }
}