/* RAA Campaigns — floating promo card. Loaded on shop pages and campaign pages alike, so it
   carries its own defaults and inherits the page font. Desktop: card in the bottom-right
   corner. Mobile: bottom drawer over a light scrim. Closed: a small tab to reopen it. */
.raacmp-float{--rf-bg:#0b0b0b;--rf-fg:#f5f5f5;--rf-muted:rgba(245,245,245,.7);--rf-red:#b3001b;--rf-red-hover:#d0021b;--rf-gap:24px;--rf-ease:cubic-bezier(.2,.7,.2,1);
  font-family:var(--cmp-font-body,inherit);color:var(--rf-fg);line-height:1.45;-webkit-font-smoothing:antialiased;
  /* A viewport-sized box that clips everything inside it (the sheen and photo zoom animate past the
     card's edges): iOS Safari does not reliably clip animated children of a fixed element, and
     anything that escapes lets the page pan sideways. Clicks pass through except on the card. */
  position:fixed;inset:0;z-index:99990;overflow:hidden;contain:paint;pointer-events:none}
.raacmp-float [hidden]{display:none!important}
.raacmp-float *,.raacmp-float *::before,.raacmp-float *::after{box-sizing:border-box}
:where(.raacmp-float) p{margin:0}

/* Panel */
.raacmp-float__panel{position:absolute;z-index:2;pointer-events:auto;right:var(--rf-gap);bottom:calc(var(--rf-gap) + var(--rf-lift,0px));width:380px;max-width:calc(100vw - 2 * var(--rf-gap));background:var(--rf-bg);color:var(--rf-fg);overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  transform:translateY(calc(100% + 48px));opacity:0;visibility:hidden;transition:transform .55s var(--rf-ease),opacity .35s ease,visibility 0s linear .55s}
.raacmp-float__panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--rf-red);z-index:3;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--rf-ease) .35s}
.raacmp-float__panel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);transform:translateX(-120%)}
.raacmp-float.is-open .raacmp-float__panel{transform:none;opacity:1;visibility:visible;transition:transform .55s var(--rf-ease),opacity .35s ease,visibility 0s}
.raacmp-float.is-open .raacmp-float__panel::before{transform:scaleX(1)}

.raacmp-float__close{position:absolute;top:12px;right:12px;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:0;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s}
.raacmp-float__close:hover{background:rgba(0,0,0,.8)}
.raacmp-float__close:focus-visible,.raacmp-float__cta:focus-visible,.raacmp-float__tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.raacmp-float__handle{display:none}

.raacmp-float__media{position:relative;height:180px;overflow:hidden;background:#000}
.raacmp-float__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;margin:0;max-width:none}
.raacmp-float__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--rf-bg) 0%,rgba(11,11,11,.3) 55%,rgba(11,11,11,0) 100%)}
.raacmp-float__date{position:absolute;right:16px;bottom:-6px;z-index:1;font-size:88px;font-weight:200;line-height:.85;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.65);font-variant-numeric:tabular-nums}

.raacmp-float__body{position:relative;z-index:1;padding:18px 24px 24px}
.raacmp-float__live{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.raacmp-float__dot{position:relative;flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--rf-red)}
.raacmp-float__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--rf-red);opacity:0}
.raacmp-float[data-state="live"] .raacmp-float__dot{background:#2ecc71}
.raacmp-float[data-state="live"] .raacmp-float__dot::after{border-color:#2ecc71}
.raacmp-float__eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rf-muted);margin-bottom:6px}
.raacmp-float__title{font-size:24px;font-weight:200;line-height:1.12;letter-spacing:-.01em;margin-bottom:8px}
.raacmp-float__title strong{font-weight:700;white-space:nowrap}
.raacmp-float__text{font-size:14px;font-weight:300;color:var(--rf-muted);margin-bottom:16px}

.raacmp-float__cd{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.raacmp-float__cd-label{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rf-muted)}
.raacmp-float__cd-units{display:flex}
.raacmp-float__cd-units>span{display:flex;flex-direction:column;min-width:56px;padding:0 12px;border-left:1px solid rgba(255,255,255,.25)}
.raacmp-float__cd-units>span:first-child{padding-left:0;border-left:0}
.raacmp-float__cd-units b{font-size:28px;font-weight:200;line-height:1;font-variant-numeric:tabular-nums}
.raacmp-float__cd-units i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rf-muted);margin-top:4px}

