/* AskAgento v1 (redesign.css) dark/neon-green design applied to demowp (Twenty Twenty-Five + WooCommerce) */
:root {
  --aa-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aa-font-display: 'Space Grotesk', system-ui, sans-serif;
  --aa-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --aa-bg: #04080a;
  --aa-bg-2: #071009;
  --aa-bg-3: #0a1410;
  --aa-surface: #0a1410;
  --aa-surface-raised: #071009;
  --aa-panel: rgba(255, 255, 255, 0.035);
  --aa-panel-2: rgba(255, 255, 255, 0.06);
  --aa-primary: #2bf096;
  --aa-primary-2: #19e3c2;
  --aa-primary-dark: #14b873;
  --aa-green-ink: #052613;
  --aa-accent: rgba(255, 255, 255, 0.06);
  --aa-dark: #eaf7ef;
  --aa-gray: #9ab3a4;
  --aa-muted-2: #6d8377;
  --aa-light: rgba(255, 255, 255, 0.06);
  --aa-border: rgba(82, 255, 168, 0.12);
  --aa-border-accent: rgba(82, 255, 168, 0.28);
  --aa-muted: #071009;
  --aa-radius: 16px;
  --aa-radius-lg: 24px;
  --aa-glow: 0 0 24px rgba(43, 240, 150, 0.35);
  --aa-shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5);

  --wp--preset--color--base: var(--aa-surface);
  --wp--preset--color--contrast: var(--aa-dark);
  --wp--preset--color--accent-1: var(--aa-primary);
  --wp--preset--color--accent-2: var(--aa-accent);
  --wp--preset--color--accent-3: var(--aa-primary);
  --wp--preset--color--accent-4: var(--aa-gray);
  --wp--preset--color--accent-5: var(--aa-bg);
}

/* Signature v1 perspective grid floor — decorative, behind content */
@keyframes aa-gridscroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 56px; }
}

body {
  background: var(--aa-bg) !important;
  color: var(--aa-dark) !important;
  font-family: var(--aa-font-sans) !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Signature v1 perspective grid floor, fixed at the bottom of the viewport */
body::after {
  content: '';
  position: fixed;
  left: -20%;
  right: -20%;
  bottom: -12%;
  height: 46vh;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(43, 240, 150, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 240, 150, 0.1) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(620px) rotateX(63deg) translateZ(0);
  transform-origin: center top;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, transparent 95%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, transparent 95%);
}
.wp-site-blocks,
.aa-demo-banner,
header.wp-block-template-part {
  position: relative;
  z-index: 2;
}

/* Global text colour override for WP/WC elements */
p, li, td, th, span, label, div {
  color: inherit;
}

h1, h2, h3, h4, h5, h6,
.wp-block-query-title,
.wp-block-post-title,
.wp-block-site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--aa-font-display) !important;
  color: var(--aa-dark);
  letter-spacing: -0.02em;
}

/* Site title: Ask (muted) + Agento (bold light) */
.aa-logo-ask {
  color: var(--aa-gray);
  font-weight: 400;
}
.aa-logo-agento {
  color: var(--aa-dark);
  font-weight: 700;
}

/* Header — sticky glass bar like v1 landing */
header.wp-block-template-part,
.wp-block-group.alignfull:has(.wp-block-site-title) {
  background: rgba(4, 8, 10, 0.94) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--aa-border) !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

