:root {
  --mn-primary: #4A1F5C;
  --mn-primary-dark: #35133F;
  --mn-ivory: #FFF9F6;
  --mn-rosa: #F5D6DF;
  --mn-coral: #FF6B63;
  --mn-whatsapp: #0E7C55;
  --mn-whatsapp-hover: #0B6344;
  --mn-text: #2D2430;
  --mn-muted: #756B78;
  --mn-border: #EADFE5;
  --mn-radius: 22px;
  --mn-shadow: 0 18px 45px rgba(74, 31, 92, 0.10);
  --mn-shadow-hover: 0 24px 60px rgba(74, 31, 92, 0.16);
}

/* Sitewide horizontal-scroll guard. Root cause: the "Descarga nuestros
   catálogos" section on Inicio has a Divi image with a manual
   transform_scale="150%" + transform_translate effect — CSS transforms
   enlarge/move an element visually without changing its layout box, so nothing
   in Divi's own responsive system "knows" it now spills past the column,
   and it pushes the whole page wider than the viewport (confirmed via
   document.documentElement.scrollWidth exceeding window.innerWidth). Rather
   than touch that section's own design/transform (kept exactly as set),
   clip the overflow at the page edge — nothing already visible moves,
   this only removes the sliver that was hanging off-screen. Does not affect
   the intentional horizontal-scrolling Instagram carousel (.maneki-instagram__scroll),
   which contains its own overflow already and never reached html/body.
 */
html, body { overflow-x: hidden; max-width: 100%; }

/* Typography hierarchy: Divi's own header_font_size only styles whichever
   tag its header_level attribute names (defaults to h1); raw <h2> content
   authored via the REST API silently falls back to the theme's generic
   style. Force the intended hierarchy with our own classes instead. */
.mn-eyebrow {
  font: 700 13px/1.4 'Inter', sans-serif !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--mn-primary) !important;
}
.mn-eyebrow--on-dark { color: #F0C9DA !important; }
.mn-section-title h1, .mn-section-title h2, .mn-section-title h3 {
  font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  color: var(--mn-primary) !important;
  margin: 0 !important;
  letter-spacing: -0.02em;
}
.mn-section-title--white h1, .mn-section-title--white h2, .mn-section-title--white h3 {
  color: #FFFFFF !important;
}
.mn-section-copy {
  font: 400 16px/1.7 'Inter', sans-serif !important;
  color: var(--mn-muted) !important;
}
@media (max-width: 767px) {
  .mn-section-title h1, .mn-section-title h2, .mn-section-title h3 { font-size: 28px !important; }
}

/* Rounded / cover-fit photo utility. Divi's custom_css_main_element only
   reaches the module's own wrapper div, not the <img> itself, and the
   wrapping <span class="et_pb_image_wrap"> is inline-block by default —
   giving a percentage-width <img> nothing concrete to resolve against. */
.mn-photo.et_pb_image { border-radius: var(--mn-radius); overflow: hidden; }
.mn-photo .et_pb_image_wrap { display: block !important; width: 100% !important; }
.mn-photo img { width: 100% !important; height: auto !important; object-fit: cover !important; display: block !important; }

/* Announcement bar */
.maneki-topbar {
  background: var(--mn-primary);
  color: #fff;
  text-align: center;
  font: 500 13px/1.4 'Inter', sans-serif;
  letter-spacing: 0.02em;
  padding: 13px 20px;
}
.maneki-topbar__inner { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; }
.maneki-topbar__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.5); flex-shrink: 0; }
@media (max-width: 480px) {
  .maneki-topbar { padding: 10px 16px; font-size: 11.5px; }
  .maneki-topbar__sep { display: none; }
  .maneki-topbar__inner { flex-direction: column; gap: 3px; }
}

/* Breathing room on every section, every breakpoint. */
.et_pb_section { padding-left: 28px !important; padding-right: 28px !important; }
@media (max-width: 480px) { .et_pb_section { padding-left: 18px !important; padding-right: 18px !important; } }

/* Header / nav redesign — brand colors, pill-style menu links, logo pinned
   to the true left edge. Divi's default header absolutely-positions
   .logo_container full-width behind the nav and pushes #et-top-navigation
   over with a JS-calculated inline padding-left (so the two never
   overlap) — that's why the logo sat far from the edge with a big dead
   gap before the menu. Flexbox on the shared container replaces both
   hacks: logo and nav become two ordinary flex children, spaced apart by
   justify-content instead of absolute positioning + padding math. */
#main-header .container.et_menu_container {
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  width: 100% !important; max-width: 1440px !important; padding: 14px 40px !important; margin: 0 auto !important;
  box-sizing: border-box !important;
}
.logo_container {
  position: static !important; width: auto !important; max-width: none !important;
  display: flex !important; align-items: center !important; flex-shrink: 0;
}
/* Divi's logo link is a bare display:block <a>, which as a flex item was
   sizing to ~164px — nearly double the actual ~82px-wide logo image inside
   it on mobile — leaving a dead gap before the Instagram/WhatsApp block.
   Chased this through several attempts (inline-flex + fit-content, then a
   JS width-matching script) that each fixed the gap but introduced a new
   distortion (confirmed on a real phone: the logo rendered visibly
   stretched taller than its real proportions). Plain inline-block is the
   simplest fix that actually holds: it shrink-wraps to content with none
   of flex's basis/growth ambiguity, and a fixed height + width:auto on the
   image itself scales it using its own real aspect ratio, nothing computed
   or measured at runtime. */
.logo_container a { display: inline-block !important; }
#logo { height: 42px !important; width: auto !important; max-height: none !important; max-width: none !important; }
/* Found the real cause of the "stretched" look after removing the JS fix
   and re-checking live: Divi's own inline stylesheet carries
   `.et_header_style_left #logo { max-width: 50% }` at this exact
   breakpoint — with height pinned to 44px but width capped below what
   that height's aspect ratio needs, the image had no choice but to render
   squashed narrower than tall. max-width:none removes that cap. */
