/* ============================================================
   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-search-toggle {
  display: none;
  background: none; border: 0; color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 6px;
}
.header-search-toggle:hover { color: var(--herbal); }

/* Mobile search bar that slides down from the sticky header */
.mobile-search-bar {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
  padding: 12px 16px;
  z-index: 100;
}
.mobile-search-bar.open { display: block; }
.mobile-search-form { display: flex; align-items: center; gap: 8px; }
.mobile-search-form .mobile-search-icon { display: flex; align-items: center; color: var(--muted); flex-shrink: 0; }
.mobile-search-form input[type="search"] {
  flex: 1; min-width: 0; height: 44px; border: 1px solid var(--hairline);
  border-radius: var(--r-full); padding: 0 14px; font-size: 15px;
  background: var(--soft-cloud); color: var(--ink);
}
.mobile-search-form input[type="search"]:focus { outline: none; border-color: var(--herbal); background: var(--canvas); }
.mobile-search-form button {
  height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-full);
  background: var(--ink); color: var(--on-primary); font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.mobile-search-form button:hover { background: var(--charcoal, #2a2a2a); }
.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 .woocommerce-product-gallery {
  background: var(--soft-cloud);
  border-radius: var(--r-md);
  padding: 24px;
  align-self: start;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  display: flex; flex-direction: column; gap: 12px;
}
.woocommerce div.product .woocommerce-product-gallery__image {
  display: flex; justify-content: center; align-items: center; width: 100%;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  width: auto; height: auto; max-width: 100%; max-height: 440px; object-fit: contain;
  background: transparent !important; 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; }
.hero-bestsellers { display: none; }
/* Let the hero copy column shrink so the horizontal bestseller row scrolls
   within its own track instead of expanding the page (grid min-width:auto). */
.awami-hero .hero-inner > * { min-width: 0; }
.hero-bestsellers { max-width: 100%; }
.hero-bestsellers-track { max-width: 100%; width: 100%; }
.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; }
/* Floating circular trust badge: sits in the gap between the text column and
   the product cards, overlapping the card edge. Anchored to .hero-visual so it
   is hidden on mobile (where .hero-visual is display:none). */
.hero-visual { position: relative; }
.hero-trust-badge {
  position: absolute; top: 50%; left: 0; z-index: 5;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14), 0 0 0 4px rgba(255, 255, 255, .55);
  padding: 4px;
}
.hero-trust-ring {
  position: absolute; inset: 6px; border-radius: 50%;
  border: 2px solid var(--herbal);
  border-top-color: rgba(45, 106, 79, .25);
  animation: hero-trust-spin 14s linear infinite;
  pointer-events: none;
}
.hero-trust-items {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.hero-trust-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 6px;
  font-size: 12px; font-weight: 700; line-height: 1.2;
  color: var(--herbal-deep);
  opacity: 0; visibility: hidden;
  transform: translateY(5px);
  transition: opacity .55s ease, transform .55s ease;
}
.hero-trust-item.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.hero-trust-badge:hover .hero-trust-ring { animation-play-state: paused; }
@keyframes hero-trust-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-trust-ring { animation: none; }
  .hero-trust-item { transition: none; }
}

