/* =========================================================
   HOMEPAGE PROMO BANNERS: flat-lay style, built in CSS around the
   transparent bottle cut-outs. Everything is sized in cqw (% of the
   banner's width) so each composition scales like an image; phones
   (banner narrower than 640px) get a taller layout.
   Bottles: base pose = individual `rotate` property, the float/sway
   animation runs on `transform` so the two combine.
   ========================================================= */
.bnr-sec { padding: 0; }
.bnr { display: block; container-type: inline-size; overflow: hidden; }
.bnr-stage { position: relative; aspect-ratio: 2.5 / 1; overflow: hidden; }
.bnr-stage > * { position: absolute; }

/* ---------- shared pieces ---------- */
.btl { z-index: 2; width: auto; rotate: var(--r, 0deg); animation: btl-float 6s ease-in-out infinite; will-change: transform; }
@keyframes btl-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-1.3cqw) rotate(2.5deg); }
}
.bnr-copy { z-index: 4; }
.bnr-kicker { display: block; text-transform: uppercase; }
.bnr-title { margin: 0; line-height: .98; color: inherit; font-family: var(--sans); text-transform: uppercase; }
.bnr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: max(40px, 3.3cqw); padding: 0 max(20px, 2.2cqw);
    font-size: max(11px, .85cqw); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: 4px; transition: background .3s, color .3s; }

/* petals, baby's breath, leaves, beans: base pose via rotate/scale, drift via transform */
.petal { z-index: 3; width: 2.6cqw; height: 1.8cqw; border-radius: 70% 30% 60% 40%; opacity: .9; animation: drift 7s ease-in-out infinite; }
.baby { z-index: 3; width: .8cqw; height: .8cqw; border-radius: 50%; background: #fff; opacity: .95; animation: drift 9s ease-in-out infinite;
    box-shadow: 1.1cqw .3cqw 0 -.05cqw #fff, 2cqw -.6cqw 0 -.1cqw #fff, .5cqw 1.2cqw 0 #fdfaf4, 1.7cqw 1.1cqw 0 -.12cqw #fff, -.9cqw .7cqw 0 -.1cqw #fff,
        2.8cqw .4cqw 0 -.15cqw #fff, 1.2cqw -1.4cqw 0 -.12cqw #fff, -.4cqw -.9cqw 0 -.16cqw #fff, 3.3cqw -1cqw 0 -.18cqw #fff, 2.3cqw 1.9cqw 0 -.2cqw #fff,
        .9cqw 2.3cqw 0 -.2cqw #fff, -1.6cqw -.2cqw 0 -.2cqw #fff;
    filter: drop-shadow(0 .2cqw .2cqw rgba(110, 75, 40, .25)); }
.baby::after { content: ''; position: absolute; left: .35cqw; top: .8cqw; width: 1px; height: 3.5cqw; background: #9aa57c; transform: rotate(20deg); transform-origin: top; opacity: .7; }
.leaf { z-index: 1; width: 6.5cqw; height: 2.8cqw; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #a3b59c 0%, #6f8a69 60%, #58724f 100%);
    box-shadow: .5cqw .7cqw 1cqw rgba(60, 70, 50, .2); animation: drift 10s ease-in-out infinite; }
.leaf::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: rgba(255, 255, 255, .35); rotate: 23deg; }
.bean { z-index: 1; width: 1.9cqw; height: 1.35cqw; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #8a5634 0%, #5a3219 55%, #3a1e0e 100%);
    box-shadow: .25cqw .35cqw .5cqw rgba(50, 30, 15, .35); }
.bean::after { content: ''; position: absolute; left: 47%; top: 12%; bottom: 12%; width: .22cqw; border-radius: 50%; background: #2a1408; rotate: 8deg; }
@keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(.5cqw, -.6cqw) rotate(12deg); }
}

/* =========================================================
   1. MEN'S COLLECTION: sage stone, bottles flank centred copy
   ========================================================= */
