/*
Theme Name: Casa Sin Gluten
Theme URI: https://casasingluten.uy
Author: CSG
Author URI: https://casasingluten.uy
Description: Tema personalizado para Casa Sin Gluten — tienda online de productos sin gluten. Diseño Organic Modernism con sistema de diseño coherente.
Version: 1.1.5
License: GPL-2.0-or-later
Text Domain: csg
Requires at least: 6.5
Tested up to: 6.9
*/

/* ========================================
   1. DESIGN SYSTEM — CSS Custom Properties
   ======================================== */
:root {
  /* --- Colors --- */
  --csg-primary:         #456131;
  --csg-on-primary:      #ffffff;
  --csg-primary-container: #5d7a47;
  --csg-on-primary-container: #e9ffd4;

  --csg-secondary:       #6a5e33;
  --csg-secondary-container: #f3e2ac;
  --csg-secondary-fixed-dim: #d6c692;

  --csg-background:      #fafaf2;
  --csg-on-background:   #1a1c18;

  --csg-surface:         #fafaf2;
  --csg-surface-bright:  #fafaf2;
  --csg-surface-container: #eeeee7;
  --csg-surface-container-low: #f4f4ed;
  --csg-surface-container-lowest: #ffffff;

  --csg-on-surface:      #1a1c18;
  --csg-on-surface-variant: #44483e;

  --csg-outline:         #74796d;
  --csg-outline-variant: #c4c8bb;

  --csg-earth-brown:     #4A3F35;
  --csg-cream-bg:        #F9F7E8;
  --csg-sage-light:      #A3B18A;
  --csg-safe-green:      #2D4B2D;

  --csg-error:           #ba1a1a;
  --csg-on-error:        #ffffff;
  --csg-error-container: #ffdad6;

  /* --- Typography --- */
  --csg-font-display:    'Be Vietnam Pro', sans-serif;
  --csg-font-body:       'Manrope', sans-serif;

  --csg-text-display:    3rem;      /* 48px */
  --csg-text-display-lh: 1.167;     /* 56px */
  --csg-text-display-ls: -0.02em;

  --csg-text-headline-lg:   2rem;   /* 32px */
  --csg-text-headline-lg-lh: 1.25;  /* 40px */

  --csg-text-headline-md:   1.5rem; /* 24px */
  --csg-text-headline-md-lh: 1.333; /* 32px */

  --csg-text-body-lg:    1.125rem;  /* 18px */
  --csg-text-body-lg-lh: 1.556;     /* 28px */

  --csg-text-body-md:    1rem;      /* 16px */
  --csg-text-body-md-lh: 1.5;       /* 24px */

  --csg-text-label-md:   0.875rem;  /* 14px */
  --csg-text-label-md-lh: 1.429;    /* 20px */
  --csg-text-label-md-ls: 0.05em;

  /* --- Spacing (8px unit) --- */
  --csg-unit:            0.5rem;
  --csg-gutter:          1.5rem;    /* 24px */
  --csg-margin-mobile:   1rem;      /* 16px */
  --csg-margin-desktop:  3rem;      /* 48px */
  --csg-container-max:   1280px;

  /* --- Border Radius --- */
  --csg-radius-sm:       0.25rem;
  --csg-radius:          0.5rem;    /* 8px */
  --csg-radius-md:       0.75rem;
  --csg-radius-lg:       1rem;
  --csg-radius-xl:       1.5rem;
  --csg-radius-full:     9999px;

  /* --- Shadows --- */
  --csg-shadow-sm:       0 1px 3px rgba(74, 63, 53, 0.08);
  --csg-shadow:          0 4px 12px rgba(74, 63, 53, 0.10);
  --csg-shadow-lg:       0 10px 30px -10px rgba(74, 63, 53, 0.12);
  --csg-shadow-xl:       0 20px 40px -15px rgba(74, 63, 53, 0.15);

  /* --- Transitions --- */
  --csg-transition:      200ms ease;
  --csg-transition-slow: 400ms ease;
}

/* ========================================
   2. RESET & BASE
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-body-md);
  line-height: var(--csg-text-body-md-lh);
  font-weight: 400;
  color: var(--csg-on-surface);
  background-color: var(--csg-background);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--csg-transition);
}

a:hover {
  color: var(--csg-primary);
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--csg-primary);
  color: var(--csg-on-primary);
  font-weight: 700;
  border-radius: 0 0 var(--csg-radius) 0;
}

.skip-link:focus {
  top: 0;
}

/* ========================================
   3. TYPOGRAPHY
   ======================================== */
.csg-display {
  font-family: var(--csg-font-display);
  font-size: var(--csg-text-display);
  line-height: var(--csg-text-display-lh);
  font-weight: 600;
  letter-spacing: var(--csg-text-display-ls);
}

.csg-headline-lg {
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-headline-lg);
  line-height: var(--csg-text-headline-lg-lh);
  font-weight: 700;
}

