:root { --jade:#2E7D5B; --jadedk:#1E5840; --ivory:#F5EFDD; --cream:#FFFDF5;
          --ink:#2B2B2B; --teal:#3E8E8C; --mustard:#C88A2E; --brass:#D4AA50;
          --crak:#B92020; --soft:#8A8270; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--ivory); color:var(--ink);
         font-family:Georgia,'Times New Roman',serif; font-size:17.5px; line-height:1.65; }
  .wrap { max-width:1020px; margin:0 auto; background:var(--cream);
          border-left:1px solid #E3DCC6; border-right:1px solid #E3DCC6; min-height:100vh; }
  a { color:var(--teal); }

  header { background:var(--ivory); text-align:center; padding:26px 16px 6px;
           border-bottom:6px solid var(--jade); }
  header img.logo { width:280px; max-width:72%; height:auto; cursor:pointer; }
  .tagline { color:var(--soft); font-style:italic; font-size:15px; margin:6px 0 10px; }
  .dots { text-align:center; margin:18px 0; }
  .dots span { display:inline-block; width:11px; height:11px; border-radius:50%; margin:0 7px; }
  .dots span:nth-child(1){background:var(--jade);} .dots span:nth-child(2){background:var(--mustard);}
  .dots span:nth-child(3){background:var(--teal);} .dots span:nth-child(4){background:var(--crak);}
  .dots span:nth-child(5){background:var(--brass);}

  nav { text-align:center; padding:12px 8px; background:var(--jadedk); position:sticky; top:0; z-index:9; }
  nav a { color:var(--ivory); text-decoration:none; margin:0 13px; font-size:15.5px; }
  nav a:hover { color:var(--brass); }
  nav a.cartlink { border:1.5px solid var(--brass); border-radius:999px; padding:4px 14px; }

  main { padding:8px 44px 34px; }
  @media (max-width:640px){ main { padding:8px 16px 26px; } }
  h1 { color:var(--jadedk); font-size:34px; margin:30px 0 10px; }
  h2 { color:var(--teal); font-size:25px; margin:34px 0 10px; }
  h2 .dia, h1 .dia { display:inline-block; width:12px; height:12px; background:var(--mustard);
       transform:rotate(45deg); margin-right:12px; }
  .lede { font-size:19px; }
  .sig { font-style:italic; color:var(--jadedk); }

  .hero { display:flex; gap:34px; align-items:center; flex-wrap:wrap; margin-top:22px; }
  .hero img { width:300px; max-width:100%; border-radius:14px; }
  .hero > div { flex:1; min-width:280px; }
  .btn { display:inline-block; background:var(--jade); color:var(--ivory); text-decoration:none;
         padding:11px 26px; border-radius:999px; font-size:17px; border:none; cursor:pointer;
         font-family:Georgia,serif; }
  .btn:hover { background:var(--jadedk); }
  .btn.gold { background:var(--mustard); }
  .btn.line { background:none; color:var(--jadedk); border:2px solid var(--jade); padding:9px 24px; }

  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:26px; margin:22px 0; }
  .pcard { background:var(--ivory); border:1px solid #E5DEC8; border-radius:14px; overflow:hidden;
           display:flex; flex-direction:column; }
  .pcard .imgbox { background:#EFE7D2; text-align:center; padding:18px 18px 8px; }
  .pcard img { max-width:82%; max-height:210px; border-radius:6px; box-shadow:0 6px 14px rgba(43,43,43,.18); }
  .pcard .body { padding:12px 18px 18px; display:flex; flex-direction:column; flex:1; }
  .pcard h3 { margin:4px 0 2px; color:var(--jadedk); font-size:19px; }
  .pcard .price { color:var(--crak); font-weight:bold; font-size:18px; margin:2px 0 8px; }
  .pcard p { font-size:15px; margin:0 0 12px; flex:1; }
  .pcard .row { display:flex; gap:10px; }
  .pcard .row .btn { font-size:14.5px; padding:8px 16px; }

  .quote { background:var(--ivory); border-left:5px solid var(--brass); padding:16px 22px; margin:18px 0; }
  .quote p { margin:0 0 8px; font-style:italic; }
  .quote .who { color:var(--soft); font-size:14.5px; font-style:normal; }

  .prod { display:flex; gap:38px; flex-wrap:wrap; margin-top:26px; }
  .prod .pic { flex:0 0 340px; max-width:100%; text-align:center; }
  .prod .pic img { max-width:100%; border-radius:10px; box-shadow:0 10px 24px rgba(43,43,43,.22); }
  .prod .info { flex:1; min-width:300px; }
  .prod .price { color:var(--crak); font-size:26px; font-weight:bold; }
  .kicker { text-transform:uppercase; letter-spacing:2px; font-size:12.5px; color:var(--mustard); }

  table.cart { width:100%; border-collapse:collapse; margin:16px 0; }
  table.cart th { background:#E9D9AF; text-align:left; padding:9px 12px; border:1px solid #D8CBA4; }
  table.cart td { padding:9px 12px; border:1px solid #E5DEC8; }
  .qbtn { border:1px solid var(--jade); background:var(--cream); border-radius:6px; width:26px; height:26px;
          cursor:pointer; font-family:Georgia,serif; }
  input, textarea { font-family:Georgia,serif; font-size:16px; padding:9px 12px; border:1px solid #CFC7AE;
          border-radius:8px; background:var(--cream); width:100%; margin:5px 0 14px; }
  label { font-size:15px; color:var(--jadedk); font-weight:bold; }
  .note { background:var(--ivory); border-left:5px solid var(--crak); padding:12px 18px; font-size:15px; margin:16px 0; }
  .fine { font-size:13.5px; color:var(--soft); font-style:italic; }

  footer { background:var(--jadedk); color:var(--ivory); text-align:center; padding:26px 30px; margin-top:30px; }
  footer img { width:70px; height:auto; border-radius:8px; }
  footer p { font-size:13.5px; margin:8px 0 0; }
  footer a { color:var(--brass); text-decoration:none; }
  .page { display:none; } .page.on { display:block; }