.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;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.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) {
  /* WhatsApp FAB sits at the bottom corner; the bot FAB stacks above it. */
  .wa-fab { right: 16px; bottom: 20px; width: 56px; height: 56px; }
  .bot-fab { right: 16px; bottom: 88px; width: 48px; height: 48px; }

  /* Both panels open in the top-right corner, just below the header, with a
     comfortable top margin so they never overlap the site header. */
 .wa-form {
    left: auto; right: 16px; bottom: auto; top: 90px; width: auto;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 180px); /* compact; fields scroll inside */
    display: flex; flex-direction: column;
    border-radius: 16px;
  }
  .wa-form-head { flex: 0 0 auto; }
  .wa-form-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
  .wa-submit { position: sticky; bottom: 0; }

  .bot-panel {
    left: auto; right: 16px; bottom: auto; top: 90px; width: auto;
    max-height: 78vh; max-width: calc(100vw - 32px);
    border-radius: 16px;
  }
  .bot-body { flex: 1 1 auto; min-height: 0; height: 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; }
  /* Floating hero trust badge only fills the side gap between the text column
     and the product cards, which exists on desktop (two-column) layout only. */
  .hero-trust-badge { display: none; }
  .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-bestsellers {
    display: block; margin-top: 20px;
  }
  .hero-bestsellers-title {
    display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--mute); margin-bottom: 10px; font-weight: 600; text-align: center;
  }
  .hero-bestsellers-track {
    display: flex; gap: 10px; overflow-x: auto;
    padding: 2px 0 6px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hero-bestsellers-track::-webkit-scrollbar { display: none; }
  .bestseller-card {
    flex: 0 0 104px; width: 104px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border: 1px solid var(--hairline-soft); border-radius: var(--r-md);
    background: var(--canvas); padding: 10px 8px;
    text-decoration: none; color: var(--ink);
  }
  .bestseller-card-img { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--soft-cloud); display: flex; align-items: center; justify-content: center; }
  .bestseller-card-img img { width: 100%; height: 100%; object-fit: contain; }
  .bestseller-card-name {
    display: block; width: 100%; margin-top: 8px;
    font-size: 12px; line-height: 1.2; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bestseller-card-price { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--herbal-deep); }
  .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; }
  .header-search-toggle { display: inline-flex; align-items: center; }
  .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(2, 1fr); }
  .home ul.products li.product:nth-child(n+9) { 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; }
  .woocommerce div.product .woocommerce-product-gallery { padding: 0; border-radius: var(--r-md); }
  .woocommerce div.product .woocommerce-product-gallery__wrapper { gap: 8px; }
  .woocommerce div.product .woocommerce-product-gallery__image {
    display: flex; justify-content: center; align-items: center;
    background: var(--soft-cloud);
  }
  .woocommerce div.product .woocommerce-product-gallery__image a {
    display: flex; justify-content: center; align-items: center;
    width: 100%; min-height: 260px;
  }
  .woocommerce div.product .woocommerce-product-gallery__image img {
    width: auto !important; height: auto !important;
    max-width: 100% !important; max-height: 280px !important;
    object-fit: contain; background: transparent !important;
  }

  /* Single product mobile: summary, add-to-cart, tabs, related */
  .woocommerce div.product { padding: var(--sp-24) 0 0; gap: 24px; }
  .woocommerce div.product .product_title { font-size: 24px; }
  .woocommerce div.product p.price { font-size: 22px; }
  .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; gap: 12px; }
  .woocommerce div.product form.cart .quantity { width: 100%; }
  .woocommerce div.product form.cart .quantity .qty { width: 100%; height: 50px; }
  .woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; height: 52px; font-size: 15px; }
  .woocommerce div.product form.cart .variations, 
  .woocommerce div.product form.cart .variations td { width: 100%; }
  .woocommerce div.product form.cart .variations .value select { width: 100%; height: 48px; }
  .woocommerce div.product .woocommerce-product-details__short-description p { font-size: 15px; }
  .woocommerce-tabs { padding-top: var(--sp-30); }
  .woocommerce-tabs ul.tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; margin-bottom: 16px; }
  .woocommerce-tabs ul.tabs li { flex-shrink: 0; margin-right: 20px; }
  .related.products { padding-top: var(--sp-30); }
  .related.products .related-head { flex-wrap: wrap; gap: 10px; }
  .related.products ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .awami-product-wrap { padding: var(--sp-24) 0 0; }
}
@media (max-width: 359px) {
  .awami-hero .hero-card { max-width: 170px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   STICKY ADD-TO-CART BAR (single product)
   ============================================================ */
.awami-sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .25s ease;
}
.awami-sticky-atc.show { transform: translateY(0); }
.sticky-atc-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sticky-atc-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sticky-atc-thumb { width: 48px; height: 48px; flex-shrink: 0; background: var(--soft-cloud); border-radius: 6px; overflow: hidden; }
.sticky-atc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sticky-atc-meta { display: flex; flex-direction: column; min-width: 0; }
.sticky-atc-name { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc-price { font-size: 14px; font-weight: 500; color: var(--ink); }
.sticky-atc-price del { color: var(--mute); }
.sticky-atc-price ins { color: var(--sale); text-decoration: none; }
.sticky-atc-actions { display: flex; align-items: center; flex-shrink: 0; }
.sticky-atc-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.sticky-atc-qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--r-full); overflow: hidden; background: var(--canvas); }
.sticky-qty-btn { background: none; border: 0; width: 34px; height: 40px; font-size: 18px; cursor: pointer; color: var(--ink); line-height: 1; padding: 0; }
.sticky-qty-btn:hover { background: var(--soft-cloud); }
.sticky-atc-qty .qty { width: 40px; height: 40px; border: 0; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); text-align: center; font-size: 15px; padding: 0; background: var(--canvas); }
.sticky-atc-submit, .sticky-atc-choose {
  background: var(--ink); color: var(--on-primary); border-radius: var(--r-full);
  padding: 0 22px; height: 42px; font-size: 14px; font-weight: 500; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  white-space: nowrap;
}
.sticky-atc-submit:hover, .sticky-atc-choose:hover { background: var(--charcoal, #2a2a2a); color: var(--on-primary); }
.sticky-atc-submit.added::after { display: none; }

/* ============================================================
   RELATED PRODUCTS (AOV) — header + view-all
   ============================================================ */
.related.products .related-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.related.products .related-head h2 { margin: 0; }
.related-view-all {
  font-size: 13px; font-weight: 500; color: var(--herbal);
  white-space: nowrap; text-transform: uppercase; letter-spacing: .04em;
}
.related-view-all:hover { color: var(--herbal-deep); text-decoration: underline; }

/* Compact sticky bar on small screens */
@media (max-width: 599px) {
  .sticky-atc-thumb { width: 40px; height: 40px; }
  .sticky-atc-name { font-size: 13px; max-width: 38vw; }
  .sticky-atc-price { font-size: 13px; }
  .sticky-atc-form { gap: 6px; }
  .sticky-atc-submit, .sticky-atc-choose { padding: 0 16px; height: 40px; font-size: 13px; }
  .sticky-qty-btn { width: 30px; height: 38px; }
  .sticky-atc-qty .qty { width: 36px; height: 38px; }
}

/* ============================================================
   CART & CHECKOUT — mobile-first rebuild
   ============================================================ */
:root { --awami-tap: 44px; }

/* ---- Add-to-cart toast ---- */
.awami-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px);
  background: var(--herbal-deep); color: var(--on-primary);
  padding: 12px 20px; border-radius: var(--r-full); font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 24px rgba(0,0,0,.22); z-index: 4000;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s;
  max-width: calc(100vw - 32px); text-align: center;
}
.awami-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ---- Free delivery progress ---- */
.awami-free-delivery, .mini-freedel { margin-bottom: 12px; }
.freedel-track { height: 8px; border-radius: var(--r-full); background: var(--hairline-soft); overflow: hidden; }
.freedel-fill { height: 100%; background: linear-gradient(90deg, var(--herbal), var(--success-bright)); border-radius: var(--r-full); transition: width .4s ease; }
.freedel-msg { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--herbal-deep); }

