/* Aura (premium) — skincare and beauty. Soft light, generous curves, Cormorant headlines,
   plum pill buttons, rose-gold details. Motion stays gentle and stops for visitors who ask for less. */

body { letter-spacing: .005em; }
.sec-title { font-weight: 500; letter-spacing: -.01em; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; }
.sec-head { margin-bottom: 32px; }
.sec-head--center .sec-text { max-width: 32rem; margin: 8px auto 0; }
.sec-text { opacity: .75; font-size: 1rem; }
.link-arrow { font-weight: 600; font-size: .875rem; }
.block { padding-block: clamp(48px, 9vw, 96px); }

/* Buttons: plum pills with a soft lift */
.btn { font-weight: 600; letter-spacing: .01em; min-height: 52px; padding-inline: 28px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn--primary { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c-primary) 70%, transparent); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--c-primary) 80%, transparent); }

/* Announcement and header */
.announce { background: var(--c-surface); color: var(--c-text); font-size: .75rem; font-weight: 500; letter-spacing: .02em; }
.hdr { background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
.brand__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; letter-spacing: .01em; }
.hdr__nav a { font-weight: 500; border-radius: 999px; }

/* Arch opening (Aura only) */
.ahero { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 85% 10%, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 60%), var(--c-bg); }
.ahero__grid { display: grid; gap: 28px; padding-block: 28px 56px; }
@media (min-width: 900px) { .ahero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: 56px 88px; } }
/* No photo yet (customers): one centred column, no empty arch (AUDIT_2 D-06). */
.ahero--plain .ahero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 760px; margin-inline: auto; }
.ahero--plain .ahero__note { justify-content: center; }
.ahero__text { display: grid; gap: 16px; justify-items: start; order: 2; }
@media (min-width: 900px) { .ahero__text { order: 0; } }
.ahero__kicker { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--c-surface); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.ahero__title { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.75rem, 11vw, 5.25rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.ahero__lead { margin: 0; max-width: 30rem; font-size: 1.0625rem; line-height: 1.6; opacity: .8; }
.ahero__note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; opacity: .75; }
.ahero__note .ic { width: 18px; height: 18px; color: var(--c-primary); }
.ahero__arch { position: relative; justify-self: center; width: min(100%, 460px); }
.ahero__glow { position: absolute; inset: 8% -6% -4% 6%; border-radius: 999px 999px 32px 32px; background: linear-gradient(160deg, var(--c-accent), color-mix(in srgb, var(--c-primary) 40%, var(--c-accent))); opacity: .35; filter: blur(2px); transform: rotate(4deg); }
.ahero__img { position: relative; display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 999px 999px 32px 32px; box-shadow: 0 30px 60px -30px rgba(51, 34, 43, .45); animation: ahero-in .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ahero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Routine (Aura only) */
.aritual__list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78%, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; counter-reset: step; }
.aritual__list::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .aritual__list { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: visible; } }
.aritual__step { scroll-snap-align: start; display: grid; align-content: start; gap: 10px; padding: 26px 22px 22px; border-radius: var(--radius); background: var(--c-surface); position: relative; }
.aritual__num { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--c-bg); color: var(--c-primary); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; }
.aritual__title { margin: 6px 0 0; font-family: var(--font-heading); font-size: 1.625rem; font-weight: 500; }
.aritual__text { margin: 0; opacity: .78; line-height: 1.55; }
.aritual__product { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 10px; padding: 10px; border-radius: calc(var(--radius) - 6px); background: var(--c-bg); color: inherit; text-decoration: none; transition: transform .2s ease; }
.aritual__product:hover { transform: translateY(-2px); }
.aritual__thumb { display: block; border-radius: 14px; overflow: hidden; background: var(--c-surface); }
.aritual__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.aritual__info { display: grid; gap: 2px; min-width: 0; }
.aritual__name { font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aritual__price { font-size: .875rem; }

/* Key ingredients (Aura only) */
.aingr__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
@media (min-width: 900px) { .aingr__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aingr__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aingr__item { display: grid; justify-items: center; text-align: center; gap: 10px; }
.aingr__media { display: block; width: min(100%, 168px); border-radius: 50%; overflow: hidden; background: var(--c-surface); box-shadow: 0 0 0 8px var(--c-bg), 0 0 0 9px color-mix(in srgb, var(--c-accent) 55%, transparent); }
.aingr__img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.aingr__item:hover .aingr__img { transform: scale(1.05); }
.aingr__name { margin: 8px 0 0; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; }
.aingr__text { margin: 0; max-width: 16rem; opacity: .75; font-size: .9375rem; line-height: 1.5; }

/* Product cards: soft rounded photos on the surface colour */
.card__media { border-radius: var(--radius); background: var(--c-surface); }
.card:hover .card__img:not(.card__img--alt) { transform: scale(1.04); }
.card__img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.card__title { font-weight: 600; font-size: .9375rem; }
.tag { border-radius: 999px; }
.grid--products { row-gap: 32px; }

/* Categories: round with a rose-gold ring on hover */
.cat__media { box-shadow: 0 0 0 4px var(--c-bg); }
.cat:hover .cat__media { border-color: var(--c-accent); }
.cat__name { font-weight: 600; }

/* Story, reviews, trust */
.split__media { border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; }
.split__text .sec-title { font-style: italic; }
.review { border: 0; background: var(--c-surface); }
.trust { background: var(--c-surface); border-top: 0; }
.trust__icon { background: var(--c-bg); color: var(--c-primary); }

/* Product page */
.pdp__title { font-weight: 500; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.05; }
.gallery__slide, .gallery__img { border-radius: var(--radius); }
.pill { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .ahero__img { animation: none; }
  .atabs { transition: none; }
  .btn, .aritual__product, .card__img, .aingr__img { transition: none; }
}

/* Phones: a smaller arch so the heading and the button show sooner */
@media (max-width: 899px) {
  .ahero__grid { padding-block: 20px 44px; gap: 22px; }
  .ahero__arch { width: min(74%, 320px, 34svh); } /* the heading and its button show on the first screen (AUDIT_2 D-19) */
  .ahero__title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
}
.aritual__num, .aingr__name { font-variant-numeric: lining-nums; }
@media (max-width: 767px) { .gallery__slide, .gallery__img { border-radius: 0; } }

/* ---------- Premium structure (Aura) ---------- */

/* Floating header: a soft rounded bar that hovers over the page */
@media (min-width: 900px) {
  .hdr--sticky { top: 12px; }
  .hdr { margin: 12px auto 0; width: min(1240px, calc(100% - 32px)); border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); border-radius: 999px; box-shadow: 0 10px 30px -18px rgba(51, 34, 43, .35); }
  .hdr__in { padding-inline: 20px; }
}
.hdr { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.hdr-away .hdr--sticky { transform: translateY(calc(-100% - 16px)); }

/* App-like tab bar at the bottom of phones */
.atabs { display: none; }
@media (max-width: 899px) {
  .atabs { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 22px; background: color-mix(in srgb, var(--c-bg) 90%, transparent); backdrop-filter: saturate(1.5) blur(14px); box-shadow: 0 12px 34px -14px rgba(51, 34, 43, .45); border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
  .atabs__item { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 0; border: 0; border-radius: 16px; background: none; color: var(--c-text); font: inherit; font-size: .6875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
  .atabs__item .ic { width: 22px; height: 22px; }
  .atabs__item:active { background: var(--c-surface); }
  .atabs__badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-primary); color: var(--c-on-primary); font-size: .625rem; display: grid; place-items: center; }
  .atabs__dot { position: absolute; top: 8px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
  body { padding-bottom: 88px; }
  /* Pages with their own bottom bar or a form keep the screen to themselves */
  .tpl-product .atabs, .tpl-checkout .atabs, .tpl-cart .atabs { display: none; }
  .atabs { transition: transform .25s ease, opacity .25s ease; }
  .tpl-home .atabs:not(.is-shown) { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  .tpl-product, .tpl-checkout, .tpl-cart { padding-bottom: 0; }
  .hdr__account, .hdr .cart-btn { display: none; }
  .tpl-product .hdr .cart-btn, .tpl-checkout .hdr .cart-btn, .tpl-cart .hdr .cart-btn { display: inline-grid; }
}

/* Product card: round quick add */
.acard__link { display: block; height: 100%; }
.acard__quick { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); cursor: pointer; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c-primary) 80%, transparent); transition: transform .2s ease; }
.acard__quick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.acard__quick .ic { width: 20px; height: 20px; }
.acard__quick:hover { transform: scale(1.06); }

/* Product page: swatches, perks, accordion, "use it with" */
.apdp .pill { display: inline-flex; align-items: center; gap: 8px; }
.aswatch { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.aperks { list-style: none; margin: 4px 0 0; padding: 14px 16px; display: grid; gap: 8px; border-radius: 18px; background: var(--c-surface); font-size: .9375rem; }
.aperks li { display: flex; align-items: center; gap: 10px; }
.aperks .ic { width: 18px; height: 18px; color: var(--c-primary); flex: none; }
.aacc { margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.aacc__item { border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); }
.aacc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; }
.aacc__item summary::-webkit-details-marker { display: none; }
.aacc__item summary .ic { width: 18px; height: 18px; transition: transform .25s ease; flex: none; }
.aacc__item[open] summary .ic { transform: rotate(45deg); }
.aacc__item .rte { padding-bottom: 16px; opacity: .85; }
.apair { margin-top: 20px; padding: 18px; border-radius: var(--radius); background: var(--c-surface); }
.apair__title { margin: 0 0 12px; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; }
.apair__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.apair__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; background: var(--c-bg); }
.apair__img { display: block; border-radius: 12px; overflow: hidden; }
.apair__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.apair__info { display: grid; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.apair__name { font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apair__price { font-size: .8125rem; }
.apair__add { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); cursor: pointer; }

/* Collection: category pills */
.achips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px calc(-1 * var(--gutter, 16px)) 20px; padding: 2px var(--gutter, 16px); }
.achips::-webkit-scrollbar { display: none; }
.achips__item { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--c-surface); color: var(--c-text); font-weight: 600; font-size: .875rem; text-decoration: none; white-space: nowrap; }
.achips__item[aria-current="page"] { background: var(--c-primary); color: var(--c-on-primary); }
.collection { --gutter: 16px; }
@media (min-width: 768px) { .collection { --gutter: 24px; } .achips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; } }