.raacmp-float__cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:12px 20px;background:var(--rf-cta,var(--rf-red));color:var(--rf-cta-fg,#fff)!important;text-decoration:none!important;font-size:16px;font-weight:400;letter-spacing:.01em;border-radius:0;transition:background .2s}
.raacmp-float__cta:hover{background:var(--rf-cta-hover,var(--rf-red-hover))}
/* Black Friday campaigns: Miele yellow buttons */
.raacmp-float[data-brand="miele-bf"]{--rf-cta:#f59b00;--rf-cta-hover:#ffb000;--rf-cta-fg:#1e1e1e}
.raacmp-float__cta svg{transition:transform .25s var(--rf-ease)}
.raacmp-float__cta:hover svg{transform:translateX(4px)}

/* Collapsed tab */
.raacmp-float__tab{position:absolute;z-index:1;pointer-events:auto;right:var(--rf-gap);bottom:calc(var(--rf-gap) + var(--rf-lift,0px));display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 16px;border:0;border-radius:0;border-top:2px solid var(--rf-red);background:var(--rf-bg);color:var(--rf-fg);font:inherit;font-size:14px;cursor:pointer;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.55);transform:translateY(calc(100% + 40px));opacity:0;transition:transform .45s var(--rf-ease),opacity .3s ease}
.raacmp-float.is-min .raacmp-float__tab{transform:none;opacity:1}
.raacmp-float__tab:hover{background:#1c1c1c}
.raacmp-float__tab-text{font-weight:400}
.raacmp-float__tab-cd{font-variant-numeric:tabular-nums;color:var(--rf-muted);padding-left:10px;border-left:1px solid rgba(255,255,255,.25)}
.raacmp-float__tab-cd:empty{display:none}

/* Step aside while the same campaign's inline teaser is on screen */
.raacmp-float.is-suppressed .raacmp-float__panel,.raacmp-float.is-suppressed .raacmp-float__tab{opacity:0;pointer-events:none;transform:translateY(calc(100% + 48px))}

.raacmp-float__scrim{display:none}

/* Mobile: bottom drawer */
@media (max-width:767px){
  .raacmp-float{--rf-gap:12px}
  .raacmp-float__scrim{display:block;position:absolute;inset:0;z-index:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .35s ease}
  .raacmp-float.is-open .raacmp-float__scrim{opacity:1;pointer-events:auto}
  .raacmp-float.is-suppressed .raacmp-float__scrim{opacity:0;pointer-events:none}
  .raacmp-float__panel{left:0;right:0;bottom:0;width:100%;max-width:none;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%)}
  .raacmp-float__handle{display:block;position:absolute;top:8px;left:50%;z-index:4;width:40px;height:4px;margin-left:-20px;background:rgba(255,255,255,.55)}
  .raacmp-float__close{top:16px;right:12px}
  .raacmp-float__media{height:150px}
  .raacmp-float__date{font-size:76px}
  .raacmp-float__body{padding:16px 16px 20px}
  .raacmp-float__title{font-size:22px}
  .raacmp-float__panel{bottom:0}
  .raacmp-float__tab{left:auto;right:12px;bottom:calc(12px + var(--rf-lift,0px) + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:no-preference){
  .raacmp-float.is-open .raacmp-float__media img{animation:raacmp-float-zoom 20s ease-in-out infinite alternate}
  .raacmp-float.is-open .raacmp-float__panel::after{animation:raacmp-float-sheen 7s ease-in-out 1.2s infinite}
  .raacmp-float__dot::after{animation:raacmp-float-ring 1.8s ease-out infinite}
}
@media (prefers-reduced-motion:reduce){
  .raacmp-float__panel,.raacmp-float__tab,.raacmp-float__scrim,.raacmp-float__panel::before{transition:none!important}
}
@keyframes raacmp-float-zoom{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-1%)}}
@keyframes raacmp-float-sheen{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
@keyframes raacmp-float-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
@media print{.raacmp-float{display:none!important}}