/* ============================================================================
   LuxePalace™ — Design system & styles
   Palette tokens map 1:1 to Elementor Global Colors in Phase 2:
     Primary  = --lp-gold   Secondary = --lp-white
     Text     = --lp-white  Accent    = --lp-gold   Background = --lp-black
   ========================================================================== */

:root {
  /* Brand palette */
  --lp-black:      #010101;
  --lp-white:      #fefefe;
  --lp-gold:       #c3a03c;
  --lp-gold-soft:  #d8bd6a;
  --lp-gold-deep:  #8c7325;

  /* Derived neutrals */
  --lp-charcoal:   #0c0c0c;
  --lp-charcoal-2: #141414;
  --lp-charcoal-3: #1c1c1c;
  --lp-muted:      #9a9a9a;
  --lp-line:       rgba(195,160,60,.22);
  --lp-line-soft:  rgba(255,255,255,.08);

  /* Typography */
  --lp-font-head:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --lp-font-body:  'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --lp-font-ui:    'Montserrat', Arial, sans-serif;

  /* Layout */
  --lp-container:  1200px;
  --lp-radius:     14px;
  --lp-radius-sm:  8px;
  --lp-shadow:     0 24px 70px rgba(0,0,0,.55);
  --lp-shadow-sm:  0 8px 30px rgba(0,0,0,.35);
  --lp-header-h:   76px;
  --lp-ease:       cubic-bezier(.22,.61,.36,1);
}

/* --- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lp-black);
  color: var(--lp-white);
  font-family: var(--lp-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--lp-font-head); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

/* --- Utilities ------------------------------------------------------------ */
.lp-container { width: 100%; max-width: var(--lp-container); margin: 0 auto; padding: 0 24px; }
.lp-section { padding: 82px 0; }
.lp-section--tight { padding: 50px 0; }
.lp-eyebrow {
  font-family: var(--lp-font-ui); text-transform: uppercase; letter-spacing: .32em;
  font-size: 12px; font-weight: 600; color: var(--lp-gold); margin: 0 0 14px;
}
.lp-section-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.lp-section-head h2 { font-size: clamp(28px, 4vw, 44px); }
.lp-section-head p { color: var(--lp-muted); }
.lp-rule { width: 64px; height: 2px; background: var(--lp-gold); margin: 18px auto 0; border: 0; }
.lp-gold { color: var(--lp-gold); }
.text-center { text-align: center; }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 760px) { .lp-two { grid-template-columns: 1fr; } }

/* --- Buttons -------------------------------------------------------------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--lp-font-ui); font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 2px; transition: all .3s var(--lp-ease);
  border: 1px solid transparent; white-space: nowrap;
}
.lp-btn--gold { background: var(--lp-gold); color: var(--lp-black); }
.lp-btn--gold:hover { background: var(--lp-gold-soft); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(195,160,60,.3); }
.lp-btn--outline { border-color: var(--lp-gold); color: var(--lp-white); }
.lp-btn--outline:hover { background: var(--lp-gold); color: var(--lp-black); }
.lp-btn--light { background: var(--lp-white); color: var(--lp-black); }
.lp-btn--light:hover { background: #fff; transform: translateY(-2px); }
.lp-btn--ghost { color: var(--lp-white); border-color: var(--lp-line-soft); }
.lp-btn--ghost:hover { border-color: var(--lp-gold); color: var(--lp-gold); }
.lp-btn--wa { background: #25D366; color: #04210f; }
.lp-btn--wa:hover { background: #2ee672; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,211,102,.3); }
.lp-btn--block { width: 100%; }
.lp-btn--lg { padding: 17px 38px; font-size: 14px; }
.lp-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.lp-btn--lg svg { width: 20px; height: 20px; }
/* Product page only: keep "Buy now via WhatsApp" square (2px) to match the
   Add to Cart / Buy It Now buttons. The ID beats the mobile .lp-btn--wa pill
   rule, so it stays square on every viewport without affecting cart/checkout/
   concierge/footer WhatsApp buttons. */
#buy-wa { border-radius: 2px; }
.lp-mega__link .arrow svg { width: 16px; height: 16px; }
.lp-brandcard__link svg { width: 15px; height: 15px; }

/* --- Header / Nav --------------------------------------------------------- */
.lp-topbar {
  background: var(--lp-charcoal); color: var(--lp-muted);
  font-family: var(--lp-font-ui); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  text-align: center; padding: 9px 16px; border-bottom: 1px solid var(--lp-line-soft);
  /* Always a single line — the font shrinks fluidly on small screens (see media queries). */
  white-space: nowrap;
}
.lp-topbar b { color: var(--lp-gold); font-weight: 600; }

.lp-header { position: sticky; top: 0; z-index: 100; background: rgba(3,3,3,.92);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--lp-line-soft); }
.lp-header__inner { display: flex; align-items: center; justify-content: space-between;
  height: var(--lp-header-h); gap: 24px; }
.lp-logo img { height: 42px; width: auto; }
.lp-logo--circle img { height: 56px; width: 56px; border-radius: 50%; object-fit: cover; }

.lp-nav { display: flex; align-items: center; gap: 6px; }
.lp-nav__item { position: relative; }
.lp-nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
  font-family: var(--lp-font-ui); font-size: 13px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-white); position: relative; transition: color .25s;
}
.lp-nav__link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px;
  height: 1px; background: var(--lp-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--lp-ease); }
.lp-nav__link:hover, .lp-nav__link.is-active { color: var(--lp-gold); }
.lp-nav__link:hover::after, .lp-nav__link.is-active::after { transform: scaleX(1); }
.lp-nav__chev { width: 9px; height: 9px; transition: transform .3s; }
.lp-nav__item:hover .lp-nav__chev { transform: rotate(180deg); }

