/* ============================================================
   ASTRA CHILD - AWAMI  ·  Design System
   Base: Nike photography-first commerce system
   Adapted for Awami Laboratories (herbal/Unani pharma + store)
   Fonts: Bebas Neue (display) + Inter (UI)
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Core neutrals */
  --ink: #111111;
  --on-primary: #ffffff;
  --canvas: #ffffff;
  --soft-cloud: #f5f5f5;
  --charcoal: #39393b;
  --ash: #4b4b4d;
  --mute: #707072;
  --stone: #9e9ea0;
  --hairline: #cacacb;
  --hairline-soft: #e5e5e5;

  /* Semantic */
  --sale: #d30005;
  --sale-deep: #780700;
  --success: #007d48;
  --success-bright: #1eaa52;
  --info: #1151ff;
  --info-deep: #0034e3;

  /* Herbal / pharma trust accents (restrained) */
  --herbal: #2d6a4f;
  --herbal-deep: #1b4332;
  --herbal-soft: #d8f3dc;
  --cream: #f7f3ea;

  /* Typography */
  --font-display: 'Bebas Neue', 'Nike Futura ND', 'Anton', sans-serif;
  --font-ui: 'Inter', 'Helvetica Now Text', Helvetica, Arial, sans-serif;

  /* Radius */
  --r-none: 0;
  --r-md: 24px;
  --r-lg: 30px;
  --r-full: 9999px;

  /* Spacing (8px base) */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-18: 18px;
  --sp-24: 24px;
  --sp-30: 30px;
  --sp-48: 48px;

  /* Layout */
  --container: 1440px;
  --nav-height: 64px;
  --topbar-height: 36px;
}

/* ---------- Base reset / typography ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  overflow-x: hidden;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--herbal); }
p { color: var(--charcoal); }

h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 500; color: var(--ink); line-height: 1.2; margin: 0 0 12px; }

h1 { font-size: 32px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 16px; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
}

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

/* Display campaign type (hero only) */
.display-campaign {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

/* Section rhythm */
.section { padding: var(--sp-48) 0; }
.section-title { font-size: 32px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; margin-bottom: var(--sp-24); }

/* ---------- Buttons (pill vocabulary) ---------- */
.btn, .btn-primary,
button,
a.button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
#place_order {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 500; font-size: 16px; line-height: 1.5;
  background: var(--ink); color: var(--on-primary);
  border: 0; border-radius: var(--r-full);
  padding: 16px 32px; height: 48px;
  cursor: pointer; text-align: center;
  transition: opacity .2s ease, transform .15s ease, background .2s ease;
  text-decoration: none;
}
.btn:hover, .btn-primary:hover,
button:hover, a.button:hover,
.woocommerce .button:hover { background: var(--charcoal); color: var(--on-primary); transform: scale(1.02); }

.btn-secondary {
  background: var(--soft-cloud); color: var(--ink);
}
.btn-secondary:hover { background: var(--hairline-soft); color: var(--ink); }

.btn-outline-image { background: var(--canvas); color: var(--ink); padding: 12px 24px; }
.btn-outline-image:hover { background: var(--soft-cloud); }

.btn-icon {
  background: var(--soft-cloud); color: var(--ink);
  width: 40px; height: 40px; padding: 0; border-radius: var(--r-full);
  flex: 0 0 40px;
}
.btn-icon:hover { background: var(--hairline-soft); }

/* ---------- Search pill ---------- */
.search-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--soft-cloud); border-radius: var(--r-md);
  padding: 0 16px; height: 40px; width: 100%; max-width: 260px;
  border: 2px solid transparent; box-sizing: border-box;
}
.search-pill input,
.search-pill input[type="search"] {
  border: 0; background: transparent; outline: none; font-size: 16px;
  width: 100%; height: 38px; padding: 0; margin: 0; box-shadow: none;
  font-family: var(--font-ui); border-radius: 0;
}
.search-pill:focus-within { background: var(--canvas); border-color: var(--ink); }

/* ---------- Filter chips ---------- */
.filter-chip {
  display: inline-flex; align-items: center;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-full);
  padding: 8px 16px; font-size: 16px; font-weight: 500;
  cursor: pointer;
}
.filter-chip-active { background: var(--ink); color: var(--on-primary); border-color: var(--ink); }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-full);
  padding: 4px 12px; font-size: 12px; font-weight: 500;
}
.badge-sale { color: var(--sale); background: none; border: 0; padding: 0; font-weight: 500; }