@media (max-width: 980px) { #logo { height: 38px !important; max-width: none !important; } }
@media (max-width: 980px) {
  #main-header .container.et_menu_container { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Instagram + WhatsApp block, injected via JS right after the logo
   (initHeaderContact in the JS) — matches a reference layout the client
   liked. Real handle confirmed from the homepage's own Instagram feed
   section (instagram.com/manekinekocl); the phone number is the same one
   used for every other WhatsApp button on the site. */
.mn-header-contact {
  display: flex; flex-direction: column; gap: 3px; margin-left: 18px; flex-shrink: 0;
}
.mn-header-contact__row {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px 'Inter', sans-serif; color: var(--mn-primary); text-decoration: none; white-space: nowrap;
}
.mn-header-contact__row:hover { color: var(--mn-coral); }
.mn-header-contact__row svg { flex-shrink: 0; }
@media (max-width: 980px) {
  .mn-header-contact { margin-left: 6px; gap: 2px; }
  .mn-header-contact__row { font-size: 10.5px; gap: 4px; }
  .mn-header-contact__row svg { width: 11px !important; height: 11px !important; }
}
/* Header search icon removed — the dedicated /productos/ catalog already
   has its own (better) search with typo tolerance and filters; the header
   icon pointed at WordPress's plain, unstyled default search instead. */
#et_top_search { display: none !important; }

#et-top-navigation {
  position: static !important; float: none !important; padding: 0 !important;
  display: flex !important; align-items: center !important; gap: 28px;
  margin-left: auto !important;
}
#top-menu-nav { padding: 0 !important; }
#top-menu.nav { display: flex !important; align-items: center !important; gap: 4px !important; float: none !important; }
#top-menu.nav > li { float: none !important; list-style: none; }
#top-menu.nav > li > a {
  font: 600 14px 'Inter', sans-serif !important; color: var(--mn-primary) !important;
  padding: 10px 20px !important; border-radius: 12px !important; display: inline-block !important;
  text-decoration: none !important; line-height: 1.4 !important;
  background: var(--mn-rosa) !important;
  transition: background 200ms ease, color 200ms ease;
}
#top-menu.nav > li > a:hover { background: var(--mn-primary) !important; color: #fff !important; }
#top-menu.nav > li.current-menu-item > a, #top-menu.nav > li.current_page_item > a {
  background: var(--mn-primary) !important; color: #fff !important;
}
/* Divi hides the desktop menu below 980px with `#top-menu { display: none }`
   in favor of the hamburger (#et_mobile_nav_menu) — our `#top-menu.nav {
   display: flex !important }` above unintentionally outranked that (same
   !important, higher specificity), which made the full pill nav render on
   top of the hamburger on phones. Restoring it here, scoped to the same
   980px breakpoint Divi itself uses for the switch. */
@media (max-width: 980px) {
  #top-menu.nav { display: none !important; }
}
#et_search_icon { color: var(--mn-primary) !important; }
#et_search_icon:hover { color: var(--mn-coral) !important; }

/* Mobile hamburger + dropdown — same rosa-at-rest / solid-purple-selected
   pill treatment as the desktop nav (#top-menu.nav > li > a above), not
   just a color swap. */
.mobile_menu_bar { color: var(--mn-primary) !important; }
/* Divi's default hamburger box (56px tall) pads its 32px icon glyph with
   0 top / 24px bottom, so the icon itself sits in the top half instead of
   centered — visibly higher than the logo/contact block next to it, which
   ARE centered. 12/12 centers the same 32px icon within the same 56px box. */
@media (max-width: 980px) { .mobile_menu_bar { padding: 12px 0 !important; } }
#mobile_menu.et_mobile_menu {
  background: #fff !important; border: 1px solid var(--mn-border) !important;
  border-radius: 14px !important; margin-top: 8px !important; box-shadow: var(--mn-shadow) !important;
  padding: 8px !important;
}
#mobile_menu.et_mobile_menu li { border: none !important; }
#mobile_menu.et_mobile_menu li a {
  color: var(--mn-primary) !important; font: 600 14px 'Inter', sans-serif !important;
  background: var(--mn-rosa) !important; border-radius: 12px !important;
  margin: 4px 0 !important; padding: 12px 16px !important;
  transition: background 200ms ease, color 200ms ease;
}
#mobile_menu.et_mobile_menu li a:hover {
  background: var(--mn-primary) !important; color: #fff !important;
}
#mobile_menu.et_mobile_menu li.current-menu-item a {
  background: var(--mn-primary) !important; color: #fff !important;
}

/* No cart icon in the header nav — the whole site is quote-based via
   WhatsApp, so a cart icon just points somewhere there's no reason to go. */
#et-top-navigation .et-cart-info,
#et-top-navigation .et-cart-info-wrap,
#et-top-navigation .et_pb_menu__cart-icon,
#et-top-navigation .et-nav-cart-icon,
.et_header_style_left .et-cart-info {
  display: none !important;
}

/* Payment method badges were too small to register at a glance. */
img[alt="Visa"], img[alt="Mastercard"], img[alt="American Express"],
img[alt="Diners Club"], img[alt="Redcompra"] {
  height: 34px !important; width: auto !important;
}
img[alt="Mercado Pago"] { height: 40px !important; width: auto !important; }

/* Category cards: photo + circular icon badge overlapping the bottom-left
   corner, label beside it. */
.mn-cat-badge .et_pb_blurb_content { display: flex !important; align-items: center !important; gap: 10px !important; }
.mn-cat-badge .et_pb_main_blurb_image {
  background: #FFFFFF !important; border-radius: 50% !important; width: 46px !important; height: 46px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important;
  box-shadow: 0 10px 22px rgba(74,31,92,0.16);
}
.mn-cat-badge .et_pb_main_blurb_image img, .mn-cat-badge .et_pb_main_blurb_image .et_pb_image_wrap { width: 20px !important; height: 20px !important; }
.mn-cat-badge h4 { margin: 0 !important; font: 700 14px 'Poppins', sans-serif !important; color: var(--mn-text) !important; }
.mn-cat-badge .et_pb_blurb_description { font: 400 12.5px/1.3 'Inter', sans-serif !important; color: var(--mn-muted) !important; margin-top: 2px; }

/* "Compra por Colección" cards: 2 per row on mobile only — desktop/tablet keep
   Divi's own 4-across column_structure untouched, this only overrides the phone
   breakpoint where Divi's default behavior stacks them to 1 full-width card. */
@media (max-width: 767px) {
  .mn-collection-row.et_pb_row { display: flex !important; flex-wrap: wrap !important; }
  .mn-collection-row.et_pb_row > .et_pb_column {
    width: 50% !important; max-width: 50% !important; padding: 0 7px !important; margin-bottom: 18px !important;
  }
  .mn-collection-row .mn-cat-badge { margin-top: -18px !important; }
  .mn-collection-row .mn-cat-badge h4 { font-size: 12px !important; }
  .mn-collection-row .mn-cat-badge .et_pb_blurb_description { font-size: 10.5px !important; line-height: 1.25 !important; }
  .mn-collection-row .mn-cat-badge .et_pb_main_blurb_image { width: 34px !important; height: 34px !important; }
  .mn-collection-row .mn-cat-badge .et_pb_main_blurb_image img,
  .mn-collection-row .mn-cat-badge .et_pb_main_blurb_image .et_pb_image_wrap { width: 15px !important; height: 15px !important; }
}

/* Benefit / value cards with a circular icon badge above the title. */
.mn-value-card .et_pb_main_blurb_image {
  background: var(--mn-rosa) !important; border-radius: 50% !important; width: 60px !important; height: 60px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 16px !important;
}
.mn-value-card .et_pb_main_blurb_image img { width: 26px !important; height: 26px !important; }

/* Process steps with a numbered badge. */
.mn-step-card { text-align: center; }
.mn-step-card .mn-step-num { font: 700 34px 'Poppins', sans-serif; color: var(--mn-rosa); display: block; margin-bottom: 6px; }

