/** Shopify CDN: Minification failed

Line 735:0 Unexpected "@media"

**/
/* Signature storefront. Shopify components own behavior; this file owns presentation. */
body.premium-store { --atelier-ivory: var(--atelier-canvas, #f6f4ee); --atelier-ink: #202c29; --atelier-muted: #64716a; --atelier-line: #dcded5; background: var(--atelier-ivory); color: var(--atelier-ink); -webkit-font-smoothing: antialiased; }
.premium-store :is(h1,h2,h3,h4) { text-wrap: balance; }
.premium-store :is(h1,.h1) { letter-spacing: -.045em; }
.premium-store :is(h2,.h2) { letter-spacing: -.035em; }
.premium-store :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.premium-store :is(button,.button,input,select,textarea) { font: inherit; }
.premium-store :is(.button,.button-secondary,.shopify-payment-button__button) { min-height: 48px; transition: background .22s, box-shadow .22s, transform .22s; }
.premium-store .button:not(.button-unstyled) { background-image: linear-gradient(115deg,transparent 25%,#ffffff18 49%,transparent 72%); background-size: 260% 100%; background-position: 100% 0; }
.premium-store :is(.button,.button-secondary):hover { background-position: 0 0; }
.premium-store :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) { border-radius: 10px; }
.premium-store :is(input[type=email],input[type=text],input[type=password],input[type=search],textarea) { font-size: max(16px,1em); }
.premium-store .header-logo { letter-spacing: -.035em; }
.premium-store .menu-list__link { transition: opacity .2s; }
.premium-store .announcement-bar { letter-spacing: .12em; }
.premium-store :is(.cart-drawer__dialog,.search-modal__content,.menu-drawer,.theme-drawer__content) { border-color: var(--atelier-line); }
.premium-store dialog::backdrop { background: #10201c66; backdrop-filter: blur(5px); }
.premium-store :is(.product-card,.collection-card) { transition: transform .3s ease; }
.premium-store .product-card .card-gallery { border-radius: 20px; overflow: hidden; }
.premium-store .product-card :is(.product-card__content,.product-grid__card) { row-gap: 14px; }
.premium-store .product-card .price { color: var(--atelier-emerald); }
.premium-store .product-card .product-title { letter-spacing: -.015em; }
.premium-store .product-information { padding-block: clamp(24px,4vw,64px); }
.premium-store .product-information__grid { align-items: start; }
.premium-store .product-details { padding: clamp(0px,2vw,24px); }
.premium-store .product-details h1 { font-size: clamp(30px,3.4vw,52px); line-height: 1.08; letter-spacing: -.04em; }
.premium-store .product-details .price { font-size: 1.35rem; }
.premium-store .variant-option__button-label { min-height: 44px; }
.premium-store .quantity-selector { border-radius: 999px; min-height: 48px; }
.premium-store .sticky-add-to-cart__bar { border: 1px solid var(--atelier-line); border-radius: 18px; box-shadow: 0 8px 32px #10201c12; }
.premium-store .cart__summary { border-radius: 20px; }
.premium-store :is(.facets,.sorting-filter) { border-color: var(--atelier-line); }
.premium-store :is(.blog-post-card,.article-template img) { border-radius: 16px; }
.premium-store :is(.rte,.shopify-policy__body) { line-height: 1.8; }
.premium-store .shopify-policy__container { max-width: 800px; padding-block: 64px; }
.premium-store [data-template='page'] .section { padding-block: clamp(32px,5vw,80px); }
.premium-store :is(.contact-form,.search-page-input) { border-radius: 16px; }
.premium-store .contact-form { max-width: 760px; margin-inline: auto; }
.atelier { position: relative; isolation: isolate; padding-block: clamp(56px,7vw,104px); color: var(--a-text); background: var(--a-bg); }
.atelier-tone--light { --a-bg: var(--atelier-ivory); --a-text: var(--atelier-ink); --a-muted: #58675f; --a-border: #d5dbd2; --a-card: #ffffff80; --a-accent: var(--atelier-emerald); }
.atelier-tone--dark { --a-bg: var(--atelier-charcoal); --a-text: #f6f4ee; --a-muted: #b9c8bf; --a-border: #ffffff24; --a-card: #ffffff06; --a-accent: var(--atelier-gold); }
.atelier-tone--emerald { --a-bg: var(--atelier-emerald); --a-text: #f6f4ee; --a-muted: #c3d4c9; --a-border: #ffffff29; --a-card: #ffffff07; --a-accent: var(--atelier-gold); }
.atelier-wrap { width: min(1280px,calc(100% - 96px)); margin-inline: auto; }
.atelier h1,.atelier h2 { font-family: var(--atelier-display); font-weight: 400; line-height: 1.06; letter-spacing: -.045em; margin: 0; color: inherit; }
.atelier h1 { font-size: clamp(48px,6.5vw,94px); max-width: 10ch; }
.atelier h2 { font-size: clamp(36px,4.4vw,62px); max-width: 17ch; }
.atelier h1 em,.atelier h2 em { color: var(--a-accent); font-weight: inherit; }
.atelier h3 { font-family: var(--font-body--family); font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; color: inherit; margin: 0 0 16px; }
.atelier p { margin-top: 0; }
.atelier .atelier-eyebrow { font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--a-accent); margin: 0 0 24px; display: flex; align-items: center; gap: 12px; }
.atelier-eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.atelier-copy { max-width: 43ch; color: var(--a-muted); font-size: clamp(15px,1.3vw,17px); line-height: 1.8; margin-top: 24px; }
.atelier-copy p:last-child { margin-bottom: 0; }
.atelier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.atelier-button { display: inline-flex; justify-content: center; align-items: center; gap: 32px; border: 1px solid transparent; border-radius: 999px; background: #f2efe4; color: #152b23; padding: 17px 26px; min-height: 54px; font-size: 14px; font-weight: 500; text-decoration: none; position: relative; overflow: hidden; transition: transform .25s,box-shadow .25s; }
.atelier-tone--light .atelier-button { background: var(--atelier-emerald); color: #fff; }
.atelier-button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 30%,#ffffff45 50%,transparent 70%); transform: translateX(-110%); transition: transform .65s; pointer-events: none; }
.atelier-button:hover::after { transform: translateX(110%); }
.atelier-button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px #00000015; }
.atelier-text-link { color: inherit; display: inline-flex; gap: 14px; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--a-border); font-size: 14px; }
.atelier-text-link:hover { text-decoration-color: currentColor; }
.atelier .atelier-caption { font-size: 12px; color: var(--a-muted); line-height: 1.7; margin: 24px 0 0; }
.atelier-editorial { overflow: clip; }
.atelier-editorial--hero { padding-block: clamp(40px,6vw,88px); background: radial-gradient(ellipse at 75% 40%,#245b433a,transparent 60%),var(--a-bg); }
.atelier-editorial__grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(32px,5vw,80px); }
.atelier-editorial__copy { position: relative; z-index: 2; padding-block: 24px; }
.atelier-pattern { position: absolute; z-index: -1; inset: 0; opacity: .1; background-image: linear-gradient(45deg,transparent 49.6%,var(--a-border) 50%,transparent 50.4%),linear-gradient(-45deg,transparent 49.6%,var(--a-border) 50%,transparent 50.4%); background-size: 72px 72px; mask-image: linear-gradient(90deg,transparent,#000); pointer-events: none; }
.atelier-editorial__stage { position: relative; min-width: 0; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--a-border); border-radius: 48% 48% 24px 24px; background: radial-gradient(ellipse at 50% 38%,#8da88d22,transparent 65%),linear-gradient(150deg,#ffffff07,transparent); }
.atelier-editorial__image { width: 88%; height: 88%; object-fit: contain; z-index: 1; transform: translate3d(0,var(--atelier-shift,0px),0) rotate(var(--atelier-rotate,0deg)); transition: transform .6s ease-out; }
.atelier-editorial__stage--cover { border-radius: 24px; overflow: hidden; }
.atelier-editorial__stage--cover .atelier-editorial__image { width: 100%; height: 100%; object-fit: cover; }
.atelier-orbit { position: absolute; inset: 9%; border: 1px solid var(--a-border); border-radius: 50%; pointer-events: none; }
.atelier-orbit::after { content: ''; position: absolute; inset: 10%; border: 1px solid var(--a-border); border-radius: 50%; }
.atelier-product-caption { position: absolute; bottom: 20px; inset-inline: 20px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 16px 18px; border: 1px solid #ffffff24; border-radius: 12px; background: #14291fe8; color: #f6f4ee; text-decoration: none; font-size: 12px; }
.atelier-product-caption>span:last-child { white-space: nowrap; }
.atelier-image-note { position: absolute; top: 18%; inset-inline-end: -12px; z-index: 2; background: var(--a-bg); border: 1px solid var(--a-border); padding: 12px 16px; border-radius: 999px; color: var(--a-text); font-size: 11px; letter-spacing: .06em; }
.atelier-monogram { width: 40%; aspect-ratio: 1; position: relative; opacity: .45; }
.atelier-monogram span { position: absolute; inset: 0; border: 1px solid var(--a-accent); transform: rotate(45deg); border-radius: 4px; }
.atelier-monogram span+span { transform: rotate(0); }
.atelier-editorial--cta { text-align: center; }
.atelier-editorial--cta .atelier-editorial__grid { display: block; }
.atelier-editorial--cta :is(h2,.atelier-copy) { margin-inline: auto; }
.atelier-editorial--cta :is(.atelier-eyebrow,.atelier-actions) { justify-content: center; }
.atelier-section-heading { margin-bottom: 44px; }
.atelier-story-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.atelier-story-grid--features { grid-template-columns: repeat(4,minmax(0,1fr)); }
.atelier-story-card { position: relative; min-width: 0; padding: 30px; border: 1px solid var(--a-border); border-radius: 20px; background: linear-gradient(140deg,#ffffff06,transparent),var(--a-card); transition: border-color .3s,transform .3s; }
.atelier-story-card .rte { color: var(--a-muted); font-size: 14px; line-height: 1.8; }
.atelier-story-card .rte p:last-child { margin-bottom: 0; }
.atelier-step { display: block; margin-bottom: 40px; font-family: var(--atelier-display); font-size: 46px; line-height: 1; color: var(--a-accent); }
.atelier-story-card__image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; margin-bottom: 24px; }
.atelier-card-detail { font-size: 12px; color: var(--a-muted); margin: 20px 0 0; }
.atelier-story-card blockquote { margin: 0 0 24px; font-family: var(--atelier-display); font-size: 25px; line-height: 1.5; }
.atelier-review-name { font-size: 13px; font-weight: 600; }
/* The table read as a spreadsheet: centred headers over left-aligned body,
   a tinted middle column with no meaning behind it, and every row the same
   weight. This gives it one clear header band, a labelled first column with
   its own icon, and a quiet accent on the closing column. */
.atelier-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--a-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(7,31,24,.07);
}
.atelier-tone--dark .atelier-table-scroll,
.atelier-tone--emerald .atelier-table-scroll { background: rgba(255,255,255,.04); box-shadow: none; }

.atelier-comparison { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.atelier-comparison :is(th,td) {
  text-align: start;
  padding: 20px clamp(18px,2vw,26px);
  border-bottom: 1px solid var(--a-border);
  min-width: 160px;
  vertical-align: middle;
}
.atelier-comparison thead th {
  padding-block: 16px;
  background: var(--atelier-emerald);
  color: #f6f4ee;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 0;
  white-space: nowrap;
}
.atelier-comparison thead th:first-child { border-start-start-radius: 21px; }
.atelier-comparison thead th:last-child { border-start-end-radius: 21px; }

/* `width: 1%` shrinks the label column to min-content, which wrapped
   two-word labels and made those rows taller than the rest. Keeping the
   label on one line lets the column size to its longest entry instead,
   which holds for whatever headings the merchant sets — a fixed min-width
   only ever fits the labels it was measured against. */
.atelier-comparison tbody th { font-weight: 600; letter-spacing: -.01em; width: 1%; }
.atelier-comparison__head > span:last-child { white-space: nowrap; }
.atelier-comparison__head { display: flex; align-items: center; gap: 12px; }
.atelier-comparison__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--a-border);
  border-radius: 11px;
  color: var(--a-accent);
  background: var(--a-card);
  transition: color .3s ease, border-color .3s ease;
}
.atelier-comparison td { color: var(--a-muted); line-height: 1.6; }
.atelier-comparison td p:last-child { margin-bottom: 0; }
.atelier-comparison__detail { color: var(--a-text); font-size: 13.5px; }
.atelier-comparison tbody tr { transition: background-color .25s ease; }
.atelier-comparison tr:last-child :is(th,td) { border-bottom: 0; }

@media (hover: hover) {
  .atelier-comparison tbody tr:hover { background: rgba(23,62,48,.035); }
  .atelier-comparison tbody tr:hover .atelier-comparison__icon { border-color: var(--a-accent); }
}
@media (max-width: 749px) {
  .atelier-comparison :is(th,td) { padding: 16px 14px; min-width: 150px; }
  .atelier-comparison__icon { width: 30px; height: 30px; border-radius: 9px; }
  .atelier-comparison__head { gap: 10px; }
}
.atelier-collection { min-height: 220px; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--a-border); border-radius: 20px; background: #e6e9df; text-decoration: none; }
.atelier-collection img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s; }
.atelier-collection>span { display: flex; justify-content: space-between; gap: 16px; padding: 24px; color: var(--a-text); margin-top: auto; }
.atelier-faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px,6vw,100px); }
/* Hairline rows made the list read as an index rather than something to
   interact with, and an open answer had no visual tie to its question. Each
   row is a card now, and the open one lifts and takes the accent. */
.atelier-disclosure {
  border: 1px solid var(--a-border);
  border-radius: 16px;
  background: var(--a-card);
  margin-bottom: 10px;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.atelier-disclosure:last-child { margin-bottom: 0; }
.atelier-disclosure[open] {
  border-color: color-mix(in srgb, var(--a-accent) 45%, transparent);
  background: #fff;
  box-shadow: 0 14px 34px rgba(7,31,24,.08);
}
.atelier-tone--dark .atelier-disclosure[open],
.atelier-tone--emerald .atelier-disclosure[open] { background: rgba(255,255,255,.07); box-shadow: none; }

.atelier-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(18px,2vw,24px);
  list-style: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  border-radius: 15px;
  transition: color .25s ease;
}
.atelier-disclosure summary::-webkit-details-marker { display: none; }
.atelier-disclosure[open] summary { color: var(--a-text); }
.atelier-disclosure__body {
  padding: 0 clamp(18px,2vw,24px) 22px;
  color: var(--a-muted);
  font-size: 14.5px;
  line-height: 1.75;
}
.atelier-disclosure__body > :last-child { margin-bottom: 0; }

@media (hover: hover) {
  .atelier-disclosure:not([open]):hover { border-color: color-mix(in srgb, var(--a-accent) 35%, transparent); }
  .atelier-disclosure:not([open]):hover .atelier-disclosure__marker { color: var(--a-accent); }
}
.atelier-footer { padding-bottom: 28px; }
.atelier-newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-bottom: 64px; margin-bottom: 56px; border-bottom: 1px solid var(--a-border); }
.atelier-newsletter h2 { font-size: clamp(34px,3.6vw,50px); }
.atelier-newsletter label { display: block; font-size: 12px; margin-bottom: 12px; }
.atelier-newsletter__field { display: flex; border-bottom: 1px solid var(--a-muted); }
.atelier-newsletter__field input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 16px 0; color: inherit; }
.atelier-newsletter__field button { color: inherit; background: transparent; border: 0; min-width: 56px; font-size: 26px; cursor: pointer; }
.atelier-footer__grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 40px; padding-bottom: 64px; }
.atelier-footer__brand>a { color: inherit; font-size: 28px; letter-spacing: -.04em; text-decoration: none; }
.atelier-footer__brand img { width: 200px; height: auto; }
.atelier-footer__brand .atelier-copy { font-size: 14px; max-width: 30ch; }
.atelier-footer nav h3 { font-family: inherit; font-size: 12px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: .12em; }
.atelier-footer ul { margin: 0; padding: 0; list-style: none; }
.atelier-footer nav li { margin-bottom: 12px; }
.atelier-footer nav a { font-size: 14px; color: var(--a-muted); text-decoration: none; display: inline-block; padding-block: 4px; }
.atelier-footer a:hover { color: #fff; }
.atelier-footer__bottom { border-top: 1px solid var(--a-border); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; color: var(--a-muted); font-size: 11px; }
.atelier-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 16px; }
.atelier-footer__bottom a { color: inherit; text-underline-offset: 4px; }
.atelier-payments svg { width: 32px; height: auto; }
.atelier-editor-note { padding: 20px; border: 1px dashed var(--a-border); color: var(--a-muted); font-size: 13px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .premium-store :is(.product-card,.collection-card):hover { transform: translateY(-4px); }
 .atelier-story-card:hover { transform: translateY(-4px); border-color: var(--a-accent); }
 .atelier-collection:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion:no-preference) {
 html { scroll-behavior: smooth; }
 [data-atelier-reveal].atelier-will-reveal { opacity: 0; transform: translateY(18px); }
 [data-atelier-reveal].atelier-revealed { animation: atelier-reveal .65s cubic-bezier(.2,.7,.3,1) both; }
 @keyframes atelier-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
 @supports (interpolate-size: allow-keywords) {
  .atelier-disclosure { interpolate-size: allow-keywords; }
  .atelier-disclosure::details-content { height: 0; overflow: clip; transition: height .28s,content-visibility .28s allow-discrete; }
  .atelier-disclosure[open]::details-content { height: auto; }
 }
}
@media (max-width:989px) {
 .atelier-wrap { width: calc(100% - 48px); }
 .atelier-story-grid--features { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .atelier-editorial__grid { gap: 28px; }
 .atelier-footer__grid { grid-template-columns: repeat(3,1fr); }
 .atelier-footer__brand { grid-column: 1/-1; }
 .atelier-newsletter { gap: 36px; }
 .atelier-story-card { padding: 24px; }
}
@media (max-width:749px) {
 .atelier-wrap { width: calc(100% - 40px); }
 .atelier-editorial__grid,.atelier-faq__grid,.atelier-newsletter { grid-template-columns: 1fr; }
 .atelier-editorial--hero { padding-top: 20px; }
 .atelier h1 { font-size: clamp(48px,12vw,76px); max-width: 11ch; }
 .atelier-editorial__stage { max-width: 520px; width: 100%; margin-inline: auto; }
 .atelier-image-note { inset-inline-end: 0; }
 .atelier-story-grid { grid-template-columns: 1fr; }
 .atelier-story-grid--features { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .atelier-story-grid--features .atelier-story-card { padding: 22px 18px; }
 .atelier h3 { font-size: 18px; }
 .atelier-step { margin-bottom: 24px; }
 .atelier-section-heading { margin-bottom: 32px; }
 .atelier-footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
 .atelier-newsletter { padding-bottom: 40px; margin-bottom: 40px; }
 .atelier-footer__bottom { align-items: flex-start; flex-direction: column; gap: 20px; }
 .premium-store .sticky-add-to-cart__bar { bottom: max(8px,env(safe-area-inset-bottom)); }
 .premium-store:has(sticky-add-to-cart) footer { padding-bottom: 84px; }
 .premium-store .product-details { padding: 0; }
}


/* Scroll-led ritual journey. */
.atelier-ritual__header { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; margin-bottom: clamp(48px,7vw,90px); }
.atelier-ritual__header h2 { font-size: clamp(48px,6vw,84px); }
.atelier-ritual__layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.82fr); gap: clamp(36px,7vw,110px); align-items: start; }
.atelier-ritual__visual { position: sticky; top: 120px; min-height: 680px; margin: 0; overflow: hidden; border: 1px solid var(--a-border); border-radius: 220px 220px 24px 24px; background: #10251d; }
.atelier-ritual__visual img { display: block; width: 100%; height: 100%; min-height: 680px; object-fit: cover; transform: translate3d(0,var(--atelier-shift,0),0) rotate(var(--atelier-rotate,0)); transition: transform .7s ease; }
.atelier-ritual__visual figcaption { position: absolute; inset-inline: 22px; bottom: 22px; padding: 15px 18px; border: 1px solid #ffffff24; border-radius: 999px; background: #10251ddd; color: #f6f4ee; font-size: 12px; text-align: center; backdrop-filter: blur(14px); }
.atelier-ritual__steps { list-style: none; margin: 0; padding: 0; }
.atelier-ritual__step { display: grid; grid-template-columns: 70px 1fr; gap: 22px; min-height: 210px; padding: 34px 0; border-top: 1px solid var(--a-border); }
.atelier-ritual__step:last-child { border-bottom: 1px solid var(--a-border); }
.atelier-ritual__step>span { color: var(--a-accent); font-family: var(--atelier-display); font-size: 34px; }
.atelier-ritual__step h3 { font-size: clamp(24px,2.5vw,38px); }
.atelier-ritual__step .rte { max-width: 38ch; color: var(--a-muted); }

/* Wide editorial footer. */
.atelier-footer { position: relative; overflow: hidden; color: var(--a-text); padding-top: clamp(56px,6vw,88px); }
.atelier-footer>.atelier-wrap { display: flex; flex-direction: column; }
.atelier-footer__brand h2 { max-width: 14ch; margin: 32px 0 20px; font-size: clamp(38px,4vw,58px); line-height: 1.02; overflow-wrap: normal; word-break: normal; hyphens: none; }
.atelier-footer__identity { display: inline-flex !important; align-items: center; gap: 12px; margin-bottom: 0 !important; color: var(--a-text); font-size: 16px !important; font-weight: 650; text-decoration: none; }
.atelier-footer__identity img { width: 52px !important; height: 52px; object-fit: cover; border: 1px solid var(--a-border); border-radius: 14px; }
.atelier-footer__brand .atelier-button { margin-top: 24px; }
.atelier-footer__grid { order: 2; grid-template-columns: minmax(300px,1.3fr) repeat(3,minmax(150px,.6fr)); gap: clamp(44px,7vw,110px); padding: 68px 0 60px; }
.atelier-footer .atelier-newsletter { order: 1; padding: 36px 42px; margin: 0; border: 1px solid #ffffff1f; border-radius: 26px; background: linear-gradient(115deg,#1c4d3b,#102c22); color: #f7f3e8; }
.atelier-footer .atelier-newsletter h2 { max-width: 14ch; font-size: clamp(32px,3.6vw,52px); }
.atelier-footer .atelier-newsletter .atelier-copy { color: #f7f3e8b8; }
.atelier-footer .atelier-newsletter :is(.atelier-eyebrow,label) { color: #f7f3e8; }
.atelier-footer .atelier-newsletter .atelier-eyebrow::before { background: var(--atelier-gold); }
.atelier-footer .atelier-newsletter label { margin: 0 0 10px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.atelier-footer .atelier-newsletter__field { display: flex; align-items: center; min-height: 62px; overflow: hidden; border: 1px solid #ffffff7a; border-radius: 999px; padding: 5px 6px 5px 22px; background: #fff; box-shadow: inset 0 1px 0 #fff,0 12px 34px #071f1824; transition: border-color .2s,box-shadow .2s; }
.atelier-footer .atelier-newsletter__field:focus-within { border-color: var(--atelier-gold); box-shadow: 0 0 0 3px #c8b5843b,0 12px 34px #071f1824; }
.atelier-footer .atelier-newsletter__field input { flex: 1 1 auto; width: auto; min-width: 0; height: 50px; margin: 0; padding: 0 12px 0 0; border: 0 !important; border-radius: 0 !important; outline: 0; background: transparent !important; color: #14231e; box-shadow: none !important; }
.atelier-footer .atelier-newsletter__field input::placeholder { color: #66716c; opacity: 1; }
.atelier-footer .atelier-newsletter__field button { flex: 0 0 50px; width: 50px; height: 50px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--atelier-gold); color: #14231e; }
.atelier-footer__bottom { order: 3; }
.atelier-footer nav a { font-size: clamp(15px,1.25vw,19px); color: var(--a-text); }
.atelier-footer nav li { margin-bottom: 18px; }
.atelier-footer a:hover { color: var(--atelier-emerald); }
.atelier-footer__orbit { position: absolute; width: 420px; aspect-ratio: 1; right: -110px; bottom: -90px; opacity: .2; pointer-events: none; }
.atelier-footer__orbit i { position: absolute; inset: 12%; border: 1px solid var(--atelier-emerald); border-radius: 50%; transform: rotate(18deg) scaleX(1.45); }
.atelier-footer__orbit i:nth-child(2) { inset: 25%; transform: rotate(72deg) scaleX(1.6); }
.atelier-footer__orbit i:nth-child(3) { inset: 38%; transform: rotate(132deg) scaleX(1.8); }
.atelier-footer__bottom { position: relative; z-index: 1; }
@media (prefers-reduced-motion:no-preference) { .atelier-footer__orbit { animation: atelier-orbit-spin 26s linear infinite; } @keyframes atelier-orbit-spin { to { transform: rotate(360deg); } } }
@media (max-width:749px) {
 .atelier-ritual__header,.atelier-ritual__layout { grid-template-columns: 1fr; }
 .atelier-ritual__visual { position: relative; top: auto; min-height: 520px; border-radius: 160px 160px 22px 22px; }
 .atelier-ritual__visual img { min-height: 520px; }
 .atelier-ritual__step { grid-template-columns: 52px 1fr; min-height: 0; }
 .atelier-footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 24px; padding: 48px 0; }
 .atelier-footer__brand { grid-column: 1/-1; }
 .atelier-footer .atelier-newsletter { padding: 28px 22px; }
 .atelier-footer__orbit { width: 280px; opacity: .12; }
}
@media (max-width:359px) { .atelier-story-grid--features { grid-template-columns: 1fr; } .atelier-actions { gap: 12px; } }
@media (prefers-reduced-motion:reduce) {
 .premium-store *, .premium-store *::before, .premium-store *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
 .atelier-editorial__image { transform: none !important; }
 ::view-transition-old(root),::view-transition-new(root) { animation: none !important; }
}
/* Content and transactional surfaces share the same editorial rhythm. */
.premium-store :is(.page-width-content,.blog-posts,.search-page__header) h1 { font-family: var(--atelier-display); font-size: clamp(40px,5vw,72px); font-weight: 400; line-height: 1.1; }
.premium-store .blog-post-comments-container { border-top: 1px solid var(--atelier-line); padding-top: 48px; }
.premium-store .blog-post-comment { border: 1px solid var(--atelier-line); border-radius: 16px; padding: 24px; }
.premium-store .contact-form { padding: clamp(20px,4vw,48px); border: 1px solid var(--atelier-line); background: #ffffff66; }
.premium-store .contact-form__input { background: #ffffffa6; }
.premium-store .cart-page__summary { border-radius: 20px; }
.premium-store .cart-page__title { margin-bottom: 32px; }
.premium-store .cart-title { font-family: var(--atelier-display); font-weight: 400; font-size: clamp(36px,4vw,56px); }
.premium-store .theme-drawer__header { border-bottom: 1px solid var(--atelier-line); padding-bottom: 24px; }
.premium-store .theme-drawer__title { font-family: var(--atelier-display); font-weight: 400; font-size: 30px; }
.premium-store .cart-drawer__summary { border-top: 1px solid var(--atelier-line); background: #e9ece3; }
.premium-store :is(.cart-drawer--empty,.cart-page--empty) { background: radial-gradient(ellipse at center,#dbe5d8,transparent 70%); }
.premium-store .menu-drawer__navigation { padding-block: 24px; }
.premium-store .menu-drawer__menu-item { padding-block: 18px; }
.premium-store .search-page__header { padding-bottom: 32px; }
.premium-store .search-page__header input { border-radius: 999px; }
.premium-store .password-page { background: radial-gradient(ellipse at top,#d9e6d7,transparent 65%); }
@media (min-width:990px) { .premium-store .theme-drawer__dialog { border-start-start-radius: 24px; border-end-start-radius: 24px; } }


/* Keep card prices legible at the narrowest collection widths. */
.premium-store .product-card__content { min-width: 0; overflow: visible; padding-inline: 2px; }
.premium-store .product-card .price,.premium-store .product-card .price * { max-width: 100%; }
.premium-store .product-card .price { overflow: visible; white-space: nowrap; }
.premium-store .product-card .price__container { min-width: 0; }

/* Product purchase panel */
.premium-store .product-information { background: radial-gradient(circle at 22% 28%,#dbe8dd 0,transparent 33%),var(--atelier-ivory); }
.premium-store .product-information .product-details { border: 1px solid var(--atelier-line); border-radius: 24px; background: #fffaf0cc; box-shadow: 0 24px 70px #173e300b; padding: clamp(24px,3vw,42px); backdrop-filter: blur(16px); }
.premium-store .product-information .product-details h1 { font-family: var(--atelier-display); font-size: clamp(35px,3.6vw,56px); font-weight: 400; line-height: 1.03; letter-spacing: -.035em; }
.premium-store .product-information media-gallery { border-radius: 24px; }
.premium-store .product-information :is(.variant-option__button-label,quantity-selector) { border-radius: 999px; }
.premium-store .product-information .add-to-cart-button { position: relative; overflow: hidden; min-height: 56px; border-radius: 999px; }
.premium-store .product-information .add-to-cart-button::after { content: ''; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg,transparent,#ffffff3d,transparent); }

/* Product editorial story */
.atelier-product-story__heading { max-width: 760px; margin-bottom: clamp(42px,7vw,84px); }
.atelier-product-story__heading h2,.atelier-product-overview h2 { font-size: clamp(42px,6vw,78px); }
.atelier-product-story__gallery { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: end; }
.atelier-product-story figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--a-border); background: radial-gradient(circle at 50% 38%,#8da88d35,transparent 58%),#10251d; }
.atelier-product-story__product { min-height: 620px; border-radius: 28px; }
.atelier-product-story__lifestyle { min-height: 430px; border-radius: 180px 180px 24px 24px; }
.atelier-product-story figure img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.atelier-product-story__product img { object-fit: contain !important; padding: clamp(24px,5vw,72px); }
.atelier-product-story figcaption { position: absolute; inset-inline: 18px; bottom: 18px; display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #ffffff24; border-radius: 12px; background: #10251de6; color: #f6f4ee; font-size: 12px; backdrop-filter: blur(14px); }
.atelier-product-story__features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--a-border); margin-top: clamp(48px,7vw,88px); }
.atelier-product-story__feature { padding: 32px 32px 8px 0; border-inline-end: 1px solid var(--a-border); }
.atelier-product-story__feature + .atelier-product-story__feature { padding-inline-start: 32px; }
.atelier-product-story__feature:last-child { border-inline-end: 0; }
.atelier-product-story__feature>span { display: block; color: var(--a-accent); font-family: var(--atelier-display); font-size: 30px; margin-bottom: 38px; }
.atelier-product-story__feature .rte { color: var(--a-muted); font-size: 14px; }
.atelier-product-overview__grid { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); gap: clamp(36px,7vw,110px); align-items: start; }
.atelier-product-overview__content { color: var(--a-muted); line-height: 1.8; }
.atelier-product-overview__content :is(h2,h3,h4,strong) { color: var(--a-text); }
.atelier-product-overview__content :is(table,iframe,img) { max-width: 100%; }
/* Flex, not a 3-column grid: the two policy links only render once the
   merchant fills in Settings > Policies, so a grid left a lone item stranded
   in a third of an empty row under a bare rule. Items now size to content and
   wrap, so one, two or three all read as deliberate. */
.atelier-product-assurance { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px,3vw,40px); }
.atelier-product-assurance__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  /* Grows to fill the row: with policies unset there is only one card, and
     a narrow one stranded beside empty space looks like a mistake. */
  flex: 1 1 210px;
  padding: 18px 20px;
  border: 1px solid var(--a-border);
  border-radius: 16px;
  background: var(--a-card);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.atelier-product-assurance__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--a-border);
  border-radius: 12px;
  color: var(--a-accent);
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,0));
}
.atelier-product-assurance__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.atelier-product-assurance__body strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.atelier-product-assurance__body > span { display: inline-flex; align-items: center; gap: 6px; color: var(--a-muted); font-size: 12px; line-height: 1.55; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.atelier-product-assurance__item:hover { border-color: var(--a-accent); transform: translateY(-2px); }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .premium-store .product-information .add-to-cart-button:hover::after { animation: atelier-sweep .8s ease; }
 .atelier-product-story figure:hover img { transform: scale(1.025); }
 @keyframes atelier-sweep { to { transform: translateX(120%) skewX(-18deg); } }
}
@media (max-width:749px) {
 .premium-store .product-card .price { font-size: clamp(.74rem,3.6vw,.9rem); letter-spacing: -.02em; }
 .premium-store .product-information .product-details { margin-inline: 12px; border-radius: 20px; padding: 24px 20px; }
 .atelier-product-story__gallery { grid-template-columns: 1fr; }
 .atelier-product-story__product { min-height: 430px; }
 .atelier-product-story__lifestyle { min-height: 360px; border-radius: 160px 160px 20px 20px; width: 82%; margin-inline-start: auto !important; }
 .atelier-product-story__features { grid-template-columns: 1fr; }
 .atelier-product-story__feature,.atelier-product-story__feature + .atelier-product-story__feature { padding: 26px 0; border-inline-end: 0; border-bottom: 1px solid var(--a-border); }
 .atelier-product-story__feature>span { margin-bottom: 18px; }
 .atelier-product-overview__grid { grid-template-columns: 1fr; }
 .atelier-product-assurance { grid-column: 1; }
}

/* ==========================================================================
   Floating glass header
   --------------------------------------------------------------------------
   One system replaces the three overlapping header blocks this file used to
   carry. The capsule owns its own background, so the theme's full-bleed
   underlay is switched off — painting both produced the banded "double
   header" seen while scrolling.

   State comes from `body[data-atelier-scrolled]`, written by premium.js.
   The theme's own `data-sticky-state` can't drive this: the sticky section
   is pinned at `top:-1px`, so with `threshold:1` the observer reports
   "active" even at rest and the transparent state never applied.
   ========================================================================== */
.premium-store #header-component {
  --atelier-nav-bg: rgba(255,255,255,.72);
  --atelier-nav-border: rgba(255,255,255,.72);
  --atelier-nav-text: #14231e;
  --atelier-nav-hover: rgba(23,62,48,.07);
  --atelier-nav-shadow: 0 18px 50px rgba(7,31,24,.14);
  --atelier-nav-pad: 12px;
  --atelier-nav-height: 68px;
  --atelier-nav-radius: 999px;
  padding: var(--atelier-nav-pad) 0 0;
  background: transparent !important;
}

/* The capsule is the only painted surface, so the closed underlay — a
   full-bleed bar behind it — is switched off. The open underlay is left
   alone: it backs the expanded mega-menu panel. */
.premium-store #header-component .header__underlay-closed {
  height: 0;
  background: none;
  box-shadow: none;
}

.premium-store #header-component .header__row--top {
  position: relative;
  width: min(1320px, calc(100% - clamp(24px,6vw,120px)));
  min-height: var(--atelier-nav-height);
  margin-inline: auto;
  border: 1px solid var(--atelier-nav-border);
  border-radius: var(--atelier-nav-radius);
  background: var(--atelier-nav-bg) !important;
  color: var(--atelier-nav-text) !important;
  box-shadow: var(--atelier-nav-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease,
    min-height .35s ease, color .35s ease, width .35s ease;
}
.premium-store #header-component .header__row--top :is(a,button,svg,span) { color: var(--atelier-nav-text); }
.premium-store #header-component .header__columns { padding-inline: clamp(16px,2.6vw,36px); }
.premium-store #header-component .header__row--bottom { background: none; border: 0; }

/* Resting state over a transparent-header template: dark glass on the hero. */
.premium-store #header-component[transparent] {
  --atelier-nav-bg: rgba(18,34,28,.30);
  --atelier-nav-border: rgba(246,244,238,.22);
  --atelier-nav-text: #f6f4ee;
  --atelier-nav-hover: rgba(246,244,238,.14);
  --atelier-nav-shadow: 0 16px 44px rgba(6,20,15,.28);
}

/* Scrolled: condense into a lighter, more opaque capsule on every template. */
.premium-store[data-atelier-scrolled] #header-component,
.premium-store[data-atelier-scrolled] #header-component[transparent] {
  /* Product photography scrolling under the bar read straight through at
     lower opacity; .94 keeps the glass without letting content ghost. */
  --atelier-nav-bg: rgba(252,251,247,.94);
  --atelier-nav-border: rgba(23,62,48,.10);
  --atelier-nav-text: #14231e;
  --atelier-nav-hover: rgba(23,62,48,.07);
  --atelier-nav-shadow: 0 16px 44px rgba(7,31,24,.16);
  --atelier-nav-height: 60px;
  /* The sticky section pins at top:-1px so the observer can track state;
     add the pixel back here so the capsule's edge isn't clipped. */
  --atelier-nav-pad: 11px;
}
.premium-store[data-atelier-scrolled] #header-component .header__row--top { width: min(1320px, calc(100% - clamp(20px,4vw,80px))); }

/* An open submenu needs the readable light capsule, whatever the scroll
   position. Scoped to real menu interaction so hovering the cart or search
   icon doesn't flip the whole bar. */
.premium-store #header-component[transparent]:has(header-menu[aria-expanded='true']),
.premium-store #header-component[transparent]:has(.menu-list__link:hover),
.premium-store #header-component[transparent]:has(.mega-menu__list:hover) {
  --atelier-nav-bg: rgba(252,251,247,.92);
  --atelier-nav-border: rgba(23,62,48,.12);
  --atelier-nav-text: #14231e;
  --atelier-nav-hover: rgba(23,62,48,.07);
}

.premium-store .header-logo { letter-spacing: -.035em; }
.premium-store .header-logo [data-testid="header-logo"] {
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(23,62,48,.12);
  border-radius: 14px;
  background: linear-gradient(145deg,#fff,#f0f1ea);
  box-shadow: 0 8px 24px rgba(23,62,48,.10);
}
.premium-store .header-logo__image { border-radius: 10px; object-fit: cover; }

.premium-store .header-menu__list { gap: 4px; }
.premium-store .header-menu__link {
  border-radius: 999px;
  padding: 9px 15px;
  transition: color .25s, background-color .25s;
}
.premium-store .header-menu__link:hover,
.premium-store .header-menu__link[aria-current="page"] { background: var(--atelier-nav-hover); }
.premium-store .header-actions__action { border-radius: 50%; transition: background-color .25s, transform .25s; }
.premium-store .header-actions__action:hover { background: var(--atelier-nav-hover); transform: translateY(-1px); }

/* The announcement bar reads as part of the hero, not a stripe above it. */
.premium-store .announcement-bar { letter-spacing: .12em; }

@media (max-width: 989px) {
  .premium-store #header-component { --atelier-nav-height: 62px; --atelier-nav-radius: 22px; --atelier-nav-pad: 8px; }
  .premium-store[data-atelier-scrolled] #header-component { --atelier-nav-height: 58px; --atelier-nav-pad: 7px; }
  .premium-store #header-component .header__row--top,
  .premium-store[data-atelier-scrolled] #header-component .header__row--top { width: calc(100% - 16px); }
  .premium-store #header-component .header__columns { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-store #header-component .header__row--top { transition: none; }
}

/* ==========================================================================
   Assurance strip
   ========================================================================== */
.atelier-assurance { padding-block: clamp(28px,3.4vw,44px); }
/* Needs `.atelier` in front: `.atelier h1, .atelier h2` is (0,1,1) and was
   beating a bare class selector, so this heading kept the full display size
   and the shared `margin: 0` — which ran its descenders into the cards. */
.atelier .atelier-assurance__heading {
  max-width: 22ch;
  font-size: clamp(24px,2.6vw,36px);
  line-height: 1.15;
  margin: 0 0 clamp(26px,3vw,40px);
}
.atelier-assurance__grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(16px,2.4vw,32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.atelier-assurance__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.atelier-assurance__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--a-border);
  border-radius: 14px;
  color: var(--a-accent);
  background: var(--a-card);
}
.atelier-assurance__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.atelier-assurance__body strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.atelier-assurance__body span { color: var(--a-muted); font-size: 13px; line-height: 1.6; }

/* Single-row style keeps the strip visually subordinate to the hero above it. */
.atelier-assurance--bar .atelier-assurance__grid {
  border-block: 1px solid var(--a-border);
  padding-block: clamp(22px,2.6vw,32px);
}
.atelier-assurance--cards .atelier-assurance__item {
  padding: clamp(20px,2.2vw,26px);
  border: 1px solid var(--a-border);
  border-radius: 20px;
  background: var(--a-card);
}

/* ==========================================================================
   Feature-card icons
   ========================================================================== */
.atelier-story-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  border: 1px solid var(--a-border);
  border-radius: 14px;
  color: var(--a-accent);
  background: var(--a-card);
  transition: color .3s, border-color .3s, transform .3s;
}
.atelier-story-grid--features .atelier-story-card:hover .atelier-story-card__icon { transform: translateY(-2px); }
.atelier-icon { display: block; }

/* ==========================================================================
   Layout corrections
   ========================================================================== */
/* A square stage left a product shot floating in ~250px of empty dome. Contain
   stages now track the artwork; cover stages keep the full editorial height. */
.atelier-editorial__stage:not(.atelier-editorial__stage--cover) {
  aspect-ratio: 5 / 5.4;
  max-height: 600px;
  padding: clamp(20px,3vw,40px);
}
.atelier-editorial__stage:not(.atelier-editorial__stage--cover) .atelier-editorial__image {
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.atelier-editorial--hero .atelier-editorial__stage { max-height: none; }

@media (max-width: 989px) {
  .atelier-assurance__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 749px) {
  .atelier-assurance { padding-block: 26px; }
  .atelier-assurance__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; }
  .atelier-assurance__icon { width: 38px; height: 38px; border-radius: 12px; }
  .atelier-assurance__item { gap: 11px; }
  .atelier-assurance__body strong { font-size: 13.5px; }
  .atelier-assurance__body span { font-size: 12px; }
  .atelier-story-card__icon { width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; }
  .atelier-editorial__stage:not(.atelier-editorial__stage--cover) { aspect-ratio: 1; max-height: 420px; }
}

/* ==========================================================================
   Product plates
   --------------------------------------------------------------------------
   The catalogue is shot on plain white. Dropping those cut-outs straight onto
   an ivory or emerald panel made them read as blank boxes and floating
   stickers. Each plate now carries a warm surface and a soft ground shadow so
   the product sits on something.
   ========================================================================== */
.premium-store {
  --atelier-plate: linear-gradient(168deg,#fdfcf9,#eeece4);
  --atelier-plate-ground: radial-gradient(ellipse 46% 13% at 50% 84%, rgba(32,44,41,.16), transparent 72%);
}
.atelier-editorial__stage:not(.atelier-editorial__stage--cover),
.atelier-product-story__product {
  background: var(--atelier-plate-ground), var(--atelier-plate) !important;
  border: 1px solid rgba(32,44,41,.08);
  box-shadow: inset 0 1px 0 #fff;
}
/* The base stage carried a 48% dome radius, which only ever applied to
   contain-fit stages — the one case where it breaks, since a square product
   cut-out's corners sit outside the curve and appear to spill off the plate.
   The arch stays where it works: cover images in the ritual section. */
.atelier-editorial__stage:not(.atelier-editorial__stage--cover) {
  border-radius: 28px;
  overflow: hidden;
}
.atelier-tone--dark .atelier-editorial__stage:not(.atelier-editorial__stage--cover),
.atelier-tone--emerald .atelier-editorial__stage:not(.atelier-editorial__stage--cover),
.atelier-tone--dark .atelier-product-story__product,
.atelier-tone--emerald .atelier-product-story__product { border-color: rgba(255,255,255,.14); }

.premium-store .product-card .card-gallery,


/* ==========================================================================
   Mobile density
   --------------------------------------------------------------------------
   Four stacked reassurance rows pushed the product grid a full screen down on
   a phone. A 2x2 grid with the icon above a short label keeps the promise
   visible without costing the fold.
   ========================================================================== */
@media (max-width: 480px) {
  .atelier-assurance__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 14px; }
  .atelier-assurance__item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .atelier-assurance__body span { display: none; }
  .atelier-assurance__body strong { font-size: 13px; line-height: 1.4; }
  .atelier-assurance--cards .atelier-assurance__item { padding: 16px; }
}

/* Contact column. Balances a footer that otherwise left a third of the grid
   empty when only two menu columns were configured. */
.atelier-footer__contact h3 { margin: 0 0 20px; }
.atelier-footer__contact ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.atelier-footer__contact li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--a-muted); }
.atelier-footer__contact li .atelier-icon { flex: 0 0 auto; color: var(--a-accent); }
.atelier-footer__contact a { color: inherit; text-decoration: none; }
.atelier-footer__contact a:hover { color: var(--a-text); text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   Buttons and links
   --------------------------------------------------------------------------
   The chip holds two copies of the same arrow. On hover the pair slides one
   full arrow-width left, so the first leaves and the second arrives — the
   motion reads as forward travel rather than a nudge, and there is no gap
   mid-transition. `overflow: hidden` on the chip does the masking.
   ========================================================================== */
.atelier-button {
  gap: 18px;
  padding: 15px 15px 15px 28px;
  min-height: 56px;
  font-weight: 550;
  letter-spacing: -.005em;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background-color .3s ease;
}
.atelier-button__label { position: relative; z-index: 1; }
.atelier-button__chip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: currentColor;
}
.atelier-button__chip .atelier-icon {
  flex: 0 0 34px;
  /* The svg carries width/height attributes, so both axes need an explicit
     value here: with border-box, the attribute height minus the padding left
     the glyph with a zero-height content box. */
  width: 34px;
  height: 34px;
  padding: 8.5px;
  box-sizing: border-box;
  transition: transform .42s cubic-bezier(.2,.7,.3,1);
}
/* Park the pair one arrow to the left so copy two sits off-stage to the right. */
.atelier-button__chip .atelier-icon:first-child { margin-inline-start: 0; }
.atelier-button:hover .atelier-button__chip .atelier-icon { transform: translateX(-34px); }
.atelier-button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(7,31,24,.20); }
.atelier-button:active { transform: translateY(0); transition-duration: .08s; }

/* The chip is `currentColor`, so the glyph has to be punched out in the
   button's own background colour to stay legible. */
.atelier-button__chip .atelier-icon { color: #f2efe4; }
.atelier-tone--light .atelier-button .atelier-icon { color: var(--atelier-emerald); }

.atelier-text-link { gap: 10px; text-decoration-thickness: 1px; }
.atelier-text-link__icon { display: inline-flex; transition: transform .32s cubic-bezier(.2,.7,.3,1); }
.atelier-text-link:hover .atelier-text-link__icon { transform: translateX(4px); }
.atelier-text-link:has(.atelier-icon[class]) { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .atelier-button,
  .atelier-button__chip .atelier-icon,
  .atelier-text-link__icon { transition: none; }
  .atelier-button:hover { transform: none; }
  .atelier-button:hover .atelier-button__chip .atelier-icon { transform: none; }
}

/* ==========================================================================
   Hero clearance
   --------------------------------------------------------------------------
   The header is absolutely positioned over the hero on transparent templates,
   so the hero's own padding is the only thing keeping the eyebrow clear of
   the floating capsule. `--header-height` covers the capsule alone, which is
   what overlaps here: the announcement bar stays in flow above the hero. It
   is measured before first paint by the script in layout/theme.liquid.
   ========================================================================== */
.atelier-editorial--hero {
  padding-block-start: calc(var(--header-height, 90px) + clamp(28px, 4vw, 64px));
  padding-block-end: clamp(48px, 6vw, 96px);
}

/* ==========================================================================
   Icon chips
   ========================================================================== */
.atelier-assurance__icon,
.atelier-story-card__icon {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,0)), var(--a-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.atelier-tone--dark :is(.atelier-assurance__icon,.atelier-story-card__icon),
.atelier-tone--emerald :is(.atelier-assurance__icon,.atelier-story-card__icon) {
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,0)), var(--a-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.atelier-assurance__item:hover .atelier-assurance__icon,
.atelier-story-card:hover .atelier-story-card__icon {
  transform: translateY(-3px);
  border-color: var(--a-accent);
  box-shadow: 0 10px 24px rgba(7,31,24,.12), inset 0 1px 0 rgba(255,255,255,.6);
}
.atelier-assurance__item { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.atelier-assurance--cards .atelier-assurance__item:hover { transform: translateY(-3px); }

/* ==========================================================================
   Product cards
   ========================================================================== */
.premium-store .product-card { --atelier-card-ease: cubic-bezier(.2,.7,.3,1); }
.premium-store .product-card .card-gallery {
  position: relative;
  border: 1px solid rgba(32,44,41,.07);
  box-shadow: 0 1px 2px rgba(7,31,24,.04);
  transition: box-shadow .4s ease, border-color .4s ease;
}
.premium-store .product-card :is(.product-media-container, .card-gallery img) {
  transition: transform .6s var(--atelier-card-ease);
}
.premium-store .product-card .product-title {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .3s ease;
}
.premium-store .product-card .price { font-weight: 600; letter-spacing: -.01em; }

/* The sold-out badge sat as a flat grey rectangle over the photography.
   A frosted pill in micro-caps reads as a label rather than an error. */
.premium-store .product-badges__badge {
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 4px 14px rgba(7,31,24,.10);
  color: #14231e;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-block: 7px;
  padding-inline: 13px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .premium-store .product-card:hover .card-gallery {
    border-color: rgba(23,62,48,.16);
    box-shadow: 0 18px 40px rgba(7,31,24,.13);
  }
  .premium-store .product-card:hover :is(.product-media-container, .card-gallery img) { transform: scale(1.045); }
  .premium-store .product-card:hover .product-title { text-decoration-color: currentColor; }
}

/* ==========================================================================
   Search
   ========================================================================== */
.premium-store .search-modal__content {
  /* The theme drives this off --style-border-radius-popover; setting the
     variable keeps every corner of the dialog in step instead of fighting it
     with a border-radius override. */
  --style-border-radius-popover: 24px;
  border: 1px solid rgba(32,44,41,.10);
  box-shadow: 0 32px 90px rgba(7,31,24,.24);
  overflow: hidden;
}
.premium-store .search-modal__content :is(input[type='search'], .search-modal input[type='text']) {
  min-height: 56px;
  border-radius: 999px;
  font-size: max(16px, 1rem);
}
.premium-store .predictive-search :is(h2, h3, .predictive-search__heading) {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--atelier-muted);
}
.premium-store .predictive-search .product-card .card-gallery { border-radius: 14px; }
.premium-store .predictive-search .product-card { transition: transform .3s var(--atelier-card-ease, ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .premium-store .predictive-search .product-card:hover { transform: translateY(-3px); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.premium-store .atelier-footer__grid :is(nav a, .atelier-footer__contact a) {
  position: relative;
  display: inline-block;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), color .28s ease;
}
.premium-store .atelier-footer__grid nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.premium-store .atelier-footer__grid nav a:hover { transform: translateX(3px); }
.premium-store .atelier-footer__grid nav a:hover::after { transform: scaleX(1); }
.premium-store .atelier-footer__contact li:hover .atelier-icon { color: var(--a-text); }
.premium-store .atelier-footer__contact .atelier-icon { transition: color .28s ease; }

.atelier-footer .atelier-newsletter__field button {
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background-color .3s ease;
}
.atelier-footer .atelier-newsletter__field button:hover { transform: translateX(2px); }
.atelier-payments li { display: flex; opacity: .75; transition: opacity .25s ease; }
.atelier-payments li:hover { opacity: 1; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.atelier-contact { padding-block: clamp(56px,7vw,110px); overflow: clip; }
.atelier-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,84px); align-items: start; }
.atelier-contact__intro { position: relative; z-index: 2; }
.atelier-contact h1 { font-size: clamp(40px,5vw,76px); max-width: 11ch; }
.atelier-contact__details { display: grid; gap: 10px; margin: clamp(32px,4vw,48px) 0 0; padding: 0; list-style: none; }
.atelier-contact__details li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--a-border);
  border-radius: 16px;
  background: var(--a-card);
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.atelier-contact__details li > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 15px; }
.atelier-contact__details strong { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--a-muted); }
.atelier-contact__details a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.atelier-contact__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--a-border);
  border-radius: 14px;
  color: var(--a-accent);
  background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,0)), var(--a-card);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}

.atelier-contact__panel {
  padding: clamp(26px,3vw,44px);
  border: 1px solid var(--a-border);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow: 0 24px 64px rgba(7,31,24,.10);
}
.atelier-tone--dark .atelier-contact__panel,
.atelier-tone--emerald .atelier-contact__panel { background: rgba(255,255,255,.05); }
.atelier-contact__form-heading { font-family: var(--font-body--family); font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 22px; }
.atelier-contact__form { display: grid; gap: 16px; }
.atelier-field { display: grid; gap: 8px; }
.atelier-field label { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--a-muted); }
.atelier-field :is(input, textarea) {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--a-border);
  border-radius: 14px;
  background: #fff;
  color: #14231e;
  font: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.atelier-field textarea { min-height: 128px; resize: vertical; }
.atelier-field :is(input, textarea):focus {
  outline: none;
  border-color: var(--atelier-emerald);
  box-shadow: 0 0 0 3px rgba(23,62,48,.13);
}
.atelier-contact__form .atelier-button { justify-self: start; margin-top: 8px; }
.atelier-contact__success {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(23,62,48,.22);
  border-radius: 14px;
  background: rgba(23,62,48,.07);
  color: var(--atelier-emerald);
  font-size: 14px;
}
.atelier-contact__errors { margin-bottom: 18px; padding: 14px 16px; border: 1px solid #b4443a40; border-radius: 14px; background: #b4443a12; font-size: 14px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .atelier-contact__details li:hover { border-color: var(--a-accent); transform: translateX(4px); }
  .atelier-contact__details li:hover .atelier-contact__icon { transform: scale(1.06); }
}
@media (max-width: 899px) {
  .atelier-contact__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer social row
   ========================================================================== */
.atelier-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding: 0; list-style: none; }
.atelier-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--a-border);
  border-radius: 50%;
  color: var(--a-text);
  background: var(--a-card);
  transition: color .28s ease, border-color .28s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.atelier-footer__social a:hover { color: var(--a-accent); border-color: var(--a-accent); transform: translateY(-3px); }

.atelier-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  border: 1px solid var(--a-border);
  border-radius: 999px;
  background: var(--a-card);
  color: inherit;
  font-size: 13px;
  text-decoration: none;
  transition: border-color .28s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.atelier-footer__top .atelier-icon { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.atelier-footer__top:hover { border-color: var(--a-accent); }
.atelier-footer__top:hover .atelier-icon { transform: translateY(-3px); }

/* Results need clearance from the footer's floating "View all" pill. */
.premium-store .predictive-search-form__footer { padding-block: 18px 6px; }
.premium-store .predictive-search .product-card__content { padding-block-start: 6px; }

/* ==========================================================================
   Eyebrow mark
   --------------------------------------------------------------------------
   A four-point sparkle replaces the plain rule that used to lead every
   eyebrow. It is painted as a mask over `currentColor`, so it picks up the
   accent colour on every tone and the gold override in the footer newsletter
   without a second copy of the glyph.

   The eyebrow becomes a block: as flex, a wrapped two-line eyebrow centred
   the mark across both lines. Inline-block keeps it on the first line.
   ========================================================================== */
.atelier .atelier-eyebrow { display: block; }
.atelier-eyebrow::before {
  content: '';
  display: inline-block;
  vertical-align: -2px;
  width: 13px;
  height: 13px;
  margin-inline-end: 11px;
  background: currentColor;
  -webkit-mask: var(--atelier-eyebrow-mark) center / contain no-repeat;
  mask: var(--atelier-eyebrow-mark) center / contain no-repeat;
}
.premium-store {
  --atelier-eyebrow-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 0c.6 6.2 5.2 10.8 11.4 11.4v1.2C17.2 13.2 12.6 17.8 12 24h-1.2C10.2 17.8 5.6 13.2-.6 12.6v-1.2C5.6 10.8 10.2 6.2 10.8 0Z'/%3E%3C/svg%3E");
}
/* Centred call-to-action eyebrows lost their flex centring with the switch. */
.atelier-editorial--cta .atelier-eyebrow,
.atelier-page-header--center .atelier-eyebrow { text-align: center; }

/* ==========================================================================
   Inline icon markers
   ========================================================================== */
.atelier-disclosure__marker {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--a-border);
  border-radius: 50%;
  color: var(--a-muted);
  transition: transform .32s cubic-bezier(.2,.7,.3,1), color .25s ease, border-color .25s ease, background-color .25s ease;
}
.atelier-disclosure[open] .atelier-disclosure__marker {
  transform: rotate(135deg);
  color: #f6f4ee;
  border-color: var(--atelier-emerald);
  background: var(--atelier-emerald);
}

.atelier-collection__arrow,
.atelier-caption-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
/* Diagonal arrows travel diagonally; the horizontal one in the product
   assurance links only travels along its own axis. */
.atelier-collection:hover .atelier-collection__arrow,
.atelier-product-caption:hover .atelier-caption-arrow { transform: translate(3px,-3px); }
.atelier-product-assurance a:hover .atelier-caption-arrow { transform: translateX(4px); }

.atelier-footer .atelier-newsletter__field button .atelier-icon { color: #14231e; }

/* ==========================================================================
   Page header
   ========================================================================== */
.atelier-page-header { padding-block: clamp(52px,6vw,96px) clamp(36px,4vw,60px); overflow: clip; }
.atelier-page-header__copy { max-width: 62ch; }
.atelier-page-header h1 { font-size: clamp(42px,5.2vw,80px); max-width: 13ch; }
.atelier-page-header .atelier-copy { max-width: 56ch; }
.atelier-page-header__meta {
  margin: 22px 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--a-muted);
}
.atelier-page-header--center .atelier-page-header__copy { margin-inline: auto; text-align: center; }
.atelier-page-header--center :is(h1, .atelier-copy) { margin-inline: auto; }

/* Body copy written in the page editor, kept to a comfortable measure. */
.atelier-page-header__content {
  max-width: 68ch;
  margin-top: clamp(30px,3.5vw,46px);
  padding-top: clamp(26px,3vw,38px);
  border-top: 1px solid var(--a-border);
  color: var(--a-muted);
  font-size: clamp(15px,1.3vw,17px);
  line-height: 1.85;
}
.atelier-page-header--center .atelier-page-header__content { margin-inline: auto; }
.atelier-page-header__content :is(h2,h3,h4) { color: var(--a-text); margin-block: 1.6em .6em; }
.atelier-page-header__content h2 { font-size: clamp(24px,2.4vw,32px); }
.atelier-page-header__content h3 { font-size: 19px; }
.atelier-page-header__content :is(ul,ol) { padding-inline-start: 1.2em; }
.atelier-page-header__content li { margin-block: .5em; }
.atelier-page-header__content a { color: var(--a-text); text-underline-offset: 4px; }
.atelier-page-header__content > :first-child { margin-top: 0; }
.atelier-page-header__content > :last-child { margin-bottom: 0; }

/* A page header is always first on its template, so it carries the same
   clearance the hero does when the header floats over it. */
.atelier-page-header:first-child { padding-block-start: calc(var(--header-height, 90px) + clamp(24px, 3vw, 48px)); }

/* The naira glyph renders 15px tall at a 12px font size, but the theme's 1.2
   line box is only 14.4px — and `.product-card__content` is `overflow: clip`,
   so the overhang was shaved off the bottom of every price. Giving the price
   a taller line box keeps the glyph inside the clip boundary. */
.premium-store .product-card :is(product-price, .price, .price__container, .price__regular, .price__sale, .price__compare) {
  line-height: 1.5;
}
.premium-store .product-card .price { display: inline-block; }

/* Belt and braces: an eyebrow with no text would otherwise still paint its
   mark. Cheap insurance now that the mark is a 13px glyph rather than a
   near-invisible hairline. */
.atelier-eyebrow:empty { display: none; }

/* ==========================================================================
   Product-list section headings
   --------------------------------------------------------------------------
   These come from a text block whose font is set to the body family in the
   template, which left them as the only section headings on the page not in
   the display serif.
   ========================================================================== */
.premium-store .section-resource-list__header :is(h1,h2,h3) {
  font-family: var(--atelier-display);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.08;
  font-size: clamp(30px,3.4vw,50px);
}

/* ==========================================================================
   Footer density
   ========================================================================== */
/* 18px between links plus 4px of link padding read as a list of unrelated
   items rather than one column. */
.premium-store .atelier-footer nav li { margin-bottom: 6px; }
.premium-store .atelier-footer nav a { padding-block: 3px; }
.premium-store .atelier-footer__grid { gap: clamp(32px,4.5vw,72px); padding-block: clamp(44px,5vw,60px) clamp(36px,4vw,48px); }
.premium-store .atelier-footer__contact ul { gap: 10px; }
.premium-store .atelier-footer__social { margin-top: 20px; }

/* The bottom bar was 11px — small enough that the copyright and policy links
   read as disclaimers rather than usable links. */
.premium-store .atelier-footer__bottom { font-size: 13px; padding-top: 20px; gap: 18px 24px; }
.premium-store .atelier-footer__bottom ul { gap: 20px; }

/* Back to top belongs at the end of the bar, opposite the copyright. */
.premium-store .atelier-footer__top { order: 9; margin-inline-start: auto; }
@media (max-width: 749px) {
  .premium-store .atelier-footer__top { order: 0; margin-inline-start: 0; }
}

/* ==========================================================================
   Showcase band
   --------------------------------------------------------------------------
   Full-bleed: every other section keeps its image inside the page width, so
   letting this one run edge to edge gives the page a single cinematic beat
   before the closing call to action.
   ========================================================================== */
.atelier-showcase {
  --a-text: #f7f5ef;
  --a-muted: #d8e0d8;
  --a-border: rgba(247,245,239,.26);
  --a-card: rgba(247,245,239,.10);
  --a-accent: var(--atelier-gold);
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(72px,9vw,140px);
  color: var(--a-text);
  background: var(--atelier-charcoal);
}
.atelier-showcase--medium { min-height: clamp(420px,52vw,560px); }
.atelier-showcase--tall { min-height: clamp(520px,68vw,760px); }
.atelier-showcase--full { min-height: min(92vh, 900px); }

.atelier-showcase__media { position: absolute; inset: 0; z-index: -1; }
.atelier-showcase__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Scaled slightly so the slow drift on reveal never exposes an edge. */
  transform: scale(1.06);
  transition: transform 1.6s cubic-bezier(.2,.7,.3,1);
}
.atelier-showcase:has(.atelier-revealed) .atelier-showcase__image { transform: scale(1); }

/* Two stops rather than a flat tint: the top stays dark enough to carry the
   floating header, the centre keeps the photograph's detail. */
.atelier-showcase__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,24,19,.74) 0%, rgba(10,24,19,.42) 38%, rgba(10,24,19,.78) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10,24,19,.26), transparent 70%);
}

