/* ============================================================
   Pink Web Studio — Atelier layer
   Shop components shared by /, /services/ and /reserve/.
   Builds on the editorial tokens in styles.css.
   ============================================================ */
:root {
  --rose: #B76E79;
  --blush: #F1E4E0;
  --blush-2: #E9D5D0;
  --hairline: rgba(24,23,22,.12);
}

.at-page {
  --bg: var(--editorial-bg);
  --ink: var(--editorial-ink);
  --ink-2: var(--editorial-muted);
  --rule: var(--hairline);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
}
.at-wrap { width: min(100% - 112px, 1328px); margin-inline: auto; }
.at-kicker { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--editorial-muted); }
.at-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.025em; line-height: 1; }
.at-display em { font-style: italic; }
.at-muted { color: var(--editorial-muted); }
.at-page :focus-visible { outline: 2px solid var(--editorial-accent); outline-offset: 4px; }

/* Buttons and links */
.at-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 13px 24px; border: 1px solid var(--editorial-ink); font: 500 12px/1.2 var(--font-ui); letter-spacing: .02em; cursor: pointer; background: transparent; color: var(--editorial-ink); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.at-btn:hover { background: var(--editorial-ink); color: var(--editorial-bg); }
.at-btn-dark { background: var(--editorial-ink); color: var(--editorial-bg); }
.at-btn-dark:hover { background: var(--editorial-accent); border-color: var(--editorial-accent); color: #fff; }
.at-btn.is-disabled { opacity: .35; pointer-events: none; }
.at-btn[aria-pressed="true"] { background: var(--editorial-accent); border-color: var(--editorial-accent); color: #fff; }
.at-link { display: inline-flex; gap: 10px; align-items: center; padding: 10px 0; background: none; border: 0; font: 500 12px/1.2 var(--font-ui); color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.at-link:hover { color: var(--editorial-accent); }

/* Section heading */
.at-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 44px; }
.at-head h2 { font-size: clamp(46px, 5.2vw, 76px); margin-top: 14px; }
.at-head > p { max-width: 34ch; font-size: 14px; color: var(--editorial-muted); }

/* ── Product cards ── */
.at-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.at-card { position: relative; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 120px; }
.at-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--editorial-image-bg); }
.at-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 600ms ease; }
.at-card:hover .at-card-media img { transform: scale(1.04); }
.at-card-tag { position: absolute; top: 14px; left: 14px; padding: 6px 10px; background: var(--editorial-bg); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.at-card-peek { position: absolute; inset: auto 0 0 0; padding: 18px 18px 16px; background: linear-gradient(to top, rgba(24,23,22,.78), rgba(24,23,22,0)); color: #fff; font-size: 12px; line-height: 1.6; opacity: 0; transform: translateY(10px); transition: opacity 320ms ease, transform 320ms ease; }
.at-card:hover .at-card-peek, .at-card:focus-within .at-card-peek { opacity: 1; transform: none; }
.at-card-body { display: flex; flex-direction: column; flex: 1; padding-top: 20px; }
.at-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.at-card h3 { font-family: var(--font-display); font-size: clamp(28px, 2.4vw, 36px); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; margin: 8px 0 6px; }
.at-card-promise { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--editorial-muted); line-height: 1.3; }
.at-price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 4px; font-family: var(--font-display); font-size: 34px; line-height: 1; }
.at-price small { font-family: var(--font-display); font-style: italic; font-size: 17px; letter-spacing: 0; text-transform: lowercase; color: var(--editorial-muted); }
.at-card-time { font-size: 12px; color: var(--editorial-muted); }
.at-includes { list-style: none; margin: 18px 0 22px; border-top: 1px solid var(--hairline); }
.at-includes li { padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; display: flex; gap: 10px; }
.at-includes li::before { content: ''; flex: none; width: 12px; height: 1px; margin-top: .8em; background: currentColor; opacity: .45; }
.at-card-note { font-size: 12px; color: var(--editorial-muted); margin: -10px 0 20px; font-style: italic; }
.at-card-actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.at-card-actions .at-btn { flex: 1 1 auto; }
.at-card.is-selected .at-card-media::after { content: 'In your project'; position: absolute; top: 14px; right: 14px; padding: 6px 10px; background: var(--editorial-accent); color: #fff; font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

/* Care strip */
.at-care { scroll-margin-top: 120px; display: grid; grid-template-columns: 220px 1fr auto; gap: 40px; align-items: center; margin-top: 56px; padding: 26px; background: var(--blush); }
.at-care img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.at-care h3 { font-family: var(--font-display); font-size: 34px; font-weight: 400; line-height: 1.05; }
.at-care p { font-size: 13px; color: var(--editorial-muted); max-width: 52ch; margin-top: 8px; }
.at-care .at-price { margin: 0 0 12px; justify-content: flex-end; font-size: 34px; color: var(--editorial-ink); }

/* ── Comparison table ── */
.at-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.at-compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.at-compare th, .at-compare td { padding: 16px 14px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.at-compare thead th { font-family: var(--font-display); font-size: 24px; font-weight: 400; border-bottom-color: var(--editorial-ink); }
.at-compare tbody th { font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--editorial-muted); width: 18%; }
.at-compare .yes { color: var(--editorial-accent); }
.at-compare .no { color: rgba(24,23,22,.3); }

/* ── Builder ── */
.at-builder { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.at-step { padding: 28px 0; border-top: 1px solid var(--hairline); }
.at-step legend, .at-step-title { display: flex; gap: 14px; align-items: baseline; font-family: var(--font-display); font-size: 30px; line-height: 1.1; margin-bottom: 18px; }
.at-step fieldset { border: 0; }
.at-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.at-option { position: relative; display: block; cursor: pointer; }
.at-option input { position: absolute; opacity: 0; pointer-events: none; }
.at-option-box { display: flex; justify-content: space-between; gap: 14px; height: 100%; padding: 16px 18px; border: 1px solid var(--hairline); background: rgba(255,255,255,.35); transition: border-color 180ms ease, background 180ms ease; }
.at-option:hover .at-option-box { border-color: var(--editorial-ink); }
.at-option input:checked + .at-option-box { border-color: var(--editorial-accent); background: var(--blush); box-shadow: inset 0 0 0 1px var(--editorial-accent); }
.at-option input:focus-visible + .at-option-box { outline: 2px solid var(--editorial-accent); outline-offset: 3px; }
.at-option-name { font-size: 14px; font-weight: 500; }
.at-option-meta { display: block; font-size: 12px; color: var(--editorial-muted); }
.at-option-price { font-family: var(--font-display); font-size: 22px; white-space: nowrap; }
.at-addons { list-style: none; }
.at-addon { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.at-addon label { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; }
.at-addon input[type=checkbox], .at-care-toggle input { width: 18px; height: 18px; accent-color: var(--editorial-accent); }
.at-addon-detail { display: block; font-size: 12px; color: var(--editorial-muted); }
.at-addon input[type=number] { width: 58px; padding: 6px 8px; border: 1px solid var(--hairline); background: transparent; font: inherit; font-size: 13px; }
.at-addon input[type=number]:disabled { opacity: .3; }
.at-addon-price { font-family: var(--font-display); font-size: 20px; min-width: 64px; text-align: right; }
.at-addon.is-disabled { opacity: .38; }
.at-addon.is-disabled label { cursor: not-allowed; }
.at-hint { font-size: 12px; color: var(--editorial-accent); min-height: 1.4em; margin-top: 10px; }
.at-care-toggle { display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }

/* Summary panel (builder + drawer + checkout) */
.at-summary { position: sticky; top: 120px; padding: 32px; background: var(--editorial-ink); color: var(--editorial-bg); }
.at-summary .at-kicker { color: var(--editorial-on-dark); }
.at-summary h3 { font-family: var(--font-display); font-size: 36px; font-weight: 400; margin: 8px 0 18px; }
.at-summary .at-lines li { border-color: rgba(246,242,235,.14); }
.at-summary .at-line-meta, .at-summary .at-empty, .at-summary .at-totals dt { color: var(--editorial-on-dark); }
.at-summary .at-btn { width: 100%; margin-top: 22px; background: var(--editorial-bg); color: var(--editorial-ink); border-color: var(--editorial-bg); }
.at-summary .at-btn:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.at-summary-note { font-size: 11px; color: var(--editorial-on-dark); margin-top: 14px; line-height: 1.6; }
.at-lines { list-style: none; }
.at-lines li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.at-line-name { display: block; font-size: 14px; }
.at-line-meta { display: block; font-size: 11px; color: var(--editorial-muted); }
.at-line-price { font-family: var(--font-display); font-size: 21px; white-space: nowrap; }
.at-line-price small { font-family: var(--font-ui); font-size: 10px; letter-spacing: .06em; opacity: .7; }
.at-line-remove { grid-column: 1; justify-self: start; padding: 4px 0; background: none; border: 0; color: inherit; opacity: .6; font: 400 11px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.at-line-remove:hover { opacity: 1; }
.at-empty { font-size: 13px; color: var(--editorial-muted); padding: 10px 0; }
.at-totals div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; font-size: 13px; }
.at-totals dt { color: var(--editorial-muted); }
.at-totals dd { font-weight: 500; }
.at-total-big { font-family: var(--font-display); font-size: 40px; font-weight: 400 !important; line-height: 1; }
.at-total-big small, .at-totals dd small { font-family: var(--font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }

/* Drawer */
.at-drawer { position: fixed; inset: 0 0 0 auto; width: min(100vw, 440px); height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--editorial-bg); color: var(--editorial-ink); font-family: var(--font-ui); flex-direction: column; }
.at-drawer[open] { display: flex; animation: atSlide 380ms cubic-bezier(.2,.7,.2,1); }
.at-drawer::backdrop { background: rgba(24,23,22,.38); }
@keyframes atSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.at-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--hairline); }
.at-drawer-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; font-style: italic; }
.at-drawer-close { width: 44px; height: 44px; background: none; border: 0; font-size: 28px; cursor: pointer; color: inherit; }
.at-drawer-body { flex: 1; overflow-y: auto; padding: 10px 28px 20px; }
.at-drawer-body .at-totals { margin-top: 14px; }
.at-drawer-foot { padding: 22px 28px 28px; border-top: 1px solid var(--hairline); background: var(--blush); }
.at-drawer-foot .at-btn { width: 100%; }
.at-drawer-custom { display: flex; justify-content: center; width: 100%; margin-top: 8px; }
.at-drawer-foot p { font-size: 11px; color: var(--editorial-muted); margin-top: 12px; text-align: center; }

