/* ==========================================================================
   JJK CRACKERS — storefront stylesheet
   Single source of truth (replaces style1.css / style3.css).
   Mobile-first, inspired by Amazon / Flipkart shopping-app patterns:
   compact sticky header, prominent search, chip filters, dense product
   grid, sticky bottom action bars, big tap targets.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#c1121f;
  --primary-dark:#970d17;
  --accent:#ff9f00;      /* Flipkart-style orange accent for prices/CTAs */
  --accent-dark:#e08600;
  --yellow:#ffc300;
  --success:#188a3e;
  --success-bg:#e7f8ec;
  --white:#ffffff;
  --dark:#212121;
  --text:#333333;
  --gray:#6b6b6b;
  --gray-light:#8c8c8c;
  --bg:#f2f2f5;
  --border:#e6e6e6;
  --radius-sm:6px;
  --radius:12px;
  --radius-lg:18px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --shadow-lg:0 8px 28px rgba(0,0,0,.12);
  --header-h:56px;
  --bottomnav-h:58px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);

  /* legacy aliases kept for admin.css, which references the old variable names */
  --red:var(--primary);
  --red-dark:var(--primary-dark);
  --orange:var(--accent);
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins', sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  font-size:15px;
  /* room for the fixed mobile bottom nav */
  padding-bottom:calc(var(--bottomnav-h) + var(--safe-bottom));
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font-family:inherit; }
input, textarea, select{ font-family:inherit; font-size:16px; } /* 16px avoids iOS auto-zoom */

.container{ max-width:1240px; margin:0 auto; padding:0 16px; }

