/* =============================================================
   LYZOAKK — Growing Nature. Enriching Life.
   Shop stylesheet
   ============================================================= */

:root{
  /* Palette */
  --green-900:#0b5d3b;
  --green-700:#146b45;
  --green-600:#38a169;
  --green-100:#e3f0e6;
  --green-50:#f2f8f3;

  --gold:#b97b28;
  --gold-light:#f6e9d2;

  --cream:#faf7f0;
  --paper:#ffffff;
  --ink:#20291d;
  --muted:#6d7863;
  --border:#e8e2d3;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;

  --shadow-sm:0 4px 14px rgba(20,40,20,.06);
  --shadow-md:0 14px 34px rgba(20,40,20,.10);
  --shadow-lg:0 24px 60px rgba(20,40,20,.14);

  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

ul{ list-style:none; }

button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:3px solid var(--green-600);
  outline-offset:2px;
}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 8%;
}

@media (max-width:768px){
  .container{ padding:0 20px; }
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

header{
  position:fixed;
  top:0; left:0;
  width:100%;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 8%;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  z-index:999;
}

.logo img{
  height:52px;
  width:auto;
}

nav{
  display:flex;
  align-items:center;
  gap:8px;
}

nav a{
  text-decoration:none;
  color:var(--green-900);
  font-weight:600;
  font-size:15px;
  padding:10px 16px;
  border-radius:30px;
  transition:.25s;
}

nav a:hover, nav a.active{
  background:var(--green-50);
  color:var(--green-700);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--green-50);
  border:none;
  color:var(--green-900);
  text-decoration:none;
  transition:.25s;
}

.icon-btn:hover{ background:var(--green-100); }

.cart-badge{
  position:absolute;
  top:-4px; right:-4px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:20px;
  background:var(--gold);
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:44px; height:44px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
}

.nav-toggle span{
  width:22px; height:2px;
  background:var(--green-900);
  border-radius:2px;
  transition:.25s;
}

@media(max-width:920px){
  nav[data-nav]{
    position:fixed;
    top:78px; left:0; right:0;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:10px 20px 20px;
    box-shadow:0 14px 30px rgba(0,0,0,.1);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:.2s;
  }
  nav[data-nav].open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  nav[data-nav] a{ padding:14px 10px; border-bottom:1px solid var(--border); border-radius:0; }
  .nav-toggle{ display:flex; }
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 30px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  border:none;
  transition:.25s;
}

