/* Dealoft design v2: illustrated look with the price-tag mascot.
   Loaded only when config('design') is 'v2'; delete or set 'classic' to go back. */

/* Hero: illustration on the right, softer navy with a warm glow */
.design-v2 .hero{background:radial-gradient(ellipse at 78% 40%,#22396A 0%,#101F3B 62%);min-height:540px}
.design-v2 .hero::before{background:radial-gradient(circle at 80% 55%,rgba(255,121,61,.22),transparent 42%)}
.hero-illus{position:relative;flex:1 1 480px;min-height:500px;display:flex;align-items:center;justify-content:center;padding:24px 24px 24px 0}
.hero-illus picture{display:block;width:100%;max-width:620px}
.hero-illus img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));animation:v2-float 6s ease-in-out infinite}
.hero-illus .tag{right:28px;top:40px}
.hero-illus .mini{right:24px;bottom:36px}
@keyframes v2-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hero-illus img{animation:none}}

/* Category chips with icons */
.design-v2 .chip{gap:9px;padding:0 16px 0 12px;border-radius:999px}
.chip-ic{width:22px;height:22px;flex:0 0 22px}
.design-v2 .chip.active .chip-ic{filter:brightness(0) invert(1)}

/* Categories page */
/* Categories page: cream cards, 3 per row, name left and big icon in a white circle on the right */
.design-v2 .cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.design-v2 .cat-tile{position:relative;overflow:hidden;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:16px;
  min-height:170px;padding:30px 30px 30px 32px;border:1px solid #FFD9C6;border-radius:24px;background:linear-gradient(135deg,#FFF4EE 0%,#FFFFFF 70%);
  transition:transform .18s ease,box-shadow .18s ease}
.design-v2 .cat-tile:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(194,78,21,.45);color:inherit}
.cat-ic{width:132px;height:132px;flex:0 0 132px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -18px rgba(194,78,21,.55)}
.cat-ic img{width:92px;height:92px}
.design-v2 .cat-tile b{display:block;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin-bottom:6px}
.design-v2 .cat-tile span:not(.cat-ic){display:inline-block;margin-top:8px;padding:6px 12px;border-radius:999px;background:#101F3B;color:#fff;font-size:13px;font-weight:700}
@media (max-width:1000px){.design-v2 .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .design-v2 .cat-grid{grid-template-columns:1fr;gap:12px}
  .design-v2 .cat-tile{min-height:0;padding:18px 18px 18px 22px}
  .cat-ic{width:88px;height:88px;flex-basis:88px}
  .cat-ic img{width:62px;height:62px}
  .design-v2 .cat-tile b{font-size:21px}
}

/* Seasonal banners behind the countdown */
.countdown.has-banner{position:relative;overflow:hidden;min-height:220px;background:#101F3B var(--banner) right center/cover no-repeat}
.countdown.has-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,31,59,.96) 0%,rgba(16,31,59,.85) 45%,rgba(16,31,59,.15) 100%)}
.countdown.has-banner>*{position:relative}
/* Keep text and clock on the left, over the dark part; the artwork stays visible on the right */
.countdown.has-banner{flex-direction:column;align-items:flex-start;justify-content:center;gap:18px}
.countdown.has-banner>div:first-child,.countdown.has-banner .countdown-clock{max-width:min(560px,58%)}
.countdown.banner-christmas{background-color:#FFF4EE}
.countdown.banner-christmas::before{background:linear-gradient(90deg,rgba(255,244,238,.97) 0%,rgba(255,244,238,.9) 45%,rgba(255,244,238,.1) 100%)}
.countdown.banner-christmas{color:var(--ink)}
.countdown.banner-christmas .countdown-clock span{background:#fff;box-shadow:0 6px 18px -10px rgba(16,31,59,.35)}
.countdown.banner-christmas .countdown-clock small{color:var(--muted)}

/* Mascot on empty states and simple pages */
.empty-mascot{display:block;width:150px;height:auto;margin:0 auto 12px}
.prose.with-mascot{text-align:center;margin-left:auto;margin-right:auto}
.prose.with-mascot .search{margin-left:auto;margin-right:auto}
.page-mascot{display:block;width:200px;height:auto;margin:0 auto 8px}

/* Newsletter banner gets the happy mascot peeking in */
.design-v2 .banner{position:relative;overflow:hidden}
/* Mascot sits in its own space on the right, so it never covers the form */
.design-v2 .banner{padding-right:clamp(28px,4vw,40px)}
.design-v2 .banner::after{content:"";flex:0 0 170px;align-self:flex-end;width:170px;height:170px;margin:-20px -10px -44px 0;background:url('/assets/img/v2/mascot-happy.webp') center bottom/contain no-repeat;pointer-events:none;position:static}
@media (max-width:1100px){.design-v2 .banner::after{display:none}}

@media (max-width:760px){
  /* Mobile: illustration under the text instead of hidden */
  .hero-illus{display:flex;flex:1 1 100%;min-height:0;padding:0 16px 24px;margin-top:-12px}
  .hero-illus picture{max-width:420px}
  .hero-illus .tag,.hero-illus .mini{display:none}
  .countdown.has-banner{background-position:70% center}
  .countdown.has-banner>div:first-child,.countdown.has-banner .countdown-clock{max-width:100%}
  .countdown.has-banner::before{background:linear-gradient(180deg,rgba(16,31,59,.94) 0%,rgba(16,31,59,.8) 100%)}
  .countdown.banner-christmas::before{background:linear-gradient(180deg,rgba(255,244,238,.96) 0%,rgba(255,244,238,.88) 100%)}
}
.countdown.banner-christmas .eyebrow{color:var(--tangerine-text)}