/* ---------- generic buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 22px; border-radius:8px; font-weight:700; font-size:14.5px;
  cursor:pointer; border:none; transition:transform .12s ease, opacity .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); color:var(--white); box-shadow:0 3px 10px rgba(255,159,0,.35); }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-secondary{ background:var(--white); color:var(--dark); border:1px solid #d5d5d5; }
.btn-order{ background:var(--primary); color:var(--white); width:100%; }
.btn-order:hover{ background:var(--primary-dark); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- Flash / notices ---------- */
.flash{ padding:12px 16px; margin:10px auto; border-radius:var(--radius-sm); font-weight:600; max-width:1240px; }
.flash-error, .notice-error{ background:#ffe1e1; color:#b3001b; border:1px solid #f5b5bd; padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:14px; }
.flash-success{ background:var(--success-bg); color:var(--success); }
.notice-warning{ background:#fff4d6; color:#8a6100; padding:12px 14px; border-radius:var(--radius-sm); margin:14px 0; font-weight:600; }

/* ==========================================================================
   HEADER — compact app-bar style, sticky, search-forward
   ========================================================================== */
.topbar{ background:var(--dark); color:#f1f1f1; font-size:12.5px; }
.topbar-inner{ display:flex; justify-content:space-between; padding:5px 16px; gap:6px; flex-wrap:wrap; max-width:1240px; margin:0 auto; }

.site-header{ position:sticky; top:0; z-index:200; background:var(--primary); box-shadow:var(--shadow); }
.navbar{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  flex-wrap:wrap;
}
.brand{ font-size:19px; font-weight:800; color:var(--white); flex-shrink:0; }
.brand span{ color:var(--yellow); }

.nav-toggle{ display:none; background:none; border:none; font-size:22px; color:var(--white); cursor:pointer; order:1; }

/* search: full-width row of its own on mobile, inline on desktop */
.nav-search{
  display:flex; align-items:stretch;
  background:var(--white); border-radius:8px; overflow:hidden;
  order:3; flex-basis:100%; margin-top:2px;
}
.nav-search input{
  flex:1; border:none; outline:none; padding:10px 12px; font-size:14.5px; min-width:0;
}
.nav-search button{
  border:none; background:var(--accent); color:var(--white); padding:0 16px; cursor:pointer; font-size:15px;
}

.nav-links{
  display:flex; align-items:center; gap:18px; order:4; flex-basis:100%;
  background:var(--primary-dark); margin:0 -12px; padding:8px 12px 4px;
}
.nav-links a{ font-weight:600; color:var(--white); font-size:13.5px; opacity:.95; }
.nav-links a:hover{ opacity:1; text-decoration:underline; }

.cart-link{
  position:relative; margin-left:auto; order:2;
  display:flex; align-items:center; gap:6px;
  color:var(--white); font-weight:700; font-size:13px;
}
.cart-badge{
  background:var(--yellow); color:var(--dark); border-radius:50%;
  min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; padding:0 4px;
}
.cart-badge.bump{ animation:bump .3s ease; }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* ==========================================================================
   MOBILE BOTTOM NAV — Amazon/Flipkart style fixed tab bar (mobile only)
   ========================================================================== */
.bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:250;
  background:var(--white); border-top:1px solid var(--border);
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
  padding-bottom:var(--safe-bottom);
}
.bottom-nav-inner{ display:flex; }
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:8px 4px; font-size:11px; font-weight:600; color:var(--gray);
  height:var(--bottomnav-h); position:relative;
}
.bottom-nav a i, .bottom-nav a .bn-icon{ font-size:19px; }
.bottom-nav a.active{ color:var(--primary); }
.bottom-nav a .bn-cart-badge{
  position:absolute; top:4px; right:calc(50% - 18px);
  background:var(--accent); color:#fff; font-size:10px; font-weight:800;
  min-width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-video{ position:relative; overflow:hidden; color:var(--white); }
.hero-bg-video, .hero-img{ width:100%; height:56vh; min-height:300px; max-height:520px; object-fit:cover; display:block; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)); }
.hero-content{ position:absolute; inset:0; display:flex; align-items:center; padding:24px 16px; }
.hero-text{ max-width:640px; }
.hero-badge{
  display:inline-block; background:rgba(255,159,0,.95); color:#fff; font-weight:700;
  font-size:12.5px; padding:6px 12px; border-radius:20px; margin-bottom:12px;
}
.hero-text h1{ font-size:clamp(1.6rem, 5vw, 2.8rem); line-height:1.15; font-weight:800; margin-bottom:10px; }
.hero-text h1 span{ color:var(--yellow); }
.hero-text p{ font-size:clamp(.9rem, 2.2vw, 1.05rem); margin-bottom:18px; opacity:.95; max-width:520px; }
.hero-btns{ margin-bottom:18px; }
.hero-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff;
  padding:12px 24px; border-radius:8px; font-weight:700; font-size:15px;
}
.hero-btn:hover{ background:var(--accent-dark); }
.hero-info{ display:flex; flex-wrap:wrap; gap:10px; }
.info-card{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.15);
  backdrop-filter:blur(4px); padding:8px 14px; border-radius:24px; font-size:12.5px; font-weight:600;
}
.info-card i{ color:var(--yellow); }

/* legacy bootstrap-carousel hero kept working without bootstrap.css */
.carousel{ position:relative; }
.carousel-inner{ position:relative; }
.carousel-item{ display:none; position:relative; }
.carousel-item.active{ display:block; }
.carousel-caption{
  position:absolute; left:0; right:0; bottom:0; padding:24px 16px 40px; text-align:center; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.7));
}
.carousel-caption h1{ font-size:clamp(1.6rem, 5vw, 2.6rem); font-weight:800; margin-bottom:8px; }
.carousel-caption .btn{ margin-top:6px; }

/* ---------- feature strip ---------- */
.feature-strip{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
  padding:18px 16px; max-width:1240px; margin:0 auto;
}
.feature-box{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 10px; text-align:center;
}
.feature-box i{ font-size:22px; color:var(--primary); margin-bottom:8px; display:block; }
.feature-box h5{ font-size:12.5px; font-weight:700; line-height:1.3; }

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.section-heading{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:18px 16px 10px; max-width:1240px; margin:0 auto;
}
.section-heading h2{ font-size:1.15rem; font-weight:800; }
.section-heading a{ font-size:13px; font-weight:700; color:var(--primary); }
.seo-local-section{ padding:28px 16px 10px; }
.seo-local-section h2{ margin:0 0 10px; font-size:1.25rem; color:var(--dark); }
.seo-local-section p{ max-width:900px; margin:0 0 9px; color:var(--gray); font-size:.92rem; line-height:1.7; }

