/* UPXNBOR V15 | Stable Christmas product modal.
   All values are scoped: other pages, navigation and product cards are untouched. */
.upx-xmas-v14[hidden] { display:none !important; }
.upx-xmas-v14 {
  position:fixed; inset:0; z-index:16001; display:grid; place-items:center;
  padding:24px; box-sizing:border-box;
  font-family:Inter,"Segoe UI",Arial,sans-serif; color:#2d2925;
}
.upx-xmas-v14 * { box-sizing:border-box; }
.upx-xmas-v14 button,.upx-xmas-v14 select,.upx-xmas-v14 a { font-family:inherit; }
.upx-xmas-v14 .ux-backdrop {
  position:absolute; inset:0; background:rgba(24,19,16,.64); backdrop-filter:blur(7px);
}
.upx-xmas-v14 .ux-dialog {
  position:relative; display:grid; grid-template-columns:minmax(0,53%) minmax(0,47%);
  width:min(1200px,calc(100vw - 56px));
  height:min(730px,calc(100dvh - 52px)); min-height:0;
  overflow:hidden; border-radius:22px; background:#faf8f5;
  box-shadow:0 30px 90px rgba(25,18,15,.34);
}
.upx-xmas-v14 .ux-media {
  display:grid; place-items:center; min-width:0; min-height:0;
  background:#271e19; overflow:hidden;
}
.upx-xmas-v14 .ux-media img,.upx-xmas-v14 .ux-media video {
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}
/* Never let product title length move the selectors or pagination. */
.upx-xmas-v14 .ux-detail {
  display:grid; grid-template-rows:minmax(0,1fr) 64px;
  gap:12px; min-width:0; min-height:0;
  overflow:hidden; padding:50px clamp(32px,4.1vw,58px) 26px;
  background:#faf8f5;
}
.upx-xmas-v14 .ux-main {
  display:flex; flex-direction:column; align-items:stretch;
  min-width:0; min-height:0;
}
.upx-xmas-v14 .ux-eyebrow,.upx-xmas-v14 .ux-field-label {
  display:block; color:#947f71; font-size:11px; font-weight:700;
  line-height:1.4; letter-spacing:.16em; text-transform:uppercase;
}
.upx-xmas-v14 .ux-title {
  display:block; flex:none; height:134px;
  margin:14px 0 4px; padding:0;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:clamp(30px,2.65vw,40px); font-weight:650;
  letter-spacing:-.035em; line-height:1.12; color:#392a24;
  overflow-wrap:break-word; overflow:hidden;
}
.upx-xmas-v14 .ux-title.is-long { font-size:clamp(27px,2.3vw,35px); }
.upx-xmas-v14 .ux-subtitle {
  flex:none; min-height:44px; margin:0;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:16px; line-height:1.5; font-weight:400; color:#77685e;
}
.upx-xmas-v14 .ux-field {
  display:flex; flex-direction:column; gap:9px;
  margin: auto 0 12px;
}
.upx-xmas-v14 .ux-country {
  width:100%; height:52px; flex:none;
  border:1px solid #e7dfd7; border-radius:10px; background:#fff;
  color:#3f352e; padding:0 14px; font-size:15px;
  cursor:pointer; box-shadow:0 3px 10px rgba(45,34,27,.03);
}
.upx-xmas-v14 .ux-shop {
  display:flex; flex:none; align-items:center; justify-content:center; gap:10px;
  height:54px; width:100%; border-radius:10px;
  background:#4b3428; color:#fff !important;
  text-decoration:none; font-size:15px; font-weight:650;
  transition:background .15s;
}
.upx-xmas-v14 .ux-shop:not(.disabled):hover { background:#604638; }
.upx-xmas-v14 .ux-shop.disabled {
  background:#c8bdb3; cursor:not-allowed; pointer-events:none;
  padding:0 10px; font-size:13px; text-align:center;
}
.upx-xmas-v14 .ux-note {
  flex:none; min-height:19px; margin:11px 0 0;
  color:#93877f; font-size:12px; line-height:1.5;
}
.upx-xmas-v14 .ux-bottom {
  display:flex; align-items:center; justify-content:flex-end;
  gap:15px; min-height:0; width:100%;
  margin:0; padding:10px 0 0; border-top:1px solid #eae3dd;
}
.upx-xmas-v14 .ux-bottom button {
  display:grid; place-items:center; flex:none;
  width:42px; height:42px; padding:0; border-radius:50%;
  border:1px solid #eae3dc; background:#fff;
  color:#493b32; font-size:26px; line-height:1; cursor:pointer;
}
.upx-xmas-v14 .ux-bottom button:hover { background:#eee8e2; }
.upx-xmas-v14 .ux-count {
  display:inline-block; min-width:56px; text-align:center;
  color:#766c64; font-size:13px; letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.upx-xmas-v14 .ux-close {
  position:absolute; top:17px; right:17px; z-index:3;
  display:grid; place-items:center; width:38px; height:38px;
  padding:0; border:0; border-radius:50%;
  color:#3f342d; background:#eee8e1; font-size:24px;
  line-height:1; cursor:pointer;
}
.upx-xmas-v14 .ux-close:hover { background:#e4d9ce; }
.upx-xmas-v14 button:focus-visible,.upx-xmas-v14 a:focus-visible,.upx-xmas-v14 select:focus-visible {
  outline:2px solid #c38f63; outline-offset:3px;
}
/* Short desktop displays: keep everything fixed and readable. */
@media (min-width:768px) and (max-height:730px) {
  .upx-xmas-v14 .ux-detail { padding-top:28px; padding-bottom:17px; grid-template-rows:minmax(0,1fr) 53px; gap:6px; }
  .upx-xmas-v14 .ux-title { height:112px; margin-top:10px; font-size:clamp(27px,2.35vw,35px); }
  .upx-xmas-v14 .ux-title.is-long { font-size:clamp(25px,2vw,30px); }
  .upx-xmas-v14 .ux-subtitle { min-height:33px; font-size:14px; }
  .upx-xmas-v14 .ux-field { margin-bottom:8px; gap:5px; }
  .upx-xmas-v14 .ux-country { height:42px; }
  .upx-xmas-v14 .ux-shop { height:45px; }
  .upx-xmas-v14 .ux-note { margin-top:7px; font-size:11px; }
  .upx-xmas-v14 .ux-bottom { padding-top:5px; }
  .upx-xmas-v14 .ux-bottom button { width:36px; height:36px; }
}
@media (max-width:767px) {
  .upx-xmas-v14 { padding:10px; }
  .upx-xmas-v14 .ux-dialog {
    width:min(420px,100%); height:min(790px,calc(100dvh - 20px));
    max-height:calc(100dvh - 20px);
    grid-template-columns:1fr;
    grid-template-rows:minmax(152px,36%) minmax(0,1fr);
    border-radius:17px; overflow:hidden;
  }
  .upx-xmas-v14 .ux-detail {
    padding:19px 21px 13px; gap:8px;
    grid-template-rows:minmax(0,1fr) 46px;
  }
  .upx-xmas-v14 .ux-eyebrow,.upx-xmas-v14 .ux-field-label { font-size:9px; letter-spacing:.13em; }
  .upx-xmas-v14 .ux-title {
    height:78px; font-size:clamp(23px,6vw,27px);
    line-height:1.12; margin:6px 0 3px;
  }
  .upx-xmas-v14 .ux-title.is-long { font-size:22px; }
  .upx-xmas-v14 .ux-subtitle { font-size:12px; line-height:1.4; min-height:28px; }
  .upx-xmas-v14 .ux-field { gap:5px; margin-bottom:7px; }
  .upx-xmas-v14 .ux-country { height:41px; font-size:13px; border-radius:8px; }
  .upx-xmas-v14 .ux-shop { height:42px; font-size:13px; border-radius:8px; }
  .upx-xmas-v14 .ux-note { margin-top:7px; min-height:14px; font-size:10px; }
  .upx-xmas-v14 .ux-bottom { padding-top:5px; gap:12px; }
  .upx-xmas-v14 .ux-bottom button { width:33px; height:33px; font-size:22px; }
  .upx-xmas-v14 .ux-count { min-width:52px; font-size:11px; }
  .upx-xmas-v14 .ux-close { top:10px; right:10px; width:33px; height:33px; font-size:22px; }
}
@media (max-width:767px) and (max-height:690px) {
  .upx-xmas-v14 .ux-dialog { grid-template-rows:minmax(125px,30%) minmax(0,1fr); }
  .upx-xmas-v14 .ux-detail { padding:13px 16px 9px; gap:3px; grid-template-rows:minmax(0,1fr) 39px; }
  .upx-xmas-v14 .ux-title { height:66px; font-size:22px; }
  .upx-xmas-v14 .ux-title.is-long { font-size:20px; }
  .upx-xmas-v14 .ux-subtitle { font-size:11px; min-height:24px; }
  .upx-xmas-v14 .ux-country { height:35px; }
  .upx-xmas-v14 .ux-shop { height:37px; }
  .upx-xmas-v14 .ux-note { margin-top:5px; }
  .upx-xmas-v14 .ux-bottom button { width:30px; height:30px; }
}
@media (prefers-reduced-motion:reduce) { .upx-xmas-v14 * { transition:none !important; } }
/* Center the editorial header within the spacious desktop panel without moving controls. */
@media (min-width:768px) and (min-height:800px) {
  .upx-xmas-v14 .ux-main { padding-top:clamp(48px,6vw,84px); }
}


/* V16: preserve every pixel of 16:9 Christmas deer footage in the portrait-ish media panel. */
.upx-xmas-v14.has-video .ux-media { background:#14171b !important; }
.upx-xmas-v14 .ux-media video {
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; object-position:center center !important;
  background:#14171b !important;
}
/* V17 — faithful restoration of the original Christmas Featured Products sleigh. */
/* Use the SAME three reindeer, red sleigh and translucent text sign as the early release. */
.upx-xmas-v14 .ux-flight {
  position:absolute; top:0; left:0; z-index:4;
  display:flex; align-items:center; gap:14px;
  width:max-content; opacity:0; visibility:hidden; pointer-events:none;
  transform-origin:left center;
  transform:translate(-34vw,-14vh) scale(.44) rotate(-10deg);
  filter:none;
}
.upx-xmas-v14.is-arriving .ux-flight {
  visibility:visible;
  animation:upxOriginalSleighFly 1.8s cubic-bezier(.18,.88,.18,1) forwards,
            upxOriginalSleighFade .45s ease-out 1.85s forwards;
}
.upx-xmas-v14 .ux-flight .reindeer-team {
  display:flex; align-items:center; gap:8px;
  font-size:46px; white-space:nowrap;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.34));
}
.upx-xmas-v14.is-arriving .ux-flight .reindeer-team span {
  display:inline-block; animation:upxOriginalReindeerBob .36s ease-in-out infinite alternate;
}
.upx-xmas-v14.is-arriving .ux-flight .reindeer-team span:nth-child(2){animation-delay:.08s}
.upx-xmas-v14.is-arriving .ux-flight .reindeer-team span:nth-child(3){animation-delay:.16s}
.upx-xmas-v14 .ux-flight .tow-line {
  display:block; flex:none; width:148px; height:2px;
  background:linear-gradient(90deg,rgba(255,242,210,.18),rgba(255,242,210,.96));
  box-shadow:0 0 18px rgba(255,238,196,.4);
}
.upx-xmas-v14 .ux-flight .sleigh-shell {
  display:block; position:relative; flex:none; width:230px; height:150px;
}
.upx-xmas-v14 .ux-flight .sleigh-body {
  position:absolute; left:8px; right:10px; bottom:24px; height:94px;
  border-radius:24px 36px 18px 24px;
  background:linear-gradient(150deg,rgba(160,16,34,.96),rgba(86,10,24,.94));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 38px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.05);
}
.upx-xmas-v14 .ux-flight .sleigh-body::before {
  content:"";position:absolute;left:14px;right:36px;top:14px;height:16px;border-radius:12px;
  background:linear-gradient(90deg,rgba(255,219,133,.96),rgba(255,172,66,.95));
}
.upx-xmas-v14 .ux-flight .sleigh-body::after {
  content:"";position:absolute;right:-6px;top:18px;width:30px;height:54px;
  border:8px solid rgba(255,188,92,.96);border-left:0;border-radius:0 32px 32px 0;
}
.upx-xmas-v14 .ux-flight .sleigh-runners {
  position:absolute;left:18px;right:8px;bottom:0;height:44px;
}
.upx-xmas-v14 .ux-flight .sleigh-runners::before,
.upx-xmas-v14 .ux-flight .sleigh-runners::after {
  content:"";position:absolute;bottom:2px;width:92px;height:30px;
  border:5px solid rgba(255,214,120,.96);border-top:0;border-left:0;
  border-radius:0 0 26px 26px;
}
.upx-xmas-v14 .ux-flight .sleigh-runners::before{left:16px}
.upx-xmas-v14 .ux-flight .sleigh-runners::after{right:4px}
/* Previously V16 used display:none here — that removed the exact sign the user wants. */
.upx-xmas-v14 .ux-flight .sleigh-card-preview {
  display:block !important;
  position:absolute; left:56px; bottom:52px; width:124px; padding:12px 12px 10px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,232,182,.08));
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  color:#ffe5a6;
}
.upx-xmas-v14 .ux-flight .sleigh-card-preview strong {
  display:block;font-size:18px;line-height:1.02;font-weight:800;
  margin-bottom:5px;color:#ffe5a6;letter-spacing:-.015em;
}
/* Hide the newer product panel during the flight, then reveal once the sled exits. */
.upx-xmas-v14.is-arriving .ux-dialog {
  visibility:hidden; opacity:0; transform:translateY(12px) scale(.96);pointer-events:none;
}
.upx-xmas-v14 .ux-dialog {transition:opacity .22s ease, transform .22s ease}
@keyframes upxOriginalSleighFly {
  0%{opacity:0;transform:translate(-34vw,-14vh) scale(.44) rotate(-10deg)}
  22%{opacity:1}
  70%{opacity:1;transform:translate(26vw,14vh) scale(.9) rotate(-3deg)}
  100%{opacity:1;transform:translate(calc(50vw - 390px),calc(50vh - 92px)) scale(1) rotate(0deg)}
}
@keyframes upxOriginalSleighFade { to{opacity:0} }
@keyframes upxOriginalReindeerBob {from{transform:translateY(0)}to{transform:translateY(-6px)}}
@media(max-width:1100px){
  @keyframes upxOriginalSleighFly {
    0%{opacity:0;transform:translate(-38vw,-16vh) scale(.42) rotate(-10deg)}
    22%{opacity:1}
    70%{opacity:1;transform:translate(14vw,18vh) scale(.82) rotate(-3deg)}
    100%{opacity:1;transform:translate(calc(50vw - 340px),calc(50vh - 84px)) scale(.94) rotate(0deg)}
  }
}
@media(max-width:767px){
  .upx-xmas-v14 .ux-flight{gap:8px}
  .upx-xmas-v14 .ux-flight .reindeer-team{font-size:30px;gap:2px}
  .upx-xmas-v14 .ux-flight .tow-line{width:64px}
  .upx-xmas-v14 .ux-flight .sleigh-shell{width:132px;height:88px}
  .upx-xmas-v14 .ux-flight .sleigh-body{height:56px;bottom:14px;border-radius:16px 24px 14px 16px}
  .upx-xmas-v14 .ux-flight .sleigh-body::before{left:10px;right:20px;top:8px;height:10px}
  .upx-xmas-v14 .ux-flight .sleigh-body::after{right:-4px;top:10px;width:20px;height:34px;border-width:6px}
  .upx-xmas-v14 .ux-flight .sleigh-runners{height:22px}
  .upx-xmas-v14 .ux-flight .sleigh-runners::before,
  .upx-xmas-v14 .ux-flight .sleigh-runners::after{width:52px;height:18px;border-width:4px}
  .upx-xmas-v14 .ux-flight .sleigh-runners::before{left:10px}
  .upx-xmas-v14 .ux-flight .sleigh-runners::after{right:0}
  .upx-xmas-v14 .ux-flight .sleigh-card-preview{left:28px;bottom:26px;width:78px;padding:7px 7px 6px;border-radius:12px}
  .upx-xmas-v14 .ux-flight .sleigh-card-preview strong{font-size:11px;margin-bottom:3px}
  @keyframes upxOriginalSleighFly{
    0%{opacity:0;transform:translate(-46vw,-18vh) scale(.38) rotate(-10deg)}
    22%{opacity:1}
    70%{opacity:1;transform:translate(4vw,21vh) scale(.74) rotate(-3deg)}
    100%{opacity:1;transform:translate(calc(50vw - 166px),calc(50vh - 52px)) scale(.86) rotate(0deg)}
  }
}
@media(prefers-reduced-motion:reduce){
  .upx-xmas-v14 .ux-flight{display:none!important}
  .upx-xmas-v14 .ux-dialog{transition:none!important}
}
