@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* YGE: Fuente global Inter para toda la web (anula Tailwind ui-sans-serif / system-ui) */
:root {
    --yge-font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html,
#html-body,
body,
.page-wrapper,
.page-main,
.font-sans,
[class*="font-sans"],
button,
input,
select,
textarea,
optgroup {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* YGE: overflow-x: clip previene scroll horizontal sin romper position: sticky */
html,
#html-body,
body,
.page-wrapper {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* YGE: anula el margin-block del tema en .page-main; el espacio se controla por bloque. */
.page-main {
    margin-block: 0 !important;
}

#wachat {
    --wa-green: #185601;
    --wa-green-dk: #0f3d00;
    --wa-text: #ffffff;
    --wa-offset-x: 24px;
    --wa-offset-y: 24px;
    --wa-icon-size: 50px;
    --wa-hex-width: 64px;
    /* YGE: en % (no px), así el corte se mantiene proporcional a cualquier alto. */
    --wa-v-cut: 25%;
    --wa-border: #ffffff;
    --wa-border-blur: 0.5px;

    --wa-icon-url: url("/media/wysiwyg/wsp-logo.png");

    --wa-hex-clip: polygon(
        0 var(--wa-v-cut),
        calc(100% - var(--wa-hex-width)) var(--wa-v-cut),
        calc(100% - (var(--wa-hex-width) / 2)) 0,
        100% var(--wa-v-cut),
        100% calc(100% - var(--wa-v-cut)),
        calc(100% - (var(--wa-hex-width) / 2)) 100%,
        calc(100% - var(--wa-hex-width)) calc(100% - var(--wa-v-cut)),
        0 calc(100% - var(--wa-v-cut))
    );

    --wa-outline:
        drop-shadow(0 0 var(--wa-border-blur) var(--wa-border))
        drop-shadow(0 0 var(--wa-border-blur) var(--wa-border))
        drop-shadow(0 0 var(--wa-border-blur) var(--wa-border))
        drop-shadow(0 0 var(--wa-border-blur) var(--wa-border))
        drop-shadow(0 0 var(--wa-border-blur) var(--wa-border))
        drop-shadow(0 0 var(--wa-border-blur) var(--wa-border));
}

#wachat {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
}
#wachat * { box-sizing: border-box; }

#wachat a img { display: none !important; }

#wachat a {
    position: fixed !important;
    right: var(--wa-offset-x) !important;
    bottom: var(--wa-offset-y) !important;
    left: auto !important;
    top: auto !important;
    z-index: 9999 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-align: left !important;
    color: transparent !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 64px !important;
    max-height: none !important;
    padding: 0 calc(var(--wa-hex-width) + 16px) 0 16px !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-decoration: none !important;
    line-height: 1 !important;

    filter: var(--wa-outline) drop-shadow(0 2px 4px rgba(0, 0, 0, .22)) !important;
    transition: transform .18s ease, filter .18s ease !important;
}
#wachat a:hover {
    transform: translateY(-2px) !important;
    filter: var(--wa-outline) drop-shadow(0 4px 7px rgba(0, 0, 0, .28)) !important;
}

#wachat a::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background:
        var(--wa-icon-url) right calc((var(--wa-hex-width) - var(--wa-icon-size)) / 2) center / var(--wa-icon-size) var(--wa-icon-size) no-repeat,
        var(--wa-green) !important;
    transition: background-color .18s ease !important;
    clip-path: var(--wa-hex-clip) !important;
}
#wachat a:hover::before { background-color: var(--wa-green-dk) !important; }

#wachat a::after {
    content: "¡Cotiza aquí!" !important;
    position: relative !important;
    z-index: 1 !important;
    color: var(--wa-text) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

#wachat .btn-mobile { display: none !important; }
@media (max-width: 768px) {
    #wachat .btn-web { display: none !important; }
    #wachat .btn-mobile { display: inline-flex !important; }
    #wachat a {
        --wa-offset-x: 16px;
        --wa-offset-y: 16px;
        --wa-icon-size: 69px;
        --wa-hex-width: 70px;
        min-height: 79px !important;
        padding: 0 calc(var(--wa-hex-width) + 10px) 0 12px !important;
        max-width: calc(60vw - (2 * var(--wa-offset-x))) !important;
        overflow: hidden !important;
    }
    #wachat a::after {
        font-size: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #wachat a { transition: none !important; }
    #wachat a:hover { transform: none !important; }
}


/* Minicart */
#cart-drawer .btn.btn-primary {
    background-color: #FF5901;
}

#cart-drawer .btn.btn-secondary {
    border-color: #FF5901;
    color: #FF5901;
}


:root {
  --yge-green: #185601;
  --yge-orange: #FF5901;
  --yge-gray: #d7d4d7;
  --yge-border-light: #e5e5e5;
}

header.page-header,
.page-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
}

#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--yge-border-light, #e5e5e5) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  width: 100% !important;
}

#header::before,
#header::after {
  display: none !important;
  content: none !important;
}

#header .container > div:has(> a[aria-label="Go to Home page"]) img {
  max-width: 150px;
  height: auto;
}

#header .navigation a.level-0 {
  color: var(--yge-green);
  font-weight: 600;
  font-size: 14px;
}

#header .navigation li.level-0:hover,
#header .navigation li.level-0[data-active] {
  border-color: var(--yge-orange) !important;
}

#header .navigation a.level-0:hover {
  color: var(--yge-orange);
}

#header .navigation button.group svg {
  color: var(--yge-green);
}

#header .navigation li.level-0:not(:has(button)) a.level-0 {
  color: var(--yge-green);
  font-weight: 700;
}

#header .navigation ul[id^="category-node-"] {
  border-top: 3px solid var(--yge-orange);
  border-radius: 6px;
}

#header .navigation ul[id^="category-node-"] li:not(:last-child) > a {
  border-bottom: 1px solid var(--yge-border-light);
}

#header .navigation ul[id^="category-node-"] a {
  color: var(--yge-green);
  font-weight: 700;
  font-size: 13.5px;
}

#header .navigation ul[id^="category-node-"] a:hover {
  color: var(--yge-orange);
  background-color: #f5f5f5;
}

/* Estado activo/abierto: texto e ícono en naranja, igual que en hover */
#header .navigation li.level-0[data-active] > span > a.level-0 {
  color: var(--yge-orange);
}

#header .navigation li.level-0[data-active] > span > a.level-0 .yge-nav-icon-wrap::before,
#header .navigation li.level-0[data-active] > span > a.level-0 .yge-nav-icon-wrap::after {
  background-color: var(--yge-orange);
}

#header .navigation button.group[aria-expanded="true"] svg {
  color: var(--yge-orange);
}

#header .navigation a.level-0 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#header .navigation a.level-0 .yge-nav-icon-wrap {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

#header .navigation a.level-0 .yge-nav-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--yge-gray);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -2;
  pointer-events: none;
  transition: background-color 0.2s ease;
}

#header .navigation a.level-0 .yge-nav-icon-wrap::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: #ffffff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
  pointer-events: none;
  transition: background-color 0.2s ease;
}

#header .navigation a.level-0:hover .yge-nav-icon-wrap::before,
#header .navigation a.level-0:hover .yge-nav-icon-wrap::after {
  background-color: var(--yge-orange);
}

#header .navigation a.level-0 img.yge-nav-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* YGE: 2 imágenes apiladas, togglean por opacity (antes JS cambiaba el src). */
.yge-nav-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}

.yge-nav-icon--hover {
  opacity: 0;
}

a.level-0:hover .yge-nav-icon--normal,
a.level-0.yge-nav-active .yge-nav-icon--normal,
li[data-level="0"].yge-accordion-open > button .yge-nav-icon--normal {
  opacity: 0;
}

a.level-0:hover .yge-nav-icon--hover,
a.level-0.yge-nav-active .yge-nav-icon--hover,
li[data-level="0"].yge-accordion-open > button .yge-nav-icon--hover {
  opacity: 1;
}

/* #compare-link: no se renderiza (default false en header.phtml) */

#compare-link,
#customer-menu,
#menu-cart-icon {
  color: var(--yge-green);
  position: relative;
  z-index: 0;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

#compare-link:hover,
#customer-menu:hover,
#menu-cart-icon:hover {
  background-color: transparent !important;
  color: #ffffff;
}

