/* ═══════════════════════════════════════════════════════
   Pepper Soup — Design System
   WooCommerce-grade e-commerce CSS
   ═══════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────── */
:root {
  --green-900:#0e2a1b; --green-800:#173c2c; --green-700:#1b5133;
  --green-600:#24693f; --green-500:#2e8b57; --green-400:#4caf6e;
  --green-100:#e7efe4; --green-50:#f2f7ef;
  --gold-500:#d4a017; --gold-400:#f0c040; --gold-300:#f9d184; --gold-100:#fff7e0; --gold-50:#fffaf3;
  --red-600:#c62828; --red-100:#fde8e8;
  --blue-600:#1565c0; --blue-100:#e3f2fd;
  --text:#183b2b; --text-muted:#607066; --text-light:#8a9a8e;
  --bg:#fffaf3; --bg-card:#ffffff; --border:#dce5d9; --border-light:#edf3e9;
  --radius:10px; --radius-sm:6px; --radius-lg:14px;
  --shadow:0 2px 8px rgba(0,0,0,.06); --shadow-lg:0 8px 30px rgba(0,0,0,.1);
  --font:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --max-width:1300px;
  --header-h:120px;
}
*, *::before, *::after { box-sizing:border-box; margin:0 }
html { scroll-behavior:smooth }
body { font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6 }
a { color:var(--green-700); text-decoration:none }
a:hover { text-decoration:underline }
img { max-width:100%; display:block }
button, input, select, textarea { font:inherit }
button { cursor:pointer }

/* ─── Layout ──────────────────────────────────────────── */
.container { max-width:var(--max-width); margin:0 auto; padding:0 20px }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.flex { display:flex; gap:12px; align-items:center }
.flex-between { display:flex; justify-content:space-between; align-items:center }

/* ─── Typography ──────────────────────────────────────── */
h1 { font-size:clamp(28px,4vw,48px); line-height:1.15; font-weight:800 }
h2 { font-size:clamp(22px,3vw,32px); font-weight:700; margin-bottom:16px }
h3 { font-size:18px; font-weight:700 }
.muted { color:var(--text-muted) }
.small { font-size:13px; color:var(--text-muted) }
.section-title { margin-bottom:8px }
.section-subtitle { color:var(--text-muted); margin-bottom:24px; max-width:600px }