.wp-block-site-title a {
  text-decoration: none !important;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.wp-block-site-title a:hover {
  text-decoration: none !important;
}

/* Navigation */
.wp-block-navigation a,
.wp-block-navigation-item__content {
  color: var(--aa-gray) !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.2s;
}
.wp-block-navigation a:hover,
.wp-block-navigation-item__content:hover {
  color: var(--aa-dark) !important;
}

/* Buttons */
.wp-element-button,
button,
input[type='submit'],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background: linear-gradient(120deg, var(--aa-primary) 0%, var(--aa-primary-2) 100%) !important;
  color: var(--aa-green-ink) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-family: var(--aa-font-display) !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 28px rgba(43, 240, 150, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, filter 0.25s;
}
.wp-element-button:hover,
button:hover,
input[type='submit']:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  color: var(--aa-green-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(43, 240, 150, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  filter: brightness(1.05);
}

/* Outline / ghost secondary buttons */
.is-style-outline .wp-element-button,
.woocommerce a.button.alt,
.aa-btn-outline {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--aa-dark) !important;
  border: 1px solid var(--aa-border-accent) !important;
  box-shadow: none;
}
.is-style-outline .wp-element-button:hover,
.woocommerce a.button.alt:hover,
.aa-btn-outline:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--aa-primary) !important;
  border-color: var(--aa-primary) !important;
  box-shadow: var(--aa-glow);
  transform: translateY(-2px);
}

/* Content areas */
.wp-site-blocks > main,
.woocommerce .site-main,
main.wp-block-group {
  background: transparent;
}

.has-global-padding {
  padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
}

/* Shop hero / page titles — v1 green gradient headline */
.woocommerce-products-header__title,
.wp-block-post-title,
.wp-block-query-title,
.woocommerce .page-title,
h1.wp-block-heading {
  font-weight: 700 !important;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  background: linear-gradient(100deg, var(--aa-primary) 10%, var(--aa-primary-2) 55%, #7dffc7 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Product grid — catalog cards 30% smaller on shop */
.wc-block-product-template__responsive.columns-3 {
  grid-template-columns: repeat(auto-fill, minmax(max(105px, calc(23.33333% - 0.875em)), 1fr)) !important;
  gap: 0.875em !important;
}

.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product-template li {
  background: var(--aa-surface);
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius);
  padding: 0.7rem !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  overflow: hidden;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover,
.wc-block-product-template li:hover {
  transform: translateY(-2px);
  box-shadow: var(--aa-shadow-card), var(--aa-glow);
  border-color: var(--aa-border-accent);
}

.wc-block-product-template .wc-block-product {
  font-size: 70%;
}

.wc-block-product-template .wc-block-components-product-image img {
  width: 100% !important;
  height: auto !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-size: 0.7rem;
  font-weight: 600;
  margin: 0.525rem 0 0.25rem;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--aa-primary);
  font-weight: 700;
  font-size: 0.7rem;
}

.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
  border-radius: 8px;
  background: var(--aa-surface-raised);
  max-width: 70%;
  margin-inline: auto;
  display: block;
}

/* "Try one:" sample chips on the Search Text page */
.aa-demo-ts-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0.25rem;
}
.aa-demo-ts-samples__label {
  font-family: var(--aa-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aa-gray);
}
.aa-demo-ts-sample {
  cursor: pointer;
  white-space: nowrap;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--aa-border-accent) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--aa-dark) !important;
  font-family: var(--aa-font-display) !important;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none !important;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.aa-demo-ts-sample:hover {
  color: var(--aa-primary) !important;
  border-color: var(--aa-primary) !important;
  box-shadow: var(--aa-glow) !important;
  transform: translateY(-2px);
}

/* "Try one:" chips inside the chatbot widget (Chatbot page). The chatbot panel
   has a white background, so the dark-theme chip colors (near-white text on a
   translucent fill) are invisible here — override for light-background contrast. */
.aa-demo-chat-samples {
  padding: 0 16px;
  margin: 0 0 0.5rem;
}
.aa-demo-chat-samples[hidden] {
  display: none;
}
.aa-demo-chat-samples .aa-demo-ts-samples__label {
  color: #5b6b62 !important;
}
.aa-demo-chat-samples .aa-demo-ts-sample {
  color: var(--aa-primary-dark) !important;
  background: #fff !important;
  border-color: var(--aa-primary-dark) !important;
}
.aa-demo-chat-samples .aa-demo-ts-sample:hover {
  color: #fff !important;
  background: var(--aa-primary-dark) !important;
  border-color: var(--aa-primary-dark) !important;
}

/* Single product */
.woocommerce div.product {
  background: var(--aa-surface);
  border: 1px solid var(--aa-border);
  border-radius: calc(var(--aa-radius) + 4px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--aa-shadow-card);
}

