/* ---------- atelier — gallery minimal ---------- */
body.t-atelier { --sf-serif: 'Fraunces', Georgia, serif; }
body.t-atelier .sf-name { font-family: var(--sf-serif); font-weight: 400; font-size: 21px; letter-spacing: 0.02em; }
body.t-atelier .sf-hero { padding: 96px 0 70px; }
body.t-atelier .sf-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 44px); letter-spacing: 0.01em; }
body.t-atelier .sf-hero p { letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; margin-top: 16px; }
body.t-atelier .product-grid { gap: 34px 26px; }
body.t-atelier .product-card { border: none; background: transparent; border-radius: 0; box-shadow: none; }
body.t-atelier .product-card:hover { transform: none; box-shadow: none; }
body.t-atelier .product-card .ph { border-radius: 0; }
body.t-atelier .product-card .ph img { transition: transform 0.5s ease; }
body.t-atelier .product-card:hover .ph img { transform: scale(1.045); }
body.t-atelier .product-card .meta { padding: 12px 2px; text-align: center; }
/* :not(.ws-body) keeps the ghost button on atelier SHOPS only. On a website page
   this rule outranks `.ws-cta .btn.brand`, which left the CTA band's button
   transparent-on-brand, and it reintroduced the button border the website
   engine deliberately removes. */
body.t-atelier:not(.ws-body) .btn.brand { background: transparent; color: var(--heading); border: 1px solid var(--heading); border-radius: 0; box-shadow: none; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
body.t-atelier:not(.ws-body) .btn.brand:hover { background: var(--heading); color: var(--bg-flat); opacity: 1; }
body.t-atelier .sf-announce { background: transparent; color: var(--muted); border-bottom: 1px solid var(--line); letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }