@import url("../../../hummingbird/assets/css/theme.css");

/* Poppins — headings, UI */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-500-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-600-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-700-normal.woff2") format("woff2");
  font-display: swap;
}

/* Inter — body, formularios, labels */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ff-heading: "Poppins", system-ui, sans-serif;
  --ff-body:    "Inter",   system-ui, sans-serif;

  /* PESOS — escala aligerada (revertir restaurando 400/500/500/600/600/700) */
  --fw-body:    400;
  --fw-label:   400;
  --fw-menu:    400;
  --fw-price:   500;
  --fw-section: 500;
  --fw-hero:    600;

  --bs-body-font-family: var(--ff-body);
  --bs-body-font-weight: var(--fw-body);
  --bs-btn-font-weight: var(--fw-label);
  --bs-heading-font-family: var(--ff-heading);
  --bs-heading-font-weight: var(--fw-section);

  --ac-green: #3DDC84;
  --ac-green-rgb: 61, 220, 132;
  --ac-green-dark: #2BB76A;
  --ac-teal: #0D4D5C;
  --ac-teal-rgb: 13, 77, 92;
  --ac-dark: #092A33;
  --ac-dark-rgb: 9, 42, 51;
  --ac-black: #000000;
  --ac-black-rgb: 0, 0, 0;
  --ac-white: #FFFFFF;

  --bs-primary: var(--ac-dark);
  --bs-primary-rgb: var(--ac-dark-rgb);
  --bs-secondary: var(--ac-teal);
  --bs-secondary-rgb: var(--ac-teal-rgb);
  --bs-dark: var(--ac-dark);
  --bs-dark-rgb: var(--ac-dark-rgb);
  --bs-success: var(--ac-green);
  --bs-success-rgb: var(--ac-green-rgb);

  --bs-body-color: var(--ac-dark);
  --bs-body-color-rgb: var(--ac-dark-rgb);
  --bs-heading-color: var(--ac-dark);
  --bs-link-color: var(--ac-teal);
  --bs-link-color-rgb: var(--ac-teal-rgb);
  --bs-link-hover-color: var(--ac-green);
  --bs-border-color: rgba(var(--ac-dark-rgb), 0.12);

  /* TAMAÑOS — escala compacta. Revertir a 0.75/0.875/1/1.25/1.5/1.8/2.2 si es brusco */
  --fs-2xs:  0.6875rem;  /* 11px */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 0.875rem;   /* 14px ← era 16px */
  --fs-md:   1rem;       /* 16px ← era 20px */
  --fs-lg:   1.125rem;   /* 18px ← era 24px */
  --fs-xl:   1.375rem;   /* 22px ← era 28.8px */
  --fs-2xl:  1.625rem;   /* 26px ← era 35.2px */
  --fs-3xl:  2rem;       /* 32px nuevo (techo h1) */

  --bs-body-font-size: var(--fs-base);
}

body {
  font-size: var(--bs-body-font-size);
}

h1, .h1 { font-family: var(--ff-heading); font-weight: var(--fw-hero);    font-size: clamp(1.5rem, 3vw, var(--fs-3xl));   line-height: 1.2; }
h2, .h2 { font-family: var(--ff-heading); font-weight: var(--fw-section); font-size: clamp(1.25rem, 2.5vw, var(--fs-2xl)); line-height: 1.25; }
h3, .h3 { font-family: var(--ff-heading); font-weight: var(--fw-section); font-size: var(--fs-lg);  line-height: 1.3; }
h4, .h4 { font-family: var(--ff-heading); font-weight: var(--fw-section); font-size: var(--fs-md);  line-height: 1.35; }
h5, .h5 { font-family: var(--ff-heading); font-weight: var(--fw-section); font-size: var(--fs-base); line-height: 1.4; }
h6, .h6 { font-family: var(--ff-heading); font-weight: var(--fw-label);   font-size: var(--fs-sm);   line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; }

/* Menú */
.ps-mainmenu .ps-mainmenu__tree-link,
.ps-mainmenu .ps-mainmenu__tree-dropdown-toggle,
.ps-mainmenu .submenu__left-item,
.ps-mainmenu .menu-item__group-main-item,
.header .nav-link {
  font-family: var(--ff-heading);
  font-weight: var(--fw-menu);
}