#compare-link::before,
#customer-menu::before,
#menu-cart-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--yge-gray);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -2;
  pointer-events: none;
  transition: background-color 0.2s ease;
}

#compare-link::after,
#customer-menu::after,
#menu-cart-icon::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: #ffffff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
  pointer-events: none;
  transition: background-color 0.2s ease;
}

#compare-link:hover::before,
#customer-menu:hover::before,
#menu-cart-icon:hover::before,
#compare-link:hover::after,
#customer-menu:hover::after,
#menu-cart-icon:hover::after {
  background-color: var(--yge-green) !important;
}

#header .bg-primary.text-on-primary {
  background-color: var(--yge-orange) !important;
}

/* Badges en la esquina superior derecha del hexágono (Favoritos y Carrito) */
#compare-link > span[x-text="itemCount"],
#menu-cart-icon > span[x-text="summaryCount"] {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  background-color: var(--yge-orange, #ff5901) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  z-index: 2 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

#compare-link > span[x-text="itemCount"].yge-badge-hidden {
  display: none !important;
}

.yge-account-label,
.yge-cart-label {
  display: none;
}

#compare-link:focus,
#customer-menu:focus,
#menu-cart-icon:focus {
  outline: none;
}

#compare-link:focus-visible::after,
#customer-menu:focus-visible::after,
#menu-cart-icon:focus-visible::after {
  outline: 2px solid var(--yge-orange);
  outline-offset: 2px;
}


@media (min-width: 1024px) {
  nav[aria-labelledby="customer-menu"] {
    display: none !important;
  }

  .yge-account-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
    font-size: 12px;
    margin: 0 10px 0 6px;
    white-space: nowrap;
  }

  .yge-account-label__greeting {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--yge-green, #185601) !important;
  }

  .yge-account-label__links {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #555555 !important;
  }

  .yge-account-label__links a {
    display: inline;
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    color: #555555 !important;
    text-decoration: none;
  }

  .yge-account-label__links a:hover {
    color: var(--yge-orange, #ff5901) !important;
    text-decoration: underline;
  }

  .yge-cart-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
    font-size: 12px;
    margin: 0 10px 0 6px;
    white-space: nowrap;
  }

  .yge-cart-label__price {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--yge-green, #185601) !important;
  }

  .yge-cart-label__text {
    font-weight: 500 !important;
    font-size: 11px !important;
    color: #555555 !important;
  }
}

@media (min-width: 1024px) {
  #header .container {
    flex-wrap: wrap !important;
    align-items: center;
    row-gap: 0.75rem;
  }

  #header .container > div:has(> a[aria-label="Go to Home page"]) {
    order: 1;
  }

  /* #menu-search-icon: oculto con lg:hidden en header.phtml */

  #search-content {
    order: 2;
    flex: 1 1 420px;
    max-width: 760px;
    margin: 0 1rem 0 0.5rem;
    position: static !important;
    display: block !important;
    border: 1px solid var(--yge-border-light);
    border-radius: 0;
    box-shadow: none;
  }

  #search-content .form-input::placeholder {
    color: #8a8a8a;
    opacity: 1;
  }

  #search-content .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  #search-content #search_mini_form {
    display: flex;
  }

  #search-content .form-input {
    border: none;
    padding: 0.6rem 0.9rem;
    font-size: 14px;
    width: 100%;
  }

  #search-content .form-input:focus {
    outline: none;
    box-shadow: none;
  }

  #search-content kbd {
    display: none;
  }

  #search-content button[type="submit"] {
    background-color: var(--yge-green);
    border-color: var(--yge-green);
    border-radius: 0;
  }

  #search-content button[type="submit"]:hover {
    background-color: var(--yge-orange);
    border-color: var(--yge-orange);
  }

  #header .container > .flex.items-center {
    order: 3;
    flex: 0 0 auto;
    z-index: 25;
  }

  #header .navigation {
    order: 4;
    flex: 1 1 100%;
    width: 100%;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--yge-border-light);
    align-items: center;
    justify-content: space-between;
  }

  #header .navigation ul.flex {
    flex-wrap: nowrap;
    gap: 1.25rem;
    justify-content: flex-start;
  }

  #header .navigation a.level-0 {
    font-size: 13.5px;
    white-space: nowrap;
  }
}

.yge-cta-marcas {
  --yge-cta-cut: 10px;

  position: relative;
  z-index: 0;
  display: inline-flex;
  flex: 0 0 auto;
  text-decoration: none;
}

.yge-cta-marcas::before {
  content: '';
  position: absolute;
  inset: -3px;
  background-color: #FF9F52;
  -webkit-clip-path: polygon(
    var(--yge-cta-cut) 0,
    calc(100% - var(--yge-cta-cut)) 0,
    100% var(--yge-cta-cut),
    100% calc(100% - var(--yge-cta-cut)),
    calc(100% - var(--yge-cta-cut)) 100%,
    var(--yge-cta-cut) 100%,
    0 calc(100% - var(--yge-cta-cut)),
    0 var(--yge-cta-cut)
  );
  clip-path: polygon(
    var(--yge-cta-cut) 0,
    calc(100% - var(--yge-cta-cut)) 0,
    100% var(--yge-cta-cut),
    100% calc(100% - var(--yge-cta-cut)),
    calc(100% - var(--yge-cta-cut)) 100%,
    var(--yge-cta-cut) 100%,
    0 calc(100% - var(--yge-cta-cut)),
    0 var(--yge-cta-cut)
  );
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
  transform-origin: center;
  animation: yge-cta-glow 1.8s ease-out infinite;
}

.yge-cta-marcas__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--yge-orange);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 0.55rem 1.6rem;
  white-space: nowrap;
  transform-origin: center;
  clip-path: polygon(
    var(--yge-cta-cut) 0,
    calc(100% - var(--yge-cta-cut)) 0,
    100% var(--yge-cta-cut),
    100% calc(100% - var(--yge-cta-cut)),
    calc(100% - var(--yge-cta-cut)) 100%,
    var(--yge-cta-cut) 100%,
    0 calc(100% - var(--yge-cta-cut)),
    0 var(--yge-cta-cut)
  );
  transition: background-color 0.2s ease;
  animation: yge-cta-breathe 1.6s ease-in-out infinite;
}

.yge-cta-marcas:hover .yge-cta-marcas__inner {
  background-color: #e04f00;
  animation-play-state: paused;
}

.yge-cta-marcas--mobile {
  display: none;
}

@keyframes yge-cta-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

@keyframes yge-cta-glow {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.3); }
}

@media (max-width: 1024px) {
  #search-content {
    max-width: 260px;
  }

  .yge-cta-marcas__inner {
    padding: 0.5rem 1.3rem;
    font-size: 12px;
  }
}