/* Shared premium cart and quick add, with soft rounded shapes */
.pcart .drawer__panel { width: min(440px, 100vw); padding: 10px 18px 18px; border-radius: 24px 0 0 24px; }
.pcart .drawer__head h2 { font-family: var(--font-heading); font-weight: 600; font-size: 1.75rem; }
.pfree { margin: 4px 0 16px; padding: 14px 16px; border-radius: 18px; background: var(--c-surface); }
.pfree__label { margin: 0 0 10px; font-size: .875rem; font-weight: 600; }
.pfree__label small { font-weight: 400; opacity: .65; }
.pfree__bar { height: 8px; border-radius: 999px; background: var(--c-bg); overflow: hidden; }
.pfree__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-accent), var(--c-primary)); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.psugg { margin-top: 18px; }
.psugg__title { margin: 0 0 10px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; }
.psugg__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.psugg__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; background: var(--c-surface); }
.psugg__img { display: block; border-radius: 12px; overflow: hidden; }
.psugg__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.psugg__info { display: grid; gap: 2px; min-width: 0; }
.psugg__name { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psugg__price { font-size: .8125rem; }
.psugg__add { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); cursor: pointer; }
.pcart .total strong { font-size: 1.25rem; }
.pquick { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; }
@media (min-width: 900px) { .pquick { place-items: center; } }
.pquick__backdrop { position: absolute; inset: 0; background: rgb(51 34 43 / .45); }
.pquick__sheet { position: relative; width: 100%; max-width: 520px; margin-inline: auto; padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--c-bg); max-height: 85vh; overflow-y: auto; }
@media (min-width: 900px) { .pquick__sheet { border-radius: 28px; } }
.slide-from-bottom { transform: translateY(100%); }
@media (min-width: 900px) { .slide-from-bottom { transform: translateY(24px); opacity: 0; } }
.pquick__close { position: absolute; top: 10px; right: 10px; }
.pquick__loading { display: grid; place-items: center; min-height: 120px; margin: 0; }
.pquick__failed { display: grid; justify-items: center; gap: 12px; min-height: 120px; align-content: center; padding: 8px 8px 16px; text-align: center; }
.pquick__failed p { margin: 0; }
.pquick__body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.pquick__img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: var(--c-surface); }
.pquick__info { display: grid; gap: 10px; min-width: 0; padding-right: 32px; }
.pquick__name { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; line-height: 1.1; }
.pquick__price { margin: 0; font-weight: 600; color: var(--c-primary); }
.pquick__more { font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; color: inherit; min-height: 44px; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .hdr { transition: none; } .hdr-away .hdr--sticky { transform: none; } .pfree__bar span, .acard__quick { transition: none; } }
.pquick .pill { display: inline-flex; align-items: center; gap: 8px; }