:root{
      --bg: #FFFFFF;
      --ink: #0A0A0A;
      --muted: #4D4D4D;
      --line: #E0E0E0;
      --card: #FAFAFA;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
      --radius: 16px;
    }

    /* ===== Global polish ===== */
    body{ background:var(--bg); color:var(--ink); }
    .section-title h2{
      font-weight:800; letter-spacing:.2px;
      margin-bottom:.5rem;
    }
    .section-title .section-subtitle{
      color:var(--muted);
      max-width:720px; margin:0 auto 1.5rem;
    }
    .section-title .underline{
      width:88px;height:3px;background:#000;margin:.75rem auto 0;border-radius:999px;
    }

    /* ===== Banner (full-bleed) ===== */
    .banner-hero{ margin:0; width:100%; position:relative; isolation:isolate; }
    .banner-hero .banner-img{
      display:block; width:100%;
      height: clamp(280px, 45vw, 640px);
      object-fit: cover; object-position: 50% 35%;
      transform: translateZ(0);
      will-change: transform;
      transition: transform .6s cubic-bezier(.2,.8,.2,1);
    }
    .banner-hero::after{
      /* soft top fade so the banner blends under the header */
      content:""; position:absolute; inset:0 0 auto 0; height:120px;
      background: linear-gradient(180deg, rgba(0,0,0,.25), transparent);
      pointer-events:none;
    }
    .banner-hero:hover .banner-img{ transform: scale(1.01); }

    /* Optional caption chip (feel free to remove if you want pure image) */
    .banner-chip{
      position:absolute; left:24px; bottom:24px;
      background: rgba(255,255,255,.9);
      color:#000; padding:.5rem .9rem; border-radius:999px;
      box-shadow: var(--shadow); font-weight:600; font-size:.9rem;
      backdrop-filter: blur(4px);
    }

    /* ===== “Limited Time Promotions” ===== */
    .promotions-section{
      padding: 64px 0;
      background: #000; color:#fff;
      position:relative; overflow:hidden;
    }
    .promotions-section::before{
      content:""; position:absolute; inset:-40% -20% auto -20%; height:240px;
      background: radial-gradient(60% 80% at 20% 40%, rgba(255,255,255,.08), transparent 60%);
      pointer-events:none;
      transform: rotate(-5deg);
    }
    .promo-card{
      position:relative; background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.18);
      border-radius: var(--radius); padding:24px;
      backdrop-filter: blur(6px);
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
      transform: translateY(8px);
      transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
    }
    .promo-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
    }
    .promo-badge{
      position:absolute; top:16px; right:16px;
      background:#fff; color:#000; font-weight:800;
      padding:6px 12px; border-radius:999px; font-size:.8rem;
    }
    .promo-btn{
      background:#fff; border:0; color:#000; font-weight:700;
      padding:10px 18px; border-radius:10px;
      transition: transform .2s ease;
    }
    .promo-btn:active{ transform: translateY(1px) scale(.98); }

    /* ===== Product grids (New Arrivals & Popular) ===== */
    .featured-section{ background:var(--card); padding:64px 0; }
    .popular-section{ background:#fff; padding:64px 0; }

    .product-card{
      background:#fff; border:1px solid var(--line);
      border-radius: var(--radius); overflow:hidden;
      box-shadow: var(--shadow);
      transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
      position:relative;
    }
    .product-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 14px 30px rgba(0,0,0,.12);
    }
    .product-card img{
      width:100%; aspect-ratio: 4/3; object-fit: cover;
      background:#f3f3f3;
      transition: transform .5s ease;
    }
    .product-card:hover img{ transform: scale(1.03); }
    .product-card .content{ padding:16px 18px 18px; }
    .product-title{ font-size:1.02rem; font-weight:700; margin:.25rem 0 .35rem; }
    .product-price{ font-weight:800; margin:0; }
    .badge-corner{
      position:absolute; top:12px; left:12px;
      background:#000; color:#fff; padding:4px 10px; border-radius:999px;
      font-size:.7rem; font-weight:800; letter-spacing:.3px;
    }
    .btn-primary, .btn-dark{
      border-radius:10px; font-weight:700; letter-spacing:.2px;
      box-shadow:none; border:1px solid #000;
    }
    .btn-primary{ background:#000; }
    .btn-primary:hover{ background:#111; border-color:#111; }

    /* ===== Newsletter ===== */
    .newsletter-section{
      background:#000; color:#fff; padding:72px 0;
    }
    .newsletter-form{
      max-width:600px; margin-inline:auto; display:flex; gap:12px;
    }
    .newsletter-form input{
      background:#fff; border:0; border-radius:12px; padding:14px 16px;
    }
    .newsletter-form .btn{
      background:#fff; color:#000; font-weight:800; border-radius:12px; padding:12px 20px;
    }

    /* ===== Reveal-on-scroll ===== */
    [data-animate]{ opacity:0; transform: translateY(18px); transition: all .7s cubic-bezier(.2,.8,.2,1); }
    [data-animate].in{ opacity:1; transform: none; }