.csg-headline-md {
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-headline-md);
  line-height: var(--csg-text-headline-md-lh);
  font-weight: 600;
}

.csg-body-lg {
  font-size: var(--csg-text-body-lg);
  line-height: var(--csg-text-body-lg-lh);
}

.csg-body-md {
  font-size: var(--csg-text-body-md);
  line-height: var(--csg-text-body-md-lh);
}

.csg-label-md {
  font-size: var(--csg-text-label-md);
  line-height: var(--csg-text-label-md-lh);
  font-weight: 600;
  letter-spacing: var(--csg-text-label-md-ls);
}

/* ========================================
   4. UTILITY CLASSES
   ======================================== */
.csg-container {
  width: 100%;
  max-width: var(--csg-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--csg-margin-mobile);
  padding-right: var(--csg-margin-mobile);
}

@media (min-width: 768px) {
  .csg-container {
    padding-left: var(--csg-margin-desktop);
    padding-right: var(--csg-margin-desktop);
  }
}

.csg-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .csg-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.csg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   5. BUTTONS
   ======================================== */
.csg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  border-radius: var(--csg-radius);
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-body-md);
  font-weight: 700;
  text-align: center;
  transition: all var(--csg-transition);
  cursor: pointer;
}

.csg-btn:active {
  transform: scale(0.95);
}

.csg-btn--primary {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
}

.csg-btn--primary:hover {
  background-color: #3a5328;
  color: var(--csg-on-primary);
  box-shadow: var(--csg-shadow-lg);
}

.csg-btn--outline {
  background-color: transparent;
  color: var(--csg-earth-brown);
  border: 2px solid var(--csg-secondary);
}

.csg-btn--outline:hover {
  background-color: var(--csg-surface-container);
  border-color: var(--csg-primary);
  color: var(--csg-primary);
}

.csg-btn--ghost {
  background-color: transparent;
  color: var(--csg-primary);
}

.csg-btn--ghost:hover {
  background-color: var(--csg-surface-container);
}

/* ========================================
   6. HEADER
   ======================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--csg-background);
  border-bottom: 1px solid var(--csg-outline-variant);
  box-shadow: var(--csg-shadow-sm);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--csg-container-max);
  margin: 0 auto;
  padding: 1rem var(--csg-margin-mobile);
}

@media (min-width: 768px) {
  .site-header__inner {
    padding-left: var(--csg-margin-desktop);
    padding-right: var(--csg-margin-desktop);
  }
}

/* Left nav */
.site-header__nav-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.site-header__nav-left .menu {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__nav-left .menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
}

.site-header__nav-left .menu a {
  font-size: var(--csg-text-label-md);
  font-weight: 600;
  letter-spacing: var(--csg-text-label-md-ls);
  color: var(--csg-on-surface-variant);
  padding-bottom: 0.25rem;
  transition: color var(--csg-transition);
}

.site-header__nav-left .menu a:hover,
.site-header__nav-left .menu .current-menu-item > a {
  color: var(--csg-primary);
}

.site-header__nav-left .menu .current-menu-item > a {
  border-bottom: 2px solid var(--csg-primary);
}

/* Logo */
.site-header__logo {
  flex-shrink: 0;
  padding: 0 1rem;
}

.site-header__logo a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__logo .custom-logo {
  height: 4rem;
  width: auto;
  border-radius: var(--csg-radius-full);
}

.site-header__logo .custom-logo-link:not(.custom-logo-link) {
  font-family: var(--csg-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--csg-primary);
}

/* Right actions */
.site-header__actions {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .site-header__actions {
    gap: 1rem;
  }
}

.site-header__search {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__search {
    display: flex;
    align-items: center;
    background-color: var(--csg-surface-container);
    border-radius: var(--csg-radius-full);
    padding: 0.25rem 1rem;
    border: 1px solid var(--csg-outline-variant);
  }

  .site-header__search .search-icon {
    color: var(--csg-on-surface-variant);
    margin-right: 0.5rem;
  }

  .site-header__search input {
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--csg-text-body-md);
    width: 8rem;
  }

  .site-header__search input:focus {
    outline: none;
  }
}

.site-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: var(--csg-radius);
  color: var(--csg-primary);
  transition: background-color var(--csg-transition), transform var(--csg-transition);
}

.site-header__icon:hover {
  background-color: var(--csg-surface-container);
  transform: scale(0.95);
}

.site-header__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Mobile menu toggle */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: var(--csg-radius);
  color: var(--csg-primary);
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Mobile overlay nav */
.site-header__mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--csg-background);
  border-bottom: 1px solid var(--csg-outline-variant);
  padding: 1rem var(--csg-margin-mobile);
  box-shadow: var(--csg-shadow-lg);
}

.site-header__mobile-nav.is-active {
  display: block;
}