/* ============================================================
   HEADER (full takeover)
   ============================================================ */
.awami-topbar {
  background: var(--soft-cloud); height: var(--topbar-height);
  display: flex; align-items: center;
  font-size: 12px; color: var(--ink);
}
.awami-topbar .awami-container { display: flex; justify-content: space-between; align-items: center; }
.awami-topbar a { color: var(--ink); font-weight: 500; }
.awami-topbar .topbar-links { display: flex; gap: 18px; align-items: center; }

.awami-header {
  background: var(--canvas);
  height: var(--nav-height);
  border-bottom: 1px solid var(--hairline-soft);
  position: sticky; top: 0; z-index: 100;
}
.awami-header .awami-container { display: flex; align-items: center; height: 100%; gap: 24px; }

.site-logo { display: flex; align-items: center; gap: 10px; }
.site-logo img { height: 40px; width: auto; display: block; }
.site-logo .logo-fallback { font-family: var(--font-display); font-size: 28px; letter-spacing: 1px; }

.primary-nav { display: flex; align-items: center; margin-left: auto; }
.primary-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; }
.primary-nav ul li { position: relative; }
.primary-nav ul li a {
  display: block; padding: 0 18px; height: var(--nav-height); line-height: var(--nav-height);
  font-weight: 500; font-size: 16px; color: var(--ink);
  border-bottom: 2px solid transparent;
}
.primary-nav ul li a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.primary-nav ul li.current-menu-item > a { border-bottom-color: var(--ink); }

/* Dropdowns */
.primary-nav ul ul {
  position: absolute; top: 100%; left: 0; background: var(--canvas);
  min-width: 240px; border: 1px solid var(--hairline-soft);
  display: none; flex-direction: column; padding: 8px 0;
}
.primary-nav ul li:hover > ul { display: flex; }
.primary-nav ul ul li a { height: auto; line-height: 1.4; padding: 10px 18px; border: 0; }
.primary-nav ul ul li a:hover { background: var(--soft-cloud); }
.primary-nav ul ul ul { left: 100%; top: 0; }

.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.header-actions .search-pill { max-width: 240px; }
.header-cart { position: relative; display: flex; align-items: center; color: var(--ink); }
.header-cart .cart-count {
  position: absolute; top: -6px; right: -8px; background: var(--herbal); color: var(--on-primary);
  font-size: 11px; font-weight: 500; min-width: 18px; height: 18px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Mobile toggle */
.menu-toggle { display: none; background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--ink); padding: 8px; height: auto; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.awami-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 85%;
  background: var(--canvas); z-index: 300;
  transform: translateX(-100%); transition: transform .25s ease;
  overflow-y: auto; padding: 24px;
  box-shadow: 4px 0 20px rgba(17,17,17,.08);
}
.awami-drawer.open { transform: translateX(0); }
.awami-drawer .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.drawer-close { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ink); }
.awami-drawer ul { list-style: none; margin: 0; padding: 0; }
.awami-drawer ul li a { display: block; padding: 12px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--hairline-soft); }
.awami-drawer ul ul { padding-left: 16px; }
.awami-drawer ul ul li a { font-size: 14px; color: var(--mute); }
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(17,17,17,.4); z-index: 299;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

/* ============================================================
   FOOTER (full takeover)
   ============================================================ */
.awami-footer { background: var(--canvas); border-top: 1px solid var(--hairline); padding: var(--sp-48) 0 0; color: var(--mute); }
.awami-footer .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: var(--sp-48); }
.footer-col h4.footer-heading { font-size: 16px; font-weight: 500; color: var(--ink); text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: var(--mute); font-size: 14px; font-weight: 500; }
.footer-col ul li a:hover { color: var(--herbal); }
.footer-col p { font-size: 14px; color: var(--mute); }

.awami-footer .footer-bottom {
  border-top: 1px solid var(--hairline);
  padding: 18px 0; font-size: 9px; color: var(--mute);
}
.awami-footer .footer-bottom .awami-container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-bottom a { color: var(--mute); }
.footer-bottom .legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ============================================================
   CONTENT / PAGE
   ============================================================ */