/* WooCommerce product grid */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }
@media (max-width: 980px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 480px) { .woocommerce ul.products { gap: 14px; } }
@media (max-width: 980px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
/* Mobile only, and not the catalog grid (already tuned separately for 2-up
   on phone per an earlier explicit request) — related products / shop
   archive / upsells stack one per row here. Two squeezed-narrow columns on
   a phone was forcing text (e.g. the category badge) to wrap letter by
   letter, confirmed from a live screenshot. Desktop/tablet are untouched —
   this rule only exists below 600px. */
@media (max-width: 600px) {
  .woocommerce ul.products:not(.mn-catalog__grid) {
    grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important;
  }
  /* Divi's dynamic stylesheet carries an ID-anchored rule specifically for
     related-products/upsells cards — `.et-db #et-boc .et-l
     .et_pb_wc_related_products ul.products.columns-N li.product { width:
     48% !important }` inside @media(max-width:980px) — confirmed live by
     walking every matching stylesheet rule in the browser. An ID selector
     always outranks any number of plain classes, so the earlier [class]-only
     attempt (and the plain rule below) still lost to it even with
     !important. `:not(#_)` is a standard trick: :not() inherits the
     specificity of its argument, so two of them stack two ID-level points
     with zero risk of ever matching a real element (id="_" doesn't exist),
     beating Divi's single ID regardless of its class count or where its
     stylesheet sits in the cascade. */
  .woocommerce ul.products:not(.mn-catalog__grid) li.product:not(#_):not(#_),
  .woocommerce-page ul.products:not(.mn-catalog__grid) li.product:not(#_):not(#_) {
    width: 100% !important; max-width: 100% !important; margin: 0 0 14px !important; float: none !important;
  }
  /* The Divi section wrapping "Productos relacionados" carries its own 18px
     side padding (Divi's section default) on top of #left-area's own — the
     two stacking made this one section narrower than the rest of the page
     (228px vs. 264px available), confirmed by measuring both live. Dropping
     just this section's padding lets its card use the same full width
     everything else on the card already does — a real day/night difference
     for a phone-width card, not just cosmetic. */
  .single-product .et_pb_section:has(.et_pb_wc_related_products) {
    padding-left: 0 !important; padding-right: 0 !important;
  }
}

.woocommerce ul.products li.product {
  background: #fff; border: 1px solid var(--mn-border); border-radius: var(--mn-radius); box-shadow: var(--mn-shadow);
  overflow: hidden; display: flex; flex-direction: column; width: 100% !important; max-width: 100% !important;
  float: none !important; clear: none !important; padding: 0 !important; margin: 0 !important; position: relative;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--mn-shadow-hover); }
.woocommerce ul.products li.product a img, .woocommerce ul.products li.product > img {
  width: 100% !important; aspect-ratio: 4/3; object-fit: cover; margin: 0 !important; border-radius: 0 !important; display: block;
}
.woocommerce ul.products li.product a { text-decoration: none; display: block; overflow: hidden; }
.woocommerce ul.products li.product .maneki-card-category {
  display: block; margin: 16px 20px 0 !important; font: 700 11px 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--mn-primary);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  /* Divi's theme CSS has `.product .related h2 { font-size: 26px !important }`
     meant for the "Productos relacionados" section heading, but `.related h2`
     also matches every card's own title h2 underneath it — confirmed live by
     listing every stylesheet rule matching this element. !important here is
     needed to beat that, not just extra specificity. */
  font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; font-family: 'Poppins', sans-serif !important;
  color: var(--mn-primary); margin: 8px 20px 0 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce ul.products li.product .maneki-card-desc {
  font: 400 13.5px/1.55 'Inter', sans-serif; color: var(--mn-muted); margin: 8px 20px 0 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce ul.products li.product .maneki-price-prefix {
  display: inline-block !important; margin: 10px 0 0 20px !important;
  font: 500 12px 'Inter', sans-serif !important; color: var(--mn-muted) !important;
}
.woocommerce ul.products li.product .maneki-price-amount,
.woocommerce ul.products li.product .maneki-price-amount .amount {
  font: 700 17px 'Poppins', sans-serif !important; color: var(--mn-coral) !important;
}
.maneki-wa-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  align-self: center !important; width: auto !important; max-width: calc(100% - 40px) !important; min-height: 34px !important; margin: auto 20px 20px !important;
  padding: 8px 16px !important; white-space: nowrap !important; line-height: 1.2 !important;
  background: var(--mn-whatsapp) !important; color: #fff !important;
  font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 600 !important;
  border-radius: 10px !important; border: none !important; text-decoration: none !important;
  transition: background 250ms ease, transform 250ms ease;
}
.maneki-wa-btn .maneki-wa-icon { width: 14px !important; height: 14px !important; flex-shrink: 0; }
.maneki-wa-btn:hover { background: var(--mn-whatsapp-hover) !important; color: #fff !important; transform: translateY(-2px); }
.maneki-wa-btn--single {
  max-width: none !important; width: auto !important; margin: 0 !important; padding: 13px 22px !important;
  font-size: 13px !important; letter-spacing: 0.02em; text-transform: uppercase; min-height: 46px !important; align-self: auto !important;
  background: #fff !important; color: var(--mn-whatsapp) !important; border: 1.5px solid var(--mn-whatsapp) !important;
}
.maneki-wa-btn--single:hover { background: var(--mn-whatsapp) !important; color: #fff !important; }
.maneki-wa-btn--single .maneki-wa-icon { width: 16px !important; height: 16px !important; }

/* Single product page: WhatsApp button injected next to the (hidden) cart
   button — Divi's et_pb_wc_add_to_cart module calls WooCommerce's add-to-cart
   template directly instead of firing the woocommerce_single_product_summary
   action, so the PHP hook that renders this everywhere else never fires here;
   initSingleProductWhatsApp() in the JS inserts it client-side instead. */
.mn-single-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.mn-trust-badge {
  display: inline-flex; align-items: center; gap: 10px; background: var(--mn-rosa);
  border-radius: 14px; padding: 8px 16px 8px 8px; margin-top: 14px;
}
.mn-trust-badge img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; }
.mn-trust-badge span { font: 600 12.5px/1.3 'Inter', sans-serif; color: var(--mn-primary); }

/* Single product page is quote-based: hide only the quantity stepper and
   "Añadir al carrito" button (form.cart is specific to the product page —
   the real /cart/ page uses a different form class, so this can't hide
   anything there). Keep the variation dropdown/table visible. */
.single-product form.cart .quantity,
.single-product form.cart .single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart .quantity,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  display: none !important;
}
.maneki-card-badge {
  position: absolute; top: 14px; left: 14px; background: var(--mn-primary); color: #fff;
  font: 600 11px 'Inter', sans-serif; padding: 6px 12px; border-radius: 999px; z-index: 2;
}

/* "Así damos vida a cada pedido" video gallery — appears on both Productos
   and Nosotros with different Divi row numbers per page (et_pb_row_3 vs
   et_pb_row_4), so :has() targets it by its actual content (the raw
   grid-template-columns/figure markup authored directly into the page,
   not a Divi module) instead of a page-specific class. */
.et_pb_section:has(div[style*="grid-template-columns"]) {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.et_pb_row:has(div[style*="grid-template-columns"]) {
  padding-top: 24px !important;
  margin-top: 16px !important;
}
div[style*="grid-template-columns: repeat(4"] figure[style*="border-radius: 16px"] {
  position: relative;
  aspect-ratio: 3 / 4;
  box-shadow: var(--mn-shadow) !important;
  border: 1px solid var(--mn-border);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
div[style*="grid-template-columns: repeat(4"] figure[style*="border-radius: 16px"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--mn-shadow-hover) !important;
}
/* MediaElement.js sizes its wrapper (and the video inside it) with inline
   px styles set by its own JS, which vary with the source video's native
   aspect ratio (some clips here are 4:3, others 9:16) — that's why cards
   looked like different sizes even though the <figure> box was already
   uniform. Pinning everything inside to position:absolute + inset:0 +
   object-fit:cover ignores those inline dimensions and crops every clip to
   the same frame regardless of its original shape. */
div[style*="grid-template-columns: repeat(4"] figure[style*="border-radius: 16px"] .wp-video,
div[style*="grid-template-columns: repeat(4"] figure[style*="border-radius: 16px"] .mejs-container,
div[style*="grid-template-columns: repeat(4"] figure[style*="border-radius: 16px"] mediaelementwrapper,
div[style*="grid-template-columns: repeat(4"] figure[style*="border-radius: 16px"] video {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; max-width: none !important;
}
div[style*="grid-template-columns: repeat(4"] figure[style*="border-radius: 16px"] video {
  object-fit: cover !important;
}
div[style*="grid-template-columns: repeat(4"] figure[style*="border-radius: 16px"] .mejs-controls {
  z-index: 2;
}
/* Custom brand-purple play button, replacing MediaElement's default sprite
   icon so the gallery reads as part of the site instead of a generic
   embedded video player. */
div[style*="grid-template-columns: repeat(4"] .mejs-overlay-button {
  background: var(--mn-primary) !important; background-image: none !important;
  width: 52px !important; height: 52px !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
div[style*="grid-template-columns: repeat(4"] .mejs-overlay-button::after {
  content: ""; display: block; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
@media (max-width: 980px) {
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* "¿Tienes una idea? ¡Hablemos!" CTA hero (Home only — .mn-eyebrow--on-dark
   is unique to this section). Was a flat, plain purple banner; redesigned
   with layered glow + one handwritten accent word, after a reference
   design the client liked (dark bg, organic color blobs, script accent). */
/* Divi's own cached combined stylesheet (et-core-unified-deferred-*.min.css)
   independently sets this exact section's background-image with its own
   !important — `div.et_pb_section.et_pb_section_11 { ... !important }`,
   specificity (0,2,1) — one point above a plain `.et_pb_section:has(...)`
   selector, confirmed by fetching that generated file directly. `html body`
   pushes past it without depending on knowing Divi's per-page class name. */
html body div.et_pb_section:has(.mn-eyebrow--on-dark) {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,107,99,0.42), transparent 42%),
    radial-gradient(circle at 96% 78%, rgba(245,214,223,0.32), transparent 38%),
    radial-gradient(circle at 8% 92%, rgba(255,107,99,0.16), transparent 42%),
    linear-gradient(135deg, #2a0f35 0%, var(--mn-primary-dark) 45%, var(--mn-primary) 100%) !important;
}
.et_pb_section:has(.mn-eyebrow--on-dark)::before,
.et_pb_section:has(.mn-eyebrow--on-dark)::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(55px); opacity: 0.55; pointer-events: none; z-index: 0;
}
.et_pb_section:has(.mn-eyebrow--on-dark)::before { width: 260px; height: 260px; background: var(--mn-coral); top: -70px; right: 8%; }
.et_pb_section:has(.mn-eyebrow--on-dark)::after { width: 200px; height: 200px; background: var(--mn-rosa); bottom: -50px; left: 12%; }
.et_pb_section:has(.mn-eyebrow--on-dark) .et_pb_row { position: relative; z-index: 1; }

.mn-cta-script {
  font-family: 'Caveat', cursive; font-weight: 700; color: var(--mn-coral);
  font-size: 1.4em; line-height: 1; display: inline-block; transform: rotate(-3deg); margin-left: 6px;
}

.et_pb_section:has(.mn-eyebrow--on-dark) .et_pb_image img {
  /* The mascot artwork's own background isn't transparent (it's baked
     into the PNG), so no CSS trick makes it truly see-through — blend-mode
     alone (tried first) only approximates it and was still visible.
     Fading the image's own edges to transparent via a mask, so the hard
     rectangle boundary disappears and it reads as sitting IN the section
     rather than pasted on top, is the closest a CSS-only fix gets without
     a real transparent-background export of the artwork. */
  mask-image: radial-gradient(ellipse 62% 62% at center, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at center, #000 55%, transparent 100%);
  mix-blend-mode: screen;
}

.et_pb_section:has(.mn-eyebrow--on-dark) .et_pb_button {
  background: var(--mn-whatsapp) !important; border: none !important;
  border-radius: 999px !important; padding: 16px 34px !important;
  font: 700 15px 'Inter', sans-serif !important; letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(14,124,85,0.4) !important;
  transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease;
}
.et_pb_section:has(.mn-eyebrow--on-dark) .et_pb_button:hover {
  background: var(--mn-whatsapp-hover) !important; transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(14,124,85,0.5) !important;
}

/* "Síguenos y déjate inspirar" Instagram feed — full purple background
   redesign (was a light pink/white section), matching the same dramatic
   dark-glow treatment used on the "¿Tienes una idea?" hero. The section's
   markup/CSS is authored directly in the Home page content as one big
   embedded <style> block, not this plugin — overridden here with
   !important rather than editing that block, since none of its own rules
   use !important and this wins cleanly. */
.maneki-instagram {
  /* This section sits inside a Divi row capped at max-width:1080px, so its
     own background only ever painted that inner width — leaving bare white
     margins on wider screens (visible live). Standard full-bleed break-out:
     stretch to the true viewport width and re-center, independent of the
     ancestor's max-width. */
  width: 100vw !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,107,99,0.35), transparent 40%),
    radial-gradient(circle at 88% 15%, rgba(245,214,223,0.28), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(255,107,99,0.14), transparent 45%),
    linear-gradient(135deg, #2a0f35 0%, var(--mn-primary-dark) 45%, var(--mn-primary) 100%) !important;
}
.maneki-instagram::before, .maneki-instagram::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; pointer-events: none; z-index: 0;
}
.maneki-instagram::before { width: 240px; height: 240px; background: var(--mn-coral); top: -60px; left: 6%; }
.maneki-instagram::after { width: 200px; height: 200px; background: var(--mn-rosa); bottom: -50px; right: 8%; }
.maneki-instagram > * { position: relative; z-index: 1; }

.maneki-instagram__encabezado h2 {
  color: #fff !important;
  font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
  /* The 🐾 emoji renders in its own dark natural colors — CSS `color`
     can't recolor a full-color emoji glyph, so a soft light glow behind
     the whole title is the actual fix: it keeps the dark paw print visibly
     separated from the dark purple background instead of blending in. */
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.55));
}
.maneki-instagram__encabezado p { color: rgba(255,255,255,0.78) !important; }