/* Mega menu */
.lp-mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(12px);
  min-width: 304px; background: var(--lp-charcoal-2); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm); box-shadow: var(--lp-shadow); padding: 14px;
  opacity: 0; visibility: hidden; transition: all .28s var(--lp-ease); z-index: 120;
}
.lp-mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.lp-nav__item:hover .lp-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.lp-mega__title { font-family: var(--lp-font-ui); font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--lp-muted); padding: 6px 12px 10px; }
.lp-mega__link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 12px; border-radius: 6px; color: var(--lp-white);
  font-size: 14.5px; transition: all .2s; border: 1px solid transparent;
}
.lp-mega__name { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.lp-mega__link span.brand-model { color: var(--lp-muted); font-size: 12px; }
.lp-mega__link:hover { background: rgba(195,160,60,.1); border-color: var(--lp-line); color: var(--lp-gold); padding-left: 16px; }
.lp-mega__link .arrow { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto;
  color: var(--lp-gold); opacity: 0; transform: translateX(-6px); transition: all .2s; }
.lp-mega__link .arrow svg { width: 16px; height: 16px; display: block; }
.lp-mega__link:hover .arrow { opacity: 1; transform: translateX(0); }

.lp-header__actions { display: flex; align-items: center; gap: 8px; }
.lp-icon-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; transition: all .25s; position: relative; }
.lp-icon-btn:hover { background: rgba(195,160,60,.12); color: var(--lp-gold); }
.lp-icon-btn svg { width: 22px; height: 22px; }
.lp-cart-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--lp-gold); color: var(--lp-black); border-radius: 9px; font-family: var(--lp-font-ui);
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.lp-cart-count[data-empty="true"] { display: none; }
.lp-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; }
.lp-burger svg { width: 24px; height: 24px; }

/* Mobile panel */
.lp-mobile { display: none; }
.lp-mobile__panel { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 86vw);
  background: var(--lp-charcoal); border-right: 1px solid var(--lp-line); z-index: 200;
  transform: translateX(-100%); transition: transform .35s var(--lp-ease); padding: 22px; overflow-y: auto; }
.lp-mobile.is-open .lp-mobile__panel { transform: translateX(0); }
.lp-mobile__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden;
  transition: opacity .35s; z-index: 199; }
.lp-mobile.is-open .lp-mobile__overlay { opacity: 1; visibility: visible; }
.lp-mobile__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.lp-mobile__logo { display: block; line-height: 0; }
.lp-mobile__close { width: 40px; height: 40px; }
.lp-mobile__close svg { width: 22px; height: 22px; }
.lp-macc__link { display: block; padding: 16px 6px; font-family: var(--lp-font-ui); letter-spacing: .1em;
  text-transform: uppercase; font-size: 14px; border-bottom: 1px solid var(--lp-line-soft); }
.lp-macc__head { display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 16px 6px; font-family: var(--lp-font-ui); letter-spacing: .1em; text-transform: uppercase;
  font-size: 14px; border-bottom: 1px solid var(--lp-line-soft); }
.lp-macc__head svg { width: 16px; height: 16px; transition: transform .3s; color: var(--lp-gold); }
.lp-macc.is-open .lp-macc__head svg { transform: rotate(180deg); }
.lp-macc__body { max-height: 0; overflow: hidden; transition: max-height .35s var(--lp-ease); }
.lp-macc.is-open .lp-macc__body { max-height: 600px; }
.lp-macc__body a { display: block; padding: 12px 18px; color: var(--lp-muted); font-size: 14px; }
.lp-macc__body a:hover { color: var(--lp-gold); }

/* --- Floating WhatsApp ---------------------------------------------------- */
.lp-fab { position: fixed; right: 22px; bottom: 22px; z-index: 150; width: 60px; height: 60px;
  border-radius: 50%; background: #25D366; box-shadow: 0 10px 30px rgba(37,211,102,.45);
  display: flex; align-items: center; justify-content: center; transition: transform .3s var(--lp-ease);
  animation: lp-fab-in .4s var(--lp-ease) both; }
.lp-fab:hover { transform: scale(1.08); }
.lp-fab svg { width: 32px; height: 32px; }
.lp-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: lp-pulse 2.4s infinite; }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes lp-fab-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* --- Hero carousel -------------------------------------------------------- */
/* Split showcase layout: copy on the left, the (square 1:1) photo framed on the
   right. On desktop it's dressed up — soft gold glow, corner brackets, sheen +
   gradient overlay; on mobile it collapses to a clean stacked photo-over-copy. */
.lp-hero { position: relative; overflow: hidden; background: var(--lp-black); }
.lp-hero__track { display: flex; transition: transform .8s var(--lp-ease); }
.lp-slide { flex: 0 0 100%; min-height: clamp(560px, 82vh, 780px); display: flex; align-items: center;
  position: relative; overflow: hidden; }
