/* Shop-only ink and paper. Keep the shared identity and controls with the site. */
.commerce-page { --commerce-deep: #304e41; --commerce-cream: #f0e6cc; }
.commerce-page .section-pad { padding-block: clamp(42px, 6vw, 88px); }
.commerce-page p { max-width: 48ch; }
.commerce-page h1 { color: var(--anthro-ink); font-size: clamp(62px, 8.5vw, 125px); }
.commerce-page h2 { font-size: clamp(42px, 5.5vw, 77px); }
.commerce-page h1 em, .commerce-page h2 em { color: var(--slop-ink); }
.commerce-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5vw; align-items: end; }
.commerce-intro-note { padding-bottom: 10px; }
.commerce-intro-note > p { font-size: clamp(22px, 2.2vw, 31px); line-height: 1.45; }
.commerce-intro nav { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.commerce-intro nav a { display: inline-flex; gap: 25px; padding-block: 10px; }
.commerce-record { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; background: var(--commerce-deep) var(--press-texture); color: var(--commerce-cream); position: relative; border-block: 8px solid #aa573d; }
.commerce-record:before { content: ''; position: absolute; inset: 9px; border: 1px solid #f0e6cc55; pointer-events: none; }
.commerce-sleeve { padding: 16px; background: #e6dcc2 var(--press-texture); color: #292d29; transform: rotate(-2deg); box-shadow: 8px 11px 0 #152d2855; }
.commerce-sleeve img { width: 100%; height: auto; display: block; }
.commerce-sleeve figcaption { display: flex; justify-content: space-between; gap: 14px; font: 10px/1.5 var(--mono); padding-top: 17px; }
.commerce-record .eyebrow { color: #f0e6cc; }
.commerce-record h2 { margin-bottom: 28px; }
.commerce-record h2 em { color: #e7c46d; }
.commerce-record-copy > p:not(.eyebrow) { margin-top: 15px; font-size: 17px; }
.commerce-record .button-link { margin-top: 29px; background: #e7c46d; color: #243e34; border-color: #e7c46d; font-size: 16px; }
.commerce-record .button-link:hover { background: #f0e6cc; border-color: #f0e6cc; }
.commerce-record .text-link:hover { color: #e7c46d; }
.commerce-record-copy > .commerce-purchase-note { font-size: 12px !important; }
.commerce-record a:focus-visible { outline-color: #e7c46d; }
.commerce-collection-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: 7vw; align-items: end; margin-bottom: 45px; }
.commerce-collection-heading > div > p:not(.eyebrow) { margin-top: 18px; }
.commerce-coming { display: inline-block; border-block: 1px solid var(--slop-ink); padding-block: 10px; font-weight: 700; color: var(--slop-ink); }
.commerce-sticker-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.commerce-sticker { min-width: 0; padding: 18px 20px 28px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.commerce-sticker:nth-child(4n) { border-right: 0; }
.commerce-sticker-art { position: relative; display: grid; place-items: center; height: 265px; }
.commerce-sticker-art > span { position: absolute; top: 0; left: 0; font: 11px var(--mono); color: var(--slop-ink); }
.commerce-sticker img { width: 100%; height: 235px; object-fit: contain; filter: drop-shadow(3px 6px 0 #272c3918); }
.commerce-sticker h3 { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.commerce-sticker figcaption p { font-size: 13px; line-height: 1.5; }
.commerce-collection-note { font-size: 13px; padding-top: 25px; max-width: none !important; }
.commerce-room { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; border-top: 1px solid var(--line); }
.commerce-room figure { padding: 12px; border: 1px solid var(--line); transform: rotate(1.5deg); }
.commerce-room img { width: 100%; height: auto; display: block; }
.commerce-room figcaption { font: 11px/1.6 var(--mono); padding-top: 12px; }
.commerce-room h2 { margin-bottom: 25px; }
.commerce-room-links { display: flex; flex-wrap: wrap; gap: 15px 25px; margin-top: 25px; }
.commerce-room-links a { padding-block: 8px; }
.commerce-catalog { display: grid; gap: 30px; }
.commerce-catalog-item { display: grid; grid-template-columns: minmax(100px, 220px) 1fr; gap: 25px; padding-block: 25px; border-top: 1px solid var(--line); }
.commerce-catalog-item img { max-width: 100%; height: auto; }
[data-theme=dark] .commerce-sticker-art { background: #e8dfc9 var(--press-texture); margin-bottom: 16px; }
[data-theme=dark] .commerce-sticker-art > span { color: #753e31; top: 10px; left: 10px; }
@media(max-width: 900px) { .commerce-sticker-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .commerce-sticker:nth-child(2n) { border-right: 0; } .commerce-record { gap: 5vw; } .commerce-record .button-link { font-size: 14px; } }
@media(max-width: 650px) { .commerce-intro, .commerce-record, .commerce-collection-heading, .commerce-room { grid-template-columns: 1fr; gap: 34px; } .commerce-intro-note > p { font-size: 23px; } .commerce-intro nav { margin-top: 18px; } .commerce-sleeve { margin: 0 7px 8px; } .commerce-record-copy { padding-inline: 6px; } .commerce-sticker { padding: 15px 10px 24px; } .commerce-sticker-art { height: 200px; } .commerce-sticker img { height: 175px; } .commerce-sticker h3 { font-size: 16px; } .commerce-sticker figcaption p { font-size: 12px; } .commerce-room figure { margin-inline: 4px; } .commerce-sleeve figcaption { font-size: 9px; } }
.commerce-live[hidden] { display: none; }
.commerce-live { border-bottom: 1px solid var(--line); }
.commerce-live h2 { margin-bottom: 25px; }
.commerce-live .commerce-store-status { margin-bottom: 25px; }
.commerce-live .commerce-catalog-item h3 { font-size: 26px; line-height: 1.2; margin-bottom: 16px; }
.commerce-product-form { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.commerce-product-form label { display: grid; gap: 6px; font-size: 14px; max-width: 100%; }
.commerce-product-form select,.commerce-product-form input { font: inherit; min-height: 44px; border: 1px solid var(--ink); color: var(--ink); background: var(--surface,var(--paper)); padding: 8px; max-width: 100%; }
.commerce-product-form input { width: 80px; }
.commerce-product-form .button-link { font: inherit; cursor: pointer; }
.commerce-product-form .button-link:disabled { opacity: .65; cursor: wait; }
.commerce-product-price,.commerce-checkout-status { flex-basis: 100%; }
@media(max-width:650px) { .commerce-live .commerce-catalog-item { grid-template-columns: 1fr; } .commerce-live .commerce-catalog-item > img { width: 220px; } }