:root{
      --text:#fffaf2;
      --muted: rgba(255,250,242,.78);
      --stroke: rgba(255,255,255,.16);
      --shadow: 0 18px 46px rgba(0,0,0,.34);
      --radius: 20px;

      /* New Year palette */
      --night1:#071426;
      --night2:#0b1f33;
      --night3:#07190f;

      --y1:#ffd56a; --y2:#ffb347;
      --g1:#68ffb0; --g2:#21d06f;
      --r1:#ff5a6a; --r2:#ff2f7d;

      --minFont:14px;
      --h1:24px;
      --h2:20px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    html{ scroll-behavior:smooth; } /* плавный скролл */
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size: var(--minFont);
      color: var(--text);
      display:flex;
      justify-content:center;
      background:
        radial-gradient(900px 650px at 18% 10%, rgba(255,213,106,.18), transparent 55%),
        radial-gradient(760px 640px at 88% 12%, rgba(104,255,176,.14), transparent 55%),
        radial-gradient(860px 720px at 55% 92%, rgba(255,90,106,.16), transparent 58%),
        linear-gradient(135deg, var(--night1), var(--night2) 55%, var(--night3));
      overflow-x:hidden;
    }

    .wrap{
      width:480px;
      max-width:100%;
      padding:14px 14px 28px;
      position:relative;
    }

    /* Festive background */
    .bg{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:1;
    }
    .bg:before{
      content:"";
      position:absolute; inset:-20px;
      background:
        radial-gradient(10px 10px at 10% 18%, rgba(255,213,106,.35), transparent 60%),
        radial-gradient(12px 12px at 26% 32%, rgba(104,255,176,.26), transparent 60%),
        radial-gradient(8px 8px at 42% 22%, rgba(255,90,106,.28), transparent 60%),
        radial-gradient(11px 11px at 62% 16%, rgba(255,213,106,.25), transparent 60%),
        radial-gradient(9px 9px at 78% 28%, rgba(104,255,176,.20), transparent 60%),
        radial-gradient(12px 12px at 88% 18%, rgba(255,90,106,.20), transparent 60%),
        radial-gradient(9px 9px at 18% 78%, rgba(255,213,106,.18), transparent 60%),
        radial-gradient(12px 12px at 52% 72%, rgba(104,255,176,.16), transparent 60%),
        radial-gradient(10px 10px at 84% 78%, rgba(255,90,106,.16), transparent 60%);
      opacity:.9;
    }
    .snow{
      position:absolute; inset:0;
      background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 60% 18%, rgba(255,255,255,.55) 50%, transparent 55%),
        radial-gradient(2px 2px at 78% 40%, rgba(255,255,255,.65) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 35% 72%, rgba(255,255,255,.55) 50%, transparent 55%),
        radial-gradient(2px 2px at 88% 78%, rgba(255,255,255,.7) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 12% 88%, rgba(255,255,255,.55) 50%, transparent 55%),
        radial-gradient(2px 2px at 48% 92%, rgba(255,255,255,.65) 50%, transparent 55%);
      opacity:.55;
      animation: snowFloat 10s linear infinite;
    }
    @keyframes snowFloat{
      0%{ transform: translateY(-10px); }
      100%{ transform: translateY(18px); }
    }

    a{ color:inherit; text-decoration:none; }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: linear-gradient(135deg, rgba(255,213,106,.16), rgba(104,255,176,.10), rgba(255,90,106,.12));
      box-shadow: 0 12px 30px rgba(0,0,0,.28);
      backdrop-filter: blur(10px);
    }
    .brand i{
      color: var(--y1);
      filter: drop-shadow(0 0 10px rgba(255,213,106,.35));
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      box-shadow: 0 12px 30px rgba(0,0,0,.28);
      backdrop-filter: blur(10px);
      font-weight:900;
      white-space:nowrap;
    }
    .chip i{ color: var(--g1); }

    .card{
      border:1px solid var(--stroke);
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
      box-shadow: var(--shadow);
      padding:16px;
      margin-top:14px;
      overflow:hidden; /* safe */
      position:relative;
    }

    .cardTitle{
      font-size: var(--h2);
      margin:0 0 10px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .cardTitle i{ color: var(--y1); }
    .muted{ color: var(--muted); }

    /* HERO (header image full width) */
    .hero{
      padding:16px;
      border-radius: var(--radius);
      border:1px solid var(--stroke);
      background:
        radial-gradient(520px 260px at 18% 10%, rgba(255,213,106,.22), transparent 62%),
        radial-gradient(520px 260px at 88% 14%, rgba(104,255,176,.16), transparent 60%),
        radial-gradient(520px 260px at 50% 95%, rgba(255,90,106,.16), transparent 62%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .hero:after{
      content:"";
      position:absolute;
      left:-10px; right:-10px; top:-8px;
      height:26px;
      background:
        radial-gradient(7px 7px at 8% 60%, rgba(255,213,106,.95), transparent 60%),
        radial-gradient(7px 7px at 18% 70%, rgba(104,255,176,.92), transparent 60%),
        radial-gradient(7px 7px at 28% 60%, rgba(255,90,106,.92), transparent 60%),
        radial-gradient(7px 7px at 38% 70%, rgba(255,213,106,.90), transparent 60%),
        radial-gradient(7px 7px at 48% 60%, rgba(104,255,176,.88), transparent 60%),
        radial-gradient(7px 7px at 58% 70%, rgba(255,90,106,.88), transparent 60%),
        radial-gradient(7px 7px at 68% 60%, rgba(255,213,106,.92), transparent 60%),
        radial-gradient(7px 7px at 78% 70%, rgba(104,255,176,.90), transparent 60%),
        radial-gradient(7px 7px at 88% 60%, rgba(255,90,106,.90), transparent 60%);
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
      opacity:.95;
      pointer-events:none;
    }

    h1{
      font-size: var(--h1);
      line-height:1.15;
      margin:10px 0 10px;
      letter-spacing:.2px;
    }
    .sub{
      margin:0 0 14px;
      color: var(--muted);
      line-height:1.6;
    }

    .imgBox{
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.18);
      overflow:hidden;
      background: rgba(0,0,0,.16);
      box-shadow: 0 16px 36px rgba(0,0,0,.35);
    }
    .imgBox img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* Full-width hero image */
    .heroImg{
      height: 420px;
      margin: 10px 0 12px;
    }

    .timerBox{
      padding:12px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.18);
      background: linear-gradient(135deg, rgba(255,213,106,.14), rgba(104,255,176,.10), rgba(255,90,106,.12));
      box-shadow: 0 12px 30px rgba(0,0,0,.28);
      backdrop-filter: blur(10px);
    }
    .timerTitle{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:1000;
      margin-bottom:8px;
    }
    .timerTitle i{ color: var(--y1); }
    .timer{
      font-variant-numeric: tabular-nums;
      font-size: 20px;
      letter-spacing:1px;
      font-weight:1000;
      display:flex;
      gap:8px;
      align-items:center;
    }
    .timer .pill{
      min-width: 62px;
      text-align:center;
      padding:10px 10px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(0,0,0,.22);
    }
    .timerSmall{
      color: var(--muted);
      margin-top:8px;
      font-size:14px;
      line-height:1.45;
    }

    /* Buttons (2 in hero only) */
    .btnRow{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:12px;
    }

    .btn{
      display:inline-flex;
      justify-content:center;
      align-items:center;
      gap:10px;
      width:100%;
      padding:16px 14px;
      border:0;
      border-radius: 16px;
      cursor:pointer;
      font-weight:1000;
      font-size:16px;
      color:#102013;
      background: linear-gradient(135deg, var(--g1), var(--g2));
      box-shadow: 0 18px 38px rgba(33,208,111,.18), 0 14px 30px rgba(0,0,0,.34);
      transition: transform .12s ease, filter .12s ease;
      min-height: 52px;
    }
    .btn:hover{ transform: translateY(-1px); filter:saturate(1.08); }
    .btn:active{ transform: translateY(0) scale(.99); }

    .btn.yellow{
      color:#1b1306;
      background: linear-gradient(135deg, var(--y1), var(--y2));
      box-shadow: 0 18px 38px rgba(255,179,71,.18), 0 14px 30px rgba(0,0,0,.34);
    }
    .btn.ghost{
      background: rgba(0,0,0,.18);
      color: var(--text);
      border:1px solid rgba(255,255,255,.22);
      box-shadow: 0 14px 28px rgba(0,0,0,.28);
    }

    /* Description images */
    .descGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:12px;
    }
    .descGrid .big{ grid-column: 1 / -1; height: 210px; }
    .descGrid .sm{ height: 140px; }

    /* Advantages */
    .benefit{ display:grid; gap:10px; margin-top:10px; }
    .benefitItem{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      border-radius: 18px;
      padding:12px;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .benefitIcon{
      width:42px; height:42px;
      border-radius: 14px;
      display:flex; align-items:center; justify-content:center;
      border:1px solid rgba(255,255,255,.18);
      background: linear-gradient(135deg, rgba(255,213,106,.14), rgba(104,255,176,.10), rgba(255,90,106,.12));
      box-shadow: 0 14px 26px rgba(0,0,0,.22);
      flex:0 0 auto;
    }
    .benefitIcon i{ color:#fff; }
    .benefitText b{ display:block; margin-bottom:4px; }
    .benefitText span{ color: var(--muted); line-height:1.55; display:block; }

    /* Catalog (FIX overflow + responsive column) */
    .catalog{ display:grid; gap:12px; margin-top:10px; }
    .productCard{
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.16);
      border-radius: 20px;
      padding:12px;
      display:grid;
      gap:12px;
      box-shadow: 0 16px 38px rgba(0,0,0,.34);
      align-items:start;
      max-width: 100%;
      overflow:hidden;
    }
    .prodImg{
      width:100%;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.18);
      overflow:hidden;
      background: rgba(0,0,0,.14);
      box-shadow: 0 14px 30px rgba(0,0,0,.32);
      flex: 0 0 auto;
    }
    .prodImg img{ width:100%; height:100%; object-fit:cover; display:block; }

    .prodName{
      font-weight:1000;
      font-size:16px;
      line-height:1.35;
      margin:0;
      word-break: break-word;
    }

    .priceRow{
      display:flex;
      flex-wrap:wrap;
      align-items:baseline;
      gap:10px 12px;
      margin:10px 0 10px;
    }
    .price{ font-size:22px; font-weight:1100; }
    .old{
      color: rgba(255,255,255,.62);
      text-decoration: line-through;
      font-weight:900;
    }
    .sale{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background: linear-gradient(135deg, rgba(255,90,106,.14), rgba(104,255,176,.10));
      font-weight:1000;
      color:#fff;
    }

    .bullets{
      display:grid;
      gap:8px;
      margin:10px 0 0;
      padding:0;
      list-style:none;
    }
    .bullets li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      line-height:1.45;
      min-width:0;
    }
    .bullets i{
      margin-top:2px;
      color: var(--g1);
      filter: drop-shadow(0 0 10px rgba(104,255,176,.22));
      flex:0 0 auto;
    }

    .prodActions{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:12px;
      min-width:0;
    }
    .prodActions .btn{
      padding:14px 12px;
      font-size:15px;
      min-height: 48px;
    }

    /* Specs */
    .specs{
      display:grid;
      gap:12px;
      align-items:start;
      margin-top:10px;
    }
    table{
      width:100%;
      border-collapse: collapse;
      overflow:hidden;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.12);
    }
    td{
      padding:10px 10px;
      border-bottom:1px solid rgba(255,255,255,.10);
      vertical-align:top;
      line-height:1.35;
    }
    tr:last-child td{ border-bottom:0; }
    td:first-child{
      width:42%;
      color: rgba(255,255,255,.86);
      font-weight:1000;
    }
    td:last-child{ color: var(--muted); }

    .note{
      margin-top:12px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(135deg, rgba(255,213,106,.12), rgba(104,255,176,.10), rgba(255,90,106,.12));
      border-radius: 18px;
      padding:12px;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .note i{
      font-size: 18px;
      margin-top:2px;
      color: var(--y1);
      filter: drop-shadow(0 0 10px rgba(255,213,106,.22));
    }
    .note b{ display:block; margin-bottom:5px; }
    .note span{ display:block; color: var(--muted); line-height:1.55; }

    /* Reviews Slick */
    .reviews .slick-slide{ padding:6px; }
    .reviewCard{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      border-radius: 18px;
      padding:12px;
      min-height: 150px;
      box-shadow: 0 14px 26px rgba(0,0,0,.22);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .reviewTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .who{ display:flex; align-items:center; gap:10px; }
    .avatar{
      width:38px; height:38px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.18);
      background: linear-gradient(135deg, rgba(255,213,106,.14), rgba(255,90,106,.12));
      display:flex; align-items:center; justify-content:center;
      box-shadow: 0 12px 22px rgba(0,0,0,.25);
      color:#fff;
      font-weight:1100;
    }
    .stars{
      color: var(--y1);
      letter-spacing:1px;
      filter: drop-shadow(0 0 10px rgba(255,213,106,.22));
      white-space:nowrap;
    }
    .reviewText{ color: rgba(255,255,255,.92); line-height:1.55; }
    .reviewMeta{ color: var(--muted); font-size:14px; }

    .slick-dots{ bottom:-22px; }
    .slick-dots li button:before{
      font-size: 10px;
      opacity: .35;
      color: #fff;
    }
    .slick-dots li.slick-active button:before{
      opacity: .95;
      color: #fff;
      filter: drop-shadow(0 0 10px rgba(255,213,106,.30));
    }

    /* Steps */
    .steps{ display:grid; gap:10px; margin-top:10px; }
    .step{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      border-radius: 18px;
      padding:12px;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .stepNum{
      width:38px; height:38px;
      border-radius: 14px;
      display:flex; align-items:center; justify-content:center;
      font-weight:1100;
      color:#1b1306;
      background: linear-gradient(135deg, var(--y1), var(--y2));
      box-shadow: 0 14px 26px rgba(0,0,0,.22);
      flex:0 0 auto;
    }
    .step b{ display:block; margin-bottom:4px; }
    .step span{ display:block; color: var(--muted); line-height:1.55; }

    /* ORDER (full-width image inside form block) */
    .orderHero{
      height: 400px;
      margin: 10px 0 12px;
    }

    .form{ display:grid; gap:10px; }
    label{ font-weight:1000; }
    .field{ display:grid; gap:6px; }
    input, select{
      width:100%;
      padding:13px 12px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.18);
      color:#fff;
      outline:none;
      font-size:14px;
    }
    input::placeholder{ color: rgba(255,255,255,.55); }
    select option{ color:#111; }
    .hint{
      color: var(--muted);
      font-size:14px;
      line-height:1.45;
      margin-top:4px;
    }
    .fineprint{
      color: rgba(255,255,255,.70);
      font-size:14px;
      line-height:1.55;
      margin-top:14px;
      text-align:center;
    }

    /* CTA for form: not red тревожно, use warm yellow/green */
    .btn.cta{
      background: linear-gradient(135deg, var(--y1), var(--y2));
      color:#1b1306;
      box-shadow: 0 18px 38px rgba(255,179,71,.18), 0 14px 30px rgba(0,0,0,.34);
    }

    /* Very small screens safety */
    @media (max-width: 380px){
      .heroImg{ height: 360px; }
      .orderHero{ height: 360px; }
    }