.site-header__mobile-nav .menu {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-header__mobile-nav .menu a {
  display: block;
  padding: 0.75rem 0;
  font-size: var(--csg-text-body-lg);
  font-weight: 600;
  color: var(--csg-on-surface-variant);
  border-bottom: 1px solid var(--csg-outline-variant);
}

.site-header__mobile-nav .menu a:hover,
.site-header__mobile-nav .menu .current-menu-item > a {
  color: var(--csg-primary);
}

/* ========================================
   7. HERO SECTION
   ======================================== */
.csg-hero {
  position: relative;
  aspect-ratio: 1920 / 547;
  min-height: 50vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 767px) {
  .csg-hero {
    aspect-ratio: var(--hero-mobile-aspect, 1920 / 547);
  }
}

.csg-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.csg-hero__bg-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.csg-hero__bg-image--mobile {
  display: none;
}

@media (max-width: 767px) {
  .csg-hero__bg-image--desktop {
    display: none;
  }
  .csg-hero__bg-image--mobile {
    display: block;
  }
}

.csg-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--csg-container-max);
  margin: 0 auto;
  padding: 3rem var(--csg-margin-mobile);
}

@media (min-width: 768px) {
  .csg-hero__content {
    padding-left: var(--csg-margin-desktop);
    padding-right: var(--csg-margin-desktop);
  }
}

.csg-hero__inner {
  max-width: 42rem;
}

.csg-hero__badge {
  display: inline-block;
  padding: 0.25rem 1rem;
  margin-bottom: 1.5rem;
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  font-size: var(--csg-text-label-md);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--csg-radius-full);
}

.csg-hero__title {
  font-family: var(--csg-font-display);
  font-size: var(--csg-text-display);
  line-height: var(--csg-text-display-lh);
  font-weight: 600;
  letter-spacing: var(--csg-text-display-ls);
  color: var(--csg-on-background);
  margin-bottom: 1rem;
}

.csg-hero__title em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--csg-primary);
}

.csg-hero__text {
  font-size: var(--csg-text-body-lg);
  line-height: var(--csg-text-body-lg-lh);
  color: var(--csg-on-surface-variant);
  max-width: 32rem;
  margin-bottom: 2.5rem;
}

.csg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 767px) {
  .csg-hero__title {
    font-size: 2rem;
    line-height: 1.2;
  }
}

/* ========================================
   8. FEATURED PRODUCTS
   ======================================== */
.csg-products {
  background-color: var(--csg-background);
}

.csg-products__header {
  text-align: center;
  margin-bottom: 4rem;
}

.csg-products__title {
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-headline-lg);
  line-height: var(--csg-text-headline-lg-lh);
  font-weight: 700;
  color: var(--csg-on-background);
  margin-bottom: 1rem;
}

.csg-products__divider {
  width: 6rem;
  height: 0.25rem;
  background-color: var(--csg-primary);
  margin: 0 auto;
  border-radius: var(--csg-radius-full);
}

.csg-products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--csg-gutter);
  width: 100%;
}

/* Hide the default <li> bullet since we use <li> as direct children of the grid
   (without a wrapping <ul>) and want it to behave as a block element. */
.csg-products__grid > li {
  list-style: none;
  display: block;
}

.csg-products__grid > li::marker {
  content: '';
}

@media (min-width: 576px) {
  .csg-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .csg-products__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* WC default <ul class="products"> wrapper — force it to match .csg-products__grid.
   We can't reliably remove_action it cross-version, so we override its styles instead. */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-2 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--csg-gutter) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}

@media (max-width: 1023px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products.columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products.columns-2 {
    grid-template-columns: 1fr !important;
  }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products.columns-3 > li,
ul.products.columns-4 > li,
ul.products.columns-2 > li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
}

/* Product Card */
.csg-product-card {
  background-color: var(--csg-surface-container-lowest);
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius-xl);
  overflow: hidden;
  transition: all var(--csg-transition);
  box-shadow: var(--csg-shadow-sm);
}

.csg-product-card:hover {
  transform: scale(1.02);
  box-shadow: var(--csg-shadow-xl);
}

.csg-product-card__image-wrap {
  position: relative;
  height: 16rem;
  overflow: hidden;
  background-color: var(--csg-surface-container);
}

.csg-product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--csg-transition-slow);
}

.csg-product-card:hover .csg-product-card__image-wrap img {
  transform: scale(1.05);
}

.csg-product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: var(--csg-sage-light);
  color: var(--csg-primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--csg-radius-full);
}

.csg-product-card__add {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem;
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: var(--csg-text-label-md);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--csg-transition), transform var(--csg-transition), background-color var(--csg-transition);
  display: block;
  text-decoration: none;
}

.csg-product-card:hover .csg-product-card__add {
  opacity: 1;
  transform: translateY(0);
}

.csg-product-card__add:hover,
.csg-product-card__add:focus-visible {
  background-color: var(--csg-cream-bg);
  color: var(--csg-primary);
}

.csg-product-card__add.added {
  background-color: var(--csg-safe-green);
}

.csg-product-card__info {
  padding: 1.25rem;
}