@media (max-width: 1023px) {
  .yge-cta-marcas {
    display: none;
  }

  #header .container {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
  }


  #header .container > div:has(> a[aria-label="Go to Home page"]) {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
  }

  #header .container > div:has(> a[aria-label="Go to Home page"]) > a {
    justify-content: flex-start;
  }

  .yge-cta-marcas--mobile {
    display: inline-flex;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    min-width: 0;
    max-width: 55%;
    overflow: hidden;
  }

  [x-data="initMobileMenu"] {
    grid-column: 1;
    grid-row: 2;
  }

  [x-data="initMobileMenu"] > button svg {
    stroke-width: 2.5;
  }

  /* Sidebar más angosto (por defecto ocupa el 100% del ancho) */
  [x-data="initMobileMenu"] dialog {
    width: 380px !important;
    max-width: 85vw !important;
  }

  /* ===== Drawer: header verde con logo + "Cerrar" ===== */
  .yge-drawer-header {
    background-color: var(--yge-green);
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
      url('/media/wysiwyg/trama.png');
    background-repeat: repeat;
    border-bottom: none !important;
  }

  .yge-drawer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 36px 24px;
  }

  .yge-drawer-logo img {
    max-width: 150px;
    height: auto;
  }

  .yge-drawer-header .flex.justify-between {
    justify-content: flex-start !important;
    padding-bottom: 52px !important;
  }

  .yge-drawer-header .flex.justify-between > div:empty {
    display: none;
  }

  .yge-drawer-close-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #ffffff !important;
    order: -1;
  }

  .yge-drawer-close-btn svg {
    background-color: var(--yge-orange);
    border-radius: 999px;
    padding: 4px;
    box-sizing: content-box;
    color: #ffffff;
  }

  .yge-drawer-close-text {
    font-weight: 600;
    font-size: 14px;
  }

  /* Corte trapezoidal verde -> blanco: margin-top negativo + clip-path recorta esquinas. */
  [x-data="initMobileMenu"] dialog > div.grow {
    --yge-notch-inset: 24px;
    --yge-notch-depth: 26px;
    clip-path: polygon(
      var(--yge-notch-inset) 0,
      calc(100% - var(--yge-notch-inset)) 0,
      100% var(--yge-notch-depth),
      100% 100%,
      0 100%,
      0 var(--yge-notch-depth)
    );
    margin-top: calc(var(--yge-notch-depth) * -1);
    padding-top: var(--yge-notch-depth);
    position: relative;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
  }

  /* El listado no crece; el bloque gris ocupa el resto y llega hasta abajo. */
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] {
    flex: 0 0 auto;
  }

  /* Última fila real (sin "Otros"): sin borde inferior, con aire antes del corte. */
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] > ul > li:last-child,
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] > ul > li:last-child > button,
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] > ul > li:last-child > a {
    border-bottom: none !important;
  }

  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] > ul > li:last-child {
    padding-bottom: 18px;
  }

  /* Corte trapezoidal blanco -> gris: mismo truco, más pronunciado. */
  .yge-drawer-quicklinks {
    --yge-notch-inset: 24px;
    --yge-notch-depth: 18px;
    clip-path: polygon(
      var(--yge-notch-inset) 0,
      calc(100% - var(--yge-notch-inset)) 0,
      100% var(--yge-notch-depth),
      100% 100%,
      0 100%,
      0 var(--yge-notch-depth)
    );
    margin-top: calc(var(--yge-notch-depth) * -1);
    padding-top: calc(var(--yge-notch-depth) + 20px);
    position: relative;
    background-color: #ececec;
    display: flex;
    flex: 1 0 auto;
  }

  /* ===== Drawer: íconos de categoría con anillo hexagonal (mismo patrón que desktop) ===== */
  .yge-nav-icon-wrap--mobile {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 12px;
    flex: 0 0 auto;
  }

  .yge-nav-icon-wrap--mobile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--yge-gray);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -2;
    pointer-events: none;
  }

  .yge-nav-icon-wrap--mobile::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: #ffffff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
    pointer-events: none;
  }

  .yge-nav-icon--mobile {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  /* ===== Drawer: quitar el recuadro del botón chevron (>) de cada categoría ===== */
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="0"] > button > span.btn {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Drawer: acordeón inline (initMobileSubMenu en Alpine) en vez de overlay a pantalla completa. */
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="0"] > ul {
    display: block !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    overflow: hidden !important;
    background-color: #f7f7f7 !important;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="0"].yge-accordion-open > ul {
    opacity: 1;
  }

  /* YGE: la fila "volver" ya no existe en el template. */
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="1"] > a {
    padding-left: 48px;
    font-weight: 600;
    color: var(--yge-green);
  }

  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="1"] > a:hover {
    color: var(--yge-orange);
  }

  /* Chevron: apunta hacia abajo cerrado, hacia arriba abierto */
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="0"] > button > span.btn svg {
    transition: transform 0.2s ease;
    transform: rotate(90deg);
  }

  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="0"].yge-accordion-open > button > span.btn svg {
    transform: rotate(-90deg);
  }

  /* Estado expandido: texto, chevron y anillo hexagonal en naranja */
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="0"].yge-accordion-open > button {
    color: var(--yge-orange);
  }

  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="0"].yge-accordion-open > button .yge-nav-icon-wrap--mobile::before,
  [x-data="initMobileMenu"] nav[aria-label="Mobile Main Menu"] li[data-level="0"].yge-accordion-open > button .yge-nav-icon-wrap--mobile::after {
    background-color: var(--yge-orange) !important;
  }

  /* ===== Drawer: sección Favoritos / Carrito / Mi Cuenta ===== */
  .yge-drawer-quicklinks {
    padding-right: 24px;
    padding-bottom: 22px;
    padding-left: 24px;
    flex-direction: column;
    gap: 18px;
  }

  .yge-drawer-quicklink {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--yge-green);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
  }

  .yge-drawer-quicklink__hex {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    background-color: var(--yge-green);
    color: #ffffff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  .yge-drawer-quicklink__hex svg {
    width: 26px;
    height: 26px;
  }

  /* YGE: 2 imágenes apiladas, togglean por opacity. */
  .yge-quicklink-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease;
  }

  .yge-quicklink-img--hover {
    opacity: 0;
  }

  .yge-drawer-quicklink:hover .yge-quicklink-img--normal {
    opacity: 0;
  }

  .yge-drawer-quicklink:hover .yge-quicklink-img--hover {
    opacity: 1;
  }

  .yge-drawer-quicklink__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--yge-orange);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  /* #menu-search-icon: oculto con lg:hidden en header.phtml */

  #search-content {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    max-width: none;
    margin: 0;
    position: static !important;
    display: flex !important;
    align-items: stretch;
    border: 1px solid var(--yge-border-light);
    box-shadow: none;
  }

  #search-content .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
  }

  #search-content search {
    flex: 1 1 auto !important;
    min-width: 0;
    max-width: none;
    display: flex !important;
    align-items: stretch;
  }

  #search-content #search_mini_form {
    flex: 1 1 auto !important;
    min-width: 0;
    display: flex !important;
    max-width: none !important;
  }

  #search-content .input-group.grow {
    flex: 1 1 auto !important;
    min-width: 0;
  }

  #search-content .form-input {
    border: none;
    padding: 0.5rem 0.7rem;
    font-size: 14px;
    width: 100%;
    min-width: 0;
  }

  #search-content .form-input::placeholder {
    color: #8a8a8a;
    opacity: 1;
  }

  #search-content kbd {
    display: none;
  }

  #search-content button[type="submit"] {
    background-color: var(--yge-green);
    border-color: var(--yge-green);
    border-radius: 0;
  }

  #header .container > .flex.items-center {
    grid-column: 3;
    grid-row: 2;
  }

  .navigation {
    display: none !important;
  }

  #compare-link,
  [x-data="initCustomerMenu"] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yge-cta-marcas__inner {
    transition: none;
    animation: none;
  }

  .yge-cta-marcas::before {
    animation: none;
    opacity: 0.35;
  }
}



/* ── Fondo blanco para toda la web ── */
body,
#maincontent,
.page-main,
.page-wrapper,
#html-body {
    background-color: #ffffff !important;
}

/* ── Reducir altura y centrar contenido del header ── */
#header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#header .container {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
    min-height: auto !important;
    align-items: center !important;
}

/* Centrar verticalmente los bloques principales (logo, buscador, accesos rápidos) */
#header .container > div:not([x-data="initMobileMenu"]) {
    display: flex !important;
    align-items: center !important;
}

/* Ocultar menú hamburguesa móvil en pantallas desktop (>=1024px) */
@media (min-width: 1024px) {
    #header [x-data="initMobileMenu"],
    #header .lg\:hidden {
        display: none !important;
    }
}

/* Logo centrado verticalmente */
#header .container a[aria-label="Go to Home page"] img,
#header .container > div:has(> a[aria-label="Go to Home page"]) img {
    max-width: 145px !important;
    width: 145px !important;
    max-height: 48px !important;
    height: auto !important;
    display: block !important;
}

#customer-menu svg,
#menu-cart-icon svg {
    color: var(--yge-green, #185601);
    transition: color 0.2s ease;
}

#customer-menu:hover svg,
#menu-cart-icon:hover svg {
    color: #ffffff !important;
}

.yge-action-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Menú de categorías centrado en la fila inferior */
.navigation {
    margin-top: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    width: 100% !important;
    justify-content: center !important;
}

.navigation nav {
    width: 100% !important;
}

.navigation nav ul.flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 1.2rem !important;
}

/* Íconos rápidos de usuario/carrito centrados verticalmente */
#header .flex.items-center.gap-2,
#header .flex.items-center {
    align-items: center !important;
}

/* ── Barra de búsqueda unificada (Input + Botón verde pegados) ──
   YGE: solo desktop — sin @media pisaba el bloque mobile y forzaba scroll horizontal. */
