/* ==========================================================================
   MGS Holdings - front store
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow);
}

/* Three groups: wordmark left, navigation centred, search and cart right. */
/* Vertical padding only: the horizontal gutter comes from .container, so the
   header lines up with the content below it at every screen size. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-height);
  padding-block: 10px;
}

/* Wordmark and tagline both align to the left edge of the brand block. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  color: #fff;
  text-decoration: none;
}

.wordmark--footer {
  font-size: 1.25rem;
  color: #fff;
}

.brand__tagline {
  display: block;
  margin-top: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  color: #cbd5e1;
  white-space: nowrap;
}

/* The auto margins centre the navigation in whatever space the wordmark and
   the actions leave, rather than pinning it to either side. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}

.site-nav__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a,
.site-nav button {
  position: relative;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #e2e8f0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}

.site-nav a:hover,
.site-nav button:hover {
  color: #fff;
}

/* The active catalogue tab: crimson label with a rule beneath it. This is the
   only nav item that carries a state, because it is the only one that changes
   what the page is showing. */
.nav-tab[aria-selected='true'] {
  color: var(--crimson);
}

.nav-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--crimson);
  border-radius: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.search {
  position: relative;
  width: 250px;
}

.search .input {
  padding: 9px 38px 9px 14px;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface);
  border-color: var(--surface);
}

.search .input::placeholder {
  color: var(--text-muted);
}

.search .input:focus {
  border-color: var(--crimson);
}

.search__icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.cart-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.cart-btn svg {
  width: 23px;
  height: 23px;
}

.cart-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.cart-btn__count {
  position: absolute;
  top: 1px;
  right: 1px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--crimson);
  border: 2px solid var(--navy);
  border-radius: 999px;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* Halved from clamp(52px, 7vw, 100px). This is the space above the heading and
     below the buttons, so it sets the hero's height. */
  padding: clamp(26px, 3.5vw, 50px) 0;
  color: #fff;
  background-color: var(--navy);
  background-image: linear-gradient(rgba(11, 19, 43, 0.92), rgba(11, 19, 43, 0.92)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px);
}

/* Layer that holds the cut-out product.
   The hero's own navy and grid cover the whole band behind it, so there is no
   photographic background to darken and no readability gradient is needed: the
   copy sits on flat colour. */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The product group.
   Flush with the right edge of the hero, and sized by height rather than width so
   the two cut-outs scale together: their proportions differ, and driving both from
   one height is what keeps the pair inside the space left beside the copy at every
   screen size. The group carries no mask of its own; the fade belongs to the
   right-hand unit, which is the one that has to dissolve into the navy. */
.hero__products {
  position: absolute;
  right: 0;
  /* Anchored by the bottom edge rather than centred, so growing the group sends
     it upward and the base stays put. */
  bottom: clamp(34px, 4.5vw, 64px);
  display: flex;
  align-items: flex-end;
  /* Separation between the two units. Widening this moves the left-hand one
     further left, since the group is anchored by its right edge. */
  gap: clamp(14px, 3.4vw, 96px);
  /* This is the group's *layout* height. The right-hand unit fills it and is then
     scaled down visually, so this figure still governs how much width the group
     reserves, and therefore where the left-hand unit sits.
     The cap is set by the band, not by taste. Above roughly 1430px the hero's
     padding and the group's bottom offset have both stopped growing, which fixes
     the band at about 405px; less the 64px bottom offset that leaves ~340px.
     Raising this further needs a taller hero, not a bigger number. */
  height: clamp(190px, 19vw, 318px);
}

.hero__product {
  display: block;
  width: auto;
  height: 100%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

/* The right-hand unit, at 60% of the size it lays out at.
   Scaled rather than resized on purpose. A transform does not touch layout, so
   the group keeps the width it had and the left-hand unit stays exactly where it
   was; and an origin of bottom right pins those two edges while the aspect ratio
   comes along for free. Changing its height instead would have narrowed the group
   and dragged the left-hand unit back towards the middle of the hero. */
.hero__product--first {
  transform: scale(0.6);
  transform-origin: 100% 100%;

  /* The fade that dissolves the spray into the navy. It sits on this image rather
     than on the group so its stops are measured against the gun itself: on the
     group they shifted across the gun whenever the other unit or the gap resized,
     which is why the spray used to break up at slightly different points at
     different widths. Inside a transformed element the mask scales with it, so
     the fade keeps its place on the spray at any size. */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 62%,
    rgba(0, 0, 0, 0.55) 80%,
    rgba(0, 0, 0, 0.12) 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 62%,
    rgba(0, 0, 0, 0.55) 80%,
    rgba(0, 0, 0, 0.12) 93%,
    transparent 100%
  );
}

