/* Shop v2: collections first, large product photos, numbered names and calm motion.
   Loaded after the other shop styles; uses the light/dark variables from shop-theme.css. */
.shop-world .shop-intro{margin:6px 0 26px}
.shop-world .shop-intro h3{font-size:clamp(38px,5vw,72px);line-height:.95;margin:8px 0 12px;font-weight:500;letter-spacing:-.02em}
.shop-world .shop-intro h3 em{font-style:normal;color:var(--shop-muted)}
.shop-world .shop-intro p:last-child{color:var(--shop-muted);font-size:14px;max-width:46ch}

/* Collection tiles */
.index-tab[hidden]{display:none!important}
.collection-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin-bottom:46px}
.collection-tile{position:relative;display:grid;grid-template-rows:1fr auto;min-height:clamp(300px,34vw,420px);padding:22px;border:1px solid var(--shop-line);border-radius:22px;background:radial-gradient(ellipse at 50% 38%,var(--tile-glow,#ffffff12),transparent 70%),var(--tile-bg,var(--shop-stage));color:var(--tile-ink,var(--shop-ink));text-align:left;cursor:pointer;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .5s}
.collection-tile.theme-beyond-default{--tile-bg:#1d1f1c;--tile-glow:#7aa3b433;--tile-ink:#eef0e8}
.collection-tile.theme-walk-by-faith{--tile-bg:#ece6d8;--tile-glow:#fff8e4;--tile-ink:#3a3528}
.collection-tile.theme-court-series{--tile-bg:#24301f;--tile-glow:#ff6a5122;--tile-ink:#eef0e2}
.collection-tile:hover,.collection-tile:focus-visible{transform:translateY(-6px);box-shadow:0 26px 60px #0000003a}
.collection-tile[aria-pressed=true]{border-color:var(--shop-selected);box-shadow:0 0 0 2px var(--shop-selected)}
.tile-no{font-size:11px;letter-spacing:.24em;opacity:.7}
.tile-tees{position:relative;display:block;margin:6px auto 0;width:100%;height:100%;min-height:190px}
.tile-tees img{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;object-fit:contain;transform:translate(calc(-50% + var(--x) * 36%),-50%) rotate(calc(var(--x) * 7deg)) scale(.9);filter:drop-shadow(0 18px 22px #0005);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile-tees img[style*="--n:0"]{z-index:2;transform:translate(-50%,-52%) scale(1.04)}
.collection-tile:hover .tile-tees img,.collection-tile:focus-visible .tile-tees img{transform:translate(calc(-50% + var(--x) * 50%),-54%) rotate(calc(var(--x) * 11deg)) scale(.9)}
.collection-tile:hover .tile-tees img[style*="--n:0"],.collection-tile:focus-visible .tile-tees img[style*="--n:0"]{transform:translate(-50%,-58%) scale(1.1)}
.tile-copy{display:grid;gap:4px}
.tile-copy b{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.01em}
.tile-copy small{font-size:12px;opacity:.7}
.tile-copy em{font-style:normal;font-size:13px;margin-top:8px;opacity:.85}

/* Collection tabs stay at hand while scrolling the pieces */
.shop-world .shop-toolbar{position:sticky;top:12px;z-index:5;margin:0 0 18px;padding:8px;border:1px solid var(--shop-line);border-radius:999px;background:var(--shop-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:12px;letter-spacing:0;gap:10px}
.collection-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.collection-tabs::-webkit-scrollbar{display:none}
.collection-tabs button{flex:none;border:0;border-radius:999px;padding:10px 16px;background:none;color:var(--shop-muted);font:inherit;font-size:13px;cursor:pointer;transition:background .25s,color .25s}
.collection-tabs button:hover{color:var(--shop-ink)}
.collection-tabs button[aria-selected=true]{background:var(--shop-selected);color:var(--shop-selected-ink)}
.shop-world .sort-label{flex:none;padding-right:8px;color:var(--shop-muted)}
.shop-heading h4{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,3.4vw,46px);margin:8px 0 6px}
.shop-heading p{color:var(--shop-muted);font-size:14px;margin:0 0 22px;max-width:60ch}
.shop-heading span{white-space:nowrap}

/* Product cards: large photos, the back appears on hover */
.shop-world .shop-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:40px 24px}
.shop-world .shop-product-image{aspect-ratio:1;border:1px solid var(--shop-line);border-radius:22px;background:radial-gradient(ellipse at 50% 45%,var(--shop-glass),transparent 70%),var(--shop-stage);overflow:hidden}
.shop-world .shop-product-image .tee{width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .45s}
.shop-world .shop-product-image .catalogue-photo img{width:100%;height:100%;object-fit:contain;padding:6%;filter:drop-shadow(0 22px 26px #0004)!important}
.product-back{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;opacity:0;transform:scale(.96);transition:opacity .45s,transform .7s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 22px 26px #0004);pointer-events:none}
.shop-product:hover .has-back .tee,.shop-product:focus-visible .has-back .tee{opacity:0;transform:scale(1.04)}
.shop-product:hover .product-back,.shop-product:focus-visible .product-back{opacity:1;transform:scale(1)}
.shop-product:not(:has(.has-back)):hover .tee{transform:translateY(-8px) scale(1.03)}
.card-badge{position:absolute;left:14px;top:14px;padding:6px 10px;border-radius:999px;background:var(--shop-control);color:var(--shop-muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(10px)}
.shop-world .shop-product-meta{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;margin-top:14px;font-size:14px}
.card-no{grid-column:1/-1;font-size:10px;letter-spacing:.22em;color:var(--shop-muted);text-transform:uppercase}
.card-name{font-size:17px;font-weight:500}
.card-colour{grid-column:1;font-size:12px;color:var(--shop-muted)}
.shop-world .shop-product-meta .price{grid-row:2/4;grid-column:2;align-self:start;text-align:right;font-size:14px}
.shop-world .card-swatches{margin-top:10px}
.piece-no{display:inline-block;font-size:.42em;letter-spacing:.2em;vertical-align:.55em;margin-right:.35em;opacity:.65;font-family:inherit}

/* Motion: cards and tiles rise in, panels fade in, colour changes cross-fade */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 70ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 70ms)}
.reveal.is-in{opacity:1;transform:none}
.index-panel.panel-in{animation:panelIn .55s cubic-bezier(.2,.7,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}}
#product-dialog[open] .detail-grid{animation:detailIn .6s cubic-bezier(.2,.7,.2,1)}
#product-dialog[open] .product-gallery .tee{animation:teeIn .8s cubic-bezier(.2,.7,.2,1)}
@keyframes detailIn{from{opacity:0;transform:translateY(18px)}}
@keyframes teeIn{from{opacity:0;transform:translateY(24px) scale(.94)}}
.product-gallery .catalogue-photo img{filter:drop-shadow(0 26px 30px #0003)!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* The tees in the walkthrough: numbered two-line labels and a slow, uneven float */
.journey-tee .tee-name{display:grid;gap:2px;top:-44px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:150%;padding:6px 12px;border-radius:14px;background:#f6f5f0b8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#2f3a28;font-size:12px;line-height:1.25;box-shadow:0 6px 18px #0000000f}
.journey-tee .tee-name small{font-size:9px;letter-spacing:.24em;opacity:.7}
.tee-image-button{animation:teeFloat calc(6s + var(--i,0) * .7s) ease-in-out calc(var(--i,0) * -1.3s) infinite}
.tee-image-button .tee{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s}
.tee-image-button:hover .tee,.tee-image-button:focus-visible .tee{transform:translateY(-10px) scale(1.06);filter:drop-shadow(0 30px 30px #0003)}
@keyframes teeFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(calc((var(--i,0) - 2) * .6deg))}}
.drop-sculpture .tee{animation:dropFloat 7s ease-in-out infinite}
@keyframes dropFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
.drop-discover{display:grid!important;gap:2px;text-align:left;min-width:240px}
.drop-discover .drop-no{font-size:10px;letter-spacing:.22em;opacity:.65}
.drop-discover .drop-name{font-size:15px}
.drop-discover small{font-size:12px;opacity:.75}

@media(max-width:700px){
 .collection-tiles{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
 .collection-tile{scroll-snap-align:start;min-height:340px}
 .shop-world .shop-toolbar{top:8px;border-radius:18px}
 .shop-world .sort-label{display:none}
 .shop-world .shop-grid{grid-template-columns:1fr 1fr;gap:24px 12px}
 .card-name{font-size:14px}
 .shop-world .shop-product-meta{grid-template-columns:1fr}
 .shop-world .shop-product-meta .price{grid-row:auto;grid-column:1;text-align:left}
 .journey-tee .tee-name{top:-38px;font-size:10px;padding:4px 8px}
}
@media(prefers-reduced-motion:reduce){
 .reveal{opacity:1;transform:none;transition:none}
 .tee-image-button,.drop-sculpture .tee,.index-panel.panel-in,#product-dialog[open] .detail-grid,#product-dialog[open] .product-gallery .tee{animation:none}
 .collection-tile,.tile-tees img,.shop-world .shop-product-image .tee,.product-back{transition:none}
}

/* Entrance → collection: the collection name, prices on the pieces, a way into the shop, and one piece at a time on phones */
.journey-tee .tee-name em{font-style:normal;font-size:11px;opacity:.75}
.journey-tee .tee-name em s{opacity:.6;margin-right:4px}
.entrance-foot button+button{margin-left:8px}


/* Studio scene: a floating piece from the next collections instead of a blank promo shirt */
.studio-floating{filter:drop-shadow(0 30px 30px #28331f2e)}
.studio-floating .studio-piece{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.studio-floating .studio-piece img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.studio-floating>.studio-label{position:absolute;left:50%;top:auto;bottom:-4%;line-height:1.25;letter-spacing:0;font-family:inherit;font-weight:500;transform:translateX(-50%);display:grid;gap:2px;width:max-content;max-width:120%;padding:7px 14px;border-radius:14px;background:#f6f5f0cc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#2f3a28;font-size:13px;text-align:center;box-shadow:0 6px 18px #0000000f}
.studio-floating>.studio-label small{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}

/* Entrance tees on a sideways track (journey.js moves them with the scroll); names and prices under each piece */
.gallery-copy .gallery-explore{margin-top:10px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;pointer-events:auto}
.journey-tee.on-track{--w:min(330px,38vh);left:50%!important;top:calc(52% - var(--w)/2)!important;width:var(--w)!important;margin-left:calc(var(--w)/-2);transform-origin:50% 50%}
.journey-tee.on-track .tee-image-button{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.journey-tee.on-track .tee{width:100%;transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.journey-tee.on-track .tee-back{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.97);transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 22px 26px #0003);pointer-events:none}
@media(hover:hover){
 .journey-tee.has-back .tee-image-button:hover .tee{opacity:0}
 .journey-tee.has-back .tee-image-button:hover .tee-back{opacity:1;transform:none}
}
.journey-tee.show-back .tee{opacity:0}
.journey-tee.show-back .tee-back{opacity:1;transform:none}
.journey-tee.on-track .tee-name{position:relative;top:auto;left:auto;right:auto;display:grid;gap:2px;width:max-content;max-width:120%;margin:10px auto 0;padding:7px 14px;border:0;border-radius:14px;background:#f6f5f0c2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#2f3a28;font:inherit;font-size:13px;line-height:1.25;text-align:center;transform:none;cursor:pointer;box-shadow:0 6px 18px #0000000f}
@media(max-width:700px){
 .journey-tee.on-track{--w:min(68vw,40svh);top:calc(50% - var(--w)/2)!important}
 .journey-tee.on-track .tee-name{font-size:13px;padding:7px 12px}
}

/* Every product box is rounded (an older rule squared the 2nd and 3rd cards and some panels) */
.shop-world .shop-product .shop-product-image,.shop-world .maker-scene,.shop-world .future-art,.shop-world .archive-object,.shop-world .orbital-art,.shop-world .collab-art,.shop-world .guide-grid article{border-radius:22px}
#product-dialog .product-gallery .catalogue-photo,#product-dialog .product-thumb{border-radius:18px;overflow:hidden}

/* Phones: the walkthrough is longer so the tees come one by one at a calm pace (journey.js adds 4 steps of 55.5svh) */
@media(max-width:699px){#journey{height:calc(544.444444svh + 4 * 55.5555555svh)}}
/* Phones: the drop room's name/price card sits under the shirt, not on it */
@media(max-width:700px){.drop-discover{left:50%!important;right:auto!important;top:auto!important;bottom:118px!important;transform:translateX(-50%)!important;min-width:0;width:max-content;max-width:86vw}}

/* Stable phone snapping: proximity leaves the other scenes free of mandatory snap targets.
   Chapter navigation opts into smooth scrolling explicitly in goChapter(). */
@media(max-width:699px){html{scroll-snap-type:y proximity;scroll-behavior:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}
.snap-point{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none}

/* Phones: the pieces sit below the collection title and "Explore collection" (journey.js measures --copy-bottom), centred in the
   space left above the room bar, and shrink on short screens instead of covering the text. */
@media(max-width:700px){
 .journey-tee.on-track{--copy:calc(var(--copy-bottom,calc(13svh + 170px)) + 12px);--avail:calc(100svh - 96px - var(--copy));--w:min(68vw,calc(var(--avail) - 110px));top:calc(var(--copy) + max(0px,(var(--avail) - var(--w) - 100px) / 2))!important}
}
/* Icons inside text buttons */
.gallery-explore .ico,.text-button .ico{width:.95em;height:.95em;margin-left:2px}