.awami-content { min-height: 60vh; }
.awami-page { padding: var(--sp-48) 0; }
.awami-page-header { padding: var(--sp-48) 0 var(--sp-24); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-48); }
.awami-page-header h1 { font-size: 32px; text-transform: uppercase; }
.entry-content { max-width: 820px; }
.entry-content h2, .entry-content h3, .entry-content h4 { color: var(--ink); line-height: 1.25; margin: 32px 0 12px; }
.entry-content h2 { font-size: 24px; }
.entry-content h3 { font-size: 20px; }
.entry-content p { margin: 0 0 16px; color: var(--charcoal); }
.entry-content ul, .entry-content ol { margin: 0 0 20px; padding-left: 22px; }
.entry-content li { margin-bottom: 8px; color: var(--charcoal); }
.entry-content img { max-width: 100%; height: auto; }

/* ============================================================
   MINIMAL TEXT PAGE (template-minimal.php)
   ============================================================ */
.awami-page-hero {
  background: #F7F9F7; padding: 64px 24px; text-align: center;
  border-bottom: 1px solid var(--hairline); margin: 0;
}
.awami-page-hero h1 { font-size: 38px; text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.minimal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  padding: 48px 0; align-items: start;
}
.minimal-intro { font-size: 17px; line-height: 1.6; color: var(--charcoal); }
.minimal-intro p { margin: 0 0 16px; }
.minimal-intro p:last-child { margin-bottom: 0; }
.minimal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.minimal-card {
  border: 1px solid #E3E5E3; border-radius: 10px; padding: 22px 24px;
  background: var(--canvas);
}
.minimal-card-title {
  font-size: 17px; font-weight: 700; color: var(--ink);
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: .3px;
}
.minimal-card-body ul { margin: 0; padding: 0; list-style: none; }
.minimal-card-body li {
  position: relative; padding-left: 16px; margin-bottom: 8px;
  font-size: 15px; line-height: 1.5; color: var(--charcoal);
}
.minimal-card-body li:last-child { margin-bottom: 0; }
.minimal-card-body li::before {
  content: "–"; position: absolute; left: 0; top: 0;
  color: var(--herbal); font-weight: 700;
}
.minimal-card-body li ul { margin-top: 8px; }

/* ============================================================
   WOOCOMMERCE — SHOP GRID
   ============================================================ */
.awami-shop .site-content { background: var(--canvas); }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products li.product { background: var(--canvas); margin: 0; width: auto !important; }
.woocommerce ul.products li.product a img {
  background: var(--soft-cloud); width: 100%; margin: 0; border-radius: var(--r-none);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px; font-weight: 500; color: var(--ink); padding: 8px 0 0; margin: 0; text-transform: none;
}
.woocommerce ul.products li.product .price { font-size: 16px; font-weight: 500; color: var(--ink); }
.woocommerce ul.products li.product .price del { color: var(--mute); }
.woocommerce ul.products li.product .price ins { color: var(--sale); text-decoration: none; }
.woocommerce ul.products li.product .button {
  background: var(--ink); color: var(--on-primary); border-radius: var(--r-full);
  padding: 8px 16px; height: auto; font-size: 14px; margin-top: 8px;
}
.woocommerce ul.products li.product .button.added::after { display: none; }

.woocommerce .onsale {
  background: var(--canvas); color: var(--sale); border: 1px solid var(--hairline);
  border-radius: var(--r-full); padding: 4px 12px; font-size: 12px; min-height: auto; line-height: 1.5; top: 12px; left: 12px; right: auto;
}

/* Product card (custom markup) */
.product-card-link { display: block; text-decoration: none; }
.product-card-media { position: relative; background: var(--soft-cloud); }
.product-card-media img { display: block; width: 100%; }
.product-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--canvas); border: 1px solid var(--hairline); }
.product-card-info { padding: 0; }
.product-subtitle { display: block; font-size: 14px; font-weight: 500; color: var(--mute); margin-top: 8px; text-transform: uppercase; }
.woocommerce ul.products li.product .product-card-info .woocommerce-loop-product__title { padding: 0; }
.woocommerce ul.products li.product .product-card-info .price { display: inline-block; margin-top: 4px; }
.woocommerce ul.products li.product > .button { margin-top: 12px; width: 100%; }

.awami-shop-wrap, .awami-product-wrap { padding: var(--sp-48) 0; min-height: 60vh; }

/* Shop header / results */
.woocommerce-products-header { padding: var(--sp-24) 0; border-bottom: 1px solid var(--hairline-soft); }
.woocommerce-products-header .woocommerce-products-header__title { font-size: 32px; text-transform: uppercase; margin: 0; }
.woocommerce-result-count, .woocommerce-ordering { margin: 12px 0; color: var(--mute); font-size: 14px; }