/* ==========================================================================
   CATEGORY CHIPS (horizontal scroll on mobile) + category tiles
   ========================================================================== */
.category-scroller{
  display:flex; gap:12px; overflow-x:auto; padding:6px 16px 16px; scrollbar-width:none;
  max-width:1240px; margin:0 auto;
}
.category-scroller::-webkit-scrollbar{ display:none; }
.category-chip{
  flex:0 0 auto; width:84px; text-align:center; font-size:12px; font-weight:600; color:var(--text);
}
.category-chip .chip-img{
  width:72px; height:72px; border-radius:50%; overflow:hidden; margin:0 auto 6px;
  border:1px solid var(--border); background:var(--white); display:flex; align-items:center; justify-content:center;
}
.category-chip .chip-img img{ width:100%; height:100%; object-fit:cover; }
.category-chip.active{ color:var(--primary); }
.category-chip.active .chip-img{ border-color:var(--primary); border-width:2px; }

.category-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:0 16px 20px; max-width:1240px; margin:0 auto;
}
.category-card{
  position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/3; background:#ddd;
}
.category-card img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.category-card:hover img{ transform:scale(1.05); }
.category-card .overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:14px; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.72));
}
.category-card .overlay h3{ color:#fff; font-size:15px; font-weight:800; margin-bottom:8px; }
.category-card .overlay .btn{ padding:7px 14px; font-size:12px; }
.category-card.big-card{ aspect-ratio:12/9; }
.category-card.full-card{ aspect-ratio:21/9; }

/* ==========================================================================
   SHOP LAYOUT — sidebar (desktop) + mobile filter drawer
   ========================================================================== */
.shop-layout{ display:flex; align-items:flex-start; gap:20px; margin:16px auto; max-width:1240px; padding:0 16px; }

.sidebar-toggle-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 16px; font-weight:700; font-size:14px; cursor:pointer; box-shadow:var(--shadow);
  margin-bottom:10px;
}

.category-sidebar{
  width:230px; flex-shrink:0; background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; position:sticky; top:calc(var(--header-h) + 12px);
  max-height:calc(100vh - 90px); overflow-y:auto;
}
.sidebar-title{ font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; color:var(--gray); }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; }
.sidebar-link{
  padding:10px 10px; border-radius:8px; font-size:14px; font-weight:600; color:var(--text);
  border-left:3px solid transparent;
}
.sidebar-link:hover{ background:var(--bg); }
.sidebar-link.active{ background:#fdeceb; color:var(--primary); border-left-color:var(--primary); font-weight:700; }

.shop-main{ flex:1; min-width:0; }

/* ==========================================================================
   PRODUCT GRID + CARDS — dense, Amazon/Flipkart style
   ========================================================================== */
.category-section{ margin-bottom:22px; }
.category-title{ font-size:1.05rem; font-weight:800; margin:6px 0 12px; padding-left:10px; border-left:4px solid var(--primary); }

.product-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
}
.product-card{
  background:var(--white); border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative;
  transition:box-shadow .15s ease, transform .15s ease;
  border:1px solid var(--border);
}
.product-card:hover{ box-shadow:var(--shadow-lg); }

