.shop-hero { padding: clamp(96px, 12vw, 168px) 0 74px; background: radial-gradient(circle at 78% 15%, rgba(162,180,163,.25), transparent 35%), var(--cream); }
.shop-hero-grid { display: grid; grid-template-columns: 1.45fr .55fr; gap: clamp(50px, 9vw, 130px); align-items: end; }
.shop-hero h1 { max-width: 850px; margin: 0; font-size: clamp(3.7rem, 7.2vw, 7.4rem); letter-spacing: -.04em; }
.shop-hero p:not(.eyebrow) { max-width: 680px; margin: 28px 0 0; color: var(--stone); font-size: 1rem; line-height: 1.85; }
.shop-hero aside { border-left: 1px solid var(--sage); padding-left: 24px; }
.shop-hero aside strong, .shop-hero aside span { display: block; }
.shop-hero aside strong { margin-bottom: 10px; color: var(--sage-dark); font: 500 1.3rem "Cormorant Garamond", serif; }
.shop-hero aside span { color: var(--stone); font-size: .72rem; line-height: 1.7; }
.shop-toolbar { grid-template-columns: 1.6fr .8fr .8fr auto; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 50px 22px; }
.product-card button { width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.product-image { position: relative; overflow: hidden; aspect-ratio: .9; background: #e5dfd3; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.product-card button:hover img, .product-card button:focus-visible img { transform: scale(1.045); }
.product-image span { position: absolute; right: 10px; bottom: 10px; padding: 7px 9px; background: rgba(255,253,248,.92); color: var(--sage-dark); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.product-body { padding-top: 15px; }
.product-material { margin: 0 0 6px; color: var(--sage-dark); font-size: .61rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.product-body h2 { min-height: 2em; margin: 0; font-size: 1.55rem; line-height: 1; }
.product-price { display: grid; gap: 4px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.product-price strong { color: var(--ink); font-size: .72rem; font-weight: 500; }
.product-price span { color: var(--stone); font-size: .62rem; line-height: 1.45; }
.quote-block { display: grid; gap: 7px; margin: 24px 0 0; padding: 17px; background: rgba(105,125,106,.1); }
.quote-block strong { color: var(--sage-dark); font: 500 1.45rem "Cormorant Garamond", serif; }
.quote-block span { color: var(--stone); font-size: .7rem; line-height: 1.55; }
.product-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.product-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; border: 1px solid var(--sage-dark); padding: 10px 15px; color: var(--sage-dark); text-decoration: none; font-size: .68rem; font-weight: 500; }
.product-actions a.primary { background: var(--sage-dark); color: white; }
.load-error { margin: 20vh auto; text-align: center; }
@media (max-width: 980px) { .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 760px) { .shop-hero-grid { grid-template-columns: 1fr; gap: 35px; } .shop-toolbar { grid-template-columns: 1fr 1fr; } .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 14px; } }
@media (max-width: 480px) { .shop-toolbar { grid-template-columns: 1fr; } .product-body h2 { font-size: 1.25rem; } }