/* Store home: the try-it-on screen, the print picker and the shelf. */
.hero { padding: 56px 0 34px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, .6fr); gap: 40px; align-items: end; }
.hero h1 { font-size: clamp(42px, 6vw, 90px); font-weight: 900; font-stretch: 125%; letter-spacing: -.035em; line-height: .94; }
.hero p { color: var(--ink-2); font-size: 18.5px; }

/* the price tag, pinned to the corner of a tile or the stage */
.tile > .tag, .stage > .tag { position: absolute; z-index: 2; left: -14px; top: 22px; transform: rotate(-4deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.tile:hover .tag { transform: rotate(-9deg) translateY(-3px); }

/* try it on: pick a scene, switch the screen shape */
.stage { position: relative; background: var(--panel); border: var(--edge-w) solid var(--edge); border-radius: 18px; }
.stage > .tag { top: 26px; }
.floor { height: clamp(240px, 34vw, 460px); display: grid; place-items: center; padding: 30px; background: #0b0b0c; border-radius: 15px 15px 0 0; border-bottom: var(--edge-w) solid var(--edge); overflow: hidden; }
.screen { height: 100%; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; overflow: hidden; border: 6px solid #000; outline: 1px solid #2c2c30; background: #000; transition: aspect-ratio .45s cubic-bezier(.3, .7, .2, 1), border-radius .45s; }
.screen[data-shape="wide"] { aspect-ratio: 21 / 9; }
.screen[data-shape="phone"] { aspect-ratio: 9 / 19.5; border-radius: 26px; }
.screen img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.screen img.out { opacity: 0; }
.deck { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 22px; align-items: center; padding: 18px 24px; }
.deck .name b { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 118%; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; }
.deck .name span { color: var(--ink-3); font-size: 15px; }
.shapes { display: flex; border: var(--edge-w) solid var(--edge); border-radius: 10px; overflow: hidden; }
.shapes button { border: 0; background: none; height: 48px; padding: 0 16px; font-weight: 600; font-size: 15.5px; }
.shapes button + button { border-left: var(--edge-w) solid var(--edge); }
.shapes button[aria-pressed="true"] { background: var(--act); color: var(--act-ink); }
.pick { margin: 26px 0 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.pick h2 { font-size: 24px; }
.pick p { color: var(--ink-3); font-size: 15.5px; }
.prints button { text-align: left; background: var(--panel); border: var(--edge-w) solid var(--edge); border-radius: 10px; padding: 8px 8px 0; transition: transform .15s; }
.prints button:hover { transform: translateY(-3px); }
.prints button[aria-pressed="true"] { background: var(--act); color: var(--act-ink); }
.prints button[aria-pressed="true"] span span { color: var(--act-ink); }
.prints button > span { display: flex; justify-content: space-between; padding: 9px 2px 10px; font-size: 14px; font-weight: 600; }
.prints button > span span { color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }

.shelf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.tile { position: relative; display: flex; flex-direction: column; background: var(--panel); border: var(--edge-w) solid var(--edge); border-radius: 18px; }
.tile .pic { border-radius: 15px 15px 0 0; overflow: hidden; border-bottom: var(--edge-w) solid var(--edge); }
.tile .pic img { width: 100%; height: 100%; object-fit: cover; }
.tile .body { padding: 26px 28px 28px; display: grid; gap: 14px; flex: 1; align-content: start; }
.tile h2 { font-size: clamp(26px, 2.6vw, 38px); }
.tile p { color: var(--ink-2); }
.label { list-style: none; border-top: 1px dashed var(--line); font-size: 15.5px; }
.label li { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.label li span { color: var(--ink-3); }
.label li b { font-weight: 600; text-align: right; }
.big { grid-row: 1 / 3; }
.big .pic { flex: 1; min-height: 380px; }
.big .body { flex: none; }
.small .pic { aspect-ratio: 16 / 7; }
.small.pack .pic { background: #0b0b0c; display: flex; align-items: center; }
.small.pack .pic > img { height: 100%; width: 42%; flex: none; object-fit: contain; padding: 3% 0 3% 4%; }
.small.pack .pic div { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 5% 0 3%; }
.small.pack .pic div img { aspect-ratio: 16 / 9; border-radius: 5px; border: 1px solid #262626; }
.small.wh { background: #0b1422; color: #eef3f9; border-color: #0b1422; }
[data-theme="dark"] .small.wh { border-color: #1f2d42; }
.small.wh .body { grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; align-items: start; }
.small.wh .body > img { width: 64px; grid-row: 1 / 5; }
.small.wh .body > :not(img) { grid-column: 2; }
.small.wh p { color: #a9b6c8; }
.small.wh .btn { background: #58c4f5; border-color: #58c4f5; color: #06121f; }
.small.wh .tag { position: static; transform: none; box-shadow: none; font-size: 15px; padding: 5px 10px 5px 8px; justify-self: start; }

.sec { padding: 96px 0 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 30px; }
.sec-head h2 { font-size: clamp(34px, 4.4vw, 62px); font-weight: 900; }
.sec-head p { color: var(--ink-2); }
.prints { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.prints figure { background: var(--panel); border: var(--edge-w) solid var(--edge); border-radius: 10px; padding: 8px 8px 0; }
.prints img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: 4px; }
.prints figcaption { display: flex; justify-content: space-between; padding: 9px 2px 10px; font-size: 14px; font-weight: 600; }
.prints figcaption span { color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }

.how { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.receipt { background: var(--panel); border: var(--edge-w) solid var(--edge); border-bottom-style: dashed; border-radius: 4px 4px 0 0; padding: 26px 28px 34px; position: relative; font-variant-numeric: tabular-nums; }
.receipt h3 { font-size: 20px; margin-bottom: 14px; }
.receipt li { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.receipt li span { color: var(--ink-3); }
.receipt li b { font-weight: 600; text-align: right; }
.maker h2 { font-size: clamp(30px, 3.6vw, 50px); font-weight: 900; margin-bottom: 18px; }
.maker p { color: var(--ink-2); max-width: 34em; margin-bottom: 20px; }

@media (max-width: 960px) {
  .hero .wrap, .shelf, .sec-head, .how { grid-template-columns: minmax(0, 1fr); }
  .big { grid-row: auto; } .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile > .tag, .stage > .tag { left: -6px; font-size: 22px; }
  .deck { grid-template-columns: minmax(0, 1fr); gap: 14px; } .shapes { justify-self: start; } .floor { padding: 16px; } .pick { flex-direction: column; gap: 4px; }
}
.tryon, .shelf-sec { padding: 0; }
.prints img { height: auto; }