@media (min-width: 1024px) {
    #header #search-content {
        position: static !important;
        display: block !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header #search-content > .container,
    #header #search-content .container {
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    #header search,
    #header .minisearch {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
    }

    #header #search_mini_form {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        position: relative !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 !important;
    }

    #header #search_mini_form .input-group.relative.grow,
    #header #search_mini_form .input-group {
        position: relative !important;
        display: flex !important;
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    #header #search_mini_form input[type="search"],
    #header #search_mini_form input[type="text"],
    #header #search_mini_form .form-input {
        width: 100% !important;
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 16px !important;
        border: 1px solid #d1d5db !important;
        border-right: none !important;
        border-radius: 4px 0 0 4px !important;
        background-color: #ffffff !important;
        font-size: 0.9rem !important;
        color: #374151 !important;
        box-sizing: border-box !important;
        outline: none !important;
    }

    #header #search_mini_form input::placeholder {
        color: #9ca3af !important;
        font-size: 0.9rem !important;
    }

    #header #search_mini_form kbd {
        display: none !important;
    }

    #header #search_mini_form button[type="submit"],
    #header #search_mini_form button.btn,
    #header #search_mini_form button {
        position: static !important;
        width: 44px !important;
        height: 42px !important;
        min-width: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: var(--yge-green, #185601) !important;
        color: #ffffff !important;
        border: 1px solid var(--yge-green, #185601) !important;
        border-radius: 0 4px 4px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    #header #search_mini_form button svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #ffffff !important;
        fill: none !important;
    }
}

/* ── Botones / Íconos del header (Favoritos, Cuenta, Carrito) ── */
/* YGE: compare.phtml ya no emite clases hidden/invisible, no hace falta pisarlas. */

#compare-link,
#customer-menu,
#menu-cart-icon {
    color: var(--yge-green, #185601);
    position: relative;
    z-index: 0;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
}

.yge-action-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: opacity 0.15s ease;
}

/* YGE: 2 imágenes apiladas, togglean por opacity. */
.yge-action-icon--hover {
    opacity: 0;
}

#compare-link:hover .yge-action-icon--normal,
#customer-menu:hover .yge-action-icon--normal,
#menu-cart-icon:hover .yge-action-icon--normal {
    opacity: 0;
}

#compare-link:hover .yge-action-icon--hover,
#customer-menu:hover .yge-action-icon--hover,
#menu-cart-icon:hover .yge-action-icon--hover {
    opacity: 1;
}

/* ── Estilos específicos para la estructura HTML de header.html ── */
#header {
    position: relative !important;
    z-index: 1000 !important;
    overflow: visible !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--yge-border-light, #e5e5e5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ── Cortes Diagonales del Header ── */
/* YGE: ::after=verde sin recortar detrás, ::before=blanco recortado encima — donde no cubre se ve el verde. */
@media (min-width: 768px) {
    #header::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        background-color: #185601 !important;
        z-index: -2 !important;
        pointer-events: none !important;
    }

    #header::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        background-color: #ffffff !important;
        z-index: -1 !important;
        clip-path: polygon(
            32px 0,
            calc(100% - 32px) 0,
            100% 28px,
            100% 100%,
            0 100%,
            0 28px
        ) !important;
        pointer-events: none !important;
    }
}

/* ── Contenedores de Navegación y Desplegables en Z-Index Superior ── */
#header .container,
#header .navigation,
#header .navigation nav,
#header .navigation ul,
#header .navigation li {
    overflow: visible !important;
}

#header nav[aria-label="Main menu"] ul[id^="category-node-"],
#header .navigation ul.absolute,
#header .navigation li.level-0 > ul {
    position: absolute !important;
    z-index: 999999 !important;
    background-color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--yge-border-light, #e5e5e5) !important;
    border-radius: 6px !important;
}

