/* ==========================================================================
   AgroGuard Supply — Design System
   Palette: deep agricultural green, soil brown accent, warm cream surface
   Type: Space Grotesk (display) + Inter (body/UI)
   ========================================================================== */

:root{
  /* Color */
  --green-900:#0F2E1F;
  --green-800:#153B27;
  --green-700:#1E5631;
  --green-600:#2C7A44;
  --green-500:#3A9556;
  --green-100:#E4F1E6;
  --green-50:#F3F8F3;
  --soil-600:#8A6A46;
  --soil-100:#F1E7D8;
  --charcoal-900:#1B1D1C;
  --charcoal-700:#3A3F3C;
  --gray-600:#6B7370;
  --gray-300:#D6DBD7;
  --gray-100:#EEF1EE;
  --white:#FFFFFF;
  --cream:#FBFAF6;
  --amber-600:#B4690E;
  --amber-100:#FBEBD3;
  --red-600:#B3261E;
  --red-100:#FBE7E5;

/* Type */
--font-display:"Merriweather", Georgia, serif;
--font-body:"Source Sans 3", "Segoe UI", sans-serif;

  /* Layout */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,46,31,0.08);
  --shadow-md:0 6px 20px rgba(15,46,31,0.10);
  --max-width:1240px;
  --nav-height:72px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal-900);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 .5em;
  line-height:1.15;
  color:var(--green-900);
  font-weight:600;
}
p{margin:0 0 1em; color:var(--charcoal-700);}
a{color:var(--green-700); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}

.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
}

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

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{background:var(--green-700); color:var(--white);}
.btn-primary:hover{background:var(--green-800); text-decoration:none;}
.btn-secondary{background:var(--white); color:var(--green-800); border-color:var(--green-700);}
.btn-secondary:hover{background:var(--green-50); text-decoration:none;}
.btn-outline{background:transparent; color:var(--charcoal-900); border-color:var(--gray-300);}
.btn-outline:hover{border-color:var(--green-700); text-decoration:none;}
.btn-text{background:none; color:var(--green-700); padding:6px 4px;}
.btn-danger{background:var(--red-600); color:var(--white);}
.btn-danger:hover{background:#8f1e18;}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px; font-size:.85rem;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------------- Top utility bar & Nav ---------------- */
.topbar{
  background:var(--green-900); color:var(--green-100);
  font-size:.8rem; padding:6px 0;
}
.topbar .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;}
.topbar a{color:var(--green-100);}

.navbar{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--gray-100);
  height:var(--nav-height);
}
.navbar .container{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--green-900);}
.brand-mark{
  width:36px; height:36px; border-radius:8px; background:var(--green-700);
  display:flex; align-items:center; justify-content:center; color:var(--white); flex-shrink:0;
}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{color:var(--charcoal-900); font-weight:500; font-size:.95rem;}
.nav-links a:hover{color:var(--green-700); text-decoration:none;}
.nav-actions{display:flex; align-items:center; gap:16px;}
.nav-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--gray-300); border-radius:var(--radius-sm);
  padding:8px 12px; min-width:220px; background:var(--gray-100);
}
.nav-search input{border:none; background:none; outline:none; width:100%; font-size:.9rem;}
.icon-btn{
  position:relative; background:none; border:none; cursor:pointer;
  color:var(--charcoal-900); display:flex; align-items:center; padding:4px;
}
.cart-badge{
  position:absolute; top:-6px; right:-8px;
  background:var(--soil-600); color:var(--white);
  font-size:.68rem; font-weight:700; line-height:1;
  padding:3px 5px; border-radius:999px; min-width:16px; text-align:center;
}
.hamburger{display:none; background:none; border:none; cursor:pointer; padding:4px;}

.mobile-drawer{
  display:none; position:fixed; inset:0; z-index:80;
}
.mobile-drawer.open{display:block;}
.mobile-drawer .backdrop{position:absolute; inset:0; background:rgba(15,46,31,.4);}
.mobile-drawer .panel{
  position:absolute; top:0; right:0; height:100%; width:78%; max-width:320px;
  background:var(--white); padding:24px; overflow-y:auto;
  display:flex; flex-direction:column; gap:20px;
}
.mobile-drawer .panel a{font-size:1.05rem; font-weight:600; color:var(--charcoal-900); padding:8px 0; display:block;}
.mobile-drawer .close-drawer{align-self:flex-end; background:none; border:none; cursor:pointer;}

