:root{
    --cream:#FBF8F0; --paper:#FFFFFF;
    --green-900:#010101; --green-700:#0d0e0d; --green-500:#5C8A47;
    --sage-100:#EDF3E2; --sage-200:#DCE8CC;
    --chilli:#C63A1E; --chilli-dark:#9E2C14; --gold:#E6A92E;
    --ink:#2A2820; --muted:#6E7763; --line:#E3E0D4;
    --radius:20px; --shadow:0 22px 48px -26px rgba(35,74,30,.5);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(#FFFFFF);
    color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
  img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover
  }
   @media (max-width: 100px) {
  img {
    width: 100%;
    height: auto;
  }
}

  /* ---- header ---- */
  header{position:sticky;top:0;z-index:30;background:rgba(251,248,240,.9);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .bar{max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;
    align-items:center;justify-content:space-between;gap:20px}
  .brand{display:flex;align-items:center;gap:12px;font-family:"Fraunces",serif;
    font-weight:600;font-size:1.25rem;color:var(--green-900)}
  .brand .mark{width:38px;height:38px;border-radius:11px;flex:none;display:grid;
    place-items:center;color:#fff;font-size:1.1rem;
    background:linear-gradient(140deg,var(--green-700),var(--green-500))}
  nav{display:flex;gap:26px}
  nav a{color:var(--green-900);text-decoration:none;font-weight:500;font-size:.94rem;opacity:.78}
  nav a:hover,nav a.active{opacity:1}
  nav a.active{color:var(--chilli)}
  .menu-btn{display:none;background:none;border:0;font-size:1.5rem;color:var(--green-900);cursor:pointer}

  /* ---- page hero ---- */
  .hero{max-width:1180px;margin:0 auto;padding:56px 28px 12px;text-align:center}
  .hero .eyebrow{color:var(--chilli);font-weight:600;font-size:.82rem;letter-spacing:.16em;
    text-transform:uppercase}
  .hero h1{font-family:"Fraunces",serif;font-weight:600;font-size:3rem;letter-spacing:-.02em;
    color:var(--green-900);margin:8px 0 10px}
  .hero p{max-width:560px;margin:0 auto;color:var(--muted);font-size:1.05rem}

  /* ---- variety block ---- */
  .catalog{max-width:1180px;margin:0 auto;padding:30px 28px 90px;display:grid;gap:34px}
  .variety{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);overflow:hidden;
    display:grid;grid-template-columns:1fr 1fr;
  }
  .variety.reverse .media{order:2}
  .variety.reverse .detail{order:1}

  /* media side */
  .media{position:relative;background:var(--sage-100);min-height:420px;padding:26px}
  .chilli-art{width:100%;height:100%;border-radius:14px;display:block}
  .pungency-chip{position:absolute;top:22px;left:22px;z-index:3;background:var(--chilli);
    color:#fff;font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
    padding:7px 14px;border-radius:999px;box-shadow:0 8px 18px -7px rgba(198,58,30,.75)}

  /* seed packet (swap with real pouch photo) */
  .packet{position:absolute;bottom:18px;right:18px;width:150px;border-radius:14px;overflow:hidden;
    background:#fff;box-shadow:0 16px 34px -12px rgba(0,0,0,.45);transform:rotate(3deg);
    border:1px solid rgba(0,0,0,.06)}

   @media (max-width: 768px) {
  .packet {
    width: 100px; /* Mobile size */
  }
  }
  .variety.reverse .packet{right:auto;left:18px;transform:rotate(-3deg)}
  .packet-top{background:linear-gradient(180deg,var(--chilli),var(--chilli-dark));color:#fff;
    padding:9px 12px 7px;display:flex;align-items:center;gap:6px;font-weight:700;
    font-size:.72rem;letter-spacing:.08em}
  .packet-top span{font-size:.95rem}
  .packet-num{font-family:"Fraunces",serif;font-weight:700;font-size:2.2rem;color:var(--ink);
    text-align:center;line-height:1;padding:10px 0 2px}
  .packet-sub{text-align:center;font-size:.56rem;font-weight:700;letter-spacing:.12em;
    color:var(--muted);text-transform:uppercase;padding-bottom:9px}
  .packet-win{height:62px;background:linear-gradient(160deg,#6FA64A,#3C6B2E);position:relative;overflow:hidden}
  .packet-win svg{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:120px;opacity:.92}

  /* detail side */
  .detail{padding:38px 40px}
  .detail .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--chilli);
    font-weight:600;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px}
  .detail .eyebrow::before{content:"";width:24px;height:2px;background:var(--chilli)}
  .detail h2{font-family:"Fraunces",serif;font-weight:600;font-size:2rem;letter-spacing:-.02em;
    color:var(--green-900);margin-bottom:18px}

  table.spec{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);
    border-radius:13px;overflow:hidden}
  table.spec th,table.spec td{padding:10px 16px;text-align:left;font-size:.9rem}
  table.spec th{font-weight:500;color:var(--green-900);width:48%;background:var(--sage-100)}
  table.spec td{font-weight:600;color:var(--ink)}
  table.spec tr:not(:last-child) th,table.spec tr:not(:last-child) td{border-bottom:1px solid var(--line)}
  table.spec td .hot{color:var(--chilli)}

  .features{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px}
  .features .feat{display:inline-flex;align-items:center;gap:7px;background:var(--sage-100);
    color:var(--green-900);font-weight:500;font-size:.84rem;padding:7px 13px;border-radius:999px}
  .features .feat::before{content:"✓";color:var(--green-700);font-weight:700}

  .actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:11px;
    font-weight:600;font-size:.9rem;text-decoration:none;border:0;cursor:pointer;transition:transform .15s}
  .btn-primary{background:var(--chilli);color:#fff;box-shadow:0 12px 24px -12px rgba(198,58,30,.8)}
  .btn-primary:hover{transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--green-900);border:1.5px solid var(--green-500)}
  .btn-ghost:hover{background:var(--sage-100)}

  @media(max-width:880px){
    nav{display:none} .menu-btn{display:block}
    .hero h1{font-size:2.3rem}
    .variety,.variety.reverse{grid-template-columns:1fr}
    .variety .media,.variety.reverse .media{order:1}
    .variety .detail,.variety.reverse .detail{order:2}
    .media{min-height:340px}
    .detail{padding:30px 26px}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}