/* ── Categoría activa seleccionada en el Header Nav ── */
.navigation a.level-0.yge-nav-active,
.navigation a.level-0.yge-nav-active span {
    color: var(--yge-orange, #ff5901) !important;
    font-weight: 700 !important;
}

.navigation a.level-0.yge-nav-active .yge-nav-icon-wrap::before,
.navigation a.level-0.yge-nav-active .yge-nav-icon-wrap::after {
    background-color: var(--yge-orange, #ff5901) !important;
}

/* ── Migas de pan (Breadcrumbs Orange Bar) ── */
nav.breadcrumbs,
.breadcrumbs {
    position: relative !important;
    z-index: 1 !important;
    background-color: var(--yge-orange, #ff5901) !important;
    color: #ffffff !important;
    padding: 10px 0 !important;
    margin-bottom: 0px !important;
    box-shadow: 0 4px 12px rgba(255, 89, 1, 0.2) !important;
}

nav.breadcrumbs .container,
.breadcrumbs .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

nav.breadcrumbs ol.items,
.breadcrumbs ol.items {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

nav.breadcrumbs li.item,
.breadcrumbs li.item {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

nav.breadcrumbs li.item a,
.breadcrumbs li.item a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: opacity 0.2s ease !important;
}

nav.breadcrumbs li.item a:hover,
.breadcrumbs li.item a:hover {
    opacity: 0.85 !important;
    text-decoration: underline !important;
}

nav.breadcrumbs li.item .separator,
.breadcrumbs li.item .separator {
    color: #ffffff !important;
    padding: 0 8px !important;
    opacity: 0.9 !important;
}

nav.breadcrumbs li.item span[aria-current="page"],
.breadcrumbs li.item span[aria-current="page"] {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Ocultar el nombre del producto en las migas de pan solo para Mobile */
@media (max-width: 767px) {
    body.catalog-product-view nav.breadcrumbs li.item.product,
    body.catalog-product-view .breadcrumbs li.item.product,
    body.catalog-product-view nav.breadcrumbs li.item:last-child:not(:first-child),
    body.catalog-product-view .breadcrumbs li.item:last-child:not(:first-child) {
        display: none !important;
    }

    /* Espaciado del título de producto en mobile respecto al header / breadcrumbs */
    body.catalog-product-view h1.page-title,
    body.catalog-product-view .page-title,
    body.catalog-product-view [data-ui-id="page-title-wrapper"],
    body.catalog-product-view .top-container > .container,
    body.catalog-product-view .breadcrumbs + .container {
        margin-top: 24px !important;
        padding-top: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* Header y Breadcrumbs con 12px de margen lateral en mobile */
    #header .container,
    header .container,
    .header-top,
    .topbar .container,
    nav.breadcrumbs .container,
    .breadcrumbs .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Orden en Mobile: 1. Galería -> 2. Panel de Compra -> 3. Pestañas de Detalle */
    body.catalog-product-view section[aria-label='Product Info'],
    body.catalog-product-view .product-info-main > section {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    body.catalog-product-view .yge-product-media-col {
        display: contents !important;
    }

    body.catalog-product-view #gallery,
    body.catalog-product-view .product.media {
        order: 1 !important;
    }

    body.catalog-product-view .yge-product-info-col {
        order: 2 !important;
    }

    body.catalog-product-view .yge-product-tabs-card,
    body.catalog-product-view .product.info.detailed,
    body.catalog-product-view .product-info-details,
    body.catalog-product-view [data-tabs-container] {
        order: 3 !important;
        margin-top: 24px !important;
    }

    /* Márgenes laterales del contenido en Mobile (5px a los lados) */
    body.catalog-product-view .page-main,
    body.catalog-product-view #maincontent {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    body.catalog-product-view .columns .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    body.catalog-product-view section[aria-label='Product Info'],
    body.catalog-product-view .yge-product-info-col,
    body.catalog-product-view .yge-product-info-col .card,
    body.catalog-product-view .product-info-main .card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Fila de SKU y Stock en una sola fila */
    body.catalog-product-view .yge-sku-stock-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }

    body.catalog-product-view #product-details,
    body.catalog-product-view #product-details .attribute-sku {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Fila de Acción: Añadir al carrito + Cantidad + Wishlist */
    body.catalog-product-view .yge-product-info-col .card > div.flex.items-center.gap-2.mt-4,
    body.catalog-product-view .product-info-main .card > div.flex.items-center.gap-2.mt-4 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        margin-top: 16px !important;
        padding: 0 !important;
    }

    /* Botón Añadir al Carrito con texto e ícono visible */
    body.catalog-product-view #product-addtocart-button {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 44px !important;
        padding: 0 10px !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        gap: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #FF5900 !important;
        border: none !important;
        border-radius: 0 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    /* Stepper de Cantidad compacto */
    body.catalog-product-view .yge-qty-stepper {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }

    body.catalog-product-view .yge-qty-btn {
        width: 32px !important;
        height: 44px !important;
        background-color: #ffffff !important;
        border: 1.5px solid #d1d5db !important;
        border-radius: 0 !important;
        color: #374151 !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    body.catalog-product-view input[name='qty'] {
        width: 36px !important;
        height: 44px !important;
        background-color: #195700 !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        text-align: center !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Botón Wishlist Hexagonal visible a la derecha */
    body.catalog-product-view #add-to-wishlist,
    body.catalog-product-view [data-addto="wishlist"] {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Botón Cotización Mayorista */
    body.catalog-product-view .yge-wholesale-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 44px !important;
        background-color: #195700 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        margin-top: 10px !important;
        border-radius: 0 !important;
        gap: 8px !important;
    }

    /* Pestañas de detalle (Card con borde 1px gris, tabs con 2 líneas y contenido negro) */
    body.catalog-product-view .yge-product-tabs-card {
        border: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-color: #ffffff !important;
        padding: 0 !important;
        margin-top: 24px !important;
        overflow: hidden !important;
    }

    body.catalog-product-view .yge-product-tabs {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        border-bottom: 1px solid #e5e7eb !important;
        background-color: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.catalog-product-view .yge-product-tab {
        flex: 1 1 0px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 10px 6px !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-transform: uppercase !important;
        border: none !important;
        border-right: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

    body.catalog-product-view .yge-product-tab:last-child {
        border-right: none !important;
    }

    body.catalog-product-view .yge-product-tab--active {
        background-color: #FF5900 !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        border-color: #FF5900 !important;
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%) !important;
    }

    body.catalog-product-view .yge-product-tab-panel {
        padding: 18px 14px !important;
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    body.catalog-product-view .yge-product-tab-panel,
    body.catalog-product-view .yge-product-tab-panel * {
        color: #000000 !important;
    }

    body.catalog-product-view .yge-product-tab-panel p,
    body.catalog-product-view .yge-product-tab-panel li,
    body.catalog-product-view .yge-product-tab-panel span,
    body.catalog-product-view .yge-product-tab-panel div {
        color: #000000 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

/* Bloque "Valoraciones y comentarios" Full Width (Mobile y Desktop) */
body.catalog-product-view .yge-reviews {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #003900 !important;
    padding: 44px 10px 36px !important;
    margin-top: 40px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.catalog-product-view .yge-reviews__inner {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

body.catalog-product-view .yge-reviews-carousel-wrap {
    margin: 0 auto 20px !important;
    max-width: 1340px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.catalog-product-view .yge-reviews-carousel {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.catalog-product-view .yge-reviews-carousel__nav {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 999px !important;
    border: 1.5px solid #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.catalog-product-view .yge-reviews-carousel__viewport {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    padding-top: 26px !important;
    margin-top: -26px !important;
    padding-bottom: 10px !important;
    margin-bottom: -10px !important;
}

body.catalog-product-view .yge-reviews-carousel__track {
    display: flex !important;
    transition: transform 0.3s ease !important;
    width: 100% !important;
}

body.catalog-product-view .yge-review-card {
    position: relative !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin: 24px 0 14px 0 !important;
    background-color: transparent !important;
    padding: 26px 20px 20px !important;
    text-align: left !important;
}

body.catalog-product-view .yge-review-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #ffffff !important;
    z-index: 0 !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px)) !important;
}

body.catalog-product-view .yge-review-card::after {
    display: none !important;
    content: none !important;
}

body.catalog-product-view .yge-review-card > * {
    position: relative !important;
    z-index: 1 !important;
}

@media (min-width: 640px) {
    body.catalog-product-view .yge-review-card {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        margin: 24px 0 14px 0 !important;
        padding: 28px 30px 22px 30px !important;
    }

    body.catalog-product-view .yge-review-card::before {
        inset: 0 10px !important;
    }

    body.catalog-product-view .yge-review-card__avatar {
        left: 30px !important;
    }
}

@media (min-width: 1024px) {
    body.catalog-product-view .yge-review-card {
        flex: 0 0 33.333333% !important;
        width: 33.333333% !important;
        max-width: 33.333333% !important;
        min-width: 33.333333% !important;
        margin: 24px 0 14px 0 !important;
        padding: 30px 32px 24px 32px !important;
    }

    body.catalog-product-view .yge-review-card::before {
        inset: 0 12px !important;
    }

    body.catalog-product-view .yge-review-card__avatar {
        left: 34px !important;
    }
}

body.catalog-product-view .yge-review-card__avatar {
    position: absolute !important;
    top: -18px !important;
    left: 20px !important;
    z-index: 2 !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ff5901 !important;
    color: #ffffff !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
}

body.catalog-product-view .yge-review-card__name {
    display: block !important;
    margin-top: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

body.catalog-product-view .yge-review-card__text {
    margin: 6px 0 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #374151 !important;
}

body.catalog-product-view .yge-review-card__stars {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    color: #FF5900 !important;
    font-size: 14px !important;
}

body.catalog-product-view .yge-reviews__cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 20px !important;
}

body.catalog-product-view .yge-reviews__cta-btn {
    background: transparent !important;
    border: 1.5px solid #ffffff !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    padding: 6px 16px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

/* Badge de descuento en la galería de producto (Mobile y Desktop) */
body.catalog-product-view .yge-pdp-discount-badge {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    background-color: #FF5900 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 8px 14px 18px 10px !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 24px calc(100% - 10px), 0 100%) !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

html, body {
    overflow-x: hidden !important;
}

#header .container {
    border-bottom: none !important;
    border-top: none !important;
}

/* YGE: acá había una regla duplicada que cancelaba el corte diagonal — se borró. */

/* Remover bordes del contenedor principal de la navegación sin afectar desplegables */
#header .navigation,
#header .navigation nav,
#header .navigation > div > nav > ul.flex,
#header .navigation > div > nav > ul.flex > li.level-0 {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#header .navigation li.level-0 {
    border-bottom: 2px solid transparent !important;
    transition: border-color 0.2s ease !important;
}

#header .navigation li.level-0:hover,
#header .navigation li.level-0[data-active] {
    border-bottom: 2px solid var(--yge-orange, #FF5901) !important;
}

/* ── Estilos robustos para submenús desplegables (Dropdowns de Categorías) ── */
#header .navigation ul[id^="category-node-"] {
    background-color: #ffffff !important;
    border-top: 3px solid var(--yge-orange, #FF5901) !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
    padding: 6px 0 !important;
    min-width: 180px !important;
    z-index: 999 !important;
}

#header .navigation ul[id^="category-node-"] li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background-color: #ffffff !important;
}

#header .navigation ul[id^="category-node-"] li > a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 18px !important;
    color: var(--yge-green, #185601) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    background-color: #ffffff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    border-top: none !important;
    border-bottom: none !important;
}

#header .navigation ul[id^="category-node-"] li:not(:last-child) > a {
    border-bottom: 1px solid #f1f5f9 !important;
}

#header .navigation ul[id^="category-node-"] li > a:hover {
    color: var(--yge-orange, #FF5901) !important;
    background-color: #f8fafc !important;
}



/* El build Tailwind actual no genera lg:block para el contenedor interno del menu. */
@media (min-width: 1024px) {
    #header .navigation {
        display: flex !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #header .navigation > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    #header .navigation > div.hidden {
        display: block !important;
    }

    #header .navigation > div.hidden > nav,
    #header .navigation > div.hidden > nav > ul {
        display: block !important;
    }

    #header .navigation > div.hidden > nav > ul {
        display: flex !important;
    }
}

/* ── Garantizar visibilidad de widgets y contenedor principal ── */
body #maincontent.page-main,
body .page-main,
body #maincontent,
body .widget,
body .widget.block,
body .widget.block-static-block,
body .hero-slider,
body .brand-carousel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── Solo mostrar Buscador, Hamburguesa y Carrito en Mobile (< 1024px) ── */
@media (max-width: 1023px) {
    #header #compare-link,
    #header a#compare-link,
    #header #compare-link.invisible,
    #header #menu-search-icon,
    #header #customer-menu,
    #header [x-data="initCustomerMenu"],
    .yge-account-label,
    .yge-cart-label {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 1. Ajuste del botón "Conoce nuestras marcas" y Logo en Mobile */
    #header .container a[aria-label="Go to Home page"] img,
    #header .container > div:has(> a[aria-label="Go to Home page"]) img {
        max-width: 105px !important;
        width: 105px !important;
        max-height: 38px !important;
        height: auto !important;
    }

    .yge-cta-marcas,
    .yge-cta-marcas--mobile {
        overflow: visible !important;
        margin-right: 6px !important;
    }

    /* 2. Barra de búsqueda unificada: altura de 38px y botón verde cubriendo el 100% de la altura */
    #search-content {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #search-content .container,
    #search-content search,
    #search-content .minisearch,
    #search-content #search_mini_form {
        width: 100% !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #search-content #search_mini_form .input-group,
    #search-content #search_mini_form .input-group.relative.grow {
        display: flex !important;
        flex: 1 1 auto !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header #search-content input[type="search"],
    #header #search-content input[type="text"],
    #header #search-content .form-input {
        height: 38px !important;
        line-height: 38px !important;
        padding: 0 10px !important;
        border: 1px solid #d1d5db !important;
        border-right: none !important;
        border-radius: 4px 0 0 4px !important;
        font-size: 13px !important;
        background-color: #ffffff !important;
        box-sizing: border-box !important;
    }

    #header #search-content button[type="submit"],
    #header #search-content button.btn,
    #header #search-content button {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        width: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--yge-green, #185601) !important;
        border-radius: 0 4px 4px 0 !important;
        background-color: var(--yge-green, #185601) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
    }

    #header #search-content button svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #ffffff !important;
    }

    /* 3. Carrito y Hamburguesa alineados perfectamente a 38px de alto */
    [x-data="initMobileMenu"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
    }

    #header .container > .flex.items-center {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: 38px !important;
    }

    #menu-cart-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #menu-cart-icon .yge-action-icon {
        width: 22px !important;
        height: 22px !important;
    }
}

/* =========================================================
   YGE MINICART FLOATING DROPDOWN
   ========================================================= */

#cart-drawer {
    position: fixed !important;
    inset: 165px 0 auto auto !important;
    top: 165px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
    z-index: 9999 !important;
    max-height: calc(100vh - 180px) !important;
}

#cart-drawer::backdrop {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(1px);
}

