:root{
    --green-deep:#0f4d34; --green:#15754f; --green-soft:#e7f1e9;
    --gold:#c69a3a; --gold-soft:#f4e6c2; --cream:#fbf7ee;
    --ink:#1c1f1c; --ink-soft:#4a4f49; --line:#dcd3bd;
    --card-bg:#ffffff; --overlay-bg:rgba(0,0,0,.4); --header-bg:rgba(251,247,238,.92);
    --skeleton-base:#eee6d6; --skeleton-shine:#faf5e9;
  }
  html[data-theme="dark"]{
    --green-deep:#1e9466; --green:#2bb37d; --green-soft:#123527;
    --gold:#e0b558; --gold-soft:#2a2410; --cream:#121613;
    --ink:#f1ede1; --ink-soft:#b9c2b7; --line:#2c332c;
    --card-bg:#1b201c; --overlay-bg:rgba(0,0,0,.65); --header-bg:rgba(18,22,19,.92);
    --skeleton-base:#20261f; --skeleton-shine:#2a3128;
  }
  html[data-theme="dark"] .hero-badge{background:radial-gradient(circle at 32% 28%, #23291f, var(--gold-soft) 60%, var(--green-soft) 100%);}
  html[data-theme="dark"] .pg-item, html[data-theme="dark"] .why-card{background:var(--card-bg);}
  html[data-theme="dark"] img{filter:brightness(.96);}
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--cream); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; overflow-x:hidden; transition:background .2s ease, color .2s ease;}
  h1,h2,h3,.script{font-family:'Fraunces',serif;}
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1220px; margin:0 auto; padding:0 28px;}
  .leaf-divider{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto;}
  .leaf-divider svg{width:26px; height:26px; opacity:.7;}
  .leaf-divider .line{height:1px; width:64px; background:var(--line);}

  header{position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
  nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:1220px; margin:0 auto; gap:14px;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{width:46px; height:46px; border-radius:50%;}
  .brand-name{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; color:var(--green-deep);}
  .brand-name span{display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.18em; color:var(--gold); text-transform:uppercase;}
  nav ul{display:flex; gap:26px; list-style:none;}
  nav ul li a{font-size:.86rem; font-weight:600; color:var(--ink-soft); letter-spacing:.02em;}
  nav ul li a:hover{color:var(--green);}
  .nav-right{display:flex; align-items:center; gap:14px;}
  .nav-cta{background:var(--green-deep); color:#fff !important; padding:10px 20px; border-radius:30px; font-size:.85rem !important;}
  .cart-btn{position:relative; background:var(--gold-soft); border:1px solid var(--gold); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.15rem;}
  .cart-count{position:absolute; top:-6px; right:-6px; background:var(--green-deep); color:#fff; font-size:.68rem; font-weight:700; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
  @media(max-width:980px){ nav ul{display:none;} }

  .hero{position:relative; padding:80px 0 60px; overflow:hidden;}
  .hero-bg-leaf{position:absolute; top:-120px; right:-160px; width:560px; height:560px; opacity:.14; z-index:0;}
  .hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
  .hero-inner.no-visual{grid-template-columns:1fr; text-align:center; max-width:760px; margin:0 auto;}
  .hero-inner.no-visual .cta-row{justify-content:center;}
  .hero-inner.no-visual p.lead{margin-left:auto; margin-right:auto;}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--green-soft); color:var(--green-deep); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:7px 16px; border-radius:30px; margin-bottom:22px;}
  .eyebrow::before{content:"●"; color:var(--gold); font-size:.6rem;}
  .hero h1{font-size:2.9rem; font-weight:600; line-height:1.1; color:var(--green-deep); margin-bottom:20px;}
  .hero h1 em{font-style:italic; color:var(--gold); font-weight:500;}
  .hero p.lead{font-size:1.05rem; color:var(--ink-soft); max-width:480px; margin-bottom:32px;}
  .cta-row{display:flex; gap:16px; flex-wrap:wrap;}
  .btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:32px; font-weight:700; font-size:.95rem; transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; border:none; font-family:'Inter',sans-serif;}
  .btn-primary{background:var(--green-deep); color:#fff; box-shadow:0 8px 22px -6px rgba(15,77,52,.55);}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{background:transparent; color:var(--green-deep); border:1.5px solid var(--green-deep);}
  .btn-ghost:hover{background:var(--green-soft);}
  .hero-stats{display:flex; gap:34px; margin-top:40px; padding-top:26px; border-top:1px solid var(--line);}
  .hero-stats div b{display:block; font-family:'Fraunces',serif; font-size:1.7rem; color:var(--green-deep);}
  .hero-stats div span{font-size:.76rem; color:var(--ink-soft);}
  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
  .hero-badge{width:100%; max-width:380px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 32% 28%, #ffffff, var(--gold-soft) 60%, var(--green-soft) 100%); display:flex; align-items:center; justify-content:center; box-shadow:0 30px 60px -20px rgba(15,77,52,.35); position:relative;}
  .hero-badge img{width:74%; border-radius:50%;}
  .ring{position:absolute; border:1.5px dashed var(--gold); border-radius:50%; opacity:.55;}
  .ring.r1{inset:-22px;} .ring.r2{inset:-48px; opacity:.3;}

  section{padding:76px 0;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 50px;}
  .section-head .leaf-divider{margin-bottom:16px;}
  .section-head h2{font-size:2.1rem; font-weight:600; color:var(--green-deep); margin-bottom:12px;}
  .section-head p{color:var(--ink-soft); font-size:1rem;}

  .why{background:var(--green-deep); color:#fdfbf3;}
  .why .section-head h2, .why .section-head p{color:#fdfbf3;}
  .why .section-head p{opacity:.82;}
  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .why-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:28px 22px;}
  .why-card .num{font-family:'Fraunces',serif; font-style:italic; font-size:1.5rem; color:var(--gold); margin-bottom:12px; display:block;}
  .why-card h3{font-size:1.02rem; margin-bottom:8px; font-weight:600;}
  .why-card p{font-size:.88rem; opacity:.8;}

  .wholesale-note{background:var(--gold-soft); border:1px solid var(--gold); border-radius:18px; padding:22px 26px; max-width:820px; margin:0 auto 44px; font-size:.9rem; color:var(--ink);}
  .wholesale-note b{color:var(--green-deep);}

  .products{background:var(--cream);}
  .filter-bar{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:40px;}
  .filter-btn{font-size:.8rem; font-weight:700; color:var(--green-deep); background:var(--green-soft); border:1px solid transparent; padding:9px 18px; border-radius:20px; cursor:pointer; transition:.15s;}
  .filter-btn:hover{background:var(--gold-soft);}
  .filter-btn.active{background:var(--green-deep); color:#fff;}
  .gallery-section{margin-bottom:48px;}
  .gallery-cat-title{display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--gold); padding-bottom:10px; margin-bottom:22px;}
  .gallery-cat-title span{font-size:1.3rem; color:var(--green-deep); font-weight:600;}
  .gallery-cat-title em{font-style:normal; font-size:.78rem; color:var(--ink-soft); background:var(--green-soft); padding:4px 12px; border-radius:14px;}
  .gallery-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:18px;}
  .pg-item{background:var(--card-bg); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; content-visibility:auto; contain-intrinsic-size:280px;}
  .pg-item:hover{transform:translateY(-4px); box-shadow:0 16px 30px -16px rgba(15,77,52,.35);}
  .pg-item img{width:100%; height:auto;}
  .pg-caption{padding:10px 12px 14px;}
  .pg-caption b{display:block; font-size:.86rem; color:var(--green-deep); margin-bottom:2px;}
  .pg-caption span{font-size:.74rem; color:var(--ink-soft); display:block; margin-bottom:4px;}
  .pg-caption em{font-style:normal; font-size:.82rem; color:var(--gold); font-weight:700;}

  .experience{background:var(--green-soft);}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
  .steps::before{content:""; position:absolute; top:34px; left:12%; right:12%; height:1px; background:var(--gold); opacity:.5;}
  .step{text-align:center; padding:0 18px; position:relative;}
  .step-circle{width:66px; height:66px; border-radius:50%; background:var(--card-bg); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:'Fraunces',serif; font-size:1.35rem; color:var(--green-deep); position:relative; z-index:1;}
  .step h3{font-size:1rem; color:var(--green-deep); margin-bottom:8px;}
  .step p{font-size:.85rem; color:var(--ink-soft);}

  .payment{background:var(--card-bg);}
  .pay-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .pay-card{border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center;}
  .pay-card .pay-icon{width:52px; height:52px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.4rem;}
  .pay-card h4{color:var(--green-deep); font-size:1rem; margin-bottom:8px;}
  .pay-card .pay-num{font-family:'Fraunces',serif; font-size:1rem; color:var(--gold); border-bottom:2px dotted var(--ink-soft); padding-bottom:4px; min-height:24px;}

  .cta-band{background:linear-gradient(120deg, var(--green-deep), var(--green)); color:#fff; text-align:center; border-radius:28px; padding:60px 40px; margin:0 auto; max-width:1220px;}
  .cta-band h2{font-size:1.9rem; margin-bottom:14px;}
  .cta-band p{opacity:.85; max-width:520px; margin:0 auto 30px;}
  .cta-band .cta-row{justify-content:center;}
  .cta-band .btn-primary{background:var(--gold); color:var(--green-deep); box-shadow:0 10px 24px -8px rgba(0,0,0,.35);}
  .cta-band .btn-ghost{border-color:rgba(255,255,255,.6); color:#fff;}
  .cta-band .btn-ghost:hover{background:rgba(255,255,255,.12);}

  footer{background:#0b3324; color:#e9efe9; padding:64px 0 26px;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; margin-bottom:46px;}
  .footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .footer-brand img{width:44px; height:44px; border-radius:50%;}
  .footer-brand span{font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600;}
  footer p{font-size:.86rem; opacity:.72; max-width:320px;}
  footer h4{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
  footer ul{list-style:none; font-size:.88rem;}
  footer ul li{margin-bottom:10px; opacity:.85;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; text-align:center; font-size:.76rem; opacity:.55;}

  .overlay{position:fixed; inset:0; background:rgba(11,51,36,.6); backdrop-filter:blur(2px); z-index:200; display:none; align-items:center; justify-content:center; padding:20px;}
  .overlay.open{display:flex;}
  .modal{background:var(--card-bg); border-radius:22px; max-width:760px; width:100%; max-height:88vh; overflow:auto; position:relative;}
  .modal-close{position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:var(--cream); border:1px solid var(--line); font-size:1.1rem; cursor:pointer; z-index:2;}
  .modal-inner{display:grid; grid-template-columns:1fr 1fr;}
  .modal-inner img{width:100%; height:100%; object-fit:cover;}
  .zoom-wrap{position:relative;}
  .zoom-wrap img{transition:transform .25s ease;}
  .zoom-wrap.zoomed img{transform:scale(1.9);}
  .zoom-wrap.zoomed{cursor:zoom-out;}
  .modal-info{padding:36px 32px;}
  .modal-info .cat-chip{display:inline-block; background:var(--green-soft); color:var(--green-deep); font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:16px; margin-bottom:14px;}
  .modal-info h2{font-size:1.5rem; color:var(--green-deep); margin-bottom:10px;}
  .modal-info .effect-label{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-weight:700; margin-bottom:4px;}
  .modal-info .effect-text{font-size:1rem; color:var(--ink-soft); margin-bottom:18px;}
  .modal-price{background:var(--green-soft); border-radius:14px; padding:16px 18px; margin-bottom:22px;}
  .modal-price .retail{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--green-deep); font-weight:600;}
  .modal-price .wholesale{font-size:.78rem; color:var(--ink-soft); margin-top:6px;}
  .qty-row{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
  .qty-control{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:30px; overflow:hidden;}
  .qty-control button{width:42px; height:42px; background:var(--green-soft); border:none; font-size:1.2rem; cursor:pointer; color:var(--green-deep);}
  .qty-control span{width:44px; text-align:center; font-weight:700;}
  .modal-info .btn-primary{width:100%; justify-content:center;}
  @media(max-width:640px){ .modal-inner{grid-template-columns:1fr;} }

  .cart-fab{position:fixed; bottom:22px; right:22px; background:var(--green-deep); color:#fff; border-radius:30px; padding:14px 22px; display:flex; align-items:center; gap:10px; font-weight:700; box-shadow:0 14px 30px -10px rgba(0,0,0,.4); cursor:pointer; z-index:150;}
  .cart-fab .badge{background:var(--gold); color:var(--green-deep); border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:.8rem;}
  .cart-drawer{position:fixed; top:0; right:0; height:100%; width:460px; max-width:94vw; background:var(--card-bg); z-index:250; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.2);}
  .cart-drawer.open{transform:translateX(0);}
  .cart-head{padding:22px 24px 14px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
  .cart-head h3{color:var(--green-deep); font-size:1.2rem;}
  .cart-head button{background:none; border:none; font-size:1.3rem; cursor:pointer;}
  .cart-history-btn{font-size:1.1rem !important;}
  .cart-items{flex:1; overflow:auto; padding:14px 20px;}
  .cart-item{display:flex; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);}
  .cart-item img{width:50px; height:50px; object-fit:cover; border-radius:10px;}
  .cart-item-info{flex:1; min-width:0;}
  .cart-item-info b{display:block; font-size:.82rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cart-item-info span{font-size:.74rem; color:var(--gold); font-weight:700;}
  .cart-item-qty{display:flex; align-items:center; gap:5px;}
  .cart-item-qty button{width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--cream); cursor:pointer; font-size:.85rem;}
  .cart-remove{background:none; border:none; color:#b33; font-size:.95rem; cursor:pointer; margin-left:4px;}
  .cart-empty{text-align:center; color:var(--ink-soft); padding:60px 20px; font-size:.9rem;}
  .cart-foot{padding:16px 20px 20px; border-top:1px solid var(--line);}
  .cart-summary-line{display:flex; justify-content:space-between; font-size:.85rem; color:var(--ink-soft); padding:3px 0;}
  .cart-summary-line.total{font-size:1.05rem; color:var(--green-deep); font-weight:700; padding-top:8px; border-top:1px dashed var(--line); margin-top:6px;}
  .cart-foot .btn{width:100%; justify-content:center; margin-top:10px;}
  .cart-foot .btn:disabled{opacity:.45; cursor:not-allowed; pointer-events:none;}
  .cart-customer-info{border-bottom:2px solid var(--line); padding:14px 20px 16px; background:var(--cream);}
  .ccf-title{font-size:.8rem; font-weight:700; color:var(--green-deep); margin-bottom:10px;}
  .cart-customer-info .ccf-field{margin-bottom:10px;}
  .cart-customer-info .ccf-field:last-child{margin-bottom:0;}
  .cart-customer-info label{display:block; font-size:.72rem; font-weight:600; color:var(--ink-soft); margin-bottom:4px;}
  .cart-customer-info input{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:inherit; font-size:.88rem;}
  .cart-customer-info input:focus{outline:none; border-color:var(--green);}
  .cart-customer-info input.ccf-invalid{border-color:#c0392b;}
  .ccf-shipping-note{font-size:.76rem; line-height:1.4; margin-top:10px; padding:8px 10px; border-radius:8px;}
  .ccf-shipping-note.ok{background:#eaf6ec; color:var(--green-deep); border:1px solid #cdeacf;}
  .ccf-shipping-note.warn{background:#fdf3e5; color:#8a5a12; border:1px solid #f3ddb0;}
  .ccf-shipping-note.danger{background:#fdeceb; color:#9a1c12; border:1.5px solid #e0453a; font-weight:600;}
  .ccf-shipping-note:empty{display:none; padding:0; margin:0;}
  .ccf-toggle{display:flex; gap:8px;}
  .ccf-toggle-opt{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:.82rem; font-weight:600; color:var(--ink); cursor:pointer; text-align:center;}
  .ccf-toggle-opt input{margin:0;}
  .ccf-toggle-opt:has(input:checked){border-color:var(--green); background:#eaf6ec; color:var(--green-deep);}
  .ccf-toggle.ccf-invalid .ccf-toggle-opt{border-color:#c0392b;}
  .ccf-region-dropdown{display:none; position:absolute; left:0; right:0; top:100%; margin-top:2px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.12); max-height:280px; overflow-y:auto; z-index:40; -webkit-overflow-scrolling:touch;}
  .ccf-region-dropdown.open{display:block;}
  .ccf-region-opt{padding:11px 14px; font-size:.85rem; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line);}
  .ccf-region-opt:last-child{border-bottom:none;}
  .ccf-region-opt:active, .ccf-region-opt:hover{background:var(--green-soft);}
  .ccf-region-opt span.price{color:var(--ink-soft); font-size:.78rem; white-space:nowrap;}
  .ccf-region-empty{padding:11px 14px; font-size:.8rem; color:var(--ink-soft);}
  .cart-scrim{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:240; display:none;}
  .cart-scrim.open{display:block;}
  .toast{position:fixed; bottom:100px; right:22px; background:var(--green-deep); color:#fff; padding:12px 20px; border-radius:12px; font-size:.86rem; font-weight:600; z-index:260; opacity:0; transform:translateY(10px); transition:.25s; pointer-events:none;}
  .toast.show{opacity:1; transform:translateY(0);}

  /* INVOICE */
  .invoice-overlay{position:fixed; inset:0; background:rgba(11,51,36,.65); z-index:300; display:none; align-items:flex-start; justify-content:center; padding:30px 16px; overflow:auto;}
  .invoice-overlay.open{display:flex;}
  .invoice-box{background:var(--card-bg); max-width:780px; width:100%; border-radius:14px; overflow:hidden; margin-bottom:40px;}
  .invoice-top{display:flex; justify-content:space-between; align-items:flex-start; padding:34px 34px 20px; border-bottom:3px solid var(--green-deep);}
  .invoice-brand{display:flex; gap:12px; align-items:center;}
  .invoice-brand img{width:56px; height:56px; border-radius:50%;}
  .invoice-brand b{display:block; font-family:'Fraunces',serif; font-size:1.2rem; color:var(--green-deep);}
  .invoice-brand span{font-size:.78rem; color:var(--ink-soft);}
  .invoice-meta{text-align:right; font-size:.82rem; color:var(--ink-soft);}
  .invoice-meta b{color:var(--green-deep); display:block; font-size:.95rem;}
  .invoice-body{padding:24px 34px;}
  table.invoice-table{width:100%; border-collapse:collapse; font-size:.84rem;}
  table.invoice-table th{text-align:left; background:var(--green-soft); color:var(--green-deep); padding:9px 8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;}
  table.invoice-table td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
  table.invoice-table td.num{text-align:right; white-space:nowrap;}
  .invoice-totals{margin-left:auto; width:280px; margin-top:16px;}
  .invoice-totals .row{display:flex; justify-content:space-between; font-size:.86rem; padding:5px 0; color:var(--ink-soft);}
  .invoice-totals .row.grand{font-size:1.15rem; font-weight:700; color:var(--green-deep); border-top:2px solid var(--green-deep); margin-top:6px; padding-top:10px;}
  .invoice-note-box{background:var(--gold-soft); border-radius:12px; padding:14px 18px; font-size:.8rem; color:var(--ink); margin-top:20px;}
  .invoice-note-danger{background:#fdeceb; border:1.5px solid #e0453a; color:#9a1c12; font-size:.85rem; font-weight:600;}
  .invoice-billto{margin-top:0; margin-bottom:20px; background:transparent; border-bottom:1px dashed var(--line); border-radius:0; padding:0 0 16px; font-size:.86rem;}
  .invoice-billto b{color:var(--green-deep);}
  .invoice-pay{margin-top:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; font-size:.8rem;}
  .invoice-pay div{border:1px solid var(--line); border-radius:10px; padding:10px 12px;}
  .invoice-pay b{display:block; color:var(--green-deep); font-size:.78rem;}
  .invoice-actions{display:flex; gap:12px; padding:20px 34px 30px; flex-wrap:wrap;}
  .invoice-actions .btn{flex:1; justify-content:center;}
  .invoice-close{position:sticky; top:10px; margin-left:auto; margin-right:16px; background:var(--card-bg); border-radius:50%; width:38px; height:38px; border:1px solid var(--line); cursor:pointer; font-size:1.1rem;}
  @media print{
    body *{visibility:hidden;}
    .invoice-box, .invoice-box *{visibility:visible;}
    .invoice-box{position:absolute; top:0; left:0; width:100%; margin:0;}
    .invoice-actions, .invoice-close, .no-print{display:none !important;}
  }

  @media(max-width:980px){
    .hero-inner{grid-template-columns:1fr; text-align:center;}
    .hero p.lead{margin:0 auto 32px;}
    .cta-row{justify-content:center;}
    .hero-stats{justify-content:center;}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .steps{grid-template-columns:repeat(2,1fr); row-gap:36px;}
    .steps::before{display:none;}
    .footer-grid{grid-template-columns:1fr; gap:32px;}
    .pay-grid{grid-template-columns:repeat(2,1fr);}
    .invoice-top{flex-direction:column; gap:14px;}
    .invoice-meta{text-align:left;}
  }
  @media(max-width:560px){
    .hero h1{font-size:2rem;}
    .why-grid{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .cart-fab span.label{display:none;}
    table.invoice-table{font-size:.72rem;}
    .invoice-body{padding:18px;}
  }

/* ================= NEW: TOP UTILITY BAR (lang + dark mode) ================= */
.util-bar{display:flex; align-items:center; gap:10px;}
.lang-switch{display:flex; background:var(--green-soft); border-radius:20px; padding:3px; gap:2px;}
.lang-btn{border:none; background:none; padding:5px 10px; font-size:.72rem; font-weight:700; border-radius:16px; cursor:pointer; color:var(--ink-soft);}
.lang-btn.active{background:var(--green-deep); color:#fff;}
.theme-toggle{background:var(--gold-soft); border:1px solid var(--gold); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center;}
.icon-btn{position:relative; background:var(--green-soft); border:1px solid var(--line); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem;}
.icon-btn .badge-mini{position:absolute; top:-6px; right:-6px; background:var(--green-deep); color:#fff; font-size:.62rem; font-weight:700; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

/* ================= NEW: TRACK ORDER BUTTON (top of header) + crisp SVG icons ================= */
.track-btn{display:flex; align-items:center; gap:7px; background:var(--green-deep); color:#fff !important; border:none; padding:9px 16px 9px 13px; border-radius:30px; font-size:.82rem; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:0 3px 12px -2px rgba(15,77,52,.45); transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.track-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px -2px rgba(15,77,52,.55); background:var(--green,#146b46);}
.track-btn svg{width:17px; height:17px; flex-shrink:0;}
.theme-toggle svg,.icon-btn svg,.cart-btn svg{width:18px; height:18px; stroke:currentColor;}
.cart-btn{color:var(--ink);}
@media(max-width:640px){
  .track-btn{padding:9px; width:40px; height:40px; justify-content:center; border-radius:50%;}
  .track-btn .track-label{display:none;}
}

/* ================= SEARCH BAR ================= */
.search-wrap{position:relative; max-width:640px; margin:0 auto 30px;}
.search-input{width:100%; padding:15px 48px 15px 20px; border-radius:30px; border:1.5px solid var(--line); background:var(--card-bg); color:var(--ink); font-size:.95rem; font-family:inherit;}
.search-input:focus{outline:none; border-color:var(--green);}
.search-icon{position:absolute; right:18px; top:50%; transform:translateY(-50%); opacity:.6; pointer-events:none;}
.search-suggestions{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--card-bg); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 40px -20px rgba(0,0,0,.3); z-index:80; max-height:360px; overflow:auto; display:none;}
.search-suggestions.open{display:block;}
.sugg-item{display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; border-bottom:1px solid var(--line);}
.sugg-item:last-child{border-bottom:none;}
.sugg-item:hover{background:var(--green-soft);}
.sugg-item img{width:38px; height:38px; object-fit:cover; border-radius:8px;}
.sugg-item b{font-size:.85rem; display:block;}
.sugg-item span{font-size:.72rem; color:var(--ink-soft);}
.sugg-empty{padding:16px; text-align:center; color:var(--ink-soft); font-size:.85rem;}

/* ================= FILTER BAR EXTENDED ================= */
.filter-toolbar{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-bottom:24px;}
.filter-select{border:1px solid var(--line); background:var(--card-bg); color:var(--ink); padding:9px 14px; border-radius:20px; font-size:.82rem; font-weight:600; cursor:pointer;}
.filter-select:focus{outline:none; border-color:var(--green);}
.results-count{text-align:center; font-size:.82rem; color:var(--ink-soft); margin-bottom:18px;}

/* ================= PRODUCT CARD EXTRAS ================= */
.pg-item{position:relative;}
.pg-badges{position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; z-index:2;}
.pg-badge{font-size:.62rem; font-weight:800; padding:3px 9px; border-radius:10px; text-transform:uppercase; letter-spacing:.03em;}
.pg-badge.best{background:var(--gold); color:#1c1f1c;}
.pg-badge.new{background:var(--green-deep); color:#fff;}
.pg-actions{position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:6px; z-index:2;}
.pg-action-btn{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem; transition:.15s;}
html[data-theme="dark"] .pg-action-btn{background:rgba(27,32,28,.92);}
.pg-action-btn:hover{transform:scale(1.1);}
.pg-action-btn.active{background:var(--gold); color:#1c1f1c;}
.pg-rating{display:flex; align-items:center; gap:4px; font-size:.72rem; color:var(--gold); margin-bottom:2px;}
.pg-rating .count{color:var(--ink-soft);}
.pg-item img{aspect-ratio:15/16; object-fit:cover; background:var(--skeleton-base);}

/* Vitufe vya haraka "Ongeza Kikapuni" / "Nunua Sasa" juu ya picha ya bidhaa */
.pg-img-wrap{position:relative;}
.pg-quickbar{position:absolute; left:0; right:0; bottom:0; display:flex; z-index:3; box-shadow:0 -6px 14px -8px rgba(0,0,0,.35);}
.pg-quickbar button{flex:1; border:none; padding:8px 2px; font-size:.68rem; font-weight:800; letter-spacing:.01em; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; justify-content:center; gap:3px;}
.pg-quickbar .qb-cart{background:rgba(255,255,255,.95); color:var(--green-deep);}
html[data-theme="dark"] .pg-quickbar .qb-cart{background:rgba(27,32,28,.95); color:var(--green-deep);}
.pg-quickbar .qb-buy{background:var(--green-deep); color:#fff;}
.pg-quickbar button:active{filter:brightness(.92);}


/* ================= SKELETON LOADING ================= */
.skeleton{background:linear-gradient(100deg, var(--skeleton-base) 30%, var(--skeleton-shine) 50%, var(--skeleton-base) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite;}
@keyframes shimmer{0%{background-position:180% 0;} 100%{background-position:-20% 0;}}
.skeleton-card{border-radius:14px; overflow:hidden; border:1px solid var(--line);}
.skeleton-img{width:100%; aspect-ratio:15/16;}
.skeleton-line{height:12px; margin:10px 12px; border-radius:6px;}
.skeleton-line.w60{width:60%;} .skeleton-line.w40{width:40%;} .skeleton-line.w80{width:80%;}

/* fade-in on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }
img.lazy-fade{opacity:0; transition:opacity .35s ease;}
img.lazy-fade.loaded{opacity:1;}

/* ================= WISHLIST / COMPARE PANELS ================= */
.side-panel-scrim{position:fixed; inset:0; background:var(--overlay-bg); z-index:340; display:none;}
.side-panel-scrim.open{display:block;}
.side-panel{position:fixed; top:0; right:0; height:100%; width:440px; max-width:94vw; background:var(--card-bg); z-index:350; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.2);}
.side-panel.open{transform:translateX(0);}
.side-panel-head{padding:20px 22px 14px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.side-panel-head h3{color:var(--green-deep); font-size:1.15rem;}
.side-panel-head button{background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink);}
.side-panel-body{flex:1; overflow:auto; padding:14px 20px;}
.side-panel-foot{padding:14px 20px 20px; border-top:1px solid var(--line);}
.wl-item{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);}
.wl-item img{width:56px; height:56px; object-fit:cover; border-radius:10px; cursor:pointer;}
.wl-item-info{flex:1; min-width:0;}
.wl-item-info b{display:block; font-size:.85rem; cursor:pointer;}
.wl-item-info span{font-size:.76rem; color:var(--gold); font-weight:700;}
.wl-remove{background:none; border:none; color:#b33; font-size:1rem; cursor:pointer;}
.panel-empty{text-align:center; color:var(--ink-soft); padding:60px 20px; font-size:.88rem;}

/* Compare bar + table */
.compare-bar{position:fixed; bottom:0; left:0; right:0; background:var(--green-deep); color:#fff; z-index:200; padding:12px 20px; display:none; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
.compare-bar.open{display:flex;}
.compare-bar .cb-item{background:rgba(255,255,255,.12); padding:6px 12px; border-radius:16px; font-size:.8rem; display:flex; align-items:center; gap:6px;}
.compare-bar .cb-item button{background:none; border:none; color:#fff; cursor:pointer; font-size:.85rem;}
.compare-table-wrap{overflow-x:auto;}
table.compare-table{width:100%; border-collapse:collapse; min-width:520px;}
table.compare-table th, table.compare-table td{border:1px solid var(--line); padding:10px 12px; font-size:.82rem; text-align:left; vertical-align:top;}
table.compare-table th{background:var(--green-soft); color:var(--green-deep);}
table.compare-table img{width:70px; height:70px; object-fit:cover; border-radius:10px;}

/* ================= REVIEWS ================= */
.reviews-section{margin-top:30px; padding-top:24px; border-top:1px solid var(--line);}
.reviews-summary{display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.reviews-summary .score{font-family:'Fraunces',serif; font-size:2.2rem; color:var(--green-deep);}
.stars{color:var(--gold); font-size:.95rem; letter-spacing:1px;}
.review-item{padding:14px 0; border-bottom:1px solid var(--line);}
.review-item .rname{font-weight:700; font-size:.86rem; margin-bottom:2px;}
.review-item p{font-size:.85rem; color:var(--ink-soft); margin-top:4px;}
.testimonials-section{background:var(--green-soft);}
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.testimonial-card{background:var(--card-bg); border-radius:16px; padding:22px; border:1px solid var(--line);}
.testimonial-card p{font-size:.88rem; color:var(--ink-soft); margin:10px 0;}
.testimonial-card b{font-size:.85rem; color:var(--green-deep);}

/* ================= FAQ ACCORDION ================= */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:18px 4px; font-size:.95rem; font-weight:700; color:var(--green-deep); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:inherit;}
.faq-q .arrow{transition:transform .2s ease; flex-shrink:0;}
.faq-item.open .faq-q .arrow{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:.88rem; color:var(--ink-soft);}
.faq-a-inner{padding:0 4px 18px;}
.faq-item.open .faq-a{max-height:400px;}

/* ================= BEFORE/AFTER ================= */
.ba-slider{position:relative; max-width:520px; margin:0 auto; aspect-ratio:4/3; border-radius:18px; overflow:hidden; box-shadow:0 20px 40px -20px rgba(0,0,0,.3); user-select:none;}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ba-slider .ba-after{clip-path:inset(0 0 0 50%);}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; cursor:ew-resize; transform:translateX(-50%);}
.ba-handle::after{content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; color:var(--green-deep); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;}
.ba-label{position:absolute; top:10px; background:rgba(0,0,0,.55); color:#fff; font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:10px; letter-spacing:.05em; text-transform:uppercase;}
.ba-label.left{left:10px;} .ba-label.right{right:10px;}
.ba-note{text-align:center; font-size:.78rem; color:var(--ink-soft); max-width:520px; margin:14px auto 0;}

/* ================= VIDEO SECTION ================= */
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.video-card{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--card-bg);}
.video-frame-wrap{position:relative; aspect-ratio:16/9; background:#000;}
.video-frame-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-placeholder{display:flex; align-items:center; justify-content:center; background:var(--green-soft);}
.video-placeholder-inner{text-align:center; color:var(--green-deep); font-weight:700; font-size:.85rem; line-height:1.6;}
.video-card-body{padding:12px 14px;}
.video-card-body b{font-size:.85rem;}

/* ================= FLOATING BUTTONS ================= */
.float-actions{position:fixed; left:14px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:150;}
.float-btn{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff; box-shadow:0 8px 18px -6px rgba(0,0,0,.45); cursor:pointer;}
.float-btn.whatsapp{background:#25D366;}
.float-btn.call{background:var(--green-deep);}
.float-btn.pulse::before{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:pulse-ring 2s infinite;}
.float-btn{position:relative;}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

/* ================= SHARE BUTTONS ================= */
.share-row{display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap;}
.share-row span.lbl{font-size:.8rem; font-weight:700; color:var(--ink-soft);}
.share-btn{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; cursor:pointer;}
.share-btn.wa{background:#25D366;} .share-btn.fb{background:#1877F2;} .share-btn.x{background:#000;} .share-btn.tg{background:#26A5E4;}

/* ================= CONTACT FORM ================= */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.contact-form label{display:block; font-size:.8rem; font-weight:700; color:var(--green-deep); margin-bottom:6px;}
.contact-form .field{margin-bottom:16px;}
.contact-form input, .contact-form textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card-bg); color:var(--ink); font-family:inherit; font-size:.9rem;}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--green);}
.form-error{color:#c0392b; font-size:.76rem; margin-top:4px; display:none;}
.field.invalid input, .field.invalid textarea{border-color:#c0392b;}
.field.invalid .form-error{display:block;}
.contact-info-card{background:var(--green-soft); border-radius:18px; padding:28px;}
.contact-info-card h3{color:var(--green-deep); margin-bottom:14px;}
.contact-info-card ul{list-style:none;}
.contact-info-card li{margin-bottom:10px; font-size:.88rem;}
.honeypot{position:absolute; left:-9999px; opacity:0; height:0;}

/* ================= NEWSLETTER ================= */
.newsletter-band{background:linear-gradient(120deg, var(--green-deep), var(--green)); border-radius:28px; padding:44px 40px; text-align:center; color:#fff; max-width:1220px; margin:0 auto;}
.newsletter-band h2{margin-bottom:8px;}
.newsletter-form{display:flex; gap:10px; max-width:440px; margin:20px auto 0; flex-wrap:wrap; justify-content:center;}
.newsletter-form input{flex:1; min-width:220px; padding:13px 18px; border-radius:26px; border:none; font-family:inherit; font-size:.9rem;}
.newsletter-form button{background:var(--gold); color:#1c1f1c; border:none; padding:13px 24px; border-radius:26px; font-weight:700; cursor:pointer;}

/* ================= BLOG ================= */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.blog-card{background:var(--card-bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .15s ease;}
.blog-card:hover{transform:translateY(-4px);}
.blog-card img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.blog-card-body{padding:16px 18px;}
.blog-card-body .date{font-size:.72rem; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.blog-card-body h3{font-size:1.05rem; color:var(--green-deep); margin:8px 0; font-family:'Fraunces',serif;}
.blog-card-body p{font-size:.85rem; color:var(--ink-soft);}
.blog-article{max-width:760px; margin:0 auto;}
.blog-article img{width:100%; border-radius:18px; margin-bottom:24px;}
.blog-article h1{color:var(--green-deep); margin-bottom:10px;}
.blog-article .meta{font-size:.8rem; color:var(--ink-soft); margin-bottom:20px;}
.blog-article .body-text{font-size:1rem; line-height:1.8; color:var(--ink);}
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--green-deep); font-weight:700; margin-bottom:20px; font-size:.88rem;}

/* ================= ORDER TRACKING ================= */
.track-box{max-width:560px; margin:0 auto; background:var(--card-bg); border:1px solid var(--line); border-radius:18px; padding:30px;}
.track-box input{width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--line); background:var(--cream); color:var(--ink); font-family:inherit; margin-bottom:14px;}
.timeline{margin-top:26px;}
.timeline-item{display:flex; gap:14px; padding-bottom:26px; position:relative;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:""; position:absolute; left:11px; top:26px; bottom:0; width:2px; background:var(--line);}
.timeline-item:last-child::before{display:none;}
.timeline-dot{width:24px; height:24px; border-radius:50%; background:var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.7rem; color:#fff;}
.timeline-item.done .timeline-dot{background:var(--green-deep);}
.timeline-item.done::before{background:var(--green-deep);}
.timeline-body b{display:block; font-size:.9rem;}
.timeline-body span{font-size:.78rem; color:var(--ink-soft);}

/* ================= ADMIN ================= */
.admin-login{max-width:380px; margin:80px auto; background:var(--card-bg); border:1px solid var(--line); border-radius:18px; padding:34px;}
.admin-shell{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}
.admin-sidebar{background:var(--green-deep); color:#fff; padding:24px 16px;}
.admin-sidebar h2{font-size:1.1rem; margin-bottom:24px; font-family:'Fraunces',serif;}
.admin-sidebar button{display:block; width:100%; text-align:left; background:none; border:none; color:#fdfbf3; padding:11px 12px; border-radius:10px; margin-bottom:4px; cursor:pointer; font-size:.88rem; font-family:inherit; transition:background .15s ease, transform .1s ease;}
.admin-sidebar button.active, .admin-sidebar button:hover{background:rgba(255,255,255,.12);}
.admin-sidebar button:active{transform:scale(.96);}
.admin-main{padding:30px 34px; overflow:auto;}
.admin-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px;}
.stat-card{background:var(--card-bg); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
.stat-card b{display:block; font-size:1.6rem; color:var(--green-deep); font-family:'Fraunces',serif;}
.stat-card span{font-size:.78rem; color:var(--ink-soft);}
.admin-table{width:100%; border-collapse:collapse; background:var(--card-bg); border-radius:12px; overflow:hidden;}
.admin-table th, .admin-table td{padding:10px 12px; border-bottom:1px solid var(--line); font-size:.82rem; text-align:left;}
.admin-table th{background:var(--green-soft); color:var(--green-deep);}
.admin-table img{width:40px; height:40px; object-fit:cover; border-radius:8px;}
.admin-search{margin-bottom:16px; padding:10px 16px; border-radius:20px; border:1px solid var(--line); width:100%; max-width:340px; background:var(--cream); color:var(--ink);}
.admin-badge{padding:3px 10px; border-radius:10px; font-size:.7rem; font-weight:700;}
.admin-badge.pending{background:var(--gold-soft); color:#8a6d1e;}
.admin-badge.done{background:var(--green-soft); color:var(--green-deep);}
.admin-danger{color:#c0392b; background:none; border:none; cursor:pointer;}

/* ================= INSTALL APP BUTTON (compact, in-flow near top) ================= */
.install-banner{display:none; align-items:center; justify-content:center; gap:8px; margin:14px auto 0; padding:0 16px; max-width:fit-content;}
.install-banner.show{display:flex;}
.install-banner button{border:none; padding:9px 18px; border-radius:20px; font-weight:700; cursor:pointer; font-size:.8rem;}
.install-banner .install-yes{background:var(--green-deep); color:#fff; box-shadow:0 8px 18px -6px rgba(15,77,52,.5); display:flex; align-items:center; gap:6px;}
.install-banner .install-no{background:var(--green-soft); color:var(--green-deep); padding:9px 12px;}
.offline-banner{position:fixed; top:0; left:0; right:0; background:#c0392b; color:#fff; text-align:center; padding:8px; font-size:.8rem; z-index:500; display:none;}
.offline-banner.show{display:block;}

/* ================= 404/500 ================= */
.error-page{min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 20px; background:var(--cream);}
.error-page .code{font-family:'Fraunces',serif; font-size:6rem; color:var(--green-deep); line-height:1;}
.error-page h1{margin:14px 0 10px; color:var(--green-deep);}
.error-page p{color:var(--ink-soft); margin-bottom:26px; max-width:420px;}

/* ================= RESPONSIVE ADDITIONS ================= */
@media(max-width:980px){
  .contact-grid{grid-template-columns:1fr;}
  .testimonial-grid{grid-template-columns:1fr 1fr;}
  .video-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .admin-shell{grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:100vh; align-content:start;}
  .admin-sidebar{display:flex; flex-wrap:nowrap; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px; padding:14px; flex-shrink:0;}
  .admin-sidebar h2{display:none;}
  .admin-sidebar button{display:inline-flex; align-items:center; width:auto; flex:0 0 auto; white-space:nowrap; margin-bottom:0; padding:9px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:20px;}
  .admin-sidebar button.active{background:#fff; color:var(--green-deep); border-color:#fff;}
  .admin-sidebar .order-notif-badge{margin-left:4px;}
  .admin-stats{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .testimonial-grid{grid-template-columns:1fr;}
  .video-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .side-panel{width:100%;}
  .filter-toolbar{gap:8px;}
}