/* ==========================================================================
   HERB & MORE — SOFT EDITORIAL POLISH LAYER (loaded last)
   Client reference: pure white canvas, soft rounded corners, airy spacing.
   Overrides legacy "zero radius / cream surface" rules across all pages.
   ========================================================================== */

:root {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --surface-soft: #F8F8F7;
  --shadow-soft: 0 10px 30px rgba(20, 21, 24, 0.06);
}

/* --------------------------------------------------------------------------
   1. WHITE SURFACES — replace cream (#FAF7F2 / #F3F1EC) with white / soft grey
   -------------------------------------------------------------------------- */
.plp-section-tint,
.quality-certificates-section,
.quality-facility-section,
.business-clients-section,
.business-process-section,
.business-sectors-section {
  background-color: #FFFFFF !important;
}

.quality-motto-callout,
.quality-metric-card,
.business-hero-motto-box,
.business-metric-item,
.client-product-card,
.capability-card,
.packaging-col-card,
.nda-callout-card,
.legal-card,
.recipe-detail-metrics-grid,
.sidebar-product-card,
.recipe-product-showcase-card,
.recipe-used-product-badge,
.recipes-search-input,
.pillar-img-wrap,
.recipe-media-wrap,
.recipe-detail-media-wrap,
.journal-media-side,
.cert-card-preview-wrap,
.cert-btn-download,
.curated-badge {
  background-color: var(--surface-soft) !important;
}

.cat-showcase-card,
.prod-img-box {
  background-color: var(--surface-soft) !important;
}
.cat-showcase-card:hover,
.cat-showcase-card.is-active,
.catalog-product-card:hover .prod-img-box,
.home-pillar-card:hover,
.plp-cat:hover {
  background-color: #F2F2F0 !important;
}

/* --------------------------------------------------------------------------
   2. SOFT ROUNDED CORNERS
   -------------------------------------------------------------------------- */