.yge-cart-popup {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    background: #ffffff !important;
    width: 395px !important;
    max-width: calc(100vw - 20px) !important;
}

.yge-cart-items-list {
    max-height: 285px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.yge-cart-items-list::-webkit-scrollbar {
    width: 5px;
}

.yge-cart-items-list::-webkit-scrollbar-track {
    background: transparent;
}

.yge-cart-items-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.yge-cart-items-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.yge-btn-checkout {
    background-color: #FF5900 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    height: 46px !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
}

.yge-btn-checkout:hover {
    background-color: #e04f00 !important;
}

.yge-btn-viewcart {
    background-color: #ffffff !important;
    color: #FF5900 !important;
    border: 2px solid #FF5900 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    height: 46px !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
}

.yge-btn-viewcart:hover {
    background-color: #fff5f0 !important;
}

@media (min-width: 1280px) {
    #cart-drawer {
        inset: 165px 0 auto auto !important;
        top: 165px !important;
        right: 0 !important;
        left: auto !important;
    }
}

@media (max-width: 768px) {
    #cart-drawer {
        display: none !important;
    }
}

/* ==========================================================================
   YGE - CATALOGO: ESTILOS DE TARJETAS (IGUAL A APROVECHA-OFERTAS.CSS)
   ========================================================================== */

/* Contenedor <li> del grid */
body.catalog-category-view #product-list .products.wrapper.products-grid > ul > li,
.products.wrapper.products-grid > ul > li {
    position: relative !important;
    background-color: transparent !important;
    padding: 0 !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
    overflow: visible !important;
    z-index: 1 !important;
}

body.catalog-category-view #product-list .products.wrapper.products-grid > ul > li:hover,
.products.wrapper.products-grid > ul > li:hover {
    z-index: 40 !important;
}

/* ── Tarjeta: reserva 46px abajo (transparente) para el botón hover ── */
body.catalog-category-view #product-list .item.product.product-item,
body.catalog-category-view #product-list .products.wrapper.products-grid .item.product.product-item,
.products.wrapper.products-grid .item.product.product-item {
    position: relative !important;
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 12px 60px 12px !important;
    box-shadow: none !important;
    isolation: isolate !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Capa gris #D9D9D9 (borde visible de 2px, pasa a naranja en hover) */
body.catalog-category-view #product-list .item.product.product-item::before,
body.catalog-category-view #product-list .products.wrapper.products-grid .item.product.product-item::before,
.products.wrapper.products-grid .item.product.product-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 46px !important;
    background-color: #D9D9D9 !important;
    opacity: 1 !important;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 16px 100%, 0 calc(100% - 16px)) !important;
    transition: bottom 0.2s ease, background-color 0.2s ease !important;
    z-index: -1 !important;
}

/* Capa blanca (cuerpo de la card, 2px adentro del borde) */
body.catalog-category-view #product-list .item.product.product-item::after,
body.catalog-category-view #product-list .products.wrapper.products-grid .item.product.product-item::after,
.products.wrapper.products-grid .item.product.product-item::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    right: 2px !important;
    bottom: 48px !important;
    background-color: #ffffff !important;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
    transition: bottom 0.2s ease !important;
    z-index: -1 !important;
}

/* En hover el borde pasa a naranja #FF5901 con grosor de 3px y ambas capas se estiran hasta el fondo */
body.catalog-category-view #product-list .item.product.product-item:hover::before,
body.catalog-category-view #product-list .products.wrapper.products-grid > ul > li:hover .item.product.product-item::before,
.products.wrapper.products-grid .item.product.product-item:hover::before,
.products.wrapper.products-grid > ul > li:hover .item.product.product-item::before {
    bottom: 0 !important;
    background-color: #FF5901 !important;
}

body.catalog-category-view #product-list .item.product.product-item:hover::after,
body.catalog-category-view #product-list .products.wrapper.products-grid > ul > li:hover .item.product.product-item::after,
.products.wrapper.products-grid .item.product.product-item:hover::after,
.products.wrapper.products-grid > ul > li:hover .item.product.product-item::after {
    top: 3px !important;
    left: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 13px 100%, 0 calc(100% - 13px)) !important;
}

/* ── Imagen: alto fijo para que la línea quede nivelada ── */
body.catalog-category-view #product-list .item.product .product-item-photo,
.products.wrapper.products-grid .item.product .product-item-photo {
    height: 210px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 4px !important;
}

