/* ==========================================================================
   Arshan – Beauty & Skincare demo (Demo 20)  ·  body.bt-page  ·  prefix bt-
   Soft, editorial boutique. Re-skins components/kit.css through tokens
   (warm ivory, blush, rose beige, muted burgundy, botanical green) and adds
   beauty-only sections: arched hero collage, circular categories, product
   tabs, philosophy seal, ingredients, shade preview, collections and the
   newsletter card. Cormorant Garamond headings, Jost UI.
   ========================================================================== */
body.bt-page {
  --ak-bg: #fcf8f5;
  --ak-surface: #ffffff;
  --ak-surface-2: #f7ede8;
  --ak-surface-3: #f0e0d9;
  --ak-ink: #2f1f22;
  --ak-text: #5a4646;
  --ak-muted: #8d7774;
  --ak-line: #eedfd8;
  --ak-accent: #6e2b38;
  --ak-accent-hover: #55202b;
  --ak-accent-ink: #ffffff;
  --ak-accent-soft: #f6e5e4;
  --ak-accent-2: #a2594d;
  --ak-dark: #2c1b1f;
  --ak-dark-2: #3a252a;
  --ak-dark-ink: #f1e4df;
  --ak-dark-muted: #c2aaa5;
  --ak-success: #5f7553;
  --ak-success-soft: #e8efe2;
  --ak-star: #c08a5b;
  --ak-font-head: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --ak-font-body: "Jost", system-ui, -apple-system, sans-serif;
  --ak-head-weight: 500;
  --ak-radius-sm: 10px;
  --ak-radius: 14px;
  --ak-radius-lg: 20px;
  --ak-radius-media: 18px;
  --ak-btn-radius: 999px;
  --ak-btn-h: 50px;
  --ak-section: 112px;
  --ak-shadow: 0 24px 50px -30px rgba(110, 43, 56, .3);
  --ak-shadow-lg: 0 40px 80px -40px rgba(110, 43, 56, .4);
  --ak-card-ratio: 4 / 5;
  font-size: 16px;
  font-weight: 400;
}
.bt-page .ak-title { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.06; }
.bt-page .ak-eyebrow { color: var(--ak-accent-2); font-weight: 400; letter-spacing: .22em; font-size: 12px; }
.bt-page .ak-eyebrow::before { display: none; }
.bt-page .ak-lead { font-size: 17px; font-weight: 300; }
.bt-page .ak-btn { font-weight: 400; letter-spacing: .04em; padding-inline: 30px; }
.bt-page .ak-btn--dark { --b-bg: var(--ak-accent); }
.bt-page .ak-btn--dark:hover { --b-bg: var(--ak-accent-hover); }
.bt-page .ak-btn--outline:hover { --b-bg: var(--ak-accent); --b-bd: var(--ak-accent); }
.bt-page .ak-pcard__name { font-size: 21px; font-weight: 500; }
.bt-page .ak-pcard__media { background: linear-gradient(180deg, #f7eee9, #f1e3dc); }
.bt-page .ak-price { font-weight: 400; }
.bt-page .ak-price--lg { font-family: var(--ak-font-body); font-weight: 300; font-size: 30px; }
.bt-page .ak-ico { background: var(--ak-surface-2); color: var(--ak-accent); border-radius: 50%; }
.bt-page .ak-chip.is-active, .bt-page .ak-chip[aria-pressed="true"] { background: var(--ak-accent); border-color: var(--ak-accent); }
.bt-page .ak-choice input:checked + .ak-choice__ui { background: var(--ak-accent); border-color: var(--ak-accent); }
.bt-page .ak-choice--dot input:checked + .ak-choice__ui, .bt-page .ak-choice--swatch input:checked + .ak-choice__ui { background: var(--ak-surface); color: var(--ak-ink); box-shadow: 0 0 0 1px var(--ak-accent); }
.bt-page .ak-fopt input:checked + .ak-fopt__box { background: var(--ak-accent); border-color: var(--ak-accent); }
.bt-page .ak-account__nav [role="tab"][aria-selected="true"] { background: var(--ak-accent); }
.bt-page .ak-pager button[aria-current] { background: var(--ak-accent); border-color: var(--ak-accent); }
.bt-page .ak-viewtoggle a[aria-current] { background: var(--ak-accent); }
.bt-page .ak-count { background: var(--ak-accent); }
.bt-page .ak-topbar { background: var(--ak-accent); color: #f6e5e4; }
.bt-page .ak-topbar p { font-size: 13px; letter-spacing: .03em; }
.bt-page .ak-topbar a:hover { color: #fff; }
.bt-page .site-header { background: color-mix(in srgb, var(--ak-bg) 92%, transparent); }
.bt-logo .ak-logo__text strong { font-family: var(--ak-font-head); font-size: 28px; font-weight: 600; letter-spacing: .24em; }
.bt-logo .ak-logo__text small { letter-spacing: .3em; font-size: 9.5px; }
.bt-page .nav__link { font-weight: 400; letter-spacing: .02em; }
.bt-page .ak-phero { background: linear-gradient(180deg, var(--ak-surface-2), var(--ak-bg)); }
.bt-page .ak-footer { background: var(--ak-dark); }
.bt-page .ak-footer .ak-logo { color: #fff; }
.bt-page .ak-footer .ak-news .ak-btn--alt { --b-bg: #c78b7f; }
.bt-pay { gap: 10px !important; }
.bt-pay li { padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: 12px; }
.bt-page .ak-banner:not(.ak-banner--light) .ak-eyebrow { color: rgba(255, 255, 255, .85); }
.bt-page .ak-qv__media { background: linear-gradient(180deg, #f7eee9, #f1e3dc); }
.bt-page .ak-tl.is-done .ak-tl__dot, .bt-page .ak-hstep.is-done i { background: var(--ak-accent); border-color: var(--ak-accent); }

/* Hero (arched collage) ------------------------------------------------- */
.bt-hero { position: relative; padding: 40px 0 72px; overflow: hidden; background: radial-gradient(900px 520px at 80% 20%, #f7e3dc, transparent 70%), radial-gradient(600px 400px at 0% 100%, #f3ebe0, transparent 70%); }
.bt-hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.bt-hero__title { font-family: var(--ak-font-head); font-weight: 500; font-size: clamp(48px, 6vw, 92px); line-height: .98; color: var(--ak-ink); }
.bt-hero__title em, .bt-page h1 em { font-style: italic; color: var(--ak-accent-2); font-weight: 400; }
.bt-hero__copy > p { max-width: 44ch; margin: 24px 0 34px; font-size: 18px; font-weight: 300; color: var(--ak-text); }
.bt-hero__copy > * { animation: ar-fade-up 900ms var(--ar-ease-out) both; }
.bt-hero__copy > :nth-child(2) { animation-delay: 80ms; } .bt-hero__copy > :nth-child(3) { animation-delay: 160ms; } .bt-hero__copy > :nth-child(4) { animation-delay: 240ms; } .bt-hero__copy > :nth-child(5) { animation-delay: 320ms; }
.bt-hero__notes { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-size: 14px; color: var(--ak-muted); }
.bt-hero__notes li { display: inline-flex; align-items: center; gap: 8px; }
.bt-hero__notes .icon { width: 18px; height: 18px; color: var(--ak-success); }
.bt-hero__media { position: relative; min-height: 600px; }
.bt-hero__main { position: absolute; right: 0; top: 0; width: 82%; height: 100%; overflow: hidden; border-radius: 300px 300px var(--ak-radius-media) var(--ak-radius-media); box-shadow: var(--ak-shadow-lg); }
.bt-hero__main img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: bt-zoom 14s var(--ar-ease-out) both; }
@keyframes bt-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.bt-hero__small { position: absolute; left: 0; top: 14%; width: 30%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 8px solid var(--ak-bg); box-shadow: var(--ak-shadow); }
.bt-hero__small img { width: 100%; height: 100%; object-fit: cover; }
.bt-hero__card { position: absolute; left: 2%; bottom: 8%; display: flex; gap: 14px; align-items: center; padding: 12px 20px 12px 12px; border-radius: var(--ak-radius-lg); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: var(--ak-shadow-lg); transition: transform var(--ar-transition-slow); }
.bt-hero__card:hover { transform: translateY(-4px); }
.bt-hero__card-img { width: 72px; height: 84px; overflow: hidden; border-radius: 12px; flex-shrink: 0; }
.bt-hero__card-img img { width: 100%; height: 100%; object-fit: cover; }
.bt-hero__card small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ak-accent-2); }
.bt-hero__card strong { display: block; font-family: var(--ak-font-head); font-size: 20px; font-weight: 500; color: var(--ak-ink); }
.bt-hero__card em { font-style: normal; color: var(--ak-accent); font-weight: 500; }
.bt-hero__card .ak-rating { font-size: 12px; }
.bt-hero__card .ak-stars .icon { width: 12px; height: 12px; fill: var(--ak-star); stroke: none; }
.bt-benefits { border-color: var(--ak-line); }
.bt-benefits .icon { color: var(--ak-accent-2); }

/* Categories, tabs ----------------------------------------------------- */
.bt-cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; }
.bt-cat { display: grid; justify-items: center; gap: 6px; text-align: center; }
.bt-cat__img { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; margin-bottom: 10px; background: var(--ak-surface-2); box-shadow: 0 0 0 1px var(--ak-line); transition: box-shadow var(--ar-transition-base), transform var(--ar-transition-slow); }
.bt-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ar-ease-out); }
.bt-cat:hover .bt-cat__img { box-shadow: 0 0 0 2px var(--ak-accent-2), 0 0 0 7px var(--ak-bg), 0 0 0 8px var(--ak-line); }
.bt-cat:hover .bt-cat__img img { transform: scale(1.07); }
.bt-cat strong { font-family: var(--ak-font-head); font-size: 21px; font-weight: 500; color: var(--ak-ink); }
.bt-cat small { font-size: 13px; color: var(--ak-muted); }
.bt-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--ak-surface); border: 1px solid var(--ak-line); flex-wrap: wrap; }
.bt-tabs [role="tab"] { padding: 9px 20px; border-radius: 999px; font-size: 14.5px; color: var(--ak-text); }
.bt-tabs [role="tab"][aria-selected="true"] { background: var(--ak-accent); color: #fff; }
.bt-banner { min-height: 500px; }
.bt-banner h2 { font-size: clamp(40px, 4.6vw, 64px); }

/* Why, philosophy, ingredients ----------------------------------------- */
.bt-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.bt-why > * { padding: 40px 26px; border-radius: var(--ak-radius-lg); background: var(--ak-surface); border: 1px solid var(--ak-line); transition: transform var(--ar-dur-slow) var(--ar-ease-out), box-shadow var(--ar-dur-slow) var(--ar-ease-out); }
.bt-why > *:hover { transform: translateY(-4px); box-shadow: var(--ak-shadow); }
.bt-why h3 { font-size: 24px; }
.bt-arch { border-radius: 400px 400px var(--ak-radius-media) var(--ak-radius-media) !important; }
.bt-philo__media { position: relative; }
.bt-philo__media .ak-media { aspect-ratio: 4 / 5; max-width: 480px; }
.bt-philo__seal { position: absolute; right: 4%; bottom: 10%; width: 140px; height: 140px; border-radius: 50%; background: var(--ak-accent); color: #f6e5e4; display: grid; place-items: center; box-shadow: var(--ak-shadow-lg); }
.bt-philo__seal svg { width: 120px; height: 120px; fill: currentColor; animation: bt-spin 26s linear infinite; font-family: var(--ak-font-body); }
@keyframes bt-spin { to { transform: rotate(360deg); } }
.bt-quote { margin: 0 0 28px; padding-left: 22px; border-left: 2px solid var(--ak-accent-2); font-family: var(--ak-font-head); font-size: 26px; font-style: italic; line-height: 1.35; color: var(--ak-ink); }
.bt-quote cite { display: block; margin-top: 10px; font-family: var(--ak-font-body); font-size: 13px; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-muted); }
.bt-routine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bt-routine li { display: grid; gap: 2px; padding: 16px; border-radius: var(--ak-radius); background: var(--ak-surface); border: 1px solid var(--ak-line); text-align: center; }
.bt-routine span { font-family: var(--ak-font-head); font-size: 22px; color: var(--ak-accent-2); }
.bt-routine strong { font-weight: 400; font-size: 14px; color: var(--ak-ink); }
.bt-ingr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.bt-ing { display: grid; gap: 8px; text-align: center; }
.bt-ing__img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 200px 200px 14px 14px; background: var(--ak-surface-2); }
.bt-ing__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ar-ease-out); }
.bt-ing:hover .bt-ing__img img { transform: scale(1.06); }
.bt-ing h3 { font-size: 22px; margin-top: 8px; }
.bt-ing p { font-size: 14px; color: var(--ak-muted); }