/* ============================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: var(--sp-48) 0; }
.woocommerce div.product div.images { width: 100% !important; float: none; }
.woocommerce div.product div.images img { background: var(--soft-cloud); border-radius: var(--r-none); }
.woocommerce div.product div.summary { width: 100% !important; float: none; }
.woocommerce div.product .product_title { font-size: 32px; text-transform: uppercase; }
.woocommerce div.product p.price { color: var(--ink); font-size: 24px; font-weight: 500; }
.woocommerce div.product p.price ins { color: var(--sale); text-decoration: none; }
.woocommerce div.product p.price del { color: var(--mute); font-weight: 400; }
.woocommerce div.product form.cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity .qty { height: 48px; width: 64px; border: 1px solid var(--hairline); border-radius: var(--r-full); text-align: center; font-size: 16px; }
.woocommerce div.product form.cart .button { background: var(--ink); border-radius: var(--r-full); }

.woocommerce-tabs { clear: both; padding-top: var(--sp-48); border-top: 1px solid var(--hairline); }
.woocommerce-tabs ul.tabs { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--hairline); }
.woocommerce-tabs ul.tabs li a { color: var(--mute); font-weight: 500; padding-bottom: 12px; border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--ink); }

.related.products { clear: both; padding-top: var(--sp-48); }
.related.products > h2 { font-size: 24px; text-transform: uppercase; }

/* ============================================================
   WOOCOMMERCE — CART / CHECKOUT / ACCOUNT
   ============================================================ */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { max-width: var(--container); margin: 0 auto; padding: var(--sp-48) 0; }
.woocommerce table.shop_table { border: 1px solid var(--hairline); border-radius: var(--r-none); border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px; border-bottom: 1px solid var(--hairline-soft); }
.woocommerce table.shop_table thead th { background: var(--soft-cloud); font-weight: 500; }
.woocommerce .cart_totals h2 { font-size: 24px; text-transform: uppercase; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea {
  height: 48px; border: 1px solid var(--hairline); border-radius: var(--r-none); padding: 0 16px; font-size: 16px;
}
.woocommerce form .form-row textarea { height: auto; padding: 12px 16px; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--r-none); border-top: 0; background: var(--soft-cloud); color: var(--ink); padding: 16px 20px;
}
.woocommerce-message { border-left: 4px solid var(--success); }
.woocommerce-info { border-left: 4px solid var(--info); }
.woocommerce-error { border-left: 4px solid var(--sale); }

/* Checkout button is #place_order — styled via global button rules above */

/* ============================================================
   FORMS / INPUTS (general)
   ============================================================ */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="url"], select, textarea {
  width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-none);
  padding: 0 16px; height: 48px; font-size: 16px; font-family: var(--font-ui); background: var(--canvas);
}
textarea { height: auto; padding: 12px 16px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

/* ============================================================
   FRONT PAGE
   ============================================================ */
/* Homepage featured products grid (ul.products not inside .woocommerce) */
.home ul.products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.home ul.products li.product { margin: 0; width: auto !important; background: var(--canvas);
  display: flex; flex-direction: column;
}
.home ul.products li.product img, .home ul.products li.product img {
  background: var(--soft-cloud); width: 100%; margin: 0; border-radius: var(--r-none);
}
.home ul.products li.product .woocommerce-loop-product__title,
.home ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px; font-weight: 500; color: var(--ink); padding: 8px 0 0; margin: 0; text-transform: none;
}
.home ul.products li.product .price, .home ul.products li.product .price {
  font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 4px; display: inline-block;
}
.home ul.products li.product .button, .home ul.products li.product .button {
  background: var(--ink); color: var(--on-primary); border-radius: var(--r-full);
  padding: 7px 14px; height: auto; font-size: 13px; margin-top: auto; width: 100%;
  text-align: center; box-sizing: border-box; line-height: 1.2;
}
.home ul.products li.product .button:hover { opacity: .85; }