/* Precio producto */
.product__center .product__prices .current-price,
.product__center .product__prices .product-price,
.product__center .current-price-value,
.price,
.product-price {
  font-family: var(--ff-heading);
  font-weight: var(--fw-price);
}

/* Labels pequeños / formulario */
label,
.form-label,
.product__reference,
.product__manufacturer,
small,
.small {
  font-family: var(--ff-body);
  font-weight: var(--fw-label);
}

/* Botones (Inter 500 — label) */
.btn {
  font-family: var(--ff-body);
  font-weight: var(--fw-label);
}

small, .small { font-size: var(--fs-sm); }
.lead         { font-size: var(--fs-md); }
.fs-xs        { font-size: var(--fs-xs)  !important; }
.fs-sm        { font-size: var(--fs-sm)  !important; }
.fs-base      { font-size: var(--fs-base) !important; }
.fs-md        { font-size: var(--fs-md)  !important; }
.fs-lg        { font-size: var(--fs-lg)  !important; }
.fs-xl        { font-size: var(--fs-xl)  !important; }
.fs-2xl       { font-size: var(--fs-2xl) !important; }

.btn-primary {
  --bs-btn-color: var(--ac-white);
  --bs-btn-bg: var(--ac-dark);
  --bs-btn-border-color: var(--ac-dark);
  --bs-btn-hover-color: var(--ac-white);
  --bs-btn-hover-bg: var(--ac-black);
  --bs-btn-hover-border-color: var(--ac-black);
  --bs-btn-active-color: var(--ac-white);
  --bs-btn-active-bg: var(--ac-black);
  --bs-btn-active-border-color: var(--ac-black);
  --bs-btn-disabled-color: var(--ac-white);
  --bs-btn-disabled-bg: var(--ac-dark);
  --bs-btn-disabled-border-color: var(--ac-dark);
}

.btn-secondary {
  --bs-btn-color: var(--ac-white);
  --bs-btn-bg: var(--ac-teal);
  --bs-btn-border-color: var(--ac-teal);
  --bs-btn-hover-color: var(--ac-white);
  --bs-btn-hover-bg: var(--ac-dark);
  --bs-btn-hover-border-color: var(--ac-dark);
  --bs-btn-active-color: var(--ac-white);
  --bs-btn-active-bg: var(--ac-black);
  --bs-btn-active-border-color: var(--ac-black);
}

.btn-outline-primary {
  --bs-btn-color: var(--ac-dark);
  --bs-btn-border-color: var(--ac-dark);
  --bs-btn-hover-color: var(--ac-white);
  --bs-btn-hover-bg: var(--ac-dark);
  --bs-btn-hover-border-color: var(--ac-dark);
  --bs-btn-active-color: var(--ac-white);
  --bs-btn-active-bg: var(--ac-black);
  --bs-btn-active-border-color: var(--ac-black);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ac-teal);
  --bs-btn-border-color: var(--ac-teal);
  --bs-btn-hover-color: var(--ac-white);
  --bs-btn-hover-bg: var(--ac-teal);
  --bs-btn-hover-border-color: var(--ac-teal);
  --bs-btn-active-color: var(--ac-white);
  --bs-btn-active-bg: var(--ac-dark);
  --bs-btn-active-border-color: var(--ac-dark);
}

.btn-outline-dark {
  --bs-btn-color: var(--ac-dark);
  --bs-btn-border-color: var(--ac-dark);
  --bs-btn-hover-color: var(--ac-white);
  --bs-btn-hover-bg: var(--ac-black);
  --bs-btn-hover-border-color: var(--ac-black);
}

.btn-success {
  --bs-btn-color: var(--ac-white);
  --bs-btn-bg: var(--ac-green);
  --bs-btn-border-color: var(--ac-green);
  --bs-btn-hover-color: var(--ac-white);
  --bs-btn-hover-bg: var(--ac-green-dark);
  --bs-btn-hover-border-color: var(--ac-green-dark);
}

.header,
.header-top,
.header-nav {
  background-color: var(--ac-white);
  color: var(--ac-dark);
}

.header-bottom__logo {
  display: flex;
  align-items: center;
}

