/* ============================================================
   Swarovski — New In  ·  plain version
   No animation anywhere: no transitions, no keyframes, no scroll
   effects. Colour and type read off swarovski.com (23 Sep 2026):
   black #1A1818, cream #F0EEE4, flag grey #757575. Their own face
   is Euclid Ignited (licensed); Outfit stands in for it.
   ============================================================ */

:root{
  --ink:#1A1818;
  --cream:#F0EEE4;
  --paper:#FAF9F5;
  --grey:#757575;
  --line:rgba(26,24,24,.16);
  --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html,body{margin:0;padding:0}
body{
  background:var(--cream);color:var(--ink);
  font-family:"Outfit",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.6;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.015em;margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* the SWAROVSKI wordmark, masked so it takes currentColor */
.wordmark{
  display:block;width:var(--wm,200px);aspect-ratio:704/96;background:currentColor;
  -webkit-mask:url("../img/elyne-villamor_swarovski_0003_swarovski-wordmark.svg") center/contain no-repeat;
          mask:url("../img/elyne-villamor_swarovski_0003_swarovski-wordmark.svg") center/contain no-repeat;
}

.eyebrow{
  margin:0 0 14px;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);
}
.fine{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--grey)}

/* ─────────────── buttons ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn--dark{background:var(--ink);color:var(--cream)}
.btn--dark:hover{background:#3a3636;border-color:#3a3636}
.btn--full{width:100%}

/* ─────────────── header ─────────────── */
.nav{
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:20px var(--gut);border-bottom:1px solid var(--line);
  background:var(--cream);
}
.nav__logo{--wm:clamp(122px,12vw,168px)}
.nav__links{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
.nav__links a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.nav__links a:hover{color:var(--ink)}
.nav__bag{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--ink);padding:9px 16px;
}
.nav__bag:hover{background:var(--ink);color:var(--cream)}

/* ─────────────── hero ─────────────── */
.hero{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(24px,5vw,72px);padding:clamp(40px,6vw,80px) var(--gut);
  border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.05}
.hero__sub{margin:20px 0 0;max-width:46ch;color:#4a4646}
.hero__price{margin:18px 0 0;font-size:18px;font-weight:400}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero__media{margin:0}
.hero__media img{width:100%;max-height:58vh;object-fit:contain;margin:0 auto;background:var(--cream)}
.hero__media figcaption{margin-top:10px;font-size:12px;color:var(--grey);text-align:center}

/* ─────────────── section furniture ─────────────── */
section{padding:clamp(44px,6vw,84px) var(--gut);border-bottom:1px solid var(--line)}
.hero{padding-top:clamp(36px,5vw,64px)}
.section-head{margin-bottom:clamp(24px,3vw,40px)}
.section-head h2{font-size:clamp(1.5rem,2.8vw,2.3rem)}
.section-head p{margin:8px 0 0;max-width:60ch;color:var(--grey)}

/* ─────────────── the trio ─────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.trio article{background:var(--cream);padding:clamp(14px,1.6vw,24px)}
.trio img{width:100%;aspect-ratio:1;object-fit:contain}
.trio h3{margin:14px 0 4px;font-size:16px;font-weight:500}
.trio p{margin:0;font-size:13px;color:var(--grey)}
.trio .price{margin-top:10px;font-size:15px;color:var(--ink)}

/* ─────────────── tools ─────────────── */
.tools{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center;margin-bottom:clamp(20px,2.4vw,32px);
}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  padding:9px 16px;border:1px solid var(--line);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.sortwrap{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);display:inline-flex;align-items:center;gap:8px}
.sortwrap select{
  font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);padding:8px 10px;cursor:pointer;
}

/* ─────────────── product grid ─────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--cream);padding:clamp(14px,1.4vw,20px);display:flex;flex-direction:column;position:relative}
.card:hover{background:var(--paper)}
.card__media{position:relative;aspect-ratio:1}
.card__media img{width:100%;height:100%;object-fit:contain}
.card__flag{position:absolute;top:0;left:0;z-index:2;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.card__name{margin:12px 0 0;font-size:14px;font-weight:500;line-height:1.35}
.card__sub{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--grey)}
.card__foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2}
.card__price{font-size:14px}
.card__add{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;border:1px solid var(--line)}
.card__add:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.card__link{position:absolute;inset:0;z-index:1}

/* ─────────────── promise ─────────────── */
.promise__list{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);
}
.promise__list li{background:var(--cream);padding:clamp(18px,2.2vw,30px)}
.promise__list h3{font-size:15px;font-weight:500;margin-bottom:8px}
.promise__list p{margin:0;font-size:13px;line-height:1.65;color:var(--grey)}

/* ─────────────── footer — Swarovski's own, rebuilt ─────────────── */
.foot{background:var(--cream)}
.foot section,.foot .fnav,.foot .fsocial,.foot .fbottom{border-bottom:1px solid var(--line)}