.csg-product-card__category {
  font-size: var(--csg-text-label-md);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--csg-on-surface-variant);
  text-transform: uppercase;
}

.csg-product-card__name {
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-body-lg);
  font-weight: 600;
  color: var(--csg-on-surface);
  margin: 0.25rem 0 0.5rem;
  line-height: 1.4;
}

.csg-product-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.csg-product-card__price {
  font-size: var(--csg-text-headline-md);
  font-weight: 700;
  color: var(--csg-primary);
}

/* ========================================
   9. FOOTER
   ======================================== */
.site-footer {
  background-color: var(--csg-surface-container);
  border-top: 1px solid var(--csg-outline-variant);
  padding: 3rem 0;
}

.site-footer__inner {
  text-align: center;
}

.site-footer__logo {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.site-footer__logo .custom-logo {
  height: 3rem;
  width: auto;
  margin: 0 auto;
}

.site-footer__tagline {
  color: var(--csg-on-surface-variant);
  margin-bottom: 1.5rem;
  font-size: var(--csg-text-body-md);
}

.site-footer__links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.site-footer__links a {
  font-size: var(--csg-text-label-md);
  font-weight: 600;
  color: var(--csg-on-surface-variant);
}

.site-footer__links a:hover {
  color: var(--csg-primary);
}

.site-footer__copyright {
  margin-top: 2rem;
  font-size: 0.8125rem;
  color: var(--csg-on-surface-variant);
  opacity: 0.7;
}

/* ========================================
   10. MAIN CONTENT / LOOP
   ======================================== */
.site-main {
  min-height: 50vh;
}

/* Blog / Archive */
.entry-header {
  margin-bottom: 2rem;
}

.entry-title {
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-headline-lg);
  font-weight: 700;
  color: var(--csg-on-background);
  margin-bottom: 1rem;
}

.entry-content {
  font-size: var(--csg-text-body-lg);
  line-height: var(--csg-text-body-lg-lh);
}

.entry-content p {
  margin-bottom: 1.5rem;
}

.entry-content h2 {
  font-size: var(--csg-text-headline-md);
  font-weight: 600;
  margin: 2.5rem 0 1rem;
  color: var(--csg-on-background);
}

.entry-content h3 {
  font-size: var(--csg-text-body-lg);
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}

/* ========================================
   11. RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
  :root {
    --csg-text-display: 2rem;
    --csg-text-display-lh: 1.2;
    --csg-text-headline-lg: 1.75rem;
    --csg-text-headline-lg-lh: 1.286;
    --csg-text-headline-md: 1.25rem;
    --csg-text-headline-md-lh: 1.4;
    --csg-text-body-lg: 1rem;
    --csg-text-body-lg-lh: 1.5;
  }
}

/* ========================================
   12. WORDPRESS CORE ALIGNMENTS
   ======================================== */
.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: var(--csg-text-label-md);
  color: var(--csg-on-surface-variant);
  text-align: center;
  margin-top: 0.5rem;
}

/* Screen reader text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--csg-surface-container-lowest);
  clip: auto !important;
  clip-path: none;
  display: block;
  font-size: var(--csg-text-body-md);
  height: auto;
  left: 0.5rem;
  line-height: normal;
  padding: 1rem;
  text-decoration: none;
  top: 0.5rem;
  width: auto;
  z-index: 100000;
}

/* ========================================
   13. CART COUNTER BADGE
   ======================================== */
.site-header__icon {
  position: relative;
}

.site-header__icon .cart-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
  border-radius: var(--csg-radius-full);
  border: 2px solid var(--csg-background);
  box-sizing: content-box;
  pointer-events: none;
  transform: translate(25%, -25%);
}

.site-header__icon .cart-count--empty {
  display: none;
}

.site-header__icon .cart-count.is-updating {
  animation: cart-pulse 600ms ease;
}

@keyframes cart-pulse {
  0%   { transform: translate(25%, -25%) scale(1); }
  50%  { transform: translate(25%, -25%) scale(1.4); }
  100% { transform: translate(25%, -25%) scale(1); }
}

/* ========================================
   14. WC NOTICES (above content)
   ======================================== */
.woocommerce-notices-wrapper {
  width: 100%;
  max-width: var(--csg-container-max);
  margin: 1rem auto 0;
  padding: 0 var(--csg-margin-mobile);
}