.product-img-wrap{ position:relative; aspect-ratio:1/1; background:#f7f7f9; }
.product-img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.badge-discount{
  position:absolute; top:8px; left:8px; background:var(--success); color:#fff;
  font-size:10.5px; font-weight:800; padding:3px 7px; border-radius:4px;
}
.badge-outofstock{
  position:absolute; inset:0; background:rgba(255,255,255,.75); color:var(--dark);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em;
}

.product-body{ padding:10px 10px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-name{
  font-size:13.5px; font-weight:600; color:var(--text); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;
}
.price-row{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.price-discount{ font-size:16px; font-weight:800; color:var(--dark); }
.price-original{ font-size:12.5px; color:var(--gray-light); text-decoration:line-through; }

.stock-info{ font-size:11px; font-weight:700; }
.stock-ok{ color:var(--success); }
.stock-low{ color:#b3720a; }
.stock-out{ color:var(--primary); }

.qty-selector{
  display:flex; align-items:stretch; border:1px solid var(--border); border-radius:6px; overflow:hidden;
  width:100%; height:34px;
}
.qty-btn{
  width:34px; border:none; background:var(--bg); font-size:16px; font-weight:700; cursor:pointer; color:var(--text);
}
.qty-btn:disabled{ opacity:.4; cursor:not-allowed; }
.qty-input{
  flex:1; border:none; text-align:center; font-weight:700; font-size:13.5px; -moz-appearance:textfield; min-width:0;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.add-to-cart-btn{ padding:9px 10px; font-size:12.5px; border-radius:6px; margin-top:2px; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--gray); font-weight:600; }

/* ==========================================================================
   CART PAGE — responsive table (desktop table -> stacked cards on mobile)
   ========================================================================== */
.checkout-page{ padding-top:14px; padding-bottom:30px; }
.checkout-page h1{ font-size:1.3rem; font-weight:800; margin:8px 0 16px; }

.steps-indicator{
  display:flex; gap:4px; margin-bottom:16px; overflow-x:auto; scrollbar-width:none;
}
.steps-indicator::-webkit-scrollbar{ display:none; }
.step{
  flex:1; min-width:88px; text-align:center; padding:9px 6px; font-size:11.5px; font-weight:700;
  background:var(--white); color:var(--gray-light); border-bottom:3px solid var(--border); white-space:nowrap;
}
.step.active{ color:var(--primary); border-bottom-color:var(--primary); }
.step.done{ color:var(--success); border-bottom-color:var(--success); }

.cart-table-wrap{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table thead{ display:none; } /* header hidden on mobile card layout */
.cart-table tbody tr{
  display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  padding:14px; border-bottom:1px solid var(--border);
}
.cart-table tbody tr:last-child{ border-bottom:none; }
.cart-prod-name{ grid-column:1/-1; font-weight:700; font-size:14px; }
.cart-price{ font-size:12.5px; color:var(--gray); }
.cart-price::before{ content:"Price: "; color:var(--gray-light); }
.cart-subtotal{ grid-column:1/-1; font-weight:800; color:var(--primary); font-size:14px; text-align:right; }
.cart-subtotal::before{ content:"Subtotal: "; font-weight:600; color:var(--gray-light); font-size:12px; }
.cart-table td:has(.qty-selector){ grid-column:1/-1; }
.cart-table td:has(.qty-selector) .qty-selector{ max-width:140px; }
.btn-remove{
  grid-column:1/-1; justify-self:end; background:none; border:1px solid var(--border); color:var(--primary);
  font-weight:700; font-size:12px; padding:6px 12px; border-radius:6px; cursor:pointer; width:fit-content;
}

.cart-summary{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
  margin-top:14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:14px;
}
.cart-summary strong{ font-size:15px; }

.checkout-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.checkout-actions .btn{ flex:1; min-width:140px; }

/* sticky mobile order-summary bar (Flipkart style) */
.sticky-cart-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:240;
  background:var(--white); box-shadow:0 -3px 14px rgba(0,0,0,.12);
  padding:10px 14px calc(10px + var(--safe-bottom));
  align-items:center; justify-content:space-between; gap:12px;
}
.sticky-cart-bar .scb-total{ font-size:15px; font-weight:800; }
.sticky-cart-bar .scb-total small{ display:block; font-size:10.5px; font-weight:600; color:var(--gray); }
.sticky-cart-bar .btn{ flex-shrink:0; padding:11px 22px; }

/* ==========================================================================
   FORMS (checkout personal info / terms)
   ========================================================================== */
.terms-box{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:16px; }
.terms-box ol{ padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:var(--text); }
.checkbox-label{ display:flex; align-items:flex-start; gap:8px; font-size:14px; font-weight:600; padding:4px 2px; }
.checkbox-label input{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }

.info-form{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--gray); }
.form-grid label.full-width{ grid-column:1/-1; }
.form-grid input, .form-grid textarea{
  padding:11px 12px; border:1px solid #d9d9d9; border-radius:8px; font-size:14.5px; color:var(--dark); outline:none;
  transition:border-color .15s ease;
}
.form-grid input:focus, .form-grid textarea:focus{ border-color:var(--primary); }
.form-grid textarea{ min-height:80px; resize:vertical; }

/* ---------- QR payment ---------- */
.qr-payment-wrap{ display:flex; justify-content:center; }
.qr-payment-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
  width:100%; max-width:420px; text-align:center;
}
.qr-amount-display{ font-size:2rem; font-weight:800; color:var(--primary); margin:6px 0 14px; }
.qr-canvas-wrap{ display:flex; justify-content:center; margin:14px 0; padding:14px; background:#fafafa; border-radius:var(--radius); }
.qr-merchant-info{ font-size:13px; color:var(--gray); margin-bottom:10px; }
.qr-apps-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--gray); margin-bottom:14px; }
.payment-status-box{ margin:14px 0; }
.spinner{ width:34px; height:34px; border:4px solid var(--border); border-top-color:var(--accent); border-radius:50%; margin:0 auto 10px; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.status-waiting-text{ font-weight:700; }
.status-success-box{ padding:10px 0; }
.status-success-icon{
  width:52px; height:52px; border-radius:50%; background:var(--success); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin:0 auto 10px;
}
.status-success-text{ font-weight:800; color:var(--success); font-size:15px; }
.confirm-payment-form{ margin-top:14px; text-align:left; display:flex; flex-direction:column; gap:8px; }
.confirm-payment-form label{ font-size:12.5px; font-weight:700; color:var(--gray); }
.confirm-payment-form input{ padding:10px; border:1px solid #d9d9d9; border-radius:8px; }

/* ==========================================================================
   INVOICE
   ========================================================================== */
.invoice-page{ padding:18px 16px 40px; }
.invoice-actions{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.invoice-actions .btn{ flex:1; min-width:160px; }
.invoice-box{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.invoice-header{ display:flex; flex-direction:column; gap:10px; border-bottom:2px dashed var(--border); padding-bottom:14px; margin-bottom:14px; }
.invoice-header h2{ font-size:1.2rem; }
.invoice-meta{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--gray); }
.invoice-parties{ margin-bottom:16px; }
.invoice-parties h4{ font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--gray); margin-bottom:6px; }
.invoice-parties p{ font-size:13.5px; line-height:1.7; }
.invoice-table{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:16px; }
.invoice-table th, .invoice-table td{ padding:9px 8px; border-bottom:1px solid var(--border); text-align:left; }
.invoice-table th:last-child, .invoice-table td:last-child,
.invoice-table th:nth-child(3), .invoice-table td:nth-child(3),
.invoice-table th:nth-child(4), .invoice-table td:nth-child(4){ text-align:right; }
.invoice-table tfoot td{ border-bottom:none; font-weight:600; }
.invoice-table .grand-total-row td{ font-size:15px; font-weight:800; color:var(--primary); padding-top:10px; }
.invoice-payment{ background:var(--bg); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px; }
.invoice-payment h4{ font-size:13px; margin-bottom:8px; }
.invoice-payment p{ font-size:13px; margin-bottom:4px; }
.payment-screenshot{ max-width:220px; border-radius:8px; margin-top:8px; border:1px solid var(--border); }
.invoice-note{ text-align:center; font-size:12.5px; color:var(--gray); margin-top:10px; }

@media print{
  .site-header, .topbar, .bottom-nav, .sticky-cart-bar, .no-print,
  .floating-cart-btn, .floating-call-btn, .floating-whatsapp-btn, .site-footer{ display:none !important; }
  body{ padding-bottom:0; background:#fff; }
  .invoice-box{ box-shadow:none; border:1px solid #ddd; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--dark); color:#cfcfcf; margin-top:30px; }
.footer-grid{
  display:grid; grid-template-columns:1fr; gap:22px; padding:32px 16px 20px;
}
.footer-grid h3{ color:#fff; font-size:17px; margin-bottom:10px; }
.footer-grid h4{ color:#fff; font-size:14px; margin-bottom:10px; }
.footer-grid p{ font-size:13px; line-height:1.6; color:#b6b6b6; }
.footer-grid a{ display:block; font-size:13px; padding:4px 0; color:#cfcfcf; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ text-align:center; font-size:12px; padding:14px; border-top:1px solid #3a3a3a; color:#9a9a9a; }

/* ==========================================================================
   FLOATING ACTION BUTTONS (call / whatsapp / cart) — desktop only,
   mobile relies on the bottom nav instead to avoid clutter.
   ========================================================================== */
.floating-cart-btn{
  display:none;
  position:fixed; right:20px; bottom:20px; z-index:230;
  width:54px; height:54px; border-radius:50%; background:var(--primary); color:#fff;
  align-items:center; justify-content:center; font-size:22px; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.floating-cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--yellow); color:var(--dark);
  font-size:11px; font-weight:800; min-width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.floating-call-btn, .floating-whatsapp-btn{
  position:fixed; right:20px; z-index:230; width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:21px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.floating-call-btn{ bottom:150px; background:#2563eb; }
.floating-whatsapp-btn{ bottom:86px; background:#25d366; }

/* ==========================================================================
   RESPONSIVE — tablet & up
   ========================================================================== */
@media (min-width:640px){
  .product-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; }
  .category-grid{ grid-template-columns:repeat(3, 1fr); }
  .feature-strip{ grid-template-columns:repeat(4, 1fr); gap:16px; }
  .form-grid{ grid-template-columns:1fr 1fr; }
  .cart-table thead{ display:table-header-group; }
  .cart-table tbody tr{ display:table-row; padding:0; }
  .cart-table th, .cart-table td{ padding:12px 14px; text-align:left; vertical-align:middle; }
  .cart-prod-name, .cart-subtotal{ grid-column:auto; text-align:left; }
  .cart-subtotal::before, .cart-price::before{ content:none; }
  .cart-table td:has(.qty-selector){ grid-column:auto; }
  .btn-remove{ justify-self:auto; }
}

@media (min-width:900px){
  body{ padding-bottom:0; }
  .bottom-nav{ display:none !important; }
  .floating-cart-btn, .floating-call-btn, .floating-whatsapp-btn{ display:flex; }
  .sticky-cart-bar{ display:none !important; }

  .navbar{ padding:14px 16px; flex-wrap:nowrap; }
  .nav-toggle{ display:none; }
  .nav-search{ order:2; flex-basis:auto; width:320px; margin-top:0; }
  .nav-links{
    order:3; flex-basis:auto; background:none; margin:0; padding:0; width:auto;
    gap:22px; margin-left:8px;
  }
  .nav-links a{ color:var(--white); font-size:14px; }
  .cart-link{ order:4; margin-left:0; font-size:14px; }

  .hero-content{ padding:0 60px; }
  .product-grid{ grid-template-columns:repeat(4, 1fr); }
  .category-grid{ grid-template-columns:repeat(3, 1fr); }
  .category-card.big-card{ grid-column:span 1; }
  .category-card.full-card{ grid-column:1/-1; }
}

@media (max-width:899px){
  /* mobile hamburger only toggles the secondary link row, search stays visible */
  .nav-links{ display:none; }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:block; }
  .bottom-nav{ display:block; }

  /* on the cart page the sticky bar replaces the inline checkout actions,
     and both sit above the bottom tab bar */
  .sticky-cart-bar{ display:flex; bottom:var(--bottomnav-h); }
  .cart-page .checkout-actions{ display:none; }
  body:has(.sticky-cart-bar){ padding-bottom:calc(var(--bottomnav-h) + 66px + var(--safe-bottom)); }
}

@media (min-width:1100px){
  .product-grid{ grid-template-columns:repeat(5, 1fr); }
}

/* mobile: category sidebar becomes a collapsible drawer */
@media (max-width:899px){
  .shop-layout{ flex-direction:column; }
  .sidebar-toggle-btn{ display:flex; }
  .category-sidebar{
    display:none; width:100%; position:static; max-height:none; padding:10px;
  }
  .category-sidebar.open{ display:block; }
  .sidebar-nav{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .sidebar-link{ border-left:none; border:1px solid var(--border); border-radius:20px; padding:8px 14px; font-size:13px; }
  .sidebar-link.active{ border-color:var(--primary); }
}
@media (min-width:900px){
  .sidebar-toggle-btn{ display:none; }
}