/* Quiz */
.at-quiz { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; padding: 56px; background: var(--blush); }
.at-quiz h2 { font-size: clamp(40px, 4.2vw, 60px); margin-top: 14px; }
.at-quiz-intro p { font-size: 14px; color: var(--editorial-muted); margin-top: 18px; max-width: 34ch; }
.at-quiz-progress { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--editorial-accent); margin-bottom: 16px; }
.at-quiz fieldset { border: 0; display: grid; gap: 10px; }
.at-quiz legend { font-family: var(--font-display); font-size: 30px; line-height: 1.15; margin-bottom: 14px; }
.at-quiz-opt { text-align: left; padding: 16px 20px; border: 1px solid rgba(24,23,22,.16); background: var(--editorial-bg); font: 400 14px/1.4 var(--font-ui); color: var(--editorial-ink); cursor: pointer; transition: border-color 180ms ease, transform 180ms ease; }
.at-quiz-opt:hover { border-color: var(--editorial-ink); transform: translateX(4px); }
.at-quiz-result:focus { outline: none; }
.at-quiz-result h3 { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1; margin: 10px 0 6px; }
.at-quiz-price { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--editorial-muted); }
.at-quiz-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; }

/* Reviews */
.at-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.at-review { border-top: 1px solid var(--hairline); padding-top: 26px; }
.at-review blockquote { font-family: var(--font-display); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.25; font-style: italic; }
.at-review figcaption { margin-top: 18px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--editorial-muted); }
.at-stars { color: var(--rose); letter-spacing: .2em; font-size: 12px; margin-bottom: 14px; }