.btn.primary{ background:var(--green-900); color:#fff; }
.btn.primary:hover{ background:var(--green-700); transform:translateY(-2px); }

.btn.secondary{ border:2px solid var(--green-900); color:var(--green-900); background:transparent; }
.btn.secondary:hover{ background:var(--green-50); }

.btn.gold{ background:var(--gold); color:#fff; }
.btn.gold:hover{ background:#a06a20; transform:translateY(-2px); }

.btn.block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

.btn.small{ padding:9px 18px; font-size:13px; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero{
  padding-top:130px;
  text-align:center;
}

.hero-image{ position:relative; }

.hero-image img{
  width:100%;
  max-width:1400px;
  height:560px;
  object-fit:cover;
  border-radius:26px;
  margin:auto;
}

.hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  max-width:1400px;
  margin:auto;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(11,93,59,0) 40%, rgba(11,60,38,.55) 100%);
}

/* Logo badge — real HTML/CSS, always perfectly centered regardless of how
   object-fit:cover crops the photo underneath on any screen size.
   Fixed, deterministic dimensions (rather than auto-width) avoid a sizing
   conflict some browsers hit between an auto-width absolute box and a
   percentage-max-width image inside it, which was clipping the logo. */
.hero-logo-badge{
  position:absolute;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  width:184px;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  z-index:2;
}
.hero-logo-badge img{
  width:auto;
  height:80%;
  max-width:90%;
  object-fit:contain;
  display:block;
}

@media(max-width:600px){
  .hero-logo-badge{ top:16px; width:150px; height:54px; }
}

.hero-content{
  padding:50px 20px 10px;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  background:var(--gold-light);
  padding:8px 18px;
  border-radius:30px;
  margin-bottom:20px;
}

.hero h1{
  font-family:var(--font-display);
  font-size:56px;
  line-height:1.08;
  color:var(--green-900);
  margin-bottom:16px;
  font-weight:700;
}

.hero p{
  font-size:19px;
  color:var(--muted);
  max-width:560px;
  margin:0 auto;
}

.buttons{ margin-top:32px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------------------------------------------------------
   Sections / headings
   --------------------------------------------------------- */

section{ padding:90px 8%; }

.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 50px;
}

.section-head.left{ text-align:left; margin-left:0; }

h2{
  font-family:var(--font-display);
  font-size:42px;
  color:var(--green-900);
  font-weight:700;
  margin-bottom:12px;
}

.section-head p{ color:var(--muted); font-size:17px; }

.strip{ background:var(--green-50); }

/* ---------------------------------------------------------
   Product grid & card
   --------------------------------------------------------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.card{
  background:var(--paper);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:.3s;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--border);
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

.card-media{ position:relative; }

.card-media img{
  width:100%;
  height:230px;
  object-fit:cover;
}

.ribbon{
  position:absolute;
  top:14px; left:14px;
  background:var(--green-900);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:30px;
}

.card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }

.card-cat{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); font-weight:700; }

.card h3{
  font-family:var(--font-display);
  color:var(--green-900);
  font-size:19px;
  font-weight:600;
}

.card-tag{ color:var(--muted); font-size:14px; flex:1; }

.rating{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.rating .stars{ color:var(--gold); letter-spacing:1px; }

.card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}

.price{ font-family:var(--font-display); font-weight:700; color:var(--green-900); font-size:18px; }
.price small{ font-weight:500; color:var(--muted); font-size:12px; }

/* ---------------------------------------------------------
   About / split sections
   --------------------------------------------------------- */

.about{
  display:flex;
  gap:56px;
  align-items:center;
  flex-wrap:wrap;
}

.about-image{ flex:1; min-width:280px; }
.about-image img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.about-text{ flex:1; min-width:280px; }
.about-text h2{ text-align:left; }
.about-text p{ font-size:17px; color:var(--muted); margin-bottom:16px; }

.stat-row{ display:flex; gap:34px; margin-top:28px; flex-wrap:wrap; }
.stat b{ display:block; font-family:var(--font-display); font-size:30px; color:var(--green-900); }
.stat span{ color:var(--muted); font-size:13px; }

/* ---------------------------------------------------------
   Value / feature grid (icons)
   --------------------------------------------------------- */

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:26px;
  margin-top:10px;
}

.feature{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px 24px;
  text-align:left;
}

.feature .ico{
  width:46px; height:46px;
  border-radius:50%;
  background:var(--green-50);
  color:var(--green-900);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  font-size:20px;
}

.feature h4{ font-family:var(--font-display); color:var(--green-900); margin-bottom:8px; font-size:17px; }
.feature p{ color:var(--muted); font-size:14px; }

/* ---------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------- */

.breadcrumb{
  padding:120px 8% 0;
  font-size:13px;
  color:var(--muted);
}
.breadcrumb a{ color:var(--green-700); text-decoration:none; font-weight:600; }

.page-head{ padding:30px 8% 50px; }
.page-head h1{
  font-family:var(--font-display);
  font-size:44px;
  color:var(--green-900);
  margin-bottom:10px;
}
.page-head p{ color:var(--muted); font-size:17px; max-width:600px; }

/* ---------------------------------------------------------
   Filters (Products page)
   --------------------------------------------------------- */

.filter-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:36px;
  padding:14px 20px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:30px;
}

.pill-group{ display:flex; gap:8px; flex-wrap:wrap; }

.pill{
  border:1px solid var(--border);
  background:#fff;
  padding:9px 18px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}

.pill.active{ background:var(--green-900); color:#fff; border-color:var(--green-900); }

.sort-select{
  border:1px solid var(--border);
  border-radius:30px;
  padding:9px 16px;
  font-size:13px;
  font-family:inherit;
  color:var(--ink);
  background:#fff;
}

/* ---------------------------------------------------------
   Product detail page
   --------------------------------------------------------- */

.product-detail{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:56px;
  padding:30px 8% 90px;
  align-items:flex-start;
}

@media(max-width:900px){
  .product-detail{ grid-template-columns:1fr; padding-top:10px; }
}

.pd-cat{ color:var(--gold); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }

.pd-title{
  font-family:var(--font-display);
  font-size:36px;
  color:var(--green-900);
  margin:10px 0 8px;
}

.pd-tag{ color:var(--muted); font-size:16px; margin-bottom:16px; }

.pd-price{ font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--green-900); margin:18px 0; }