/* Per-slide backdrop: warm gold wash for Superclone, cool steel-blue for AAA+ */
.lp-slide--sc  { background: radial-gradient(120% 130% at 78% 26%, #201709 0%, #0a0805 46%, #010101 100%); }
.lp-slide--aaa { background: radial-gradient(120% 130% at 78% 26%, #101827 0%, #08090c 46%, #010101 100%); }

/* Big, soft, blurred glow that sits behind the photo (tinted per tier) */
.lp-slide__glow { position: absolute; z-index: 0; top: 50%; right: 6%; width: 620px; height: 620px;
  transform: translateY(-50%); border-radius: 50%; filter: blur(80px); pointer-events: none;
  animation: lp-glow-pulse 5.5s ease-in-out infinite; }
.lp-slide--sc  .lp-slide__glow { background: radial-gradient(circle, rgba(195,160,60,.42), transparent 68%); }
.lp-slide--aaa .lp-slide__glow { background: radial-gradient(circle, rgba(120,150,210,.34), transparent 68%); }
@keyframes lp-glow-pulse { 0%,100% { opacity: .5; } 50% { opacity: .72; } }

.lp-slide__inner { position: relative; z-index: 2; display: grid;
  grid-template-columns: 1.05fr minmax(0, 500px); gap: clamp(28px, 5vw, 70px); align-items: center;
  width: 100%; max-width: var(--lp-container); margin: 0 auto; padding: 48px 24px; }
.lp-slide__copy { max-width: 600px; }
.lp-slide__copy .lp-eyebrow { animation: lp-up .7s var(--lp-ease) both .1s; }
.lp-slide__title { font-size: clamp(34px, 5vw, 62px); line-height: 1.05; margin-bottom: 18px;
  animation: lp-up .7s var(--lp-ease) both .2s; }
.lp-slide__title em { font-style: italic; color: var(--lp-gold); }
.lp-slide__text { color: #cfcfcf; font-size: 18px; margin-bottom: 30px; max-width: 500px;
  animation: lp-up .7s var(--lp-ease) both .3s; }
.lp-slide__cta { display: flex; gap: 14px; flex-wrap: wrap; animation: lp-up .7s var(--lp-ease) both .4s; }

/* Photo showcase (right column). Padding leaves room for the gold corner brackets. */
.lp-slide__showcase { position: relative; justify-self: end; width: 100%; max-width: 500px; margin: 0;
  padding: 16px; animation: lp-showcase-in .9s var(--lp-ease) both .25s; }
/* Gold L-shaped corner brackets — top-left + bottom-right */
.lp-slide__showcase::before, .lp-slide__showcase::after { content: ""; position: absolute;
  width: 58px; height: 58px; border: 2px solid var(--lp-gold); opacity: .85; pointer-events: none; }
.lp-slide__showcase::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.lp-slide__showcase::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

.lp-slide__frame { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(195,160,60,.4);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 24px 64px -26px rgba(195,160,60,.4); }
.lp-slide__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fancy overlay: top-left sheen + gentle corner darkening + inner hairline */
.lp-slide__overlay { position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,.14), transparent 46%),
    linear-gradient(155deg, transparent 46%, rgba(1,1,1,.44) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }

@keyframes lp-showcase-in { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lp-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .lp-slide__glow { animation: none; }
}

.lp-hero__dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 10px; }
.lp-hero__dot { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); transition: all .3s; }
.lp-hero__dot.is-active { background: var(--lp-gold); width: 52px; }
.lp-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px;
  border-radius: 50%; border: 1px solid var(--lp-line); background: rgba(0,0,0,.35); display: flex;
  align-items: center; justify-content: center; transition: all .25s; }
.lp-hero__arrow:hover { background: var(--lp-gold); color: var(--lp-black); border-color: var(--lp-gold); }
.lp-hero__arrow svg { width: 20px; height: 20px; }
.lp-hero__arrow--prev { left: 24px; } .lp-hero__arrow--next { right: 24px; }

/* --- Trust marquee -------------------------------------------------------- */
.lp-trust { padding: 40px 0; border-top: 1px solid var(--lp-line-soft); border-bottom: 1px solid var(--lp-line-soft);
  background: var(--lp-charcoal); }
.lp-trust__label { text-align: center; font-family: var(--lp-font-ui); text-transform: uppercase;
  letter-spacing: .26em; font-size: 11.5px; color: var(--lp-muted); margin-bottom: 26px; }
.lp-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp-marquee__track { display: flex; align-items: center; gap: 60px; width: max-content; animation: lp-marquee 38s linear infinite; }
.lp-marquee:hover .lp-marquee__track { animation-play-state: paused; }
.lp-marquee__item { flex: 0 0 auto; height: 34px; display: flex; align-items: center; opacity: .92; transition: opacity .3s, transform .3s; }
.lp-marquee__item:hover { opacity: 1; transform: translateY(-2px); }
.lp-marquee__item svg { height: 34px; width: auto; }
.lp-marquee__item .lp-reddit { display: inline-flex; align-items: center; gap: 8px; }
.lp-marquee__item .lp-reddit__ic { height: 30px; width: 30px; border-radius: 50%; display: block; }
.lp-marquee__item .lp-reddit__wm { height: 16px; width: auto; display: block; }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Trustpilot placeholder (reviews integration to come) ----------------- */
.lp-trustpilot { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  max-width: 660px; margin: 0 auto; padding: 24px 30px; text-align: left;
  background: var(--lp-charcoal-2); border: 1px solid var(--lp-line-soft); border-radius: var(--lp-radius); }
.lp-trustpilot__stars svg { height: 30px; width: auto; display: block; }
.lp-trustpilot__txt { margin: 0; }
.lp-trustpilot__txt b { display: block; font-family: var(--lp-font-head); font-size: 18px; color: var(--lp-white); }
.lp-trustpilot__txt span { color: var(--lp-muted); font-size: 13px; }
/* The banner is a link out to Trustpilot — give it a clear hover cue. */
a.lp-trustpilot { transition: border-color .25s, transform .25s, box-shadow .25s; }
a.lp-trustpilot:hover { border-color: var(--lp-gold); transform: translateY(-2px); box-shadow: var(--lp-shadow-sm); }
a.lp-trustpilot:hover .lp-trustpilot__txt span { color: var(--lp-gold-soft); }

/* --- Rotating customer reviews (under Trustpilot) ------------------------- */
.lp-reviews { max-width: 660px; margin: 22px auto 0; }
.lp-reviews__track { min-height: 132px; display: flex; align-items: center; justify-content: center; }
.lp-reviews__track .lp-review { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--lp-ease), transform .5s var(--lp-ease); }
.lp-reviews__track.is-in .lp-review { opacity: 1; transform: none; }
.lp-review { text-align: center; }
.lp-review__stars { display: inline-flex; gap: 4px; margin-bottom: 12px; }
.lp-review__stars svg { width: 21px; height: 21px; display: block; }
.lp-review__text { font-family: var(--lp-font-head); font-style: italic; font-size: 18px; line-height: 1.5;
  color: var(--lp-white); margin: 0 auto 12px; max-width: 560px; }
