/* ==========================================================================
   Aurora Nails Lab - Set page
   Loaded only on set.html. The palette is driven by CSS variables so every set
   can carry its own colour world (set.js applies set.theme to the root). The
   defaults below are the warm "sunset" theme; a set with no theme uses them.
   Fraunces is the display serif.
   ========================================================================== */

.setpage {
  --sink: #3a2418;        /* dark: headings, buttons, dark section, selected pill */
  --sacc: #b56a35;        /* primary accent: links, eyebrows, scroll cue */
  --sacc2: #a86a38;       /* muted accent: small labels, maker name */
  --sglow: #d98a4e;       /* bright accent: stars, spec rule, dark-section accent */
  --snum: #e5c19a;        /* pale big feature numbers */
  --shero: linear-gradient(160deg,#fdf1e6 0%,#fbe4d3 46%,#f7d3b8 100%);
  --sblob: rgba(213,138,78,.22);
  --scream: #fdf1e6;      /* buy module bg, step circle bg */
  --scream2: #faf3ee;     /* features bg, reviews bg */
  --sphoto: #f4ddc7;      /* image placeholder bg */
  --sbody: #6b5240;       /* body text */
  --sbody2: #7a5238;      /* hero blurb text */
  --smuted: #8a6a52;      /* buy "made" text, related price */
  --smuted2: #b8977e;     /* related category */
  --sborder: #e2c9b2;     /* borders / hairlines */
  --sborder2: #ecd9c6;    /* softer hairlines */
  --sdarktext: #f3e2d1;   /* text on dark section */
  --sdarksub: #c8ad97;    /* muted text on dark section */
  --sdarkborder: rgba(215,150,100,.22);
}
.setpage a:hover { color: var(--sacc); }
.ff { font-family: 'Fraunces', serif; }

@keyframes set-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }
@keyframes set-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hero ---------- */
.set-hero { position: relative; overflow: hidden; background: var(--shero); }
.set-hero__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.set-hero__blob--1 { top: -140px; right: 8%; width: 300px; height: 300px; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.75), rgba(255,255,255,0)); }
.set-hero__blob--2 { bottom: -160px; left: -60px; width: 360px; height: 360px; background: radial-gradient(circle at 40% 40%, var(--sblob), transparent); }
.set-hero__grid {
  position: relative; max-width: 1240px; margin: 0 auto; padding: 70px 24px 84px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.set-hero__copy { display: flex; flex-direction: column; align-items: flex-start; animation: set-rise .7s ease both; }
.set-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--sacc2); margin-bottom: 22px; }
.set-eyebrow__rule { width: 26px; height: 1px; background: var(--sacc); display: inline-block; }
.set-tagline { font-family: 'Fraunces', serif; font-size: 15px; font-style: italic; color: var(--sacc); margin-bottom: 8px; }
.set-hero__name { font-family: 'Fraunces', serif; font-size: 76px; font-weight: 500; letter-spacing: -.02em; line-height: .98; margin: 0 0 22px; color: var(--sink); }
.set-hero__blurb { font-size: 16px; line-height: 1.8; color: var(--sbody2); max-width: 440px; margin: 0 0 30px; }
.set-palette { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.set-palette__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sacc2); margin-right: 4px; }
.set-swatch { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(60,50,40,.18); }
.set-hero__cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.set-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--sink); color: #fff; padding: 16px 40px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; transition: gap .25s ease; border: none; cursor: pointer; font-family: inherit; }
.set-btn:hover { gap: 20px; color: #fff; }
.set-hero__rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sacc2); }
.set-stars { color: var(--sglow); letter-spacing: .06em; }
.set-hero__art { position: relative; }
.set-hero__img { position: relative; width: 100%; aspect-ratio: 4/5; background: var(--sphoto); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(40,45,42,.5); }
.set-hero__inset { position: absolute; bottom: -26px; left: -26px; width: 150px; height: 150px; background: #fff; padding: 10px; box-shadow: 0 18px 44px -18px rgba(40,45,42,.5); animation: float-slow 6s ease-in-out infinite; }
.set-hero__inset > div { position: relative; width: 100%; height: 100%; background: var(--sphoto); overflow: hidden; }
.set-hero__badge { position: absolute; top: 18px; right: 18px; width: 78px; height: 78px; border-radius: 50%; background: var(--sink); color: var(--sdarktext); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: float-slow 7s ease-in-out infinite; }
.set-hero__badge b { font-family: 'Fraunces', serif; font-size: 19px; line-height: 1; font-weight: 500; }
.set-hero__badge span { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; opacity: .8; }
.set-scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--sacc); }
.set-scroll-cue span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.set-scroll-cue svg { animation: scroll-cue 1.8s ease-in-out infinite; }