@media (min-width: 768px) {
  .woocommerce-notices-wrapper {
    padding: 0 var(--csg-margin-desktop);
  }
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  background-color: var(--csg-surface-container);
  border: 1px solid var(--csg-outline-variant);
  border-left: 4px solid var(--csg-primary);
  border-radius: var(--csg-radius);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--csg-on-surface);
  font-size: var(--csg-text-body-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.woocommerce-error {
  border-left-color: var(--csg-error);
}

.woocommerce-message .button,
.woocommerce-info .button {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  padding: 0.5rem 1.25rem;
  border-radius: var(--csg-radius);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  background-color: #3a5328;
  color: var(--csg-on-primary);
}

/* ========================================
   15. WC ARCHIVE / SHOP PAGE
   ======================================== */
/* Widen the wrapper so the product grid can match the home's 4-col card width
   even with the sidebar taking up its share of horizontal space. */
.csg-wc-page-inner {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .csg-wc-page-inner {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Inside csg-wc-page-inner, the csg-container wrapper constrains to 1280px max.
   On the shop archive we want the inner csg-container to be full-width
   so the layout (with sidebar + grid) can use the wider 1500px max. */
.csg-wc-page-inner > .csg-container.csg-section {
  max-width: none;
  padding: 0 0 4rem;
}

.csg-wc-archive__layout {
  padding-bottom: 4rem;
  max-width: 100%;
}

@media (min-width: 768px) {
  .csg-wc-archive__layout {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.csg-wc-archive__layout-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .csg-wc-archive__layout-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
}

/* Sidebar */
.csg-wc-archive__sidebar {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .csg-wc-archive__sidebar {
    width: 14rem;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  .csg-wc-archive__sidebar::-webkit-scrollbar {
    width: 4px;
  }
  .csg-wc-archive__sidebar::-webkit-scrollbar-track {
    background: var(--csg-surface-container-low);
  }
  .csg-wc-archive__sidebar::-webkit-scrollbar-thumb {
    background: var(--csg-sage-light);
    border-radius: 10px;
  }
}

.csg-wc-archive__filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Collapsible filter groups (native <details>) — mobile collapsed by default */
.csg-wc-archive__filter-collapsible {
  /* nothing — defaults are fine */
}

.csg-wc-archive__filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.csg-wc-archive__filter-summary::-webkit-details-marker {
  display: none;
}

.csg-wc-archive__filter-summary::marker {
  display: none;
}

.csg-wc-archive__filter-chevron {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--csg-earth-brown);
  border-bottom: 2px solid var(--csg-earth-brown);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.csg-wc-archive__filter-collapsible[open] .csg-wc-archive__filter-chevron {
  transform: rotate(-135deg);
}

.csg-wc-archive__filter-title {
  font-family: var(--csg-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--csg-earth-brown);
  margin: 0;
}

.csg-wc-archive__filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.csg-wc-archive__filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--csg-text-body-md);
  color: var(--csg-on-surface);
  transition: color var(--csg-transition);
}

.csg-wc-archive__filter-option:hover {
  color: var(--csg-primary);
}

.csg-wc-archive__filter-option input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--csg-outline-variant);
  accent-color: var(--csg-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.csg-wc-archive__filter-price {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.csg-wc-archive__filter-range {
  width: 100%;
  height: 0.25rem;
  background: var(--csg-sage-light);
  border-radius: 9999px;
  appearance: none;
  cursor: pointer;
  accent-color: var(--csg-primary);
}

.csg-wc-archive__filter-range::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--csg-primary);
  cursor: pointer;
  border: 2px solid var(--csg-background);
  box-shadow: 0 0 0 1px var(--csg-outline-variant);
}

.csg-wc-archive__filter-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--csg-primary);
  cursor: pointer;
  border: 2px solid var(--csg-background);
  box-shadow: 0 0 0 1px var(--csg-outline-variant);
}

.csg-wc-archive__filter-price-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--csg-text-label-md);
  font-weight: 600;
  color: var(--csg-on-surface-variant);
}

.csg-wc-archive__filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.csg-wc-archive__filter-chip {
  padding: 0.25rem 0.75rem;
  background-color: var(--csg-surface-container);
  color: var(--csg-on-surface-variant);
  border: 1px solid var(--csg-outline-variant);
  border-radius: 9999px;
  font-size: var(--csg-text-label-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--csg-transition), color var(--csg-transition);
}

.csg-wc-archive__filter-chip:hover,
.csg-wc-archive__filter-chip.is-active {
  background-color: var(--csg-sage-light);
  color: var(--csg-on-primary);
  border-color: var(--csg-sage-light);
}

.csg-wc-archive__filter-divider {
  height: 1px;
  background-color: var(--csg-outline-variant);
  margin: 0.5rem 0;
}

.csg-wc-archive__filter-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.csg-wc-archive__filter-apply,
.csg-wc-archive__filter-clear {
  display: inline-block;
  text-align: center;
  padding: 0.625rem 1rem;
  border-radius: var(--csg-radius);
  font-size: var(--csg-text-body-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--csg-transition), color var(--csg-transition);
  border: none;
  text-decoration: none;
}

.csg-wc-archive__filter-apply {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
}

.csg-wc-archive__filter-apply:hover,
.csg-wc-archive__filter-apply:focus-visible {
  background-color: var(--csg-cream-bg);
  color: var(--csg-primary);
}

.csg-wc-archive__filter-clear {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
}

.csg-wc-archive__filter-clear:hover,
.csg-wc-archive__filter-clear:focus-visible {
  background-color: var(--csg-cream-bg);
  color: var(--csg-primary);
}