.awami-hero { padding: 72px 0; border-bottom: 1px solid var(--hairline); background: var(--soft-cloud); }
.awami-hero .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.awami-hero .hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--herbal); margin-bottom: 16px; }
.awami-hero .display-campaign { font-size: 96px; margin-bottom: 16px; max-width: 640px; }
.awami-hero .hero-sub { font-size: 18px; color: var(--charcoal); max-width: 480px; margin-bottom: 24px; }
.awami-hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.hero-proof-stars { color: #F5A623; font-size: 16px; letter-spacing: 2px; }
.hero-proof-text { font-size: 14px; color: var(--charcoal); }
.hero-benefits { display: flex; flex-wrap: wrap; gap: 12px 20px; list-style: none; margin: 16px 0 0; padding: 0; }
.hero-benefits li { position: relative; padding-left: 18px; font-size: 14px; color: var(--charcoal); }
.hero-benefits li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--herbal); font-weight: 700; }
.btn-label-mobile { display: none; }
.hero-cats { display: none; }
.mobile-cta-bar { display: none; }
.awami-trustbar { border-top: 1px solid var(--hairline); background: var(--canvas); }
.trustbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 18px 24px;
}
.trust-item {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 150px;
  justify-content: center;
}
.trust-item + .trust-item { border-left: 1px solid var(--hairline); padding-left: 24px; }
.trust-icon {
  font-size: 16px; font-weight: 700; color: var(--herbal);
  white-space: nowrap; line-height: 1;
}
.trust-text {
  font-size: 13px; line-height: 1.2; color: var(--charcoal);
  font-weight: 500;
}
.hero-visual { display: flex; align-items: center; justify-content: center; gap: 20px; }
.hero-card {
  position: relative;
  width: 100%; max-width: 320px; height: 340px;
  background: var(--cream);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-card-alt { max-width: 320px; }
.hero-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px;
}
.hero-slide img {
  display: block; max-width: 180px; max-height: 200px; width: auto; height: auto;
  object-fit: contain; background: transparent;
}
.hero-slide-name {
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink);
}
.hero-badge {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--on-primary);
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-full);
}

.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.category-icon-card {
  position: relative; display: flex; flex-direction: column;
  overflow: hidden; background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 0; min-height: 0;
  transition: box-shadow .2s ease, transform .2s ease;
}
.category-icon-card .cat-img { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.category-icon-card .cat-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.category-icon-card:hover .cat-img img { transform: scale(1.05); }
.category-icon-card .cat-label {
  display: block; padding: 14px 16px; font-size: 14px; font-weight: 600;
  text-align: left; color: var(--ink);
}
.category-icon-card:hover { box-shadow: 0 8px 24px rgba(17,17,17,.10); transform: translateY(-2px); }
.category-icon-card:hover .cat-label { color: var(--ink); }

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.trust-item { background: var(--soft-cloud); padding: 24px; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; }

/* Video gallery */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.video-card { border-radius: var(--r-md); overflow: hidden; background: var(--canvas); border: 1px solid var(--hairline); }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.video-thumb:hover img { transform: scale(1.04); }
.video-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(17,17,17,.15); transition: background .2s ease;
}
.video-thumb:hover::after { background: rgba(17,17,17,.05); }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(17,17,17,.75); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.video-play::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  border-left: 16px solid var(--on-primary);
}
.video-thumb:hover .video-play { background: var(--herbal); transform: translate(-50%, -50%) scale(1.06); }

/* Post grid */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-grid article h2.entry-title { font-size: 20px; }
.post-grid .pagination { grid-column: 1 / -1; }

/* Policy / contact */
.policy-content { max-width: 780px; }
.contact-layout { display: grid; grid-template-columns: 320px 1fr; gap: 48px; }

/* ============================================================
   HELPER / MISC
   ============================================================ */
.woocommerce .products .star-rating { display: none; }
.ast-container { max-width: var(--container) !important; padding-left: 24px; padding-right: 24px; }

/* ============================================================
   WHATSAPP FLOATING BUTTON + INQUIRY FORM
   ============================================================ */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 1200;
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: #25D366; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
  transition: transform .15s ease, box-shadow .2s ease;
  flex: 0 0 auto;
}
.wa-fab svg { display: block; }
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(37, 211, 102, .45); }