/* Single product recommendations: the plugin renders identical "You may also
   like…" and "Related products" blocks. Hide the upsell duplicate (the section
   without .related) and show Related products as a 3x3 matrix. */
.woocommerce .upsells.products:not(.related),
.upsells.products:not(.related) {
  display: none !important;
}
.woocommerce .related.products ul.products,
.related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
}
/* WooCommerce ul.products has clearfix ::before/::after that otherwise occupy
   grid cells and break the 3x3 layout into 1,3,3,2. */
.woocommerce .related.products ul.products::before,
.woocommerce .related.products ul.products::after,
.related.products ul.products::before,
.related.products ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce .related.products ul.products li.product,
.related.products ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
.woocommerce .related.products ul.products li.product:nth-child(n + 10),
.related.products ul.products li.product:nth-child(n + 10) {
  display: none !important;
}
@media (max-width: 600px) {
  .woocommerce .related.products ul.products,
  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Forms & inputs */
input[type='text'],
input[type='email'],
input[type='search'],
input[type='number'],
input[type='tel'],
input[type='url'],
input[type='password'],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--aa-border) !important;
  border-radius: 8px !important;
  font-family: var(--aa-font-sans) !important;
  color: var(--aa-dark) !important;
  background: var(--aa-surface-raised) !important;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--aa-primary) !important;
  box-shadow: 0 0 0 4px rgba(43, 240, 150, 0.12), inset 0 0 16px rgba(43, 240, 150, 0.05);
}

/* AskAgento plugin search bars */
.pf-search-wrap,
.pf-image-search-wrap,
#pf-text-search,
#pf-image-search {
  border-radius: var(--aa-radius);
}

/* Landing-page footer */
.site-footer.aa-demo-footer {
  background: var(--aa-surface) !important;
  border-top: 1px solid var(--aa-border);
  padding: 0 1.5rem;
  margin-top: 3rem;
  max-width: none;
  width: 100%;
}
.aa-demo-footer .footer-inner {
  width: min(100%, 1100px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.5rem 0 2rem;
  flex-wrap: wrap;
}
.aa-demo-footer .footer-brand {
  max-width: 22rem;
}
.aa-demo-footer .footer-logo {
  display: inline-block;
  font-family: var(--aa-font-display);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--aa-dark);
  text-decoration: none;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.aa-demo-footer .footer-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--aa-gray);
  line-height: 1.6;
}
.aa-demo-footer .footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
.aa-demo-footer .footer-email {
  font-size: 0.9375rem;
  color: var(--aa-dark);
  text-decoration: none;
  font-weight: 500;
}
.aa-demo-footer .footer-email:hover {
  color: var(--aa-primary);
}
.aa-demo-footer .footer-legal {
  font-size: 0.875rem;
}
.aa-demo-footer .footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aa-demo-footer .footer-legal li {
  display: inline-flex;
  align-items: center;
}
.aa-demo-footer .footer-legal li + li::before {
  content: '·';
  margin: 0 0.35rem;
  color: #94a3b8;
}
.aa-demo-footer .footer-legal a {
  color: var(--aa-gray);
  text-decoration: none;
}
.aa-demo-footer .footer-legal a:hover {
  color: var(--aa-dark);
}
.aa-demo-footer .footer-bottom {
  width: min(100%, 1100px);
  margin-inline: auto;
  border-top: 1px solid var(--aa-border);
  padding: 1rem 0;
  text-align: center;
}
.aa-demo-footer .footer-bottom p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--aa-gray);
}
@media (max-width: 640px) {
  .aa-demo-footer .footer-inner {
    flex-direction: column;
    gap: 1.5rem;
  }
  .aa-demo-footer .footer-links {
    align-items: flex-start;
  }
}