/* Shade preview ------------------------------------------------------- */
.bt-shades { display: flex; flex-wrap: wrap; gap: 10px; }
.bt-shade { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--ak-line); border-radius: 999px; background: var(--ak-surface); font-size: 14.5px; color: var(--ak-text); transition: all var(--ar-transition-base); }
.bt-shade span { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.bt-shade:hover { border-color: var(--ak-accent-2); }
.bt-shade[aria-pressed="true"] { border-color: var(--ak-accent); box-shadow: 0 0 0 1px var(--ak-accent); color: var(--ak-ink); }
.bt-shade-name { margin-top: 16px; color: var(--ak-muted); }
.bt-shade-name strong { color: var(--ak-ink); font-weight: 500; }
.bt-shade-art { overflow: hidden; border-radius: 400px 400px var(--ak-radius-media) var(--ak-radius-media); aspect-ratio: 4 / 5; max-width: 480px; margin-inline: auto; box-shadow: var(--ak-shadow); }
.bt-shade-art svg { width: 100%; height: 100%; animation: ar-fade-in var(--ar-dur-slow) var(--ar-ease-out); }

/* Collections, about, newsletter -------------------------------------- */
.bt-colls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.bt-coll { display: grid; gap: 8px; text-align: center; }
.bt-coll .ak-media { aspect-ratio: 4 / 5; margin-bottom: 10px; }
.bt-coll .ak-media img { transition: transform 1s var(--ar-ease-out); }
.bt-coll:hover .ak-media img { transform: scale(1.05); }
.bt-coll strong { font-family: var(--ak-font-head); font-size: 26px; font-weight: 500; color: var(--ak-ink); }
.bt-coll small { font-size: 14.5px; color: var(--ak-muted); max-width: 34ch; margin-inline: auto; }
.bt-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bt-about__img { aspect-ratio: 5 / 4; }
.bt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 26px; border-top: 1px solid var(--ak-line); }
.bt-stats strong { display: block; font-family: var(--ak-font-head); font-size: 42px; font-weight: 500; color: var(--ak-accent); line-height: 1; }
.bt-stats span { display: block; margin-top: 8px; font-size: 13px; color: var(--ak-muted); }
.bt-stats--row { border: 0; padding: 0; text-align: center; }
.bt-stats--row strong { font-size: clamp(42px, 4vw, 58px); }
.bt-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--ak-radius-lg); background: var(--ak-surface-2); }
.bt-news__img { min-height: 420px; }
.bt-news__img img { width: 100%; height: 100%; object-fit: cover; }
.bt-news__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 72px); }
.bt-news__body h2 { font-size: clamp(34px, 3.6vw, 50px); }
.bt-news__body > p { margin: 14px 0 26px; color: var(--ak-text); }
.bt-news .ak-news input { background: #fff; }
.bt-news .ak-news .ak-btn--alt { --b-bg: var(--ak-accent); }
.bt-news .ak-footer__newsmsg { color: var(--ak-success); }
.bt-about-hero { padding-block: 56px 96px; background: radial-gradient(700px 400px at 90% 10%, #f7e3dc, transparent 70%); }
.bt-about-hero__img { aspect-ratio: 4 / 4.6; max-width: 520px; margin-left: auto; }
.bt-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.bt-member { display: grid; justify-items: center; gap: 6px; padding: 36px 20px; background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-radius-lg); text-align: center; }
.bt-member__mono { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 12px; border-radius: 50%; background: linear-gradient(135deg, #f3dcd6, #e8c8c0); font-family: var(--ak-font-head); font-size: 32px; color: var(--ak-accent); }
.bt-member h3 { font-size: 24px; }
.bt-member p { font-size: 14px; color: var(--ak-muted); }

/* Shop / category / misc ---------------------------------------------- */
.bt-cat-hero { padding-block: 110px 90px; }
.bt-cat-hero::after { background: linear-gradient(90deg, rgba(44, 27, 31, .72), rgba(44, 27, 31, .2)); }
.bt-subcats { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.bt-subcat { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 18px; border: 1px solid var(--ak-line); border-radius: 999px; font-size: 14px; color: var(--ak-text); background: var(--ak-surface); transition: all var(--ar-transition-base); }
.bt-subcat .icon { width: 18px; height: 18px; color: var(--ak-accent-2); }
.bt-subcat:hover, .bt-subcat[aria-current] { background: var(--ak-accent); color: #fff; border-color: var(--ak-accent); }
.bt-subcat[aria-current] .icon, .bt-subcat:hover .icon { color: #fff; }
.bt-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bt-cat-tile { aspect-ratio: 4 / 3.6; border-radius: var(--ak-radius-media); }
.bt-cat-tile h2 { color: #fff; }
.bt-coll__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.bt-coll__head.is-rev > :first-child { order: 2; }
.bt-coll__img { aspect-ratio: 16 / 10; }
.bt-track__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.bt-track__row .ak-btn { min-height: 52px; }
.bt-results-form .ak-shop-search input { background: #fff; }
.bt-contact-list { display: grid; gap: 28px; }
.bt-contact-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.bt-contact-item h2 { font-size: 24px; margin-bottom: 4px; }
.bt-contact-item p, .bt-contact-item a { color: var(--ak-muted); }
.bt-contact-soc a { color: var(--ak-accent); border-color: var(--ak-line); }
.bt-contact-soc a:hover { color: #fff; }
.bt-map { min-height: 360px; }
.bt-page .ak-widget h3 { font-size: 21px; margin-bottom: 12px; }
.bt-page .ak-tabs__panel .ak-widget { background: var(--ak-surface-2); }

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .bt-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bt-ingr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  body.bt-page { --ak-section: 88px; }
  .bt-hero__grid { grid-template-columns: 1fr; }
  .bt-hero__media { min-height: 520px; }
  .bt-why, .bt-team { grid-template-columns: 1fr 1fr; }
  .bt-colls { grid-template-columns: 1fr 1fr; }
  .bt-about, .bt-news { grid-template-columns: 1fr; }
  .bt-news__img { min-height: 280px; }
  .bt-coll__head, .bt-coll__head.is-rev { grid-template-columns: 1fr; }
  .bt-coll__head.is-rev > :first-child { order: 0; }
  .bt-cat-grid { grid-template-columns: 1fr 1fr; }
  .bt-track__row { grid-template-columns: 1fr; }
  .bt-about-hero__img { margin: 0 auto; }
}
@media (max-width: 767px) {
  body.bt-page { --ak-section: 72px; }
  .bt-hero { padding-top: 20px; }
  .bt-hero__title { font-size: clamp(44px, 12vw, 60px); }
  .bt-hero__media { min-height: 430px; }
  .bt-hero__main { width: 88%; }
  .bt-hero__card { left: 0; bottom: 4%; padding-right: 14px; }
  .bt-hero__card-img { width: 56px; height: 64px; }
  .bt-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
  .bt-cat strong { font-size: 18px; }
  .bt-ingr { grid-template-columns: 1fr 1fr; }
  .bt-routine { grid-template-columns: 1fr 1fr; }
  .bt-stats { grid-template-columns: 1fr 1fr; gap: 24px; }
  .bt-page .ak-pcard__name { font-size: 18px; }
  .bt-philo__seal { width: 110px; height: 110px; right: 0; }
  .bt-philo__seal svg { width: 94px; height: 94px; }
  .bt-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .bt-tabs [role="tab"] { flex-shrink: 0; }
}
@media (max-width: 575px) {
  .bt-why, .bt-team, .bt-colls, .bt-cat-grid { grid-template-columns: 1fr; }
  .bt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-philo__seal svg, .bt-hero__main img, .bt-hero__copy > * { animation: none; }
}
.bt-banner::before { background: linear-gradient(90deg, rgba(252, 248, 245, .95) 0%, rgba(252, 248, 245, .8) 42%, rgba(252, 248, 245, 0) 75%); }
.bt-hero__card em { display: block; margin-top: 2px; }
@media (max-width: 767px) { .bt-banner::before { background: linear-gradient(180deg, rgba(252, 248, 245, 0) 5%, rgba(252, 248, 245, .94) 60%); } }