.shop-page { background: var(--ivory); }
.shop-header { color: var(--black); }
.shop-nav { display: flex; align-items: center; gap: 34px; text-transform: uppercase; font-size: .72rem; letter-spacing: .16em; }
.cart-button, .filters button, .cart-top button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: inherit; }
.cart-button span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 5px; border-radius: 50%; background: var(--forest); color: var(--ivory); font-size: .62rem; }
.shop-intro { min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 160px 6vw 8vw; border-bottom: 1px solid rgba(23,26,23,.2); }
.shop-intro h1 { margin: 0; max-width: 1050px; font-family: var(--serif); font-size: clamp(4rem, 8.5vw, 9rem); font-weight: 400; line-height: .86; letter-spacing: -.04em; }
.shop-intro-copy { align-self: flex-end; max-width: 470px; margin: 50px 5vw 0 0; color: #536057; line-height: 1.8; }
.catalogue { padding: 100px 4vw 130px; }
.catalogue-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 55px; }
.section-kicker { margin: 0 0 14px; font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.catalogue h2 { margin: 0; font: 400 clamp(2.8rem, 5vw, 5.8rem)/.9 var(--serif); }
.filters { display: flex; flex-wrap: wrap; gap: 11px; }
.filters button { padding: 10px 16px; border: 1px solid rgba(23,26,23,.28); border-radius: 999px; font-size: .62rem; }
.filters button.active, .filters button:hover { background: var(--black); color: var(--ivory); }
.currency-control { display: grid; gap: 7px; font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; }
.currency-control select { border: 0; border-bottom: 1px solid rgba(23,26,23,.45); padding: 8px 24px 8px 0; background: transparent; color: inherit; font: 500 .7rem var(--sans); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 68px 18px; }
.product-card { min-width: 0; }
.product-visual { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.product-visual::before, .product-visual::after { content: ""; position: absolute; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-visual::before { transform: translate(-50%,-50%) rotate(8deg) scale(1.04); }
.product-card:hover .product-visual::after { transform: rotate(-7deg) scale(1.04); }
.product-visual .edition-tag { position: absolute; top: 18px; left: 18px; z-index: 2; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
.visual-1 { background: #c9d4c7; } .visual-1::before { width: 55%; height: 67%; left: 50%; top: 52%; transform: translate(-50%,-50%); border-radius: 45% 45% 15% 15%; background: #eff0e7; box-shadow: inset 0 -30px 60px rgba(38,61,50,.16); }
.visual-2 { background: #252b27; } .visual-2::before { width: 62%; height: 62%; left: 50%; top: 51%; transform: translate(-50%,-50%); background: #bdcbbd; clip-path: polygon(25% 0,75% 0,100% 24%,83% 100%,17% 100%,0 24%); }
.visual-3 { background: #d8cdbb; } .visual-3::before { width: 55%; height: 68%; left: 50%; top: 52%; transform: translate(-50%,-50%); border-radius: 8px 8px 28px 28px; background: #6d8472; }
.visual-4 { background: #a6b6a4; } .visual-4::before { width: 58%; height: 20%; left: 21%; top: 41%; border: 24px solid #ece8dd; border-top-width: 40px; }
.visual-5 { background: #e5ddce; } .visual-5::before { width: 53%; height: 66%; left: 50%; top: 52%; transform: translate(-50%,-50%); border-radius: 40% 40% 22% 22%; background: #171a17; }
.visual-6 { background: #17251f; } .visual-6::before { width: 45%; height: 58%; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(12deg); border-radius: 47% 53% 38% 62%; background: #e4ded1; }
.visual-7 { background: #c8d5c7; } .visual-7::before { width: 46%; height: 46%; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: #263d32; box-shadow: 45px 30px 0 #d9c276; }
.visual-8 { background: #d2c3ae; } .visual-8::before { width: 34%; height: 62%; left: 50%; top: 52%; transform: translate(-50%,-50%); border-radius: 55% 55% 18% 18%; background: #879d87; }
.visual-9 { background: #8ca18f; } .visual-9::before { width: 65%; height: 36%; left: 18%; top: 34%; transform: rotate(-10deg); border-radius: 48%; background: #f0ede4; }
.visual-10 { background: #20221f; } .visual-10::before { width: 54%; height: 54%; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #c8b36b; clip-path: polygon(50% 0,95% 30%,78% 100%,22% 100%,5% 30%); }
.visual-11 { background: #e7e1d5; } .visual-11::before { width: 58%; height: 70%; left: 50%; top: 50%; transform: translate(-50%,-50%); background: linear-gradient(130deg,#263d32 0 42%,#d9c276 43% 56%,#879d87 57%); }
.visual-12 { background: #7f9b83; } .visual-12::before { width: 62%; height: 64%; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 16px solid #f1ede3; border-radius: 50% 50% 12% 12%; }
.visual-13 { background: #d9c276; } .visual-13::before { width: 68%; height: 58%; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-5deg); background: #f2eee4; box-shadow: inset 0 0 0 2px #171a17; }
.visual-14 { background: #c4d0c3; } .visual-14::before { width: 60%; height: 68%; left: 50%; top: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 33% 30%,#d9c276 0 11%,transparent 12%), radial-gradient(circle at 65% 58%,#171a17 0 18%,transparent 19%), linear-gradient(35deg,#f2eee4 48%,#69816e 49%); }
.visual-15 { background: #171a17; } .visual-15::before { width: 64%; height: 66%; left: 50%; top: 50%; transform: translate(-50%,-50%); background: repeating-linear-gradient(125deg,#d8cdbb 0 8px,#263d32 8px 18px,#d9c276 18px 22px); }
.product-meta { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 17px 3px 0; }
.product-category { grid-column: 1 / -1; margin: 0; font-size: .58rem; color: #69736c; letter-spacing: .16em; text-transform: uppercase; }
.product-name { margin: 0; font: 400 1.55rem/1.1 var(--serif); }
.product-price { margin: 3px 0 0; font-size: .72rem; }
.product-description { grid-column: 1 / -1; min-height: 42px; margin: 6px 0 12px; color: #626b65; font-size: .76rem; line-height: 1.55; }
.add-button { grid-column: 1 / -1; width: 100%; border: 1px solid var(--black); padding: 13px 16px; background: transparent; font: 500 .62rem var(--sans); letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: .25s; }
.add-button:hover { background: var(--black); color: var(--ivory); }
.shop-note { display: flex; justify-content: space-between; align-items: flex-end; gap: 70px; padding: 100px 6vw; background: var(--mist); }
.shop-note p { max-width: 830px; margin: 0; font: 400 clamp(2.2rem,4.2vw,5rem)/1 var(--serif); }
.shop-note a { flex: 0 0 auto; border-bottom: 1px solid; padding-bottom: 8px; font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.cart { position: fixed; z-index: 60; inset: 0 0 0 auto; width: min(460px,100%); padding: 25px; background: var(--ivory); transform: translateX(105%); transition: transform .4s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.cart.open { transform: none; }
.cart-backdrop { position: fixed; z-index: 55; inset: 0; border: 0; background: rgba(10,13,10,.48); opacity: 0; visibility: hidden; transition: .35s; }
.cart.open + .cart-backdrop { opacity: 1; visibility: visible; }
.cart-top { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid rgba(23,26,23,.2); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; }
.cart-top p { margin: 0; }
.cart-items { overflow: auto; flex: 1; }
.cart-line { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(23,26,23,.13); }
.cart-line-art { width: 62px; height: 78px; background: var(--mist); }
.cart-line p { margin: 0 0 7px; font-family: var(--serif); font-size: 1.1rem; }
.cart-line small { color: #68716b; }
.cart-line button { border: 0; background: none; text-decoration: underline; font-size: .62rem; cursor: pointer; }
.cart-empty { margin: auto; color: #68716b; font-family: var(--serif); font-size: 1.5rem; }
.cart-footer { padding-top: 20px; border-top: 1px solid rgba(23,26,23,.2); }
.cart-footer > div { display: flex; justify-content: space-between; }
.cart-footer p, .cart-footer small { display: block; color: #68716b; font-size: .68rem; }
.checkout-button { width: 100%; margin: 12px 0; border: 0; padding: 17px; background: var(--forest); color: var(--ivory); font: 500 .67rem var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.checkout-button:disabled { opacity: .45; cursor: not-allowed; }
[hidden] { display: none !important; }
@media (max-width: 850px) { .product-grid { grid-template-columns: repeat(2,1fr); } .catalogue-head, .shop-note { align-items: flex-start; flex-direction: column; } }
@media (max-width: 560px) { .shop-header { padding-inline: 20px; } .brand small { display: none; } .shop-nav { gap: 18px; } .shop-intro { min-height: 68vh; padding-inline: 24px; } .shop-intro h1 { font-size: 3.7rem; } .shop-intro-copy { margin-right: 0; } .catalogue { padding: 75px 18px 90px; } .catalogue-head { margin-bottom: 35px; } .product-grid { grid-template-columns: 1fr; gap-bottom: 55px; } .product-visual { aspect-ratio: 1 / 1.08; } .shop-note { padding: 75px 24px; } }