/* Main product area (right side) */
.csg-wc-archive__main {
  flex: 1;
  min-width: 0;
}

.csg-wc-archive__header {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  text-align: center;
}

.csg-wc-archive__header .entry-title {
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-headline-lg);
  font-weight: 700;
  color: var(--csg-on-background);
  margin: 0 0 0.5rem;
}

.csg-wc-archive__header .entry-title::after {
  content: '';
  display: block;
  width: 6rem;
  height: 0.25rem;
  background-color: var(--csg-primary);
  margin: 0.75rem auto 0;
  border-radius: var(--csg-radius-full);
}

.csg-wc-archive__header .term-description {
  color: var(--csg-on-surface-variant);
  font-size: var(--csg-text-body-lg);
  line-height: var(--csg-text-body-lg-lh);
  max-width: 60ch;
}

.csg-products__toolbar {
  margin-bottom: 2rem;
}

.csg-products__toolbar .woocommerce-notices-wrapper {
  margin: 0;
  padding: 0;
  max-width: none;
}

.woocommerce-result-count,
.woocommerce-ordering {
  display: inline-block;
  margin: 0 1rem 0.5rem 0;
  font-size: var(--csg-text-body-md);
  color: var(--csg-on-surface-variant);
}

.woocommerce-ordering select {
  background-color: var(--csg-surface-container-lowest);
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  padding: 0.5rem 1rem;
  font-family: var(--csg-font-body);
  color: var(--csg-on-surface);
  cursor: pointer;
}

.csg-products__pagination {
  margin-top: 3rem;
  text-align: center;
}

.woocommerce-pagination .page-numbers {
  display: inline-flex;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  background-color: var(--csg-surface-container-lowest);
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  color: var(--csg-on-surface);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-pagination .page-numbers li a:hover {
  background-color: var(--csg-surface-container);
  color: var(--csg-primary);
}

.woocommerce-pagination .page-numbers li span.current {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  border-color: var(--csg-primary);
}

/* ========================================
   16. WC SINGLE PRODUCT
   ======================================== */
.csg-single-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: 1.5rem;
  width: 80%;
  margin: 0 auto;
}

/* On mobile we flatten summary so its children can be ordered with title first, image second */
.csg-single-product__summary {
  display: contents;
}

.csg-single-product__image {
  order: 2;
  width: 100%;
  max-width: 400px;
  min-width: 0;
}

.csg-single-product__title { order: 1; }

.csg-single-product__price,
.csg-single-product__excerpt,
.csg-single-product__add-to-cart,
.csg-single-product__buy-now,
.product_meta,
.csg-single-product__description {
  order: 3;
}

@media (min-width: 1024px) {
  .csg-single-product {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    text-align: left;
    align-items: start;
    column-gap: 50px;
    row-gap: 3rem;
    width: 100%;
    max-width: var(--csg-container-max);
    margin-top: 80px;
  }

  /* Restore normal layout: summary acts as a container again, no flattening */
  .csg-single-product__summary {
    display: block;
  }

  /* Reset orders so natural HTML order applies (image | summary) */
  .csg-single-product__image,
  .csg-single-product__title,
  .csg-single-product__price,
  .csg-single-product__excerpt,
  .csg-single-product__add-to-cart,
  .csg-single-product__buy-now,
  .product_meta,
  .csg-single-product__description {
    order: 0;
  }

  .csg-single-product__image {
    max-width: none;
  }
}

.csg-single-product__buy-now {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  margin-top: 0.5rem;
  margin-bottom: 50px;
  background-color: transparent;
  color: var(--csg-primary);
  border: 1.5px solid var(--csg-primary);
  border-radius: var(--csg-radius);
  font-size: var(--csg-text-body-md);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color var(--csg-transition), color var(--csg-transition);
}

.csg-single-product__buy-now:hover,
.csg-single-product__buy-now:focus-visible {
  background-color: var(--csg-sage-light);
  color: var(--csg-primary);
}

.csg-single-product__image img {
  width: 100%;
  height: auto;
  border-radius: var(--csg-radius-lg);
  border: 1px solid var(--csg-outline-variant);
}

.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce-page #content div.product div.images,
.woocommerce-page #content div.product div.summary {
  width: 100%;
  float: none;
}

.csg-single-product__title {
  font-family: var(--csg-font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--csg-on-background);
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .csg-single-product__title {
    font-size: var(--csg-text-headline-lg);
  }
}

/* ========================================
   MOBILE — Tighter spacing on product page
   ======================================== */
