:root{
    --cream:#F7F3EA;
    --cream-2:#F1ECDF;
    --ink:#241F18;
    --ink-soft:#5B5546;
    --green-deep:#1C2A20;
    --green-mid:#3C523E;
    --sage:#AFC08A;
    --pill:#DCE8A6;
    --pink:#F2C6CE;
    --terracotta:#C97B5B;
    --line:#E3DCC9;
    --white:#FFFDF8;
    --radius:18px;
    --shadow:0 8px 24px rgba(36,31,24,0.08);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{
    font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif;
    font-weight:400;
    margin:0;
  }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  ::selection{background:var(--pill); color:var(--ink);}

  /* Header */
  header.site{
    background:var(--green-deep);
    color:#F4F1E6;
    position:sticky; top:0; z-index:50;
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1180px; margin:0 auto;}
  .logo{font-family:Georgia,serif; font-style:italic; font-size:24px; color:#F4F1E6; letter-spacing:0.5px;}
  .logo b{font-weight:700; font-style:normal;}
  nav.main-links{display:flex; gap:28px; font-size:14.5px;}
  nav.main-links a{opacity:.9; padding:6px 2px; border-bottom:1px solid transparent;}
  nav.main-links a.active, nav.main-links a:hover{opacity:1; border-color:var(--sage);}
  .nav-actions{display:flex; align-items:center; gap:18px;}
  .icon-btn{position:relative; background:none; border:none; color:#F4F1E6; font-size:18px; padding:4px;}
  .cart-badge{
    position:absolute; top:-6px; right:-8px; background:var(--pill); color:var(--ink);
    font-size:10.5px; font-weight:700; border-radius:50%; width:17px; height:17px;
    display:flex; align-items:center; justify-content:center;
  }
  .search-box{display:flex; align-items:center; background:rgba(244,241,230,.12); border-radius:20px; padding:6px 12px; gap:6px;}
  .search-box input{background:none; border:none; outline:none; color:#F4F1E6; font-size:13.5px; width:130px;}
  .search-box input::placeholder{color:rgba(244,241,230,.6);}
  .search-box button{background:none;border:none;color:#F4F1E6;}
  .burger{display:none; background:none; border:none; color:#F4F1E6; font-size:22px;}

  @media(max-width:860px){
    nav.main-links{display:none; position:absolute; top:64px; left:0; right:0; background:var(--green-deep); flex-direction:column; padding:14px 28px; gap:14px;}
    nav.main-links.open{display:flex;}
    .burger{display:block;}
    .search-box{display:none;}
  }

  /* Hero */
  .hero{
    position:relative; background:linear-gradient(180deg, #E7D9C4, #DCC9AC);
    min-height:420px; display:flex; align-items:center; justify-content:center; text-align:center;
    overflow:hidden;
  }
  .hero-tex{position:absolute; inset:0; background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.08), transparent 45%);}
  .hero-inner{position:relative; z-index:2; color:#3A2E20; padding:60px 20px;}
  .hero h1{font-size:42px; font-style:italic; line-height:1.25; text-shadow:0 2px 18px rgba(255,255,255,.4);}
  .hero .cta{
    margin-top:26px; display:inline-flex; align-items:center; gap:8px;
    background:var(--pill); color:var(--ink); padding:12px 26px; border-radius:30px;
    font-size:13.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border:none;
  }
  .hero .cta:hover{background:#cfdd8f;}

  /* Section generic */
  section{padding:64px 0;}
  .eyebrow{font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--terracotta); font-weight:700; margin-bottom:10px;}
  .section-title{font-size:30px; margin-bottom:8px;}
  .section-sub{color:var(--ink-soft); font-size:15px; max-width:620px;}

  /* Categories */
  .cat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:22px; margin-top:36px;}
  @media(max-width:900px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:520px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
  .cat-item{text-align:center; cursor:pointer;}
  .cat-icon{
    width:74px; height:74px; margin:0 auto 12px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:30px;
    background:var(--white); box-shadow:var(--shadow); transition:transform .15s;
  }
  .cat-item:hover .cat-icon{transform:translateY(-4px);}
  .cat-label{font-size:13px; color:var(--ink-soft);}
  .see-all{
    display:block; width:fit-content; margin:34px auto 0; border:1px solid var(--ink); border-radius:30px;
    padding:12px 28px; font-size:12.5px; letter-spacing:1px; text-transform:uppercase; background:none;
  }
  .see-all:hover{background:var(--ink); color:var(--white);}

  /* Product grid */
  .prod-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  .tabbtns{display:flex; gap:8px;}
  .tabbtns button{background:var(--white); border:1px solid var(--line); border-radius:20px; padding:8px 16px; font-size:13px;}
  .tabbtns button.on{background:var(--ink); color:var(--white); border-color:var(--ink);}
  .prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:30px;}
  @media(max-width:920px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){.prod-grid{grid-template-columns:1fr;}}
  .card{background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative;}
  .card-img{
    aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:56px;
    position:relative;
  }
  .badge{position:absolute; top:12px; left:12px; background:var(--terracotta); color:#fff; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; letter-spacing:.5px; text-transform:uppercase;}
  .badge.best{background:var(--green-mid);}
  .card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:4px; flex:1;}
  .card-cat{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.5px;}
  .card-name{font-size:15px; font-weight:600;}
  .card-bottom{margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:10px;}
  .price{font-size:14.5px; font-weight:700;}
  .price .old{color:#a19c8c; text-decoration:line-through; font-weight:400; font-size:12.5px; margin-right:6px;}
  .add-btn{
    width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; border:none;
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .add-btn:hover{background:var(--green-mid);}

  /* Value strip */
  .values{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; text-align:center; margin-top:20px;}
  @media(max-width:900px){.values{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:520px){.values{grid-template-columns:repeat(2,1fr);}}
  .value-item{font-size:13px; color:var(--ink-soft);}
  .value-icon{font-size:30px; margin-bottom:10px;}

  /* About band */
  .band{background:linear-gradient(120deg,#E7EEDA,#DDE7C9); }
  .band-inner{display:flex; align-items:center; gap:50px; flex-wrap:wrap;}
  .band-text{flex:1; min-width:280px;}
  .band-text p{color:var(--ink-soft); line-height:1.7; margin:16px 0;}
  .band-visual{flex:1; min-width:260px; display:flex; justify-content:center;}
  .leaf-circle{width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:80px;}
  .link-more{color:var(--green-mid); font-weight:700; font-size:14px;}

  /* Bundles */
  .bundle-band{background:linear-gradient(120deg,#FBEFE2,#F7E3E7);}
  .bundle-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px;}
  .bundle-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px;}
  @media(max-width:920px){.bundle-grid{grid-template-columns:repeat(2,1fr);}}
  .bundle-card{background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
  .bundle-img{aspect-ratio:1/1; background:linear-gradient(135deg,#EADFC8,#D9E4C4); display:flex; align-items:center; justify-content:center; font-size:50px;}
  .bundle-body{padding:14px 16px 18px;}
  .bundle-name{font-weight:600; font-size:14.5px;}
  .bundle-price{color:var(--terracotta); font-weight:700; margin:6px 0 12px;}
  .bundle-btn{background:var(--pink); border:none; padding:8px 18px; border-radius:20px; font-size:12.5px; font-weight:700;}

  /* Footer */
  footer.site{background:#2A241C; color:#DCD5C4; padding:56px 0 20px;}
  .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px;}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
  .foot-brand{font-family:Georgia,serif; font-style:italic; font-size:20px; color:#F4F1E6; margin-bottom:10px;}
  .foot-grid h4{font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#9C9683; margin-bottom:14px;}
  .foot-grid a, .foot-grid p{font-size:13.5px; line-height:2; color:#CFC8B6;}
  .foot-grid a:hover{color:#fff;}
  .foot-bottom{border-top:1px solid #423B2E; margin-top:40px; padding-top:18px; text-align:center; font-size:12px; color:#8B8570;}

  /* Generic page layout */
  .page-hero{padding:52px 0 10px;}
  .page-hero h1{font-size:34px; font-style:italic;}
  .breadcrumb{font-size:12.5px; color:var(--ink-soft); margin-bottom:8px;}

  /* Catalog */
  .catalog-layout{display:flex; gap:36px; align-items:flex-start;}
  .filters{width:220px; flex-shrink:0; background:var(--white); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); position:sticky; top:90px;}
  .filters h4{font-size:12.5px; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; color:var(--ink-soft);}
  .filter-opt{display:block; font-size:14px; padding:7px 0; cursor:pointer; border-radius:8px; color:var(--ink-soft);}
  .filter-opt.on{color:var(--ink); font-weight:700;}
  .catalog-main{flex:1;}
  .catalog-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
  .result-count{font-size:13px; color:var(--ink-soft);}
  select.sortsel{border:1px solid var(--line); border-radius:20px; padding:8px 14px; font-size:13px; background:var(--white);}
  @media(max-width:760px){.catalog-layout{flex-direction:column;} .filters{width:100%; position:static;}}

  /* Product detail */
  .pd-wrap{display:flex; gap:44px; flex-wrap:wrap;}
  .pd-img{flex:1; min-width:280px; aspect-ratio:1/1; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-size:120px;}
  .pd-info{flex:1; min-width:280px;}
  .pd-info h1{font-size:28px; margin-bottom:8px;}
  .pd-price{font-size:20px; font-weight:700; color:var(--terracotta); margin:10px 0 18px;}
  .pd-desc{color:var(--ink-soft); line-height:1.7; margin-bottom:22px;}
  .qty-row{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
  .qty-box{display:flex; align-items:center; border:1px solid var(--line); border-radius:24px; overflow:hidden;}
  .qty-box button{width:34px; height:34px; background:none; border:none; font-size:16px;}
  .qty-box span{width:32px; text-align:center; font-size:14px;}
  .btn-primary{background:var(--ink); color:#fff; border:none; padding:13px 30px; border-radius:30px; font-size:13.5px; font-weight:700; letter-spacing:.5px;}
  .btn-primary:hover{background:var(--green-mid);}
  .btn-secondary{background:none; border:1px solid var(--ink); padding:13px 26px; border-radius:30px; font-size:13.5px; font-weight:700;}

  /* About page */
  .about-block{display:flex; gap:44px; align-items:center; flex-wrap:wrap; margin-bottom:50px;}
  .about-block.rev{flex-direction:row-reverse;}
  .about-visual{flex:1; min-width:260px; aspect-ratio:4/3; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:70px;}
  .about-text{flex:1; min-width:260px;}
  .about-text p{color:var(--ink-soft); line-height:1.8; margin-top:12px;}

  /* Blog */
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:32px;}
  @media(max-width:860px){.blog-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.blog-grid{grid-template-columns:1fr;}}
  .blog-card{background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); cursor:pointer;}
  .blog-img{aspect-ratio:16/10; background:linear-gradient(135deg,#E4DCC6,#CFE0C2); display:flex; align-items:center; justify-content:center; font-size:44px;}
  .blog-body{padding:16px 18px 20px;}
  .blog-date{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.5px;}
  .blog-title{font-size:16px; font-weight:600; margin:8px 0;}
  .blog-excerpt{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
  .article-body{max-width:720px; margin:0 auto; line-height:1.85; color:var(--ink-soft); font-size:15.5px;}
  .article-body p{margin-bottom:16px;}

  /* FAQ */
  .faq-item{border-bottom:1px solid var(--line); padding:18px 0;}
  .faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15px;}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--ink-soft); font-size:14px; line-height:1.7;}
  .faq-item.open .faq-a{max-height:300px; padding-top:12px;}
  .faq-item.open .faq-q .chev{transform:rotate(45deg);}
  .chev{transition:transform .2s;}

  /* Cart */
  .cart-row{display:flex; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line);}
  .cart-thumb{width:74px; height:74px; border-radius:12px; background:var(--white); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-size:30px; flex-shrink:0;}
  .cart-info{flex:1;}
  .cart-name{font-weight:600; font-size:14.5px;}
  .cart-cat{font-size:12px; color:var(--ink-soft);}
  .cart-remove{background:none; border:none; color:var(--terracotta); font-size:12.5px;}
  .cart-summary{background:var(--white); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); position:sticky; top:90px;}
  .sum-row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--ink-soft);}
  .sum-total{display:flex; justify-content:space-between; font-size:17px; font-weight:700; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
  .cart-layout{display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap;}
  .cart-items{flex:2; min-width:300px;}
  .cart-summary{flex:1; min-width:260px;}
  .empty-state{text-align:center; padding:60px 20px; color:var(--ink-soft);}
  .empty-state .em-icon{font-size:50px; margin-bottom:16px;}

  /* Auth */
  .auth-card{max-width:420px; margin:0 auto; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:38px;}
  .auth-card h2{font-size:24px; margin-bottom:6px;}
  .auth-card .sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:26px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:var(--cream); outline:none;
  }
  .field input:focus, .field textarea:focus{border-color:var(--sage);}
  .auth-switch{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:16px;}
  .auth-switch a{color:var(--green-mid); font-weight:700;}
  .form-msg{font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:14px;}
  .form-msg.err{background:#FBE4E1; color:#A23B2E;}
  .form-msg.ok{background:#E4EFD8; color:#3E5A2C;}

  /* Admin */
  .admin-layout{display:flex; gap:0; min-height:70vh;}
  .admin-side{width:200px; flex-shrink:0; background:var(--white); border-right:1px solid var(--line); padding:24px 0;}
  .admin-side button{
    display:block; width:100%; text-align:left; padding:12px 26px; background:none; border:none; font-size:14px; color:var(--ink-soft);
  }
  .admin-side button.on{color:var(--ink); font-weight:700; background:var(--cream-2); border-right:3px solid var(--terracotta);}
  .admin-main{flex:1; padding:30px 36px;}
  .admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:30px;}
  @media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
  .stat-card{background:var(--white); border-radius:14px; padding:20px; box-shadow:var(--shadow);}
  .stat-num{font-size:26px; font-weight:700;}
  .stat-label{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.5px; margin-top:4px;}
  table.admin-table{width:100%; border-collapse:collapse; background:var(--white); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);}
  table.admin-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); padding:14px 16px; border-bottom:1px solid var(--line); background:var(--cream-2);}
  table.admin-table td{padding:12px 16px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  table.admin-table tr:last-child td{border-bottom:none;}
  .row-thumb{width:38px; height:38px; border-radius:8px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; font-size:18px;}
  .icon-link{background:none; border:none; font-size:14px; margin-right:10px; color:var(--green-mid);}
  .icon-link.del{color:#C0392B;}
  .admin-modal-bg{position:fixed; inset:0; background:rgba(20,17,12,.5); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;}
  .admin-modal{background:var(--white); border-radius:16px; padding:28px; width:100%; max-width:480px; max-height:88vh; overflow:auto;}
  .admin-modal h3{font-size:19px; margin-bottom:18px;}
  .modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:20px;}
  .btn-ghost{background:none; border:1px solid var(--line); padding:10px 18px; border-radius:20px; font-size:13px;}
  .pill-status{font-size:11px; padding:3px 10px; border-radius:12px; background:var(--pill); font-weight:700;}
  .pill-status.low{background:#F7D9C4; color:#8A4A22;}

  .hidden{display:none !important;}