/* ---------------- Hero ---------------- */
.hero{
  background:linear-gradient(180deg, var(--green-900) 0%, var(--green-800) 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 64px);
  opacity:.5;
}
.hero .container{
  position:relative;
  padding:88px 24px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.hero-eyebrow{color:var(--green-100); font-weight:600; font-size:.85rem; margin-bottom:12px; letter-spacing:.02em;}
.hero h1{color:var(--white); font-size:clamp(2rem,4vw,3rem); max-width:14ch;}
.hero p{color:var(--green-100); max-width:48ch; font-size:1.05rem;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.hero-visual{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  aspect-ratio:4/3; 
  display:flex; align-items:center; justify-content:center;
}
.hero-visual img{width:100%; height:100%;}

/* ---------------- Sections ---------------- */
.section{padding:72px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:36px; flex-wrap:wrap;}
.section-head p{margin:0; max-width:52ch;}
.section-alt{background:var(--green-50);}

/* ---------------- Category cards ---------------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.category-card{
  background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-md);
  padding:24px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.category-card:hover{border-color:var(--green-500); box-shadow:var(--shadow-sm);}
.category-icon{
  width:44px; height:44px; border-radius:10px; background:var(--green-100);
  display:flex; align-items:center; justify-content:center; color:var(--green-700);
}
.category-card h3{font-size:1.05rem; margin-bottom:2px;}
.category-card p{font-size:.88rem; margin-bottom:8px;}

/* ---------------- Product grid & card ---------------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.product-card{
  background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.product-card:hover{box-shadow:var(--shadow-md); border-color:var(--gray-300);}
.product-media{
  aspect-ratio:1/1; background:var(--green-50);
  display:flex; align-items:center; justify-content:center; color:var(--green-700);
  position:relative;
}
.product-media svg{width:44%; height:44%;}
.stock-flag{
  position:absolute; top:10px; left:10px;
  font-size:.68rem; font-weight:700; padding:4px 9px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em;
}
.flag-in{background:var(--green-100); color:var(--green-800);}
.flag-low{background:var(--amber-100); color:var(--amber-600);}
.flag-out{background:var(--gray-100); color:var(--gray-600);}
.flag-expired{background:var(--red-100); color:var(--red-600);}
.product-body{padding:16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.product-category{font-size:.75rem; color:var(--green-700); font-weight:600; text-transform:uppercase; letter-spacing:.02em;}
.product-body h3{font-size:1rem; margin:0;}
.product-meta{font-size:.82rem; color:var(--gray-600);}
.product-price-row{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
.price{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--green-900);}
.product-actions{display:flex; gap:8px; padding:0 16px 16px;}
.product-actions .btn{flex:1; padding:10px 12px; font-size:.85rem;}

/* ---------------- Why choose us ---------------- */
.grid-4.features .feature{background:var(--white); border-radius:var(--radius-md); padding:26px; border:1px solid var(--gray-100);}
.feature-icon{width:40px; height:40px; border-radius:10px; background:var(--soil-100); color:var(--soil-600); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}

/* ---------------- CTA ---------------- */
.cta-band{
  background:var(--soil-600); color:var(--white); border-radius:var(--radius-lg);
  padding:48px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.cta-band h2{color:var(--white); margin-bottom:6px;}
.cta-band p{color:var(--soil-100); margin:0;}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--green-900); color:var(--green-100); padding:56px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
.site-footer h4{color:var(--white); font-size:.95rem; margin-bottom:14px;}
.site-footer a{color:var(--green-100); font-size:.9rem;}
.site-footer .brand{color:var(--white); margin-bottom:12px;}
.footer-list li{margin-bottom:10px;}
.social-row{display:flex; gap:12px; margin-top:16px;}
.social-row a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14); padding-top:20px; font-size:.82rem; color:var(--green-100); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* ---------------- Breadcrumb / page header ---------------- */
.page-header{padding:40px 0 8px;}
.breadcrumb{font-size:.85rem; color:var(--gray-600); margin-bottom:10px;}
.breadcrumb a{color:var(--gray-600);}
.page-header h1{margin-bottom:6px;}

/* ---------------- Filters / toolbar ---------------- */
.products-layout{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:flex-start;}
.filter-panel{
  background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-md);
  padding:20px; position:sticky; top:calc(var(--nav-height) + 16px);
}
.filter-group{border-bottom:1px solid var(--gray-100); padding:16px 0;}
.filter-group:first-child{padding-top:0;}
.filter-group:last-child{border-bottom:none; padding-bottom:0;}
.filter-group h4{font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--charcoal-700); margin-bottom:10px;}
.filter-option{display:flex; align-items:center; gap:8px; font-size:.9rem; margin-bottom:8px; color:var(--charcoal-700);}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
.toolbar-search{flex:1; min-width:220px;}
.select-field, .toolbar select{
  border:1px solid var(--gray-300); border-radius:var(--radius-sm); padding:10px 12px;
  background:var(--white); font-size:.9rem; color:var(--charcoal-900);
}
.result-count{font-size:.85rem; color:var(--gray-600);}