/* ─── Buttons ─────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border:0; border-radius:var(--radius); font-weight:700;
  font-size:15px; transition:all .2s }
.btn-primary { background:var(--green-800); color:#fff }
.btn-primary:hover { background:var(--green-700); text-decoration:none }
.btn-secondary { background:var(--gold-300); color:var(--green-900) }
.btn-secondary:hover { background:var(--gold-400); text-decoration:none }
.btn-outline { background:transparent; border:2px solid var(--green-800); color:var(--green-800) }
.btn-outline:hover { background:var(--green-800); color:#fff; text-decoration:none }
.btn-sm { padding:8px 16px; font-size:13px }
.btn-lg { padding:16px 32px; font-size:17px }
.btn-full { width:100% }
.btn-ghost { background:transparent; border:0; color:var(--green-700); text-decoration:underline }

/* ─── Header ──────────────────────────────────────────── */
.header-top { background:var(--green-800); color:#fff; padding:14px 0; position:sticky; top:0; z-index:100 }
.header-inner { max-width:var(--max-width); margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:16px }
.logo { color:#fff; font-weight:800; font-size:22px; white-space:nowrap; text-decoration:none }
.logo:hover { color:var(--gold-300); text-decoration:none }
.header-search { flex:1; position:relative; max-width:480px }
.header-search input { width:100%; padding:10px 16px; border-radius:30px; border:0;
  font-size:14px; background:rgba(255,255,255,.15); color:#fff; outline:none }
.header-search input::placeholder { color:rgba(255,255,255,.6) }
.header-search input:focus { background:rgba(255,255,255,.25) }
.search-dropdown { position:absolute; top:100%; left:0; right:0; background:var(--bg-card);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); display:none; overflow:hidden; z-index:50 }
.search-item { display:flex; align-items:center; gap:10px; padding:10px 16px;
  color:var(--text); font-size:14px; border-bottom:1px solid var(--border-light); text-decoration:none }
.search-item:hover { background:var(--green-50) }
.header-actions { display:flex; align-items:center; gap:14px; white-space:nowrap }
.header-icon { color:#fff; font-size:15px; text-decoration:none; display:flex; align-items:center; gap:4px; position:relative }
.header-icon:hover { color:var(--gold-300) }
.badge { background:var(--gold-400); color:var(--green-900); font-size:11px; font-weight:800;
  padding:1px 6px; border-radius:10px; min-width:18px; text-align:center }
.badge:empty { display:none }
.hamburger { display:none; background:none; border:0; color:#fff; font-size:24px; padding:4px }

.header-nav { background:var(--green-900); padding:0; border-bottom:1px solid rgba(255,255,255,.1) }
.header-nav .header-inner { gap:0 }
.header-nav a { color:rgba(255,255,255,.8); padding:12px 16px; font-size:14px; font-weight:600;
  text-decoration:none; white-space:nowrap; transition:color .2s }
.header-nav a:hover, .header-nav a.active { color:var(--gold-300) }
.cat-link { font-weight:400 !important }

/* ─── Hero ────────────────────────────────────────────── */
.hero { padding:60px 5% 70px; background:linear-gradient(135deg,var(--green-800),var(--green-600));
  color:#fff; position:relative; overflow:hidden }
.hero::after { content:''; position:absolute; right:-80px; bottom:-80px; width:400px; height:400px;
  background:radial-gradient(circle,rgba(249,209,132,.12),transparent 70%); pointer-events:none }
.hero h1 { max-width:720px; margin:12px 0 }
.hero p { max-width:580px; line-height:1.7; opacity:.9 }
.hero .btn { margin-top:20px }

/* ─── Info Bar ────────────────────────────────────────── */
.info-bar { display:flex; gap:14px; flex-wrap:wrap; padding:20px 0 }
.info-bar .pill { background:var(--green-100); padding:12px 18px; border-radius:var(--radius);
  font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px }

/* ─── Product Cards ───────────────────────────────────── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px }
.product-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform .2s, box-shadow .2s; position:relative }
.product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.product-link { display:block; padding:16px; text-decoration:none; color:inherit }
.product-link:hover { text-decoration:none }
.product-img { font-size:52px; text-align:center; background:var(--border-light);
  padding:24px; border-radius:var(--radius); margin-bottom:12px }
.product-img { aspect-ratio:1; display:flex; align-items:center; justify-content:center }
.product-img.has-photo { padding:0; overflow:hidden }
.product-img img { width:100%; height:100%; object-fit:cover }
.product-gallery img, .cart-item-img img, .emoji-sm img { display:block; width:100%; height:auto; border-radius:inherit }
.product-media { width:100%; max-width:560px; justify-self:center; align-self:start }
.product-gallery.has-photo { min-height:0; overflow:hidden }
.gallery-thumbs { display:flex; gap:10px; margin-top:12px }
.gallery-thumb { width:84px; padding:0; border:2px solid var(--border-light); border-radius:var(--radius-sm); overflow:hidden; background:none; cursor:pointer }
.gallery-thumb.active { border-color:var(--green-700) }
.gallery-thumb img { display:block; width:100%; aspect-ratio:1; object-fit:cover }
.product-group { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px }
.product-card h3 { margin:6px 0; min-height:44px; font-size:15px; line-height:1.35 }
.product-price { font-size:18px; font-weight:800; color:var(--green-700) }
.product-rating { font-size:13px; color:var(--gold-500); margin:4px 0 }
.price-tbd { font-size:12px; color:var(--text-muted); display:block; margin-top:2px }
.out-of-stock { background:var(--red-100); color:var(--red-600); font-size:12px; font-weight:600;
  padding:2px 8px; border-radius:4px }
.product-actions { padding:0 16px 16px; display:flex; gap:8px }
.btn-add { flex:1; padding:10px; border:0; border-radius:var(--radius); background:var(--green-800);
  color:#fff; font-weight:700; font-size:13px; transition:background .2s }
.btn-add:hover { background:var(--green-700) }
.btn-wishlist { width:38px; height:38px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); font-size:18px; display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0 }
.btn-wishlist:hover, .btn-wishlist.active { border-color:var(--red-600); color:var(--red-600); background:var(--red-100) }

/* ─── Shop Page ───────────────────────────────────────── */
.shop-layout { display:grid; grid-template-columns:240px 1fr; gap:30px }
.shop-sidebar { position:sticky; top:140px; align-self:start }
.filter-group { margin-bottom:24px }
.filter-group h4 { font-size:14px; margin-bottom:8px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px }
.filter-group label { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:14px; cursor:pointer }
.filter-group input[type=checkbox] { accent-color:var(--green-700) }
.shop-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px }
.shop-toolbar select { padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:14px; background:var(--bg-card) }
.result-count { font-size:14px; color:var(--text-muted) }
.view-toggle button { padding:6px 10px; border:1px solid var(--border); background:var(--bg-card);
  font-size:14px; cursor:pointer }
.view-toggle button.active { background:var(--green-800); color:#fff; border-color:var(--green-800) }
.products-list .product-card { display:grid; grid-template-columns:180px 1fr auto; align-items:center }

/* ─── Single Product ──────────────────────────────────── */
.product-single { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:30px 0 }
.product-gallery { background:var(--border-light); border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; font-size:120px; min-height:400px }
.product-detail h1 { font-size:clamp(24px,3vw,36px); margin-bottom:8px }
.product-detail .price-big { font-size:28px; font-weight:800; color:var(--green-700); margin:12px 0 }
.product-meta { display:flex; gap:16px; margin:16px 0; font-size:14px }
.product-meta span { background:var(--green-50); padding:6px 12px; border-radius:20px }
.qty-selector { display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; width:fit-content }
.qty-selector button { width:40px; height:40px; border:0; background:var(--green-50); font-size:18px; font-weight:700 }
.qty-selector button:hover { background:var(--green-100) }
.qty-selector input { width:60px; text-align:center; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:16px; font-weight:600 }
.product-tabs { margin-top:50px }
.tab-nav { display:flex; gap:0; border-bottom:2px solid var(--border) }
.tab-nav button { padding:12px 24px; border:0; background:transparent; font-weight:600;
  color:var(--text-muted); font-size:15px; border-bottom:2px solid transparent; margin-bottom:-2px }
.tab-nav button.active { color:var(--green-800); border-bottom-color:var(--green-800) }
.tab-content { padding:24px 0; display:none }
.tab-content.active { display:block }

/* ─── Reviews ─────────────────────────────────────────── */
.review { border-bottom:1px solid var(--border-light); padding:16px 0 }
.review-header { display:flex; justify-content:space-between; align-items:center }
.review-stars { color:var(--gold-500); font-size:16px }
.review-meta { font-size:13px; color:var(--text-muted) }
.review-form { max-width:500px }
.review-form .stars-input { display:flex; gap:4px; font-size:28px; cursor:pointer; margin:8px 0 }
.review-form .stars-input span { color:var(--border); transition:color .15s }
.review-form .stars-input span.on { color:var(--gold-500) }

/* ─── Cart Page ───────────────────────────────────────── */
.cart-layout { display:grid; grid-template-columns:1fr 380px; gap:30px; margin:30px 0 }
.cart-table { width:100% }
.cart-item { display:grid; grid-template-columns:60px 1fr 140px 100px 40px; gap:16px;
  align-items:center; padding:16px 0; border-bottom:1px solid var(--border-light) }
.cart-item-img { font-size:36px; text-align:center; background:var(--border-light); padding:8px; border-radius:var(--radius-sm) }
.cart-item-name { font-weight:600 }
.cart-item-price { font-weight:700; text-align:right }
.cart-remove { border:0; background:transparent; color:var(--red-600); font-size:18px; cursor:pointer }
.cart-summary { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; position:sticky; top:140px; align-self:start }
.cart-summary h3 { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border) }
.summary-row { display:flex; justify-content:space-between; padding:8px 0; font-size:15px }
.summary-total { font-size:20px; font-weight:800; border-top:2px solid var(--green-800); padding-top:12px; margin-top:8px }
.coupon-input { display:flex; gap:8px; margin:16px 0 }
.coupon-input input { flex:1; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px }

/* ─── Checkout ────────────────────────────────────────── */
.checkout-layout { display:grid; grid-template-columns:1fr 400px; gap:30px; margin:30px 0 }
.form-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; margin-bottom:20px }
.form-section h3 { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border-light) }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-group { display:grid; gap:5px }
.form-group.full { grid-column:1/-1 }
.form-group label { font-weight:600; font-size:14px }
.form-group input, .form-group select, .form-group textarea {
  padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:15px; transition:border-color .2s }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--green-600) }