/* The left-hand unit still stands shorter than the right, which sets the
   hierarchy between them, but it scales on its own rather than as a fixed share
   of the group, so it can take up the slack on a wide screen.
   It is measured against where the heading and body text actually stop, not
   against the copy column: the column reserves close to half the hero but the
   longest line of text only reaches about a third of it, and the products are on
   their own layer, so the reserved-but-empty part of the column was never in the
   way. That is the room this claims back.

   The growth rate is held at 12.5vw rather than pushed higher because this unit
   is bottom-anchored: making it taller raises its top edge, and around 1440px
   that top edge meets the bottom of a two-line heading. The services heading is
   the long one, so that is the case this is set against. */
.hero__product--second {
  height: clamp(130px, 12.5vw, 268px);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* Width is whichever is smaller: a comfortable reading measure, or its share of
   the hero. The share is 46% rather than 50% to free room for the product group;
   it still clears the longest configured heading line by about 20px at every
   width, which is what keeps the services heading on two rows. */
.hero__content {
  max-width: min(720px, 46%);
}

/* One configured line per row. */
.hero__line {
  display: block;
}

/* Scaled so the longest heading line holds one row from desktop down to tablet.
   At the previous 3rem, "Application, Maintenance" alone was wider than the
   column, so a two-line heading came out as three. */
.hero h1 {
  margin-bottom: 10px;
  font-size: clamp(1.65rem, 2.9vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* The tagline, in crimson under the heading. */
.hero__kicker {
  margin-bottom: 18px;
  font-size: clamp(0.92rem, 1.4vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--crimson);
}

.hero__body {
  max-width: 48ch;
  margin-bottom: 30px;
  color: #cbd5e1;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__actions .btn {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.92rem;
}

.hero__actions .btn::after {
  content: '\203a';
  font-size: 1.15em;
  line-height: 1;
}

/* --- Sections ------------------------------------------------------------ */

.section {
  padding: 64px 0;
}

.section--surface {
  background: var(--surface);
}

.section__head {
  margin-bottom: 32px;
}

.section__title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  text-transform: uppercase;
}

.section__subtitle {
  max-width: 62ch;
  margin: 0;
  color: var(--text-muted);
}

/* --- Catalog grid -------------------------------------------------------- */

.catalog-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* These two lines are meant to read as a single row, so they are not held to
   the 62ch measure that paragraph text uses elsewhere. No `nowrap`: on a narrow
   screen they should still wrap rather than push the page sideways. */
.catalog-toolbar .section__subtitle,
#how-it-works .section__subtitle {
  max-width: none;
}

.result-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* A fixed column count rather than auto-fill, because the page size is derived
   from columns x rows: if the grid reflowed to a different number of columns the
   last row would come out ragged. The desktop count arrives from config as
   --catalog-columns-desktop; the steps below are what narrower screens use. */
.grid {
  --catalog-columns: var(--catalog-columns-desktop, 5);
  display: grid;
  grid-template-columns: repeat(var(--catalog-columns), minmax(0, 1fr));
  gap: 24px;
}

/* The configured count holds across desktop and laptop widths. Below roughly
   1150px five cards would each be under 200px wide, which is where the title,
   price and buttons stop fitting, so the grid steps down from there. The gap
   tightens first, because losing 6px of gutter costs less than losing a column. */
@media (max-width: 1400px) {
  .grid {
    gap: 18px;
  }
}

@media (max-width: 1150px) {
  .grid {
    --catalog-columns: 4;
  }
}

@media (max-width: 900px) {
  .grid {
    --catalog-columns: 3;
  }
}

@media (max-width: 700px) {
  .grid {
    --catalog-columns: 2;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .grid {
    --catalog-columns: 1;
  }
}

.pagination {
  margin-top: 36px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__media--empty {
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 18px;
}

.card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.card__price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
}

.card__price--quote {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.card__excerpt {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Flex rather than two fixed columns, so the buttons sit side by side on a wide
   card and stack on a narrow one without needing a breakpoint for every column
   count. The card decides, not the viewport. */
.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.card__actions .btn {
  flex: 1 1 auto;
  min-width: 92px;
}

/* --- How it works -------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  padding: 22px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.step__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  background: var(--crimson);
  border-radius: 50%;
}

.step p {
  margin: 0;
  font-size: 0.9rem;
}

/* --- Reviews ------------------------------------------------------------- */

/* Review cards sit on the same grid as the catalogue, so the two sections share
   their column count and line up at every width. */
/* Shallower than a catalogue tile: a review card is mostly words, and the image
   is there to identify the item rather than to sell it. */
.review-card__media {
  aspect-ratio: 16 / 9;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.review-card .card__body {
  gap: 6px;
  padding: 14px;
}

.review-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-card__media--empty {
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.review-card__item {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.review-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.review-card__author {
  color: var(--text-muted);
}

/* Held to two lines, and reserving those two lines whether or not the text
   fills them, so a row of cards is the same height regardless of how long each
   excerpt happens to be. */
.review-card__comment {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  min-height: 3.2em;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Prev and next only. No page numbers on this section. */
.pagination--simple {
  margin-top: 28px;
}

/* --- Full review --------------------------------------------------------- */

.review-view {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
}

.review-view__media {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.review-view__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-view__placeholder {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.review-view__item {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
}

.review-view__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.review-view__author {
  font-weight: 600;
}

.review-view__comment {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  white-space: pre-line;
}

/* An inert control rather than a hidden one: it keeps its place and explains
   itself on hover, on focus and on click. */
.btn.is-unavailable {
  cursor: not-allowed;
  color: var(--text-muted);
  border-color: var(--border);
}

.btn.is-unavailable:hover {
  background: var(--danger-soft);
  border-color: #fca5a5;
  color: var(--danger);
}

@media (max-width: 820px) {
  .review-view {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* --- Item detail modal --------------------------------------------------- */

.item-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

.gallery__main {
  aspect-ratio: 4 / 3;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.gallery__thumb {
  width: 62px;
  height: 62px;
  padding: 0;
  background: var(--canvas);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}

.gallery__thumb[aria-current='true'] {
  border-color: var(--crimson);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-detail__price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
}

.item-detail__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Cart ---------------------------------------------------------------- */

.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.cart-line__media {
  width: 56px;
  height: 56px;
  background: var(--canvas);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__name {
  font-size: 0.9rem;
  font-weight: 700;
}

.cart-line__price {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.qty {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty button {
  width: 30px;
  height: 30px;
  font: inherit;
  font-size: 1rem;
  background: var(--canvas);
  border: 0;
  cursor: pointer;
}

.qty button:hover {
  background: var(--border);
}

.qty input {
  width: 46px;
  height: 30px;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
  border: 0;
  border-inline: 1px solid var(--border);
}

.cart-line__remove {
  align-self: start;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--danger);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.cart-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-weight: 800;
  font-size: 1.1rem;
}

.cart-note {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* A line that is still listed but cannot be ordered right now. Dimmed rather than hidden,
   because the customer chose it and may want it back next week. */
.cart-line--blocked {
  opacity: 0.72;
}

.cart-line__blocked {
  margin: 2px 0 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #92400e;
}

/* Something the store stopped listing since this cart was filled.
   Deliberately not red. Nothing has gone wrong — an item was withdrawn and the cart
   followed — and this used to be an error toast on page load, which made a healthy
   website greet people with what looked like a fault. */
.cart-note--dropped {
  padding: 10px 12px;
  color: #78350f;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- Tracking ------------------------------------------------------------ */

.track-result {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.track-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px;
  background: var(--canvas);
  border-radius: var(--radius);
}

.track-meta dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.track-meta dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.timeline {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
  padding-bottom: 14px;
}

.timeline__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 50%;
}

.timeline li[data-state='done'] .timeline__dot,
.timeline li[data-state='current'] .timeline__dot {
  color: #fff;
  background: var(--crimson);
}

.timeline__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.timeline li[data-state='done'] .timeline__label {
  color: var(--text);
}

.timeline li[data-state='current'] .timeline__label {
  color: var(--text);
  font-weight: 800;
}

.timeline--cancelled .timeline__dot {
  background: var(--danger-soft);
  color: var(--danger);
}

/* --- Tracked order items ------------------------------------------------- */

/* Each row is a control with a panel under it, so no markers and no indent: the
   rules between rows do the separating. */
.track-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.track-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  list-style: none;
}

.track-item:last-child {
  border-bottom: 0;
}

.track-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.track-item__name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--crimson);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.track-item__name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.track-item__chevron {
  font-size: 1.1em;
  transition: transform var(--transition);
}

.track-item__name[aria-expanded='true'] .track-item__chevron {
  transform: rotate(90deg);
}

.track-item__qty {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.track-item__detail {
  padding: 4px 0 16px;
}

.track-item__gallery {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.track-item__gallery img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.track-item__facts {
  display: flex;
  gap: 26px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}

.track-item__facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.track-item__facts dd {
  margin: 2px 0 0;
  font-weight: 700;
}

.track-item__rich {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.track-item__note,
.track-item__gone p {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-muted);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  padding: 56px 0 0;
  color: #cbd5e1;
  background: var(--navy);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}

.site-footer h3 {
  margin-bottom: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.site-footer li {
  margin-bottom: 8px;
}

.site-footer a {
  color: #cbd5e1;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__tagline {
  font-size: 0.85rem;
  color: #94a3b8;
}

/* Contact lines and social links share this, so the footer columns align and an
   icon never sits differently on one than the other. */
.icon-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
}

/* Inherits the link colour, so it lightens on hover with the label. The small
   offset keeps the mark on the first line when the text wraps, which an address
   will do in a narrow column. */
.ui-icon {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
}

.pending-note {
  font-size: 0.85rem;
  color: #64748b;
  font-style: italic;
}

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-weight: 700;
  color: #fff;
  background: #25d366;
  border-radius: var(--radius);
  text-decoration: none;
}

.whatsapp-btn:hover {
  background: #1eb355;
}

.whatsapp-btn[aria-disabled='true'] {
  background: #475569;
  cursor: not-allowed;
}

/* One row: copyright on the left, build credit centred.
   Three columns with the credit in the middle one means it centres against the
   footer itself, not against whatever space the copyright leaves over. The
   empty third column is what makes that true. */
.site-footer__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: 0.8rem;
  color: #64748b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Only the storefront footer's grid placement stays here. The look of the credit itself
   moved to base.css when the workspace footer bar and the sign-in card needed the same
   thing — three copies of it would have been three places for it to drift. */
.built-by {
  grid-column: 2;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: 14px;
  }

  .header-actions {
    margin-left: auto;
  }

  /* Navigation drops to its own row and scrolls sideways if it has to. */
  .site-nav {
    order: 3;
    width: 100%;
    margin-inline: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* On a smaller laptop the machine steps down so it clears the copy without
   having to move any further right. */
@media (max-width: 1100px) {
  /* Below this there is not room for two units beside the copy, so the group
     drops to the right-hand one alone rather than shrinking both until neither
     reads. This was 1200px; the pair now scale from their own heights rather than
     as fixed shares, so they still clear the longest heading line at 1100 with
     room to spare, and dropping the second unit at 1200 was leaving a wide hole
     beside the copy for no reason. */
  .hero__product--second {
    display: none;
  }

  /* With only one unit showing, the copy no longer has to give up width for the
     group and takes its half back. It needs it: at the small end of this range
     the 46% column is narrower than the longest heading line, which would put
     the services heading back onto three rows. */
  .hero__content {
    max-width: min(720px, 50%);
  }
}

@media (max-width: 820px) {
  /* Below this width the copy needs the full column, and a cut-out sitting
     behind the text would only compete with it. The navy and grid carry the
     hero on their own. */
  .hero__product {
    display: none;
  }

  .hero__content {
    max-width: none;
  }

  .item-detail {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section {
    padding: 44px 0;
  }
}

@media (max-width: 640px) {
  /* Too narrow for three columns: the two stack, both kept to the left rather
     than one centred under the other. */
  .site-footer__bar {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 10px;
  }

  .built-by {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .search {
    width: 165px;
  }

  .wordmark {
    font-size: 1.15rem;
  }

  .brand__tagline {
    font-size: 0.52rem;
    letter-spacing: 0.03em;
  }

  .site-nav a,
  .site-nav button {
    padding: 10px 11px;
    font-size: 0.86rem;
  }

  .nav-tab[aria-selected='true']::after {
    left: 11px;
    right: 11px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ── The server-rendered item page ──────────────────────────────────────────
   Served at /item/<id> by api/item.mjs. A real page with its own title, description
   and share card, so that a product can be found by name and so that pasting its link
   into WhatsApp produces something useful — neither of which works when the only URL
   on the site is the catalogue and the item lives in a dialogue.

   Deliberately plain, and reusing the existing tokens and button styles rather than
   restating them. This page is a landing surface and a share card: it carries the facts
   the database owns and hands off to the storefront for the cart, the gallery and the
   reviews. Styling it as a second storefront would invite it to become one, which is
   the drift this split is trying to avoid.
   ────────────────────────────────────────────────────────────────────────── */

.item-page {
  background: var(--canvas);
}

.item-page__bar {
  padding: 16px 20px;
  background: var(--navy);
}

.item-page__home {
  text-decoration: none;
  color: #fff;
}

.item-page__main {
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.item-page__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.item-page__crumbs a {
  color: var(--text-muted);
}

.item-page__card {
  display: grid;
  /* One column on a phone, two from the point where an image and a column of text both
     have room. Images are optional on an item, so the text column has to look right
     alone as well as beside one. */
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

@media (min-width: 760px) {
  .item-page__card {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: start;
    padding: 32px;
  }

  .item-page__card--empty {
    grid-template-columns: 1fr;
  }
}

.item-page__media {
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.item-page__media img {
  display: block;
  width: 100%;
  height: auto;
}

.item-page__body h1 {
  margin: 0 0 10px;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--navy);
}

.item-page__price {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--crimson);
}

.item-page__availability {
  margin: 0 0 18px;
}

.item-page__description {
  margin: 0 0 22px;
  line-height: 1.65;
  color: var(--text);
}

.item-page__actions {
  margin: 0 0 14px;
}

.item-page__note,
.item-page__back {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.item-page__back {
  margin-top: 24px;
  text-align: center;
}