body.catalog-category-view #product-list .item.product .product-item-photo img,
.products.wrapper.products-grid .item.product .product-item-photo img {
    max-height: 200px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* ── Línea separadora encima del nombre del producto ── */
body.catalog-category-view #product-list .item.product .product-info > div:first-child,
.products.wrapper.products-grid .item.product .product-info > div:first-child {
    border-top: 1px solid #ececec !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* ── Nombre del producto ── */
body.catalog-category-view #product-list .item.product .product-item-link,
.products.wrapper.products-grid .item.product .product-item-link {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: calc(14px * 1.3 * 2) !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

body.catalog-category-view #product-list .item.product .product-item-link:hover,
.products.wrapper.products-grid .item.product .product-item-link:hover {
    color: #014C00 !important;
}

/* ── Ocultar selector de "Presentaciones" y estrellas de valoración ── */
body.catalog-category-view #product-list .item.product [x-data="initConfigurableSwatchOptions"],
.products.wrapper.products-grid .item.product [x-data="initConfigurableSwatchOptions"] {
    display: none !important;
}

body.catalog-category-view #product-list .item.product .product-info > div:has(.rating-summary),
body.catalog-category-view #product-list .item.product .rating-summary,
.products.wrapper.products-grid .item.product .product-info > div:has(.rating-summary),
.products.wrapper.products-grid .item.product .rating-summary {
    display: none !important;
}

/* ── Precios (visibles para productos simples y configurables) ── */
body.catalog-category-view #product-list .products.wrapper.products-grid .product-info:not(:has(> [x-data^='initConfigurableSwatchOptions'])) > .pt-1,
body.catalog-category-view #product-list .products.wrapper.products-grid .product-info > .pt-1,
body.catalog-category-view #product-list .item.product .product-info > .pt-1,
body.catalog-category-view #product-list .item.product .product-info > div[x-data*="initPriceBox"],
.products.wrapper.products-grid .product-info:not(:has(> [x-data^='initConfigurableSwatchOptions'])) > .pt-1,
.products.wrapper.products-grid .product-info > .pt-1,
.products.wrapper.products-grid .item.product .product-info > .pt-1,
.products.wrapper.products-grid .item.product .product-info > div[x-data*="initPriceBox"] {
    display: block !important;
    margin-top: 8px !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.catalog-category-view #product-list .item.product .price-box,
.products.wrapper.products-grid .item.product .price-box {
    text-align: center !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
}

body.catalog-category-view #product-list .item.product .price-label,
.products.wrapper.products-grid .item.product .price-label {
    display: none !important;
}

body.catalog-category-view #product-list .item.product .price,
.products.wrapper.products-grid .item.product .price {
    color: #014C00 !important;
    font-weight: 800 !important;
    font-size: 20px !important;
}

body.catalog-category-view #product-list .item.product .old-price .price,
.products.wrapper.products-grid .item.product .old-price .price {
    color: #9ca3af !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: line-through !important;
}

body.catalog-category-view #product-list .item.product .price-box .old-price,
body.catalog-category-view #product-list .item.product .price-box .special-price,
body.catalog-category-view #product-list .item.product .price-box .normal-price,
.products.wrapper.products-grid .item.product .price-box .old-price,
.products.wrapper.products-grid .item.product .price-box .special-price,
.products.wrapper.products-grid .item.product .price-box .normal-price {
    display: block !important;
    line-height: 1.3 !important;
}

/* ── Badge de descuento arriba a la derecha superpuesto sobre el borde ── */
body.catalog-category-view #product-list .item.product .yge-discount-badge,
.products.wrapper.products-grid .item.product .yge-discount-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 3 !important;
    background-color: #FF5901 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 7px 18px 8px 24px !important;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 11px 100%, 0 14px) !important;
}

/* ── Botón "Agregar al carrito" en hover ── */
body.catalog-category-view #product-list .item.product [data-addto="cart"],
body.catalog-category-view #product-list .item.product .yge-catalog-btn-cart,
.products.wrapper.products-grid .item.product [data-addto="cart"],
.products.wrapper.products-grid .item.product .yge-catalog-btn-cart {
    position: absolute !important;
    left: 2px !important;
    right: 2px !important;
    bottom: 2px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #FF5901 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 11px 8px !important;
    text-decoration: none !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px)) !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    pointer-events: none !important;
    border: none !important;
    border-radius: 0 !important;
}

body.catalog-category-view #product-list .item.product.product-item:hover [data-addto="cart"],
body.catalog-category-view #product-list .item.product.product-item:hover .yge-catalog-btn-cart,
body.catalog-category-view #product-list .products.wrapper.products-grid > ul > li:hover [data-addto="cart"],
body.catalog-category-view #product-list .products.wrapper.products-grid > ul > li:hover .yge-catalog-btn-cart,
.products.wrapper.products-grid .item.product.product-item:hover [data-addto="cart"],
.products.wrapper.products-grid .item.product.product-item:hover .yge-catalog-btn-cart,
.products.wrapper.products-grid > ul > li:hover [data-addto="cart"],
.products.wrapper.products-grid > ul > li:hover .yge-catalog-btn-cart {
    left: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px)) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* ── Wishlist: hexágono con borde de 1px #D9D9D9, fondo blanco e icono corazon.svg ── */