.variant-group{ margin-bottom:22px; }
.variant-group label.field-label{ display:block; font-weight:600; font-size:14px; margin-bottom:10px; }

.variant-options{ display:flex; gap:10px; flex-wrap:wrap; }

.variant-pill{
  border:2px solid var(--border);
  border-radius:30px;
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  background:#fff;
  color:var(--ink);
}

.variant-pill.selected{ border-color:var(--green-900); background:var(--green-50); color:var(--green-900); }

.qty-row{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }

.stepper{
  display:inline-flex;
  align-items:center;
  border:2px solid var(--border);
  border-radius:30px;
  overflow:hidden;
}

.stepper button{
  width:40px; height:40px;
  background:#fff;
  border:none;
  font-size:18px;
  color:var(--green-900);
  font-weight:700;
}
.stepper button:hover{ background:var(--green-50); }
.stepper input{
  width:44px;
  text-align:center;
  border:none;
  font-size:15px;
  font-weight:600;
  font-family:inherit;
}
.stepper input:focus{ outline:none; }

.pd-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.pd-actions .btn{ flex:1; min-width:180px; }

.info-block{ margin-bottom:26px; }
.info-block h4{ font-family:var(--font-display); color:var(--green-900); margin-bottom:10px; font-size:16px; }
.info-block p{ color:var(--muted); font-size:15px; }
.info-block ul{ margin-top:8px; }
.info-block li{
  color:var(--muted);
  font-size:15px;
  padding-left:22px;
  position:relative;
  margin-bottom:8px;
}
.info-block li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--green-600);
  font-weight:700;
}

.trust-row{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  padding-top:22px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--muted);
}
.trust-row span{ display:flex; align-items:center; gap:6px; }

/* ---------------------------------------------------------
   Cart page
   --------------------------------------------------------- */

.cart-layout{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:40px;
  align-items:flex-start;
}

@media(max-width:900px){ .cart-layout{ grid-template-columns:1fr; } }

.cart-line{
  display:grid;
  grid-template-columns:88px 1fr auto auto;
  gap:18px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--border);
}

.cart-line img{ width:88px; height:88px; object-fit:cover; border-radius:var(--radius-sm); }

.cart-line .name{ font-family:var(--font-display); color:var(--green-900); font-weight:600; margin-bottom:4px; }
.cart-line .meta{ color:var(--muted); font-size:13px; }

.cart-line .line-price{ font-weight:700; color:var(--green-900); font-family:var(--font-display); }

.remove-link{
  background:none; border:none; color:#a94442; font-size:13px; font-weight:600; text-decoration:underline;
  margin-top:6px;
}

@media(max-width:560px){
  .cart-line{ grid-template-columns:64px 1fr; }
  .cart-line img{ width:64px; height:64px; }
  .cart-line .stepper{ margin-top:10px; }
  .cart-line .line-price{ margin-top:10px; }
}

.summary-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  position:sticky;
  top:110px;
}

.summary-card h3{ font-family:var(--font-display); color:var(--green-900); margin-bottom:20px; }

.summary-row{
  display:flex;
  justify-content:space-between;
  font-size:15px;
  color:var(--muted);
  margin-bottom:12px;
}

.summary-row.total{
  color:var(--green-900);
  font-weight:700;
  font-size:19px;
  font-family:var(--font-display);
  border-top:1px solid var(--border);
  padding-top:16px;
  margin-top:6px;
}

.free-ship-note{
  background:var(--green-50);
  color:var(--green-700);
  font-size:13px;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  margin:16px 0;
}

.empty-state{
  text-align:center;
  padding:70px 20px;
}
.empty-state .ico{ font-size:52px; margin-bottom:18px; }
.empty-state h3{ font-family:var(--font-display); color:var(--green-900); margin-bottom:10px; font-size:24px; }
.empty-state p{ color:var(--muted); margin-bottom:26px; }

/* ---------------------------------------------------------
   Forms (checkout / contact)
   --------------------------------------------------------- */

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:13px; font-weight:600; color:var(--ink); }

.field input, .field select, .field textarea{
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:13px 14px;
  font-family:inherit;
  font-size:14px;
  background:#fff;
  color:var(--ink);
}