.atelier-showcase__inner { position: relative; z-index: 1; }
/* The measure is capped here, not on .atelier-wrap: shrinking the wrap and
   zeroing its auto margins for the left-aligned variant would have pulled the
   copy flush to the viewport edge instead of the page gutter. */
.atelier-showcase__body { max-width: 760px; margin-inline: auto; text-align: center; }
.atelier-showcase--center .atelier-eyebrow { text-align: center; }
.atelier-showcase h2 { margin-inline: auto; max-width: 15ch; font-size: clamp(38px,5vw,74px); }
.atelier-showcase .atelier-copy { margin-inline: auto; max-width: 46ch; }
.atelier-showcase .atelier-actions { justify-content: center; }
.atelier-showcase .atelier-button { background: #f5f2e8; color: #14231e; }
.atelier-showcase .atelier-button .atelier-icon { color: #f5f2e8; }

.atelier-showcase--start .atelier-showcase__body { max-width: 640px; margin-inline: 0; text-align: start; }
.atelier-showcase--start :is(h2, .atelier-copy) { margin-inline: 0; }
.atelier-showcase--start :is(.atelier-eyebrow, .atelier-actions, .atelier-showcase__chips) {
  text-align: start;
  justify-content: flex-start;
}

.atelier-showcase__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(30px,3.5vw,44px) 0 0;
  padding: 0;
  list-style: none;
}
.atelier-showcase__chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border: 1px solid var(--a-border);
  border-radius: 999px;
  background: var(--a-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 13px;
  line-height: 1.3;
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.atelier-showcase__chips .atelier-icon { flex: 0 0 auto; color: var(--a-accent); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .atelier-showcase__chips li:hover { border-color: var(--a-accent); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-showcase__image { transform: none; transition: none; }
}
@media (max-width: 749px) {
  .atelier-showcase { padding-block: 64px; }
  .atelier-showcase--tall { min-height: 540px; }
  .atelier-showcase--full { min-height: 80vh; }
  .atelier-showcase__chips { gap: 8px; }
  .atelier-showcase__chips li { padding: 9px 14px; font-size: 12px; }
}

/* ==========================================================================
   Mobile menu drawer
   --------------------------------------------------------------------------
   The drawer's markup lives inside `.header__row--top`, so the capsule's text
   colour was cascading into it. On a transparent-header template that colour
   is ivory — the same value as the drawer panel — so every link in the mobile
   menu rendered invisible.

   The drawer carries its own `color-custom-*` scheme, so handing its contents
   back to `inherit` restores the correct foreground on every template.
   ========================================================================== */
.premium-store #header-component .header__row--top :is(.menu-drawer, dialog, [popover]) :is(a, button, summary, svg, span) {
  color: inherit;
}
/* That reset is deliberately broad, so the card price keeps its brand colour
   explicitly — otherwise product cards in the drawer lose the emerald they
   carry everywhere else. */
.premium-store #header-component .header__row--top .menu-drawer :is(.product-card, .resource-card) .price {
  color: var(--atelier-emerald);
}

/* --------------------------------------------------------------------------
   Drawer: close control
   A 14px glyph inside a 52px target is hard to see and reads as unfinished,
   even though the tap area itself is fine.
   -------------------------------------------------------------------------- */
.premium-store .menu-drawer__close-button .header-drawer-icon--close svg {
  width: 22px;
  height: 22px;
}
.premium-store .menu-drawer__close-button {
  border-radius: 50%;
  transition: background-color .25s ease;
}
.premium-store .menu-drawer__close-button:hover { background: rgba(23,62,48,.07); }

/* --------------------------------------------------------------------------
   Drawer: featured products
   The list had no inline padding, so cards sat flush against both drawer
   edges and the trailing one was simply sliced off with nothing to suggest
   it could be scrolled. 124px-wide cards also forced every title into an
   ellipsis after three or four words.
   -------------------------------------------------------------------------- */
.premium-store .menu-drawer__featured-content-list {
  gap: 12px;
  padding: 0 20px 20px;
  scroll-padding-inline: 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Fades the trailing edge so a half-visible card reads as "more here"
     rather than as a clipping bug. */
  -webkit-mask-image: linear-gradient(90deg, #000 0 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 90%, transparent 100%);
}
.premium-store .menu-drawer__featured-content-list::-webkit-scrollbar { display: none; }
.premium-store .menu-drawer__featured-content-list-item {
  /* 152px fit exactly twice across the drawer and left a 7px sliver of the
     third, which the fade swallowed; 138px leaves a readable peek. */
  flex: 0 0 138px;
  scroll-snap-align: start;
}
.premium-store .menu-drawer .resource-card__media {
  overflow: hidden;
  border: 1px solid rgba(32,44,41,.07);
  border-radius: 14px;
}
.premium-store .menu-drawer .resource-card__media img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.premium-store .menu-drawer .resource-card__content { gap: 3px; font-size: 13px; line-height: 1.35; }
/* Two lines beats an ellipsis after four words. */
.premium-store .menu-drawer .resource-card__content :is(a, .resource-card__title, p:first-child) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .premium-store .menu-drawer .resource-card:hover .resource-card__media img { transform: scale(1.05); }
}

/* ==========================================================================
   Responsive containment
   --------------------------------------------------------------------------
   Grid and flex items default to `min-width: auto`, which refuses to shrink
   below the item's min-content width. In the footer newsletter that pushed
   the email field 17px past the emerald card's padding edge on a phone.
   These containers hold text and form controls that are all safe to shrink.
   ========================================================================== */
.atelier-newsletter > *,
.atelier-newsletter form,
.atelier-editorial__grid > *,
.atelier-faq__grid > *,
.atelier-contact__grid > *,
.atelier-ritual__layout > *,
.atelier-ritual__header > *,
.atelier-footer__grid > *,
.atelier-page-header__copy,
.atelier-showcase__body {
  min-width: 0;
}

/* The field is the element that actually has to give: its input already
   carries `min-width: 0`, but the flex row needs to be allowed to shrink too. */
.atelier-newsletter__field { max-width: 100%; }

/* --------------------------------------------------------------------------
   Product carousel peek
   The mobile carousel snaps correctly, but the next card was sliced dead
   straight at the viewport edge — through the photo, the title and the price
   mid-word — which reads as a clipping bug rather than "swipe for more".
   Fading the trailing edge makes the peek deliberate.
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  .premium-store .resource-list__carousel slideshow-slides {
    -webkit-mask-image: linear-gradient(90deg, #000 0 78%, rgba(0, 0, 0, .35) 93%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0 78%, rgba(0, 0, 0, .35) 93%, transparent 100%);
  }
}

/* ==========================================================================
   Naira glyph clipping
   --------------------------------------------------------------------------
   Inter draws ₦ with a negative left side bearing: its ink starts 1px to the
   left of the text origin. Measured with canvas actualBoundingBoxLeft — 1 for
   ₦, 0 for both `N` and the digits.

   `.product-card__content` is `overflow: clip`, and the price box begins on
   exactly that clip edge (slack measured at 0px), so the left stem of the
   naira sign was shaved off every price in the catalogue.

   `overflow-clip-margin` widens the painted region without affecting layout,
   so the price stays aligned with the title above it. Scoped with :has() so
   only panels that actually hold a price are affected.
   ========================================================================== */
.premium-store :is(.product-card__content, .resource-card__content),
.premium-store .layout-panel-flex:has(.price, product-price) {
  overflow-clip-margin: 4px;
}

/* Where overflow-clip-margin is unsupported, inset the price instead. Costs
   2px of alignment, but a correct glyph beats a flush edge. */
@supports not (overflow-clip-margin: 1px) {
  .premium-store :is(.product-card, .resource-card) :is(.price, product-price) {
    padding-inline-start: 2px;
  }
}

/* ==========================================================================
   Product imagery: contain
   --------------------------------------------------------------------------
   The catalogue is shot as cut-outs on a white sweep, but product cards fit
   every image with `cover`, cropping the subject inside the square frame.

   The product page already sets `media_fit: contain` through its own block
   setting. Cards have no equivalent setting: card-gallery.liquid only assigns
   `media_fit` when the ratio is 'adapt' AND constrained to the viewport, so a
   square card always falls through to the `| default: 'cover'`, written as an
   inline `--product-media-fit` custom property.

   So this overrides the theme's own variable rather than `object-fit`
   directly: the declaration it feeds
   (`.product-media-container.media-fit img`) is more specific than anything
   reasonable here, and `!important` in a stylesheet outranks the non-important
   inline property. Scoped to cards so the product gallery keeps following its
   customizer setting.
   ========================================================================== */
.premium-store .product-card .product-media-container.media-fit {
  --product-media-fit: contain !important;
}

/* Search results, the menu drawer and mega menus use resource cards, which
   set object-fit on the image itself at a single class of specificity. */
.premium-store :is(.resource-card__image, .sticky-add-to-cart__image-img) {
  object-fit: contain;
}

/* Cut-outs need a little air or they read as touching the card edge. */
.premium-store .product-card .product-media__image,
.premium-store .resource-card__image {
  padding: 6%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   The surface behind a product image
   --------------------------------------------------------------------------
   The image itself was never the problem: `slideshow-container` is styled
   `background-color: var(--color-background)`, so every product photo sat on
   the section's page colour — the ivory. Against a cut-out shot on a white
   sweep that showed up as a lighter rectangle floating inside a tinted frame,
   which is what `contain` made obvious.

   The `:has()` uses a direct-child chain on purpose. A descendant match also
   caught the product carousel's outer slideshow — which wraps each whole card,
   title and price included — and turned the text area white along with the
   photo. Only the gallery's own slideshow has `.product-media-container` as a
   direct grandchild.
   -------------------------------------------------------------------------- */
.premium-store slideshow-container:has(> slideshow-slides > .product-media-container),
.premium-store :is(
  .card-gallery,
  .product-media-container,
  .product-media,
  .media-gallery__thumbnail,
  .resource-card__media,
  .sticky-add-to-cart__image,
  .quick-add-modal .product-media-container
) {
  background-color: #fff;
}

/* The editorial plates are this theme's own, so they stay white here. */
.premium-store { --atelier-plate: #fff; }

/* ==========================================================================
   Footer contact column width
   --------------------------------------------------------------------------
   At `.6fr` the contact column resolved to 195px, while a 28-character email
   address needs about 220px including its icon and gap — so every row in the
   column overflowed by the same 52px, clipping against the page edge.

   Giving the column a larger share and a real minimum fixes the cause;
   `overflow-wrap` is the safety net for an address longer than this one.
   Scoped to desktop, where this four-column layout actually applies.
   ========================================================================== */
@media (min-width: 990px) {
  .premium-store .atelier-footer__grid {
    grid-template-columns:
      minmax(260px, 1.15fr)
      minmax(130px, .55fr)
      minmax(130px, .55fr)
      minmax(210px, .85fr);
  }
}
.premium-store .atelier-footer__contact li > :is(a, span) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Product page gallery
   --------------------------------------------------------------------------
   The gallery block is already set to `media_fit: contain` in the template,
   but the theme only honours that setting when `aspect_ratio` is 'adapt'.
   With a fixed ratio it hard-appends a `media-fit-cover` class and emits
   `.media-fit-cover :is(img, …) { object-fit: cover }`, so the main image was
   cropped — a 496x538 portrait shot rendered into a 708x708 square.

   Overriding here rather than switching the block to 'adapt' keeps the square
   frame, so the gallery matches the product cards instead of resizing itself
   to whichever media is tallest.
   -------------------------------------------------------------------------- */
.premium-store .product-media-container.media-fit-cover :is(img, video, .deferred-media__poster-image) {
  object-fit: contain;
}

/* Thumbnails crop the same way. The theme's rule nests to
   `.slideshow-controls__thumbnails .slideshow-control img`, which ties with a
   two-class selector here and wins on order — so this one carries the extra
   class to outrank it. */
.premium-store .slideshow-controls__thumbnails .slideshow-control img,
.premium-store :is(.media-gallery__thumbnail, .dialog-thumbnails-list__item) img {
  object-fit: contain;
}

/* A little air around the main shot, matching the cards. */
.premium-store .product-media-container.media-fit-cover .product-media__image {
  padding: 4%;
  box-sizing: border-box;
}

/* ==========================================================================
   Assurance bar — panel treatment
   --------------------------------------------------------------------------
   Two hairlines across the page width read as a divider that happened to have
   text in it, rather than as a designed element, and nothing separated one
   promise from the next. It is one panel now, with the four items divided
   inside it — the same card language as the product grid and the FAQ rows.
   ========================================================================== */
.atelier-assurance--bar .atelier-assurance__grid {
  gap: 0;
  padding: clamp(22px,2.4vw,30px) clamp(6px,1.2vw,14px);
  border: 1px solid var(--a-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(7,31,24,.06);
}
.atelier-tone--dark .atelier-assurance--bar .atelier-assurance__grid,
.atelier-tone--emerald .atelier-assurance--bar .atelier-assurance__grid,
.atelier-assurance--bar.atelier-tone--dark .atelier-assurance__grid,
.atelier-assurance--bar.atelier-tone--emerald .atelier-assurance__grid {
  background: rgba(255,255,255,.05);
  box-shadow: none;
}
.atelier-assurance--bar .atelier-assurance__item {
  padding-inline: clamp(16px,1.9vw,26px);
  border-inline-start: 1px solid var(--a-border);
}
.atelier-assurance--bar .atelier-assurance__item:first-child { border-inline-start: 0; }

/* Slightly more presence now that the icons sit on white rather than ivory. */
.atelier-assurance--bar .atelier-assurance__icon { width: 46px; height: 46px; border-radius: 15px; }
.atelier-assurance--bar .atelier-assurance__body strong { font-size: 15px; }
.atelier-assurance--bar .atelier-assurance__body span { font-size: 13px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .atelier-assurance--bar .atelier-assurance__item:hover { transform: translateY(-2px); }
}

/* Below the four-across breakpoint the vertical rules fall between wrapped
   rows and stop meaning anything, so the panel goes back to plain gaps. */
@media (max-width: 989px) {
  .atelier-assurance--bar .atelier-assurance__grid {
    gap: clamp(18px,2.4vw,26px) 0;
    padding: clamp(20px,2.6vw,26px) clamp(14px,2vw,22px);
    border-radius: 20px;
  }
  .atelier-assurance--bar .atelier-assurance__item { padding-inline: 0; border-inline-start: 0; }
  .atelier-assurance--bar .atelier-assurance__item:nth-child(even) {
    padding-inline-start: clamp(14px,2.5vw,24px);
    border-inline-start: 1px solid var(--a-border);
  }
  .atelier-assurance--bar .atelier-assurance__icon { width: 40px; height: 40px; border-radius: 13px; }
}
@media (max-width: 480px) {
  .atelier-assurance--bar .atelier-assurance__grid { padding: 18px 16px; border-radius: 18px; }
}

/* ==========================================================================
   Colour swatches
   --------------------------------------------------------------------------
   The theme draws the selected ring with `outline`, sized by
   --focus-outline-width (1.5px) and --focus-outline-offset (0.2em ~= 3px).
   That reads as a hairline pressed against the swatch rather than a chosen
   state. Overriding the two variables rather than the outline itself keeps
   the theme's own Safari <16.4 fallback working, since it reuses them.
   ========================================================================== */
/* The ring belongs on the swatch, not the label. The label carries
   `min-height: 44px` for the tap target while the swatch is 34px, so an
   outline drawn on the label came out as a 34x44 rounded rect sitting 10px
   below the swatch's centre — the off-centre ellipse, not a circle.

   Keeping the 44px target and moving the ring to the swatch fixes the
   geometry without shrinking the hit area. The label also has
   `overflow: clip`, which shaved the top of the ring, and needs releasing —
   it was there for the strikethrough svg, which swatches no longer use. */
.premium-store .variant-option__button-label--has-swatch { overflow: visible; }
/* Needs `:has(input[type='radio'])` to match the theme's own `display: block`
   rule at (0,2,1) — without it the flex centring is silently dropped and the
   swatch stays pinned to the top of the 44px label, leaving all ten spare
   pixels below it. That made the tap area lopsided: a tap 10px under a
   swatch selected it, a tap just above did nothing. */
.premium-store .variant-option__button-label--has-swatch:has(input[type='radio']) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.premium-store .variant-option__button-label--has-swatch:is(:hover, :has(:checked)) { outline: none; }

.premium-store .variant-option__button-label--has-swatch .swatch {
  transition: outline-color .2s ease, outline-offset .2s ease;
  outline: 2px solid transparent;
  outline-offset: 4px;
}
.premium-store .variant-option__button-label--has-swatch:has(:checked) .swatch {
  outline-color: var(--atelier-emerald);
}
.premium-store .variant-option__button-label--has-swatch:hover:not(:has(:checked)) .swatch {
  outline-color: rgba(32,44,41,.28);
}

/* Safari <16.4 redraws the ring as a border on the label's ::after, which
   would put the old 34x44 shape back. The focus ring it also defines sits on
   .swatch::after and is left alone. */
@supports not (background-color: rgb(from red 150 g b / alpha)) {
  .premium-store .variant-option__button-label--has-swatch:has(:checked)::after { border-color: transparent; }
}

/* A pale swatch — silver, white, ivory — was nearly invisible against the
   product panel at 10% border opacity. */
.premium-store .swatch { --style-border-swatch-opacity: 0.22; }

.premium-store .variant-option__button-label--has-swatch {
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .premium-store .variant-option__button-label--has-swatch:hover { transform: translateY(-1px); }
}

/* Sold-out colours.
   --------------------------------------------------------------------------
   Two problems with the theme's treatment on a swatch. Its strikethrough svg
   is sized for the rectangular button variant — measured 32x42 over a 34x34
   swatch — and with a 100x46 viewBox under `slice` nearly all of the diagonal
   is cropped, leaving a short scratch across the middle. And dimming the
   swatch misreports the product: a sold-out black ring rendered as grey.

   So the colour stays honest and the diagonal is drawn as a gradient on the
   swatch itself, which spans it fully at any size and is clipped to a clean
   chord by the border radius. */
.premium-store .variant-option__button-label--has-swatch .variant-option__strikethrough { display: none; }
.premium-store .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
  position: relative;
  opacity: .88;
}
.premium-store .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(32,44,41,.72) calc(50% - 1px),
    rgba(32,44,41,.72) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.premium-store .variant-option__button-label--has-swatch:has([data-option-available='false']):hover .swatch { opacity: 1; }

/* The option name sits tight against its value; give the pair some air. */
.premium-store .variant-option legend { margin-bottom: 10px; }
.premium-store .variant-option--swatches { gap: 12px; }

/* ==========================================================================
   Product card swatches — overlaid on the image
   --------------------------------------------------------------------------
   The block now sits directly after the gallery, and is pulled back up over
   the bottom of the image, where a contain-fitted cut-out always leaves empty
   space. The negative margin has to be paid back below it, otherwise every
   item after it rises by the same amount and the title lands on the photo.

   Offsets assume a fixed row height, so it is set here rather than left to
   the swatch size: -(14px flex gap + 26px row + 12px inset) up, +12px back.
   ========================================================================== */
.premium-store .product-card product-swatches {
  position: relative;
  z-index: 2;
  /* 44px, not the 26px swatch: the label inside carries the same tap-target
     height as the product page, and product-swatches is `overflow: hidden`,
     so a shorter row sliced 14px off the bottom of every circle.
     Offsets measured against the rendered box rather than derived: -71px
     puts the circles 12px clear of the image's bottom edge, and the same
     amount is paid back below so the title doesn't ride up onto the photo. */
  height: 44px;
  overflow: visible;
  margin-top: -71px;
  margin-bottom: 13px;
  padding-inline: 12px;
  pointer-events: none;
}
.premium-store .product-card product-swatches > * { pointer-events: auto; }



@media (max-width: 749px) {
  .premium-store .product-card product-swatches { padding-inline: 8px; }
}

/* The quick-add button sits in the same strip: measured 36x48 at a 12px
   inset from the gallery's bottom-right corner. Reserved on BOTH sides now
   that the row is centred — padding only on the right would shift the centre
   off to the left. The row falls back to its "+N" count when it runs out of
   room. Gated on :has() so cards without quick-add keep the full width. */
.premium-store .product-card:has(.quick-add) product-swatches { padding-inline: 54px; }


/* ==========================================================================
   Swatch tooltip
   --------------------------------------------------------------------------
   The colour name lives on the radio's aria-label, which CSS cannot reach
   from the label, so premium.js copies it to data-swatch-name and this
   renders it. Uses ::before because the theme's Safari <16.4 selection-ring
   fallback already owns ::after on these labels.
   ========================================================================== */
.premium-store .variant-option__button-label--has-swatch[data-swatch-name] { position: relative; }
.premium-store .variant-option__button-label--has-swatch[data-swatch-name]::before {
  content: attr(data-swatch-name);
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  z-index: 6;
  padding: 5px 9px;
  border-radius: 8px;
  background: #14231e;
  color: #f6f4ee;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.premium-store .variant-option__button-label--has-swatch[data-swatch-name]:hover::before,
.premium-store .variant-option__button-label--has-swatch[data-swatch-name]:focus-within::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .premium-store .variant-option__button-label--has-swatch[data-swatch-name]::before { transition: none; }
}

/* The overflow count navigates to the product on a card, so it should read
   as a link rather than a disclosure. */
.premium-store .product-card .hidden-swatches__count { cursor: pointer; }

/* Swatch labels inherit the variant-button fill (--color-variant-background,
   the page ivory) and a 32px radius, so each circle sat on an ivory pill.
   Invisible against a white card, but clearly visible once the row was
   overlaid on the product photo. A swatch is its own colour; it needs no
   plate behind it in any state. */
.premium-store .variant-option__button-label--has-swatch,
.premium-store .variant-option__button-label--has-swatch:hover,
.premium-store .variant-option__button-label--has-swatch:has(:checked) {
  background: transparent;
}

/* ==========================================================================
   Page header — editorial layout
   --------------------------------------------------------------------------
   A one-word title in a 76px serif left two thirds of the line empty and
   nothing to carry the eye down the page. The editorial variant sets the
   heading against the introduction, so the measure is filled and the two
   read as a pair rather than a title with a stray sentence beneath it.
   ========================================================================== */
.atelier-page-header--editorial .atelier-page-header__copy {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: end;
  max-width: none;
}
.atelier-page-header--editorial .atelier-eyebrow { grid-column: 1 / -1; }
.atelier-page-header--editorial h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(46px, 6.4vw, 96px);
  line-height: .98;
}
.atelier-page-header--editorial .atelier-page-header__lead {
  /* Sits on the heading's last baseline rather than its box, so the two
     columns look set together instead of merely bottom-aligned. */
  padding-bottom: clamp(6px, 0.8vw, 14px);
}
.atelier-page-header--editorial .atelier-copy {
  margin-top: 0;
  max-width: 40ch;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.7;
}
/* A hairline under the pair closes the opening and hands off to the section
   below, which the stacked version had nothing to do. */
.atelier-page-header--editorial .atelier-wrap::after {
  content: '';
  display: block;
  margin-top: clamp(38px, 4.5vw, 62px);
  border-top: 1px solid var(--a-border);
}
.atelier-page-header--editorial .atelier-page-header__content {
  border-top: 0;
  padding-top: 0;
  margin-top: clamp(30px, 3.5vw, 46px);
}

@media (max-width: 899px) {
  .atelier-page-header--editorial .atelier-page-header__copy { grid-template-columns: 1fr; row-gap: 22px; }
  .atelier-page-header--editorial h1 { max-width: 14ch; }
  .atelier-page-header--editorial .atelier-page-header__lead { padding-bottom: 0; }
}

/* ==========================================================================
   Cart
   ========================================================================== */
/* The capsule's text-colour rule was reaching the count inside the cart
   bubble, painting it the nav colour — dark figures on the bubble's dark
   fill. Handing the contents back to `inherit` lets them follow the bubble's
   own colour, including the swap the theme makes over a transparent header. */
.premium-store #header-component .header__row--top .cart-bubble * { color: inherit; }

/* `.cart-drawer__items` carries padding-inline only, so the first line sat
   directly beneath the "Cart" heading. */
.premium-store .cart-drawer__items { padding-block-start: var(--gap-xl, 24px); }

/* --------------------------------------------------------------------------
   Cart count badge
   --------------------------------------------------------------------------
   At the theme's 20px the badge was nearly the size of the 22px icon it sits
   on, overlapping it by 12x14px and swallowing the bag's top-right corner.

   Shrinking it alone could not fix that: the icon is inset 11px inside a 44px
   button, so no badge big enough to read fits in that band without touching
   it — and the button is `overflow: hidden`, which pinned the badge inside.
   A ring in the capsule colour was worse still: it masked the bag's stroke
   where it passed over, so the outline still broke.

   Releasing the button's overflow lets the badge sit above the icon's top
   edge instead, clearing it completely. Measured overlap: 0.
   -------------------------------------------------------------------------- */
.premium-store #header-component .header-actions__action:has(.cart-bubble) { overflow: visible; }
.premium-store #header-component .cart-bubble {
  width: 14px;
  top: -3px;
  right: 0;
}
.premium-store #header-component .cart-bubble__text { font-size: 9px; }