/* Header nav — prevent cramped duplicate overflow */
.aa-demo-nav {
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.aa-demo-nav .wp-block-navigation-item__label {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.aa-demo-shortcode-region {
  margin: 0 0 1.5rem;
  max-width: 960px;
}

.aa-demo-shortcode-region--search {
  width: 100%;
}

/* The theme stacks spacing--60 twice above the content (main margin-top +
   group padding-top, both inline styles); tighten it on the Welcome page. */
.aa-demo-welcome-page main.wp-block-group {
  margin-top: 0 !important;
}

.aa-demo-welcome-page main.wp-block-group > .wp-block-group {
  padding-top: 1.25rem !important;
}

.aa-demo-welcome {
  margin: 0 auto 3rem;
  max-width: 1375px;
  font-family: var(--aa-font-sans);
  text-align: center;
}

.aa-demo-welcome__title {
  font-family: var(--aa-font-display) !important;
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  font-weight: 700;
  margin: 0 0 1.25rem;
  line-height: 1.1;
  background: linear-gradient(100deg, var(--aa-primary) 10%, var(--aa-primary-2) 55%, #7dffc7 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.aa-demo-welcome__lead {
  margin: 0 auto 2rem;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--aa-gray);
}

.aa-demo-welcome__bubbles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0 auto;
  max-width: 900px;
}

@media (max-width: 600px) {
  .aa-demo-welcome__bubbles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* wpautop may inject <br/> between bubbles; keep them out of the grid. */
.aa-demo-welcome__bubbles br,
.aa-demo-bubble br {
  display: none;
}

.aa-demo-bubble {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9375rem;
  padding: 1.0625rem;
  border: 1px solid var(--aa-border);
  border-radius: 22px;
  background: var(--aa-surface);
  box-shadow: var(--aa-shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.aa-demo-bubble:hover,
.aa-demo-bubble:focus-visible {
  transform: translateY(-3px);
  border-color: var(--aa-border-accent);
  box-shadow: 0 10px 24px rgba(43, 240, 150, 0.18);
  outline: none;
}

.aa-demo-bubble__media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(43, 240, 150, 0.08) 0%, rgba(43, 240, 150, 0) 60%),
    linear-gradient(145deg, #0a1410 0%, #071009 100%);
}

.aa-demo-bubble__art {
  display: block;
  width: 100%;
  height: 100%;
}

.aa-demo-bubble__gif-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 150px;
  border: 2px dashed var(--aa-border-accent);
  border-radius: 18px;
  background: repeating-linear-gradient(
    -45deg,
    #0a1410,
    #0a1410 10px,
    #071009 10px,
    #071009 20px
  );
}

.aa-demo-bubble__gif-placeholder-label {
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aa-gray);
  background: rgba(4, 8, 10, 0.8);
  border-radius: 999px;
}

.aa-demo-bubble__label {
  font-family: var(--aa-font-display);
  font-size: clamp(0.75rem, 1.5vw, 1.171875rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--aa-dark);
}

@media (max-width: 960px) {
  .aa-demo-welcome__bubbles {
    gap: 0.625rem;
  }

  .aa-demo-bubble {
    gap: 0.5rem;
    padding: 0.625rem;
    border-radius: 14px;
  }

  .aa-demo-bubble__media {
    border-radius: 10px;
  }
}

.aa-demo-recommendations {
  --aa-rec-query-scale: 0.811125;
  --aa-rec-rec-scale: 0.441500625;
  --aa-rec-catalog-scale: 0.65;
  margin: 1.5rem 0 3rem;
  font-family: var(--aa-font-sans);
}
.aa-demo-recommendations__live {
  margin: 0 0 1.25rem;
  font-family: var(--aa-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aa-primary);
}
.aa-demo-recommendations__section--catalog {
  --aa-rec-scale: var(--aa-rec-rec-scale);
  --aa-rec-col: calc(120px * var(--aa-rec-rec-scale));
}
.aa-demo-recommendations__section--category {
  margin-bottom: 2rem;
}
.aa-demo-rec-categories {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.aa-demo-rec-categories + .aa-demo-rec-categories {
  margin-top: 0.6rem;
}
.aa-demo-rec-category-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--aa-border);
  background: var(--aa-surface);
  color: var(--aa-dark);
  font-family: var(--aa-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.aa-demo-rec-category-chip:hover {
  border-color: var(--aa-primary);
}
.aa-demo-rec-category-chip--active {
  background: linear-gradient(120deg, var(--aa-primary) 0%, var(--aa-primary-2) 100%);
  border-color: var(--aa-primary);
  color: var(--aa-green-ink);
  box-shadow: 0 6px 18px rgba(43, 240, 150, 0.3);
}
/* Products carousel prev/next controls (manual selection) */
.aa-demo-rec-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.aa-demo-rec-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--aa-border-accent);
  background: rgba(255, 255, 255, 0.05);
  color: var(--aa-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.aa-demo-rec-arrow:hover {
  border-color: var(--aa-primary);
  color: var(--aa-primary);
  transform: translateY(-2px);
  box-shadow: var(--aa-glow);
}
.aa-demo-rec-arrow:active {
  transform: translateY(0);
}
.aa-demo-recommendations__empty-cell {
  list-style: none;
  color: var(--aa-gray);
  font-size: 0.875rem;
  padding: 0.5rem 0;
}
.aa-demo-recommendations__query {
  --aa-rec-scale: var(--aa-rec-query-scale);
  --aa-rec-col: calc(120px * var(--aa-rec-query-scale));
  margin-bottom: 2rem;
}
.aa-demo-recommendations__section:not(.aa-demo-recommendations__query) {
  --aa-rec-scale: var(--aa-rec-rec-scale);
  --aa-rec-col: calc(120px * var(--aa-rec-rec-scale));
}
.aa-demo-recommendations__section + .aa-demo-recommendations__section {
  margin-top: 2.5rem;
}
.aa-demo-recommendations__heading {
  font-family: var(--aa-font-display) !important;
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--aa-dark);
}
.aa-demo-recommendations__grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--aa-rec-col), calc(25% * var(--aa-rec-scale)))
  );
  gap: calc(0.875em * var(--aa-rec-scale));
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: calc(1rem * var(--aa-rec-scale));
}
.aa-demo-recommendations__grid--query {
  width: max-content;
  max-width: 100%;
  grid-template-columns: var(--aa-rec-col);
}
.aa-demo-rec-card[hidden] {
  display: none !important;
}
.aa-demo-rec-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--aa-surface);
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius);
  padding: calc(0.7rem * var(--aa-rec-scale));
  font-size: calc(1rem * var(--aa-rec-scale));
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  overflow: hidden;
}
.aa-demo-rec-card--query {
  border-color: var(--aa-border-accent);
  box-shadow: var(--aa-shadow-card);
}
.aa-demo-rec-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--aa-shadow-card), var(--aa-glow);
  border-color: var(--aa-border-accent);
}
.aa-demo-rec-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
}
.aa-demo-rec-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: calc(0.75rem * var(--aa-rec-scale));
}
.aa-demo-rec-card__image img {
  width: 100%;
  max-width: 100% !important;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: var(--aa-bg);
  display: block;
  margin: 0 auto;
}
.aa-demo-rec-card__title {
  display: block;
  font-family: var(--aa-font-display) !important;
  font-size: 0.8125em;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.35em;
  color: var(--aa-dark);
}
.aa-demo-rec-card__price {
  display: block;
  color: var(--aa-primary);
  font-weight: 700;
  font-size: 0.8125em;
  margin-bottom: calc(0.75rem * var(--aa-rec-scale));
}
.aa-demo-rec-card__image img {
  background: var(--aa-surface-raised);
}
.aa-demo-rec-card__price .amount {
  color: inherit;
}
.aa-demo-rec-card__actions {
  margin-top: auto;
}
.aa-demo-rec-card__actions .button {
  width: 100%;
  text-align: center;
  font-size: 0.75em !important;
  padding: calc(0.55rem * var(--aa-rec-scale)) calc(0.75rem * var(--aa-rec-scale)) !important;
}
.aa-demo-recommendations__empty {
  color: var(--aa-gray);
  margin: 0;
}
.aa-demo-rec-carousel__viewport {
  overflow: hidden;
  width: 100%;
}
.aa-demo-rec-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(0.875em * var(--aa-rec-scale));
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.aa-demo-rec-carousel .aa-demo-rec-card {
  flex-shrink: 0;
  box-sizing: border-box;
}
.aa-demo-rec-card--active {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.5), 0 0 22px rgba(229, 57, 53, 0.35);
}