body.catalog-category-view #product-list .item.product button[data-addto="wishlist"],
body.catalog-category-view #product-list .item.product .btn[data-addto="wishlist"],
.products.wrapper.products-grid .item.product button[data-addto="wishlist"],
.products.wrapper.products-grid .item.product .btn[data-addto="wishlist"] {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #D9D9D9 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

body.catalog-category-view #product-list .item.product button[data-addto="wishlist"]::after,
body.catalog-category-view #product-list .item.product .btn[data-addto="wishlist"]::after,
.products.wrapper.products-grid .item.product button[data-addto="wishlist"]::after,
.products.wrapper.products-grid .item.product .btn[data-addto="wishlist"]::after {
    content: '' !important;
    position: absolute !important;
    inset: 1px !important;
    background-color: #ffffff !important;
    background-image: url('/media/wysiwyg/corazon.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 13px !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    z-index: 1 !important;
}

body.catalog-category-view #product-list .item.product button[data-addto="wishlist"]:hover,
.products.wrapper.products-grid .item.product button[data-addto="wishlist"]:hover {
    background-color: #FF5901 !important;
}

body.catalog-category-view #product-list .item.product button[data-addto="wishlist"] svg,
.products.wrapper.products-grid .item.product button[data-addto="wishlist"] svg {
    display: none !important;
}

/* Ocultar botón compare */
body.catalog-category-view #product-list .item.product [data-addto="compare"],
.products.wrapper.products-grid .item.product [data-addto="compare"] {
    display: none !important;
}

/* =========================================================
   YGE SHOPPING CART PAGE (/checkout/cart/)
   ========================================================= */

.yge-cart-table-header {
    display: grid !important;
    grid-template-columns: 2.5fr 1fr 1fr !important;
    gap: 16px !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #e5e5e5 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.yge-cart-table-header .yge-col-product {
    text-align: left !important;
    padding-left: 8px !important;
}

.yge-cart-table-header .yge-col-qty {
    text-align: center !important;
}

.yge-cart-table-header .yge-col-total {
    text-align: right !important;
    padding-right: 16px !important;
}

.yge-cart-item-row {
    display: grid !important;
    grid-template-columns: 2.5fr 1fr 1fr !important;
    gap: 16px !important;
    align-items: center !important;
    width: 100% !important;
}

.yge-cart-item-product {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.yge-cart-item-qty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.yge-cart-item-total {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 16px !important;
}

.yge-cart-qty-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.yge-cart-qty-btn {
    width: 36px !important;
    height: 36px !important;
    background-color: #ffffff !important;
    color: #185601 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.15s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.yge-cart-qty-btn:hover {
    background-color: #f3f4f6 !important;
}

.yge-cart-qty-input {
    width: 46px !important;
    height: 36px !important;
    background-color: #185601 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    user-select: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.yge-cart-qty-input::-webkit-inner-spin-button,
.yge-cart-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.yge-cart-delete-btn {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 1px solid #185601 !important;
    color: #185601 !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.yge-cart-delete-btn svg {
    width: 11px !important;
    height: 11px !important;
}

.yge-cart-delete-btn:hover {
    background-color: #185601 !important;
    color: #ffffff !important;
}

.yge-cart-item-product .product-item-photo {
    width: 95px !important;
    min-width: 95px !important;
    height: 95px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.yge-cart-item-product .product-item-photo img {
    max-width: 95px !important;
    max-height: 95px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    mix-blend-multiply: multiply !important;
}

.yge-cart-item-li {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.yge-cart-page-items-list {
    max-height: 540px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    padding-right: 6px !important;
}

.yge-cart-page-items-list::-webkit-scrollbar {
    width: 6px;
}

.yge-cart-page-items-list::-webkit-scrollbar-track {
    background: transparent;
}

.yge-cart-page-items-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.yge-cart-page-items-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Espaciado inferior de la página de carrito antes del footer */
body.checkout-cart-index #maincontent,
body.checkout-cart-index .page-main,
body.checkout-cart-index .cart-container,
body.checkout-cart-index .cart-form {
    margin-bottom: 60px !important;
    padding-bottom: 20px !important;
}

/* Resumen de totales */
body.checkout-cart-index .card.lg\:sticky {
    background: #ffffff !important;
    border: 2px solid #b2c2ab !important;
    border-radius: 0 !important;
    padding: 24px 20px !important;
    box-shadow: none !important;
}

body.checkout-cart-index .cart-summary {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

body.checkout-cart-index .card.lg\:sticky > h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    margin-bottom: 16px !important;
}

/* Línea divisoria 1: Debajo de estimar envío (de extremo a extremo) */
body.checkout-cart-index .cart-summary-actions {
    display: block !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid #b2c2ab !important;
}

body.checkout-cart-index .cart-summary-actions summary {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

/* Línea divisoria 2: Debajo de los subtotales/impuestos (de extremo a extremo) */
.yge-totals-breakdown {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #b2c2ab !important;
}

.yge-totals-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

/* Líneas divisorias de Total (de extremo a extremo arriba y abajo) */
.yge-totals-grandtotal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 16px 20px !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
    border-top: 2px solid #b2c2ab !important;
    border-bottom: 2px solid #b2c2ab !important;
}

.yge-totals-grandtotal-label {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

.yge-totals-grandtotal [class*="justify-self-end"],
.yge-totals-grandtotal div:last-child,
.yge-totals-grandtotal-amount {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #185601 !important;
    line-height: 1 !important;
}

.yge-btn-summary-checkout {
    background-color: #FF5900 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    margin-bottom: 12px !important;
    transition: background-color 0.2s ease !important;
}

.yge-btn-summary-checkout:hover {
    background-color: #e04f00 !important;
}

.yge-btn-summary-continue {
    background-color: #ffffff !important;
    border: 2px solid #FF5900 !important;
    color: #FF5900 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-bottom: 16px !important;
    transition: background-color 0.2s ease !important;
}

.yge-btn-summary-continue:hover {
    background-color: #fff5f0 !important;
}

@media (max-width: 768px) {
    .yge-cart-table-header {
        display: none !important;
    }

    .yge-cart-page-items-list {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        border: none !important;
    }

    .yge-cart-item-li {
        padding: 0 !important;
        border: none !important;
    }

    /* Tarjeta de producto individual */
    .yge-cart-item-row {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1.5px solid #d1d5db !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
        padding: 16px 14px 0 14px !important;
        position: relative !important;
    }

    /* Sección Superior: Imagen + Nombre y Opciones */
    .yge-cart-item-product {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 0 !important;
        gap: 14px !important;
        position: relative !important;
        margin-bottom: 8px !important;
    }

    .yge-cart-item-product .product-item-photo {
        width: 80px !important;
        min-width: 80px !important;
        height: 80px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .yge-cart-item-product .product-item-photo img {
        max-width: 80px !important;
        max-height: 80px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        mix-blend-multiply: multiply !important;
    }

    .yge-cart-item-product .product-item-details {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex-grow: 1 !important;
        padding-right: 28px !important;
    }

    .yge-cart-item-product .product-item-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin-bottom: 6px !important;
        line-height: 1.25 !important;
    }

    /* Botón eliminar X en móvil */
    .yge-cart-delete-btn {
        position: absolute !important;
        top: -6px !important;
        right: 0 !important;
        z-index: 10 !important;
    }

    /* Selector de cantidad único posicionado debajo del título */
    .yge-cart-item-qty {
        display: flex !important;
        justify-content: flex-start !important;
        margin-left: 94px !important;
        margin-bottom: 14px !important;
        padding: 0 !important;
    }

    .yge-cart-item-qty .yge-cart-qty-wrapper {
        display: inline-flex !important;
    }

    /* Sección Inferior: Total */
    .yge-cart-item-total {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 12px 18px !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        border-top: 1.5px solid #d1d5db !important;
        background-color: #ffffff !important;
    }

    .yge-mobile-total-label {
        display: block !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        margin-bottom: 2px !important;
    }

    .yge-mobile-total-amount {
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #185601 !important;
        line-height: 1 !important;
    }

    body.checkout-cart-index #maincontent,
    body.checkout-cart-index .page-main,
    body.checkout-cart-index .cart-container,
    body.checkout-cart-index .cart-form {
        margin-bottom: 40px !important;
        padding-bottom: 10px !important;
    }
}

/* Solo en Mobile: el cuadro de total y subtotal va DEBAJO de la lista de productos */
@media (max-width: 1023px) {
    body.checkout-cart-index .cart-form .flex.flex-col.lg\:flex-row > .lg\:flex-1,
    body.checkout-cart-index .cart-form .flex.flex-col > .lg\:flex-1,
    body.checkout-cart-index .cart-form .order-2.lg\:order-1 {
        order: 1 !important;
    }

    body.checkout-cart-index .cart-form .flex.flex-col.lg\:flex-row > .card.lg\:sticky,
    body.checkout-cart-index .cart-form .flex.flex-col > .card.lg\:sticky,
    body.checkout-cart-index .cart-form .order-1.lg\:order-2 {
        order: 2 !important;
        margin-top: 24px !important;
    }
}

/* Íconos de aplicar cupón y estimar envío en #FF5900 (Desktop y Mobile) */
body.checkout-cart-index .coupon-form summary svg,
body.checkout-cart-index .coupon-form summary svg path,
body.checkout-cart-index .coupon-form summary svg circle,
body.checkout-cart-index .estimate-shipping-form summary svg,
body.checkout-cart-index .estimate-shipping-form summary svg path,
body.checkout-cart-index .estimate-shipping-form summary svg circle,
body.checkout-cart-index .cart-summary-actions summary svg,
body.checkout-cart-index .cart-summary-actions summary svg path,
body.checkout-cart-index .cart-summary-actions summary svg circle {
    color: #FF5900 !important;
    stroke: #FF5900 !important;
}

/* Flecha desplegable a la derecha se mantiene gris */
body.checkout-cart-index .cart-summary-actions summary > svg:last-child,
body.checkout-cart-index .cart-summary-actions summary > svg:last-child path,
body.checkout-cart-index .coupon-form summary > svg:last-child,
body.checkout-cart-index .coupon-form summary > svg:last-child path,
body.checkout-cart-index .estimate-shipping-form summary > svg:last-child,
body.checkout-cart-index .estimate-shipping-form summary > svg:last-child path {
    color: #6b7280 !important;
    stroke: #6b7280 !important;
}

/* Título Mi carrito: separado del header con hexágono verde vertical #1A5600 e ícono de carrito */
body.checkout-cart-index .page-title,
body.checkout-cart-index .page-title-wrapper h1 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 35px !important;
    margin-bottom: 22px !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #000000 !important;
}

body.checkout-cart-index .page-title::before,
body.checkout-cart-index .page-title-wrapper h1::before {
    content: "" !important;
    display: inline-block !important;
    width: 36px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    background-color: #1A5600 !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='32' viewBox='0 0 36 32' fill='none'%3E%3Cpath d='M36.0051 3.8623L31.204 18.5958H12.3569L7.60156 3.8623H36.0051Z' fill='%23ffffff'/%3E%3Cpath d='M27.5364 31.9991C29.0234 31.9991 30.229 30.8221 30.229 29.3702C30.229 27.9182 29.0234 26.7412 27.5364 26.7412C26.0493 26.7412 24.8438 27.9182 24.8438 29.3702C24.8438 30.8221 26.0493 31.9991 27.5364 31.9991Z' fill='%23ffffff'/%3E%3Cpath d='M16.8489 31.9991C18.3359 31.9991 19.5415 30.8221 19.5415 29.3702C19.5415 27.9182 18.3359 26.7412 16.8489 26.7412C15.3618 26.7412 14.1562 27.9182 14.1562 29.3702C14.1562 30.8221 15.3618 31.9991 16.8489 31.9991Z' fill='%23ffffff'/%3E%3Cpath d='M3.78906 2.65731L12.6051 24.9386H16.1643L6.72959 0L3.78906 2.65731Z' fill='%23ffffff'/%3E%3Cpath d='M6.73876 0H0V3.0215H6.73876V0Z' fill='%23ffffff'/%3E%3Cpath d='M31.2778 21.9443H12.6094V24.9375H31.2778V21.9443Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 19px 17px !important;
}

/* Vista de Carrito Vacío */
body.checkout-cart-index .cart-empty {
    margin-bottom: 60px !important;
    padding-bottom: 20px !important;
}

.yge-cart-empty-card {
    background-color: #ffffff;
    border: 1.5px solid #d1d5db;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 48px 24px;
    text-align: center;
    max-width: 640px;
    margin: 10px auto 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.yge-cart-empty-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #9ca3af;
}

.yge-cart-empty-title {
    font-size: 22px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 8px;
}

.yge-cart-empty-desc {
    font-size: 15px;
    color: #4b5563;
    max-width: 440px;
    margin: 0 auto 28px auto;
    line-height: 1.5;
}

.yge-cart-empty-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #FF5900 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 14px 36px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-shadow: 0 2px 6px rgba(255, 89, 0, 0.25) !important;
}

.yge-cart-empty-btn:hover {
    background-color: #e04e00 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* ===== Fondo de trama.png desactivado en el Catálogo ===== */
html body.catalog-category-view::before,
body.catalog-category-view::before,
body.catalog-category-view:before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}