/* Shared visual contract for SiteBridge pages and Astra/WooCommerce system pages. */
html body.site-configured.site-bridge-design {
  background: var(--site-bg);
  color: var(--site-text);
  font-family: var(--site-font);
  font-size: var(--site-font-size);
  font-weight: var(--site-font-regular);
  line-height: var(--site-line-height);
}

body.site-bridge-design :where(h1, h2, h3, h4, h5, h6, .entry-title, .page-title, .woocommerce-loop-product__title) {
  color: var(--site-text);
  font-family: var(--site-heading-font);
  font-weight: var(--site-font-strong);
}

body.site-bridge-design :where(a) { color: var(--site-primary); }
body.site-bridge-design :where(a:hover, a:focus-visible) { color: var(--site-accent); }
body.site-bridge-design :where(p, small, .description, .woocommerce-result-count) { color: var(--site-muted); }

body.site-bridge-design :where(button, .button, input[type="button"], input[type="submit"], .wp-element-button, .wc-block-components-button):not(.site-product-favorite) {
  min-height: var(--site-button-height);
  border: var(--site-button-border-width) solid transparent;
  border-radius: var(--site-button-radius);
  background: var(--site-button-bg);
  color: var(--site-button-text);
  font-family: var(--site-font);
  font-weight: var(--site-font-strong);
  box-shadow: var(--site-button-shadow);
  transition: background-color var(--site-transition) ease, border-color var(--site-transition) ease, color var(--site-transition) ease, transform var(--site-transition) ease, box-shadow var(--site-transition) ease;
}

body.site-bridge-design :where(button, .button, input[type="button"], input[type="submit"], .wp-element-button, .wc-block-components-button):not(.site-product-favorite):hover {
  border-color: transparent;
  background: var(--site-button-hover);
  color: var(--site-button-text);
  transform: var(--site-button-hover-transform);
}

body.site-bridge-design.site-button-style-outline :where(button, .button, input[type="button"], input[type="submit"], .wp-element-button, .wc-block-components-button):not(.site-product-favorite) {
  border-color: var(--site-button-bg);
  background: transparent;
  color: var(--site-button-bg);
  box-shadow: none;
}
body.site-bridge-design.site-button-style-soft :where(button, .button, input[type="button"], input[type="submit"], .wp-element-button, .wc-block-components-button):not(.site-product-favorite) {
  background: color-mix(in srgb, var(--site-button-bg) 11%, var(--site-surface));
  color: var(--site-button-bg);
  box-shadow: none;
}
body.site-bridge-design :where(.site-button-secondary, .wp-block-button.is-style-outline .wp-element-button) {
  border-color: var(--site-button-secondary-border);
  background: var(--site-button-secondary-bg);
  color: var(--site-button-secondary-text);
  box-shadow: none;
}

body.site-bridge-design :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--site-focus);
  outline: 3px solid color-mix(in srgb, var(--site-focus) 28%, transparent);
  outline-offset: 2px;
}

body.site-bridge-design :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .select2-selection) {
  min-height: var(--site-input-height);
  border: 1px solid var(--site-input-border);
  border-radius: var(--site-input-radius);
  background: var(--site-input-bg);
  color: var(--site-text);
  font: inherit;
  box-shadow: none;
}

body.site-bridge-design :where(input, select, textarea)::placeholder { color: var(--site-muted); opacity: .78; }
body.site-bridge-design :where(input, select, textarea):focus { border-color: var(--site-focus); }

body.site-bridge-design :where(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
  border: 1px solid var(--site-border);
  border-radius: var(--site-card-radius);
  background: var(--site-surface);
  color: var(--site-text);
  box-shadow: none;
}
body.site-bridge-design :where(.woocommerce-message, .wc-block-components-notice-banner.is-success) { border-left: 4px solid var(--site-success); }
body.site-bridge-design :where(.woocommerce-info, .wc-block-components-notice-banner.is-info) { border-left: 4px solid var(--site-accent); }
body.site-bridge-design :where(.woocommerce-error, .wc-block-components-notice-banner.is-error) { border-left: 4px solid var(--site-danger); }