/* Swarovski Services */
.fsvcs{padding:clamp(34px,4vw,56px) var(--gut)}
.fsvcs h2{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px}
.fsvcs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.fsvc{background:var(--cream);padding:clamp(16px,2vw,26px);display:block}
.fsvc:hover{background:var(--paper)}
.fsvc h3{font-size:14px;font-weight:500;margin-bottom:6px}
.fsvc p{margin:0;font-size:13px;line-height:1.6;color:var(--grey)}

/* Swarovski Club — the first-dibs block */
.fclub{background:var(--paper);padding:clamp(48px,6vw,88px) var(--gut)}
.fclub__inner{max-width:900px}
.fclub h2{font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.02em}
.fclub__lede{margin:20px 0 0;max-width:52ch;font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:#4a4646}
.fclub__perks{
  list-style:none;margin:clamp(30px,3.4vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.fclub__perks li{background:var(--paper);padding:clamp(16px,1.8vw,24px)}
.fclub__perks h3{font-size:14px;font-weight:500;margin-bottom:7px}
.fclub__perks p{margin:0;font-size:13px;line-height:1.6;color:var(--grey)}
.fclub__call{margin:clamp(26px,3vw,38px) 0 0;font-size:clamp(16px,1.4vw,19px);color:var(--ink)}
.fclub .fine{max-width:52ch}
#captureForm{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;max-width:620px}
#captureForm input{
  flex:1 1 260px;background:var(--cream);border:1px solid var(--line);color:var(--ink);
  padding:15px 16px;font:inherit;font-size:15px;
}
#captureForm input:focus{outline:none;border-color:var(--ink)}
.capture__done{margin-top:14px;font-size:14px;color:var(--ink)}

/* footer navigation */
.fnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(22px,3vw,40px);padding:clamp(34px,4vw,56px) var(--gut)}
.fnav__col h3{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.fnav__col a{display:block;font-size:13px;line-height:1.5;padding:5px 0;color:var(--grey)}
.fnav__col a:hover{color:var(--ink);text-decoration:underline}

/* social */
.fsocial{display:flex;gap:18px;padding:22px var(--gut)}
.fsocial a{display:block;width:22px;height:22px;color:var(--grey)}
.fsocial a:hover{color:var(--ink)}
.fsocial svg{width:100%;height:100%;fill:currentColor;display:block}

/* bottom bar */
.fbottom{padding-bottom:34px;display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;align-items:flex-start;padding:22px var(--gut)}
.fbottom__locale{margin:0;display:flex;gap:18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.fbottom__copy{margin:0;font-size:12px;line-height:1.7;color:var(--grey)}

/* ─────────────── bag ─────────────── */
.drawer{position:fixed;inset:0;z-index:50}
.drawer__scrim{position:absolute;inset:0;background:rgba(26,24,24,.45)}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(440px,100%);
  background:var(--cream);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.drawer__head h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.drawer__head button{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.drawer__head button:hover{color:var(--ink)}
.drawer__ship{margin:0;padding:14px 24px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.drawer__items{flex:1;overflow:auto;padding:0 24px}
.drawer__empty{padding:34px 0;font-size:13px;color:var(--grey)}
.ditem{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ditem img{width:62px;height:62px;object-fit:contain}
.ditem h3{font-size:14px;font-weight:500}
.ditem p{margin:3px 0 0;font-size:12px;color:var(--grey)}
.ditem__qty{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px}
.ditem__qty button{width:22px;height:22px;border:1px solid var(--line);display:grid;place-items:center;line-height:1}
.ditem__qty button:hover{border-color:var(--ink)}
.ditem__price{font-size:14px;white-space:nowrap}
.drawer__foot{padding:18px 24px 24px;border-top:1px solid var(--line);display:grid;gap:12px}
.drawer__total{display:flex;justify-content:space-between;margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.drawer__total strong{font-size:17px;font-weight:500;letter-spacing:0}

/* ─────────────── touch targets ───────────────
   On a phone every link and button gets at least a 44px tap area. */
@media (max-width:900px){
  .nav__logo{padding:13px 0}
  .nav__bag{padding:13px 18px}
  .nav__links a{padding:12px 0}
  .chip{padding:13px 18px}
  .sortwrap select{padding:13px 12px}
  .card__add{padding:13px 16px}
  .fnav__col a{padding:11px 0}
  .fsvc{padding:20px}
  .fsocial{gap:4px;margin-left:-11px}
  .fsocial a{width:44px;height:44px;display:grid;place-items:center}
  .fsocial svg{width:22px;height:22px}
  .foot__cols a,.drawer__head button,.drawer__close{padding:11px 0}
  .ditem__qty button{width:34px;height:34px}
}

/* ─────────────── responsive ─────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__media{order:-1}
  .hero__media img{max-height:38vh}
  .trio{grid-template-columns:1fr 1fr}
  .nav__links{display:none}
  .nav__bag{margin-left:auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid{grid-template-columns:1fr 1fr}
  .trio{grid-template-columns:1fr}
}