.maneki-instagram__publicacion {
  border-color: rgba(255,255,255,0.9) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35) !important;
}
.maneki-instagram__publicacion:hover { box-shadow: 0 20px 42px rgba(0,0,0,0.45) !important; }

.maneki-instagram__red { box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.15) !important; }

/* "¿Tienes una idea diferente? / Comenzar mi pedido" CTA (appears on Home
   and Productos) — was a flat solid rosa background; now uses the same
   ivory + decorative SVG texture as the homepage hero banner, per an
   explicit request to reuse that exact look here. */
.et_pb_section:has(a.et_pb_button[href="/contacto/"]) {
  background-color: var(--mn-ivory) !important;
  background-image: url('/wp-content/uploads/2026/08/maneki-fondo-producto.svg') !important;
}

/* "Hagamos algo bonito juntos" CTA on Nosotros (page-id-81) reuses the
   `.mn-eyebrow--on-dark` / `.mn-section-title--white` pair meant for a dark
   background, but this section's own background is the light hero-style
   pink/lavender gradient — leaving the white title nearly invisible
   (confirmed from a live mobile screenshot). Scoped to this page/section
   only so the shared classes stay correctly white on the actual dark
   sections that use them elsewhere (e.g. the Home "¡Hablemos!" CTA). */
body.page-id-81 .mn-section-title--white h1,
body.page-id-81 .mn-section-title--white h2,
body.page-id-81 .mn-section-title--white h3 {
  color: var(--mn-primary) !important;
}

