/* "The Enchanted Holiday Studio" – the temporary holiday look of the whole website (Whole site > Holiday look).
   Loaded only while the look is on; the page then has <body class="is-holiday">. When the last day has passed this
   file is no longer loaded and the website looks exactly as before.
   Palette: starry-night blue #16213E / #131B2E, honey gold #E5A93B, winter cream #FBF9F4, cranberry #8B263E. */
body.is-holiday {
  --olive: #16213E; --olive-dark: #131B2E;
  --orange: #E5A93B; --orange-dark: #8B263E;
  --paper: #FBF9F4; --paper-2: #F4EEE2; --wash-peach: #F7ECDB; --wash-sage: #E8EBF2; --line: #E6DDCB;
  --gold: #E5A93B; --berry: #8B263E; --night: #16213E; --cream: #FBF9F4;
  --sh-card: 0 10px 30px -14px rgba(22, 33, 62, .32); --sh-lift: 0 22px 50px -20px rgba(22, 33, 62, .45); --sh-btn: 0 6px 18px -8px rgba(229, 169, 59, .75);
  /* a small hand-drawn constellation, repeated softly behind the dark areas */
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180'%3E%3Cg fill='%23FBE7B5'%3E%3Ccircle cx='22' cy='30' r='1.4'/%3E%3Ccircle cx='58' cy='18' r='1'/%3E%3Ccircle cx='92' cy='40' r='1.6'/%3E%3Ccircle cx='120' cy='26' r='1'/%3E%3Ccircle cx='150' cy='120' r='1.3'/%3E%3Ccircle cx='186' cy='98' r='1.7'/%3E%3Ccircle cx='222' cy='130' r='1.1'/%3E%3Ccircle cx='240' cy='60' r='.9'/%3E%3Ccircle cx='40' cy='140' r='.9'/%3E%3Ccircle cx='80' cy='160' r='1.2'/%3E%3Ccircle cx='200' cy='20' r='.8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23E5A93B' stroke-opacity='.45' stroke-width='.6'%3E%3Cpath d='M22 30 L58 18 L92 40 L120 26'/%3E%3Cpath d='M150 120 L186 98 L222 130'/%3E%3C/g%3E%3C/svg%3E");
}