@media (max-width: 1023px) {
  .csg-single-product {
    row-gap: 0;
  }

  .csg-single-product__title {
    margin-top: 2.5rem;
    margin-bottom: 0.625rem;
  }

  .csg-single-product__image,
  .csg-single-product__price,
  .csg-single-product__excerpt,
  .csg-single-product__add-to-cart,
  .csg-single-product__buy-now,
  .csg-single-product__description {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .csg-single-product__excerpt {
    margin-bottom: 2rem !important;
  }

  .product_meta {
    margin-top: 0.625rem;
  }
}

.csg-single-product__price {
  font-size: var(--csg-text-headline-md);
  font-weight: 700;
  color: var(--csg-primary);
  margin-bottom: 1.5rem;
}

.csg-single-product__excerpt {
  color: var(--csg-on-surface-variant);
  font-size: var(--csg-text-body-lg);
  line-height: var(--csg-text-body-lg-lh);
  margin-bottom: 3rem;
}

.csg-single-product__add-to-cart {
  margin-bottom: 2rem;
}

.csg-single-product__add-to-cart .button,
.csg-single-product__add-to-cart button[type="submit"],
.woocommerce .csg-single-product__add-to-cart .button.alt {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  border: none;
  border-radius: var(--csg-radius);
  padding: 0.875rem 2rem;
  font-size: var(--csg-text-body-md);
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color var(--csg-transition);
}

.woocommerce .csg-single-product__add-to-cart .button.alt:hover,
.woocommerce .csg-single-product__add-to-cart .button.alt:focus-visible {
  background-color: #3a5328;
  color: var(--csg-on-primary);
}

.csg-single-product__add-to-cart .button:hover,
.csg-single-product__add-to-cart button[type="submit"]:hover {
  background-color: #3a5328;
}

.csg-single-product .quantity input.qty {
  width: 4rem;
  padding: 0.5rem;
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  font-family: var(--csg-font-body);
  text-align: center;
}

.csg-single-product__description {
  font-size: var(--csg-text-body-lg);
  line-height: var(--csg-text-body-lg-lh);
  color: var(--csg-on-surface);
}

/* ========================================
   SINGLE PRODUCT — hide stock label
   ======================================== */
.csg-single-product .stock {
  display: none !important;
}

/* Disable product image link/lightbox on mobile. The link wraps the
 * gallery image and navigates to the raw image file when tapped, which
 * is undesired UX on small screens. Pointer-events neutralizes both the
 * native navigation and any click-bound lightbox handlers.
 */
@media (max-width: 767px) {
  .csg-single-product__image .woocommerce-product-gallery a,
  .csg-single-product__image .woocommerce-product-gallery__image a {
    pointer-events: none;
    cursor: default;
  }
}

/* ========================================
   MOBILE SPLIT BUTTON — quantity picker
   integrated into the add-to-cart button
   ======================================== */
@media (max-width: 767px) {
  /* Hide the standalone WC quantity input + buy-now on mobile */
  .csg-single-product__add-to-cart .quantity {
    display: none !important;
  }
  .csg-single-product__buy-now {
    display: none !important;
  }
}

.csg-qty-split {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
  margin-bottom: 0;
}

.csg-qty-split__main,
.csg-qty-split__toggle {
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-body-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  transition: background-color var(--csg-transition);
}

.csg-qty-split__main {
  flex: 1;
  padding: 0.875rem 1.125rem;
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  border-radius: var(--csg-radius) 0 0 var(--csg-radius);
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csg-qty-split__main:hover,
.csg-qty-split__main:focus-visible {
  background-color: #3a5328;
}

.csg-qty-split__toggle {
  flex: 0 0 auto;
  min-width: 3rem;
  padding: 0.875rem 0.75rem;
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0 var(--csg-radius) var(--csg-radius) 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.csg-qty-split__toggle:hover,
.csg-qty-split__toggle:focus-visible {
  background-color: #3a5328;
}

.csg-qty-split__toggle svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--csg-transition);
}

.csg-qty-split.is-open .csg-qty-split__toggle svg {
  transform: rotate(180deg);
}

.csg-qty-split__popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  padding: 0.5rem;
  background-color: var(--csg-surface-container-lowest);
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  box-shadow: var(--csg-shadow-lg);
  min-width: 240px;
}

.csg-qty-split__popover[hidden] {
  display: none;
}

.csg-qty-split__option {
  background-color: var(--csg-background);
  color: var(--csg-on-surface);
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  padding: 0.5rem 0;
  font-family: var(--csg-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--csg-transition), color var(--csg-transition);
}

.csg-qty-split__option:hover,
.csg-qty-split__option:focus-visible {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  border-color: var(--csg-primary);
}

.csg-qty-split__option.is-active {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  border-color: var(--csg-primary);
}

.csg-single-product__description h2 {
  font-size: var(--csg-text-headline-md);
  font-weight: 600;
  margin: 2rem 0 1rem;
}

/* ========================================
   17. WC CART / CHECKOUT (basic)
   ======================================== */
.woocommerce-cart .csg-container,
.woocommerce-checkout .csg-container {
  max-width: var(--csg-container-max);
}

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--csg-surface-container-lowest);
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  overflow: hidden;
  margin-bottom: 2rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--csg-outline-variant);
}