/* Testimonial cards */
.mn-testimonial-card { background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.mn-testimonial-card .stars { color: #F5B942; font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }

/* Full brand footer — sits above Divi's own black credits bar (see
   get_footer hook in the PHP), styled after a reference layout the client
   liked (Ingenia Grupo Creativo's footer) but rebuilt with Maneki's own
   palette and type instead of copying its script-font look. */
.mn-footer { position: relative; overflow: hidden; background: var(--mn-primary-dark); padding: 56px 32px 44px; }
.mn-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; max-width: 1180px; margin: 0 auto; }
.mn-footer__brand img { height: 40px; width: auto; margin-bottom: 14px; }
.mn-footer__desc { font: 400 13.5px/1.7 'Inter', sans-serif; color: rgba(255,255,255,.7); max-width: 260px; margin: 0; }
.mn-footer__col h4 {
  font: 700 15px 'Poppins', sans-serif; color: #fff; margin: 0 0 16px;
}
.mn-footer__col h4:not(:first-child) { margin-top: 28px; }

.mn-footer__offer-list { list-style: none; margin: 0; padding: 0; }
.mn-footer__offer-list li {
  font: 400 13.5px/1.9 'Inter', sans-serif; color: rgba(255,255,255,.75);
  padding-left: 16px; position: relative;
}
.mn-footer__offer-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mn-coral);
}

.mn-footer__payments { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-footer__payments img {
  height: 22px; width: auto; background: #fff; border-radius: 6px;
  padding: 5px 7px; box-sizing: content-box;
}

.mn-footer__contact-list { list-style: none; margin: 0; padding: 0; }
.mn-footer__contact-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.mn-footer__contact-list li svg { flex-shrink: 0; color: var(--mn-rosa); }
.mn-footer__contact-list a, .mn-footer__contact-list span {
  font: 400 13.5px 'Inter', sans-serif; color: rgba(255,255,255,.85); text-decoration: none;
}
.mn-footer__contact-list a:hover { color: var(--mn-rosa); }

@media (max-width: 900px) {
  .mn-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .mn-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .mn-footer { padding: 44px 24px 36px; }
  .mn-footer__grid { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .mn-footer__brand { display: flex; flex-direction: column; align-items: center; }
  .mn-footer__desc { max-width: none; }
  .mn-footer__offer-list li { padding-left: 0; }
  .mn-footer__offer-list li::before { display: none; }
  .mn-footer__payments { justify-content: center; }
  .mn-footer__contact-list li { justify-content: center; }
}

/* Divi's default theme footer credit bar (id="footer-bottom", the plain
   black strip every page ends with) — recolored to the brand palette; its
   text is swapped from "Diseñado por Elegant Themes..." to the site's own
   copyright line via initFooterCredits() in the JS. */
#footer-bottom {
  background: var(--mn-primary-dark) !important;
}
#footer-bottom #footer-info,
#footer-bottom #footer-info a {
  color: rgba(255,255,255,.75) !important;
}
#footer-bottom #footer-info a:hover { color: var(--mn-rosa) !important; }
#footer-bottom .et-social-icons a.icon { color: rgba(255,255,255,.75) !important; }
#footer-bottom .et-social-icons a.icon:hover { color: var(--mn-rosa) !important; }

/* Floating WhatsApp button, every page (injected via wp_footer in the PHP). */
.mn-wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--mn-whatsapp); color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform 200ms ease, background 200ms ease;
  text-decoration: none !important;
}
.mn-wa-float:hover { background: var(--mn-whatsapp-hover); transform: scale(1.08); }
@media (max-width: 600px) {
  .mn-wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .mn-wa-float svg { width: 26px !important; height: 26px !important; }
}
@media (prefers-reduced-motion: reduce) { .mn-wa-float { transition: none; } }

/* Contact form (Divi native contact form module) */
.mn-contact-form .et_pb_contact_field { margin-bottom: 18px !important; }
.mn-contact-form input.input, .mn-contact-form textarea.input, .mn-contact-form select {
  border: 1px solid var(--mn-border) !important; border-radius: 10px !important; padding: 12px 14px !important;
  font: 400 14px 'Inter', sans-serif !important; color: var(--mn-text) !important; background: #fff !important;
}
.mn-contact-form .et_pb_contact_button {
  background: var(--mn-primary) !important; border-radius: 12px !important; font: 700 14px 'Inter', sans-serif !important;
  padding: 15px 30px !important; border: none !important; width: 100%;
}
.mn-contact-form .et_pb_contact_button:hover { background: var(--mn-primary-dark) !important; }

/* Scroll reveal: blocks rise + scale up from a soft blur as they enter the
   viewport; two-column rows alternate sliding in from left/right instead of
   a flat rise, for more visual movement. Replays every time (added by JS via
   IntersectionObserver, cascaded per row/grid). */
.mn-reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.94);
  filter: blur(7px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 800ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.mn-reveal--left { transform: translateX(-70px) translateY(10px) scale(0.94); }
.mn-reveal--right { transform: translateX(70px) translateY(10px) scale(0.94); }
.woocommerce ul.products li.product.mn-reveal {
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 800ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease;
}
.mn-reveal.mn-revealed { opacity: 1; transform: translateY(0) translateX(0) scale(1); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .mn-reveal, .mn-reveal--left, .mn-reveal--right { filter: none; }
}

/* Hero CTA buttons side by side on one line instead of stacked full-width. */
body.home .et_pb_section:first-of-type .et_pb_button_module_wrapper {
  display: inline-flex !important; width: auto !important; margin-bottom: 10px !important; vertical-align: middle;
}
body.home .et_pb_section:first-of-type .et_pb_button {
  font-size: 13px !important; padding: 11px 20px !important; white-space: nowrap;
}
@media (max-width: 480px) {
  body.home .et_pb_section:first-of-type .et_pb_button_module_wrapper {
    display: block !important; width: 100% !important; margin-right: 0 !important;
  }
  body.home .et_pb_section:first-of-type .et_pb_button { width: 100%; text-align: center; }
}

/* Floating sparkles on the Inicio hero (injected by JS). */
.mn-sparkle-host { position: relative; }
.mn-sparkle {
  position: absolute; pointer-events: none; z-index: 1; opacity: 0.5;
  animation: mn-sparkle-float 4.2s ease-in-out infinite;
}
.mn-sparkle svg { width: 100%; height: 100%; display: block; }
@keyframes mn-sparkle-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.4; }
  50% { transform: translateY(-14px) rotate(14deg) scale(1.2); opacity: 0.9; }
}
/* Sparkle spots are positioned in percentages, so they scale safely with the
   hero on any screen width — mobile now gets the same decoration as desktop
   instead of the plain flat hero it had before. */