/* text and buttons: honey gold buttons with dark text, cranberry links and accents on the cream pages */
.is-holiday h1 strong, .is-holiday h2 strong { color: var(--berry); }
.is-holiday .btn { color: var(--night); }
.is-holiday .btn:hover { color: #fff; }
.is-holiday .btn--ghost { color: #fff; }
.is-holiday .btn--ghost-dark { color: var(--night); background: #fff; box-shadow: inset 0 0 0 2px var(--night); }
.is-holiday .btn--ghost-dark:hover { color: #fff; }
.is-holiday .pn .btn { color: #fff; }
.is-holiday .eyebrow--light, .is-holiday .band--green a:not(.btn), .is-holiday .ftr a:hover, .is-holiday .hdr__nav a:hover, .is-holiday .hdr__nav [aria-current="page"] { color: #F3C86E; }
.is-holiday .eyebrow--light::before { background: #F3C86E; }

/* starry night header, dark bands and footer */
.is-holiday .hdr { background: var(--stars) 0 0 / 260px 180px, linear-gradient(180deg, #131B2E, #16213E); }
.is-holiday .band--green { background: var(--stars) 0 0 / 260px 180px, radial-gradient(ellipse 60% 70% at 85% 10%, rgba(229, 169, 59, .16), transparent 70%), #16213E; }
.is-holiday .ftr { background: var(--stars) 0 0 / 260px 180px, linear-gradient(180deg, #16213E, #0F1626); box-shadow: inset 0 3px 0 rgba(229, 169, 59, .55); }
.is-holiday .ftr__nl .nl-box { --nl-accent: #8B263E; --nl-accent-2: #B4475F; background: #FBF9F4; }

/* the warm light bands get a touch of winter cream */
.is-holiday .band:not(.band--green) { background: linear-gradient(180deg, rgba(251, 249, 244, .92), rgba(247, 236, 219, .78)); }

/* product cards with a warm glowing border, like fairy lights around a gift */
.is-holiday .prod { box-shadow: 0 0 0 1px rgba(229, 169, 59, .45), var(--sh-card); }
.is-holiday .prod:hover, .is-holiday .prod:focus-visible { box-shadow: 0 0 0 2px #E5A93B, 0 0 28px rgba(229, 169, 59, .45), var(--sh-lift); }
.is-holiday .flip__face { box-shadow: 0 0 0 2px rgba(229, 169, 59, .6), 0 0 30px rgba(229, 169, 59, .28), 0 20px 40px -20px #000; }

/* ---------- home page: the holiday welcome banner ---------- */
.hol-hero { position: relative; overflow: hidden; color: #F4EFE3; padding: clamp(56px, 8vw, 100px) 0 clamp(60px, 8vw, 104px);
  background: radial-gradient(ellipse 55% 60% at 78% 55%, rgba(229, 169, 59, .28), transparent 70%), radial-gradient(ellipse 50% 50% at 10% 0%, rgba(139, 38, 62, .35), transparent 70%), linear-gradient(180deg, #131B2E, #16213E 60%, #1C2A4D); }
.hol-hero__sky { position: absolute; inset: 0; background: var(--stars) 0 0 / 260px 180px; opacity: .9; pointer-events: none; animation: hol-twinkle 7s ease-in-out infinite alternate; }
@keyframes hol-twinkle { to { opacity: .55; } }
.hol-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; background: var(--paper); clip-path: polygon(0 60%, 8% 40%, 18% 62%, 30% 35%, 42% 58%, 55% 38%, 68% 60%, 80% 36%, 91% 56%, 100% 40%, 100% 100%, 0 100%); }
.hol-hero__in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hol-eyebrow { color: #F3C86E; } .hol-eyebrow::before { display: none; }
.hol-hero__title { color: #FBF9F4; font-size: clamp(2.2rem, 3.6vw + 1rem, 3.6rem); }
.is-holiday .hol-hero__title strong { color: #F3C86E; font-style: italic; }
.hol-hero__lead { font-size: 1.15rem; max-width: 52ch; color: #E2DCCD; }
.hol-hero .btn { color: var(--night); }
.hol-hero .btn:hover { color: var(--night); --fill: #F3C86E; }
.hol-hero .hol-btn--ghost { color: #FBF9F4; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(243, 200, 110, .8); --fill: rgba(243, 200, 110, .25); }
.hol-hero .hol-btn--ghost:hover { color: #FBF9F4; }
/* the first three collection products float in a warm glow */
.hol-hero__gifts { position: relative; height: clamp(260px, 30vw, 380px); }
.hol-gift { position: absolute; display: grid; place-items: center; padding: 8px; border-radius: 16px; background: #FBF9F4; box-shadow: 0 0 0 2px rgba(229, 169, 59, .75), 0 0 40px rgba(229, 169, 59, .4), 0 24px 40px -18px #000; animation: hol-float 6s ease-in-out infinite; }
.hol-gift img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; }
.hol-gift--1 { width: 46%; aspect-ratio: 3 / 4; left: 4%; top: 6%; rotate: -6deg; }
.hol-gift--2 { width: 44%; aspect-ratio: 3 / 4; right: 2%; top: 0; rotate: 5deg; animation-delay: -2s; }
.hol-gift--3 { width: 38%; aspect-ratio: 1; left: 32%; bottom: -4%; rotate: -2deg; animation-delay: -4s; z-index: 1; }
@keyframes hol-float { 50% { transform: translateY(-10px); } }

/* ---------- home page: Holiday & 2027 Collection ---------- */
.hol-col { position: relative; }
.hol-col h2 { color: var(--night); }
.hol-col .eyebrow { color: var(--berry); }
.hol-col::before { content: '✦  ❄  ✦'; position: absolute; left: 50%; top: 24px; translate: -50% 0; color: #E5A93B; letter-spacing: .4em; font-size: .9rem; }

/* ---------- a few snowflakes, only in the empty side margins of wide screens ---------- */
.hol-snow { display: none; }
@media (min-width: 1340px) {
  .hol-snow { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .hol-snow i { position: absolute; left: var(--x); top: -20px; color: #A9B8D3; font-size: calc(var(--s) * 2.2); font-style: normal; opacity: .55; animation: hol-fall var(--d) linear var(--w) infinite; }
  .hol-snow i::before { content: '❄'; }
  @keyframes hol-fall { 0% { transform: translate(0, -20px) rotate(0); } 50% { transform: translate(14px, 52vh) rotate(160deg); } 100% { transform: translate(-6px, 106vh) rotate(320deg); } }
}

@media (max-width: 860px) {
  .hol-hero__in { grid-template-columns: 1fr; }
  .hol-hero__gifts { height: 230px; max-width: 360px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .hol-snow, .hol-hero__sky { animation: none !important; } .hol-snow { display: none !important; } .hol-gift { animation: none; } }
@media print { .hol-snow { display: none !important; } }

/* the small Christmas gift pop-up and the chat bubble in the holiday colours (the shop matches: its holiday.css) */
.is-holiday .gpop__card { background: var(--stars) 0 0 / 260px 180px, radial-gradient(ellipse 70% 60% at 0% 0%, rgba(229, 169, 59, .28), transparent 70%), linear-gradient(160deg, #1C2A4D, #131B2E); box-shadow: 0 0 0 2px #E5A93B, 0 24px 46px -20px rgba(0, 0, 0, .7); }
.is-holiday .gpop__go { background: #8B263E; }
.is-holiday .gpop__go:hover { background: #E5A93B; color: #16213E; }
.is-holiday .gpop__pill { background: #16213E; box-shadow: 0 0 0 2px #E5A93B, 0 14px 26px -14px rgba(0, 0, 0, .7); }
.is-holiday .gpop__pill:hover { background: #8B263E; }
.is-holiday .hd { --hd-orange: #8B263E; --hd-green: #16213E; --hd-bg: #FBF9F4; --hd-line: #E6DDCB; }
.is-holiday .hd-launcher:hover { background: #6E1C30; }
.is-holiday .nl-pop { --nl-accent: #8B263E; --nl-accent-2: #B4475F; }

/* ---------- home page: the gift-idea slider (replaces the single welcome banner) ---------- */
.hol-slider { padding-bottom: clamp(70px, 8vw, 110px); }
.hol-slider__stage { position: relative; display: grid; }
.hol-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir, 1) * 46px)); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1), visibility 0s .7s; }
.hol-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .1s, transform .7s cubic-bezier(.2, .8, .2, 1) .1s, visibility 0s; z-index: 1; }
.hol-slide.is-out { visibility: visible; opacity: 0; transform: translateX(calc(var(--dir, 1) * -46px)); transition: opacity .5s ease, transform .6s ease, visibility 0s .6s; }
.hol-slide__gift { position: relative; justify-self: center; display: block; width: min(100%, 360px); text-decoration: none; }
.hol-slide__frame { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 12px; border-radius: 20px; background: #FBF9F4; rotate: -3deg; box-shadow: 0 0 0 2px rgba(229, 169, 59, .8), 0 0 50px rgba(229, 169, 59, .4), 0 30px 50px -22px #000; animation: hol-float 6s ease-in-out infinite; }
.hol-slide__frame img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background: #fff; }
.hol-slide__price { position: absolute; right: -6px; bottom: 18px; padding: 8px 16px; border-radius: 999px; background: #8B263E; color: #FBF9F4; font: 700 1.05rem var(--body); box-shadow: 0 0 0 2px #E5A93B, 0 10px 20px -10px #000; rotate: 4deg; }
.hol-slide__gift:hover .hol-slide__frame { box-shadow: 0 0 0 3px #E5A93B, 0 0 70px rgba(229, 169, 59, .55), 0 30px 50px -22px #000; }
.hol-slider__nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.hol-arrow, .hol-pause { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(243, 200, 110, .7); background: rgba(255, 255, 255, .06); color: #FBF9F4; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.hol-arrow:hover, .hol-pause:hover { background: rgba(243, 200, 110, .2); }
.hol-dots { display: flex; gap: 8px; }
.hol-dot { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hol-dot span { width: 10px; height: 10px; border-radius: 50%; background: rgba(251, 249, 244, .35); transition: width .3s, background .3s; }
.hol-dot.is-on span { width: 26px; border-radius: 99px; background: #E5A93B; box-shadow: 0 0 12px rgba(229, 169, 59, .7); }
.hol-pause span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hol-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hol-arrow:focus-visible, .hol-pause:focus-visible, .hol-dot:focus-visible { outline: 2px solid #F3C86E; outline-offset: 2px; }
@media (max-width: 860px) {
  .hol-slide { grid-template-columns: 1fr; gap: 22px; }
  .hol-slide__gift { width: min(72%, 260px); order: -1; }
  .hol-slider__nav { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hol-slide, .hol-slide.is-on, .hol-slide.is-out { transition: none; transform: none; } .hol-slide__frame { animation: none; } }