/* ---------- The shop ---------- */

/* Used by the search field's label. The site had no such class, so a
   <span class="sr-only"> was a visible one. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--rose-deep);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.linkish:hover { color: var(--rose-dark); }

/* ---------- listing ---------- */
.shop-bar {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.shop-search { flex: 1 1 16rem; }
.shop-search input {
  width: 100%; padding: .7rem 1rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--white); color: var(--ink); font: inherit; font-size: .95rem;
}
.shop-search input:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 1px; }

.shop-cats { display: flex; flex-wrap: wrap; gap: .5rem; }
.shop-chip {
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: .45rem .9rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink-soft);
}
.shop-chip:hover { border-color: var(--rose-deep); color: var(--rose-deep); }
.shop-chip.is-on { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }

.shop-count { font-size: .82rem; color: var(--ink-soft); margin: 0 0 1.2rem; }
.shop-none { text-align: center; padding: 2.5rem 0; color: var(--ink-soft); }

.shop-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

/* [hidden] sets display:none at the UA level, which any display of our
   own beats. The filter set the attribute, the count went down, and all
   five cards stayed on screen. */
.shop-card[hidden] { display: none !important; }

.shop-card {
  display: flex; flex-direction: column; gap: .3rem;
  text-decoration: none; color: inherit;
  transition: transform .18s ease;
}
.shop-card:hover { transform: translateY(-2px); }
.shop-card:hover .shop-title { color: var(--rose-deep); }

.shop-shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--white); margin-bottom: .55rem; aspect-ratio: 1 / 1;
}
.shop-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-cat { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.shop-title { font-size: .98rem; line-height: 1.35; transition: color .15s ease; }
.shop-price { font-size: .95rem; color: var(--ink-soft); }

/* ---------- product ---------- */
.crumbs { font-size: .84rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--rose-deep); }

.pdp { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 901px) { .pdp { grid-template-columns: 1fr 1fr; } }

.pdp-main {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--white); aspect-ratio: 1 / 1;
}
.pdp-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdp-thumbs { display: flex; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.pdp-thumb {
  width: 68px; height: 68px; padding: 0; cursor: pointer;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--white);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.is-on { border-color: var(--rose-deep); }
.pdp-thumb:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 1px; }

.pdp-price { font-size: 1.5rem; font-family: var(--font-display); margin: .2rem 0 .9rem; }
.pdp-bullets { padding-left: 1.1rem; line-height: 1.85; color: var(--ink-soft); font-size: .92rem; }
.pdp-heads {
  border-left: 3px solid var(--coral); padding: .7rem 0 .7rem 1rem;
  background: var(--cream-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .9rem; color: var(--ink-soft);
}
.pdp-heads b { color: var(--ink); }

.pdp-buy { margin: 1.6rem 0; }

/* The button looks like any other and is dimmed by nothing, because
   nothing on the page says the product cannot be bought until somebody
   tries. The knock is the visible half of the answer to a press and the
   live region below is the half a screen reader gets.

   Keyed on .is-knocked alone. It used to be .btn-oos.is-knocked, and
   dropping btn-oos from the button left the press with no feedback at
   all until this followed it. */
.is-knocked { animation: oos-knock .4s ease; }
@keyframes oos-knock {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .is-knocked { animation: none; outline: 2px solid var(--rose-deep); outline-offset: 2px; }
}

.pdp-specs {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem;
  margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .88rem;
}
.pdp-specs dt { color: var(--ink-soft); }
.pdp-specs dd { margin: 0; }

/* The tile that stands where a photograph will go. Deliberately plain:
   a soft ground and the category name, so a grid of them reads as
   "pictures pending" rather than as a grid of failures. It occupies the
   same square the image will, so nothing moves when the real one lands. */
.shop-noshot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg,
      var(--cream-2) 0 10px, var(--white) 10px 20px);
  color: var(--ink-soft);
}
.shop-noshot span {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--white); border: 1px solid var(--line);
  padding: .28rem .7rem; border-radius: 100px;
}
.pdp-main .shop-noshot { aspect-ratio: 1 / 1; }
.pdp-main .shop-noshot span { font-size: .78rem; padding: .4rem 1rem; }