/* Reveal on scroll (only when JS marks the page ready) */
.at-js .at-reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
.at-js .at-reveal.is-in { opacity: 1; transform: none; }

/* ── Demo storefront (homepage): store features clients can have ── */
.sf { padding-block: 64px 68px; border-top: 1px solid var(--hairline); }
/* A more compact demo: narrower shop, smaller heading, tighter spacing. */
.sf .at-head { max-width: 960px; margin: 0 auto 26px; }
.sf .at-head h2 { font-size: clamp(36px, 3.6vw, 52px); max-width: 24ch; text-wrap: balance; }
/* The demo sits in a small shop frame, with the bag where a real shop keeps it. */
.sf-shop { max-width: 960px; margin-inline: auto; background: #F8EEEF; padding: 0 24px 26px; }
.sf-shopbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 0; margin-bottom: 20px; border-bottom: 1px solid rgba(24,23,22,.1); }
.sf-shop-name { font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; }
.sf-filters { display: flex; gap: 24px; }
.sf-filters button { padding: 6px 0; background: none; border: 0; border-bottom: 1px solid transparent; font: 500 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--editorial-muted); cursor: pointer; transition: color 200ms ease, border-color 200ms ease; }
.sf-filters button:hover, .sf-filters button[aria-pressed="true"] { color: var(--editorial-ink); border-bottom-color: currentColor; }
.sf-item[hidden] { display: none; }
.sf-bag { justify-self: end; padding: 4px 0; background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-style: italic; font-size: 20px; }
.sf-bag strong { display: inline-block; min-width: 1ch; font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: 20px; line-height: 1; transition: transform 300ms cubic-bezier(.3,1.6,.5,1); }
.sf-bag.is-bump strong { transform: scale(1.3); }
.sf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sf-item { min-width: 0; }
.sf-media { position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #EFEAE2; cursor: pointer; }
.sf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* 1 · second look on hover */
.sf-swap .sf-alt { opacity: 0; transition: opacity 500ms ease; }
.sf-swap .sf-main { transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.sf-swap:hover .sf-alt, .sf-swap:focus-visible .sf-alt, .sf-swap[aria-pressed="true"] .sf-alt { opacity: 1; }
.sf-swap:hover .sf-main { transform: scale(1.03); }
/* 2 · zoom to detail */
.sf-zoom img { transition: transform 450ms cubic-bezier(.2,.7,.2,1); will-change: transform; }
.sf-zoom.is-zoomed img { transform: scale(2.2); transition-duration: 250ms; }
.sf-zoom { cursor: zoom-in; }
.sf-zoom.is-zoomed { cursor: zoom-out; }
/* 3 · colour swatches */
.sf-tint img { transition: filter 500ms ease; }
.sf-swatches { display: flex; gap: 8px; margin-top: 10px; }
.sf-swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid rgba(24,23,22,.2); cursor: pointer; box-shadow: inset 0 0 0 2px var(--editorial-bg); transition: transform 180ms ease; }
.sf-swatch:hover { transform: scale(1.12); }
.sf-swatch[aria-pressed="true"] { border-color: var(--editorial-ink); box-shadow: inset 0 0 0 2px var(--editorial-bg), 0 0 0 1px var(--editorial-ink); }
/* 4 · quick add */
.sf-quick { position: absolute; inset: auto 0 0 0; padding: 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); transform: translateY(101%); transition: transform 380ms cubic-bezier(.2,.7,.2,1); }
.sf-item:hover .sf-quick, .sf-item:focus-within .sf-quick, .sf-quick.is-open { transform: none; }
.sf-quick p { font-size: 12px; color: var(--editorial-muted); margin-bottom: 8px; }
.sf-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sf-size { min-height: 38px; border: 1px solid rgba(24,23,22,.22); background: transparent; font: 500 12px var(--font-ui); color: var(--editorial-ink); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.sf-size:hover, .sf-size:focus-visible { background: var(--editorial-ink); color: var(--editorial-bg); }
.sf-size:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; background: transparent; color: var(--editorial-ink); }
.sf-quick-open { display: none; }
/* product info */
.sf-info { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.sf-info h3 { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.sf-info span { font-size: 12px; color: var(--editorial-muted); }
.sf-meta { font-size: 12px; color: var(--editorial-muted); margin-top: 4px; min-height: 1.4em; }
.sf-end { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 32px; max-width: 960px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid var(--hairline); }
.sf-end p { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; }
.sf-end p em { color: var(--editorial-accent); }
.sf-end .sf-note { font-family: var(--font-ui); line-height: 1.6; font-size: 11px; color: var(--editorial-muted); margin-top: 6px; }
.sf-toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--editorial-ink); color: var(--editorial-bg); font: 400 13px var(--font-ui); transform: translate(-50%, 140%); opacity: 0; transition: transform 420ms cubic-bezier(.2,.7,.2,1), opacity 300ms ease; pointer-events: none; }
.sf-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.sf-toast img { width: 34px; height: 42px; object-fit: cover; }
.sf-toast img[hidden] { display: none; }
/* Notify me on a sold-out size: nothing is sent, it only shows the customer's view. */
.sf-size[data-sf-soldout] { color: rgba(24,23,22,.4); text-decoration: line-through; }
.sf-size[data-sf-soldout]:hover, .sf-size[data-sf-soldout]:focus-visible { background: transparent; color: var(--editorial-ink); text-decoration: none; }
.sf-notify { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(24,23,22,.12); }
.sf-notify p { margin-bottom: 8px; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--editorial-ink); }
.sf-notify div { display: flex; }
.sf-notify input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid rgba(24,23,22,.22); border-right: 0; background: #fff; font: 12px var(--font-ui); }
.sf-notify button { height: 36px; padding: 0 12px; border: 0; background: var(--editorial-ink); color: #fff; font: 500 11px var(--font-ui); cursor: pointer; }
/* Second row: shop the look, and engraving. */
.sf-extras { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 24px; }
.sf-look, .sf-initial { background: #fff; padding: 18px; }
.sf-look { display: grid; grid-template-columns: minmax(0, 180px) 1fr; gap: 22px; align-items: center; }
.sf-look-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.sf-look-media img { width: 100%; height: 100%; object-fit: cover; }
.sf-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 2px 10px rgba(24,23,22,.18); cursor: pointer; transition: transform 200ms ease, background 200ms ease; }
.sf-dot::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.sf-dot:hover { transform: scale(1.12); }
.sf-dot[aria-pressed="true"] { background: rgba(255,255,255,.9); }
.sf-dot[aria-pressed="true"]::after { background: var(--editorial-ink); }
.sf-extra-title { font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.1; }
.sf-look-card { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; padding: 12px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.sf-look-thumb { flex: 0 0 64px; height: 80px; background-size: 400%; background-repeat: no-repeat; background-color: #EFEDEA; }
.sf-look-card h4 { font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1.2; }
.sf-look-card span { display: block; margin-top: 4px; font-size: 12px; color: var(--editorial-muted); }
.sf-look-panel .at-btn { width: 100%; }
.sf-initial { display: flex; flex-direction: column; }
.sf-initial > .sf-extra-title, .sf-initial > .sf-meta { text-align: center; }
.sf-charm { margin: 14px 0 10px; }
.sf-charm svg { display: block; width: 100%; height: auto; max-height: 112px; }
.sf-charm-letter { font-family: var(--font-display); font-size: 34px; }
.sf-letters { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }
.sf-letter { aspect-ratio: 1; padding: 0; border: 1px solid transparent; background: none; font-family: var(--font-display); font-size: 16px; color: var(--editorial-muted); cursor: pointer; transition: color 160ms ease, border-color 160ms ease; }
.sf-letter:hover { color: var(--editorial-ink); }
.sf-letter[aria-pressed="true"] { color: var(--editorial-ink); border-color: var(--editorial-ink); }
.sf-initial .sf-swatches { margin-top: 14px; }
.sf-initial .sf-info { margin-top: auto; padding-top: 16px; }
.sf-initial .at-btn { margin-top: 12px; }
/* The demo bag drawer. */
.sf-overlay { position: fixed; inset: 0; z-index: 129; background: rgba(24,23,22,.28); opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.sf-overlay.is-open { opacity: 1; pointer-events: auto; }
.sf-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 130; display: flex; flex-direction: column; width: min(400px, 92vw); padding: 26px 28px; background: #fff; box-shadow: -20px 0 50px -30px rgba(24,23,22,.4); transform: translateX(102%); transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
.sf-drawer.is-open { transform: none; }
.sf-drawer-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); }
.sf-drawer-head h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 28px; }
.sf-drawer-close { padding: 6px 0; background: none; border: 0; font: 500 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.sf-ship { padding: 18px 0; }
.sf-ship p { font-size: 12px; margin-bottom: 10px; }
.sf-ship-bar { height: 3px; background: #F2E4E6; }
.sf-ship-bar span { display: block; width: 0; height: 100%; background: var(--editorial-ink); transition: width 500ms ease; }
.sf-lines { list-style: none; flex: 1; overflow-y: auto; }
.sf-lines li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.sf-line-pic { width: 56px; height: 70px; background: #EFEDEA center / cover no-repeat; }
.sf-line-name { font-family: var(--font-display); font-size: 17px; line-height: 1.2; }
.sf-line-detail { margin-top: 4px; font-size: 12px; color: var(--editorial-muted); }
.sf-line-remove { margin-top: 8px; padding: 0; background: none; border: 0; font: 11px var(--font-ui); color: var(--editorial-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sf-line-price { font-family: var(--font-display); font-size: 18px; }
.sf-empty { padding: 18px 0; font-size: 13px; color: var(--editorial-muted); }
.sf-empty[hidden] { display: none; }
.sf-drawer-foot { padding-top: 18px; border-top: 1px solid var(--hairline); }
.sf-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 13px; }
.sf-subtotal strong { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.sf-drawer-foot .at-btn { width: 100%; }
.sf-drawer-foot .sf-note { margin-top: 10px; font-size: 11px; color: var(--editorial-muted); text-align: center; }
@media (hover: none) {
  .sf-quick-open { display: block; width: 100%; margin-top: 10px; }
  .sf-item:hover .sf-quick { transform: translateY(101%); }
  .sf-item .sf-quick.is-open { transform: none; }
}
@media (max-width: 860px) { .sf-grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; } .sf-extras { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sf { padding-block: 40px 44px; } .sf-grid { gap: 24px 12px; } .sf-look-media { max-width: 260px; } .sf-shop { margin-inline: -16px; padding: 0 16px 24px; } .sf-shopbar { grid-template-columns: 1fr auto; row-gap: 6px; margin-bottom: 22px; } .sf-filters { grid-column: 1 / -1; grid-row: 2; gap: 20px; } .sf-look { grid-template-columns: 1fr; } .sf-look, .sf-initial { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .sf *, .sf-toast { transition: none !important; } }

@media (max-width: 1100px) {
  .at-wrap { width: calc(100% - 64px); }
  .at-cards { grid-template-columns: 1fr 1fr; gap: 48px 28px; }
  .at-builder { grid-template-columns: 1fr; gap: 32px; }
  .at-summary { position: static; }
  .at-quiz { grid-template-columns: 1fr; gap: 28px; padding: 40px; }
}
@media (max-width: 760px) {
  .at-wrap { width: calc(100% - 32px); }
  .at-head { flex-direction: column; align-items: start; gap: 16px; margin-bottom: 30px; }
  .at-head h2 { font-size: 46px; }
  .at-cards { grid-template-columns: 1fr; gap: 48px; }
  .at-card-media { aspect-ratio: 5 / 4; }
  .at-card-peek { display: none; }
  .at-care { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .at-care .at-price { justify-content: flex-start; }
  .at-options { grid-template-columns: 1fr; }
  .at-step legend, .at-step-title { font-size: 26px; }
  .at-summary { padding: 24px; }
  .at-quiz { padding: 28px 20px; }
  .at-quiz legend { font-size: 25px; }
  .at-quiz-result h3 { font-size: 42px; }
  .at-reviews { grid-template-columns: 1fr; gap: 32px; }
}
.at-swipe-hint { display: none; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--editorial-muted); }
.at-swipe-hint::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .5; }
/* Phones: big serif headings get a little more air between lines, so they never touch. */
@media (max-width: 760px) {
  .at-display, .at-head h2, .home-title, .home-section-heading h2, .home-inquiry h2, .home-process-title, .sv-hero h1, .sv-cta h2, .at-quiz h2 { line-height: 1.06 !important; }
  .home-title { line-height: 1.02 !important; }
}
/* Touch screens have no hover: no stuck zoom or overlay after a tap. */
@media (hover: none) {
  .at-card:hover .at-card-media img { transform: none; }
  .at-card:hover .at-card-peek, .at-card:focus-within .at-card-peek { opacity: 0; transform: translateY(10px); }
}
/* ── Phones: package cards become a swipe row, like a shop shelf ── */
@media (max-width: 760px) {
  .at-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-inline: -16px; padding: 0 16px 10px; scrollbar-width: none; }
  /* Cards off to the side are never 'in view', so they must not wait for the fade-in. */
  .at-js .at-cards .at-reveal { opacity: 1; transform: none; transition: none; }
  .at-cards::-webkit-scrollbar { display: none; }
  .at-card { flex: 0 0 80%; scroll-snap-align: start; scroll-margin-inline: 16px; }
  .at-card-media { aspect-ratio: 4 / 3; }
  .at-card-tag { top: 10px; left: 10px; font-size: 8px; }
  .at-card-body { padding-top: 14px; }
  .at-card h3 { font-size: 26px; margin: 6px 0 4px; }
  .at-card-promise { font-size: 16px; }
  .at-price { font-size: 28px; margin: 12px 0 2px; }
  .at-includes { margin: 12px 0 14px; }
  .at-includes li { padding: 7px 0; font-size: 12px; }
  .at-card-note { font-size: 11px; margin: -6px 0 14px; }
  .at-card-actions .at-btn { min-height: 44px; }
  .at-swipe-hint { display: flex; }
  .at-care { grid-template-columns: 1fr; gap: 14px; padding: 20px; align-items: start; }
  .at-care > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .at-care img, .at-care p.at-kicker { display: none; }
  .at-care > div:first-of-type p { font-size: 12px; }
  .at-care h3 { font-size: 26px; }
  .at-care .at-price { font-size: 26px !important; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .at-page *, .at-drawer, .at-drawer * { transition: none !important; animation: none !important; }
  .at-js .at-reveal { opacity: 1; transform: none; }
}