/* ---- Mini-cart slide-out drawer ---- */
.awami-mini-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 3000; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.awami-mini-cart-overlay.open { opacity: 1; visibility: visible; }
.awami-mini-cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 3100;
  width: min(400px, 100vw); max-width: 100%;
  background: var(--canvas); border-left: 1px solid var(--hairline-soft);
  box-shadow: -12px 0 40px rgba(0,0,0,.16);
  transform: translateX(105%); transition: transform .32s ease;
  display: flex; flex-direction: column;
}
.awami-mini-cart.open { transform: translateX(0); }
body.mini-cart-open { overflow: hidden; }
.mini-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--hairline-soft); }
.mini-cart-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.mini-cart-count-label { color: var(--herbal); }
.mini-cart-close { background: none; border: 0; font-size: 20px; color: var(--ink); width: 44px; height: 44px; cursor: pointer; }
.mini-cart-body { overflow-y: auto; padding: 12px 18px; flex: 1 1 auto; }
.mini-cart-item { display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb info total"; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); align-items: start; }
.mini-cart-thumb { grid-area: thumb; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--soft-cloud); }
.mini-cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mini-cart-info { grid-area: info; min-width: 0; }
.mini-cart-name { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 3px; }
.mini-cart-price { font-size: 13px; color: var(--mute); display: block; margin-bottom: 8px; }
.mini-cart-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini-qty-btn { width: 44px; height: 44px; min-width: 44px; border: 1px solid var(--hairline); background: var(--canvas); color: var(--ink); font-size: 18px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mini-cart-controls .mini-qty { width: 46px; height: 44px; border: 1px solid var(--hairline); border-radius: 10px; text-align: center; font-size: 15px; padding: 0; background: var(--canvas); }
.mini-remove { background: none; border: 0; color: var(--sale); font-size: 13px; font-weight: 500; padding: 8px 4px; min-height: 44px; cursor: pointer; }
.mini-cart-line-total { grid-area: total; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.mini-cart-empty { text-align: center; color: var(--mute); font-size: 15px; margin: 24px 0 12px; }
.mini-cart-shop-btn { display: block; margin: 0 auto; }
.mini-cart-foot { border-top: 1px solid var(--hairline-soft); padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--canvas); }
.mini-cart-totals { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.mini-cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-cart-actions .button { margin: 0; display: flex; align-items: center; justify-content: center; height: 48px; font-size: 15px; border-radius: var(--r-full); text-decoration: none; font-weight: 600; white-space: normal; }
.mini-view-cart { background: var(--canvas); color: var(--ink); border: 2px solid var(--ink); box-sizing: border-box; }
.mini-view-cart:hover { background: var(--soft-cloud); }
.mini-checkout { background: var(--ink); color: var(--on-primary); border: 2px solid var(--ink); box-sizing: border-box; }
.mini-checkout:hover { background: var(--charcoal); color: var(--on-primary); }

/* ---- Cart page layout (mobile-first cards) ---- */
.cart-layout { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.cart-lines { min-width: 0; width: 100%; }
.awami-cart-items { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.cart-item-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "thumb info"
    "thumb info"
    "qty subtotal";
  gap: 10px 14px; padding: 14px; background: var(--canvas);
  border: 1px solid var(--hairline-soft); border-radius: 14px;
  min-width: 0;
}
.cart-item-thumb { grid-area: thumb; min-width: 0; }
.cart-item-thumb img { width: 100%; height: auto; border-radius: 10px; background: var(--soft-cloud); object-fit: contain; display: block; }
.cart-item-info { grid-area: info; min-width: 0; }
.cart-item-name {
  font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3;
  overflow-wrap: break-word; word-break: normal; hyphens: auto;
  white-space: normal;
  min-width: 0;
}
.cart-item-unit-price { display: block; margin-top: 6px; font-size: 13px; color: var(--mute); }
.cart-item-info .remove { display: inline-flex; align-items: center; gap: 4px; color: var(--sale); font-size: 13px; font-weight: 500; margin-top: 10px; min-height: 38px; padding: 8px 4px; text-decoration: none; white-space: normal; min-width: 0; }
.cart-item-qty { grid-area: qty; min-width: 0; }
.cart-page-qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--r-full); overflow: hidden; background: var(--canvas); }
.cart-qty-btn { background: none; border: 0; width: 44px; height: 44px; font-size: 20px; color: var(--ink); cursor: pointer; line-height: 1; flex-shrink: 0; }
.cart-qty-btn:hover { background: var(--soft-cloud); }
.cart-page-qty .qty { width: 52px; height: 44px; border: 0; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); text-align: center; font-size: 16px; padding: 0; background: var(--canvas); -moz-appearance: textfield; min-width: 0; }
.cart-page-qty .qty::-webkit-outer-spin-button, .cart-page-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item-subtotal { grid-area: subtotal; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 0; }
.cart-item-subtotal-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); white-space: nowrap; }
.cart-item-subtotal-amount { font-size: 17px; font-weight: 700; color: var(--herbal-deep); white-space: nowrap; }
.cart-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cart-actions .coupon { display: flex; gap: 8px; width: 100%; min-width: 0; }
.cart-actions .coupon .input-text { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: var(--r-full); font-size: 15px; }
.cart-actions .button { height: 48px; padding: 0 24px; white-space: normal; background: var(--ink); color: var(--on-primary); border: 0; border-radius: var(--r-full); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; }
.cart-actions .button:hover { background: var(--charcoal); color: var(--on-primary); }
.cart-collaterals { min-width: 0; }
.cart-collaterals .cart_totals { border: 1px solid var(--hairline-soft); border-radius: 14px; padding: 16px; background: var(--canvas); }
.cart-collaterals .cart_totals h2 { font-size: 18px; margin: 0 0 12px; }