.lp-review__by { font-family: var(--lp-font-ui); font-size: 12px; letter-spacing: .04em; }
.lp-review__by b { color: var(--lp-gold); }
.lp-review__by span { color: var(--lp-muted); margin-left: 8px; }
.lp-review__by span::before { content: "✓ "; color: #00B67A; }
.lp-reviews__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.lp-reviews__dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--lp-line);
  transition: background .25s, transform .25s; }
.lp-reviews__dots button.is-active { background: var(--lp-gold); transform: scale(1.25); }

/* --- Grid & product cards ------------------------------------------------- */
.lp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.lp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Featured grid renders the WHOLE published pool (so theme.js can reshuffle in
   the browser and beat full-page caching); show only the first 8 here. Phones
   trim this further to 4 in the mobile block below. */
#featured-grid > *:nth-child(n+9) { display: none; }
/* Same trick for the product-page "More from this collection" grid: it
   renders the WHOLE same-brand/same-tier pool so theme.js can reshuffle in
   the browser; only the first 4 (one row) show, at every breakpoint. */
#product-related > *:nth-child(n+5) { display: none; }
.lp-card { background: var(--lp-charcoal-2); border: 1px solid var(--lp-line-soft); border-radius: var(--lp-radius);
  overflow: hidden; transition: all .35s var(--lp-ease); display: flex; flex-direction: column; min-width: 0; }