.woocommerce table.shop_table th {
  background-color: var(--csg-surface-container);
  font-weight: 700;
  color: var(--csg-on-surface);
}

.woocommerce table.shop_table tr:last-child td {
  border-bottom: none;
}

.woocommerce .cart-collaterals .cart_totals {
  background-color: var(--csg-surface-container);
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  padding: 1.5rem;
  margin-top: 2rem;
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: var(--csg-text-headline-md);
  font-weight: 700;
  margin-bottom: 1rem;
}

.woocommerce form .form-row {
  margin-bottom: 1rem;
}

.woocommerce form .form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: var(--csg-text-label-md);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  background-color: var(--csg-surface-container-lowest);
  font-family: var(--csg-font-body);
  font-size: var(--csg-text-body-md);
  color: var(--csg-on-surface);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--csg-primary);
}

.woocommerce form .button,
.woocommerce button.button {
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  border: none;
  border-radius: var(--csg-radius);
  padding: 0.75rem 1.5rem;
  font-size: var(--csg-text-body-md);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--csg-transition);
}

.woocommerce form .button:hover,
.woocommerce button.button:hover {
  background-color: #3a5328;
  color: var(--csg-on-primary);
}

.woocommerce form .button.alt {
  background-color: var(--csg-cream-bg);
  color: var(--csg-primary);
}

.woocommerce form .button.alt:hover {
  background-color: var(--csg-sage-light);
  color: var(--csg-primary);
}

/* ========================================
   18. BLOCK-EDITOR ALIGNMENTS (fallback)
   ======================================== */
.alignwide,
.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

@media (min-width: 1280px) {
  .alignwide {
    margin-left: -4rem;
    margin-right: -4rem;
    max-width: none;
  }
}

/* ========================================
   CUSTOM — Cart count badge + bounce animation
   ======================================== */
.site-header__cart {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--csg-primary);
  color: var(--csg-on-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.cart-count--empty {
  display: none;
}

.cart-bounce {
  animation: csg-cart-bounce 0.45s ease;
}

/* Flying card clone — used by cart-animation.js */
.csg-cart-fly-clone {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 120px;
  height: 120px;
  background-color: var(--csg-surface-container-lowest);
  border: 2px solid var(--csg-primary);
  border-radius: var(--csg-radius-lg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

.csg-cart-fly-clone > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none !important;
}

@keyframes csg-fly-to-cart {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    border-radius: var(--csg-radius-lg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
  20% {
    transform: translate(0, -20px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: var(--csg-fly-end);
    opacity: 0;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }
}

.csg-cart-fly-clone.is-flying {
  animation: csg-fly-to-cart 1.4s cubic-bezier(0.5, -0.2, 0.6, 1) forwards;
}

@keyframes csg-cart-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ========================================
   CUSTOM — Formulario de contacto
   ======================================== */
/* Fluent Form ID 3 (migrado desde ID 1) — desktop 60%, mobile sin cambios */
@media (min-width: 1024px) {
  .fluentform_wrapper_3,
  .fluentform_wrapper_1 {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Títulos centrados en páginas Quienes Somos y Contacto */
.page-id-15 .entry-title,
.page-id-17 .entry-title {
  text-align: center;
}

/* ========================================
   CUSTOM — Search autocomplete
   ======================================== */
.site-header__search {
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: auto;
  min-width: 360px;
  max-width: 90vw;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background-color: var(--csg-surface-container-lowest);
  border: 1px solid var(--csg-outline-variant);
  border-radius: var(--csg-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 50;
  max-height: 70vh;
  overflow-y: auto;
}

.search-suggestions[hidden] {
  display: none;
}

.search-suggestions__item {
  list-style: none;
}

.search-suggestions__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  color: var(--csg-on-surface);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.search-suggestions__item.is-active .search-suggestions__link,
.search-suggestions__link:hover {
  background-color: var(--csg-surface-container);
}

.search-suggestions__thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--csg-radius);
  flex-shrink: 0;
  background-color: var(--csg-surface-container);
}

.search-suggestions__thumb--placeholder {
  display: inline-block;
  border: 1px dashed var(--csg-outline-variant);
}

.search-suggestions__title {
  font-size: var(--csg-text-body-md);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-suggestions__empty {
  padding: 0.75rem 1rem;
  color: var(--csg-on-surface-variant);
  font-size: var(--csg-text-body-sm);
  font-style: italic;
}

@media (max-width: 768px) {
  .search-suggestions {
    min-width: 280px;
    max-width: calc(100vw - 2rem);
  }

  .woocommerce-checkout .wp-block-woocommerce-checkout,
  .woocommerce-checkout .wc-block-checkout {
    width: 100%;
    max-width: 357px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .woocommerce-checkout .wc-block-components-sidebar-layout,
  .woocommerce-checkout .wc-block-components-main,
  .woocommerce-checkout .wc-block-checkout__main,
  .woocommerce-checkout form.wc-block-checkout__form {
    padding-left: 0;
    margin-left: 0;
  }
}