/* Totals table: fixed layout prevents label/value overlap & clipping. */
.cart-collaterals .cart_totals .shop_table {
  width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0;
}
/* ---- Root fix: prevent character-level wrapping in Cart/Checkout ---- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-cart .shop_table,
.woocommerce-checkout .shop_table,
.cart-collaterals .cart_totals .shop_table th,
.cart-collaterals .cart_totals .shop_table td {
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
}

/* Force short labels to never wrap mid-word */
.cart-collaterals .cart_totals .shop_table th,
.cart-item-info .remove {
  white-space: nowrap;
}

/* Fix table cell alignment/clipping */
.cart-collaterals .cart_totals .shop_table th { width: 55%; text-align: left; padding: 12px 12px 12px 0; color: var(--ink); font-weight: 600; vertical-align: top; }
.cart-collaterals .cart_totals .shop_table td { width: 45%; text-align: right; padding: 12px 0 12px 12px; vertical-align: top; }
.cart-collaterals .cart_totals .shop_table tr { border-bottom: 1px solid var(--hairline-soft); }
.cart-collaterals .cart_totals .shop_table tr:last-child { border-bottom: 0; }
.cart-collaterals .cart_totals .shop_table .order-total td, .cart-collaterals .cart_totals .shop_table .order-total th { font-size: 17px; font-weight: 700; border-top: 1px solid var(--hairline); }
.cart-collaterals .cart_totals .shop_table .cart-subtotal th,
.cart-collaterals .cart_totals .shop_table .cart-subtotal td { text-transform: uppercase; letter-spacing: .03em; font-size: 13px; color: var(--mute); }

/* Style the "Change address" shipping-calculator toggle as a real link. */
.cart-collaterals .cart_totals .shipping .woocommerce-shipping-destination { font-size: 13px; color: var(--charcoal); margin: 0; }
.cart-collaterals .cart_totals .shipping .shipping-calculator-button,
.woocommerce .shipping-calculator-button { color: var(--herbal); font-weight: 500; text-decoration: underline; font-size: 13px; }
.cart-collaterals .cart_totals .shipping .shipping-calculator-button:hover,
.woocommerce .shipping-calculator-button:hover { color: var(--herbal-deep); }

/* Neutralise WC responsive table labels that cause overlap on the cart page. */
.cart-collaterals .cart_totals .shop_table td::before,
.cart-collaterals .cart_totals .shop_table_responsive td::before { display: none !important; }

.cart-collaterals .checkout-button,
.woocommerce .checkout-button,
.woocommerce a.checkout-button {
  width: 100%; height: 52px; font-size: 16px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: normal; box-sizing: border-box;
}
.woocommerce .checkout-button.wc-forward::after,
.woocommerce a.checkout-button.wc-forward::after { content: "" !important; margin: 0; }
.cart-collaterals .wc-proceed-to-checkout { padding: 16px 0 0; margin: 0; min-width: 0; }
.cart-collaterals .wc-proceed-to-checkout .button { margin: 0; width: 100%; white-space: normal; box-sizing: border-box; min-width: 0; }
.cart-trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cart-trust-badge { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--herbal-deep); background: var(--herbal-soft); border-radius: 10px; padding: 10px 4px; text-align: center; }