.lp-card:hover { transform: translateY(-6px); border-color: var(--lp-line); box-shadow: var(--lp-shadow-sm); }
.lp-card__media { position: relative; aspect-ratio: 1/1; background:
  radial-gradient(120% 120% at 50% 20%, #1d1d1d, #0a0a0a); display: flex; align-items: center; justify-content: center; padding: 26px; min-width: 0; }
/* min-width/height:0 lets a large product photo (a flex item here) shrink to the
   card instead of holding its intrinsic pixel width — without it the image kept
   its natural width, overflowed the box and appeared shoved off to the right on
   phones. object-fit:contain then centres it with even padding on all sides. */
.lp-card__media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; transition: transform .5s var(--lp-ease); }
.lp-card:hover .lp-card__media img { transform: scale(1.07) rotate(-2deg); }
/* Touch screens keep :hover "on" after a tap, which left cards lifted and the
   photo scaled/rotated — reading as an off-centre image. Only apply those on a
   real (mouse) pointer. */
@media (hover: none) {
  .lp-card:hover { transform: none; box-shadow: none; }
  .lp-card:hover .lp-card__media img { transform: none; }
}
.lp-badge { position: absolute; top: 14px; left: 14px; font-family: var(--lp-font-ui); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; font-weight: 600; }
.lp-badge--aaa { background: rgba(195,160,60,.16); color: var(--lp-gold-soft); border: 1px solid var(--lp-line); }
.lp-badge--superclone { background: var(--lp-gold); color: var(--lp-black); }
.lp-card__body { padding: 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lp-card__brand { font-family: var(--lp-font-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-muted); }
.lp-card__name { font-family: var(--lp-font-head); font-size: 20px; }
.lp-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; }
.lp-card__price { font-family: var(--lp-font-ui); font-size: 19px; font-weight: 600; color: var(--lp-gold); }
/* Discount price display: live price + struck-through original + saving badge */
.lp-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.lp-price__now { color: inherit; }
.lp-price__was { font-size: .72em; font-weight: 500; color: var(--lp-muted);
  text-decoration: line-through; text-decoration-color: rgba(254,254,254,.5); }
.lp-price__off { align-self: center; font-size: .6em; font-weight: 700; letter-spacing: .04em;
  color: #0a0a0a; background: var(--lp-gold); padding: 2px 7px; border-radius: 999px; }
.lp-card__add { width: 44px; height: 44px; border-radius: 50%; background: rgba(195,160,60,.12); color: var(--lp-gold);
  display: inline-flex; align-items: center; justify-content: center; transition: all .25s; }
.lp-card__add:hover { background: var(--lp-gold); color: var(--lp-black); }
.lp-card__add svg { width: 20px; height: 20px; }

/* --- Brand cards (overview pages) ----------------------------------------- */
.lp-brandcard { position: relative; border-radius: var(--lp-radius); overflow: hidden; border: 1px solid var(--lp-line-soft);
  background: var(--lp-charcoal-2); min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px; transition: all .35s var(--lp-ease); }
.lp-brandcard:hover { transform: translateY(-6px); border-color: var(--lp-gold); box-shadow: var(--lp-shadow-sm); }
.lp-brandcard__art { position: absolute; top: -10px; right: -20px; width: 200px; opacity: .14; transition: all .4s; }
.lp-brandcard:hover .lp-brandcard__art { opacity: .28; transform: rotate(8deg) scale(1.05); }
.lp-brandcard__count { font-family: var(--lp-font-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-gold); margin-bottom: 8px; }
.lp-brandcard__name { font-size: 28px; margin-bottom: 6px; position: relative; z-index: 1; }
.lp-brandcard__link { font-family: var(--lp-font-ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lp-muted); display: inline-flex; align-items: center; gap: 8px; transition: color .25s; }
.lp-brandcard:hover .lp-brandcard__link { color: var(--lp-gold); }

/* --- Page hero band ------------------------------------------------------- */
.lp-pagehero { padding: 70px 0 56px; text-align: center; position: relative;
  background: radial-gradient(120% 120% at 50% 0%, #131313, #050505); border-bottom: 1px solid var(--lp-line-soft); }
.lp-pagehero h1 { font-size: clamp(34px, 5vw, 56px); }
.lp-pagehero p { color: var(--lp-muted); max-width: 620px; margin: 0 auto; }
.lp-crumbs { font-family: var(--lp-font-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lp-muted); margin-bottom: 18px; }
.lp-crumbs a:hover { color: var(--lp-gold); }
.lp-crumbs span { color: var(--lp-gold); }

/* --- Shop filters & toolbar ----------------------------------------------- */
.lp-filters { margin-bottom: 6px; }
.lp-filterrow { display: flex; align-items: flex-start; gap: 18px; padding: 16px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--lp-line-soft); }
.lp-filterrow:first-child { padding-top: 0; }
.lp-filterlabel { font-family: var(--lp-font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lp-gold); padding-top: 9px; min-width: 54px; flex: 0 0 auto; }
.lp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin: 18px 0 34px; padding-bottom: 22px; border-bottom: 1px solid var(--lp-line-soft); }
.lp-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-chip { font-family: var(--lp-font-ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 2px; border: 1px solid var(--lp-line-soft); color: var(--lp-muted); transition: all .25s; }
.lp-chip:hover { border-color: var(--lp-gold); color: var(--lp-gold); }
.lp-chip.is-active { background: var(--lp-gold); color: var(--lp-black); border-color: var(--lp-gold); }
.lp-sort { display: flex; align-items: center; gap: 10px; }
.lp-sort label { font-family: var(--lp-font-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); }
.lp-select { font-family: var(--lp-font-ui); font-size: 13px; background: var(--lp-charcoal-2); color: var(--lp-white);
  border: 1px solid var(--lp-line); border-radius: 2px; padding: 11px 16px; cursor: pointer; }
.lp-select:focus { outline: none; border-color: var(--lp-gold); }
.lp-count { font-family: var(--lp-font-ui); font-size: 12px; color: var(--lp-muted); letter-spacing: .08em; }
.lp-empty { text-align: center; padding: 70px 0; color: var(--lp-muted); }

/* --- Single product ------------------------------------------------------- */
.lp-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.lp-product__media { background: radial-gradient(120% 120% at 50% 20%, #1d1d1d, #080808);
  border: 1px solid var(--lp-line-soft); border-radius: var(--lp-radius); padding: 48px; position: sticky; top: 96px; min-width: 0; }
.lp-product__media img { width: auto; max-width: 100%; min-width: 0; height: auto; max-height: 540px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.lp-product__brand { font-family: var(--lp-font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--lp-gold); font-size: 13px; margin-bottom: 10px; }
.lp-product__title { font-size: clamp(30px, 4vw, 46px); margin-bottom: 16px; }
.lp-product__price { font-family: var(--lp-font-ui); font-size: 30px; font-weight: 600; color: var(--lp-gold); margin-bottom: 22px; }
.lp-product__desc { color: #cfcfcf; margin-bottom: 28px; }
.lp-qty { display: inline-flex; align-items: center; border: 1px solid var(--lp-line); border-radius: 2px; overflow: hidden; margin-right: 14px; }
.lp-qty button { width: 46px; height: 50px; font-size: 20px; color: var(--lp-gold); transition: background .2s; }
.lp-qty button:hover { background: rgba(195,160,60,.12); }
.lp-qty input { width: 56px; height: 50px; text-align: center; background: transparent; border: none; color: var(--lp-white);
  font-family: var(--lp-font-ui); font-size: 16px; -moz-appearance: textfield; }
.lp-qty input::-webkit-outer-spin-button, .lp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.lp-buyrow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
/* Product-page "Ship to" block. Borrows the cart summary's ship/row/total rows so the two
   pages read the same; only the frame and the tighter total are page-specific (the product
   price above it is already 30px, so a 22px total would compete with it). */
.lp-shipbox { background: var(--lp-charcoal-2); border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm);
  padding: 4px 20px 14px; margin-bottom: 14px; }
.lp-shipbox .lp-summary__total { font-size: 18px; padding: 12px 0 0; margin-top: 6px; }
.lp-features { border-top: 1px solid var(--lp-line-soft); padding-top: 26px; display: grid; gap: 16px; }
.lp-feature { display: flex; gap: 14px; align-items: flex-start; }
.lp-feature svg { width: 22px; height: 22px; color: var(--lp-gold); flex: 0 0 auto; margin-top: 2px; }
.lp-feature b { display: block; font-family: var(--lp-font-ui); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.lp-feature span { color: var(--lp-muted); font-size: 14px; }

/* --- Why us / trust strip ------------------------------------------------- */
.lp-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lp-why__item { text-align: center; padding: 30px 18px; border: 1px solid var(--lp-line-soft); border-radius: var(--lp-radius);
  background: var(--lp-charcoal-2); transition: all .3s; }
.lp-why__item:hover { border-color: var(--lp-line); transform: translateY(-4px); }
.lp-why__item svg { width: 36px; height: 36px; color: var(--lp-gold); margin: 0 auto 14px; }
.lp-why__item h3 { font-size: 19px; margin-bottom: 6px; }
.lp-why__item p { color: var(--lp-muted); font-size: 14px; margin: 0; }

/* --- CTA band ------------------------------------------------------------- */
.lp-ctaband { background: linear-gradient(120% 120% at 100% 0%, #1a1407, #060606); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 56px; text-align: center; }
.lp-ctaband h2 { font-size: clamp(26px, 4vw, 40px); }
.lp-ctaband p { color: var(--lp-muted); max-width: 560px; margin: 0 auto 26px; }

/* --- Cart ----------------------------------------------------------------- */
.lp-cart { display: grid; grid-template-columns: 1.6fr .9fr; gap: 40px; align-items: start; }
.lp-cartitem { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--lp-line-soft); }
.lp-cartitem__media { background: radial-gradient(120% 120% at 50% 20%, #1d1d1d, #0a0a0a); border-radius: var(--lp-radius-sm);
  border: 1px solid var(--lp-line-soft); padding: 12px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.lp-cartitem__media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.lp-cartitem__name { display: block; font-family: var(--lp-font-head); font-size: 18px; }
.lp-cartitem__brand { font-family: var(--lp-font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-muted); }
.lp-cartitem__price { color: var(--lp-gold); font-family: var(--lp-font-ui); font-weight: 600; }
.lp-cartitem__right { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.lp-remove { font-family: var(--lp-font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); transition: color .2s; }
.lp-remove:hover { color: #e06464; }
.lp-summary { background: var(--lp-charcoal-2); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 28px; position: sticky; top: 96px; }
.lp-summary h3 { font-size: 22px; margin-bottom: 18px; }
.lp-summary__row { display: flex; justify-content: space-between; padding: 9px 0; color: var(--lp-muted); font-size: 14px; }
.lp-summary__ship { display: flex; flex-direction: column; gap: 7px; padding: 10px 0; }
.lp-summary__ship label { font-family: var(--lp-font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); }
.lp-summary__ship .lp-select { width: 100%; padding: 10px 12px; }
.lp-summary__total { display: flex; justify-content: space-between; padding: 16px 0; margin-top: 8px; border-top: 1px solid var(--lp-line);
  font-family: var(--lp-font-head); font-size: 22px; }
.lp-summary__total span:last-child { color: var(--lp-gold); }
.lp-checkout-opts { display: grid; gap: 12px; margin-top: 18px; }
.lp-or { text-align: center; color: var(--lp-muted); font-family: var(--lp-font-ui); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; position: relative; margin: 4px 0; }
.lp-or::before, .lp-or::after { content: ""; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--lp-line-soft); }
.lp-or::before { left: 0; } .lp-or::after { right: 0; }
.lp-secure-note { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 16px; color: var(--lp-muted);
  font-size: 12px; }
.lp-secure-note svg { width: 15px; height: 15px; color: var(--lp-gold); }

/* --- Generic content (terms etc.) ---------------------------------------- */
.lp-prose { max-width: 820px; margin: 0 auto; }
.lp-prose h2 { font-size: 26px; margin-top: 40px; color: var(--lp-white); }
.lp-prose h3 { font-size: 19px; margin-top: 26px; color: var(--lp-gold-soft); }
.lp-prose p, .lp-prose li { color: #c9c9c9; }
.lp-prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.lp-prose ul li { margin-bottom: 8px; }
.lp-prose a { color: var(--lp-gold); text-decoration: underline; }
.lp-notice { background: var(--lp-charcoal-2); border: 1px solid var(--lp-line); border-left: 3px solid var(--lp-gold);
  border-radius: var(--lp-radius-sm); padding: 22px 26px; }

/* --- Footer --------------------------------------------------------------- */
.lp-footer { background: var(--lp-charcoal); border-top: 1px solid var(--lp-line-soft); padding: 64px 0; margin-top: 20px; }
.lp-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 44px; align-items: start; }
/* Logo + each column heading share a 66px top band so the headings line up with
   the centre of the brand logo, and the link lists/about text start on one line. */
.lp-footer__logo { height: 66px; margin-bottom: 18px; display: flex; align-items: center; }
.lp-footer__logo img { height: 44px; }
/* The circular logo PNG has ~19.6% transparent padding baked in, which left the
   visible badge floating small and inset from the column's left edge. Clip it to a
   fixed 66px window and oversize the image so the badge fills the slot and its left
   edge lines up flush with the "Purveyors…" copy below (and the headings alongside).
   The -3px margin is an optical overshoot: a circle whose leftmost tangent sits
   exactly on the text edge still reads as inset (only its mid-point touches the
   line), so it is nudged left a hair to sit visually flush with the paragraph.
   Higher specificity (.lp-footer__logo.lp-footer__logo--circle) keeps the 66px box
   from being reset by the responsive `height:auto` rule below. */
.lp-footer__logo.lp-footer__logo--circle {
  width: 66px; height: 66px; margin-left: -3px; overflow: hidden; border-radius: 50%; justify-content: center;
}
.lp-footer__logo--circle img { width: 109px; height: 109px; max-width: none; border-radius: 0; }
.lp-footer__about { color: var(--lp-muted); font-size: 14px; line-height: 1.65; max-width: 320px; }
.lp-footer h4 { font-family: var(--lp-font-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--lp-gold);
  min-height: 66px; margin-bottom: 18px; display: flex; align-items: center; }
/* Bottom-only padding so the FIRST link's cap-height starts on the same baseline as
   the logo's about-text and the Support copy (matching line-height 1.65), while the
   12px bottom gap preserves the list rhythm. A symmetric `6px 0` used to push the
   first link 6px below the other columns' first line. */
.lp-footer__links a { display: block; color: var(--lp-muted); font-size: 14px; line-height: 1.65; padding: 0 0 12px; transition: color .2s; }
.lp-footer__links a:hover { color: var(--lp-gold); }
.lp-socials { display: flex; gap: 12px; margin-top: 4px; }
.lp-social { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lp-line); display: inline-flex;
  align-items: center; justify-content: center; transition: all .25s; color: var(--lp-white); }
.lp-social:hover { background: var(--lp-gold); color: var(--lp-black); border-color: var(--lp-gold); transform: translateY(-3px); }
.lp-social svg { width: 20px; height: 20px; }
.lp-footer__pay { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.lp-pay { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 44px;
  padding: 0 9px; background: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.lp-pay img { height: 18px; width: auto; display: block; }
/* Logos that ship with their own coloured background (Klarna's pink pill) fill the
   tile edge-to-edge — no white padding. The SVG is cropped to the pill, so it reads
   as a solid pink badge; a drop-shadow keeps it consistent with the white tiles. */
.lp-pay--bleed { padding: 0; min-width: 0; background: transparent; box-shadow: none; }
.lp-pay--bleed img { height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.lp-footer__bottom { border-top: 1px solid var(--lp-line-soft); padding-top: 24px; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; flex-wrap: wrap; color: var(--lp-muted); font-size: 13px; }
.lp-footer__bottom a:hover { color: var(--lp-gold); }

/* --- Reveal animation ----------------------------------------------------- */
.lp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease); }
.lp-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   LANDING PAGE (hidden ads page) — phone-shaped card centred on black
   The whole card uses an iPhone aspect ratio (9 / 19.5), responsively sized to
   look right on desktop. The image fills the middle (object-fit cover) + pans.
   ========================================================================== */
body.lp-landing { background: var(--lp-black); color: #1a1407;
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 20px 16px; box-sizing: border-box; }
/* Card dimensions mirror the reference (ig.yyluxury.club): 90% wide, max 400px,
   full-height-minus-margins capped at 750px, 35px radius, compact padding. */
.lp-land-card { display: flex; flex-direction: column; width: 90%; max-width: 400px;
  height: calc(100dvh - 40px); max-height: 750px;
  background: var(--lp-black); border: 1.5px solid var(--lp-gold); border-radius: 35px; padding: 10px 20px 25px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 38px rgba(195,160,60,.10); overflow: hidden; box-sizing: border-box; }
.lp-land-logo { height: 80px; width: 80px; border-radius: 50%; object-fit: cover; display: block; margin: 2px auto 4px; flex: 0 0 auto; }
.lp-land-title { font-family: var(--lp-font-head); font-size: 23px; font-weight: 700; color: var(--lp-white); margin: 0 0 4px; flex: 0 0 auto; }
.lp-land-trust1, .lp-land-trust2 { font-family: var(--lp-font-body); font-size: 13px; font-weight: 600;
  color: rgba(254,254,254,.78); margin: 0 0 2px; line-height: 1.5; flex: 0 0 auto; }
.lp-land-trust2 { margin-bottom: 0; }
/* Scrollable image window: tall image overflows and scrolls vertically (hidden scrollbar). */
.lp-land-imgwrap { flex: 1 1 0; min-height: 120px; border-radius: 20px; margin: 12px 0 18px; position: relative;
  overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: rgba(0,0,0,.16);
  box-shadow: inset 0 0 20px rgba(0,0,0,.05); }
.lp-land-imgwrap::-webkit-scrollbar { display: none; }
.lp-land-imgwrap img { width: 100%; height: auto; display: block; }
.lp-land-status { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; flex: 0 0 auto;
  background: #e8f9ee; color: #15a05a; font-family: var(--lp-font-ui); font-weight: 600; font-size: 12px;
  padding: 7px 16px; border-radius: 999px; }
.lp-land-dot { width: 9px; height: 9px; border-radius: 50%; background: #19c268; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(25,194,104,.6); animation: lp-land-pulse 1.8s infinite, lp-dot-blink 1.4s ease-in-out infinite; }
@keyframes lp-land-pulse { 0% { box-shadow: 0 0 0 0 rgba(25,194,104,.6); } 70% { box-shadow: 0 0 0 7px rgba(25,194,104,0); } 100% { box-shadow: 0 0 0 0 rgba(25,194,104,0); } }
@keyframes lp-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.lp-land-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; flex: 0 0 auto;
  height: 56px; background: #25D366; color: #fff; font-family: var(--lp-font-ui); font-weight: 700; font-size: 16px;
  letter-spacing: 0; white-space: nowrap; padding: 0 16px; border-radius: 28px;
  animation: lp-cta-pulse 1.8s ease-in-out infinite; transition: background .25s, filter .2s; }
.lp-land-cta span { min-width: 0; }
/* Keep the CTA on a single line on smaller phones (narrower card = tighter fit). */
@media (max-width: 380px) {
  .lp-land-cta { font-size: 15px; gap: 6px; padding: 0 12px; }
  .lp-land-cta svg { width: 18px; height: 18px; }
}
/* glossy sheen that sweeps across the button */
.lp-land-cta::before { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: skewX(-20deg); animation: lp-cta-shine 3.4s ease-in-out infinite; }
.lp-land-cta:hover { background: #2ee672; }
.lp-land-cta:active { filter: brightness(.94); }
@keyframes lp-cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 28px rgba(37,211,102,.34); }
  50% { transform: scale(1.035); box-shadow: 0 20px 42px rgba(37,211,102,.6); } }
@keyframes lp-cta-shine { 0% { left: -80%; } 55%, 100% { left: 140%; } }
.lp-land-cta svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; animation: lp-cta-icon 2.4s ease-in-out infinite; }
@keyframes lp-cta-icon { 0%, 88%, 100% { transform: rotate(0); } 44% { transform: rotate(-9deg); } 64% { transform: rotate(9deg); } }
/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .lp-land-cta, .lp-land-cta::before, .lp-land-cta svg, .lp-land-status, .lp-land-dot { animation: none; }
  /* Site-wide motion: stop reveals, the hero glow/entrance, the FAB pulse and the
     trust marquee; show revealed content immediately. */
  .lp-marquee__track, .lp-slide__glow, .lp-slide__showcase, .lp-fab, .lp-fab::after,
  .lp-slide__copy .lp-eyebrow, .lp-slide__title, .lp-slide__text, .lp-slide__cta { animation: none; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-footer__grid { grid-template-columns: 1fr 1fr; }
  /* Drop the desktop logo-alignment band once columns wrap */
  .lp-footer h4 { min-height: 0; display: block; }
  .lp-footer__logo { height: auto; }
  /* Once columns stack, the payment row ends the brand block and the next heading
     ("Collections") sits directly below it. Match the 18px gap a heading gives its
     sub-links (.lp-footer h4 margin-bottom) so the rhythm stays consistent. */
  .lp-footer__pay { margin-bottom: 18px; }
}
@media (max-width: 860px) {
  .lp-nav { display: none; }
  .lp-burger { display: inline-flex; }
  .lp-mobile { display: block; }
  /* Stack the slide: photo on top (the hook), copy centred below. */
  .lp-slide__inner { grid-template-columns: 1fr; text-align: center; gap: 30px; padding: 40px 24px 44px; }
  .lp-slide__copy { margin: 0 auto; }
  .lp-slide__cta { justify-content: center; }
  /* Top-align (not center) so the photo sits at a fixed offset on every slide —
     centering made the photo's vertical position depend on how many lines the
     copy below it wrapped to, which visibly shifted between slides on swipe. */
  .lp-slide { min-height: 0; align-items: flex-start; }
  .lp-hero__arrow { display: none; }
  /* Photo above the copy; keep it simple — no corner brackets, softer shadow. */
  .lp-slide__showcase { order: -1; justify-self: center; max-width: min(400px, 82vw);
    padding: 0; animation: lp-up .7s var(--lp-ease) both; }
  .lp-slide__showcase::before, .lp-slide__showcase::after { display: none; }
  .lp-slide__frame { border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
  .lp-slide__overlay { background: linear-gradient(160deg, transparent 55%, rgba(1,1,1,.3) 100%); }
  /* Glow recentred behind the photo and dialled back on small screens. */
  .lp-slide__glow { width: 340px; height: 340px; top: 32%; right: 50%;
    transform: translate(50%, -50%); filter: blur(60px); opacity: .4; animation: none; }
  .lp-product { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-product__media { position: static; padding: 32px; }
  .lp-cart { grid-template-columns: 1fr; }
  .lp-summary { position: static; }
  .lp-section { padding: 52px 0; }
  /* --tight isn't scaled by default; bring it down in step so the homepage's lower
     sections (Why us / concierge / terms) don't leave big vertical gaps on tablets. */
  .lp-section--tight { padding: 42px 0; }
  /* Form controls ≥16px so iOS Safari doesn't auto-zoom the page on focus. */
  .lp-select, .lp-qty input, input.lp-select { font-size: 16px; }
  /* Slightly larger header logo on mobile */
  .lp-logo--circle img { height: 62px; width: 62px; }
}
@media (max-width: 620px) {
  /* One product card per row on phones — full-width so the photo, price and add
     button are all comfortably sized instead of two thin, cramped columns. */
  .lp-grid, .lp-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp-why { grid-template-columns: 1fr; }
  .lp-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  /* Equal top/bottom breathing room on phones (desktop footer is 64px / 30px). */
  .lp-footer { padding-top: 40px; padding-bottom: 40px; }
  .lp-card__name { font-size: 17px; }
  .lp-ctaband, .lp-summary, .lp-product__media { padding: 30px 22px; }
  .lp-toolbar { flex-direction: column; align-items: stretch; }
  .lp-footer__bottom { flex-direction: column; text-align: center; }
  /* Tighter vertical rhythm — less dead scroll on phones */
  .lp-section { padding: 40px 0; }
  .lp-section--tight { padding: 30px 0; }
  .lp-pagehero { padding: 44px 0 32px; }
  /* Announcement bar stays on ONE line: scale the font with the viewport and drop the
     wide tracking so "…24/7 support" never wraps under the rest. */
  .lp-topbar { font-size: clamp(8px, 2.55vw, 11.5px); letter-spacing: .05em; padding-left: 12px; padding-right: 12px; }
  .lp-slide__text { font-size: 16px; margin-bottom: 24px; }
  /* Stack hero CTAs full-width for easy tapping */
  .lp-slide__cta { flex-direction: column; align-items: stretch; }
  .lp-slide__cta .lp-btn { width: 100%; }
  /* Product page: Add-to-Cart drops to its own full-width row under the stepper */
  .lp-buyrow .lp-btn { flex: 1 1 100%; }
  /* Let long button labels wrap instead of forcing horizontal page overflow
     (e.g. "Explore Super Clone", "Checkout via WhatsApp" on narrow phones). */
  .lp-btn { white-space: normal; text-align: center; }
  .lp-btn--lg { padding: 16px 24px; }
  /* Marquee heading: tighten the wide tracking so it centres instead of
     stretching edge-to-edge across the phone. */
  .lp-trust__label { letter-spacing: .12em; font-size: 11px; }
  /* Featured: show 4 (not 8) on phones so shoppers reach the next sections
     sooner — just the first four of the browser-shuffled set. */
  #featured-grid > *:nth-child(n+5) { display: none; }
  /* "Find your perfect match" tier cards: centre their copy + buttons on mobile
     (overrides the inline text-align:left used for desktop). */
  .lp-two .lp-ctaband { text-align: center !important; }
  /* WhatsApp buttons redone for mobile: rounded pill, larger icon, less bulk,
     nicely centred text. Applies to concierge / cart / checkout / product / footer. */
  .lp-btn--wa { border-radius: 999px; letter-spacing: .06em; }
  .lp-btn--wa svg { width: 24px; height: 24px; }
  .lp-btn--wa.lp-btn--lg { padding: 14px 22px; }
  #concierge-wa { display: flex; width: 100%; }
}
@media (max-width: 480px) {
  /* Cart rows reflow: media + details on row 1, price/Remove span row 2 */
  .lp-cartitem { grid-template-columns: 72px 1fr; gap: 14px; }
  .lp-cartitem__right { grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; text-align: left; }
}
@media (max-width: 400px) {
  /* Tightest phones: trim gutters and tighten the announcement bar's tracking further
     (font-size keeps scaling via the clamp set at ≤620px, so it stays one line). */
  .lp-container { padding: 0 18px; }
  .lp-topbar { letter-spacing: .03em; }
}

/* ---------------------------------------------------------------------------
   WebKit overflow safety net (mobile)
   ---------------------------------------------------------------------------
   Even after the minmax(0,1fr) grid fixes, guard against ANY stray element that
   is wider than the screen making iOS Safari zoom the whole page out (the
   "everything shrinks to the top-left" symptom). overflow-x:clip contains it
   WITHOUT creating a scroll container, so position:sticky keeps working — unlike
   overflow-x:hidden. Scoped to phones so the desktop layout is untouched. */
@media (max-width: 860px) {
  html, body { overflow-x: clip; }
}