/* Coming soon (if enabled) */
.woocommerce-coming-soon-store-only,
.wp-block-woocommerce-coming-soon {
  background: linear-gradient(180deg, rgba(10, 20, 16, 0.6) 0%, var(--aa-bg) 100%) !important;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.woocommerce-coming-soon-banner h1,
.wp-block-woocommerce-coming-soon h1 {
  font-family: var(--aa-font-display);
  font-weight: 700;
  color: var(--aa-dark);
}

/* Blog / generic content cards */
.wp-block-post,
.wp-block-query .wp-block-post {
  background: var(--aa-surface);
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius);
  padding: 1.5rem;
  color: var(--aa-dark);
}

/* Demo banner linking back to landing */
.aa-demo-banner {
  background: linear-gradient(90deg, rgba(43, 240, 150, 0.14), rgba(25, 227, 194, 0.1));
  border-bottom: 1px solid var(--aa-border-accent);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--aa-gray);
}
.aa-demo-banner a {
  color: var(--aa-primary);
  font-weight: 600;
  text-decoration: none;
}
.aa-demo-banner a:hover {
  color: var(--aa-primary-dark);
  text-decoration: underline;
}

/* Cart / checkout tables */
.woocommerce table.shop_table {
  border-radius: var(--aa-radius);
  overflow: hidden;
  border: 1px solid var(--aa-border);
}
.woocommerce table.shop_table th {
  background: var(--aa-surface-raised);
  color: var(--aa-dark);
  font-weight: 600;
}

