
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#f6f3ef;font-family:Arial,Helvetica,sans-serif;color:#111}
  body{min-height:100vh}
 .hero {
    height: 76px;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-top: 3px solid rgb(255 90 0);
}
 /* .hero:before{
    content:"";
    position:absolute;inset:auto 0 0 0;height:48px;
    background:
      radial-gradient(110px 58px at 11% 100%,#3f6f2c 0 55%,transparent 56%),
      radial-gradient(190px 80px at 28% 110%,#2d5a27 0 50%,transparent 51%),
      linear-gradient(160deg,transparent 0 15%,#f3fbff 16% 20%,#a8c9dc 21% 30%,transparent 31%),
      linear-gradient(200deg,transparent 0 38%,#f6fbff 39% 43%,#9abbd0 44% 51%,transparent 52%);
    opacity:.95;
  }*/
  .flag{display:none;
    position:absolute;left:60px;top:0;width:95px;height:150px;background:#d71920;
    clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);
    box-shadow:0 4px 14px rgba(0,0,0,.25)
  }
  .flag:before,.flag:after{content:"";position:absolute;background:#fff;left:50%;top:52%;transform:translate(-50%,-50%)}
  .flag:before{width:52px;height:18px}
  .flag:after{width:18px;height:52px}
  .brand{position:absolute;left:34px;top:50%;transform:translateY(-50%);text-align:left;z-index:2}
  .brand .logo{font-size:34px;line-height:1;font-weight:900;letter-spacing:.4px;color:#ff5a00}
  .brand .tag{font-size:12px;font-weight:700;margin-top:2px;color:#333}
  .brand .tag b{color:#ff5a00}
  .store{display:none}
  .store:before{content:""}
.fotesr {
    width: 100%;
    text-align: center;
    background: #f0f0f0;
    padding: 21px 0;
}

  .wrap{max-width:1120px;margin:24px auto 48px;padding:0 20px;display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:start}
  .card{background:#fff;border:1px solid #ece7e2;border-radius:20px;box-shadow:0 14px 40px rgba(26,18,10,.09);padding:16px}
  .product{background:#fff;border-radius:16px;padding:10px 16px 0;text-align:center}
  .product img{width:100%;max-height:350px;object-fit:contain;display:block;margin:auto}
  .price-row{display:grid;grid-template-columns:1fr 1.05fr;gap:20px;margin-top:10px;align-items:end}
  .oldbox{padding:10px 16px 4px}
  .label{font-size:20px;color:#444;margin-bottom:4px}
  .old{font-size:28px;font-weight:800;color:#555;position:relative;display:inline-block}
  .old:after{content:"";position:absolute;height:4px;background:#e01919;left:-8px;right:-8px;top:54%;transform:rotate(-7deg);border-radius:3px}
  .newbox{background:linear-gradient(135deg,#fff3e8,#fde7d8);border-radius:16px;padding:12px 18px}
  .newbox .label{font-weight:800;color:#d71920}
  .new{font-size:28px;font-weight:900;color:#d71920;line-height:1.08}
  .meta{display:grid;grid-template-columns:1fr 1.06fr;gap:18px;margin-top:18px}
  .meta-box{border:1px solid #e7e3df;border-radius:14px;padding:14px 16px;min-height:100px;background:#fff}
  .meta-head{font-size:13px;color:#555;margin-bottom:9px}
  .coupon{display:inline-block;border:2px dashed #248a2e;background:#f2fff3;color:#0f7b24;font-weight:900;font-size:26px;padding:6px 12px}
  .delivery{font-size:18px;font-weight:700;margin-top:12px}
  .timerbox{display:grid;grid-template-columns:120px 1fr;align-items:center;background:#ffe7e7;border-radius:14px;margin-top:18px;padding:12px 16px}
  .timer-icon{font-size:64px;text-align:center;color:#d71920}
  .timer-copy{font-size:19px}
  .timer{font-size:48px;font-weight:900;color:#d71920;line-height:1}
  .cta{width:100%;margin-top:14px;border:0;border-radius:17px;background:linear-gradient(90deg,#ff6200,#ff7a00);color:#fff;font-weight:900;font-size:18px;padding:22px 20px;cursor:pointer;box-shadow:0 5px 0 #d94c00;transition:.15s}
  .cta:hover{transform:translateY(-1px)}
  .cta:active{transform:translateY(2px);box-shadow:0 2px 0 #d94c00}

  .content{padding:24px 4px 0}
  h1{font-size:38px;margin:0 0 18px;line-height:1.15;letter-spacing:-.6px}
.lead {
    font-size: 17px;
    margin: 0 0 24px;
    color: #252525;
}

  .lead strong{color:#ff5a00}
  .feature{display:grid;grid-template-columns:66px 1fr;gap:16px;align-items:center;margin:20px 0}
  .ico{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:32px}
  .i1{background:#dff4df;color:#0a841b} .i2{background:#fff0d9;color:#ec7d00} .i3{background:#dfeffc;color:#2f72b9}
  .feature b{display:block;font-size:21px;margin-bottom:4px}
  .feature span{font-size:17px;color:#6d6d6d}
  .reserve{margin-top:26px;border:1px solid #ffc4c0;background:linear-gradient(135deg,#fff2f1,#ffe8e6);border-radius:16px;padding:16px 18px;display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;box-shadow:0 8px 22px rgba(199,39,27,.05)}
  .reserve .clock{font-size:38px;color:#d71920;text-align:center}
  .reserve p{margin:0;font-size:17px;line-height:1.5}
  .reserve strong{color:#d71920}

  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:22px;z-index:99}
  .overlay.show{display:flex}
  .modal{width:min(560px,96vw);background:#fff;border-radius:22px;box-shadow:0 28px 80px rgba(0,0,0,.32);overflow:hidden}
  .modal-head{background:linear-gradient(90deg,#f45b08,#ff7a16);color:#fff;padding:18px 22px;font-size:23px;font-weight:800}
  .modal-body{padding:24px}
  .q{margin-bottom:18px}
  .q label.title{font-size:19px;font-weight:800;display:block;margin-bottom:10px}
  .opts{display:grid;gap:9px}
  .opt{border:1px solid #ddd;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:center;cursor:pointer}
  .opt:hover{background:#fff7f2;border-color:#ff9b62}
  .next{width:100%;border:0;border-radius:12px;background:#ff5a00;color:#fff;font-size:20px;font-weight:800;padding:15px;cursor:pointer}
  .loading{display:none;text-align:center;padding:48px 24px}
  .spinner{width:66px;height:66px;border:7px solid #eee;border-top-color:#ff5a00;border-radius:50%;margin:0 auto 22px;animation:spin .9s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .final{display:none;text-align:center;padding:34px 26px}
  .final .tick{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;background:#e2f7e4;color:#138928;font-size:54px;margin:0 auto 18px}
  .final h2{font-size:30px;margin:0 0 12px}
  .final p{font-size:17px;line-height:1.5;color:#555}
  .close{margin-top:12px;border:0;background:#222;color:#fff;border-radius:10px;padding:13px 26px;font-size:18px;cursor:pointer}


  .cart-icon{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.06);z-index:3}
  .cart-icon svg{width:24px;height:24px;stroke:#ff5a00;stroke-width:2;fill:none}
  .progress{display:flex;gap:7px;margin:0 0 20px}.progress span{height:5px;flex:1;border-radius:999px;background:#ececec}.progress span.active{background:#ff6508}
  .q{display:none}.q.active{display:block}
  .step-note{font-size:14px;color:#888;margin-bottom:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
  .final-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0;text-align:left}.summary-item{border:1px solid #eee6df;background:#fffaf6;border-radius:12px;padding:13px}.summary-item small{display:block;color:#888;font-size:12px;margin-bottom:5px}.summary-item strong{font-size:17px;color:#222}.summary-item.highlight{background:#fff0e6;border-color:#ffd1b6}.summary-item.highlight strong{color:#e34d00;font-size:22px}.secure-note{font-size:13px!important;color:#7a7a7a!important;margin-top:4px!important}

  @media (max-width:950px){
    .wrap{grid-template-columns:1fr;gap:24px}
    .content{padding-top:5px}
    .store{display:none}
    .flag{left:20px;width:70px;height:120px}
    .brand .logo{font-size:30px}
    .brand .tag{font-size:11px}
    .hero{height:68px}
  }
  @media (max-width:620px){
    .wrap{padding:0 12px;margin-top:16px}
    .cart-icon{right:14px;width:40px;height:40px}
    .brand{left:14px}
    .card{padding:12px;border-radius:16px}
    .price-row,.meta{grid-template-columns:1fr}
    h1{font-size:34px}
    .lead{font-size:21px}
    .feature{grid-template-columns:70px 1fr}
    .ico{width:64px;height:64px;font-size:34px}
    .feature b{font-size:21px}
    .feature span{font-size:18px}
    .timerbox{grid-template-columns:80px 1fr}
    .timer-icon{font-size:48px}
    .timer{font-size:42px}
    .cta{font-size:22px}
  }