.header-bottom__logo .logo,
.header-bottom__logo img.logo {
  max-height: 3rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.header .nav-link,
.ps-mainmenu .ps-mainmenu__tree-link {
  color: var(--ac-dark);
}

.header .nav-link:hover,
.ps-mainmenu .ps-mainmenu__tree-link:hover {
  color: var(--ac-green);
}

.footer-container,
.footer,
.block-social,
.block_newsletter {
  background-color: var(--ac-dark);
  color: var(--ac-white);
}

.footer-container a,
.footer a {
  color: var(--ac-white);
}

.footer-container a:hover,
.footer a:hover {
  color: var(--ac-green);
}

.price,
.product-price,
.regular-price {
  color: var(--ac-dark);
}

.product-flags .badge {
  --bs-primary: var(--ac-dark);
  --bs-primary-rgb: var(--ac-dark-rgb);
  --bs-white: var(--ac-dark);
  border-color: var(--ac-dark) !important;
  color: var(--ac-white) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.product-flags .badge.discount {
  color: var(--ac-white) !important;
}


.form-control:focus,
.form-select:focus {
  border-color: var(--ac-dark);
  box-shadow: 0 0 0 0.2rem rgba(var(--ac-dark-rgb), 0.15);
}

::selection {
  background-color: var(--ac-green);
  color: var(--ac-white);
}

.header-nav-full-width {
  background-color: var(--ac-white);
  border-top: 1px solid var(--bs-border-color);
}

.header-nav-full-width .ps-mainmenu {
  display: flex !important;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding-left: var(--bs-gutter-x, 0.75rem);
  padding-right: var(--bs-gutter-x, 0.75rem);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 576px)  { .header-nav-full-width .ps-mainmenu { max-width: 540px; } }
@media (min-width: 768px)  { .header-nav-full-width .ps-mainmenu { max-width: 720px; } }
@media (min-width: 992px)  { .header-nav-full-width .ps-mainmenu { max-width: 960px; } }
@media (min-width: 1200px) { .header-nav-full-width .ps-mainmenu { max-width: 1140px; } }
@media (min-width: 1400px) { .header-nav-full-width .ps-mainmenu { max-width: 1320px; } }

.header-nav-full-width .ps-mainmenu__desktop {
  width: 100%;
  display: flex;
  justify-content: center;
}

.header-nav-full-width .ps-mainmenu__tree {
  display: flex !important;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(0.25rem, 0.8vw, 0.75rem);
  margin: 0 auto !important;
  padding: 0;
  width: auto;
  max-width: 100%;
  list-style: none;
}

.header-nav-full-width .ps-mainmenu__tree-item {
  white-space: nowrap;
  flex: 0 0 auto;
}

.header-nav-full-width .ps-mainmenu__tree-link {
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  padding-inline: clamp(0.25rem, 0.6vw, 0.75rem);
}

@media (min-width: 992px) {
  .header-nav-full-width .ps-mainmenu__desktop {
    display: block !important;
  }
  .header-nav-full-width .ps-mainmenu__mobile-toggle {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .product__container {
    display: grid !important;
    gap: 1.5rem;
    grid-template-columns: 45% 35% 20% !important;
    align-items: start;
  }

  .product__bottom {
    display: block !important;
    grid-template-columns: none !important;
  }

  .product__left .product__images {
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
    align-items: flex-start;
  }

  .product__left .product__carousel {
    flex: 1 1 auto;
    min-width: 0;
  }

  .product__left .product__thumbnails {
    --thumb-size: 5.5rem;
    --thumb-gap: 0.5rem;
    --thumb-visible: 4;
    flex: 0 0 var(--thumb-size);
    max-height: none;
  }

  .product__left .product__thumbnails-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--thumb-gap);
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: calc(var(--thumb-size) * var(--thumb-visible) + var(--thumb-gap) * (var(--thumb-visible) - 1));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ac-dark-rgb), 0.3) transparent;
  }

  .product__left .product__thumbnails-list::-webkit-scrollbar {
    width: 4px;
  }

  .product__left .product__thumbnails-list::-webkit-scrollbar-thumb {
    background-color: rgba(var(--ac-dark-rgb), 0.3);
    border-radius: 2px;
  }

  .product__left .product__thumbnails-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .product__left .product__thumbnail {
    width: 100%;
    height: var(--thumb-size);
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .product__left .product__thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
  }

  .product__thumbnails-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  .product__thumbnails-nav .product__thumbnails-list {
    scrollbar-width: none;
  }

  .product__thumbnails-nav .product__thumbnails-list::-webkit-scrollbar {
    display: none;
  }

  .product__thumbnails-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1.75rem;
    padding: 0;
    background-color: var(--ac-white);
    color: var(--ac-dark);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
  }

  .product__thumbnails-arrow:active:not([disabled]) {
    background-color: rgba(var(--ac-dark-rgb), 0.08);
  }

  .product__thumbnails-arrow[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .product__thumbnails-arrow .material-icons {
    font-size: 1.25rem;
  }
}