@media (prefers-reduced-motion: reduce) { .mn-sparkle { animation: none; opacity: 0.4; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product, .maneki-wa-btn { transition: none !important; }
  .mn-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Visible keyboard focus */
.maneki-wa-btn:focus-visible, .et_pb_button:focus-visible, .mn-footer a:focus-visible,
#top-menu a:focus-visible, .mobile_menu_bar:focus-visible, .woocommerce a.button:focus-visible {
  outline: 3px solid var(--mn-coral) !important; outline-offset: 2px !important;
}

/* Filterable product catalog ([maneki_catalog] shortcode) */
.mn-catalog { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; max-width: 1180px; margin: 0 auto; }
.mn-catalog__sidebar {
  background: #fff; border: 1px solid var(--mn-border); border-radius: 18px; padding: 24px 22px;
  position: sticky; top: 24px;
}
.mn-filter-group { margin-bottom: 22px; }
.mn-filter-group:last-of-type { margin-bottom: 16px; }
.mn-filter-label { font: 700 13px 'Inter', sans-serif; color: var(--mn-text); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; }
.mn-catalog__filters input[type="search"], .mn-catalog__filters input[type="number"] {
  width: 100%; border: 1px solid var(--mn-border); border-radius: 10px; padding: 10px 12px;
  font: 400 14px 'Inter', sans-serif; color: var(--mn-text); box-sizing: border-box;
}
.mn-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mn-cat-list label { display: flex; align-items: center; gap: 9px; font: 400 14px 'Inter', sans-serif; color: var(--mn-text); cursor: pointer; }
.mn-cat-list input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--mn-primary); flex-shrink: 0; }
.mn-cat-count { color: var(--mn-muted); font-size: 12.5px; }
.mn-price-inputs { display: flex; align-items: center; gap: 8px; }
.mn-price-inputs span { color: var(--mn-muted); }
.mn-filter-apply {
  width: 100%; background: var(--mn-primary); color: #fff; border: none; border-radius: 10px;
  padding: 11px; font: 700 13.5px 'Inter', sans-serif; cursor: pointer;
}
.mn-filter-apply:hover { background: var(--mn-primary-dark); }
.mn-filter-clear { display: block; text-align: center; margin-top: 10px; font: 600 13px 'Inter', sans-serif; color: var(--mn-muted); text-decoration: underline; }

.mn-catalog__toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.mn-catalog__count { font: 400 13.5px 'Inter', sans-serif; color: var(--mn-muted); margin: 0; }
.mn-catalog__sort label { font: 400 13.5px 'Inter', sans-serif; color: var(--mn-muted); display: flex; align-items: center; gap: 8px; }
.mn-catalog__sort select { border: 1px solid var(--mn-border); border-radius: 8px; padding: 7px 10px; font: 600 13px 'Inter', sans-serif; color: var(--mn-text); }