/* ---------------- Forms ---------------- */
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:.88rem; font-weight:600; margin-bottom:6px; color:var(--charcoal-900);}
.form-field .hint{font-size:.78rem; color:var(--gray-600); margin-top:4px;}
.form-field input[type=text], .form-field input[type=email], .form-field input[type=tel],
.form-field input[type=password], .form-field input[type=date], .form-field input[type=time],
.form-field input[type=number], .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--gray-300); border-radius:var(--radius-sm);
  padding:11px 13px; font-size:.92rem; font-family:inherit; background:var(--white);
  color:var(--charcoal-900);
}
.form-field textarea{resize:vertical; min-height:96px;}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:2px solid var(--green-500); outline-offset:1px; border-color:var(--green-500);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-error{color:var(--red-600); font-size:.8rem; margin-top:4px; display:none;}
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea{border-color:var(--red-600);}
.form-field.invalid .form-error{display:block;}
.password-field{position:relative;}
.password-toggle{position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--gray-600);}

/* ---------------- Cards / panels ---------------- */
.panel{background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-md); padding:24px;}

/* ---------------- Cart ---------------- */
.cart-layout{display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:flex-start;}
.cart-item{
  display:grid; grid-template-columns:80px 1fr auto auto auto; gap:16px; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--gray-100);
}
.cart-item-media{width:80px; height:80px; border-radius:var(--radius-sm); background:var(--green-50); display:flex; align-items:center; justify-content:center; color:var(--green-700);}
.cart-item-media svg{width:60%; height:60%;}
.qty-control{display:flex; align-items:center; border:1px solid var(--gray-300); border-radius:var(--radius-sm); overflow:hidden;}
.qty-control button{width:32px; height:32px; background:var(--gray-100); border:none; cursor:pointer; font-size:1rem;}
.qty-control input{width:40px; text-align:center; border:none; font-size:.9rem;}
.summary-row{display:flex; justify-content:space-between; font-size:.92rem; margin-bottom:12px; color:var(--charcoal-700);}
.summary-row.total{font-weight:700; font-size:1.05rem; color:var(--charcoal-900); border-top:1px solid var(--gray-100); padding-top:14px; margin-top:6px;}

/* ---------------- Empty / error states ---------------- */
.state-block{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:64px 24px; gap:14px; color:var(--charcoal-700);justify-content:center;
}
.state-icon{width:64px; height:64px; border-radius:50%; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center;}
.state-icon.error{background:var(--red-100); color:var(--red-600);}
.state-block h3{margin-bottom:0;}
.state-block p{max-width:36ch;}

