/* Gutenberg replacements for legacy VC layout primitives. */
:root {
  --viigardi-color-primary: var(--wp--preset--color--primary, #cf987e);
  --viigardi-color-secondary: var(--wp--preset--color--secondary, #262626);
  --viigardi-color-border: var(--wp--preset--color--border, #e8e8e8);
}

/* Keep sticky headers above WooCommerce sale badges while scrolling. */
.is-sticky .site-header-inner,
.site-header-mobile .site-header-inner,
.enable-header-transparency .site-header {
  z-index: 120;
}

.wp-block-woocommerce-product-sale-badge,
.wc-block-components-product-sale-badge {
  z-index: 9;
}

/* Match Woo block sale badges to legacy theme badge styling. */
.wc-block-components-product-image .wc-block-components-product-sale-badge {
  align-items: center;
  background: #1c1c1c;
  border: 0;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 42px;
  justify-content: center;
  line-height: 1;
  min-width: 42px;
  padding: 12px 5px;
}

.wc-block-components-product-image .wc-block-components-product-sale-badge--align-left {
  left: 20px;
  right: auto;
  top: 20px;
}

.wc-block-components-product-image .wc-block-components-product-sale-badge--align-right {
  left: auto;
  right: 20px;
  top: 20px;
}

.wc-block-components-product-image .wc-block-components-product-sale-badge--align-center {
  top: 20px;
}

/* Restore proper full-bleed behavior for Gutenberg blocks inside classic templates. */
.page-content .not-active-fullpage > .alignfull,
.page-content .not-active-fullpage > .is-style-viigardi-full-bleed,
.single-post-content > .entry-content > .alignfull,
.single-post-content > .entry-content > .is-style-viigardi-full-bleed {
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

.page-content .not-active-fullpage > .alignwide,
.single-post-content > .entry-content > .alignwide {
  max-width: var(--wp--style--global--wide-size, 1440px);
}

/* Legacy Airi helper class on Cover blocks should not force boxed layouts in Gutenberg pages. */
.page-content .not-active-fullpage > .wp-block-cover.row--maxwidth-1440,
.single-post-content > .entry-content > .wp-block-cover.row--maxwidth-1440 {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* Hero banner rows should stay edge-to-edge and without horizontal gaps. */
.page-content .not-active-fullpage > .wp-block-columns:has(> .wp-block-column > .wp-block-viigardi-hero-banner),
.page-content .not-active-fullpage > .wp-block-columns.is-style-viigardi-full-bleed,
.single-post-content > .entry-content > .wp-block-columns:has(> .wp-block-column > .wp-block-viigardi-hero-banner),
.single-post-content > .entry-content > .wp-block-columns.is-style-viigardi-full-bleed {
  box-sizing: border-box;
  gap: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* Editor parity for the new full-bleed style and auto hero-row detection. */
.editor-styles-wrapper .is-root-container > .alignfull,
.editor-styles-wrapper .is-root-container > .is-style-viigardi-full-bleed,
.editor-styles-wrapper .is-root-container > .wp-block-columns:has(> .wp-block-column > .wp-block-viigardi-hero-banner) {
  margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
  margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
  max-width: none;
  width: auto;
}

.editor-styles-wrapper .is-root-container > .wp-block-columns:has(> .wp-block-column > .wp-block-viigardi-hero-banner) {
  gap: 0;
}

/* Mobile fallback gutters for full-width product collections. */
@media (max-width: 767px) {
  .page-content .not-active-fullpage > .wp-block-group.alignfull > .wp-block-woocommerce-product-collection,
  .single-post-content > .entry-content > .wp-block-group.alignfull > .wp-block-woocommerce-product-collection {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Ensure combined color utility classes resolve to the explicit palette slug color. */
.has-text-color.has-primary-color {
  color: var(--wp--preset--color--primary) !important;
}

.has-text-color.has-secondary-color {
  color: var(--wp--preset--color--secondary) !important;
}

.has-text-color.has-tertiary-color {
  color: var(--wp--preset--color--tertiary) !important;
}

.has-text-color.has-border-color {
  color: var(--wp--preset--color--border) !important;
}

.has-text-color.has-white-color {
  color: var(--wp--preset--color--white) !important;
}

.wp-block-group.viigardi-row {
  margin-bottom: 30px;
}

.wp-block-columns.viigardi-card-grid {
  gap: 24px;
}

.is-style-viigardi-primary .wp-block-button__link,
.wp-block-button.is-style-viigardi-primary .wp-block-button__link {
  background-color: var(--viigardi-color-primary);
  border: 2px solid var(--viigardi-color-primary);
  color: var(--wp--preset--color--white, #fff);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 24px;
  text-transform: uppercase;
}

.is-style-viigardi-primary .wp-block-button__link:hover,
.wp-block-button.is-style-viigardi-primary .wp-block-button__link:hover {
  background-color: var(--viigardi-color-secondary);
  border-color: var(--viigardi-color-secondary);
}

.viigardi-location-card {
  border: 1px solid var(--viigardi-color-border);
  padding: 24px;
}

.viigardi-location-meta {
  margin: 0;
  padding: 0;
  list-style: none;
}

.viigardi-location-meta li {
  margin-bottom: 6px;
}

.viigardi-home-style-card {
  border-bottom: 1px solid var(--viigardi-color-border);
  padding-bottom: 35px;
  margin-bottom: 35px;
}

.wp-block-details {
  border: 1px solid var(--viigardi-color-border);
  margin-bottom: 12px;
  padding: 12px 16px;
}

.viigardi-cta-wrap {
  background: #f8f4f1;
  padding: 32px 24px;
}

/* Keep WooCommerce category links aligned with theme tokens. */
.wp-block-woocommerce-product-categories a:not(.wp-block-button__link):not(.button),
.wc-block-product-categories-list a:not(.wp-block-button__link):not(.button) {
  color: var(--viigardi-color-primary);
}

/* Legacy Woo category loops should also follow primary token colors. */
.products .product-category > a,
.products .product-category .woocommerce-loop-category__title {
  color: var(--viigardi-color-primary);
}

.wp-block-woocommerce-product-categories a:not(.wp-block-button__link):not(.button):hover,
.wc-block-product-categories-list a:not(.wp-block-button__link):not(.button):hover {
  color: var(--viigardi-color-secondary);
}

.products .product-category > a:hover,
.products .product-category > a:hover .woocommerce-loop-category__title {
  color: var(--viigardi-color-secondary);
}

/* Product titles should default to secondary, but obey editor-selected text colors. */
.wp-block-woocommerce-product-collection .wp-block-post-title:not(.has-text-color) a,
.wp-block-woocommerce-product-collection .wp-block-post-title:not(.has-text-color) a:hover,
.wp-block-woocommerce-product-collection .wp-block-post-title:not(.has-text-color) a:focus,
.wc-block-components-product-name,
.wc-block-components-product-name a,
.wc-block-components-product-name a:hover,
.wc-block-components-product-name a:focus {
  color: var(--viigardi-color-secondary);
}

.wp-block-woocommerce-product-collection .wp-block-post-title.has-text-color a,
.wp-block-woocommerce-product-collection .wp-block-post-title.has-text-color a:hover,
.wp-block-woocommerce-product-collection .wp-block-post-title.has-text-color a:focus {
  color: currentColor !important;
}

/* Keep Woo price internals in sync with the selected block text color class. */
.wp-block-woocommerce-product-price.has-text-color .wc-block-components-product-price,
.wp-block-woocommerce-product-price.has-text-color .wc-block-components-product-price del,
.wp-block-woocommerce-product-price.has-text-color .wc-block-components-product-price ins,
.wp-block-woocommerce-product-price.has-text-color .wc-block-components-product-price .woocommerce-Price-amount,
.wp-block-woocommerce-product-price.has-text-color .wc-block-components-product-price .woocommerce-Price-currencySymbol,
.wp-block-woocommerce-product-price.has-text-color .wc-block-components-product-price bdi,
.wp-block-woocommerce-product-price.has-text-color .wc-block-grid__product-price,
.wp-block-woocommerce-product-price.has-text-color .wc-block-grid__product-price del,
.wp-block-woocommerce-product-price.has-text-color .wc-block-grid__product-price ins,
.wp-block-woocommerce-product-price.has-text-color .wc-block-grid__product-price .woocommerce-Price-amount,
.wp-block-woocommerce-product-price.has-text-color .wc-block-grid__product-price .woocommerce-Price-currencySymbol,
.wp-block-woocommerce-product-price.has-text-color .wc-block-grid__product-price bdi {
  color: inherit;
}