.mn-catalog__grid.products {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 26px !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.mn-catalog__grid.products::before, .mn-catalog__grid.products::after { content: none !important; display: none !important; }
@media (max-width: 980px) { .mn-catalog__grid.products { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } }

.mn-catalog-card { position: relative; }
.mn-catalog-card__link { text-decoration: none; display: block; overflow: hidden; }
.mn-catalog-card__title {
  font: 700 16px/1.3 'Poppins', sans-serif !important; color: var(--mn-primary) !important; margin: 12px 20px 0 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mn-catalog-card__price {
  padding: 0 20px !important; margin: 8px 0 0 !important; box-sizing: border-box; display: block;
}
/* Prices hidden on catalog cards and product-loop cards (related products,
   shop archive) — same rule as the single-product page, everything else on
   the card untouched. */
.mn-catalog-card__price,
.woocommerce ul.products li.product .maneki-price-prefix,
.woocommerce ul.products li.product .maneki-price-amount {
  display: none !important;
}
.mn-catalog-card .maneki-price-prefix {
  display: inline !important; margin: 0 !important;
  font: 500 12px 'Inter', sans-serif !important; color: var(--mn-muted) !important;
}
.mn-catalog-card .maneki-price-amount, .mn-catalog-card .maneki-price-amount .amount {
  font: 700 16px 'Poppins', sans-serif !important; color: var(--mn-coral) !important;
}
.mn-catalog-card__actions { display: flex; flex-direction: column; gap: 8px; margin: 14px 20px 20px; }
.mn-catalog-card__actions .mn-btn-outline, .mn-catalog-card__actions .maneki-wa-btn {
  width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box;
}
.mn-btn-outline {
  display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  border: 1.5px solid var(--mn-primary); color: var(--mn-primary); font: 700 13px 'Inter', sans-serif;
  border-radius: 10px; padding: 9px 14px; transition: background 200ms ease, color 200ms ease;
}
.mn-btn-outline:hover { background: var(--mn-primary); color: #fff; }

/* Long category names (e.g. "Packaging boutique y joyería") would wrap to 2
   lines and cover the product photo if floated on top of it — sits in its
   own space above the image instead, at every screen size. */
.mn-cat-pill {
  position: static; display: inline-block; margin: 14px 0 8px 14px; color: #fff;
  font: 700 10px 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .03em;
  padding: 5px 10px; border-radius: 999px; max-width: calc(100% - 28px);
}
.mn-badge-adhesivos { background: var(--mn-coral); }
.mn-badge-tarjetas { background: var(--mn-primary); }
.mn-badge-boutique { background: #C6558E; }
.mn-badge-corporativos { background: var(--mn-whatsapp); }
.mn-badge-gastronomico { background: #E8A33D; }
.mn-badge-publicidad { background: #3E7CB1; }
.mn-badge-default { background: var(--mn-muted); }
.mn-catalog-card__flag {
  position: absolute; top: 14px; right: 14px; z-index: 2; background: #fff; color: var(--mn-text);
  font: 700 10.5px 'Inter', sans-serif; padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

.mn-catalog__pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.mn-catalog__pagination a, .mn-catalog__pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  border-radius: 10px; font: 600 13.5px 'Inter', sans-serif; color: var(--mn-text); text-decoration: none;
  border: 1px solid var(--mn-border);
}
.mn-catalog__pagination .current { background: var(--mn-primary); border-color: var(--mn-primary); color: #fff; }
.mn-catalog__pagination a:hover { border-color: var(--mn-primary); color: var(--mn-primary); }
.mn-catalog__empty { text-align: center; color: var(--mn-muted); padding: 40px 0; }

@media (max-width: 980px) {
  .mn-catalog { grid-template-columns: 1fr; }
  .mn-catalog__sidebar { position: static; }
}
@media (max-width: 480px) {
  .mn-catalog__grid.products { grid-template-columns: 1fr !important; }
}

/* Mobile filter toggle: collapses the sidebar behind a button instead of
   pushing the whole product grid below the fold. Button is added by JS, so
   without JS the sidebar just stays open (no dead-end UI). */
.mn-catalog__filter-toggle { display: none; }
@media (max-width: 980px) {
  .mn-catalog__filter-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    background: #fff; border: 1.5px solid var(--mn-primary); color: var(--mn-primary);
    font: 700 14px 'Inter', sans-serif; padding: 13px; border-radius: 12px; margin-bottom: 16px; cursor: pointer;
  }
  .mn-catalog__sidebar.mn-filters-collapsed { display: none; }
  .mn-catalog__sidebar.mn-filters-open { display: block; margin-bottom: 8px; }
}

/* Single product page: decorative ivory backdrop (corner blobs + sparkles) instead of plain white.
   #main-content spans the FULL page height (gallery + description + reviews), which is much
   taller than the decorative artwork's own aspect ratio — "cover" was scaling it to fill that
   height and cropping the corner blobs off-screen entirely. Using "100% auto" instead keeps the
   image's native aspect ratio and full width, so it renders as a complete decorative band behind
   the top of the page (never cropped) on every screen size, mobile included; the rest of the
   page below that band falls back to the plain ivory background-color. */
.single-product #main-content {
  background-color: var(--mn-ivory);
  background-image: url('/wp-content/uploads/2026/08/maneki-fondo-producto.svg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
/* "Tienda Maneki" banner — matches the Productos catalog page's own header
   section, sitting above the white product card. */
.mn-product-hero {
  max-width: 820px; margin: 0 auto; padding: 32px 24px 0; text-align: center;
}
.mn-product-hero .mn-eyebrow { text-align: center; }
.mn-product-hero .mn-section-title h2 { font-size: 34px; }
.mn-product-hero .mn-section-copy { margin: 12px 0 0; }
@media (max-width: 767px) {
  .mn-product-hero { padding: 24px 20px 0; }
  .mn-product-hero .mn-section-title h2 { font-size: 24px; }
}
/* Divi-Builder-rendered product pages skip WooCommerce's usual <div class="product">
   wrapper entirely (Builder pages render straight from the_content(), not the
   WooCommerce template hierarchy) — confirmed by fetching the live page HTML
   and finding no such element at all, which is why a "div.product" background
   rule here was silently dead. #left-area is the real, always-present
   container, so the white contained card goes there instead: this is what
   keeps breadcrumb + gallery + summary + tabs inside one solid white block
   instead of letting the decorative page background show through around them. */
.single-product #left-area {
  background: #fff !important; border-radius: var(--mn-radius); box-shadow: var(--mn-shadow);
  max-width: 1100px; margin: 24px auto !important; padding: 28px; box-sizing: border-box;
  width: calc(100% - 48px) !important; float: none !important;
}
/* On phones this 28px padding + 24px outer margin was leaving a visibly
   wasted strip on the right (confirmed by measuring: the card was only
   264px wide with much more room available) — tight enough that button
   text and titles inside cards (e.g. "Cotizar por WhatsApp", "Producto
   personalizado...") were truncating. Trimming both on mobile only claws
   back real width for every card on the page, not just one section. */
@media (max-width: 600px) {
  .single-product #left-area {
    width: calc(100% - 24px) !important; margin: 14px auto !important; padding: 14px !important;
  }
}
.mn-back-to-catalog {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  font: 600 13px 'Inter', sans-serif; color: var(--mn-primary); text-decoration: none;
}
.mn-back-to-catalog:hover { text-decoration: underline; }
/* Some products aren't set to Divi's "no sidebar" page layout (missing a
   setting on that specific product, not something themeable per-product via
   the API) — force it here instead so the search-widget sidebar never shows. */
.single-product #sidebar { display: none !important; }
.single-product .woocommerce-product-gallery {
  background: #fff; border-radius: var(--mn-radius); overflow: hidden; padding: 10px;
  max-width: 220px !important; margin: 0 auto 20px !important;
}

/* Gallery: first image large ("main photo"), the rest become a row of small
   thumbnails underneath — matches the reference layout. Pure CSS (no JS
   swap-on-click); each thumbnail still opens the full image via WooCommerce's
   own lightbox link, same as before.
   object-fit: contain (not cover) — cover was cropping/zooming into wide
   source photos to fill the forced square box, which read as "distorted";
   contain always shows the whole photo, letterboxed on a soft background
   instead of cropped. initGalleryZoom() in the JS turns a click into a
   full-screen preview instead of navigating to the raw image file. */
.single-product .woocommerce-product-gallery__wrapper {
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
}
.single-product .woocommerce-product-gallery__image {
  width: 44px !important; height: 44px !important; border-radius: 8px !important; overflow: hidden !important;
  border: 1.5px solid var(--mn-border) !important; background: var(--mn-ivory) !important;
}
.single-product .woocommerce-product-gallery__image:first-child {
  /* Fixed pixel height, not percentage-padding — the padding-top:100% trick
     still came out tall/rectangular for some products (portrait-shaped
     source photos, e.g. 600×800, threw off the flex-item sizing math it
     depends on). A literal 192px is immune to that: the box is exactly
     square no matter what shape the source image is, on every product. */
  width: 192px !important; height: 192px !important; max-width: 100% !important;
  order: -1 !important; border: none !important; flex-basis: 100%;
}
.single-product .woocommerce-product-gallery__image img {
  width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important;
}
.single-product .woocommerce-product-gallery__image a { cursor: zoom-in; display: block; width: 100%; height: 100%; }

.mn-gallery-zoom {
  position: fixed; inset: 0; z-index: 9999; background: rgba(45, 36, 48, 0.9);
  display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out;
}
.mn-gallery-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; }
.mn-gallery-zoom__close {
  position: absolute; top: 18px; right: 22px; background: #fff; border: none; border-radius: 50%;
  width: 38px; height: 38px; font-size: 20px; line-height: 1; color: var(--mn-text); cursor: pointer;
}

/* Single product page: brand colors + typography on the summary column.
   Not every product page actually renders through Divi Builder's own
   modules (et_pb_wc_title, et_pb_wc_description) — direct DOM inspection via
   the browser (not just curl) showed most products fall back to
   WooCommerce's plain default template (h1.product_title,
   .woocommerce-product-details__short-description) instead, despite having
   valid Divi content saved. Targeting both sets of selectors covers
   whichever one a given product actually renders with. */
.single-product .et_pb_wc_title h1,
.single-product h1.product_title {
  font: 700 30px/1.2 'Poppins', sans-serif !important; color: var(--mn-primary) !important; margin: 0 0 8px !important;
}
.single-product .et_pb_wc_description p,
.single-product .woocommerce-product-details__short-description {
  font: 400 15px/1.6 'Inter', sans-serif !important; color: var(--mn-muted) !important; margin: 0 0 16px !important;
}
.single-product .price {
  font-size: 15px !important; margin: 0 0 4px !important;
}
.single-product .maneki-price-prefix { font: 500 14px 'Inter', sans-serif !important; color: var(--mn-muted) !important; }
.single-product .maneki-price-amount, .single-product .maneki-price-amount .amount {
  font: 700 26px 'Poppins', sans-serif !important; color: var(--mn-coral) !important;
}
.single-product .maneki-price-iva { font: 600 13px 'Inter', sans-serif !important; color: var(--mn-coral) !important; opacity: .85; }
/* Prices hidden on product pages, everything else untouched. Targets the
   price paragraph directly (p.price) rather than only its Divi module
   wrapper (et_pb_wc_price) — some product pages render through WooCommerce's
   plain fallback template instead of Divi Builder (no et_pb_wc_price wrapper
   exists there at all), confirmed by inspecting the live DOM directly, so
   this covers both rendering paths. Also hides the live variation price that
   updates below the pills as an option is picked. */
.single-product p.price,
.single-product .et_pb_wc_price,
.single-product .woocommerce-variation-price {
  display: none !important;
}

/* Variation attribute pills (Forma / Tamaño / Cantidad / Terminación). */
.single-product .variations { width: 100%; border: none !important; margin: 0 0 8px !important; counter-reset: mn-variation; }
.single-product .variations tbody, .single-product .variations tr, .single-product .variations th, .single-product .variations td {
  display: block !important; width: 100% !important; border: none !important; padding: 0 !important; text-align: left !important;
}
.single-product .variations tr { margin: 0 0 16px; counter-increment: mn-variation; }
.single-product .variations .label label {
  display: block; font: 700 13.5px 'Inter', sans-serif; color: var(--mn-text); margin: 0 0 8px;
}
.single-product .variations .label label::before { content: counter(mn-variation) ". "; color: var(--mn-primary); }
.mn-visually-hidden-select {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
/* Two per row, compact text — same layout on every product's variation
   selector (native WooCommerce dropdowns turned into pills) and inside the
   Stickers configurator alike, so the whole site is consistent. */
.mn-variation-pills { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
.mn-variation-pill {
  background: #fff !important; border: 1.5px solid var(--mn-border) !important; color: var(--mn-text) !important;
  font: 600 10.5px 'Inter', sans-serif !important; padding: 6px 8px !important; border-radius: 8px !important; cursor: pointer;
  width: 100% !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.mn-variation-pill:hover { border-color: var(--mn-primary); }
.mn-variation-pill--active {
  border-color: var(--mn-primary) !important; background: var(--mn-primary) !important; color: #fff !important; font-weight: 700;
}
.single-product .reset_variations { display: inline-block; margin: 4px 0 12px; font: 600 12.5px 'Inter', sans-serif; color: var(--mn-muted); text-decoration: underline; }
.single-product .woocommerce-variation-price .price { margin: 12px 0 !important; }
.single-product .woocommerce-variation-description p { font: 400 13.5px/1.5 'Inter', sans-serif; color: var(--mn-muted); }

/* Personalization configurator (Stickers holográficos, product 251):
   groups reuse the .mn-variation-pill styling above; everything else here
   is specific to the upload/notes/terms/submit flow. */
.mn-configurator, .mn-design-upload { box-sizing: border-box; max-width: 100%; margin-top: 8px; }
.mn-design-upload *, .mn-configurator * { box-sizing: border-box; }
.mn-configurator .price { margin: 0 0 18px !important; }
.mn-configurator__login-notice {
  background: var(--mn-rosa); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
  width: 100%; max-width: 100%; overflow: hidden;
}
.mn-configurator__login-notice p { font: 500 13.5px/1.5 'Inter', sans-serif; color: var(--mn-primary); margin: 0 0 10px; }
.mn-configurator__login-notice a { display: inline-flex; margin: 0 8px 8px 0; white-space: nowrap; }
/* Only the personalization fields dim/lock when logged out — the WhatsApp
   button and submit button live outside this wrapper (submit uses the real
   HTML `disabled` attribute instead) so WhatsApp always stays clickable. */
.mn-configurator__fields--disabled { opacity: 0.55; pointer-events: none; }
.mn-configurator__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.mn-design-upload__error { font: 600 12.5px 'Inter', sans-serif; color: var(--mn-coral); margin: 0 0 10px; }
.mn-configurator__group { margin: 0 0 18px; }
.mn-configurator__group-label { font: 700 12px 'Inter', sans-serif; color: var(--mn-text); margin: 0 0 6px; }
.mn-configurator__group textarea {
  width: 100%; border: 1.5px solid var(--mn-border); border-radius: 10px; padding: 10px 12px;
  font: 400 13.5px/1.5 'Inter', sans-serif; color: var(--mn-text); resize: vertical; box-sizing: border-box;
}
.mn-configurator__upload-group { margin: 0 0 18px; }
.mn-configurator__upload-hint { font: 400 12px 'Inter', sans-serif; color: var(--mn-muted); margin: 0 0 10px; }
.mn-configurator__dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--mn-border); border-radius: 14px; padding: 22px 16px; cursor: pointer;
  text-align: center; font: 500 13px 'Inter', sans-serif; color: var(--mn-muted); transition: border-color 150ms ease;
}
.mn-configurator__dropzone:hover { border-color: var(--mn-primary); }
.mn-configurator__dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mn-configurator__dropzone-icon { font-size: 20px; color: var(--mn-primary); }
.mn-configurator__filename { font: 700 12.5px 'Inter', sans-serif; color: var(--mn-primary); }
.mn-configurator__terms {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px;
  font: 400 12.5px/1.5 'Inter', sans-serif; color: var(--mn-muted); cursor: pointer;
}
.mn-configurator__terms input { margin-top: 3px; flex-shrink: 0; }
.mn-configurator__submit {
  background: var(--mn-primary) !important; color: #fff !important; border: none !important;
  font: 700 13px 'Inter', sans-serif !important; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 13px 22px !important; border-radius: 10px !important; min-height: 46px; cursor: pointer;
}
.mn-configurator__submit:hover { background: var(--mn-primary-dark) !important; }

/* Customer approval panel (Mi cuenta > Pedidos > Ver pedido). */
.mn-approval-panel {
  background: var(--mn-ivory); border: 1.5px solid var(--mn-border); border-radius: var(--mn-radius);
  padding: 22px; margin: 24px 0;
}
.mn-approval-panel h2 { font: 700 18px 'Poppins', sans-serif; color: var(--mn-primary); margin: 0 0 8px; }
.mn-approval-panel p { font: 400 14px/1.6 'Inter', sans-serif; color: var(--mn-text); }
.mn-approval-form { display: inline-block; margin: 10px 12px 0 0; vertical-align: top; }
.mn-approval-form--correction { display: block; margin-top: 14px; max-width: 420px; }
.mn-approval-form--correction textarea {
  width: 100%; border: 1.5px solid var(--mn-border); border-radius: 10px; padding: 10px 12px;
  font: 400 13.5px/1.5 'Inter', sans-serif; margin-bottom: 8px; box-sizing: border-box;
}