/* ---- Cart upsell + empty state ---- */
.awami-cart-upsell, .awami-empty-cart-recs { margin-top: 32px; }
.awami-cart-upsell-title, .awami-empty-cart-recs-title { font-size: 20px; margin: 0 0 16px; }
.awami-cart-upsell-track, .awami-empty-cart-recs-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.awami-cart-upsell-item, .awami-empty-cart-rec { flex: 0 0 120px; scroll-snap-align: start; text-align: center; }
.awami-cart-upsell-img, .awami-empty-cart-rec-img { display: block; width: 120px; height: 120px; border-radius: 12px; overflow: hidden; background: var(--soft-cloud); margin: 0 auto 8px; }
.awami-cart-upsell-img img, .awami-empty-cart-rec-img img { width: 100%; height: 100%; object-fit: contain; }
.awami-cart-upsell-name, .awami-empty-cart-rec-name { display: block; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; min-height: 32px; }
.awami-cart-upsell-price, .awami-empty-cart-rec-price { display: block; font-size: 13px; font-weight: 700; color: var(--herbal-deep); margin: 4px 0 8px; }
.awami-cart-upsell-add { display: block; margin: 0 auto; min-height: 40px; font-size: 13px; }
.awami-empty-cart { text-align: center; padding: 32px 0; }
.awami-empty-cart-icon { display: block; font-size: 56px; margin-bottom: 12px; }
.awami-empty-cart-title { font-size: 24px; margin: 0 0 8px; }
.awami-empty-cart-sub { color: var(--mute); max-width: 360px; margin: 0 auto 24px; font-size: 15px; line-height: 1.5; }
.awami-empty-cart-btn { height: 52px; font-size: 16px; padding: 0 28px; }

/* ---- Order confirmation ---- */
.woocommerce-order { max-width: 640px; }
.woocommerce-order .woocommerce-order-overview { padding: 0; list-style: none; }
.woocommerce-order .woocommerce-order-overview li { padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); }
.woocommerce-order .woocommerce-order-overview li strong { display: block; font-size: 16px; color: var(--ink); }
.awami-order-confirm { margin-top: 24px; padding: 18px; background: var(--herbal-soft); border-radius: 14px; }
.awami-order-estimate { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.awami-order-estimate-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--herbal-deep); font-weight: 700; }
.awami-order-estimate-value { font-size: 15px; color: var(--ink); font-weight: 500; }
.awami-order-wa { display: block; text-align: center; background: #25D366; color: #fff; border: 0; border-radius: var(--r-full); padding: 14px; font-size: 16px; font-weight: 600; text-decoration: none; }
.awami-order-wa:hover { background: #1ebe5b; color: #fff; }

/* ============================================================
   DESKTOP (>= 1024px) overrides
   ============================================================ */
@media (min-width: 1024px) {
  .cart-layout { flex-direction: row; align-items: flex-start; }
  .cart-lines { flex: 1 1 auto; }
  .cart-collaterals { flex: 0 0 360px; }
  .cart-item-row {
    grid-template-columns: 96px minmax(0, 1fr) auto auto;
    grid-template-areas: "thumb info qty subtotal";
    align-items: center; gap: 16px;
  }
  .cart-item-name { overflow-wrap: break-word; }
  .cart-item-subtotal { align-items: flex-end; }
  .cart-actions .coupon { width: auto; flex: 1 1 auto; }
  .cart-actions .button { flex-shrink: 0; }
.cart-trust-badges { grid-template-columns: 1fr; }
  .cart-trust-badge { justify-content: flex-start; font-size: 12px; }
}

/* ---- Header cart touch target (mobile) ---- */
@media (max-width: 1023px) {
  .header-cart { min-width: 44px; min-height: 44px; justify-content: center; padding: 8px; }
}

/* ============================================================
   AOV ENGINE — upsell cards, post-add modal, in-cart recs,
   tiered milestone nudge, checkout trust badges.
   ============================================================ */
.awami-upsell-grid { display: flex; flex-direction: column; gap: 8px; }

.awami-upsell-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--canvas);
}
.awami-upsell-thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--soft-cloud); }
.awami-upsell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.awami-upsell-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.awami-upsell-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.awami-upsell-price { font-size: 13px; font-weight: 700; color: var(--herbal); }
.awami-upsell-add {
  flex-shrink: 0; padding: 8px 14px; border: 0; border-radius: 8px;
  background: var(--herbal); color: var(--on-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity .15s ease;
}
.awami-upsell-add:hover { opacity: .85; }
.awami-upsell-add.is-added { background: var(--soft-cloud); color: var(--herbal); cursor: default; }
.awami-upsell-add:disabled { opacity: .6; cursor: not-allowed; }

/* In-cart recommendations (mini-cart body) */
.awami-in-cart-recs { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.awami-in-cart-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #777); margin-bottom: 8px; }

/* Free shipping milestone tier nudge */
.freedel-tier { margin: 6px 0 0; font-size: 12px; color: var(--herbal); font-weight: 600; }

/* Post-add-to-cart upsell modal */
.awami-upsell-overlay {
  position: fixed; inset: 0; z-index: 1400; background: rgba(17,17,17,.5);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.awami-upsell-overlay.open { opacity: 1; visibility: visible; }

.awami-upsell-modal {
  position: fixed; z-index: 1500; right: 20px; top: 50%;
  width: 380px; max-width: calc(100vw - 32px);
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(17,17,17,.25);
  opacity: 0; visibility: hidden; transform: translateY(16px) translateY(-50%);
  transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
  overflow: hidden;
}
.awami-upsell-modal.open { opacity: 1; visibility: visible; transform: translateY(0) translateY(-50%); }
.awami-upsell-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--on-primary); padding: 16px;
}
.awami-upsell-eyebrow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.awami-upsell-title { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.awami-upsell-close { background: none; border: 0; color: var(--on-primary); font-size: 18px; cursor: pointer; line-height: 1; }
.awami-upsell-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.awami-upsell-foot {
  display: flex; gap: 10px; padding: 14px 16px;
  border-top: 1px solid var(--hairline); background: var(--soft-cloud);
}
.awami-upsell-foot .button { flex: 1; text-align: center; margin: 0; }
.awami-upsell-checkout { background: var(--ink) !important; border-color: var(--ink) !important; }

@media (max-width: 599px) {
  .awami-upsell-modal { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 80vh; transform: none; }
  .awami-upsell-modal.open { transform: translateY(0); }
  .awami-upsell-body { max-height: 48vh; overflow-y: auto; }
}

/* Checkout security / trust badges */
.awami-checkout-trust {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline);
}
.awami-trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted, #666);
  background: var(--soft-cloud); border-radius: 20px; padding: 6px 12px;
}
.awami-trust-icon { font-size: 13px; }
@supports (display: flex) {
  .awami-checkout-trust { justify-content: center; }
}
@media (max-width: 599px) {
  .awami-checkout-trust { justify-content: center; }
}