/* ---------------- Skeleton loaders ---------------- */
.skeleton{background:linear-gradient(90deg, var(--gray-100) 25%, #E4E7E3 37%, var(--gray-100) 63%); background-size:400% 100%; animation:skeleton-wave 1.4s ease infinite; border-radius:var(--radius-sm);}
@keyframes skeleton-wave{0%{background-position:100% 0;}100%{background-position:0 0;}}
.skeleton-card{height:280px; border-radius:var(--radius-md);}
.skeleton-line{height:12px; margin-bottom:8px;}

/* ---------------- Toast ---------------- */
.toast-stack{position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px;}
.toast{
  background:var(--charcoal-900); color:var(--white); padding:14px 18px; border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-md);
  min-width:260px; animation:toast-in .2s ease;
}
.toast.success{background:var(--green-800);}
.toast.error{background:var(--red-600);}
.toast a, .toast button.toast-action{color:var(--green-100); font-weight:600; font-size:.85rem; background:none; border:none; cursor:pointer;}
@keyframes toast-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------------- Modal ---------------- */
.modal-overlay{position:fixed; inset:0; background:rgba(15,46,31,.45); display:none; align-items:center; justify-content:center; z-index:150; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--white); border-radius:var(--radius-lg); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; padding:28px;}
.modal-wide{max-width:760px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.modal-close{background:none; border:none; cursor:pointer; color:var(--gray-600); padding:4px;}

/* ---------------- Badges (order/payment status) ---------------- */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px; text-transform:capitalize;}
.badge-paid, .badge-delivered{background:var(--green-100); color:var(--green-800);}
.badge-pending{background:var(--amber-100); color:var(--amber-600);}
.badge-failed, .badge-cancelled{background:var(--red-100); color:var(--red-600);}
.badge-processing, .badge-shipped{background:#DCEAFB; color:#1D4E89;}

/* ---------------- Tabs ---------------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--gray-100); margin-bottom:24px; overflow-x:auto;}
.tab-btn{padding:12px 18px; background:none; border:none; cursor:pointer; font-weight:600; color:var(--gray-600); border-bottom:2px solid transparent; white-space:nowrap;}
.tab-btn.active{color:var(--green-800); border-color:var(--green-700);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------------- Timeline ---------------- */
.timeline{display:flex; align-items:center; justify-content:space-between; margin:24px 0;}
.timeline-step{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; position:relative; font-size:.82rem; color:var(--gray-600);}
.timeline-step::before{content:""; position:absolute; top:14px; left:-50%; width:100%; height:2px; background:var(--gray-300); z-index:0;}
.timeline-step:first-child::before{display:none;}
.timeline-dot{width:28px; height:28px; border-radius:50%; background:var(--gray-100); border:2px solid var(--gray-300); z-index:1; display:flex; align-items:center; justify-content:center; color:var(--gray-600); font-size:.75rem; font-weight:700;}
.timeline-step.done .timeline-dot{background:var(--green-700); border-color:var(--green-700); color:var(--white);}
.timeline-step.done::before{background:var(--green-700);}
.timeline-step.current .timeline-dot{border-color:var(--green-700); color:var(--green-700);}
.timeline-step.current{color:var(--green-800); font-weight:600;}

/* ---------------- Utility ---------------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.flex-between{display:flex; justify-content:space-between; align-items:center;}
.text-muted{color:var(--gray-600);}
.divider{height:1px; background:var(--gray-100); margin:20px 0;}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .products-layout{
      grid-template-columns:1fr;
  }
  .filter-panel{position:static;}
  .cart-layout{grid-template-columns:1fr;}
  .hero .container{grid-template-columns:1fr;}
  .hero-visual{max-width:420px;}
}
@media (max-width:760px){
  .nav-links, .nav-search{display:none;}
  .hamburger{display:flex;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:1fr 1fr;}
  .cta-band{flex-direction:column; align-items:flex-start;}
  .cart-item{grid-template-columns:60px 1fr; grid-template-areas:"media name" "media qty" "media actions"; row-gap:8px;}
  .cart-item-media{grid-area:media;}
  .form-row{grid-template-columns:1fr;}
  .section{padding:48px 0;}
  .topbar{display:none;}
}
@media (max-width:480px){
  .product-grid{grid-template-columns:1, 1fr;}
  .grid-4{grid-template-columns:1fr;}
}

.checkoutError, .contactError{
  background-color: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  padding: 12px 16px;
  border-radius: 7px;
  margin-bottom: 20px;
}.checkoutError p, .contactError p, .contactSuccess p{
    margin: 0;
}.Checkoutcontainer{
  background-color: #fff1f2;
  color: #be123c;
  padding:15px 20px;
  line-height:10px;
}
.checkoutConErrorBtn{
    padding:10px 15px;
    color:#FBE7E5;
    background-color:#0F2E1F;
    border:none;
    border-radius:5px;
}
.contactSuccess{
  background-color: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  padding: 12px 16px;
  border-radius: 7px;
  margin-bottom: 20px;
}



/* Related Products Styling */
.section-alt .product-grid {
    gap: 24px;
}

.section-alt .product-card {
    padding: 16px;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
}

.section-alt .product-card > a {
    display: block;
}

.section-alt .product-card .product-media {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}

.section-alt .product-card .product-media img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.section-alt .product-card .product-info {
    padding: 4px 2px 6px;
}

.section-alt .product-card .product-category {
    display: inline-block;
    margin-bottom: 8px;
}

.section-alt .product-card .product-info h3 {
    margin: 0 0 8px;
    line-height: 1.4;
}

.section-alt .product-card .product-meta {
    margin: 0 0 10px;
}

.section-alt .product-card .price {
    margin: 0 0 16px;
}

.section-alt .product-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
} 