/* Large cards & media */
.cat-showcase-card,
.prod-img-box,
.home-pillar-card,
.curated-img-wrap,
.plp-cat,
.plp-hero-media img,
.plp-client-shot,
.pdp-stage,
.pdp-rel-img,
.cert-card,
.facility-card,
.protocol-pillar-card,
.quality-charter-card,
.quality-cta-box,
.quality-motto-callout,
.client-brand-block,
.process-step-card,
.packaging-col-card,
.capability-card,
.statement-banner-card,
.nda-callout-card,
.business-form-card,
.recipe-media-wrap,
.recipe-detail-media-wrap,
.recipe-product-showcase-card,
.recipe-wholesale-cta-card,
.journal-media-side,
.story-video-card,
.story-page-canvas .pillar-img-wrap,
.story-page-canvas .story-video-card,
.insta-card,
.insta-media-box,
.footer-catalogue-section .catalogue-direct-box,
.legal-card,
.legal-grid,
.cookie-modal-dialog {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

/* Medium */
.quality-metric-card,
.business-metric-item,
.business-hero-motto-box,
.client-product-card,
.sidebar-product-card,
.recipe-detail-metrics-grid,
.cert-card-preview-wrap,
.facility-card-media,
.insta-img,
.pdp-specs,
.plp-faq-item,
.mega-menu-card {
  border-radius: var(--radius-md) !important;
}

/* Small badges / tags / inputs */
.prod-tag,
.curated-badge,
.recipe-pillar-tag,
.showcase-pillar-tag,
.recipe-used-product-badge,
.cert-status-badge,
.facility-card-tag,
.client-brand-tag,
.capability-icon-wrap,
.packaging-col-icon,
.cert-zoom-btn-badge,
.legal-section h2 .legal-num {
  border-radius: 9999px !important;
}

.plp-field input,
.plp-field select,
.plp-field textarea,
.b2b-input,
.b2b-select,
.b2b-textarea {
  border-radius: var(--radius-sm) !important;
}

/* Search inputs & filter pills */
.products-search-input,
.recipes-search-input {
  border-radius: 9999px !important;
}

.recipe-tab-btn,
.sector-pill,
.cert-tab-btn,
.cert-ctrl-btn,
.cert-btn-download {
  border-radius: 9999px !important;
}

/* All primary / secondary buttons become pills */
.home-btn-dark,
.plp-btn-dark,
.btn-sharp-submit,
.b2b-btn-submit,
.cert-btn-inspect,
.quality-btn-primary,
.quality-btn-secondary,
.legal-cookie-btn,
.btn-clear-filters,
.catalogue-btn-submit,
.btn-white-action,
.btn-modal-save,
.btn-cookie-accept,
.btn-cookie-reject,
.btn-cookie-manage {
  border-radius: 9999px !important;
}

/* Story page legacy "* { radius:0 !important }" override */
.story-page-canvas .ribbon-bar { border-radius: 9999px !important; }
.story-page-canvas .legend-dot { border-radius: 50% !important; }

/* --------------------------------------------------------------------------
   3. CARD PADDING so rounded tiles breathe (cards that had zero padding)
   -------------------------------------------------------------------------- */
.prod-img-box { padding: 28px !important; }
.home-pillar-card,
.plp-cat { padding: 20px 20px 32px !important; }

/* Accent strips inside rounded cards sit flush with rounding */
.cat-card-accent,
.home-pillar-accent,
.showcase-card-accent,
.plp-cat::after {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* --------------------------------------------------------------------------
   4. SOFT HOVER ELEVATION (replaces hard frames)
   -------------------------------------------------------------------------- */
.cert-card:hover,
.facility-card:hover,
.process-step-card:hover,
.recipe-product-showcase-card:hover,
.client-brand-block:hover {
  box-shadow: var(--shadow-soft) !important;
}

.cert-card,
.facility-card,
.protocol-pillar-card,
.process-step-card,
.client-brand-block {
  border-color: rgba(20, 21, 24, 0.07) !important;
}

/* --------------------------------------------------------------------------
   5. DARK BLOCKS LEFT ON SUBPAGES → white editorial (business.css)
   -------------------------------------------------------------------------- */
.statement-banner-card {
  background-color: var(--surface-soft) !important;
  color: #141518 !important;
  border-left: 0 !important;
}
.statement-heading {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  color: #141518 !important;
}
.statement-body { color: #52565E !important; }

.packaging-col-card.featured-col {
  background-color: #141518 !important;
}

.capability-card:hover {
  background-color: #FFFFFF !important;
  box-shadow: var(--shadow-soft);
}
.capability-card:hover .capability-title { color: #141518 !important; }
.capability-card:hover .capability-desc { color: #52565E !important; }
.capability-card:hover .capability-num { color: #8C9098 !important; }

/* --------------------------------------------------------------------------
   6. CATEGORY ACCENT COLOURS — align legacy tones with the brand palette
   -------------------------------------------------------------------------- */
.cat-theme-spices .cat-card-accent,
.pillar-theme-spices .home-pillar-accent,
.cat-dot.dot-spices,
.legend-dot.dot-spices { background-color: var(--c-spices) !important; }
.cat-theme-herbs .cat-card-accent,
.pillar-theme-herbs .home-pillar-accent,
.cat-dot.dot-herbs,
.legend-dot.dot-herbs { background-color: var(--c-herbs) !important; }
.cat-theme-seasonings .cat-card-accent,
.pillar-theme-blends .home-pillar-accent,
.cat-dot.dot-seasonings,
.cat-dot.dot-blends,
.legend-dot.dot-seasonings,
.legend-dot.dot-blends { background-color: var(--c-seasonings) !important; }
.cat-theme-salts .cat-card-accent,
.pillar-theme-salts .home-pillar-accent,
.cat-dot.dot-salts,
.legend-dot.dot-salts { background-color: var(--c-salts) !important; }
.title-dot { display: none !important; background: transparent !important; }

.tag-spices, .badge-spices { color: var(--c-spices) !important; }
.tag-herbs, .badge-herbs { color: var(--c-herbs) !important; }
.tag-seasonings, .badge-blends { color: #B88600 !important; }
.tag-salts, .badge-salts { color: #2F86BF !important; }

/* --------------------------------------------------------------------------
   7. MORE WHITESPACE ON SUBPAGE CANVASES
   -------------------------------------------------------------------------- */
.page-white-canvas { padding-top: 64px; }
.products-catalog-grid { gap: 56px 36px; }

/* --------------------------------------------------------------------------
   8. CONTAINER INTEGRITY — one grid for every page
   Standard: max-width 1440px, side padding 48px (24px ≤900px, 20px ≤600px)
   Aligns header, breadcrumb, page content and footer on the same edges.
   -------------------------------------------------------------------------- */
:root {
  --container-max: 1440px;
  --container-pad: 48px;
}
@media (max-width: 900px) { :root { --container-pad: 24px; } }
@media (max-width: 600px) { :root { --container-pad: 20px; } }

.header-container,
.mega-menu-container,
.breadcrumb-container,
.footer-container,
.home-container,
.plp-container,
.quality-container,
.business-container,
.legal-wrap,
.slide-split-layout,
.slider-bottom-inner {
  max-width: var(--container-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
  box-sizing: border-box !important;
}

.slide-scene {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.slider-editorial-bottom {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Subpage canvases: full-width white band, content locked to the grid */
.page-white-canvas,
.products-page-canvas,
.story-page-canvas,
.contact-page-canvas,
.recipes-page-canvas,
.recipe-detail-canvas {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
  box-sizing: border-box;
}

.page-white-canvas .page-content-inner,
.products-page-canvas .page-content-inner,
.story-page-canvas .page-content-inner,
.contact-page-canvas .page-content-inner,
.recipes-page-canvas .page-content-inner,
.recipe-detail-container {
  max-width: calc(var(--container-max) - (var(--container-pad) * 2)) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Nested containers inside canvases must not add a second gutter */
.page-white-canvas .plp-container,
.page-white-canvas .home-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Consistent vertical rhythm for subpage canvases */
.page-white-canvas,
.products-page-canvas,
.story-page-canvas,
.contact-page-canvas,
.recipes-page-canvas,
.recipe-detail-canvas {
  padding-top: 64px !important;
  padding-bottom: 112px !important;
}
@media (max-width: 900px) {
  .page-white-canvas,
  .products-page-canvas,
  .story-page-canvas,
  .contact-page-canvas,
  .recipes-page-canvas,
  .recipe-detail-canvas {
    padding-top: 40px !important;
    padding-bottom: 80px !important;
  }
}

/* Prevent horizontal overflow from wide grids/images */
img, video { max-width: 100%; }
main { overflow-x: clip; }

/* --------------------------------------------------------------------------
   9. HEADER EN | TR LANGUAGE SWITCHER PILL
   -------------------------------------------------------------------------- */
.header-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px !important;
  border-radius: 9999px !important;
  background: var(--surface-soft) !important;
  border: 1px solid rgba(20, 21, 24, 0.08) !important;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
}
.hm-lang-link {
  color: #71757E;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color 0.18s ease, background 0.18s ease;
}
.hm-lang-link:hover {
  color: #141518;
}
.hm-lang-link.is-active {
  color: #FFFFFF !important;
  background: #141518;
  padding: 2px 8px;
  border-radius: 9999px;
}
.hm-lang-divider {
  color: rgba(20, 21, 24, 0.2);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   10. DYNAMIC LIVE SEARCH MODAL (#hmSearchModal)
   -------------------------------------------------------------------------- */
.hm-search-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 84px 24px 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.hm-search-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hm-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 21, 24, 0.42);
  backdrop-filter: blur(6px);
}
.hm-search-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  max-height: calc(100vh - 120px);
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(20, 21, 24, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(20, 21, 24, 0.08);
}
.hm-search-top {
  padding: 22px 28px 16px;
  border-bottom: 1px solid rgba(20, 21, 24, 0.08);
}
.hm-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-soft);
  padding: 12px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(20, 21, 24, 0.1);
}
.hm-search-icon {
  color: #52565E;
  flex-shrink: 0;
}
.hm-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  color: #141518;
  outline: none;
}
.hm-search-close {
  background: #FFFFFF;
  border: 1px solid rgba(20, 21, 24, 0.12);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #52565E;
  cursor: pointer;
}
.hm-search-close:hover {
  background: #141518;
  color: #FFFFFF;
}
.hm-search-quick-cats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
  color: #71757E;
}
.hm-scat-pill {
  padding: 4px 12px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  background: var(--surface-soft);
  color: #141518;
  transition: transform 0.15s ease;
}
.hm-scat-pill:hover { transform: translateY(-1px); }
.hm-scat-pill.pill-spices { color: var(--c-spices); }
.hm-scat-pill.pill-herbs  { color: var(--c-herbs); }
.hm-scat-pill.pill-blends { color: #B88600; }
.hm-scat-pill.pill-salts  { color: var(--c-salts); }

.hm-search-body {
  padding: 20px 28px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hm-search-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hm-search-sec-head h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #71757E;
  margin: 0;
}
.hm-search-sec-head a {
  font-size: 13px;
  font-weight: 600;
  color: #141518;
  text-decoration: none;
}
.hm-search-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.hm-sprod-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface-soft);
  text-decoration: none;
  color: #141518;
  transition: background 0.18s ease, transform 0.18s ease;
}
.hm-sprod-card:hover {
  background: #EFEFED;
  transform: translateY(-2px);
}
.hm-sprod-img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
}
.hm-sprod-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hm-sprod-info h5 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  margin: 2px 0;
  color: #141518;
}
.hm-sprod-info small {
  font-size: 11.5px;
  color: #71757E;
  display: block;
}
.hm-sprod-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-spices);
}
.hm-search-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.hm-srec-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  background: var(--surface-soft);
  text-decoration: none;
  color: #141518;
}
.hm-srec-card img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.hm-srec-card h5 {
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 3px;
}
.hm-srec-card span {
  font-size: 11.5px;
  color: #71757E;
}
.hm-search-empty {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: #71757E;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   11. SMART CONCIERGE & LIVE SUPPORT WIDGET (Bottom-Right, On-Demand)
   -------------------------------------------------------------------------- */
.hm-concierge-root {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1100;
  font-family: var(--font-sans);
}
.hm-concierge-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 9999px;
  background: #141518;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 36px rgba(20, 21, 24, 0.24);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.hm-concierge-launcher:hover {
  background: var(--c-spices);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(217, 29, 26, 0.28);
}
.hm-launcher-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #159E3F;
  box-shadow: 0 0 0 3px rgba(21, 158, 63, 0.25);
}
.hm-concierge-window {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 390px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 24px 68px rgba(20, 21, 24, 0.2);
  border: 1px solid rgba(20, 21, 24, 0.09);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.hm-concierge-window.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hm-cw-header {
  background: #141518;
  color: #FFFFFF;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hm-cw-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hm-cw-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-spices);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 12px;
}
.hm-cw-online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #159E3F;
  border: 2px solid #141518;
}
.hm-cw-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #FFFFFF;
}
.hm-cw-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.68);
  display: block;
}
.hm-cw-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #FFFFFF;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.hm-cw-close:hover { background: rgba(255, 255, 255, 0.22); }