.product__center .product__name {
  font-size: var(--fs-md);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.product__center .product__manufacturer {
  font-size: var(--fs-sm);
}

.product__center .product__reference {
  font-size: var(--fs-xs);
}

.product__center .product__reference span {
  color: var(--ac-dark);
  font-weight: 700;
}

.product__center .product__prices .current-price,
.product__center .product__prices .product-price,
.product__center .current-price-value {
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.product__center .product__prices .regular-price,
.product__center .regular-price {
  font-size: var(--fs-base);
}

.product__center .product__prices .discount {
  font-size: var(--fs-sm);
}

.product__center .product__description-short {
  font-size: var(--fs-base);
  line-height: 1.5;
}

.product__center .product__additional-info {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1rem;
  font-size: var(--fs-sm);
}

.product__right .product__availability-status {
  font-size: var(--fs-sm);
}

.product__right .product__add-to-cart-button {
  font-size: var(--fs-base);
}

.product__bottom .accordion-button {
  font-size: var(--fs-lg);
}

.product__right .product__reassurance {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.product__right .product__reassurance > * {
  background-color: var(--ac-white);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-size: var(--fs-sm);
}

.product__right .product__add-to-cart-container {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product__right .product__buy-now {
  margin-top: 0.5rem;
}

.product__right .product__warranty {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  font-size: var(--fs-sm);
  background-color: var(--ac-white);
}

.product__right .product__warranty-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.product__right .product__warranty-title .material-icons {
  font-size: var(--fs-md);
  color: var(--ac-green-dark);
}

/* Discount badge — más prominente */
.product__center .product-discount,
.product__center .product__prices .discount {
  display: inline-block;
  background-color: var(--ac-dark) !important;
  color: var(--ac-white) !important;
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  letter-spacing: 0.02em;
}

/* Carousel arrows en círculos sutiles */
.product__carousel .carousel-control-prev,
.product__carousel .carousel-control-next {
  width: 2.5rem;
  height: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--ac-white);
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
  opacity: 1;
  margin: 0 0.5rem;
}

.product__carousel .carousel-control-prev:hover,
.product__carousel .carousel-control-next:hover {
  background-color: var(--ac-dark);
}

.product__carousel .carousel-control-prev-icon,
.product__carousel .carousel-control-next-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-image: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product__carousel .carousel-control-prev-icon::before,
.product__carousel .carousel-control-next-icon::before {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: block;
  color: var(--ac-dark);
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.product__carousel .carousel-control-prev-icon::before { content: "\e5cb"; }
.product__carousel .carousel-control-next-icon::before { content: "\e5cc"; }

.product__carousel .carousel-control-prev:hover .carousel-control-prev-icon::before,
.product__carousel .carousel-control-next:hover .carousel-control-next-icon::before,
.product__carousel .carousel-control-prev:focus .carousel-control-prev-icon::before,
.product__carousel .carousel-control-next:focus .carousel-control-next-icon::before {
  color: var(--ac-white) !important;
}

/* Dots indicator (si Hummingbird los renderiza) */
.product__carousel .carousel-indicators {
  bottom: -1.75rem;
  margin: 0;
}

.product__carousel .carousel-indicators [data-bs-target] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: rgba(var(--ac-dark-rgb), 0.25);
  border: 0;
  margin: 0 0.25rem;
  opacity: 1;
}

.product__carousel .carousel-indicators .active {
  background-color: var(--ac-dark);
}

/* Floating share column */
.product__floating-actions {
  position: absolute;
  top: 1rem;
  right: -3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 5;
}

.product__floating-actions a,
.product__floating-actions button,
.product__floating-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background-color: var(--ac-white);
  color: var(--ac-dark);
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
}

.product__floating-actions a:active,
.product__floating-actions button:active {
  background-color: rgba(var(--ac-dark-rgb), 0.08);
}

.product__floating-actions .material-icons {
  font-size: 1.1rem;
}

.product__left {
  position: relative;
}

.product__share-popover {
  position: absolute;
  top: 4rem;
  right: -3rem;
  z-index: 10;
  background-color: var(--ac-white);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 12px rgba(var(--ac-dark-rgb), 0.08);
}

.product__share-popover[hidden] {
  display: none;
}

.product__share-popover ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  /* En desktop ocultamos la fila superior original (displayNav1 + displayNav2):
     todo el contacto/login/carrito vive ahora dentro de displayTop, fila unificada */
  body .header-top,
  body .header > .header-top,
  body header.header > .header-top,
  header > .header-top {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* displayTop contiene ps_searchbar + ps_customersignin + ps_shoppingcart
     (+ ps_contactinfo cuando se añada). Fila horizontal en este orden:
     logo · search · contacto · login · carrito */

  .header-bottom__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1.5rem !important;
    margin: 0 !important;
  }

  .header-bottom__row > * {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .header-bottom__logo {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Search bar: ancho fijo, centrado en el espacio libre entre logo y contacto */
  .header-bottom__row > #_desktop_ps_searchbar,
  .header-bottom__row > .ps-searchbar,
  .header-bottom__row > [id*="searchbar"] {
    flex: 0 0 auto !important;
    width: 32rem !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    order: 1;
    text-align: center;
  }

  /* Contactanos (espacio reservado, aparezca o no en el hook) */
  .header-bottom__row > #_desktop_ps_contactinfo,
  .header-bottom__row > .ps-contactinfo,
  .header-bottom__row > [id*="contactinfo"] {
    flex: 0 0 auto !important;
    width: auto !important;
    order: 2;
  }

  /* Login */
  .header-bottom__row > #_desktop_ps_customersignin,
  .header-bottom__row > .ps-customersignin,
  .header-bottom__row > [id*="customersignin"]:not(.d-md-none) {
    flex: 0 0 auto !important;
    width: auto !important;
    order: 3;
  }

  /* Carrito */
  .header-bottom__row > #_desktop_ps_shoppingcart,
  .header-bottom__row > .ps-shoppingcart,
  .header-bottom__row > [id*="shoppingcart"]:not(.d-md-none) {
    flex: 0 0 auto !important;
    width: auto !important;
    order: 4;
  }

  /* Centrado horizontal del contenido dentro de cada item del header */
  .header-bottom__row > #_desktop_ps_contactinfo,
  .header-bottom__row > #_desktop_ps_customersignin,
  .header-bottom__row > #_desktop_ps_shoppingcart,
  .header-bottom__row > [id*="contactinfo"],
  .header-bottom__row > [id*="customersignin"]:not(.d-md-none),
  .header-bottom__row > [id*="shoppingcart"]:not(.d-md-none) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* ps_contactinfo: forzar formato icono-arriba / label-abajo igual que login/carrito */
  .header-bottom__row .ps-contactinfo,
  .header-bottom__row .ps-contactinfo__email {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.125rem !important;
    text-decoration: none !important;
    color: inherit !important;
    line-height: 1 !important;
  }

  .header-bottom__row .ps-contactinfo .header-block__icon,
  .header-bottom__row .ps-contactinfo .material-icons {
    font-size: 1.5rem !important;
    margin: 0 !important;
  }

  .header-bottom__row .ps-contactinfo .header-block__title {
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-label) !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Input del searchbar más grande y prominente */
  #_desktop_ps_searchbar .form-control,
  #_desktop_ps_searchbar input[type="text"],
  #_desktop_ps_searchbar input[type="search"],
  .header-bottom__row .ps-searchbar input {
    height: 3rem;
    border-radius: 0.5rem;
    font-size: var(--fs-base);
  }

  /* Login + Carrito: icono arriba + label abajo (estilo Éxito) */
  .header-bottom__row .header-block {
    margin: 0;
  }

  .header-bottom__row .header-block__action-btn {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.125rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    padding: 0.25rem 0.5rem;
    line-height: 1;
  }

  .header-bottom__row .header-block__icon,
  .header-bottom__row .header-block__action-btn .material-icons {
    font-size: 1.5rem;
    margin: 0;
  }

  .header-bottom__row .header-block__title {
    display: inline !important;
    font-size: var(--fs-xs);
    font-weight: var(--fw-label);
    line-height: 1;
    margin: 0;
    white-space: nowrap;
  }

  .header-bottom__row .header-block__badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
    background-color: var(--ac-green);
    color: var(--ac-white);
    font-size: var(--fs-xs);
    min-width: 1.125rem;
    height: 1.125rem;
    border-radius: 50rem;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

@media (max-width: 991.98px) {
  /* En mobile/tablet ocultamos contacto/login/carrito de displayTop
     (se muestran en su sitio original: displayNav1 + displayNav2 dentro de .header-top) */
  .header-bottom__row > #_desktop_ps_contactinfo,
  .header-bottom__row > #_desktop_ps_customersignin,
  .header-bottom__row > #_desktop_ps_shoppingcart,
  .header-bottom__row > [id*="contactinfo"],
  .header-bottom__row > [id*="customersignin"]:not([id^="_mobile"]),
  .header-bottom__row > [id*="shoppingcart"]:not([id^="_mobile"]),
  .header-bottom__row .ps-contactinfo,
  .header-bottom__row > .ps-contactinfo,
  .header-bottom__row > .ps-customersignin,
  .header-bottom__row > .ps-shoppingcart {
    display: none !important;
    visibility: hidden !important;
  }

  .header {
    display: grid;
    grid-template-areas:
      "top"
      "main";
  }

  .header-top {
    grid-area: top;
  }

  .header-bottom {
    grid-area: main;
  }

  .header-nav-full-width {
    grid-area: main;
    background: transparent;
    border-top: 0;
    align-self: center;
    justify-self: start;
    padding: 0;
    z-index: 10;
  }

  .header-nav-full-width .ps-mainmenu--desktop {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    background: transparent;
    justify-content: flex-start;
  }

  .header-nav-full-width .ps-mainmenu--desktop .ps-mainmenu__mobile-toggle {
    padding-left: 0.5rem;
  }

  .header-bottom__row {
    padding-left: 3rem;
  }
}

/* ─────────── Product miniature (unificado) ─────────── */
/* Filas de cards con misma altura — el contenedor padre (grid/flex) ya estira;
   forzamos que .product-miniature ocupe 100% del track para que el inner se estire. */
.products,
.ce-products,
.ce-product-grid,
.elementor-grid {
  align-items: stretch;
  /* Separación uniforme entre cards (5px por defecto) */
  gap: 5px;
  --bs-gutter-x: 5px;
  --bs-gutter-y: 5px;
  --grid-column-gap: 5px;
  --grid-row-gap: 5px;
}

.product-miniature {
  --ac-card-radius: 8px;
  display: flex;
  height: 100%;
}

.product-miniature > .product-miniature__inner { width: 100%; }

.product-miniature__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: var(--ac-card-radius);
  background: var(--ac-white);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}

.product-miniature__inner:hover {
  box-shadow: 0 6px 18px rgba(9, 42, 51, 0.08);
}

.product-miniature__top {
  position: relative;
  padding: 0.75rem;
}

.product-miniature__image-container {
  margin: 0;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
}

.product-miniature__image-link,
.product-miniature__image-link picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-miniature__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ═══ PRODUCT FLAGS: en flujo, sin tapar la imagen ═══ */
.product-miniature .product-flags {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  gap: 0.35rem 0.5rem;
  align-content: start;
  position: static;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  /* Reserva altura aunque no haya banderas → imágenes alineadas */
  min-height: 1.75rem;
}

/* Si el producto no tiene banderas, ps puede no renderizar <ul> — fallback */
.product-miniature__top::before {
  content: "";
  display: block;
  min-height: 1.75rem;
  margin-bottom: 0.5rem;
}
.product-miniature__top:has(.product-flags)::before { display: none; }

.product-miniature .product-flags .badge {
  border-radius: 5px;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

/* Descuento → columna DERECHA */
.product-miniature .product-flags .badge.discount,
.product-miniature .product-flags .badge.discount-amount,
.product-miniature .product-flags .badge.discount-percentage {
  grid-column: 2;
  justify-self: end;
  background: var(--ac-dark) !important;
  color: var(--ac-white) !important;
}

/* Resto (¡En oferta!, Nuevo, etc.) → columna IZQUIERDA */
.product-miniature .product-flags .badge:not(.discount):not(.discount-amount):not(.discount-percentage) {
  grid-column: 1;
  justify-self: start;
}

.product-miniature .product-flags .badge.on-sale {
  background: var(--ac-green) !important;
  color: var(--ac-white) !important;
}
.product-miniature .product-flags .badge.new {
  background: var(--ac-teal) !important;
  color: var(--ac-white) !important;
}

.product-miniature .product-flags .badge.out_of_stock {
  display: none !important;
}

/* Quickview oculto en la card */
.product-miniature__quickview-button,
.product-miniature__quickview-touch {
  display: none !important;
}

/* Cuerpo */
.product-miniature__bottom {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.5rem 0.9rem 0.9rem;
}

.product-miniature__infos {
  flex: 1 1 auto;
}

.product-miniature__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 300;
  color: var(--ac-dark);
  text-decoration: none;
  line-height: 1.3;
  /* Cap exacto en 2 líneas — evita 3ª línea en móvil */
  min-height: calc(1.3em * 2);
  max-height: calc(1.3em * 2);
  margin-bottom: 0.6rem;
  word-break: break-word;
}

.product-miniature__title:hover { color: var(--ac-green); }

.product-miniature__prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.product-miniature__price {
  font-size: var(--fs-md);       /* 16px (era 1.05rem ≈ 16.8px) */
  font-weight: var(--fw-price);  /* 500 (era 700) */
  color: var(--ac-dark);
}

/* Mobile: precios más compactos */
@media (max-width: 767.98px) {
  .product-miniature__price         { font-size: 14px; }
  .product-miniature__regular-price { font-size: 12px; }
}

/* ═══ PRECIOS EN CARDS (+ módulo Botón Bancolombia opcional) ═══
   Si el módulo no está instalado, .multipleprices no existe y estas reglas
   simplemente no aplican — son inertes. */
.product-miniature__prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

/* 1. Precio tachado — primero */
.product-miniature__prices .product-miniature__discount-price { order: 1; }
.product-miniature__prices .product-miniature__regular-price  { text-decoration: line-through; }

/* 2. Precio principal del tema — segundo */
.product-miniature__prices .product-miniature__price {
  order: 2;
  line-height: 1.2;
}

/* 3. Precio Bancolombia (módulo) — tercero */
.product-miniature__prices .multipleprices {
  order: 3;
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-miniature__prices .multipleprices li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-miniature__prices .multipleprices li p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  line-height: 1.2;
}

/* Override de inline styles del módulo */
.product-miniature__prices .multipleprices li p span[style]        { font-size: 18px !important; }
.product-miniature__prices .multipleprices li p strong span[style] { font-size: 19px !important; }

/* Logo Bancolombia compacto */
.product-miniature__prices .multipleprices li p img[alt="btnbancol"],
.product-miniature__prices .multipleprices li p img[src*="btn_bc"] {
  margin-left: -12px;
  height: 30px !important;
  width: auto !important;
  object-fit: contain !important;
  vertical-align: middle;
}
@media (max-width: 767.98px) {
  .product-miniature__prices .multipleprices li p img[alt="btnbancol"],
  .product-miniature__prices .multipleprices li p img[src*="btn_bc"] {
    height: 24px !important;
  }
}

/* Grid de módulos de productos (Featured products, New products, etc.)
   Override del default del tema (1/2/4) → 2/3/5 */
.module-products .products {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (min-width: 768px) {
  .module-products .products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 992px) {
  .module-products .products {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

.product-miniature__discount-price { display: inline; }

.product-miniature__regular-price {
  font-size: 0.88rem;
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 400;
}

/* Acciones — un único botón full-width */
.product-miniature__actions {
  margin-top: auto;
}

.product-miniature__form {
  display: flex;
  margin: 0;
}

/* Ocultamos selector de cantidad en la card */
.product-miniature__form .quantity-button,
.product-miniature__form .js-quantity-button {
  display: none !important;
}

.product-miniature__add,
.product-miniature__details {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.product-miniature__add {
  background: var(--ac-dark);
  color: var(--ac-white);
  border: 1px solid var(--ac-dark);
}

.product-miniature__add:hover {
  background: var(--ac-green);
  border-color: var(--ac-green);
  color: var(--ac-white);
}

.product-miniature__details {
  background: transparent;
  color: var(--ac-dark);
  border: 1px solid var(--ac-dark);
}

.product-miniature__details:hover {
  background: var(--ac-dark);
  color: var(--ac-white);
}

/* Quitamos icono y forma cuadrada del botón: solo texto, full-width */
.product-miniature__add.btn-square-icon { width: 100%; height: auto; }
.product-miniature__add > .material-icons { display: none; }
.product-miniature__add .product-miniature__add-text { display: inline; }