/* ---------- Marquee ---------- */
.set-marquee { background: var(--sink); color: var(--sdarktext); overflow: hidden; white-space: nowrap; padding: 14px 0; }
.set-marquee__track { display: inline-flex; gap: 44px; font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; letter-spacing: .02em; padding-left: 44px; animation: set-marquee 26s linear infinite; }
.set-marquee__item { display: inline-flex; align-items: center; gap: 44px; }
.set-marquee__star { color: var(--sglow); }

/* ---------- Shared section bits ---------- */
.set-eyebrow2 { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--sacc); margin-bottom: 14px; }
.set-sec-title { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -.01em; color: var(--sink); margin: 0; }
.set-center { text-align: center; margin-bottom: 44px; }

/* ---------- Story ---------- */
.set-story { max-width: 1240px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.set-story__img { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--sphoto); overflow: hidden; }
.set-story__title { font-size: 40px; line-height: 1.1; margin: 0 0 22px; }
.set-story p { font-size: 15.5px; line-height: 1.85; color: var(--sbody); margin: 0 0 18px; }
.set-story__maker { display: flex; align-items: center; gap: 14px; padding-top: 26px; border-top: 1px solid var(--sborder2); margin-top: 12px; }
.set-story__av { width: 52px; height: 52px; border-radius: 50%; background: var(--sphoto); overflow: hidden; flex-shrink: 0; position: relative; }
.set-story__quote { font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; color: var(--sink); }
.set-story__maker-name { font-size: 12px; letter-spacing: .06em; color: var(--sacc2); margin-top: 3px; }

/* ---------- Feature strips ---------- */
.set-features { background: var(--scream2); }
.set-features__wrap { max-width: 1240px; margin: 0 auto; padding: 20px 24px; }
.set-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 60px 0; border-bottom: 1px solid var(--sborder2); }
.set-features__wrap .set-feature:last-child { border-bottom: none; }
.set-feature__img { position: relative; width: 100%; aspect-ratio: 16/11; background: var(--sphoto); overflow: hidden; }
.set-feature--right .set-feature__img { order: 2; }
.set-feature__num { font-family: 'Fraunces', serif; font-size: 46px; color: var(--snum); line-height: 1; margin-bottom: 14px; }
.set-feature__title { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--sink); margin: 0 0 14px; letter-spacing: -.01em; }
.set-feature p { font-size: 15px; line-height: 1.8; color: var(--sbody); margin: 0; max-width: 420px; }

/* ---------- Gallery ---------- */