.form-group textarea { resize:vertical; min-height:80px }
.form-error { color:var(--red-600); font-size:13px; display:none }

/* ─── Order Summary (checkout sidebar) ────────────────── */
.order-items { max-height:300px; overflow-y:auto; margin-bottom:16px }
.order-item { display:flex; justify-content:space-between; padding:8px 0; font-size:14px;
  border-bottom:1px solid var(--border-light) }

/* ─── Account ─────────────────────────────────────────── */
.account-layout { display:grid; grid-template-columns:220px 1fr; gap:30px; margin:30px 0 }
.account-nav a { display:block; padding:10px 16px; border-radius:var(--radius-sm); color:var(--text);
  font-size:14px; font-weight:600; margin-bottom:4px }
.account-nav a:hover, .account-nav a.active { background:var(--green-100); color:var(--green-800); text-decoration:none }
.order-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; margin-bottom:16px }
.order-status { display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px;
  font-weight:700; color:#fff }

/* ─── Info Pages ──────────────────────────────────────── */
.page-header { background:var(--green-800); color:#fff; padding:40px 5% }
.page-header h1 { margin:0 }
.page-header .breadcrumb { font-size:14px; opacity:.7; margin-bottom:8px }
.page-header .breadcrumb a { color:#fff }
.content-page { max-width:800px; margin:0 auto; padding:40px 20px; line-height:1.8 }
.content-page h2 { margin-top:32px; margin-bottom:12px }
.content-page p { margin-bottom:16px }
.content-page ul, .content-page ol { margin-bottom:16px; padding-left:24px }
.content-page li { margin-bottom:8px }

/* ─── FAQ ─────────────────────────────────────────────── */
.faq-item { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; overflow:hidden }
.faq-question { display:flex; justify-content:space-between; align-items:center; padding:16px 20px;
  cursor:pointer; font-weight:700; background:var(--bg-card) }
.faq-question:hover { background:var(--green-50) }
.faq-answer { padding:0 20px; max-height:0; overflow:hidden; transition:max-height .3s, padding .3s; line-height:1.7 }
.faq-item.open .faq-answer { max-height:500px; padding:0 20px 20px }
.faq-item.open .faq-toggle { transform:rotate(45deg) }
.faq-toggle { font-size:22px; transition:transform .3s; flex-shrink:0 }

/* ─── Contact Form ────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:30px 0 }
.contact-info { display:flex; flex-direction:column; gap:20px }
.contact-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; display:flex; gap:16px; align-items:flex-start }
.contact-card .icon { font-size:28px; flex-shrink:0 }

/* ─── Wishlist ────────────────────────────────────────── */
.wishlist-item { display:grid; grid-template-columns:60px 1fr auto auto; gap:16px;
  align-items:center; padding:16px 0; border-bottom:1px solid var(--border-light) }
.wishlist-item .emoji-sm { font-size:32px; text-align:center }

/* ─── Trust Badges ────────────────────────────────────── */
.trust-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:40px 0 }
.trust-item { text-align:center; padding:20px }
.trust-item .icon { font-size:36px; margin-bottom:8px }
.trust-item h4 { margin-bottom:4px; font-size:14px }
.trust-item p { font-size:13px; color:var(--text-muted) }

/* ─── Categories Section ──────────────────────────────── */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px }
.category-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; text-align:center; text-decoration:none; color:var(--text); transition:all .2s }
.category-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none }
.category-card .cat-emoji { font-size:48px; margin-bottom:8px }
.category-card h3 { font-size:16px }
.category-card .cat-count { font-size:13px; color:var(--text-muted) }

