/* =============================================================================
   Del Plaza — shop
   Shop / product listing page — product card grid.
   =============================================================================*/

/* Shop Page — (/shop.php)*/

.shop-page {
  padding-top: 0;
}

/* ---- Breadcrumb ----*/
.shop-breadcrumb {
  padding: var(--spacing-xs) 0 var(--spacing-xxs);
}

.shop-breadcrumb .breadcrumb {
  margin-bottom: 0;
}

.shop-breadcrumb .breadcrumb-item {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.shop-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--cognac);
  content: "\203A";
}

.shop-breadcrumb .breadcrumb-item a {
  color: var(--color-content-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.shop-breadcrumb .breadcrumb-item a:hover {
  color: var(--cognac);
}

.shop-breadcrumb .breadcrumb-item.active {
  color: var(--color-content-heading);
  font-weight: 600;
}

/* ---- Page Title ----*/
.shop-page__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-xxs);
  padding-bottom: var(--spacing-xxs);
  border-bottom: 1px solid var(--color-border-primary);
}

.shop-page__lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-content-primary);
  max-width: 640px;
  margin-bottom: var(--spacing-md);
}

.shop-page__lead strong {
  font-weight: 600;
  color: var(--deep-navy);
}

.shop-page + .footer {
  margin-top: var(--spacing-sm);
}

/* =============================================================================
   The shelf's switcher — Currently Available / Show All
   One radio group, and the two readings of the department behind it. The browser
   runs the control; the stylesheet carries the switching, so the shelf reads
   correctly before any script loads. The reading in hand is marked by a cognac
   baseline and by a leading dot — a mark, not a tint — so it is never colour
   alone that says which reading is being shown.
   =============================================================================*/

.shop-catalogue {
  margin-bottom: var(--spacing-sm);
}

/* ---- The control ----*/
.shop-scope {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 var(--spacing-md);
  padding: 0;
  border: 0;
}

.shop-scope__option {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

/* The input stays in the tree and stays focusable; only its face is taken away.
   (clip, never display:none — a hidden radio cannot be reached or announced.) */
.shop-scope__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- The option, read as a label: square top, a 3px foot ----*/
.shop-scope__label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-nano);
  padding: var(--spacing-nano) var(--spacing-sm);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-content-muted);
  background-color: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  user-select: none;
  transition: color 0.2s var(--ease-out),
              background-color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
}

/* The leading mark: the shape that says which reading is in hand, and never a tint
   alone. It is always in the flow — only its opacity changes — so selecting a
   reading can never move a letter. */
.shop-scope__label::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-border-accent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

/* ---- Hover, on the option not in hand ----*/
.shop-scope__option:hover .shop-scope__label {
  color: var(--color-interactive-primary);
  background-color: rgba(162, 99, 48, 0.05);
  border-bottom-color: var(--color-border-primary);
}

/* ---- The reading in hand ----
   Both readings are drawn at ONE weight. A heavier label is a wider label, and a
   label that re-measures when it is put in hand breaks its own line on a narrow
   lane — the rail jumping every time the reader switches. So the weight is held
   and the reading in hand is carried by the marks: the cognac baseline, the
   leading dot, and the white ground. */
.shop-scope__input:checked + .shop-scope__label {
  color: var(--color-content-heading);
  background-color: var(--color-surface-primary);
  border-bottom-color: var(--color-border-accent);
}

.shop-scope__input:checked + .shop-scope__label::before {
  opacity: 1;
  transform: scale(1);
}

/* ---- Focus: a shape, not a colour ----*/
.shop-scope__input:focus-visible + .shop-scope__label {
  outline: 2px solid var(--color-border-accent);
  outline-offset: 3px;
}

/* ---- Client-side switching, stylesheet first ----
   "Currently Available" hides the goods the emporium does not hold today. The
   script settles the same reading on the cells for a browser without :has(), and
   the two agree, so the shelf never flickers between them. */
.shop-catalogue:has(#shop-scope-available:checked) .shop-catalogue__cell--unavailable {
  display: none;
}

/* ---- A good the emporium does not hold today, as "Show All" shows it ----
   The picture keeps its own weight and carries one mark: the drawn blinds, set in
   white and laid over the image, centred on it. The mark is drawn, never written,
   so the badging that belongs to the catalogue is not re-read as an availability
   one, and the switcher's own status line is what speaks the reading. It sits above
   the picture but beneath the card's own stickers and the wishlist, and is
   weightless to the pointer. */
.shop-catalogue__cell--unavailable .product-card__image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("../../assets/svg/blinds-drawn.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45%;
  pointer-events: none;
}

/* ---- The narrow lanes: the two options share the row, and always do ----
   On a phone the two labels cannot sit side by side at their desk proportions, and
   a wrapped rail is worse than a small one: the second option falls to a line of its
   own, then climbs back up the moment the first stops being the selected one and its
   letters narrow — the rail jumping under the reader's thumb. So the rail does not
   wrap. Each option takes an equal share of the width, and the two labels are drawn
   at one weight in both states, so no part of the rail's shape depends on which
   reading is in hand; the type comes down until both fit. A lane too narrow for even
   that breaks the longer label over two lines rather than pushing the two apart, and
   the two buttons keep one height, because the option is stretched and the label
   fills it. */
@media (max-width: 575.98px) {
  .shop-scope {
    flex-wrap: nowrap;
    gap: var(--spacing-quark);
  }

  .shop-scope__option {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  .shop-scope__label {
    flex: 1;
    justify-content: center;
    text-align: center;
    padding-left: var(--spacing-quark);
    padding-right: var(--spacing-quark);
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    line-height: 1.25;
    white-space: normal;
  }
}