/* Shop v10 (2026-11-09) · filter tabs + name labels that belong with the GILT FRAME look.
   The user asked what the hanging paper tags should become so they sit better next to gilt frames.
   The tags (gold thread + wooden peg) speak the hanging-print language; gilt frames speak the gallery wall.
   Three comparison options, frame look only, chosen by URL (nothing remembered, defaults unchanged):
     ?look=frame&tabs=plaque|cord|cartouche     ?look=frame&caption=plaque|label|cartouche
   shop.html's <head> script only accepts these values when data-look="frame"; otherwise it falls back to tag/print.
   Tickets stay on the thanks page only. */

/* ================= shared reset: undo the ticket styling on .tk ================= */
:root[data-look="frame"]:is([data-tabs="plaque"], [data-tabs="cord"], [data-tabs="cartouche"]) .tk {
  -webkit-mask: none; mask: none; background: none; border-radius: 0; display: block; min-height: 0;
  padding: 0; filter: none; transform: none; color: var(--ink); transition: none;
}
:root[data-look="frame"]:is([data-tabs="plaque"], [data-tabs="cord"], [data-tabs="cartouche"]) .tk:hover { transform: none; }
:root[data-look="frame"]:is([data-tabs="plaque"], [data-tabs="cord"], [data-tabs="cartouche"]) .tk > .tk-plate > span {
  margin: 0; border: 0; padding: 0; min-width: 0; display: inline; border-radius: 0; background: none;
}
:root[data-look="frame"]:is([data-tabs="plaque"], [data-tabs="cord"], [data-tabs="cartouche"]) .tk.is-on .tk-no { padding: 0; }
:root[data-look="frame"]:is([data-tabs="plaque"], [data-tabs="cartouche"]) .tk.is-on::after { content: none; }