/* ─── Info Box ────────────────────────────────────────── */
.info-box { background:var(--gold-100); border:1px solid var(--gold-300); padding:16px 20px;
  border-radius:var(--radius); line-height:1.6; font-size:14px }
.info-box.blue { background:var(--blue-100); border-color:#90caf9 }
.info-box.red { background:var(--red-100); border-color:var(--red-600) }

/* ─── Empty States ────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px }
.empty-state .icon { font-size:64px; margin-bottom:16px }
.empty-state h2 { margin-bottom:8px }
.empty-state p { color:var(--text-muted); margin-bottom:24px }

/* ─── Footer ──────────────────────────────────────────── */
#site-footer { background:var(--green-900); color:#fff; padding:40px 0; margin-top:50px }
.footer-inner { max-width:var(--max-width); margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px }
.footer-col h3 { font-size:20px; margin-bottom:12px }
.footer-col h4 { font-size:14px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; color:var(--gold-300) }
.footer-col p { font-size:14px; color:rgba(255,255,255,.7); line-height:1.7 }
.footer-col a { display:block; color:rgba(255,255,255,.7); font-size:14px; padding:4px 0; text-decoration:none }
.footer-col a:hover { color:var(--gold-300) }
.footer-bottom { max-width:var(--max-width); margin:0 auto; padding:20px 20px 0;
  border-top:1px solid rgba(255,255,255,.1); margin-top:30px;
  display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.5) }