.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--green-600);
}

.field textarea{ resize:vertical; min-height:110px; }

.pay-options{ display:flex; flex-direction:column; gap:12px; }

.pay-option{
  display:flex;
  align-items:center;
  gap:12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
}
.pay-option input{ accent-color:var(--green-900); }
.pay-option.selected{ border-color:var(--green-900); background:var(--green-50); }

.checkout-layout{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:44px;
  align-items:flex-start;
}
@media(max-width:900px){ .checkout-layout{ grid-template-columns:1fr; } }

.checkout-section{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  margin-bottom:24px;
}
.checkout-section h3{ font-family:var(--font-display); color:var(--green-900); margin-bottom:18px; font-size:19px; }

.mini-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--muted);
  padding:8px 0;
  border-bottom:1px dashed var(--border);
}

/* ---------------------------------------------------------
   Order confirmation
   --------------------------------------------------------- */

.confirm-box{
  max-width:560px;
  margin:60px auto;
  text-align:center;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:56px 40px;
}
.confirm-box .tick{
  width:74px; height:74px;
  border-radius:50%;
  background:var(--green-50);
  color:var(--green-900);
  font-size:34px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
}
.confirm-box h2{ margin-bottom:10px; }
.confirm-box p{ color:var(--muted); margin-bottom:8px; }
.confirm-id{
  display:inline-block;
  margin:16px 0 26px;
  padding:10px 20px;
  background:var(--gold-light);
  color:var(--gold);
  font-weight:700;
  border-radius:30px;
  font-family:var(--font-display);
}

/* ---------------------------------------------------------
   Knowledge / articles
   --------------------------------------------------------- */

.article-card{ padding:0; }
.article-card .card-body{ gap:10px; }
.read-tag{ font-size:12px; color:var(--muted); }

/* ---------------------------------------------------------
   Contact page
   --------------------------------------------------------- */

.contact-layout{
  display:grid;
  grid-template-columns:.9fr 1.3fr;
  gap:48px;
  align-items:flex-start;
}
@media(max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }

.contact-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px;
  margin-bottom:18px;
  display:flex; gap:16px; align-items:flex-start;
}
.contact-card .ico{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--green-50);
  color:var(--green-900);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact-card h4{ font-family:var(--font-display); color:var(--green-900); margin-bottom:4px; }
.contact-card p{ color:var(--muted); font-size:14px; }

/* ---------------------------------------------------------
   Newsletter strip
   --------------------------------------------------------- */