.wa-form {
  position: fixed; z-index: 1300;
  right: 20px; bottom: 92px;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--canvas);
  border-radius: 16px; border: 1px solid var(--hairline);
  box-shadow: 0 20px 50px rgba(17, 17, 17, .18);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
  overflow: hidden;
}
.wa-form.open { opacity: 1; visibility: visible; transform: translateY(0); }
.wa-form-head {
  display: flex; align-items: center; justify-content: space-between;
  background: #25D366; color: #fff; padding: 14px 16px;
}
.wa-form-head strong { font-size: 15px; font-weight: 600; }
.wa-form-close { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; line-height: 1; }
.wa-form-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.wa-form-body label { display: flex; flex-direction: column; gap: 5px; }
.wa-form-body label > span { font-size: 12px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .4px; }
.wa-form-body input,
.wa-form-body select,
.wa-form-body textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--canvas); color: var(--ink); box-sizing: border-box;
}
.wa-form-body input:focus,
.wa-form-body select:focus,
.wa-form-body textarea:focus { outline: none; border-color: #25D366; }
.wa-form-body textarea { resize: vertical; }
.wa-submit {
  width: 100%; padding: 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: #25D366; color: #fff; font-size: 15px; font-weight: 600;
  transition: background .15s ease;
}
.wa-submit:hover { background: #1eb85a; }

.wa-overlay {
  position: fixed; inset: 0; z-index: 1250; background: rgba(17, 17, 17, .4);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.wa-overlay.open { opacity: 1; visibility: visible; }

/* Chatbot FAB + panel */
.bot-fab {
  position: fixed; right: 20px; bottom: 88px; z-index: 1200;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 16px rgba(17, 17, 17, .25);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.bot-fab svg { display: block; }
.bot-fab-icon { display: block; filter: invert(1) brightness(2); }
.bot-fab:hover { transform: scale(1.06); }

.bot-panel {
  position: fixed; z-index: 1300;
  right: 20px; bottom: 150px;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--canvas);
  border-radius: 16px; border: 1px solid var(--hairline);
  box-shadow: 0 20px 50px rgba(17, 17, 17, .18);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
  overflow: hidden;
}
.bot-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.bot-panel-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--on-primary); padding: 14px 16px;
}
.bot-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--herbal); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.bot-head-text { display: flex; flex-direction: column; flex: 1; }
.bot-head-text strong { font-size: 15px; font-weight: 600; }
.bot-status { font-size: 11px; color: rgba(255,255,255,.8); }
.bot-close { background: none; border: 0; color: var(--on-primary); font-size: 18px; cursor: pointer; line-height: 1; }

.bot-body {
  height: 280px; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--soft-cloud);
}
.bot-msg {
  max-width: 85%; padding: 10px 13px; border-radius: 12px;
  font-size: 14px; line-height: 1.45; white-space: pre-wrap;
}
.bot-msg-bot { background: var(--canvas); color: var(--ink); align-self: flex-start; border: 1px solid var(--hairline); }
.bot-msg-user { background: var(--herbal); color: var(--on-primary); align-self: flex-end; }
.bot-qs {
  display: inline-block; background: var(--canvas); color: var(--ink);
  border: 1px solid var(--herbal); border-radius: 20px;
  padding: 7px 13px; margin: 0; font-size: 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bot-qs:hover { background: var(--herbal); color: var(--on-primary); }

.bot-qs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 85%;
  margin: 4px 0 10px;
}

/* Chatbot product cards + link buttons */
.bot-section { display: flex; flex-direction: column; gap: 6px; }
.bot-section-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.bot-card {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--canvas); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bot-card:hover { border-color: var(--herbal); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.bot-card-name { font-size: 13px; font-weight: 600; }
.bot-card-price { font-size: 12px; font-weight: 700; color: var(--herbal); white-space: nowrap; }
.bot-link {
  display: inline-block; margin: 6px 4px 2px 0; padding: 8px 14px;
  background: var(--herbal); color: var(--on-primary); border-radius: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .15s ease;
}
.bot-link:hover { background: var(--herbal-deep, #1f7a4f); }
.bot-link-wa { background: #25D366; }
.bot-link-wa:hover { background: #1ebe57; }
.bot-msg p { margin: 6px 0 0; }

.bot-input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--hairline); background: var(--canvas);
}
.bot-input input {
  flex: 1; padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--canvas); color: var(--ink);
}
.bot-input input:focus { outline: none; border-color: var(--herbal); }
.bot-send {
  width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 8px;
  background: var(--herbal); color: var(--on-primary); cursor: pointer; font-size: 16px;
  transition: opacity .15s ease;
}
.bot-send:hover { opacity: .85; }

/* ===== Shop archive: layout + filters ===== */
.awami-shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }

.awami-filter-toggle {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  background: var(--herbal); color: var(--on-primary); border: 0; border-radius: 8px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.awami-filter-toggle svg { display: block; }

.awami-filter-sidebar {
  position: sticky; top: 90px; background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: 12px; padding: 20px;
}
.awami-filter-head { display: none; }
.awami-filter-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; color: var(--ink); }
.awami-filter-group { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--hairline); }
.awami-filter-group:last-of-type { border-bottom: 0; }