.bnr-men .bnr-stage { background: radial-gradient(ellipse at 50% 45%, #f1f2ec 0%, #e3e7de 50%, #d3d9cb 100%); color: #2d3a30; }
.bnr-men .btl { filter: drop-shadow(1.2cqw 1.6cqw 1.2cqw rgba(45, 60, 45, .32)); }
.bnr-men .btl-gentleman { left: 9cqw; top: 3.5cqw; height: 31cqw; --r: 13deg; }
.bnr-men .btl-desert { right: 9cqw; top: 5cqw; height: 29cqw; --r: -12deg; animation-delay: -3s; }
.bnr-men .l1 { left: 2.5cqw; top: 3cqw; rotate: 25deg; }
.bnr-men .l2 { left: 24cqw; bottom: 3.5cqw; rotate: -35deg; animation-delay: -4s; }
.bnr-men .l3 { right: 25cqw; top: 2.5cqw; rotate: 150deg; scale: .85; animation-delay: -2s; }
.bnr-men .l4 { right: 2.5cqw; bottom: 4cqw; rotate: -150deg; animation-delay: -6s; }
.bnr-men .l5 { left: 5cqw; bottom: 2cqw; rotate: -10deg; scale: .7; animation-delay: -8s; }
.bnr-men .bn1 { left: 25cqw; top: 6cqw; rotate: 20deg; }
.bnr-men .bn2 { left: 27.5cqw; top: 7.5cqw; rotate: -40deg; }
.bnr-men .bn3 { left: 26cqw; top: 9.5cqw; rotate: 75deg; }
.bnr-men .bn4 { right: 26cqw; bottom: 7cqw; rotate: -20deg; }
.bnr-men .bn5 { right: 28.5cqw; bottom: 5.5cqw; rotate: 50deg; }
.bnr-men .bn6 { right: 25cqw; bottom: 4cqw; rotate: 100deg; }
.bnr-men .bn7 { left: 7cqw; bottom: 9cqw; rotate: 30deg; }
.bnr-men .bn8 { right: 6cqw; top: 6cqw; rotate: -60deg; }
.bnr-men .bnr-copy { left: 30cqw; right: 30cqw; top: 50%; transform: translateY(-50%); text-align: center; }
.bnr-men .bnr-kicker { font-size: 2.1cqw; font-weight: 400; letter-spacing: .26em; margin-bottom: .8cqw; }
.bnr-men .bnr-title { font-size: 5.2cqw; font-weight: 600; letter-spacing: .01em; }
.bnr-men .bnr-sub { font-size: 1.6cqw; letter-spacing: .28em; text-transform: uppercase; margin: 1.4cqw 0 2.2cqw; color: #5d6b60; }
.bnr-men .bnr-btn { background: #2d3a30; color: #f1f2ec; }
.bnr-men:hover .bnr-btn { background: #000; }

/* =========================================================
   2. WOMEN FRAGRANCES: blush, one bottle on a glow, petals
   ========================================================= */
.bnr-wom .bnr-stage { background: radial-gradient(ellipse at 28% 50%, #fdf1ef 0%, #f7dfdb 45%, #efcbc6 100%); color: #8a2238; }
.bnr-wom .glow { z-index: 0; left: 12cqw; top: 2cqw; width: 36cqw; height: 36cqw; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 70%); animation: glow-pulse 6s ease-in-out infinite; }
@keyframes glow-pulse { 50% { transform: scale(1.06); opacity: .8; } }
.bnr-wom .btl-ombre { left: 23cqw; top: 3.5cqw; height: 32cqw; --r: -17deg; filter: drop-shadow(1.4cqw 1.6cqw 1.3cqw rgba(140, 60, 70, .3)); }
.bnr-wom .petal { background: linear-gradient(135deg, #f7b6c4, #e2768f); }
.bnr-wom .p1 { left: 15cqw; top: 6cqw; rotate: 30deg; }
.bnr-wom .p2 { left: 40cqw; top: 4cqw; rotate: -50deg; scale: .8; animation-delay: -2s; }
.bnr-wom .p3 { left: 13cqw; bottom: 8cqw; rotate: 70deg; scale: 1.1; animation-delay: -4s; }
.bnr-wom .p4 { left: 42cqw; bottom: 6cqw; rotate: -20deg; animation-delay: -1s; }
.bnr-wom .p5 { left: 33cqw; bottom: 2.5cqw; rotate: 110deg; scale: .7; animation-delay: -5s; opacity: .7; }
.bnr-wom .p6 { left: 5cqw; top: 15cqw; rotate: -80deg; scale: .9; animation-delay: -3s; }
.bnr-wom .p7 { right: 4cqw; top: 3cqw; rotate: 40deg; scale: .8; animation-delay: -6s; }
.bnr-wom .p8 { right: 30cqw; bottom: 3cqw; rotate: -30deg; scale: .6; animation-delay: -2.5s; opacity: .7; }
.bnr-wom .b1 { left: 6cqw; top: 4cqw; }
.bnr-wom .b2 { left: 47cqw; bottom: 9cqw; }
.bnr-wom .b3 { right: 6cqw; bottom: 4cqw; }
.bnr-wom .bnr-copy { right: 6cqw; top: 50%; transform: translateY(-50%); text-align: right; }
.bnr-wom .bnr-kicker { font-size: 2.1cqw; font-weight: 400; letter-spacing: .26em; color: #7a4a52; margin-bottom: .8cqw; }
.bnr-wom .bnr-title { font-size: 6.2cqw; font-weight: 700; letter-spacing: -.005em; }
.bnr-wom .bnr-title span { display: block; }
.bnr-wom .bnr-sub { font-size: 1.9cqw; margin: 1.4cqw 0 2.2cqw; color: #5a3a40; }
.bnr-wom .bnr-btn { background: #8a2238; color: #fff; }
.bnr-wom:hover .bnr-btn { background: #000; }

/* =========================================================
   3. LIMITED EDITION: cream flat-lay, three bottles
   ========================================================= */
.bnr-col .bnr-stage { background: radial-gradient(ellipse at 70% 50%, #fbf1e2 0%, #f5e6d0 55%, #efdcc1 100%); color: #5b4532; }
.bnr-col .btl { filter: drop-shadow(1.2cqw 1.6cqw 1.2cqw rgba(110, 75, 40, .32)); }
/* spaced so the tilted bottles never touch, even mid-sway */
.bnr-col .btl-ombre { left: 48cqw; top: 7cqw; height: 27cqw; --r: -12deg; }
.bnr-col .btl-gentleman { left: 66.5cqw; top: 2cqw; height: 29cqw; --r: 10deg; animation-delay: -2s; }
.bnr-col .btl-desert { left: 84cqw; top: 7cqw; height: 26cqw; --r: -5deg; animation-delay: -4s; }
.bnr-col .petal { background: linear-gradient(135deg, #f8c6c9, #ec9aa3); }
.bnr-col .b1 { left: 44cqw; top: 2.5cqw; }
.bnr-col .b2 { left: 42cqw; bottom: 5cqw; }
.bnr-col .b3 { right: 4cqw; bottom: 3cqw; }
.bnr-col .p1 { right: 2cqw; top: 3cqw; rotate: 30deg; }
.bnr-col .p2 { left: 47cqw; bottom: 2cqw; rotate: -20deg; scale: .8; animation-delay: -2s; }
.bnr-col .p3 { right: 12cqw; bottom: 1.5cqw; rotate: 60deg; scale: .7; animation-delay: -4s; }
.bnr-col .p4 { left: 61cqw; bottom: 3cqw; rotate: -40deg; scale: .6; opacity: .7; animation-delay: -1s; }
.bnr-col .bnr-copy { left: 5cqw; top: 50%; transform: translateY(-50%); }
.bnr-col .bnr-kicker { font-size: 2.3cqw; font-weight: 400; letter-spacing: .24em; margin-bottom: .6cqw; }
.bnr-col .bnr-title { font-size: 5cqw; font-weight: 500; letter-spacing: .01em; }
.bnr-col .bnr-sub { font-size: 1.7cqw; margin: 1.4cqw 0 2.2cqw; color: #7b6550; }
.bnr-col .bnr-btn { background: #5b4532; color: #fbf1e2; }
.bnr-col:hover .bnr-btn { background: #000; }

/* =========================================================
   PHONES: taller canvas, copy on top, bottles below
   ========================================================= */
@container (max-width: 640px) {
    .bnr-stage { aspect-ratio: 4 / 5; }
    .bnr-btn { display: none; }
    .bnr-copy { left: 6cqw !important; right: 6cqw !important; top: 9cqw !important; transform: none !important; text-align: center !important; }
    .petal { width: 5cqw; height: 3.4cqw; }
    .baby { scale: 1.8; }
    .leaf { width: 12cqw; height: 5cqw; }
    .bean { width: 3.8cqw; height: 2.7cqw; }

    /* men */
    .bnr-men .bnr-kicker { font-size: 4cqw; margin-bottom: 1.5cqw; }
    .bnr-men .bnr-title { font-size: 10.5cqw; }
    .bnr-men .bnr-sub { font-size: 3.3cqw; margin: 3cqw 0 0; }
    .bnr-men .btl-gentleman { left: 9cqw; top: auto; bottom: 10cqw; height: 60cqw; }
    .bnr-men .btl-desert { left: auto; right: 9cqw; top: auto; bottom: 12cqw; height: 56cqw; }
    .bnr-men .l1 { left: 3cqw; top: 46cqw; } .bnr-men .l2 { left: 38cqw; bottom: 4cqw; } .bnr-men .l3 { right: 4cqw; top: 44cqw; }
    .bnr-men .l4 { right: 36cqw; bottom: 26cqw; } .bnr-men .l5 { left: 2cqw; bottom: 3cqw; }
    .bnr-men .bn1 { left: 44cqw; top: 58cqw; } .bnr-men .bn2 { left: 50cqw; top: 61cqw; } .bnr-men .bn3 { left: 46cqw; top: 66cqw; }
    .bnr-men .bn4 { right: 6cqw; bottom: 5cqw; } .bnr-men .bn5 { right: 12cqw; bottom: 3cqw; } .bnr-men .bn6 { right: 3cqw; bottom: 9cqw; }
    .bnr-men .bn7 { left: 6cqw; top: 6cqw; } .bnr-men .bn8 { right: 6cqw; top: 5cqw; }

    /* women */
    .bnr-wom .bnr-kicker { font-size: 4cqw; margin-bottom: 1.5cqw; }
    .bnr-wom .bnr-title { font-size: 11.5cqw; }
    .bnr-wom .bnr-sub { font-size: 4cqw; margin: 3cqw 0 0; }
    .bnr-wom .glow { left: 10cqw; top: auto; bottom: 0; width: 80cqw; height: 80cqw; }
    .bnr-wom .btl-ombre { left: 33cqw; top: auto; bottom: 9cqw; height: 64cqw; }
    .bnr-wom .p1 { left: 10cqw; top: 62cqw; } .bnr-wom .p2 { left: 76cqw; top: 58cqw; } .bnr-wom .p3 { left: 14cqw; bottom: 12cqw; }
    .bnr-wom .p4 { left: 74cqw; bottom: 16cqw; } .bnr-wom .p5 { left: 50cqw; bottom: 3cqw; } .bnr-wom .p6 { left: 4cqw; top: 6cqw; }
    .bnr-wom .p7 { right: 5cqw; top: 6cqw; } .bnr-wom .p8 { right: 40cqw; bottom: 40cqw; display: none; }
    .bnr-wom .b1 { left: 6cqw; top: 76cqw; } .bnr-wom .b2 { left: 78cqw; bottom: 30cqw; } .bnr-wom .b3 { right: 8cqw; bottom: 4cqw; }

    /* limited edition */
    .bnr-col .bnr-kicker { font-size: 4cqw; }
    .bnr-col .bnr-title { font-size: 10cqw; }
    .bnr-col .bnr-sub { font-size: 3.6cqw; margin: 3cqw 0 0; }
    .bnr-col .btl-ombre { left: 5cqw; top: auto; bottom: 14cqw; height: 52cqw; }
    .bnr-col .btl-gentleman { left: 36cqw; top: auto; bottom: 18cqw; height: 55cqw; }
    .bnr-col .btl-desert { left: 69cqw; top: auto; bottom: 13cqw; height: 50cqw; }
    .bnr-col .b1 { left: 8cqw; top: 46cqw; } .bnr-col .b2 { left: 50cqw; bottom: 6cqw; } .bnr-col .b3 { right: 8cqw; bottom: 4cqw; }
    .bnr-col .p1 { right: 6cqw; top: 50cqw; } .bnr-col .p2 { left: 30cqw; bottom: 4cqw; } .bnr-col .p3 { right: 30cqw; bottom: 8cqw; } .bnr-col .p4 { left: 4cqw; top: 6cqw; }
}

/* =========================================================
   HERO STAGE: same floating-bottle treatment inside the hero slider.
   Sized in cqh (% of the stage's height) so the bottle always fits.
   ========================================================= */
.hero-stage { container-type: size; }
.hero-stage > * { position: absolute; }
.hero-stage.stage-navy { background: radial-gradient(circle at 50% 50%, #22314f 0%, #0d1526 45%, #000 85%); }
.hero-stage.stage-wine { background: radial-gradient(circle at 50% 50%, #5e1b2b 0%, #2a0a12 50%, #000 88%); }
.hero-stage.stage-sage { background: radial-gradient(circle at 50% 50%, #f4f5f0 0%, #e2e7dc 50%, #d0d7c8 100%); }
.hero-stage.stage-sand { background: radial-gradient(circle at 50% 50%, #fcf3e6 0%, #f3e3cb 50%, #e8d1b0 100%); }
/* soften the seam with the copy side on desktop */
.hero-stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dark .hero-stage::before { background: linear-gradient(90deg, #000 0%, transparent 18%); }
.ely-light .hero-stage::before { background: linear-gradient(90deg, #f2f2f2 0%, transparent 18%); }

.hs-glow { left: 50%; top: 50%; width: 82cqh; height: 82cqh; translate: -50% -50%; border-radius: 50%; z-index: 0; animation: glow-pulse 6s ease-in-out infinite; }
.dark .hs-glow { background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 45%, transparent 70%); }
.ely-light .hs-glow { background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .35) 45%, transparent 70%); }
.hs-shadow { left: 50%; bottom: 7%; width: 38cqh; height: 6cqh; translate: -50% 0; border-radius: 50%; z-index: 1; animation: hs-shadow 6s ease-in-out infinite; }
.dark .hs-shadow { background: radial-gradient(ellipse, rgba(255, 255, 255, .16), transparent 70%); }
.ely-light .hs-shadow { background: radial-gradient(ellipse, rgba(60, 45, 30, .35), transparent 70%); }
@keyframes hs-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .6; } }

.hs-bottle { left: 50%; top: 48%; height: 74cqh; width: auto; translate: -50% -50%; z-index: 2; }
.dark .hs-bottle { filter: drop-shadow(0 2.5cqh 3cqh rgba(0, 0, 0, .6)) drop-shadow(0 0 4cqh rgba(255, 255, 255, .08)); }
.ely-light .hs-bottle { filter: drop-shadow(2cqh 3cqh 2.5cqh rgba(60, 45, 30, .3)); }
/* photo fallback: a framed card that floats like a bottle */
.hs-card { left: 50%; top: 48%; width: 62cqh; aspect-ratio: 1 / 1; translate: -50% -50%; z-index: 2; overflow: hidden;
    border: 1.2cqh solid #fff; border-radius: 2.2cqh; box-shadow: 0 4cqh 9cqh rgba(0, 0, 0, .55); background: #fff; }
.hs-card img { width: 100%; height: 100%; object-fit: cover; }

/* decorations */
.hero-stage .petal { background: linear-gradient(135deg, #f7b6c4, #e2768f); }
.hero-stage.stage-navy .petal { background: linear-gradient(135deg, #ffffff, #cfd8ea); }
.hero-stage .baby { scale: 1.5; }
.dark .hero-stage .baby { opacity: .8; }
.hero-stage .l1 { left: 8%; top: 10%; rotate: 25deg; }
.hero-stage .l2 { right: 9%; bottom: 13%; rotate: -150deg; animation-delay: -4s; }
.hero-stage .l3 { left: 12%; bottom: 15%; rotate: -30deg; scale: .85; animation-delay: -7s; }
.stage-sage .bn1 { right: 17%; top: 13%; rotate: 20deg; }
.stage-sage .bn2 { right: 13%; top: 17%; rotate: -40deg; }
.stage-sage .bn3 { left: 19%; top: 27%; rotate: 70deg; }
.stage-sage .bn4 { left: 23%; bottom: 8%; rotate: 10deg; }
.stage-sand .bn1 { left: 15%; bottom: 12%; rotate: 25deg; }
.stage-sand .bn2 { left: 19%; bottom: 9%; rotate: -50deg; }
.stage-sand .bn3 { right: 17%; top: 15%; rotate: 80deg; }
.stage-sand .p1 { right: 11%; top: 32%; rotate: 30deg; }
.hero-stage .b1 { left: 11%; top: 12%; }
.hero-stage .b2 { right: 12%; bottom: 14%; }
.stage-navy .p1, .stage-wine .p1 { left: 14%; bottom: 20%; rotate: 40deg; }
.stage-navy .p2, .stage-wine .p2 { right: 14%; top: 16%; rotate: -30deg; animation-delay: -2s; }
.stage-navy .p3, .stage-wine .p3 { right: 21%; bottom: 10%; rotate: 80deg; scale: .8; animation-delay: -4s; }
.stage-navy .p4, .stage-wine .p4 { left: 22%; top: 24%; rotate: -60deg; scale: .7; animation-delay: -5s; opacity: .7; }
@media (max-width: 900px) {
    .hero-stage::before { display: none; }
}

/* =========================================================
   CRAZY DEALS: combo cards (two floating bottles on a themed stage)
   ========================================================= */
.deals-intro { text-align: center; color: var(--g700); margin: -20px auto 30px; max-width: 560px; }
.deal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.deal-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--g200); border-radius: 10px; overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s; }
.deal-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(0, 0, 0, .12); }

.deal-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; container-type: size; }
.deal-stage > * { position: absolute; }
.deal-stage.stage-navy { background: radial-gradient(circle at 50% 48%, #22314f 0%, #0d1526 50%, #03060c 100%); color: #fff; }
.deal-stage.stage-wine { background: radial-gradient(circle at 50% 48%, #5e1b2b 0%, #2a0a12 55%, #100306 100%); color: #fff; }
.deal-stage.stage-sage { background: radial-gradient(circle at 50% 48%, #f4f5f0 0%, #e2e7dc 55%, #d0d7c8 100%); color: #2d3a30; }
.deal-stage.stage-blush { background: radial-gradient(circle at 50% 48%, #fdf1ef 0%, #f7dfdb 55%, #efcbc6 100%); color: #8a2238; }
.deal-stage.stage-sand { background: radial-gradient(circle at 50% 48%, #fcf3e6 0%, #f3e3cb 55%, #e8d1b0 100%); color: #5b4532; }
.deal-stage.stage-stone { background: radial-gradient(circle at 50% 48%, #f7f7f7 0%, #e6e6e6 55%, #d2d2d2 100%); color: #111; }
.ds-glow { left: 50%; top: 48%; width: 95cqh; height: 95cqh; translate: -50% -50%; border-radius: 50%; animation: glow-pulse 6s ease-in-out infinite;
    background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .3) 45%, transparent 70%); }
.stage-navy .ds-glow, .stage-wine .ds-glow { background: radial-gradient(circle, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 45%, transparent 70%); }

.ds-bottle, .ds-photo { top: 47%; translate: -50% -50%; z-index: 2; }
/* caps lean inwards, clear of the corner badge and the deal number */
.ds-a { left: 31%; --r: 5deg; }
.ds-b { left: 69%; --r: -5deg; animation-delay: -3s; }
.ds-bottle { height: 76cqh; width: auto; filter: drop-shadow(1.5cqh 2.5cqh 2cqh rgba(60, 45, 30, .3)); }
.stage-navy .ds-bottle, .stage-wine .ds-bottle { filter: drop-shadow(0 2.5cqh 3cqh rgba(0, 0, 0, .6)); }
.ds-photo { height: 64cqh; aspect-ratio: 3 / 4; overflow: hidden; border: 1cqh solid #fff; border-radius: 1.8cqh; box-shadow: 0 3cqh 5cqh rgba(0, 0, 0, .28); background: #fff; }
.ds-photo img { width: 100%; height: 100%; object-fit: cover; }
.ds-shadow { bottom: 5%; width: 26cqh; height: 4cqh; translate: -50% 0; border-radius: 50%; z-index: 1; animation: hs-shadow 6s ease-in-out infinite;
    background: radial-gradient(ellipse, rgba(60, 45, 30, .32), transparent 70%); }
.stage-navy .ds-shadow, .stage-wine .ds-shadow { background: radial-gradient(ellipse, rgba(255, 255, 255, .14), transparent 70%); }
.ds-sa { left: 31%; }
.ds-sb { left: 69%; animation-delay: -3s; }
.ds-seal { top: 5%; right: 3.5%; z-index: 3; width: 20cqh; height: 20cqh; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #000; color: #fff; line-height: 1; box-shadow: 0 0 0 .8cqh rgba(255, 255, 255, .7); animation: ds-pulse 2.4s ease-in-out infinite; }
.stage-navy .ds-seal, .stage-wine .ds-seal { background: #fff; color: #000; box-shadow: 0 0 0 .8cqh rgba(255, 255, 255, .25); }
.ds-seal b { font-size: 6.6cqh; font-weight: 700; }
.ds-seal small { font-size: 2.8cqh; font-weight: 600; letter-spacing: .2em; margin-top: .6cqh; padding-left: .2em; }
@keyframes ds-pulse { 50% { transform: scale(1.08); } }
.ds-num { top: 6%; left: 5%; z-index: 3; font-size: 3.6cqh; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }

.deal-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.deal-tag { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--g500); }
.deal-body h3 { font-size: 20px; font-weight: 700; margin: 4px 0 6px; }
.deal-items { font-size: 13.5px; font-weight: 500; margin: 0 0 6px; }
.deal-items a { border-bottom: 1px solid var(--g300); }
.deal-items a:hover { border-color: #000; }
.deal-items span { color: var(--g500); margin: 0 3px; }
.deal-desc { font-size: 13.5px; color: var(--g700); line-height: 1.55; margin: 0 0 14px; }
.deal-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; }
.deal-price s { color: var(--g500); font-size: 14px; }
.deal-price b { font-size: 22px; font-weight: 700; }
.deal-price span { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid #000; padding: 2px 7px; border-radius: 3px; }
.deal-note { font-size: 12px; color: var(--g500); margin: 6px 0 14px; }
.deal-card .js-deal { min-height: 46px; font-size: 12px; }
@media (max-width: 1100px) { .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .deal-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* deals page header */
.deals-hero { background: radial-gradient(ellipse at 50% 0%, #2a2a2a 0%, #0b0b0b 60%, #000 100%); color: #fff; text-align: center; padding: 70px 0 60px; }
.deals-hero .ely-eyebrow { color: #bdbdbd; }
.deals-hero h1 { font-size: clamp(46px, 7vw, 92px); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; margin: 0 0 16px;
    background: linear-gradient(100deg, #8d8d8d 0%, #fff 30%, #d6d6d6 45%, #fff 60%, #8d8d8d 100%); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: deals-silver 5s linear infinite; }
@keyframes deals-silver { to { background-position: -220% 0; } }
.deals-hero p { max-width: 620px; margin: 0 auto 26px; color: #cfcfcf; font-size: 16px; }
.deals-hero p b { color: #fff; }
.deals-perks { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.deals-perks span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .btl, .petal, .baby, .leaf, .bnr-wom .glow, .hs-glow, .hs-shadow, .ds-glow, .ds-shadow, .ds-seal, .deals-hero h1 { animation: none; }
}