/* Dermasia redesign — WP-template overrides
   Keeps the host theme's header/footer alive but neutralises the in-page
   chrome (page-title bars, breadcrumbs, default WooCommerce summaries) that
   would visually clash with the React UI.

   IMPORTANT: never use a selector broad enough to match a theme wrapper that
   contains #dermasia-root, otherwise we'd hide the whole app.
*/

body.dermasia-redesign-active {
  background: var(--cream) !important;
  color: var(--ink);
}

#dermasia-root {
  min-height: 80vh;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Defensive resets — make sure host-theme CSS doesn't recolour or reshape
   our buttons / inputs / links. Some themes set button { color:#fff } at the
   global level which makes our size-card and tab labels invisible. */
body.dermasia-redesign-active #dermasia-root button,
body.dermasia-redesign-active #dermasia-root select,
body.dermasia-redesign-active #dermasia-root input,
body.dermasia-redesign-active #dermasia-root textarea {
  color: var(--ink);
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  border-radius: 0;
}
body.dermasia-redesign-active #dermasia-root a {
  color: inherit;
}
body.dermasia-redesign-active #dermasia-root button:hover,
body.dermasia-redesign-active #dermasia-root a:hover {
  color: inherit;
  text-decoration: none;
}
/* Specific overrides for the brand-coloured CTAs the React tree paints with
   inline color: cream/white. Re-assert them with higher specificity. */
body.dermasia-redesign-active #dermasia-root .btn-primary,
body.dermasia-redesign-active #dermasia-root a.btn-primary {
  color: var(--cream) !important;
}

/* Loading spinner shared by both pages. */
.dermasia-spinner {
  width: 48px; height: 48px;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Some themes wrap the_content() in narrow containers — let the React app go
   edge-to-edge by widening only the immediate ancestors. */
body.dermasia-redesign-active .site-main,
body.dermasia-redesign-active .content-area,
body.dermasia-redesign-active .entry-content,
body.dermasia-redesign-active main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.dermasia-redesign-active .site-content,
body.dermasia-redesign-active .container,
body.dermasia-redesign-active .wrap {
  max-width: none !important;
  padding: 0 !important;
}

/* Hide a curated list of theme-side elements that would visually duplicate or
   conflict with the React UI. These are leaf elements (page banners, default
   WC product layout) — none of them wrap the React app, so safe to hide. */
body.dermasia-redesign-active .main-title-section-wrapper,
body.dermasia-redesign-active .main-title-section-container,
body.dermasia-redesign-active .main-title-section,
body.dermasia-redesign-active .page-title-bar,
body.dermasia-redesign-active .page-title-bar-bg,
body.dermasia-redesign-active .page-header,
body.dermasia-redesign-active .archive-header,
body.dermasia-redesign-active .archive-title,
body.dermasia-redesign-active .breadcrumbs,
body.dermasia-redesign-active .woocommerce-breadcrumb,
body.dermasia-redesign-active .woocommerce-products-header,
body.dermasia-redesign-active .woocommerce-products-header__title,
body.dermasia-redesign-active .woocommerce-result-count,
body.dermasia-redesign-active .woocommerce-ordering,
body.dermasia-redesign-active .woocommerce-notices-wrapper:empty,
body.dermasia-redesign-active .product .summary,
body.dermasia-redesign-active .product .images:not(#dermasia-root .images),
body.dermasia-redesign-active .product_title,
body.dermasia-redesign-active .single-product-banner,
body.dermasia-redesign-active .related.products,
body.dermasia-redesign-active .upsells.products,
body.dermasia-redesign-active .woocommerce-tabs {
  display: none !important;
}