.newsletter{
  background:var(--green-900);
  border-radius:var(--radius-lg);
  padding:50px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  color:#fff;
  margin:0 8%;
  width:auto;
}
.newsletter h3{ font-family:var(--font-display); font-size:26px; margin-bottom:6px; }
.newsletter p{ color:rgba(255,255,255,.75); font-size:14px; }
.newsletter form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter input{
  padding:13px 18px;
  border-radius:30px;
  border:none;
  min-width:240px;
  font-family:inherit;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

footer{
  background:var(--green-900);
  color:rgba(255,255,255,.85);
  padding:70px 8% 30px;
  margin-top:40px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:40px;
}

@media(max-width:768px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

.footer-brand h3{ font-family:var(--font-display); color:#fff; font-size:22px; margin-bottom:10px; }
.footer-brand p{ font-size:14px; color:rgba(255,255,255,.65); max-width:280px; }

footer h5{ color:#fff; font-family:var(--font-display); font-size:14px; margin-bottom:16px; letter-spacing:.03em; }
footer ul li{ margin-bottom:10px; }
footer ul li a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:14px; }
footer ul li a:hover{ color:#fff; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:rgba(255,255,255,.6);
}

/* ---------------------------------------------------------
   Toast
   --------------------------------------------------------- */

.lz-toast{
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translate(-50%, 20px);
  background:var(--green-900);
  color:#fff;
  padding:14px 26px;
  border-radius:40px;
  font-size:14px;
  font-weight:600;
  box-shadow:var(--shadow-lg);
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:1200;
}
.lz-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media(max-width:768px){
  header{ padding:12px 20px; }
  .logo img{ height:42px; }
  .hero{ padding-top:110px; }
  .hero-image img{ height:280px; border-radius:18px; }
  .hero h1{ font-size:34px; }
  .hero p{ font-size:16px; }
  section{ padding:60px 20px; }
  h2{ font-size:30px; }
  .page-head{ padding:20px 20px 34px; }
  .page-head h1{ font-size:32px; }
  .breadcrumb{ padding:100px 20px 0; }
  .newsletter{ margin:0 20px; flex-direction:column; text-align:center; padding:36px 24px; }
  .newsletter form{ width:100%; }
  .newsletter input{ flex:1; }
  .footer-grid{ grid-template-columns:1fr; }
}

/* =============================================================
   Admin Desk
   ============================================================= */

.admin-body{ background:var(--cream); }

.admin-shell{ display:flex; min-height:100vh; }

.admin-sidebar{
  width:260px;
  background:var(--green-900);
  color:#fff;
  padding:26px 18px;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  overflow-y:auto;
  z-index:1500;
}

.admin-sidebar .brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 26px; }
.admin-sidebar .brand img{ height:32px; background:#fff; border-radius:8px; padding:3px; }
.admin-sidebar .brand span{ font-family:var(--font-display); font-weight:700; font-size:16px; }

.admin-nav{ display:flex; flex-direction:column; gap:4px; }
.admin-nav a{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:10px;
  color:rgba(255,255,255,.72);
  text-decoration:none; font-weight:600; font-size:14px;
}
.admin-nav a .ic{ font-size:16px; width:20px; text-align:center; }
.admin-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.admin-nav a.active{ background:rgba(255,255,255,.16); color:#fff; }

.admin-sidebar-footer{ margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:4px; }

.admin-main{ margin-left:260px; flex:1; padding:34px 42px 70px; min-width:0; }

.admin-topbar{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:30px; flex-wrap:wrap; gap:14px;
}
.admin-topbar h1{ font-family:var(--font-display); color:var(--green-900); font-size:27px; margin-bottom:4px; }
.admin-topbar p{ color:var(--muted); font-size:14px; }

.mobile-admin-toggle{
  display:none; width:42px; height:42px; border-radius:10px;
  background:var(--paper); border:1px solid var(--border);
  align-items:center; justify-content:center; font-size:18px;
}

/* Stats */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-bottom:32px; }
.stat-card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; }
.stat-card .label{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.stat-card .value{ font-family:var(--font-display); font-size:27px; color:var(--green-900); font-weight:700; }
.stat-card .delta{ font-size:12px; color:var(--green-600); margin-top:8px; font-weight:600; }
.stat-card .delta.warn{ color:#a94442; }

/* Panels & tables */
.admin-panel{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; margin-bottom:26px; overflow-x:auto; }
.admin-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:14px; flex-wrap:wrap; }
.admin-panel h3{ font-family:var(--font-display); color:var(--green-900); font-size:18px; }

.admin-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.admin-table th{ text-align:left; padding:12px 14px; color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); white-space:nowrap; }
.admin-table td{ padding:14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr:hover td{ background:var(--green-50); }
.admin-table img{ width:44px; height:44px; object-fit:cover; border-radius:9px; }
.prod-name-cell{ display:flex; align-items:center; gap:12px; }
.prod-name-cell .meta{ font-weight:600; color:var(--ink); }
.prod-name-cell .sub{ font-size:12px; color:var(--muted); }
.thumb-enlarge{ cursor:zoom-in; transition:opacity .15s ease; }
.thumb-enlarge:hover{ opacity:.75; }

.badge{ display:inline-block; padding:5px 13px; border-radius:30px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.badge.active{ background:var(--green-50); color:var(--green-700); }
.badge.draft{ background:#f1eee3; color:var(--muted); }
.badge.low{ background:#fdecea; color:#a94442; }
.badge.pending{ background:var(--gold-light); color:var(--gold); }
.badge.processing{ background:#e6f0fb; color:#2b6cb0; }
.badge.shipped{ background:#ece5fb; color:#6b46c1; }
.badge.delivered{ background:var(--green-50); color:var(--green-700); }
.badge.cancelled{ background:#fdecea; color:#a94442; }

.status-select{
  border:1px solid var(--border); border-radius:20px; padding:6px 12px;
  font-size:12.5px; font-weight:600; font-family:inherit; background:#fff; color:var(--ink);
}

.icon-action{ background:none; border:none; color:var(--muted); font-size:15px; padding:7px 9px; border-radius:8px; cursor:pointer; }
.icon-action:hover{ background:var(--green-50); color:var(--green-900); }
.icon-action.danger:hover{ background:#fdecea; color:#a94442; }

.admin-empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.admin-empty .ico{ font-size:40px; margin-bottom:14px; }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,35,20,.5);
  display:flex; align-items:flex-start; justify-content:center;
  padding:50px 20px; overflow-y:auto; z-index:2000;
  opacity:0; pointer-events:none; transition:.2s;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{ background:var(--paper); border-radius:var(--radius-lg); max-width:680px; width:100%; padding:30px; box-shadow:var(--shadow-lg); margin-bottom:40px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.modal-head h3{ font-family:var(--font-display); color:var(--green-900); font-size:20px; }
.modal-close{ background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1; padding:4px; }
.modal-close:hover{ color:var(--ink); }

.variant-row{ display:flex; gap:10px; margin-bottom:10px; align-items:center; }
.variant-row input{ flex:1; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:11px 12px; font-family:inherit; font-size:14px; }
.variant-row button{ background:none; border:none; color:#a94442; font-size:18px; cursor:pointer; padding:6px; }
.add-row-btn{ background:none; border:1.5px dashed var(--border); border-radius:var(--radius-sm); padding:10px; width:100%; color:var(--muted); font-weight:600; font-size:13px; cursor:pointer; }
.add-row-btn:hover{ border-color:var(--green-600); color:var(--green-700); }
.field .buttons{ margin-top:8px; justify-content:flex-start; }
.field .buttons .add-row-btn{ width:auto; flex:1; }
.field .buttons label.btn{ flex:1; text-align:center; }

/* Admin: multi-image manager rows */
.image-row{ display:flex; gap:10px; margin-bottom:10px; align-items:center; background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px; }
.image-row.dragging{ opacity:.4; }
.image-row .drag-handle{ cursor:grab; color:var(--muted); font-size:16px; padding:0 2px; user-select:none; }
.image-row .image-row-thumb{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#fff; border:1px solid var(--border); cursor:zoom-in; }
.image-row input{ flex:1; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; font-family:inherit; font-size:13px; min-width:0; }
.image-row .cover-tag{ font-size:11px; font-weight:700; color:var(--green-700); background:rgba(90,140,90,.15); padding:3px 8px; border-radius:20px; white-space:nowrap; }
.image-row button{ background:none; border:none; color:#a94442; font-size:18px; cursor:pointer; padding:6px; flex-shrink:0; }

/* ---------------------------------------------------------
   Product detail page — image gallery (main image + thumbnails, zoom)
   --------------------------------------------------------- */
.pd-gallery{ position:sticky; top:110px; }
.pd-main-image{
  position:relative;
  width:100%;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  background:#fff;
  aspect-ratio:1/1;
  cursor:zoom-in;
}
.pd-main-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
  transform-origin:center center;
}
.pd-main-image.zoomed img{ transform:scale(1.9); cursor:zoom-out; }

/* Fallback for browsers without aspect-ratio support: force a square box
   via the classic padding-top trick instead (img stays absolutely positioned). */
@supports not (aspect-ratio: 1 / 1) {
  .pd-main-image{ height:0; padding-top:100%; }
}
.pd-expand-btn{
  position:absolute;
  bottom:12px;
  right:12px;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(20,24,20,.55);
  color:#fff;
  border:none;
  font-size:16px;
  cursor:zoom-in;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.pd-expand-btn:hover{ background:rgba(20,24,20,.75); }
.pd-thumbs{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.pd-thumb{
  width:64px;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  border:2px solid transparent;
  padding:0;
  background:#fff;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:var(--shadow-sm, 0 1px 4px rgba(0,0,0,.08));
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb.active{ border-color:var(--green-600); }
.pd-thumb:hover{ border-color:var(--green-300, var(--green-600)); }

@media(max-width:900px){
  .pd-gallery{ position:static; }
  .pd-main-image{ cursor:default; }
  .pd-main-image.zoomed img{ transform:none; }
  /* Swipeable strip on mobile instead of a grid of thumbs */
  .pd-thumbs{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .pd-thumb{ scroll-snap-align:start; }
}

/* ---------------------------------------------------------
   Lightbox — click any thumbnail/image to see it enlarged
   --------------------------------------------------------- */
body.lz-lightbox-lock{ overflow:hidden; }
.lz-lightbox{
  position:fixed;
  inset:0;
  background:rgba(20,24,20,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  padding:40px;
}
.lz-lightbox.open{ opacity:1; pointer-events:auto; }
.lz-lightbox-img{
  max-width:min(90vw, 1100px);
  max-height:86vh;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lz-lightbox-close{
  position:absolute;
  top:20px; right:24px;
  background:rgba(255,255,255,.12);
  border:none;
  color:#fff;
  font-size:20px;
  width:42px; height:42px;
  border-radius:50%;
  cursor:pointer;
}
.lz-lightbox-close:hover{ background:rgba(255,255,255,.24); }
.lz-lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.12);
  border:none;
  color:#fff;
  font-size:28px;
  width:48px; height:48px;
  border-radius:50%;
  cursor:pointer;
  line-height:1;
}
.lz-lightbox-nav:hover{ background:rgba(255,255,255,.24); }
.lz-lightbox-nav.prev{ left:20px; }
.lz-lightbox-nav.next{ right:20px; }
.lz-lightbox-count{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:13px;
  background:rgba(255,255,255,.14);
  padding:5px 14px;
  border-radius:20px;
  letter-spacing:.03em;
}
@media(max-width:640px){
  .lz-lightbox{ padding:16px; }
  .lz-lightbox-nav{ width:40px; height:40px; font-size:22px; }
  .lz-lightbox-nav.prev{ left:8px; }
  .lz-lightbox-nav.next{ right:8px; }
}

/* Login */
.admin-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--cream); }
.admin-login-card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); padding:46px 40px; max-width:380px; width:100%; text-align:center; box-shadow:var(--shadow-md); }
.admin-login-card img{ height:48px; margin:0 auto 18px; }
.admin-login-card h2{ font-family:var(--font-display); color:var(--green-900); margin-bottom:6px; font-size:22px; }
.admin-login-card p{ color:var(--muted); font-size:14px; margin-bottom:28px; }
.admin-login-card .field{ text-align:left; }
.admin-hint{ margin-top:18px; font-size:12px; color:var(--muted); background:var(--green-50); padding:10px 14px; border-radius:var(--radius-sm); text-align:left; }
.login-error{ color:#a94442; font-size:13px; margin-top:10px; display:none; }

/* Order detail */
.order-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:20px; }
.order-detail-grid .block h5{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.order-detail-grid .block p{ font-size:14px; color:var(--ink); line-height:1.5; }
.order-items-list{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.order-items-list .oi{ display:flex; justify-content:space-between; font-size:14px; padding:10px 0; border-bottom:1px dashed var(--border); }

@media(max-width:960px){
  .admin-sidebar{ transform:translateX(-100%); transition:.25s; }
  .admin-sidebar.open{ transform:translateX(0); }
  .admin-main{ margin-left:0; padding:22px 18px 60px; }
  .mobile-admin-toggle{ display:inline-flex; }
  .order-detail-grid{ grid-template-columns:1fr; }
  .sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1400; }
  .sidebar-scrim.open{ display:block; }
}

/* ---------------------------------------------------------
   PWA — "Install App" banner
   --------------------------------------------------------- */
.pwa-install-banner{
  position:fixed;
  left:16px; right:16px; bottom:16px;
  max-width:420px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg, 16px);
  box-shadow:var(--shadow-md);
  padding:14px 14px 14px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:2000;
  transform:translateY(140%);
  transition:transform .3s ease;
}
.pwa-install-banner.show{ transform:translateY(0); }
.pwa-install-banner img{ width:44px; height:44px; border-radius:10px; flex-shrink:0; }
.pwa-install-text{ display:flex; flex-direction:column; flex:1; min-width:0; }
.pwa-install-text strong{ font-size:14px; color:var(--ink); }
.pwa-install-text span{ font-size:12px; color:var(--muted); line-height:1.3; }
.pwa-install-btn{
  background:var(--green-900);
  color:#fff;
  border:none;
  border-radius:20px;
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  flex-shrink:0;
}
.pwa-install-btn:hover{ background:var(--green-700); }
.pwa-install-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  padding:4px;
  flex-shrink:0;
}
@media(max-width:480px){
  .pwa-install-banner{ left:10px; right:10px; bottom:10px; padding:12px; }
}