.awami-filter-cats { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.awami-filter-cat {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; font-size: 14px; transition: background .15s ease;
}
.awami-filter-cat:hover { background: var(--soft-cloud); }
.awami-filter-cat input { width: 16px; height: 16px; accent-color: var(--herbal); cursor: pointer; flex-shrink: 0; }
.awami-filter-cat-name { color: var(--ink); }
.awami-filter-cat-count { margin-left: auto; font-size: 12px; color: var(--muted); background: var(--soft-cloud); border-radius: 10px; padding: 1px 8px; }

.awami-filter-price { display: flex; align-items: flex-end; gap: 8px; }
.awami-filter-price label { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.awami-filter-price label span { font-size: 12px; color: var(--muted); }
.awami-filter-price input {
  width: 100%; padding: 8px 10px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--canvas); color: var(--ink);
}
.awami-filter-price input:focus { outline: none; border-color: var(--herbal); }
.awami-price-sep { padding-bottom: 10px; color: var(--muted); }

.awami-filter-sale { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; color: var(--ink); margin-bottom: 16px; }
.awami-filter-sale input { width: 16px; height: 16px; accent-color: var(--herbal); cursor: pointer; }
.awami-filter-clear {
  width: 100%; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--herbal); border: 1px solid var(--herbal); border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.awami-filter-clear:hover { background: var(--herbal); color: var(--on-primary); }

.awami-filter-overlay { display: none; }

.awami-shop-content { min-width: 0; }
.awami-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.awami-shop-toolbar .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--muted); }
.awami-shop-toolbar .woocommerce-ordering { margin: 0; }
.awami-orderby select, .awami-shop-toolbar form.woocommerce-ordering select {
  padding: 8px 12px; font-size: 14px; font-family: inherit; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--canvas); cursor: pointer;
}
.awami-orderby select:focus, .awami-shop-toolbar form.woocommerce-ordering select:focus { outline: none; border-color: var(--herbal); }

#awami-shop-results { position: relative; min-height: 120px; }
#awami-shop-results.awami-loading { opacity: .35; pointer-events: none; }
.awami-no-results { padding: 40px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--hairline); border-radius: 12px; }
.awami-pagination { margin-top: 28px; }

@media (max-width: 599px) {
  .wa-fab { right: 16px; bottom: 84px; width: 52px; height: 52px; }
  .wa-form { right: 16px; bottom: 148px; width: auto; left: 16px; }
  .bot-fab { right: 16px; bottom: 144px; width: 44px; height: 44px; }
  .bot-panel { right: 16px; left: 16px; bottom: 196px; width: auto; }
}

/* ============================================================
   RESPONSIVE
   NOTE: Kept last so these overrides always win over base rules.
   ============================================================ */