@media (max-width: 640px) {
  .wp-block-site-title a {
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------------------
   Product filter widget on the dark demo background.
   The plugin's front.css uses light-mode greys (#333/#666/#888) that are
   unreadable on #04080a. Force white/near-white, scoped to the widget so the
   page "Filter" title (the H1, outside .askagento-filter) is untouched.
   -------------------------------------------------------------------------- */
.askagento-filter,
.askagento-filter .askagento-total,
.askagento-filter .askagento-total strong,
.askagento-filter .askagento-field-label,
.askagento-filter .askagento-option,
.askagento-filter .askagento-option-label {
  color: #ffffff !important;
}

/* Secondary text: counts, range hints, reset link — readable but subordinate. */
.askagento-filter .askagento-count,
.askagento-filter .askagento-range-hint,
.askagento-filter .askagento-range-sep,
.askagento-filter .askagento-reset-link {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Hide the live-update caveat ("Filters apply automatically… click Apply
   filters") — noise on the demo. */
.askagento-filter .askagento-filter-ajax-hint {
  display: none !important;
}

/* AI search widgets (Search Text / Search Image pages + the filter page's
   inline search). The plugin's #333 heading / #646970 hint are unreadable on
   the dark demo background — force white / near-white. */
.askagento-ai-text-search-heading,
.askagento-ai-image-search-heading {
  color: #ffffff !important;
}

.askagento-ai-text-search-hint,
.askagento-ai-image-search-hint {
  color: rgba(255, 255, 255, 0.72) !important;
}

.askagento-filter .askagento-reset-link:hover {
  color: var(--aa-primary, #2bf096) !important;
}

/* Selected option: on-brand green instead of the plugin's dark blue. */
.askagento-filter .askagento-option input:checked + .askagento-option-label {
  color: var(--aa-primary, #2bf096) !important;
}

/* Native controls (dropdown / range inputs) keep a light field so their
   dark option text stays legible against the dark page. */
.askagento-filter .askagento-select,
.askagento-filter .askagento-range-min,
.askagento-filter .askagento-range-max {
  color: #0a1410 !important;
  background: #ffffff !important;
}