.hm-cw-messages {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFFFF;
}
.hm-cw-msg {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}
.hm-cw-msg-assistant { align-self: flex-start; }
.hm-cw-msg-visitor   { align-self: flex-end; }

.hm-cw-bubble {
  padding: 12px 15px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.55;
}
.hm-cw-msg-assistant .hm-cw-bubble {
  background: var(--surface-soft);
  color: #141518;
  border-bottom-left-radius: 6px;
}
.hm-cw-msg-visitor .hm-cw-bubble {
  background: #141518;
  color: #FFFFFF;
  border-bottom-right-radius: 6px;
}
.hm-cw-code {
  background: rgba(20, 21, 24, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
}
.hm-cw-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.hm-cw-prod-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(20, 21, 24, 0.1);
  border-radius: 14px;
  text-decoration: none;
  color: #141518;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.hm-cw-prod-card:hover {
  border-color: #141518;
  transform: translateX(2px);
}
.hm-cw-prod-card img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 3px;
}
.hm-cw-prod-card strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.hm-cw-prod-card span {
  font-size: 11px;
  color: #71757E;
}

.hm-cw-inline-form {
  margin-top: 10px;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid rgba(20, 21, 24, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hm-cwf-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #141518;
  margin-bottom: 2px;
}
.hm-cwf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hm-cwf-input {
  width: 100%;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid rgba(20, 21, 24, 0.14);
  background: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: #141518;
  box-sizing: border-box;
}
.hm-cwf-submit {
  padding: 10px 14px;
  border-radius: 9999px;
  background: #141518;
  color: #FFFFFF;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 2px;
}
.hm-cwf-submit:hover { background: var(--c-spices); }

.hm-cw-chips {
  padding: 8px 14px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-top: 1px solid rgba(20, 21, 24, 0.06);
  background: #FAFAFA;
  scrollbar-width: none;
}
.hm-cw-chips::-webkit-scrollbar { display: none; }
.hm-cw-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(20, 21, 24, 0.12);
  background: #FFFFFF;
  color: #141518;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hm-cw-chip:hover {
  background: #141518;
  color: #FFFFFF;
}

.hm-cw-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(20, 21, 24, 0.08);
  background: #FFFFFF;
}
.hm-cw-input {
  flex: 1;
  border: 1px solid rgba(20, 21, 24, 0.12);
  background: var(--surface-soft);
  padding: 10px 14px;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #141518;
  outline: none;
}
.hm-cw-input:focus { border-color: #141518; background: #FFFFFF; }
.hm-cw-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #141518;
  color: #FFFFFF;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.hm-cw-send:hover { background: var(--c-spices); }