body.site-bridge-design :where(.woocommerce table.shop_table, .woocommerce-cart-form, .cart_totals, #order_review, #payment, .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content, .wc-block-cart, .wc-block-checkout, .wc-block-components-sidebar, .wc-block-components-totals-wrapper) {
  border-color: var(--site-border);
  border-radius: var(--site-card-radius);
  background: var(--site-surface);
  color: var(--site-text);
}

body.site-bridge-design :where(.woocommerce table.shop_table th, .woocommerce table.shop_table td, .wc-block-components-order-summary-item, .wc-block-components-totals-item) {
  border-color: var(--site-border);
}

body.site-bridge-design :where(.woocommerce-MyAccount-navigation ul) { margin: 0; padding: 8px; list-style: none; }
body.site-bridge-design :where(.woocommerce-MyAccount-navigation li a) {
  display: block;
  border-radius: var(--site-card-radius);
  padding: 11px 13px;
  color: var(--site-text);
  text-decoration: none;
}
body.site-bridge-design :where(.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover) {
  background: color-mix(in srgb, var(--site-accent) 10%, var(--site-surface));
  color: var(--site-primary);
}

body.site-bridge-design :where(.woocommerce ul.products li.product, .site-card, .wc-block-grid__product) {
  border-color: var(--site-card-border);
  border-radius: var(--site-card-radius);
  background: var(--site-surface);
  transition: transform var(--site-transition) ease, box-shadow var(--site-transition) ease, border-color var(--site-transition) ease;
}
body.site-bridge-design :where(.woocommerce ul.products li.product, .site-card, .wc-block-grid__product):hover { transform: var(--site-card-hover-transform); box-shadow: var(--site-card-hover-shadow); }