/* ==========================================
   AGRICULTURAL GUIDES - RESPONSIVE FIX
   Add this at the bottom of style.css
   ========================================== */

/* Prevent content from overflowing */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
}

/* Guide page hero */
.hero > .container {
    width: 100%;
    min-width: 0;
}

.hero > .container > div {
    min-width: 0;
}

.hero h1,
.hero p {
    overflow-wrap: anywhere;
}

.hero-visual {
    width: 100%;
    min-width: 0;
}

.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Guide cards */
.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-4 > * {
    min-width: 0;
}

/* Tablet */
@media (max-width: 1024px) {
    .hero > .container {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .hero-visual {
        max-width: 600px;
    }

    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section {
        padding: 52px 0;
    }
}

/* Mobile */
@media (max-width: 760px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .navbar {
        height: auto;
        min-height: var(--nav-height);
    }

    .navbar .container {
        min-height: var(--nav-height);
        height: auto;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Keep the brand and hamburger on one row */
    .brand {
        min-width: 0;
        font-size: 1rem;
    }

    .hamburger {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }

    /* The desktop navigation stays hidden on mobile.
       The mobile drawer must be opened by your JavaScript. */
    .nav-links,
    .nav-search {
        display: none;
    }

    .nav-actions {
        gap: 10px;
        min-width: 0;
    }

    .hero > .container {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 42px;
        padding-bottom: 42px;
        gap: 24px;
    }

    .hero h1 {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
        line-height: 1.2;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-visual {
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }

    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .category-card {
        padding: 16px;
    }

    .section-head {
        align-items: flex-start;
        margin-bottom: 24px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .section {
        padding: 40px 0;
    }

    .section-head h1,
    .section-head h2 {
        font-size: 1.6rem;
    }

    .category-card {
        padding: 18px;
    }
}


/* Checkout layout */
.checkout-layout {
display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:flex-start;
}

/* Tablet and mobile */
@media (max-width: 760px) {
    .checkout-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .checkout-layout > .panel {
        width: 100%;
        min-width: 0;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .checkout-layout {
        gap: 18px;
    }

    .checkout-layout > .panel {
        padding: 18px;
    }
}

/* Center the empty cart message */
#cartEmpty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 350px;
    padding: 40px 20px;
    gap: 14px;
}

#cartEmpty .state-icon {
    margin: 0 auto 10px;
}

#cartEmpty h3,
#cartEmpty p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#cartEmpty p {
    max-width: 36ch;
    margin-bottom: 8px;
}

#cartEmpty .btn {
    margin: 0 auto;
}

/* Keep the empty state centered on mobile */
@media (max-width: 760px) {
    #cartEmpty {
        min-height: 300px;
        padding: 32px 16px;
    }
}



#detailsWrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;align-items:flex-start;
}

/* =========================================
   AGROGUARD SUPPLY
   MOBILE RESPONSIVENESS ONLY
   Desktop styles remain unchanged.
   ========================================= */