/* ============================================================
   CART & CHECKOUT — unified polish (single source of truth)
   One CTA color (ink), one radius (pill), one height (48px),
   thin low-contrast dividers, no mid-word wrapping, no overflow,
   44px+ touch targets.
   ============================================================ */

/* --- Wrapping: words wrap, characters never split mid-word --- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  overflow-x: clip;
}
.woocommerce-cart .shop_table th,
.woocommerce-cart .shop_table td,
.woocommerce-cart .cart-item-name,
.woocommerce-cart .cart-item-unit-price,
.woocommerce-cart .awami-cart-upsell-name,
.woocommerce-cart .awami-empty-cart-rec-name,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td,
.woocommerce-checkout .product-name,
.woocommerce-checkout .awami-upsell-name {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* Short labels stay on one line (never mid-word wrapped) */
.woocommerce-cart .cart_totals .shop_table th,
.woocommerce-cart .cart-item-subtotal-label,
.woocommerce-cart .cart-item-unit-price,
.woocommerce-cart .cart-actions .button,
.woocommerce-cart .coupon .button,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout .order-summary-toggle-label,
.woocommerce-checkout .order-summary-toggle-total,
.woocommerce-checkout .woocommerce-order-overview li,
.mini-cart-totals > span:first-child,
.mini-cart-count-label {
  white-space: nowrap;
}

/* --- One CTA style everywhere (mini-cart / cart / checkout) --- */
.mini-cart-actions .button,
.mini-cart-shop-btn,
.woocommerce-cart .cart-actions button.button,
.woocommerce-cart .cart-actions input.button,
.woocommerce-cart .coupon button.button,
.woocommerce .checkout-button,
.woocommerce a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-checkout .checkout_coupon .button,
.awami-upsell-add,
.awami-cart-upsell-add,
.awami-empty-cart-btn,
.awami-upsell-foot .button {
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-full);
  border: 0;
  background: var(--ink);
  color: var(--on-primary);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.mini-cart-actions .button:hover,
.mini-cart-shop-btn:hover,
.woocommerce-cart .cart-actions button.button:hover,
.woocommerce-cart .cart-actions input.button:hover,
.woocommerce .checkout-button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .checkout_coupon .button:hover,
.awami-upsell-add:hover,
.awami-cart-upsell-add:hover,
.awami-empty-cart-btn:hover {
  background: var(--charcoal);
  color: var(--on-primary);
}

/* Secondary action: same pill, outline treatment */
.mini-cart-actions .mini-view-cart,
.awami-upsell-foot .awami-upsell-view-cart {
  background: var(--canvas);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.mini-cart-actions .mini-view-cart:hover,
.awami-upsell-foot .awami-upsell-view-cart:hover {
  background: var(--soft-cloud);
  color: var(--ink);
}

/* ============================================================
   BUTTON TEXT ALIGNMENT — force flex-centering on 48px pills.
   WC's `.woocommerce a.button` (0,2,1) beats our 0,2,0 rules and
   forces `display: block` + uneven padding, so the label sits a
   few px off-center. Equal specificity + later source order wins.
   ============================================================ */
.mini-cart-actions a.button,
.awami-upsell-foot a.button,
.mini-cart-actions a.mini-view-cart,
.mini-cart-actions a.mini-checkout,
.awami-upsell-foot a.awami-upsell-view-cart,
.awami-upsell-foot a.awami-upsell-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  margin: 0;
  height: 48px;
  min-height: 48px;
  line-height: 1;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

/* --- Cart items: hairline dividers, no heavy boxes --- */
.awami-cart-items { gap: 0; }
.cart-item-row {
  border: 0;
  border-radius: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.cart-item-row:last-child { border-bottom: 0; }
.cart-item-name { hyphens: manual; }

/* --- Cart totals: no box, clean label/value rows --- */
.cart-collaterals .cart_totals {
  border: 0;
  border-radius: 0;
  padding: 0;
}
.cart-collaterals .cart_totals h2 { margin: 0 0 4px; }
.cart-collaterals .cart_totals .shop_table .cart-subtotal td,
.cart-collaterals .cart_totals .shop_table .cart-discount td,
.cart-collaterals .cart_totals .shop_table .fee td,
.cart-collaterals .cart_totals .shop_table .tax-total td,
.cart-collaterals .cart_totals .shop_table .order-total td { white-space: nowrap; }
.cart-collaterals .wc-proceed-to-checkout { padding: 16px 0 0; }

/* --- Trust badges: icon + text, no bulky colored boxes --- */
.cart-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-soft);
}
.cart-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
  text-align: left;
  white-space: nowrap;
}
.cart-trust-badge::before {
  content: "\2713";
  color: var(--herbal);
  font-weight: 700;
  font-size: 13px;
}
.awami-checkout-trust {
  justify-content: flex-start;
  gap: 10px 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
}
.awami-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  color: var(--mute);
  white-space: nowrap;
}
.awami-trust-icon { color: var(--herbal); font-size: 13px; }