body.site-bridge-design :where(.woocommerce ul.products, .wc-block-grid__products) {
  display: grid;
  grid-template-columns: repeat(var(--site-product-columns), minmax(0, 1fr));
  gap: 18px;
}
body.site-bridge-design :where(.woocommerce ul.products)::before,
body.site-bridge-design :where(.woocommerce ul.products)::after { display: none; }
body.site-bridge-design :where(.woocommerce ul.products li.product, .wc-block-grid__product) { width: auto; margin: 0; overflow: hidden; }
body.site-bridge-design :where(.woocommerce ul.products li.product img, .wc-block-grid__product-image img, .site-card__image img) {
  width: 100%;
  aspect-ratio: var(--site-image-ratio);
  border-radius: var(--site-image-radius);
  object-fit: cover;
}
body.site-bridge-design :where(.woocommerce-loop-product__title, .site-product-card h3, .wc-block-grid__product-title) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--site-card-title-lines);
}
body.site-bridge-design.site-card-style-bordered :where(.woocommerce ul.products li.product, .site-card, .wc-block-grid__product) { border: var(--site-card-border-width) solid var(--site-card-border); padding: 12px; }
body.site-bridge-design.site-card-style-shadow :where(.woocommerce ul.products li.product, .site-card, .wc-block-grid__product) { border: 0; box-shadow: var(--site-card-shadow); }
body.site-bridge-design.site-card-style-minimal :where(.woocommerce ul.products li.product, .site-card, .wc-block-grid__product) { border: 0; border-radius: 0; background: transparent; }
body.site-bridge-design.site-card-style-clean :where(.woocommerce ul.products li.product, .site-card, .wc-block-grid__product) { border: 0; background: transparent; }
body.site-bridge-design.site-card-style-editorial :where(.woocommerce ul.products li.product, .site-card, .wc-block-grid__product) { border: 0; border-bottom: 1px solid var(--site-border); border-radius: 0; background: transparent; padding-bottom: 14px; }
body.site-bridge-design.site-category-style-overlay .woocommerce ul.products li.product-category { position: relative; overflow: hidden; border-radius: var(--site-card-radius); }
body.site-bridge-design.site-category-style-overlay .woocommerce ul.products li.product-category :where(h2,.woocommerce-loop-category__title) { position: absolute; right: 12px; bottom: 12px; left: 12px; margin: 0; border-radius: min(var(--site-card-radius), 12px); background: color-mix(in srgb, var(--site-surface) 88%, transparent); padding: 10px 12px; backdrop-filter: blur(12px); }
body.site-bridge-design.site-category-style-compact .woocommerce ul.products li.product-category { display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; gap: 12px; }
body.site-bridge-design.site-category-style-compact .woocommerce ul.products li.product-category img { margin: 0; }
body.site-bridge-design .site-product-merch-tag { display: inline-flex; align-items: center; width: max-content; max-width: 100%; margin-top: 10px; border: 1px solid transparent; border-radius: var(--site-button-radius); background: color-mix(in srgb, var(--site-warning) 10%, var(--site-surface)); color: var(--site-text); padding: 5px 9px; font-size: .78rem; font-weight: var(--site-font-medium); line-height: 1; white-space: nowrap; }
body.site-bridge-design .site-product-merch-tag > span::before { margin-right: 5px; color: var(--site-warning); content: "⚡"; }
body.site-bridge-design .site-product-merch-tag--trending { background: color-mix(in srgb, var(--site-accent) 9%, var(--site-surface)); }
body.site-bridge-design .site-product-merch-tag--trending > span::before { color: var(--site-accent); content: "✺"; }
body.site-bridge-design .site-product-merch-tag--choice { background: color-mix(in srgb, var(--site-success) 10%, var(--site-surface)); }
body.site-bridge-design .site-product-merch-tag--choice > span::before { color: var(--site-success); content: "●"; }
body.site-bridge-design.site-merch-tag-style-outline .site-product-merch-tag { border-color: color-mix(in srgb, var(--site-accent) 36%, var(--site-border)); background: transparent; }
body.site-bridge-design.site-merch-tag-style-solid .site-product-merch-tag { border-color: var(--site-primary); background: var(--site-primary); color: var(--site-surface); }
body.site-bridge-design.site-merch-tag-style-solid .site-product-merch-tag > span::before { color: currentColor; }
body.site-bridge-design .site-product-taxonomy-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
body.site-bridge-design .site-product-taxonomy-tags a { border: 1px solid var(--site-card-border); border-radius: var(--site-button-radius); background: var(--site-surface); color: var(--site-muted); padding: 5px 9px; font-size: .78rem; font-weight: var(--site-font-medium); line-height: 1; text-decoration: none; }
body.site-bridge-design .site-product-taxonomy-tags a:hover { border-color: var(--site-accent); color: var(--site-accent); }
body.site-bridge-design.site-card-hide-price :where(.woocommerce ul.products .price, .site-product-price, .wc-block-grid__product-price) { display: none; }
body.site-bridge-design.site-card-hide-rating :where(.woocommerce ul.products .star-rating, .site-product-card .star-rating, .wc-block-grid__product-rating) { display: none; }
body.site-bridge-design.site-card-hide-badges :where(.onsale, .site-product-badge, .wc-block-grid__product-onsale) { display: none; }

body.site-bridge-design.site-bridge-system-page :where(.site-main, #primary, .content-area, .entry-content) {
  width: min(100%, var(--site-page-width));
  margin-inline: auto;
}

body.site-bridge-design.site-bridge-checkout :where(.woocommerce-checkout-review-order-table, #payment) {
  overflow: hidden;
}

body.site-bridge-design.site-bridge-checkout :where(#place_order, .wc-block-components-checkout-place-order-button) {
  width: 100%;
}

@media (max-width: 768px) {
  body.site-bridge-design :where(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) { width: 100%; }
  body.site-bridge-design :where(.woocommerce ul.products, .wc-block-grid__products) { grid-template-columns: repeat(var(--site-product-columns-mobile), minmax(0, 1fr)); }
}