@media (max-width: 1023px) {
  .primary-nav { display: none; }
  .menu-toggle { display: block; }
  .awami-trustbar { display: none; }
  .awami-footer .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
  .display-campaign { font-size: 64px; }
  .awami-hero .display-campaign { font-size: 64px; }
  .awami-hero .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .awami-hero .hero-card { max-width: 320px; height: 320px; }
  .category-grid, .trust-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .awami-page ul.products, .home ul.products { grid-template-columns: repeat(3, 1fr); }
  .minimal-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 599px) {
  .awami-container { padding: 0 16px; }
  .awami-footer { padding-top: var(--sp-30); }
  .awami-footer .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; padding-bottom: var(--sp-30); }
  .awami-footer .footer-col-4 { grid-column: 1 / -1; }
  .footer-col h4.footer-heading { font-size: 14px; margin-bottom: 12px; }
  .footer-col ul li { margin-bottom: 8px; }
  .footer-col ul li a, .footer-col p { font-size: 13px; }
  .awami-footer .footer-bottom { padding: 14px 0; }
  .awami-footer .footer-bottom .awami-container { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .footer-bottom .legal-links { justify-content: center; gap: 14px; }
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .display-campaign { font-size: 40px; }
  .awami-hero .display-campaign { font-size: 32px; max-width: 100%; overflow-wrap: break-word; line-height: 1.1; }
  .awami-hero .hero-eyebrow { font-size: 11px; letter-spacing: .5px; }
  .awami-hero .hero-sub { font-size: 16px; max-width: 100%; }
  .awami-hero { padding: 24px 0 32px; }
  .awami-hero .hero-inner { gap: 16px; }
  .awami-hero .hero-copy { text-align: center; }
  .awami-hero .hero-actions { align-items: center; }
  .awami-hero .hero-eyebrow { margin-bottom: 8px; }
  .awami-hero .display-campaign { margin-bottom: 8px; }
  .awami-hero .hero-sub { margin-bottom: 16px; }
  .awami-hero .hero-visual { display: none; }
  .awami-hero .hero-card { max-width: 200px; height: auto; padding: 20px; }
  .awami-hero .hero-card-alt { display: none; }
  .awami-hero .hero-slide { position: relative; inset: auto; }
  .awami-hero .hero-slide img { max-width: 140px; max-height: 180px; }
  .awami-hero .hero-actions { flex-direction: column; width: 100%; }
  .awami-hero .hero-actions .btn { width: 100%; justify-content: center; }
  .awami-hero .hero-actions .btn-secondary { display: none; }
  .btn-label-desktop { display: none; }
  .btn-label-mobile { display: inline; }
  .hero-proof { justify-content: center; }
  .hero-benefits { display: none; }
  .hero-cats {
    display: block; margin-top: 24px; text-align: center;
    border-top: 1px solid var(--hairline); padding-top: 16px;
  }
  .hero-cats-title {
    display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--mute); margin-bottom: 12px; font-weight: 600;
  }
  .hero-cats-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .hero-cat-chip {
    display: inline-flex; align-items: center; padding: 8px 14px;
    border: 1px solid var(--hairline); border-radius: var(--r-full);
    background: var(--canvas); font-size: 13px; font-weight: 500; color: var(--ink);
    transition: background .15s ease, color .15s ease;
  }
  .hero-cat-chip:hover { background: var(--ink); color: var(--on-primary); }
  .mobile-cta-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--canvas); border-top: 1px solid var(--hairline);
  }
  .mobile-cta-btn { width: 100%; height: 52px; }
  body { padding-bottom: 72px; }
  .awami-trustbar { display: none; }
  .awami-page { padding: var(--sp-24) 0; }
  .awami-page-header { padding: var(--sp-24) 0 var(--sp-16); margin-bottom: var(--sp-24); }
  .awami-page-header h1 { font-size: 24px; }
  .awami-page-hero { padding: 40px 16px; }
  .awami-page-hero h1 { font-size: 26px; }
  .minimal-cards { grid-template-columns: 1fr; }
  .minimal-grid { padding: 32px 0; }
  .entry-content h2 { font-size: 20px; }
  .entry-content h3 { font-size: 17px; }
  .entry-content p, .entry-content li { font-size: 15px; }
  .section { padding: var(--sp-30) 0; }
  .awami-topbar .topbar-links { display: none; }
  .awami-topbar { height: 32px; font-size: 11px; }
  .awami-header { height: 56px; }
  .awami-header .awami-container { gap: 12px; }
  .site-logo img { height: 32px; }
  .header-actions .search-pill { display: none; }
  .category-grid, .trust-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid { gap: 10px; }
  .category-icon-card .cat-label { padding: 10px 12px; font-size: 13px; }
  .awami-page ul.products, .home ul.products { grid-template-columns: repeat(3, 1fr); }
  .home ul.products li.product:nth-child(n+10) { display: none; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: 1fr; }

  /* Shop mobile: drawer filters + 2-col grid */
  .awami-shop-layout { grid-template-columns: 1fr; gap: 0; }
  .awami-filter-toggle { display: inline-flex; }
  .awami-filter-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 86%; max-width: 340px; z-index: 2000;
    border-radius: 0; border: 0; overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .awami-filter-sidebar.open { transform: translateX(0); }
  .awami-filter-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
  .awami-filter-head strong { font-size: 16px; }
  .awami-filter-close { background: none; border: 0; font-size: 18px; color: var(--ink); cursor: pointer; line-height: 1; }
  .awami-filter-overlay {
    display: block; position: fixed; inset: 0; z-index: 1999; background: rgba(0,0,0,.4);
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
  }
  .awami-filter-overlay.open { opacity: 1; visibility: visible; }
  body.awami-filter-locked { overflow: hidden; }
  .awami-shop-content .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .awami-shop-toolbar { gap: 10px; }
}
@media (max-width: 359px) {
  .awami-hero .hero-card { max-width: 170px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}