/* --- Touch targets: everything interactive >= 44px --- */
.cart-item-info .remove { min-height: 44px; }
.awami-upsell-add { min-height: 44px; }
.awami-cart-upsell-add { min-height: 44px; }
.awami-upsell-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Upsell cards: hairline dividers, no boxes --- */
.awami-upsell-grid { gap: 10px; }
.awami-upsell-card {
  border: 0;
  border-radius: 0;
  padding: 10px 0;
  background: none;
}
.awami-upsell-card + .awami-upsell-card { border-top: 1px solid var(--hairline-soft); }

/* --- Grid/flex children must shrink, never push the page wider --- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review { min-width: 0; }
.woocommerce-checkout form.woocommerce-checkout,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set > div { min-width: 0; }

/* --- Cart page: use the full site container, not the 820px content cap --- */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content { max-width: var(--container); }

/* --- Cart totals: neutralize WC's float so totals fill the column --- */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.cart-collaterals .cart_totals { float: none; width: 100%; }

/* --- Cart qty stepper: keep 44px buttons (global button padding inflates them) --- */
.cart-item-qty .cart-qty-btn { padding: 0; }

/* --- Cart remove link: size to its text, keep a 44px-tall target --- */
.cart-item-info .remove { width: auto; }

/* --- Cart remove link (beat .woocommerce-js a.remove 20px box) --- */
.woocommerce-js .cart-item-info a.remove,
.cart-item-info a.remove {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

/* --- Mobile cart item: qty stepper gets its own row (no bleed) --- */
@media (max-width: 1023px) {
  .cart-item-row {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "thumb info"
      "thumb info"
      "qty qty"
      "subtotal subtotal";
  }
}

/* ============================================================
   FINAL POLISH — beat Astra (0,3,0) & WC (0,3,1) leftovers
   ============================================================ */

/* Totals box: strip Astra's gray header band + box back to the
   neutral card the rest of the cart already uses.  (Astra ships
   `.woocommerce-cart .cart-collaterals .cart_totals` at 0,3,0, so
   scope `.woocommerce-cart` on our side to reach parity and win.) */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: 16px;
  background: var(--canvas);
  margin-bottom: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals > h2 {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals .shop_table {
  border: 0;
  margin: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr td,
.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr th {
  border-top: 1px solid var(--hairline-soft);
}
.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr:first-child td,
.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr:first-child th {
  border-top: 0;
}

/* Cart "Remove" link — sleek modern control: small ✕ + 13px muted
   text, left-aligned in the info column, 44px-tall touch target.
   (WC ships `.woocommerce-js a.remove` styling the ✕ glyph.) */
.woocommerce-js .cart-item-info a.remove,
.woocommerce-page .cart-item-info a.remove,
.cart-item-info a.remove {
  color: var(--mute);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px 0 6px;
  border-radius: 10px;
  background: none;
  text-decoration: none;
}
.woocommerce-js .cart-item-info a.remove:hover,
.woocommerce-page .cart-item-info a.remove:hover,
.cart-item-info a.remove:hover {
  color: var(--sale);
  background: none;
}
/* Keep the ✕ (part of the template text node) crisp & subtle */
.woocommerce-js .cart-item-info a.remove {
  text-indent: 0;
  opacity: 1;
}

/* "Proceed to Checkout" — kill WC's residual 17.6px font/padding/
   margin so the pill sits flush against the totals card padding.
   (WC ships `#add_payment_method ... a.checkout-button` at 0,3,1 and
   `margin: 0 0 17.6px` on the anchor.) */
.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce-page .wc-proceed-to-checkout,
.cart-collaterals .wc-proceed-to-checkout {
  padding: 12px 0 0;
  margin: 0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .button,
.woocommerce-page .wc-proceed-to-checkout .button,
.cart-collaterals .wc-proceed-to-checkout .button {
  margin: 0;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--r-full);
  border: 0;
  background: var(--ink);
  color: var(--on-primary);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout .button:hover,
.cart-collaterals .wc-proceed-to-checkout .button:hover {
  background: var(--charcoal);
  color: var(--on-primary);
}

/* ============================================================
   CART RECEIPT ROWS + CHECKOUT 2-COLUMN SIDEBAR (final pass)
   ============================================================ */

/* --- Cart: name + line total on one row, unit price beneath --- */
.cart-item-name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.cart-item-name-row .cart-item-name { flex: 1 1 auto; min-width: 0; }
.cart-item-line-total {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* --- Cart: stepper + trash icon share one row --- */
.cart-item-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.cart-item-qty a.remove,
.woocommerce-cart .cart-item-qty a.remove,
.woocommerce-cart .cart-item-qty .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--mute);
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}
.cart-item-qty .remove:hover { color: var(--sale); background: var(--soft-cloud); }
.cart-item-qty .cart-remove-icon { display: block; flex-shrink: 0; }

/* --- Cart row grid: no more subtotal cell --- */
.cart-item-row {
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "thumb info"
    "thumb info"
    "qty qty";
}

@media (min-width: 1024px) {
  .cart-item-row {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-areas: "thumb info qty";
    align-items: center;
    gap: 16px;
  }
}

/* ============================================================
   MOBILE STICKY "PROCEED TO CHECKOUT" BAR (cart page only)
   The button floats at the bottom while the real in-flow button
   is below the fold; once the user scrolls down to it, the class
   is removed and it returns to its normal inline position.
   Desktop unaffected (class only ever toggles below 1024px).
   ============================================================ */
@media (max-width: 1023px) {
  body.woocommerce-cart.awami-cart-atc-sticky { padding-bottom: 86px; }
  .awami-cart-atc-sticky .wc-proceed-to-checkout {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500;
    margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: var(--canvas); border-top: 1px solid var(--hairline);
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);
}
}
/* Only the Place Order bar may float — stop the WooCommerce Blocks
   order-summary sidebar from gluing itself to the viewport too. */
body.woocommerce-checkout .wc-block-checkout__sidebar.is-sticky {
  position: static !important;
  top: auto !important;
}

/* ============================================================
   HEADER LIVE SEARCH — AJAX product suggestions dropdown
   Anchored to both the desktop pill and the mobile search bar;
   matches the design system (canvas / soft-cloud / hairline).
   ============================================================ */
.search-pill,
.mobile-search-form { position: relative; }

.awami-live-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  z-index: 170;
  overflow: hidden;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.desktop-live-results { top: calc(100% + 8px); }

.awami-live-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--hairline-soft);
  text-decoration: none; color: var(--ink);
}
.awami-live-item:first-child { border-top: 0; }
.awami-live-item:hover { background: var(--soft-cloud); }

