/* GlorySmile — shop page (body[data-page='shop']).
   Editorial grid of the five products, Glory Kit band, trust facts. */

/* ---------- Title ---------- */
.shop-head {
  display: grid; gap: 1rem;
  padding-top: clamp(2.5rem, 7vw, 7.5rem);
  padding-bottom: clamp(2.25rem, 5vw, 5rem);
}
.shop-head__title { font-size: var(--t-3xl); }
.shop-head__line { font-size: var(--t-l); line-height: 1.35; color: var(--ink-2); max-width: 22ch; }
@media (min-width: 900px) {
  .shop-head { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; }
  .shop-head__line { padding-bottom: 0.7em; text-align: right; }
}

/* ---------- Product grid ---------- */
.shop-grid__list {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 2vw, 1.5rem);
  row-gap: clamp(2.25rem, 6vw, 3.5rem);
}
.shop-tile--hero { grid-column: 1 / -1; }
.shop-tile--hero .tile__name {
  font-family: var(--f-display); font-weight: 300; font-size: var(--t-xl);
  letter-spacing: -0.03em; line-height: 1.05;
}
.shop-tile--hero .tile__price { font-size: var(--t-l); }
/* Small tiles: names in the text face (h2 would otherwise pull in the display face) */
.shop-tile:not(.shop-tile--hero) .tile__name { font-family: var(--f-text); font-weight: 600; letter-spacing: -0.01em; }
/* Packshots get a cover crop so non-square media never shows the photo's own edge */
.shop-tile .tile__media img { object-fit: cover; }

/* Phones: hero full width, then two columns. The "+" floats on the image corner
   so the name gets the full tile width (100cqi = tile width = square media height). */
@media (max-width: 639px) {
  .shop-tile { gap: 0.75rem; }
  .shop-tile:not(.shop-tile--hero) { container-type: inline-size; }
  .shop-tile:not(.shop-tile--hero) .tile__name { font-size: var(--t-s); line-height: 1.25; }
  .shop-tile:not(.shop-tile--hero) .tile__price { font-size: var(--t-s); }
  .shop-tile:not(.shop-tile--hero) .icon-btn {
    position: absolute; right: 8px; top: 8px; top: calc(100cqi - 52px);
    width: 44px; height: 44px;
  }
  .shop-tile:not(.shop-tile--hero) .tile__row { padding-inline: 0; }
  .tile--night.shop-tile .tile__row { padding-inline: 0.75rem; }
}

/* Tablets: hero becomes a wide crop */
@media (min-width: 640px) and (max-width: 1023px) {
  .shop-tile--hero .tile__media { aspect-ratio: 5 / 4; }
}

/* Desktop: 6-column editorial grid.
   Row 1-2: large hero (4 cols, 2 rows) beside two small tiles stacked.
   Row 3: two medium tiles, the LED one in the dark room. */
@media (min-width: 1024px) {
  .shop-grid__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 1.8vw, 2rem);
    row-gap: clamp(2.75rem, 4vw, 4.25rem);
  }
  .shop-tile:nth-child(1) { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .shop-tile:nth-child(2) { grid-column: 5 / span 2; grid-row: 1; }
  .shop-tile:nth-child(3) { grid-column: 5 / span 2; grid-row: 2; }
  .shop-tile:nth-child(4) { grid-column: 1 / span 3; grid-row: 3; }
  .shop-tile:nth-child(5) { grid-column: 4 / span 3; grid-row: 3; }

  /* Hero media stretches to the height of the two stacked tiles */
  .shop-tile--hero { grid-template-rows: minmax(0, 1fr) auto; }
  .shop-tile--hero .tile__media { aspect-ratio: auto; height: 100%; min-height: 0; }
  .shop-tile--hero .tile__media img { position: absolute; inset: 0; }
}

/* ---------- Dark-room tile (LED) ----------
   The packshot is lit like a pool of light in a dark room: no multiply,
   its pale backdrop is masked into the night background. */
.tile--night {
  background: var(--night); color: var(--pearl);
  border-radius: var(--r-soft); overflow: hidden;
  padding-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
}
.tile--night .tile__media { background: var(--night); border-radius: var(--r-soft) var(--r-soft) 0 0; }
.tile--night .tile__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(61, 139, 255, 0.22), transparent 70%);
  mix-blend-mode: screen;
}
.tile--night .tile__media img {
  mix-blend-mode: normal; padding: 5%; /* keeps the pens inside the lit area */
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
.tile--night .tile__row { padding-inline: clamp(0.75rem, 1.6vw, 1.4rem); }
.tile--night .tile__price { color: rgba(255, 255, 255, 0.78); }
.tile--night :focus-visible { outline-color: var(--pearl); }
.tile--night .icon-btn--ultra:hover { background: var(--pearl); color: var(--night); border-color: var(--pearl); }

/* ---------- Glory Kit band ---------- */
.kit {
  margin-top: clamp(4.5rem, 9vw, 8rem);
  padding-block: var(--section);
  background: var(--pearl);
  overflow: clip;
}
.kit__in { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 900px) {
  .kit__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Halo ring sits behind the framed flat lay and peeks out around its edges */
.kit__visual { position: relative; isolation: isolate; padding: 11%; }
.kit__halo { --size: 100%; --ring: 5px; position: absolute; inset: 0; z-index: -1; }
.kit__media { aspect-ratio: 1; }
.kit__media img { transition: transform 0.8s var(--ease); }
.kit__visual:hover .kit__media img { transform: scale(1.04); }

.kit__body { display: grid; justify-items: start; gap: 1.25rem; }
.kit__title { font-size: var(--t-2xl); }
.kit__tagline { font-size: var(--t-l); line-height: 1.35; color: var(--ink-2); margin-top: -0.25rem; }
.kit__prices { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; margin-top: 0.75rem; }
.kit__price { font-size: var(--t-xl); }
.kit__was { font-size: var(--t-l); color: var(--ink-2); text-decoration-thickness: 1.5px; }
.kit__add { margin-top: 0.25rem; }

.kit__inside { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }
.kit__thumb {
  display: block; width: clamp(52px, 4.6vw, 68px);
  box-shadow: 0 0 0 1.5px var(--mist);
  transition: box-shadow 0.25s var(--ease);
}
.kit__thumb:hover { box-shadow: 0 0 0 2px var(--ultra); }
.kit__thumb img { transition: transform 0.6s var(--ease); }
.kit__thumb:hover img { transform: scale(1.06); }

@media (max-width: 899px) {
  .kit__visual { max-width: 560px; width: 100%; justify-self: center; }
}

/* No-JS fallback list */
.shop-grid__fallback { display: grid; gap: 0.75rem; font-size: var(--t-l); }