@media (max-width: 760px) {

    /* Product details layout */
    #detailsWrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    #detailsWrap > div {
        min-width: 0;
        width: 100%;
    }

    /* Main product image */
    #mainImage {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    #mainImage img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Product information */
    #pName {
        font-size: 1.7rem;
        overflow-wrap: break-word;
    }

    #pPrice {
        font-size: 1.4rem !important;
    }

    #pBrandSize,
    #tabDescription,
    #tabUse,
    #tabApplication,
    #tabSafety,
    #tabStorage {
        overflow-wrap: break-word;
    }

    /* Quantity selector */
    #detailsWrap .qty-control {
        max-width: 180px;
    }

    #qtyInput {
        min-width: 0;
    }

    /* Add to Cart and Buy Now */
    #detailsWrap .hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #detailsWrap .hero-actions .btn {
        width: 100%;
        min-width: 0;
        padding: 12px 8px;
        font-size: 0.85rem;
    }

    /* Product information tabs */
    #detailsWrap .tabs {
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #detailsWrap .tab-btn {
        flex-shrink: 0;
        padding: 11px 12px;
        font-size: 0.82rem;
    }

    #detailsWrap .tab-panel {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Related products */
    .section-alt .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .section-alt .product-card {
        min-width: 0;
        padding: 10px;
    }

    .section-alt .product-card .product-media {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .section-alt .product-card .product-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .section-alt .product-card .product-info h3 {
        font-size: 0.95rem;
        overflow-wrap: break-word;
    }

    .section-alt .product-card .price {
        font-size: 1rem;
    }

    .section-alt .product-card .btn {
        max-width: 100%;
        padding: 9px 10px;
        font-size: 0.8rem;
    }

    /* Checkout layout, if displayed on mobile */
    .checkout-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Small phones */
@media (max-width: 480px) {

    /* Keep the header compact */
    .navbar .container {
        flex-wrap: nowrap;
    }

    .brand {
        font-size: 0.9rem;
        gap: 7px;
    }

    .brand-mark {
        width: 32px;
        height: 32px;
    }

    .nav-actions {
        gap: 10px;
    }

    /* Product details */
    #detailsWrap {
        gap: 22px;
    }

    #pName {
        font-size: 1.5rem;
    }

    #detailsWrap .hero-actions {
        grid-template-columns: 1fr;
    }

    #detailsWrap .hero-actions .btn {
        width: 100%;
        font-size: 0.95rem;
    }

    /* Related product cards */
    .section-alt .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .section-alt .product-card {
        padding: 8px;
    }

    .section-alt .product-card .product-info h3 {
        font-size: 0.88rem;
    }

    .section-alt .product-card .product-meta {
        font-size: 0.78rem;
    }

    .section-alt .product-card .price {
        font-size: 0.9rem;
        overflow-wrap: anywhere;
    }

    .section-alt .product-card .btn {
        width: 100%;
        padding: 9px 5px;
        font-size: 0.76rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Checkout panels */
    .checkout-layout > .panel {
        padding: 16px;
    }
}
.tracking-wrap{max-width:760px;margin:auto}
.tracking-panel{background:#fff;padding:24px;border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,.06);margin-top:20px}
.tracking-form{display:grid;gap:14px}
.tracking-form label{display:block;font-weight:600;margin-bottom:6px}
.tracking-form input{width:100%;padding:13px;border:1px solid #d6ded8;
    border-radius:8px;font:inherit}
.tracking-error{background:#fff0ef;color:#9e2620;padding:14px;border-radius:8px}
.tracking-steps{display:grid;gap:12px;margin:22px 0}
.tracking-step{display:flex;gap:12px;align-items:flex-start;padding:12px;
    border:1px solid #e2e8e3;border-radius:10px}
.tracking-dot{width:13px;height:13px;border-radius:50%;
    background:#cbd5ce;margin-top:5px;flex-shrink:0}
.tracking-step.done .tracking-dot{background:#237849}
.tracking-step.current{border-color:#237849;background:#f2f8f3}
.tracking-meta{display:grid;gap:12px}
.tracking-meta p{margin:0;overflow-wrap:anywhere}
.tracking-items{padding-left:20px}
@media(max-width:600px){
 .tracking-panel{padding:17px}
 .tracking-meta{gap:16px}
}


/* ---- Order Success print ----- */

/* Print receipt button */
.print-receipt-btn {
    background: #0F2E1F;
    color: #ffffff;
    border: none;
    cursor: pointer;
}

.print-receipt-btn:hover {
    background: #1b4a32;
}

/* Make the receipt look clean on paper */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .topbar,
    .navbar,
    .mobile-drawer,
    .site-footer,
    .hero-actions,
    .state-icon {
        display: none !important;
    }

    .section {
        padding: 0 !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #orderDetails {
        margin: 20px 0 !important;
        padding: 20px !important;
        box-shadow: none !important;
        border: 1px solid #dddddd !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    #orderDetails * {
        color: #000000 !important;
    }

    .summary-row {
        break-inside: avoid;
    }

    a {
        text-decoration: none !important;
    }
}