.awami-live-thumb {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 8px; object-fit: cover;
  background: var(--soft-cloud);
}

.awami-live-meta { flex: 1; min-width: 0; }
.awami-live-name {
  display: block; font-size: 14px; font-weight: 500; line-height: 1.25;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.awami-live-price {
  display: block; margin-top: 3px;
  font-size: 13px; font-weight: 600; color: var(--herbal);
}
.awami-live-price del { color: var(--mute); font-weight: 500; }
.awami-live-price ins { text-decoration: none; }

/* Condition tag on symptom-matched results ("For Digestion", …). */
.awami-live-tag {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--herbal);
  margin-bottom: 2px;
}

.awami-live-status {
  padding: 14px 12px; text-align: center;
  font-size: 13px; color: var(--mute);
}
.awami-live-loading { padding: 14px 12px; text-align: center; font-size: 13px; color: var(--mute); }

.awami-live-footer {
  display: block; padding: 11px 12px; text-align: center;
  border-top: 1px solid var(--hairline-soft);
  background: var(--soft-cloud);
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: none;
}
.awami-live-footer:hover { background: var(--hairline-soft); }

/* Desktop pill is only 240px wide — widen the panel a touch and hold
   its right edge so the card reads cleanly next to the cart icon. */
.desktop-live-results { left: auto; right: -12px; min-width: 360px; }

/* Mobile: the panel spans the whole bar, flush under the input. */
.mobile-search-form .awami-live-results { right: 0; left: 0; }

/* ============================================================
   TRUST BAR (GoNatural certification strip) — site-wide
   Full-width curves back to the container's natural aspect ratio
   (2837×292). height:auto preserves every badge, never cropping.
   ============================================================ */
.awami-trust-bar {
  display: block;
  width: 100%;
  margin: 28px 0;
  line-height: 0;
}
.awami-trust-bar img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

/* Constrain the strip on large screens so it reads as a tidy band
   and stays inside the content measure. */
.awami-container .awami-trust-bar,
.wc-block-checkout .awami-trust-bar {
  margin-left: auto;
  margin-right: auto;
}

/* Make Phone/Contact number appear before Email in WooCommerce Checkout Contact block */
.wp-block-woocommerce-checkout-contact-information-block,
.wc-block-checkout__contact-fields {
  display: flex !important;
  flex-direction: column !important;
}

.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input:has(input[id*="phone"]),
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input:has(input[name*="phone"]),
.wc-block-checkout__contact-fields .wc-block-components-text-input:has(input[id*="phone"]),
.wc-block-checkout__contact-fields .wc-block-components-text-input:has(input[name*="phone"]),
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input:nth-child(2),
.wc-block-checkout__contact-fields .wc-block-components-text-input:nth-child(2) {
  order: -1 !important;
}