/* Shop v6 (2026-11-09) · comparison switches for the filters and the name/price under each print.
   The user asked why the filters are tickets. They came from the home page story (paper theatre and
   Madame Stardust's night fairground, "Admit one") and from the thanks-page ticket the user liked, but in
   the hanging-print template a ticket filter has a weaker link. Three filter styles, two caption styles,
   chosen by URL only (nothing is remembered); the default stays as it was:
     ?tabs=tag (default since v7) | ticket | text
     ?caption=print (default since v7, hang look only) | ticket
   v7 (2026-11-09): the user chose option 2 (tags + print caption). Defaults are set in shop.html's <head> script.
   <html data-tabs / data-caption> are set by the inline script in shop.html's <head>. */

/* ================= ?tabs=tag : paper luggage tags pegged on one gold line ================= */
:root[data-tabs="tag"] .sh-tickets { gap: 26px; padding: 4px 0 10px; }
:root[data-tabs="tag"] .tk {
  -webkit-mask: none; mask: none; background: none; border-radius: 0; display: block; min-height: 0;
  padding: 30px 0 4px; filter: none; transform: none; transition: none;
}
:root[data-tabs="tag"] .tk:hover { transform: none; }
/* the gold line: one segment per tag, neighbours meet halfway across the gap */
:root[data-tabs="tag"] .tk::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -14px; right: -14px; top: 9px; height: 20px;
  background: var(--hg-thread-row) center / 100% 100% no-repeat;
}
:root[data-tabs="tag"] .tk:first-child::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
:root[data-tabs="tag"] .tk:last-child::before  { -webkit-mask-image: linear-gradient(270deg, transparent, #000 40%); mask-image: linear-gradient(270deg, transparent, #000 40%); }
/* the clothespin (replaces the "punched" dot of the ticket style) */
:root[data-tabs="tag"] .tk::after,
:root[data-tabs="tag"] .tk.is-on::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none; box-shadow: none; border-radius: 0;
  left: 50%; top: 2px; width: 10px; height: auto; margin: 0; aspect-ratio: 45 / 200; transform: translateX(-50%);
  background: url("../img/hang/clothespin.webp") center / contain no-repeat;
  filter: saturate(.55) sepia(.25) brightness(1.04) drop-shadow(0 1.5px 1.5px rgba(74, 58, 46, .25));
}
/* the tag: cream card, clipped left end with an eyelet, swings from the pin */
:root[data-tabs="tag"] .tk-tag {
  position: relative; z-index: 2; display: flex; align-items: baseline; gap: 7px; margin: 0; border: 0; border-radius: 0;
  padding: 11px 18px 10px 30px; min-width: 92px; justify-content: center;
  background: linear-gradient(180deg, #fffdf6, #fbf3e3);
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  -webkit-mask: radial-gradient(circle 3.5px at 15px 50%, #0000 95%, #000); mask: radial-gradient(circle 3.5px at 15px 50%, #0000 95%, #000);
  transform-origin: 50% -6px; transform: rotate(var(--tg-r, 0deg));
  animation: tg-sway 5.6s ease-in-out var(--tg-d, 0s) infinite alternate;
  transition: background .25s;
}
/* a thin gold edge that follows the clipped shape, and the eyelet ring */
:root[data-tabs="tag"] .tk { --tg-edge: drop-shadow(0 0 .6px rgba(168, 135, 79, .9)) drop-shadow(0 3px 4px rgba(74, 58, 46, .12)); }
:root[data-tabs="tag"] .tk-tag::before {
  content: ""; position: absolute; left: 9.5px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  border: 1.5px solid #d9c08a; box-sizing: border-box;
}
:root[data-tabs="tag"] .tk { filter: var(--tg-edge); }
:root[data-tabs="tag"] .tk > .tk-tag > span { margin: 0; border: 0; padding: 0; min-width: 0; display: inline; border-radius: 0; }
:root[data-tabs="tag"] .tk .tk-name { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
:root[data-tabs="tag"] .tk .tk-no { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--gold); font-variant-numeric: lining-nums; }
:root[data-tabs="tag"] .tk.is-on .tk-no { padding: 0; color: #9a6a62; }
/* chosen: the tag tips forward on its pin and blushes */
:root[data-tabs="tag"] .tk.is-on .tk-tag { --tg-r: -5deg; background: linear-gradient(180deg, #f8e8e2, #f1ddd6); animation: none; }
:root[data-tabs="tag"] .tk:nth-child(2) .tk-tag { --tg-d: -1.8s; }
:root[data-tabs="tag"] .tk:nth-child(3) .tk-tag { --tg-d: -3.4s; }
:root[data-tabs="tag"] .tk:nth-child(4) .tk-tag { --tg-d: -.9s; }
:root[data-tabs="tag"] .tk:nth-child(5) .tk-tag { --tg-d: -4.2s; }
@media (hover: hover) and (pointer: fine) {
  :root[data-tabs="tag"] .tk:not(.is-on):hover .tk-tag { animation: tg-sway-hot 1.5s ease-in-out infinite; }
}
@keyframes tg-sway { from { transform: rotate(calc(var(--tg-r, 0deg) - 1.4deg)); } to { transform: rotate(calc(var(--tg-r, 0deg) + 1.4deg)); } }
@keyframes tg-sway-hot { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ================= ?tabs=text : plain serif words ================= */
:root[data-tabs="text"] .sh-tickets { gap: 40px; padding: 6px 0 14px; }
:root[data-tabs="text"] .tk {
  -webkit-mask: none; mask: none; background: none; filter: none; border-radius: 0; display: inline-block;
  min-height: 0; padding: 4px 2px 10px; transition: color .25s;
}
:root[data-tabs="text"] .tk:hover { transform: none; }
:root[data-tabs="text"] .tk > span { margin: 0; border: 0; padding: 0; display: inline; min-width: 0; border-radius: 0; }
:root[data-tabs="text"] .tk .tk-no { display: none; }
:root[data-tabs="text"] .tk .tk-name { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .03em; color: var(--ink-soft); }
:root[data-tabs="text"] .tk:hover .tk-name { color: var(--ink); }
:root[data-tabs="text"] .tk.is-on .tk-name { color: var(--ink); font-weight: 600; }
/* chosen: a thin gold underline with one small star on it */
:root[data-tabs="text"] .tk.is-on::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--gold);
}
:root[data-tabs="text"] .tk.is-on::after {
  content: "\2726"; left: 50%; top: auto; bottom: -4px; width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none;
  transform: translateX(-50%); padding: 0 5px; background: var(--paper); color: var(--gold); font-size: 11px; line-height: 1;
}

/* ================= ?caption=print : name written on the print's lower margin ================= */
.sh-cap { display: none; }
:root:not([data-look="frame"])[data-caption="print"] .sh-stubwrap { display: none; }
:root:not([data-look="frame"])[data-caption="print"] .sh-framebox { aspect-ratio: auto; display: block; width: 86%; }
:root:not([data-look="frame"])[data-caption="print"] .sh-card .sh-frame { height: auto; width: 100%; aspect-ratio: auto; padding: 5.2% 5.2% 0; }
:root:not([data-look="frame"])[data-caption="print"] .sh-card .sh-photo { position: relative; inset: auto; aspect-ratio: 4 / 5; border-radius: 0; }
:root:not([data-look="frame"])[data-caption="print"] .sh-cap { display: block; padding: 13px 8px 15px; text-align: center; }
.sh-cap .cap-name { margin: 0; font-family: var(--serif); font-style: italic; font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.sh-cap .cap-var { display: block; font-size: .8em; color: var(--ink-soft); margin-top: 2px; }
.sh-cap .cap-meta { margin: 7px 0 0; font-family: var(--fell); font-size: 11.5px; letter-spacing: .14em; color: var(--sage); }
.sh-cap .cap-price { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .02em; color: var(--ink); font-variant-numeric: lining-nums; }

/* ================= phones ================= */
@media (max-width: 700px) {
  :root[data-tabs="tag"] .sh-tickets { gap: 18px; padding: 2px 24px 12px; }
  :root[data-tabs="tag"] .tk { padding-top: 27px; }
  :root[data-tabs="tag"] .tk::before { left: -10px; right: -10px; top: 7px; }
  :root[data-tabs="tag"] .tk::after, :root[data-tabs="tag"] .tk.is-on::after { width: 9px; top: 1px; }
  :root[data-tabs="tag"] .tk-tag { padding: 9px 14px 8px 27px; min-width: 78px; }
  :root[data-tabs="tag"] .tk .tk-name { font-size: 18px; }
  :root[data-tabs="tag"] .tk .tk-no { font-size: 13px; }
  :root[data-tabs="tag"] .tk.is-on .tk-no { padding: 0; }
  :root[data-tabs="text"] .sh-tickets { gap: 26px; padding: 6px 24px 14px; }
  :root[data-tabs="text"] .tk .tk-name { font-size: 19px; }
  :root:not([data-look="frame"])[data-caption="print"] .sh-framebox { width: 94%; }
  :root:not([data-look="frame"])[data-caption="print"] .sh-cap { padding: 9px 4px 11px; }
  .sh-cap .cap-name { font-size: 17px; }
  .sh-cap .cap-meta { font-size: 9.5px; letter-spacing: .1em; margin-top: 5px; }
  .sh-cap .cap-price { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-tabs="tag"] .tk-tag { animation: none !important; }
}