/* ---------- Buy module ---------- */
.set-buy { max-width: 1240px; margin: 0 auto; padding: 96px 24px; }
.set-buy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; background: var(--scream); padding: 56px; }
.set-buy__img { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--sphoto); overflow: hidden; }
.set-buy__name { font-family: 'Fraunces', serif; font-size: 40px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 8px; color: var(--sink); }
.set-buy__price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.set-buy__price { font-size: 22px; color: var(--sink); }
.set-buy__made { font-size: 13px; color: var(--sacc2); }
.set-field-label { font-size: 13px; color: var(--smuted); margin-bottom: 10px; }
.set-pills { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.set-pill { min-width: 52px; height: 46px; padding: 0 14px; cursor: pointer; font-family: inherit; font-size: 14px; transition: all .2s ease; border: 1px solid var(--sborder); background: #fff; color: var(--sbody); }
.set-pill.is-selected { border: 1.5px solid var(--sink); background: var(--sink); color: #fff; }
.set-qty { display: inline-flex; align-items: center; border: 1px solid var(--sborder); background: #fff; margin-bottom: 26px; }
.set-qty button { background: none; border: none; width: 42px; height: 46px; cursor: pointer; color: var(--sink); display: flex; align-items: center; justify-content: center; transition: color .2s ease; }
.set-qty button:hover { color: var(--sacc); }
.set-qty span { min-width: 46px; text-align: center; font-size: 15px; }
.set-atc { width: 100%; border: none; padding: 17px; cursor: pointer; font-family: inherit; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; transition: background .25s ease; color: #fff; background: var(--sink); }
.set-atc.is-added { background: #6f9a6a; }
.set-assurances { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; }
.set-assurance { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--sbody); }
.set-assurance svg { stroke: var(--sacc); flex-shrink: 0; }

/* ---------- Included + specs (dark) ---------- */
.set-included { background: var(--sink); color: var(--sdarktext); }
.set-included__grid { max-width: 1240px; margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.set-eyebrow--gold { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--sglow); margin-bottom: 14px; }
.set-included__h { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 500; margin: 0 0 26px; color: #fff; }
.set-incl-list { display: flex; flex-direction: column; gap: 16px; }
.set-incl-item { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--sdarkborder); }
.set-incl-item__n { font-family: 'Fraunces', serif; font-size: 18px; color: var(--sglow); flex-shrink: 0; width: 26px; }
.set-incl-item__title { font-size: 15px; color: #fff; margin-bottom: 2px; }
.set-incl-item__desc { font-size: 13px; line-height: 1.6; color: var(--sdarksub); }
.set-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.set-spec { border-left: 2px solid var(--sglow); padding-left: 14px; }
.set-spec__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sdarksub); margin-bottom: 5px; }
.set-spec__value { font-size: 15px; color: #fff; }

/* ---------- How to size ---------- */
.set-size-sec { max-width: 1000px; margin: 0 auto; padding: 90px 24px 30px; }
.set-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.set-step { text-align: center; }
.set-step__n { width: 46px; height: 46px; border-radius: 50%; background: var(--scream); border: 1px solid var(--sborder); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: 'Fraunces', serif; font-size: 18px; color: var(--sacc); }
.set-step p { font-size: 13.5px; line-height: 1.7; color: var(--sbody); margin: 0; }

/* ---------- Reviews ---------- */
.set-reviews { background: var(--scream2); }
.set-reviews__wrap { max-width: 1240px; margin: 0 auto; padding: 90px 24px; }
.set-reviews__head { text-align: center; margin-bottom: 48px; }
.set-reviews__rating { font-family: 'Fraunces', serif; font-size: 52px; color: var(--sglow); line-height: 1; }
.set-reviews__stars { color: var(--sglow); letter-spacing: .1em; font-size: 16px; margin: 8px 0; }
.set-reviews__count { font-size: 13px; letter-spacing: .06em; color: var(--sacc2); }
.set-reviews__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.set-review { background: #fff; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.set-review__stars { color: var(--sglow); letter-spacing: .1em; font-size: 13px; }
.set-review__quote { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--sink); margin: 0; }
.set-review__body { font-size: 13px; line-height: 1.7; color: var(--sbody); margin: 0; }
.set-review__name { margin-top: auto; padding-top: 12px; font-size: 12.5px; letter-spacing: .04em; color: var(--sacc2); }

/* ---------- Pair it with ---------- */
.set-pair { max-width: 1240px; margin: 0 auto; padding: 90px 24px; }
.set-pair__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.set-link { font-size: 12.5px; letter-spacing: .06em; color: var(--sacc2); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.set-link:hover { color: var(--sacc); }
.set-rel { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px 20px; }
.set-rel__media { position: relative; width: 100%; aspect-ratio: 4/5; background: var(--sphoto); overflow: hidden; }
.set-rel__body { padding: 14px 2px 0; }
.set-rel__cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--smuted2); }
.set-rel__name { font-size: 15px; color: var(--sink); margin-top: 5px; }
.set-rel__price { font-size: 13.5px; color: var(--smuted); margin-top: 3px; }

/* The sticky add-to-cart bar is the shared .buybar widget (buybar.js + styles.css). */

/* ---------- Reveal on scroll ---------- */
@supports (animation-timeline: view()) {
  .reveal { opacity: 0; animation: set-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
}

/* ---------- Image slots that carry a real photo ---------- */
.image-slot { background-size: cover; background-position: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .set-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .set-hero__copy { align-items: center; }
  .set-hero__art { order: -1; }
  .set-story { grid-template-columns: 1fr; }
  .set-feature { grid-template-columns: 1fr; }
  .set-feature--right .set-feature__img { order: -1; }
  .set-feature__img { order: -1; }
  .set-buy__grid { grid-template-columns: 1fr; }
  .set-included__grid { grid-template-columns: 1fr; }
  .set-rel { grid-template-columns: repeat(2,1fr); }
  .set-reviews__grid { grid-template-columns: 1fr 1fr; }
  .set-palette { justify-content: center; }
}
@media (max-width: 640px) {
  .set-hero__name { font-size: 52px; }
  .set-sec-title { font-size: 30px; }
  .set-story__title { font-size: 30px; }
  .set-steps { grid-template-columns: 1fr; }
  .set-buy__grid { padding: 32px; }
  .set-reviews__grid { grid-template-columns: 1fr; }
  .set-rel { grid-template-columns: 1fr 1fr; }
  .set-specs { grid-template-columns: 1fr; }
  /* The decorative hero blobs are sized for wide screens - on a phone they
     read as giant solid circles behind the content. The scroll cue also lands
     mid-page there instead of at the bottom of the viewport. Hide both. */
  .set-hero__blob, .set-scroll-cue { display: none; }
}