/* ── Our Collection: MENU (the main view) and TABLE (the option) ────────────
   MENU is satyajewelry.com's category tiles (their "Necklaces / Bracelets /
   Earrings / Rings" and "Gifts Under $100 / Most Gifted / Gift Sets" rows),
   measured at 1920 (1905 wide):
     four-up  476 wide, the picture 476 x 619, no gap between tiles
     three-up 635 wide, the picture 635 x 762
     name     10 px under the picture, centred, their light serif at 20 / 24
     hover    the picture grows to 1.08 over 2 s (cubic-bezier(.215,.61,.355,1))
     heading  centred over the row, the same serif at 30 / 36
   TABLE is her products on the table at their real size. Switching flies each
   product between the two (js/shop.js). */
.shop { position: relative; background: var(--ivory); color: var(--navy-ink); }
.shop-head { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(64px, 5.5vw, 104px) 24px clamp(32px, 2.6vw, 48px); text-align: center; }
.shop-title { margin: 0; font: 400 30px / 36px var(--f-head); letter-spacing: -.01em; }
.shop-title em { font-style: normal; }
.shop-tools { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 2.6vw, 52px); }
.shop-view { display: flex; gap: clamp(22px, 2vw, 36px); }
.shop-view button, .shop-custom {
  padding: 0 0 7px; border: 0; border-bottom: 1px solid transparent; background: none; color: inherit; cursor: pointer;
  font: 400 12px / 14.4px var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none;
  opacity: .55; transition: opacity .25s, border-color .25s;
}
.shop-view button[aria-selected="true"], .shop-custom { opacity: 1; border-bottom-color: currentColor; }
.shop-view button:hover { opacity: 1; }

.shop-stage { position: relative; overflow: hidden; }
.shop[data-view="menu"] .table-top { display: none; }
.shop[data-view="table"] .menu-grid { display: none; }

/* ── MENU ─────────────────────────────────────────────────────────────────── */
.menu-grid { display: flex; flex-wrap: wrap; padding: 0 0 clamp(48px, 4vw, 80px); }
.tile { width: 25%; padding-bottom: 25px; color: inherit; text-decoration: none; text-align: center; }
.tile-3 { width: calc(100% / 3); }
.tile-pic { display: block; position: relative; overflow: hidden; aspect-ratio: 476 / 619; margin-bottom: 10px; background: #f3d9a0; }
.tile-3 .tile-pic { aspect-ratio: 635 / 762; }
.tile-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 2s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) { .tile:hover .tile-pic img { transform: scale(1.08); } }
.tile-name { display: block; font: 400 20px / 24px var(--f-head); }
.tile-price { display: block; margin-top: 4px; font: 400 13px / 18px var(--f-body); letter-spacing: .04em; opacity: .7; }
.tile-price s { margin-left: 6px; opacity: .6; }

/* ── TABLE ────────────────────────────────────────────────────────────────── */
.table-top {
  position: relative; aspect-ratio: 16 / 10;
  background: url("../img/table/table-1920.webp?v=2") center / 100% 100% no-repeat;
}
@media (min-width: 1921px), (min-resolution: 1.5dppx) and (min-width: 1100px) {
  .table-top { background-image: url("../img/table/table-3840.webp?v=2"); }
}
.item {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--ar); z-index: var(--z);
  transform: translate(-50%, -50%) rotate(var(--r));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .35s;
  cursor: pointer; outline: none;
}
.item img {
  display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 .25vw .2vw rgb(40 25 10 / .35)) drop-shadow(0 .05vw .05vw rgb(40 25 10 / .3));
  transition: filter .45s cubic-bezier(.22, 1, .36, 1);
}
.item:hover, .item:focus-visible { z-index: 30; transform: translate(-50%, -54%) rotate(var(--r)) scale(1.05); }
.item:hover img, .item:focus-visible img { filter: drop-shadow(.6vw 1.6vw 1.4vw rgb(40 25 10 / .38)) drop-shadow(0 .2vw .3vw rgb(40 25 10 / .2)); }
.table-top:has(.item:hover) .item:not(:hover) { filter: brightness(.82) saturate(.9); }
.tag {
  position: absolute; top: 8%; left: 100%; margin-left: 6%; min-width: 9.5em; padding: .7em 1em .8em 1.6em;
  font: 400 15px / 1.3 var(--f-body); color: var(--navy-ink); background: var(--ivory);
  border-radius: 3px 10px 10px 3px; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%);
  box-shadow: 0 6px 16px rgb(90 0 30 / .2);
  transform: rotate(calc(-1 * var(--r))) translateY(6px); transform-origin: 0 50%;
  opacity: 0; pointer-events: none; white-space: nowrap; text-align: left;
  transition: opacity .3s, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.tag::before { content: ""; position: absolute; left: 7%; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--navy-ink); opacity: .35; }
.item.flip .tag { left: auto; right: 100%; margin: 0 6% 0 0; }
.tag b { display: block; font: 400 23px / 1.2 var(--f-head); }
.tag s { opacity: .55; margin-inline-start: .4em; }
.item:hover .tag, .item:focus-visible .tag { opacity: 1; transform: rotate(calc(-1 * var(--r))); }

/* the flight between views: copies over the page, each holding both pictures */
.shop-fly-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.shop-fly { position: absolute; will-change: left, top, width, height, transform; }   /* centred by gsap xPercent / yPercent: gsap folds a CSS translate into its own */
.shop-fly img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shop-fly .o { opacity: 1; } .shop-fly .i { opacity: 0; }
.shop.is-flying .tile-pic img, .shop.is-flying .item img { visibility: hidden; }
.shop.is-flying .tile-name, .shop.is-flying .tile-price, .shop.is-flying .tag { opacity: 0; }
.tile-name, .tile-price { transition: opacity .5s; }

/* ── tablets and phones ──────────────────────────────────────────────────── */
@media (max-width: 1100px) { .tile, .tile-3 { width: calc(100% / 3); } }
@media (max-width: 767px) {
  .shop-head { align-items: center; gap: 16px; padding: 56px 16px 24px; }
  .shop-tools { flex-wrap: wrap; justify-content: center; gap: 14px 26px; padding: 0; }
  .tile, .tile-3 { width: 50%; }
  .tile-3:last-child:nth-child(odd) { width: 100%; }
  .tile-name { font-size: 17px; line-height: 21px; padding: 0 8px; }
  .table-top { aspect-ratio: auto; height: var(--mob-h, 2400px); background: url("../img/table/table-mob-828.webp?v=2") top center / 100% auto repeat-y; }
  .tag { opacity: 1; transform: none; top: 100%; left: 50%; margin: 8px 0 0; translate: -50% 0; font-size: 13px; min-width: 0; padding: .5em .8em .6em 1.4em; }
  .item.flip .tag { left: 50%; right: auto; margin: 8px 0 0; }
  .tag b { font-size: 17px; }
  .item:hover, .item:focus-visible { transform: translate(-50%, -50%) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .item, .item img, .tag, .tile-pic img { transition: none; } }
/* less empty page (his call, 2026-10-28) */
.shop-head { padding-top: clamp(40px, 3.2vw, 60px); padding-bottom: 28px; }
.menu-grid { padding-bottom: 24px; }