/* ================= 1 · ?tabs=plaque : small antique brass plaques ================= */
:root[data-look="frame"][data-tabs="plaque"] .sh-tickets { gap: 18px; padding: 6px 0 14px; }
:root[data-look="frame"][data-tabs="plaque"] .tk { padding: 0 0 11px; filter: drop-shadow(0 2px 2.5px rgba(74, 58, 46, .14)); }
:root[data-look="frame"][data-tabs="plaque"] .tk-plate {
  --ch: 7px;
  position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 20px 8px;
  background: #a98a55; /* the brass edge */
  clip-path: polygon(var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
}
:root[data-look="frame"][data-tabs="plaque"] .tk-plate::before {
  content: ""; position: absolute; inset: 1.2px; z-index: -1;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  background: linear-gradient(180deg, #f1e8cf 0%, #e3d5ad 47%, #d9c89b 53%, #ebdfc0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 230, .55);
  transition: filter .25s;
}
:root[data-look="frame"][data-tabs="plaque"] .tk .tk-name {
  font-family: var(--fell); font-size: 17px; letter-spacing: .12em; color: #5a4529; text-shadow: 0 1px 0 rgba(255, 250, 233, .8);
}
:root[data-look="frame"][data-tabs="plaque"] .tk .tk-no {
  font-family: var(--serif); font-size: 13px; font-weight: 600; color: #8a6d3e; font-variant-numeric: lining-nums; text-shadow: 0 1px 0 rgba(255, 250, 233, .7);
}
:root[data-look="frame"][data-tabs="plaque"] .tk:hover .tk-plate::before { filter: brightness(1.04); }
/* chosen: the plaque catches the light (a polished sheen) and gets a thin gold line under it */
:root[data-look="frame"][data-tabs="plaque"] .tk.is-on .tk-plate::before {
  background: linear-gradient(112deg, #f7efd6 0%, #e6d4a2 32%, #fff8e3 46%, #e3cd95 60%, #f2e5bf 100%);
}
:root[data-look="frame"][data-tabs="plaque"] .tk.is-on .tk-name { color: #4a361c; }
:root[data-look="frame"][data-tabs="plaque"] .tk.is-on::before {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 3px; height: 1px; background: var(--gold);
}

/* ================= 2 · ?tabs=cord : gilt-edged labels hung from a picture rail by silk cord ================= */
:root[data-look="frame"][data-tabs="cord"] .sh-tickets { gap: 22px; padding: 0 0 12px; }
:root[data-look="frame"][data-tabs="cord"] .tk { padding: 31px 0 18px; }
/* the picture rail: one segment per label, neighbours meet halfway across the gap */
:root[data-look="frame"][data-tabs="cord"] .tk::before {
  content: ""; position: absolute; z-index: 0; left: -11px; right: -11px; top: 0; height: 5px; pointer-events: none;
  background: linear-gradient(180deg, #f5ecd6, #e2d2ab);
  border-top: 1px solid rgba(180, 147, 90, .5); border-bottom: 1px solid rgba(160, 128, 74, .7);
  box-shadow: 0 2px 2px rgba(74, 58, 46, .07);
}
:root[data-look="frame"][data-tabs="cord"] .tk:first-child::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
:root[data-look="frame"][data-tabs="cord"] .tk:last-child::before { -webkit-mask-image: linear-gradient(270deg, transparent, #000 45%); mask-image: linear-gradient(270deg, transparent, #000 45%); }
/* the brass rail hook */
:root[data-look="frame"][data-tabs="cord"] .tk::after,
:root[data-look="frame"][data-tabs="cord"] .tk.is-on::after {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 2px; width: 7px; height: 7px; margin: 0 0 0 -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f6e8bf, #b4935a 72%); box-shadow: 0 1px 1px rgba(74, 58, 46, .3); transform: none;
}
/* the label: cream card with a thin gilt double edge */
:root[data-look="frame"][data-tabs="cord"] .tk-plate {
  position: relative; display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 18px 7px;
  background: #fffaf0; border: 1px solid #c4a56b;
  box-shadow: inset 0 0 0 2.5px #fffaf0, inset 0 0 0 3.5px rgba(180, 147, 90, .42), 0 3px 5px rgba(74, 58, 46, .1);
  transform-origin: 50% -24px; transition: transform .3s var(--ease), background .25s, box-shadow .25s;
}
/* the silk cord: an inverted V from the hook to the two top corners */
:root[data-look="frame"][data-tabs="cord"] .tk-plate::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 100%; height: 24px; margin-bottom: 1px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M1 24 L50 1 L99 24' fill='none' stroke='%23a8874f' stroke-width='1.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M1 24 L50 1 L99 24' fill='none' stroke='%23f2e2b4' stroke-width='.7' stroke-dasharray='2 2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* the tassel under the label */
:root[data-look="frame"][data-tabs="cord"] .tk-plate::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 15px; margin: 1px 0 0 -4.5px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='M4.5 0v2.5' stroke='%23a8874f' stroke-width='.9'/%3E%3Ccircle cx='4.5' cy='4' r='1.9' fill='%23c2a266'/%3E%3Cpath d='M2.3 5.8h4.4l1.4 8.6H.9z' fill='%23d7bd85'/%3E%3Cpath d='M3 6.5v7.4M4.5 6.5v7.8M6 6.5v7.4' stroke='%23a8874f' stroke-width='.45'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-look="frame"][data-tabs="cord"] .tk .tk-name { font-family: var(--serif); font-style: italic; font-size: 20px; font-weight: 500; letter-spacing: .01em; color: var(--ink); }
:root[data-look="frame"][data-tabs="cord"] .tk .tk-no { font-family: var(--fell); font-size: 12px; letter-spacing: .1em; color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  :root[data-look="frame"][data-tabs="cord"] .tk:not(.is-on):hover .tk-plate { transform: rotate(-1.5deg); }
}
/* chosen: the label tips forward on its cord and blushes */
:root[data-look="frame"][data-tabs="cord"] .tk.is-on .tk-plate {
  transform: perspective(300px) rotateX(-9deg) translateY(1px); background: #f8e9e5;
  box-shadow: inset 0 0 0 2.5px #f8e9e5, inset 0 0 0 3.5px rgba(180, 147, 90, .5), 0 6px 9px rgba(74, 58, 46, .16);
}
:root[data-look="frame"][data-tabs="cord"] .tk.is-on .tk-no { color: #9a6a62; }

/* ================= 3 · ?tabs=cartouche : tiny oval gilt frames (the frames in miniature) ================= */
:root[data-look="frame"][data-tabs="cartouche"] .sh-tickets { gap: 16px; padding: 8px 6px 16px; }
:root[data-look="frame"][data-tabs="cartouche"] .tk { padding: 5px; }
:root[data-look="frame"][data-tabs="cartouche"] .tk-plate {
  position: relative; display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 26px 7px;
  border-radius: 50%; background: #fffaf0; border: 1.5px solid #b89a62;
  outline: 1px solid rgba(180, 147, 90, .55); outline-offset: 3px;
  box-shadow: 0 3px 5px rgba(74, 58, 46, .08);
  transition: background .25s, box-shadow .25s;
}
:root[data-look="frame"][data-tabs="cartouche"] .tk .tk-name { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
:root[data-look="frame"][data-tabs="cartouche"] .tk .tk-no { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--gold); font-variant-numeric: lining-nums; }
:root[data-look="frame"][data-tabs="cartouche"] .tk:hover .tk-plate { box-shadow: 0 4px 8px rgba(74, 58, 46, .13); }
/* chosen: a heavier gilt line and a blush inside */
:root[data-look="frame"][data-tabs="cartouche"] .tk.is-on .tk-plate {
  background: #f7e6e3; box-shadow: inset 0 0 0 1.2px #b89a62, 0 4px 8px rgba(74, 58, 46, .13); outline-color: #b89a62;
}
:root[data-look="frame"][data-tabs="cartouche"] .tk.is-on .tk-no { color: #9a6a62; }

/* ================= name labels under the frames (?caption=plaque|label|cartouche) ================= */
.sh-label { display: none; }
:root[data-look="frame"]:is([data-caption="plaque"], [data-caption="label"], [data-caption="cartouche"]) .sh-stubwrap { display: none; }
:root[data-look="frame"]:is([data-caption="plaque"], [data-caption="label"], [data-caption="cartouche"]) .sh-label {
  display: block; position: relative; margin: 18px auto 0; max-width: 262px; text-align: center; transition: transform .3s var(--ease);
}
:root[data-look="frame"]:is([data-caption="plaque"], [data-caption="label"], [data-caption="cartouche"]) .sh-card a:hover .sh-label { transform: translateY(-2px); }
.sh-label .lb-name { margin: 0; line-height: 1.22; color: var(--ink); }
.sh-label .lb-var { display: block; font-size: .78em; font-style: italic; font-weight: 400; color: var(--ink-soft); margin-top: 1px; }
.sh-label .lb-meta { margin: 8px 0 0; line-height: 1.3; }
.sh-label .lb-price { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: .02em; color: var(--ink); font-variant-numeric: lining-nums; }
.sh-label .lb-dot { color: var(--gold); }
.sh-label .lb-ooak { font-family: var(--fell); font-size: 11.5px; letter-spacing: .14em; color: var(--sage); white-space: nowrap; }

/* 1 · brass plaque with the name engraved, price written underneath */
:root[data-look="frame"][data-caption="plaque"] .lb-plate {
  --ch: 7px;
  position: relative; isolation: isolate; display: inline-block; max-width: 94%; padding: 9px 18px 8px;
  background: #a98a55; filter: drop-shadow(0 2px 2.5px rgba(74, 58, 46, .14));
  clip-path: polygon(var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
}
:root[data-look="frame"][data-caption="plaque"] .lb-plate::before {
  content: ""; position: absolute; inset: 1.2px; z-index: -1;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  background: linear-gradient(180deg, #f1e8cf 0%, #e3d5ad 47%, #d9c89b 53%, #ebdfc0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 230, .55);
}
:root[data-look="frame"][data-caption="plaque"] .lb-name {
  font-family: var(--serif); font-size: 17.5px; font-weight: 600; letter-spacing: .02em; color: #4f3b20; text-shadow: 0 1px 0 rgba(255, 250, 233, .8);
}
:root[data-look="frame"][data-caption="plaque"] .lb-var { color: #6e5532; }

/* 2 · museum wall label: a small cream card, name in italic, a hairline, then price and "One of a kind" */
:root[data-look="frame"][data-caption="label"] .sh-label {
  max-width: 236px; padding: 12px 16px 11px; text-align: left;
  background: #fffaf2; border: 1px solid rgba(180, 147, 90, .45); box-shadow: 0 2px 5px rgba(74, 58, 46, .08);
}
:root[data-look="frame"][data-caption="label"] .lb-plate { padding-bottom: 8px; border-bottom: 1px solid rgba(180, 147, 90, .3); }
:root[data-look="frame"][data-caption="label"] .lb-name { font-family: var(--serif); font-style: italic; font-size: 19px; font-weight: 500; }
:root[data-look="frame"][data-caption="label"] .lb-var { font-style: normal; font-family: var(--fell); font-size: 11.5px; letter-spacing: .12em; margin-top: 3px; }
:root[data-look="frame"][data-caption="label"] .lb-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
:root[data-look="frame"][data-caption="label"] .lb-dot { display: none; }
:root[data-look="frame"][data-caption="label"] .lb-meta .lb-price { order: 2; }

/* 3 · a small oval cartouche nameplate fixed to the bottom of the frame, price written underneath */
:root[data-look="frame"][data-caption="cartouche"] .sh-label { margin-top: -15px; z-index: 2; }
:root[data-look="frame"][data-caption="cartouche"] .lb-plate {
  display: inline-block; max-width: 90%; padding: 8px 24px 7px;
  border-radius: 50%; background: #fffaf0; border: 1.5px solid #b89a62;
  outline: 1px solid rgba(180, 147, 90, .55); outline-offset: 3px; box-shadow: 0 3px 6px rgba(74, 58, 46, .12);
}
:root[data-look="frame"][data-caption="cartouche"] .lb-name { font-family: var(--serif); font-size: 17px; font-weight: 600; }
:root[data-look="frame"][data-caption="cartouche"] .lb-meta { margin-top: 10px; }

/* ================= phones ================= */
@media (max-width: 700px) {
  :root[data-look="frame"][data-tabs="plaque"] .sh-tickets { gap: 12px; padding: 6px 24px 12px; }
  :root[data-look="frame"][data-tabs="plaque"] .tk-plate { padding: 8px 15px 7px; gap: 6px; }
  :root[data-look="frame"][data-tabs="plaque"] .tk .tk-name { font-size: 15px; letter-spacing: .1em; }
  :root[data-look="frame"][data-tabs="plaque"] .tk .tk-no { font-size: 12px; }

  :root[data-look="frame"][data-tabs="cord"] .sh-tickets { gap: 16px; padding: 0 24px 10px; }
  :root[data-look="frame"][data-tabs="cord"] .tk { padding: 28px 0 17px; }
  :root[data-look="frame"][data-tabs="cord"] .tk::before { left: -8px; right: -8px; }
  :root[data-look="frame"][data-tabs="cord"] .tk-plate { padding: 7px 14px 6px; gap: 6px; }
  :root[data-look="frame"][data-tabs="cord"] .tk-plate::before { height: 21px; }
  :root[data-look="frame"][data-tabs="cord"] .tk .tk-name { font-size: 18px; }

  :root[data-look="frame"][data-tabs="cartouche"] .sh-tickets { gap: 10px; padding: 8px 24px 14px; }
  :root[data-look="frame"][data-tabs="cartouche"] .tk-plate { padding: 7px 19px 6px; gap: 6px; }
  :root[data-look="frame"][data-tabs="cartouche"] .tk .tk-name { font-size: 18px; }

  :root[data-look="frame"]:is([data-caption="plaque"], [data-caption="label"], [data-caption="cartouche"]) .sh-label { margin-top: 12px; }
  :root[data-look="frame"][data-caption="cartouche"] .sh-label { margin-top: -10px; }
  :root[data-look="frame"][data-caption="plaque"] .lb-plate { padding: 7px 10px 6px; max-width: 100%; }
  :root[data-look="frame"][data-caption="plaque"] .lb-name { font-size: 14.5px; }
  :root[data-look="frame"][data-caption="label"] .sh-label { padding: 9px 10px 8px; }
  :root[data-look="frame"][data-caption="label"] .lb-name { font-size: 16px; }
  :root[data-look="frame"][data-caption="label"] .lb-var { font-size: 9.5px; letter-spacing: .08em; }
  :root[data-look="frame"][data-caption="label"] .lb-meta { flex-wrap: wrap; gap: 2px 6px; }
  :root[data-look="frame"][data-caption="cartouche"] .lb-plate { padding: 6px 13px 5px; max-width: 100%; }
  :root[data-look="frame"][data-caption="cartouche"] .lb-name { font-size: 14.5px; }
  .sh-label .lb-price { font-size: 16px; }
  .sh-label .lb-ooak { font-size: 9.5px; letter-spacing: .1em; }
  .sh-label .lb-meta { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-look="frame"] .tk-plate, :root[data-look="frame"] .sh-label { transition: none !important; }
}