/* ─── Responsive ──────────────────────────────────────── */
@media(max-width:960px){
  .shop-layout { grid-template-columns:1fr }
  .shop-sidebar { display:none }
  .product-single { grid-template-columns:1fr }
  .cart-layout { grid-template-columns:1fr }
  .checkout-layout { grid-template-columns:1fr }
  .contact-grid { grid-template-columns:1fr }
  .account-layout { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr 1fr }
  .grid-4 { grid-template-columns:repeat(2,1fr) }
  .trust-bar { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:700px){
  .header-search { display:none }
  .hamburger { display:block }
  .header-nav { display:none }
  .header-nav.open { display:block }
  .header-nav .header-inner { flex-direction:column; align-items:stretch; padding:8px 0 }
  .header-nav a { padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.06) }
  .hero { padding:40px 5% 50px }
  .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .form-grid { grid-template-columns:1fr }
  .cart-item { grid-template-columns:50px 1fr auto; font-size:14px }
  .cart-item .cart-item-qty { grid-column:2 }
  .footer-inner { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; text-align:center; gap:8px }
  .grid-2 { grid-template-columns:1fr }
  .trust-bar { grid-template-columns:1fr 1fr }
  .categories-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:420px){
  .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .product-card { font-size:13px }
  .product-img { font-size:36px; padding:16px }
  .product-card h3 { font-size:13px; min-height:36px }
}

/* ─── Cookie Consent Banner ──────────────────────────── */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--dark);color:#fff;padding:16px 20px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  font-size:14px;box-shadow:0 -2px 12px rgba(0,0,0,.2);
}
.cookie-banner a{color:var(--accent);text-decoration:underline}
.cookie-banner button{
  background:var(--accent);color:#fff;border:none;padding:8px 24px;
  border-radius:6px;cursor:pointer;font-weight:600;font-size:14px;
}
.cookie-banner button:hover{opacity:.9}

/* ─── Back to Top Button ─────────────────────────────── */
.back-to-top{
  position:fixed;bottom:80px;right:20px;z-index:900;
  width:44px;height:44px;border-radius:50%;border:none;
  background:var(--primary);color:#fff;font-size:20px;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2);transition:opacity .3s;
}
.back-to-top.visible{display:flex}
.back-to-top:hover{opacity:.85}

/* ─── WhatsApp Floating Button ───────────────────────── */
.whatsapp-float{
  position:fixed;bottom:24px;right:20px;z-index:950;
  width:52px;height:52px;border-radius:50%;
  background:#25D366;color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.2);text-decoration:none;
  transition:transform .2s;
}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float svg{width:28px;height:28px;fill:#fff}

/* ─── Accessibility Focus States ─────────────────────── */
:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}
.skip-link{
  position:absolute;top:-100%;left:16px;z-index:10000;
  background:var(--primary);color:#fff;padding:8px 16px;
  border-radius:4px;font-weight:600;text-decoration:none;
}
.skip-link:focus{top:8px}

/* ─── Skeleton Loading States ────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--light) 25%,#e8e0d4 50%,var(--light) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
  border-radius:6px;min-height:20px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:280px;border-radius:12px}
.skeleton-text{height:14px;margin-bottom:8px;width:80%}
.skeleton-text.short{width:50%}
.skeleton-img{height:160px;border-radius:8px}

/* ─── Improved Stock Badge ───────────────────────────── */
.stock-badge{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}
.stock-badge.in-stock{background:#d4edda;color:#155724}
.stock-badge.out-of-stock{background:#f8d7da;color:#721c24}
.stock-badge.limited{background:#fff3cd;color:#856404}

/* ─── Print Styles ───────────────────────────────────── */
@media print{
  .site-header,.site-footer,.cookie-banner,.back-to-top,.whatsapp-float,
  .shop-sidebar,.product-actions,.btn-add,.btn-wishlist,.hamburger,
  .header-nav,.header-search{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .container{max-width:100%;padding:0}
  a{color:#000;text-decoration:underline}
  .product-card{break-inside:avoid;border:1px solid #ccc}
}