/**
 * SAICA redesign.
 * Lives in warehousechild so it never touches the warehouse (parent) theme.
 * Loaded from header-1.tpl, which renders on every front page, so the rules
 * here (including the global typography below) apply site-wide even though
 * the file started out as header/footer-only.
 * Loaded with a high priority (see config/theme.yml) so it wins over the
 * dynamically generated iqitthemeeditor CSS.
 */

:root {
  --saica-purple-dark: #2c0c4d;
  --saica-purple-light: #5b2f86;
  --saica-footer-bg: #55207f;
  --saica-orange: #FD7804;
  --saica-pill-bg: rgba(255, 255, 255, 0.08);
  --saica-pill-bg-hover: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   TYPOGRAPHY (site-wide)
   ========================================================================== */

/* Icon fonts (FontAwesome, .cbp-mainlink-iicon, etc.) declare their own
   font-family with !important and a class selector, which beats this rule
   on specificity — so they're unaffected even without excluding them here. */
body,
input,
textarea,
select,
button,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', sans-serif !important;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Old topbar (language/currency/wishlist links) isn't part of the new design */
.header-nav {
  display: none !important;
}

.header-top {
  background: linear-gradient(90deg, var(--saica-purple-dark) 0%, var(--saica-purple-light) 100%) !important;
  padding: 14px 0;
}

.header-top #desktop_logo .logo {
  max-height: 36px;
  width: auto;
}

/* Fill all remaining space between the logo and the right-side buttons
   (the theme editor's h_search_width setting otherwise caps this at 50%). */
.header-top .col-header-center {
  flex: 1 1 auto;
  max-width: none;
  width: auto;
}

.header-top .search-widget,
.header-top .search-widget form,
.header-top .search-widget .input-group {
  width: 100%;
  max-width: none !important;
}

.header-top .search-widget .input-group {
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

.header-top .search-widget .form-search-control {
  border: none;
  background: transparent;
}

.search-widget .form-search-control {
  padding: 1rem 2rem 1rem 1.4rem;
}

.search-widget .search-btn {
  padding: 0 !important;
}

.header-top .search-widget .search-btn {
  background: var(--saica-orange);
  color: #fff;
  border: none;
  height: 39px;
  width: 39px;
  border-radius: 50%;
  margin: 5px;
  transition: background-color 0.2s ease;
}

.header-top .search-widget .search-btn:hover {
  background-color: #ff8c4d;
}

/* Custom search icon (search.svg) instead of the FontAwesome glyph */
.header-top .search-widget .search-btn .fa-search {
  display: none;
}

.header-top .search-widget .search-btn {
  background-image: url('../img/search.svg');
  background-repeat: no-repeat;
  background-position: 55% center;
  background-size: 20px 20px;
}

/* Bootstrap's .input-group > :not(:first-child) rule (high specificity via
   its chain of :not()) flattens the left corners and adds a -1px margin on
   every non-first input-group child, squaring off this round button.
   Neutralized here (scoped to the search widget, not globally). */
.header-top .search-widget .input-group > .search-btn {
  margin-left: 3px !important;
  border-top-left-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

.header-top .col-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.header-top .col-header-right > div {
  display: flex;
  align-items: center;
}

/* Visual order only (no markup change): account before cart, matching the mockup. */
.header-top .col-header-right #user_info {
  order: 1;
}

#header .desktop-header-style-1 #user_info {
  margin-top: 0;
}

.header-top .col-header-right #ps-shoppingcart-wrapper {
  order: 2;
}

/* Account link + cart trigger styled as rounded chips, matching the mockup.
   :not(#blockcart-content *) / :not(#user_info .dropdown-menu *) — the cart
   dropdown (#_desktop_blockcart-content) and the logged-in account dropdown
   (#user_info .dropdown-menu) both live inside .col-header-right in their
   normal DOM position, so without these exclusions every link inside them
   (product names, remove-from-cart icon, "Mi cuenta" menu items) would
   inherit chip styling/white text too — invisible text on those panels'
   white background. Found this the hard way three times now. */
.header-top .col-header-right a:not(#blockcart-content *):not(#user_info .dropdown-menu *),
.header-top .header-cart-default .cart-toogle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  background: #7739a3d1;
  border: none;
  border-radius: 24px;
  padding: 8px 24px;
  text-decoration: none;
  white-space: nowrap;
  height: 49px;
}

.header-top .header-cart-default a.cart-toogle {
  background: inherit;
  color: #fff;
  padding: 10px 20px;
  border: 2px solid #ffffff59;
  height: 49px;
  box-sizing: border-box;
}

.header-top a#cart-toogle {
  background: none !important;
  border: solid 2px #ffffff47 !important;
}

.header-top .col-header-right a:hover,
.header-top .header-cart-default .cart-toogle:hover {
  background: var(--saica-pill-bg-hover);
  color: #fff;
}

.header-top .header-cart-default .icon {
  color: var(--saica-orange);
}

/* Custom cart icon (cart.svg) instead of the FontAwesome shopping bag.
   Targeted by #ps-shoppingcart directly (not just via .header-top) so it
   applies wherever that element ends up (e.g. the sticky/cloned header). */
#ps-shoppingcart .icon.fa-shopping-bag,
.header-top .header-cart-default .icon.fa-shopping-bag {
  display: inline-block !important;
  width: 18px;
  height: 18px;
  background-image: url('../img/cart.svg') !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

#ps-shoppingcart .icon.fa-shopping-bag::before,
.header-top .header-cart-default .icon.fa-shopping-bag::before {
  content: '' !important;
}

#sticky-cart-wrapper i.fa.fa-shopping-bag.fa-fw.icon {
  background-color: #ffffff00;
  border: solid 2px #ffffff47 !important;
  padding: 16px;
  margin-top: 4px;
  border-radius: 100%;
}

/* Custom account icon (user.png) instead of the FontAwesome user glyph */
.header-top .col-header-right #user_info .fa-user {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../img/user.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.header-top .col-header-right #user_info .fa-user::before {
  content: '';
}

/* Category / main menu row acting as the "pills" bar — full viewport width,
   not capped at the bootstrap .container max-width like the row above it. */
.iqit-megamenu-container.container {
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%) !important;
  max-width: none;
  width: 100%;
  padding: 6px 20px;
}

.stuck-menu {
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%) !important;
  padding-top: 4px;
  padding-bottom: 4px;
}

#iqitmegamenu-horizontal {
  background: none !important;
}

.cbp-horizontal > ul > li > a,
.cbp-horizontal > ul > li > a:not([href]):not([tabindex]),
.cbp-horizontal > ul > li > .cbp-main-link {
  border-left: none !important;
}

.cbp-horizontal > ul > li.cbp-hropen > a,
.cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]),
.cbp-horizontal > ul > li.cbp-hropen > a:hover {
  background: transparent !important;
  border-radius: 18px 18px 0px 0px;
}

.iqit-megamenu-container .cbp-hrmenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0px 12px;
}

.iqit-megamenu-container .cbp-hrmenu > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.iqit-megamenu-container .cbp-hrmenu-tab {
  background: var(--saica-pill-bg);
  border-radius: 20px;
  transition: background-color 0.15s ease;
}

.iqit-megamenu-container .cbp-hrmenu-tab:hover {
  background: var(--saica-pill-bg-hover);
}

.iqit-megamenu-container .cbp-hrmenu-tab > a.nav-link {
  padding: 8px 14px;
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 13px;
}

/* Category icons / dropdown chevrons aren't part of the pill look */
.iqit-megamenu-container .cbp-mainlink-iicon,
.iqit-megamenu-container .cbp-submenu-aindicator {
  display: none !important;
}

/* Last item in the menu is "Ofertas" — pull it to the right and style it
   as the light "N productos en Ofertas" badge from the mockup. */
.iqit-megamenu-container .cbp-hrmenu-tab:last-child {
  margin-left: auto;
  background: #fff;
}

.iqit-megamenu-container .cbp-hrmenu-tab:last-child > a.nav-link {
  color: var(--saica-purple-dark) !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.iqit-megamenu-container .cbp-hrmenu-tab:last-child > a.nav-link::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../img/off.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.cbp-hrmenu .cbp-hrsub-inner {
  border-radius: 20px;
  margin-top: 7px;
}

.cbp-hrmenu .cbp-hrsub {
  font-size: .8rem;
}

.cbp-category-link-w a {
  color: #1e1e1e !important;
}

.cbp-hrmenu .cbp-column-title {
  display: block;
  padding: 0;
  margin-bottom: 0px;
}

.cbp-hrmenu .cbp-menu-column {
  margin-top: 4px;
}

.cbp-hrmenu .cbp-links li {
  margin: 0px 0;
  padding-left: 2px;
  position: relative;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer-container-main.footer-style-1 {
  background: var(--saica-footer-bg) !important;
  color: #fff;
  padding: 48px 0 24px;
}

/* Grid instead of flex so the social-links block (rendered as its own
   sibling column) can be placed directly under .contact-rich (rendered by
   the iqitcontactpage module hook) in the same column, without touching
   either module's own markup.
   iqitlinksmanager renders one .block-iqitlinksmanager per configured link
   block (foreach in modules/iqitlinksmanager/views/templates/hook/
   iqitlinksmanager.tpl) — there can be more than one. auto-fit collapses
   any unused trailing track, so this sizes itself to however many
   link-manager blocks + the contact block actually render, instead of a
   fixed 2-column assumption that made a 2nd link block overlap the 1st. */
#footer-container-main .footer-main-row {
  display: grid;
  grid-template-columns: auto repeat(auto-fit, minmax(160px, 1fr));
  column-gap: 32px;
  row-gap: 16px;
  align-items: start;
}

#footer-container-main .footer-main-row > .footer-brand-col {
  grid-column: 1;
  grid-row: 1;
}

#footer-container-main .footer-main-row > .block-iqitlinksmanager,
#footer-container-main .footer-main-row > .block-iqitcontactpage {
  grid-row: 1;
}

#footer-container-main .footer-brand-col {
  max-width: 220px;
}

#footer-container-main .footer-logo {
  max-width: 180px;
  margin-bottom: 12px;
}

#footer-container-main .footer-brand-tagline {
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

#footer-container-main .block-title span {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-transform: none;
}

#footer .block-title,
#checkout-footer .block-title {
  border-bottom: none;
}

#footer-container-main .block-content a,
#footer-container-main .block-content,
#footer-container-main .contact-rich {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

#footer-container-main .block-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer-container-main .block-content ul li {
  margin-bottom: 8px;
}

#footer-container-main .block-content a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Newsletter blocks aren't part of this footer redesign */
#footer-container-main .block-newsletter,
#footer-container-main .ps-emailsubscription-block {
  display: none !important;
}

/* Mockup shows 5 icons (Facebook, X, Instagram, Pinterest, LinkedIn); the
   module ships Facebook/Twitter/Instagram/Pinterest/Youtube/Vimeo — hide the
   two that aren't in the design. Add a real LinkedIn URL via the theme
   editor's social settings if/when one exists; there's no icon for it yet. */
#footer-container-main .social-links li.youtube,
#footer-container-main .social-links li.vimeo {
  display: none !important;
}

#footer-container-main .block-social-links .social-links {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin-top: 8px;
}

#footer-container-main .block-social-links .social-links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* The theme editor's dynamic CSS forces per-network brand colors (and a
   grey default) on these icons via #footer ... !important rules — this
   selector matches/beats that specificity (ID + 3 classes + 2 elements) so
   the icons stay white in every state instead. */
#footer-container-main .block-social-links .social-links._footer li a,
#footer-container-main .block-social-links .social-links._footer li a:hover,
#footer-container-main .block-social-links .social-links._footer li a:not(:hover) {
  color: #fff !important;
}

#footer-container-main .block-social-links .social-links li a:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Bottom copyright bar */
#footer-copyrights._footer-copyrights-1 {
  background: #fff !important;
  color: #35015bba;
  font-size: 13px;
  padding: 14px 0;
  font-weight: 500;
}

#footer-copyrights .copyright-poweredby {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #333;
}

#footer-copyrights .copyright-poweredby span {
  font-weight: 600;
  font-size: 10px;
}

#footer-copyrights .copyright-poweredby .poweredby-logo {
  height: 22px;
  width: auto;
}

/* ==========================================================================
   MISC / SITE-WIDE
   ========================================================================== */

span.swiper-pagination-bullet {
  transition: width 0.25s ease, border-radius 0.25s ease;
}

.swiper-pagination-bullet {
  background: #5e1b8f;
  height: 16px;
  width: 16px;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 50px !important;
  border-radius: 10px;
}

/* ==========================================================================
   PRODUCT CARD (product-miniature-1, card-1.JPG)
   ========================================================================== */

.product-miniature-layout-1 .product-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.products-grid .product-miniature-layout-1 .product-description {
  padding: 0;
}

.elementor-products-carousel .swiper-wrapper {
  gap: 16px;
}

/* Elementor product carousels (card-.JPG): Swiper's own JS sets each
   .swiper-slide's inline width as containerWidth/slidesToShow, with no
   awareness of the 16px flex `gap` above — N slides + (N-1) gaps then
   overflow the container, so only N-1 fit cleanly and the next slide
   peeks in at the edge. Recompute the width per visible-slide-count class
   (desktop-swiper-cls-fix-N, set by the widget itself) so gap is actually
   subtracted. !important is required to beat Swiper's inline style. */
.elementor-products-carousel.desktop-swiper-cls-fix-1 .swiper-slide {
  width: 100% !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-2 .swiper-slide {
  width: calc((100% - 16px) / 2) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-3 .swiper-slide {
  width: calc((100% - 32px) / 3) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-4 .swiper-slide {
  width: calc((100% - 48px) / 4) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-5 .swiper-slide {
  width: calc((100% - 64px) / 5) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-6 .swiper-slide {
  width: calc((100% - 80px) / 6) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-7 .swiper-slide {
  width: calc((100% - 96px) / 7) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-8 .swiper-slide {
  width: calc((100% - 112px) / 8) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-9 .swiper-slide {
  width: calc((100% - 128px) / 9) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-10 .swiper-slide {
  width: calc((100% - 144px) / 10) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-11 .swiper-slide {
  width: calc((100% - 160px) / 11) !important;
}

.elementor-products-carousel.desktop-swiper-cls-fix-12 .swiper-slide {
  width: calc((100% - 176px) / 12) !important;
}

/* Dynamic theme CSS adds a drop shadow on card hover — not part of this
   redesign. */
.product-miniature:hover {
  box-shadow: none !important;
}

/* Header cart trigger (cart.JPG): round white badge with the product count
   instead of "Carrito / (1)" text. */
.header-top .header-cart-default .cart-products-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background: #fff;
  color: var(--saica-purple-dark);
  font-size: 12px;
  font-weight: 700;
}

.header-top .header-cart-default .cart-toggle-details .value {
  font-weight: 500;
}

/* The theme editor's dynamic CSS hides .product-add-cart on grid cards by
   default (display:none!important, meant to be revealed on hover via JS) —
   force it always visible to match the mockup. */
.products-grid .product-miniature.product-miniature-layout-1 .product-add-cart {
  display: block !important;
}

/* Cards only show the "+ Agregar" button (cantidad.JPG) — no visible qty
   selector, same as the PDP's hidden #quantity_wanted field. */
.product-add-cart .input-group-add-cart .input-qty {
  display: none;
}

.product-miniature-layout-1 .product-add-cart .btn.btn-product-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 6px 14px;
  font-weight: 700;
  text-transform: none;
}

.product-miniature-layout-1 .product-add-cart .btn.btn-product-list:hover {
  filter: brightness(1.08);
  color: #fff;
}

.product-miniature-layout-1 .product-price-and-shipping {
  margin-top: 6px;
}

.products-grid .product-miniature-layout-1 .product-price-and-shipping,
.products-grid .product-miniature-layout-1 .products-variants,
.products-grid .product-miniature-layout-3 .product-price-and-shipping,
.products-grid .product-miniature-layout-3 .products-variants {
  padding-bottom: 0;
}

.product-miniature-layout-1 .product-price-and-shipping .product-price {
  font-size: 20px;
  font-weight: 700;
  color: #1E1E1E;
}

.product-miniature-layout-1 .product-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.product-miniature-layout-1 .product-title a {
  color: #1E1E1E !important;
}

/* LIST VIEW (product-miniature-list, ?productListView=list): reuses the
   card-1 button/price/title treatment above so switching views doesn't
   feel like a different site — visual only, the list keeps the extra
   fields (reference, brand, description, availability, variants) that the
   grid card dropped. */
.product-miniature-list .btn.btn-product-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 6px 14px;
  font-weight: 700;
  text-transform: none;
}

.product-miniature-list .btn.btn-product-list:hover {
  filter: brightness(1.08);
  color: #fff;
}

.product-miniature-list .product-price-and-shipping .product-price {
  font-size: 20px;
  font-weight: 700;
  color: #1E1E1E;
}

.product-miniature-list .product-title {
  font-weight: 500;
  color: #1E1E1E;
  font-size: 20px;
}

.product-miniature-list .product-title a {
  color: #1E1E1E !important;
}

/* Scoped to the list card (not a bare .text-muted) — that class is also
   used on checkout/cart/password-policy pages, which should keep their
   muted grey. */
.product-miniature-list .text-muted {
  font-size: 14px;
  color: #1e1e1e;
  opacity: 1;
  line-height: 1.2em;
}

.product-miniature-list-row {
  margin: 0;
  padding: 0.6rem .7rem;
}

.product-miniature-list-row > .col-description,
.product-miniature-list-row > .col-buy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Stock badges (product-availability, both grid overlay and list inline):
   pill shape to match the rest of the redesign's buttons/tags; Bootstrap's
   default .badge line-height crowds the icon against the text. */
.badge {
  line-height: initial;
  border-radius: 100px;
}

.alert {
  border: none;
  border-radius: 15px;
}

/* Sitewide secondary button (stock "Continuar comprando", filter clear
   buttons, etc.) — reuses the tinted-pill look already used for the
   /mi-cuenta sidebar links (.my-account-side-links .link-item) instead of
   Bootstrap's plain gray .btn-secondary. */
.btn.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  background: #2c0c4d1a;
  border: solid 2px #5e1b8f00;
  border-radius: 15px;
  color: #2c0c4d;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}

.btn.btn-secondary i {
  color: #2c0c4d;
}

.btn.btn-secondary:hover {
  background: #2c0c4d45;
  border-color: #2c0c4d00;
  color: #2c0c4d;
}

/* "Back to top" floating button — bumped up from bottom:1rem so it clears
   the WhatsApp chat bubble, sized up, and pulled into a proper circle
   (stock rule left it borderless with no radius). */
#back-to-top {
  border: 0;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 7rem;
  right: 1.6rem;
  transition: all .2s cubic-bezier(.7, 0, .3, 1);
  font-size: 2rem;
  outline: 0;
  z-index: 120;
  border-radius: 100px;
}

/* Quantity stepper (cantidad.JPG) that replaces the "+ Agregar" button
   after a successful add — see assets/js/saica-product-stepper.js. */
.saica-qty-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: fit-content;
  min-width: 100px;
  border: 2px solid var(--saica-purple-dark);
  border-radius: 24px;
  padding: 4px 14px;
  background: #fff;
}

.saica-qty-stepper[hidden] {
  display: none;
}

.saica-qty-stepper button {
  background: none;
  border: none;
  padding: 0;
  color: var(--saica-purple-dark);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}


.saica-qty-stepper .saica-qty-value {
  color: var(--saica-purple-dark);
  font-size: 16px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}

/* Trash-icon remove button only exists for the .smart card variant (see
   below) — regular cards remove via the "−" button at minimum quantity. */
.saica-qty-stepper .saica-qty-remove {
  display: none;
}

/* Product detail page (cant.JPG) — filled pill instead of the card's
   outline style, replacing the "Agregar al carrito" button in place. */
.saica-pdp-qty-stepper {
  border: none;
  border-radius: 24px;
  padding: 14px 24px;
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
  justify-content: space-between;
  min-width: 220px;
}

.saica-pdp-qty-stepper button {
  color: #fff;
  font-size: 20px;
}

.saica-pdp-qty-stepper .saica-qty-value {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.saica-pdp-qty-stepper .saica-qty-value::before {
  content: '';
}

.saica-pdp-qty-stepper .saica-qty-value::after {
  content: ' agregado';
}

/* ==========================================================================
   MINI-CART PANEL (header cart dropdown, #blockcart-content)
   ========================================================================== */

#blockcart-content .cart-title .modal-title {
  color: var(--saica-purple-dark);
  font-weight: 700;
}

#blockcart-content .cart-products li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

/* !important: see the .btn-secondary note below — in its normal (non-sticky)
   position this panel is a descendant of .header-top .col-header-right,
   whose "a { color: #fff }" rule otherwise wins here too, making the
   product name (white on this panel's white background) invisible. */
#blockcart-content .cart-products li a[href] {
  color: #1E1E1E !important;
}

/* Quantity stepper — same pill look as the product card's, reskinning the
   existing bootstrap-touchspin markup (vertical up/down arrows) without
   touching its DOM structure, so the working touchspin JS keeps working.
   display:contents on the button wrapper "unwraps" it so the two buttons
   become flex siblings of the input and can be reordered around it. */
#blockcart-content .bootstrap-touchspin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  border: 2px solid var(--saica-purple-dark);
  border-radius: 24px;
  padding: 4px 14px;
  background: #fff;
}

#blockcart-content .bootstrap-touchspin-prefix,
#blockcart-content .bootstrap-touchspin-postfix {
  display: none;
}

#blockcart-content .input-group-btn-vertical {
  display: contents;
}

#blockcart-content .js-cart-line-product-quantity {
  order: 2;
  flex: 0 0 24px;
  min-width: 24px;
  border: none;
  background: transparent;
  width: 24px;
  padding: 0;
  text-align: center;
  color: var(--saica-purple-dark);
  font-size: 16px;
  font-weight: 700;
  -moz-appearance: textfield;
}

#blockcart-content .js-cart-line-product-quantity::-webkit-inner-spin-button,
#blockcart-content .js-cart-line-product-quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#blockcart-content .btn-touchspin {
  background: none;
  border: none;
  padding: 0;
  color: var(--saica-purple-dark);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* Swap the small angle-up/angle-down glyphs for the same bold −/+ used on
   the product card's stepper. */
#blockcart-content .btn-touchspin .touchspin-up,
#blockcart-content .btn-touchspin .touchspin-down {
  display: none;
}

#blockcart-content .bootstrap-touchspin-down::before {
  content: '−';
}

#blockcart-content .bootstrap-touchspin-up::before {
  content: '+';
}

#blockcart-content .bootstrap-touchspin-down {
  order: 1;
}

#blockcart-content .bootstrap-touchspin-up {
  order: 3;
}

/* .remove-from-cart now lives inside .product-image (see the
   ps_shoppingcart-product-line.tpl override) so it can be pinned as a
   bubble over the thumbnail's bottom-right corner. */
#blockcart-content .cart-products .product-image {
  position: relative;
  display: block;
}

#blockcart-content .remove-from-cart {
  position: absolute;
  right: -4px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  color: #a3a3a3 !important;
  font-size: 12px;
}

#blockcart-content .remove-from-cart:hover {
  color: var(--saica-orange) !important;
}

#blockcart-content .cart-products .col.p-0 span {
  font-size: 14px;
  font-weight: 500;
}

#blockcart-content .cart-totals .value {
  color: var(--saica-purple-dark);
  font-weight: 700;
}

#blockcart-content .cart-buttons .btn-primary {
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-weight: 700;
}

#blockcart-content .cart-buttons .btn-primary:hover {
  filter: brightness(1.08);
}

#blockcart-content .cart-buttons .btn-secondary {
  background: #fff;
  /* !important: when this panel sits in its normal position (not the
     sticky-header clone), it's a descendant of .header-top .col-header-right,
     whose "a { color: #fff }" rule otherwise wins here too — white text on
     this button's white background, invisible. */
  color: var(--saica-purple-dark) !important;
  border: 2px solid var(--saica-purple-dark);
  border-radius: 24px;
  font-weight: 700;
}

#blockcart-content .cart-buttons .btn-secondary:hover {
  background: rgba(86, 42, 118, 0.06);
}

/* Dynamic theme CSS shifts the dropdown up when it's inside the sticky
   header's #sticky-cart-wrapper — not wanted here. */
#sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content {
  top: auto;
}

/* Dynamic theme CSS forces width:75px / height:40px here — not wanted. */
#blockcart-content .cart-products .bootstrap-touchspin {
  width: auto;
}

#blockcart-content .cart-products .block-cart-product-quantity {
  height: auto;
}

li.product-flag {
  display: table;
  background: #2fb5d2;
  padding: .3125rem .4375rem;
  color: #fff;
  margin-top: .5rem;
  z-index: 2;
  line-height: 1.1em;
  border-radius: 20px;
  font-size: 14px !important;
}

.product-flags .new {
  background: var(--saica-orange);
  color: #fff;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (detalle.JPG) — breadcrumb + main-product-wrapper
   ========================================================================== */

/* Breadcrumb — full-bleed background via the iqitthemeed_bread_width=
   'fullwidth-bg' config (set alongside this CSS), content stays contained. */
.breadcrumb {
  background: #EDE7F6 !important;
}

.breadcrumb li:last-child {
  font-weight: 700;
  color: #1E1E1E !important;
}

#wrapper .breadcrumb a {
    color: #1E1E1E;
}

#wrapper .breadcrumb li:after {
    color: #1E1E1E;
}

/* Image gallery */
#main-product-wrapper .product-cover {
  border: 1px solid #e3e3e3;
  border-radius: 16px;
  position: relative;
  padding: 24px;
}

.images-container .product-cover {
    border: 1px solid #0000004d !important;
}

img.thumb.js-thumb {
    border: 1px solid #0000004d !important;
    border-radius: 20px;
}

#main-product-wrapper .swiper-button-prev,
#main-product-wrapper .swiper-button-next {
  top: 50%;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
  transform: translateY(-50%);
}

#main-product-wrapper .swiper-button-prev::after,
#main-product-wrapper .swiper-button-next::after {
  content: none !important;
}

#main-product-wrapper .swiper-button-prev {
  left: 10px;
  width: 30px;
  height: 23px;
  background-image: url('../img/flecha-izq.svg');
}

#main-product-wrapper .swiper-button-next {
  right: 10px;
  width: 31px;
  height: 23px;
  background-image: url('../img/flecha-der.svg');
}

#product-images-thumbs .swiper-button-prev,
#product-images-thumbs .swiper-button-next {
  display: none !important;
}

#main-product-wrapper .product-thumbnails .swiper-slide,
#main-product-wrapper .product-thumbnails img {
  border-radius: 12px;
}

#main-product-wrapper .product-thumbnails .swiper-slide {
  border: 1px solid #e3e3e3;
  overflow: hidden;
}

/* Title + divider */
.saica-pdp-title {
  font-size: 28px;
  font-weight: 700;
  color: #1E1E1E;
}

/* Bulk-quantity badge + reference row */
.saica-pdp-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.saica-pdp-bulk-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.saica-pdp-bulk-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--saica-purple-dark);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.saica-pdp-bulk-badge span:not(.saica-pdp-bulk-circle) {
    font-size: 14px;
    font-weight: 400;
    color: #1E1E1E;
}

.saica-pdp-reference {
  color: #6b6b6b;
  font-size: 14px;
  margin-left: auto;
}

.saica-pdp-reference strong {
  color: #1E1E1E;
}

.saica-pdp-reference-label-short {
  display: none;
}

@media (max-width: 767px) {
  .saica-pdp-reference-label-full {
    display: none;
  }

  .saica-pdp-reference-label-short {
    display: inline;
  }
}

/* Price */
.saica-pdp-price {
  font-size: 40px;
  font-weight: 800;
  color: #1E1E1E;
  line-height: 1;
      margin-bottom: 20px;
}

.saica-pdp-price sup {
  font-size: 20px;
  top: -0.9em;
}

.saica-pdp-unit-price {
  color: #333;
  font-size: 15px;
  margin: 6px 0 20px;
}

/* Buy row: qty stepper + "Agregar al carrito", same pill treatment as the
   header cart dropdown's touchspin reskin — see #blockcart-content .bootstrap-touchspin
   above for the same technique/reasoning (display:contents to reorder the
   two touchspin buttons around the input without touching its JS). */
.saica-pdp-buy-row {
  display: flex;
  align-items: center;
  
  flex-wrap: wrap;
}

/* rgcompradirecta's "Comprar ahora" button (module hook output, .add-now)
   is a sibling of both the form and .saica-pdp-qty-stepper, not nested in
   either, so it stays on screen and to the right of whichever one
   saica-product-stepper.js currently shows (see product.tpl). */
.saica-pdp-add-cart {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* #quantity_wanted is a hidden field now (button-only pre-add state per
   cant.JPG), but PrestaShop's core touchspin JS still auto-wraps it with
   visible spinner buttons regardless of its hidden type — hide those. */
.saica-pdp-buy-row .input-group-btn-vertical {
  display: none !important;
}

.saica-pdp-buy-row .add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%) !important;
  color: #fff !important;
  border: none;
  border-radius: 24px;
  padding: 12px 32px;
  font-weight: 700;
  font-size: 16px;
  height: auto;
}

.saica-pdp-buy-row .add-to-cart:hover {
  filter: brightness(1.08);
}

/* Mockup's button has no icon, just the label */
.saica-pdp-buy-row .add-to-cart .bag-icon {
  display: none;
}

/* Description / Características sections */


.saica-pdp-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1E1E1E;
  margin-bottom: 8px;
}

.saica-pdp-section .rte-content {
    font-size: 14px;
    white-space: pre-wrap;
    line-height: 20px;
}

.saica-pdp-features {
  margin: 0;
}

.saica-pdp-feature-row {
  font-size: 14px;
  color: #1E1E1E;
}

.saica-pdp-feature-row dt {
  display: inline;
  font-weight: 700;
}

.saica-pdp-feature-row dt::after {
  content: ': ';
}

.saica-pdp-feature-row dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}

/* PDP gallery: the "bottom" thumbnail strip (js-qv-mask/Swiper) can render
   with a transient/miscalculated height while Swiper finishes initializing
   (lazy-loaded thumbs, updateSlides() settling), and .images-container has
   no overflow clipping — so an inflated mask bleeds down past the shorter
   info column and overlaps the footer. Cap it to the real thumbnail-row
   height and clip, same defensive treatment the "left" layout already gets
   (see warehouse/_dev/css .images-container-left .col-left-product-thumbs .mask). */
.images-container-bottom .js-qv-mask {
  max-height: 140px;
  overflow: hidden;
}

/* Pack contents ("Este pack contiene") */
.saica-pdp-pack-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.saica-pdp-pack-list {
    
    border: 1px solid #7739a35c;
    border-radius: 20px;
    padding: 14px 16px;
}
.saica-pdp-pack-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e3e3e3;
}

.saica-pdp-pack-item:last-child {
  border-bottom: none;
}

.saica-pdp-pack-qty {
  flex-shrink: 0;
  width: 28px;
  font-size: 14px;
  font-weight: 700;
  color: var(--saica-purple-dark);
}

.saica-pdp-pack-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.saica-pdp-pack-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.saica-pdp-pack-name {
  flex: 1;
  font-size: 14px;
  color: #1E1E1E;
}

.saica-pdp-pack-name:hover {
  color: var(--saica-purple-dark);
}

.elementor-column-gap-default .elementor-element-populated {
  padding: 0;
}

.images-container .swiper-button-arrow,
#product .product-cover .expander > span,
#product-modal .modal-body .swiper-button-arrow {
  color: inherit !important;
  background: none !important;
}

#product .product-cover .expander {
  color: inherit !important;
  background: none !important;
}

#product .product-cover .expander > span {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%) !important;
  color: #fff !important;
}

.products-selection {
  margin: 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
}

#content-wrapper .page-title {
    color: #333;
    font-size: 1.5714285714rem;
    font-style: normal;
    font-weight: 700;
    text-transform: none;
    border-bottom: inherit;
    margin-bottom: inherit;
    padding-bottom: .5em;
}

#category h1.h1.page-title {
    color: #333;
    font-size: 24px;
    margin-bottom: 0px;
}

#left-column,
#category-top-row {
  color: #1E1E1E;
}

.view-switcher img {
  width: 16.5px;
  height: 16.5px;
}

.view-switcher a:nth-child(2) img {
    width: 21.5px;
    height: 16.5px;
}

div#category-top-row {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    align-items: center;
}

@media (max-width: 767px) {
  div#category-top-row {
    gap: 8px;
  }
}

#category-top-row .form-control {
    background-color: #fff;
    color: #1E1E1E;
    border: solid 2px #5e1b8f54;
    border-radius: 15px;
}

.products.row.products-grid {
  gap: 16px;
}

/* The 16px gap above isn't accounted for by Bootstrap's fixed-percentage
   col-N / col-lg-4 / col-xl-3 widths (same class of bug as the Elementor
   carousels above), so it was pushing the last card of each row down to
   the next one. Subtract the gap's share per breakpoint's column count
   (2 up to 992px, 3 from 992px, 4 from 1140px — this theme's own lg/xl
   breakpoints) so the intended number of cards keeps fitting per row. */
/* Excludes .grid-small (an Elementor home-page section using its own
   col-lg-4/col-xl-4 3-per-row layout, not the 4-per-row category listing
   grid) — this width override was forcing it to 25%, breaking that
   section's intended 3-column layout. */
.products.row.products-grid:not(.grid-small *) > div {
  width: calc(50% - 8px);
}

@media (min-width: 992px) {
  .products.row.products-grid:not(.grid-small *) > div {
    width: calc(33.3333% - 10.6667px);
  }
}

@media (min-width: 1140px) {
  .products.row.products-grid:not(.grid-small *) > div {
    width: calc(25% - 12px);
  }
}

.products-selection .view-switcher {
    font-size: 18px;
    text-align: end;
}

/* Pagination (paginas.JPG): round purple page-number pills, dark = current,
   "Anterior"/"Siguiente" as filled pill buttons. */
.pagination .page-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination .page-list li {
  display: flex;
  flex-shrink: 0;
  border: none;
}

.pagination .page-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 20px;
  background: var(--saica-purple-light);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
}

.pagination .page-list li.current a {
  background: var(--saica-purple-dark);
  opacity: 1;
}

.pagination .page-list a.previous,
.pagination .page-list a.next {
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
}

.pagination .page-list a.previous img,
.pagination .page-list a.next img {
  width: 14px;
  height: auto;
}

.pagination .page-list a.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Login modal (header "Iniciar sesión" button) — the sitewide
   .modal-backdrop is a near-white rgba(194,194,194,.7) tint (fine behind
   modals with their own opaque imagery), but this modal's plain white
   .modal-content had no shadow/radius to separate it, so the whole page
   just read as one flat white wash. Give it real depth + the site's brand
   styling instead. */
#saica-login-modal .modal-dialog {
  max-width: 460px;
}

#saica-login-modal .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(30, 8, 53, 0.35);
  padding: 8px;
}

#saica-login-modal .modal-header {
  border-bottom: none;
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#saica-login-modal .modal-header .btn-close {
  padding: 0;
  margin: 0;
}

#saica-login-modal .saica-login-modal-title {
  color: var(--saica-purple-dark);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

#saica-login-modal .modal-body {
  padding: 16px 24px 24px;
}

#saica-login-modal .form-group label {
  color: #1E1E1E;
  font-weight: 600;
}

#saica-login-modal .form-control {
  background-color: #fff;
  color: #1E1E1E;
  border: solid 2px #5e1b8f54;
  border-radius: 15px;
}

#saica-login-modal .input-group .form-control {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#saica-login-modal .input-group-append .btn {
  border: solid 2px #5e1b8f54;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  color: var(--saica-purple-dark);
}

#saica-login-modal .forgot-password {
  margin-bottom: 10px;
  text-align: right;
  color: var(--saica-purple-dark);
}

#saica-login-modal .forgot-password a {
  color: var(--saica-purple-dark);
}

#saica-login-modal .form-control-submit {
  display: block;
  width: 100%;
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 16px;
}

#saica-login-modal .form-control-submit:hover {
  filter: brightness(1.08);
}

#saica-login-modal .no-account {
  color: var(--saica-purple-dark);
  font-weight: 600;
  margin-top: 20px;
}

#saica-login-modal .no-account a {
  color: var(--saica-purple-dark);
}

.saica-account-caret {
  font-size: 10px;
  margin-left: 2px;
  transition: transform .15s ease;
}

.dropdown.show .saica-account-caret {
  transform: rotate(180deg);
}

/* Logged-in header account dropdown (#user_info, ps_customersignin.tpl) —
   this dropdown was dormant behind the h_user_dropdown config flag until
   now, so it was never styled: .dropdown-item inherited white text meant
   for a dark nav context, rendering white-on-white against the menu's own
   white background. */
#user_info .dropdown-menu {
  border: none;
  border-radius: 15px;
  box-shadow: 0 12px 40px rgba(30, 8, 53, 0.2);
  padding: 8px;
}

#user_info .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1E1E1E;
  font-size: 14px;
  border-radius: 10px;
  padding: 10px 12px;
  border: none;
}

#user_info .dropdown-item:hover,
#user_info .dropdown-item:focus {
  background-color: #f5eefc;
  color: var(--saica-purple-dark);
}

#user_info .dropdown-item i {
  color: var(--saica-purple-dark);
  width: 16px;
  text-align: center;
}

.saica-dropdown-item-icon,
.saica-link-item-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ==========================================================================
   LOGIN (/inicio-sesion), REGISTRATION (?controller=registration) & the
   whole /mi-cuenta area (.my-account-page-content-wrapper is the shared
   wrapper from customer/page.tpl — dashboard, identity, addresses,
   address, history, order-*, discount, password-*, guest-tracking; every
   customer-account template extends it, so one selector covers all of
   them). These were still the stock IQIT look — reuse #saica-login-modal's
   form language (purple-bordered pill inputs, gradient submit button)
   instead. Baseline color/size here is the "no text under 14px, everything
   #1E1E1E at full opacity" rule applied sitewide to these pages, including
   third-party hook output (social login, password policy) that has no
   class of its own to target — the specific rules below override it only
   where a different look is actually needed (title, submit button text).
   ========================================================================== */

.page-authentication,
.page-registration,
.my-account-page-content-wrapper {
  color: #1E1E1E;
  font-size: 14px;
}

.my-account-page-content-wrapper,
.page-authentication #content,
.page-customer-account #content {
  border: none;
  padding: 0;
}

.page-authentication small,
.page-registration small,
.my-account-page-content-wrapper small,
.page-authentication .text-muted,
.page-registration .text-muted,
.my-account-page-content-wrapper .text-muted,
.page-authentication .form-control-comment,
.page-registration .form-control-comment,
.my-account-page-content-wrapper .form-control-comment {
  color: #1E1E1E;
  opacity: 1;
  font-size: 14px;
}

.page-authentication h1.page-title,
.page-registration h1.page-title,
.my-account-page-content-wrapper h1.page-title {
  color: var(--saica-purple-dark);
  font-size: 26px;
  font-weight: 700;
}

.page-authentication .form-group label,
.page-registration .form-group label,
.my-account-page-content-wrapper .form-group label,
.page-authentication .custom-checkbox label,
.page-registration .custom-checkbox label,
.my-account-page-content-wrapper .custom-checkbox label,
.page-authentication .radio-inline,
.page-registration .radio-inline,
.my-account-page-content-wrapper .radio-inline {
  color: #1E1E1E;
  opacity: 1;
  font-size: 14px;
  font-weight: 600;
}

.page-authentication .form-control,
.page-registration .form-control,
.my-account-page-content-wrapper .form-control {
  background-color: #fff;
  color: #1E1E1E;
  border: solid 2px #5e1b8f54;
  border-radius: 15px;
  font-size: 14px;
}

.page-authentication .input-group .form-control,
.page-registration .input-group .form-control,
.my-account-page-content-wrapper .input-group .form-control {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.page-authentication .input-group-append .btn,
.page-registration .input-group-append .btn,
.my-account-page-content-wrapper .input-group-append .btn {
  border: solid 2px #5e1b8f54;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  color: var(--saica-purple-dark);
}

.page-authentication .forgot-password,
.page-authentication .forgot-password a,
.page-registration .register-form > p,
.page-registration .register-form > p a {
  color: var(--saica-purple-dark);
  font-size: 14px;
}

.page-authentication .form-control-submit,
.page-registration .form-control-submit,
.my-account-page-content-wrapper .form-control-submit {
  display: block;
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 16px;
}

.page-authentication .form-control-submit:hover,
.page-registration .form-control-submit:hover,
.my-account-page-content-wrapper .form-control-submit:hover {
  filter: brightness(1.08);
  color: #fff;
}

/* rg_sigma (SigmaWeb DNI/CUIT check) injects its own "Continuar"/
   "Aceptar"/"Cancelar" buttons via JS into the registration form
   (modules/rg_sigma/views/templates/hook/customer_account_form.tpl) —
   plain .btn.btn-primary/.btn-continuar/.btn-accept/.btn-cancel with no
   brand styling of their own, unlike the real submit button below them. */
.page-registration .btn-continuar,
.page-registration .btn-accept {
  display: inline-block;
  background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 16px;
}

.page-registration .btn-continuar:hover,
.page-registration .btn-accept:hover {
  filter: brightness(1.08);
  color: #fff;
}

.page-registration .btn-cancel {
  display: inline-block;
  background: #fff;
  color: #2c0c4d;
  border: solid 2px #5e1b8f54;
  border-radius: 24px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 16px;
}

.page-registration .btn-cancel:hover {
  background: #f5eefc;
}

/* /mi-cuenta dashboard + sidebar section links (Datos personales,
   Direcciones, Pedidos, etc.) — stock IQIT rendered these as bare text
   links with no card treatment. */
.my-account-side-links a {
  display: block;
  text-decoration: none;
}

.my-account-page-content-wrapper .my-account-side-links {
  border-right: none;
}

/* Mobile "menu" toggle (customer/page.tpl override) that expands/collapses
   .my-account-side-links via Bootstrap's collapse component — desktop
   force-shows it regardless of the .show state Bootstrap toggles, since
   the button itself is mobile-only. */
.saica-myaccount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saica-myaccount-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: #5e1b8f2e;
  color: #5e1b8f;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .saica-myaccount-menu-toggle {
    display: flex;
  }
}

@media (min-width: 768px) {
  .my-account-page-content-wrapper .my-account-side-links.collapse:not(.show) {
    display: block;
  }
}

.my-account-page-content-wrapper .my-account-side-links>a {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: 0;
  border-bottom: none;
  padding: 0px !important;
  background-color: inherit;
}

.my-account-side-links .link-item, #wk-quick-order-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    margin-bottom: 10px;
    background: #2c0c4d1a;
    border: solid 2px #5e1b8f00;
    border-radius: 15px;
    color: #2c0c4d;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

.my-account-side-links .link-item i {
  color: #2c0c4d;
  font-size: 16px;
}

.my-account-side-links a:hover .link-item, #wk-quick-order-link:hover {
  background: #2c0c4d45;
  border-color: #2c0c4d00;
}
#wk_right_column .product-customization{
    margin: 0;
    border: 0px !important;
    padding: 0px !important;
}
/* ==========================================================================
   CHECKOUT (/pedido, body.page-order) — same purple-pill form language as
   #saica-login-modal / .page-authentication / .page-registration /
   .my-account-page-content-wrapper, extended to every checkout step
   (personal information's login + create-account forms, addresses,
   shipping, payment). Stock IQIT checkout renders bare Bootstrap here:
   square gray inputs, solid black .btn-primary (sitewide .btn-primary is
   black, see theme.css), plain step numbers and no card treatment for the
   selectable delivery/payment/saved-address options.
   ========================================================================== */

.page-order .checkout-step {
  border: none;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 12px rgba(44, 12, 77, .08);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  opacity: 1;
}

.page-order .checkout-step .step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--saica-purple-dark);
  font-weight: 700;
}

.page-order .checkout-step.-current .step-title {
  border-bottom-color: #5e1b8f2e;
}

.page-order .step-number {
  display: inline-block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--saica-purple-dark) 0%, var(--saica-purple-light) 100%);
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.page-order .checkout-step .step-edit {
  color: var(--saica-purple-dark);
  font-weight: 600;
}

.page-order .checkout-step .content {
  color: #1E1E1E;
  font-size: 14px;
}

.page-order .form-group label,
.page-order .custom-checkbox label,
.page-order .radio-inline,
.page-order .radio-block {
  color: #1E1E1E;
  opacity: 1;
  font-size: 14px;
  font-weight: 600;
}

.page-order .form-control {
  background-color: #fff;
  color: #1E1E1E;
  border: solid 2px #5e1b8f54;
  border-radius: 15px;
  font-size: 14px;
}

.page-order .input-group .form-control {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.page-order .input-group-append .btn {
  border: solid 2px #5e1b8f54;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  color: var(--saica-purple-dark);
}

.page-order .forgot-password,
.page-order .forgot-password a {
  color: var(--saica-purple-dark);
  font-size: 14px;
}

/* Every checkout call-to-action uses either the sitewide-black .btn-primary
   (Iniciar sesion, Continuar, Place order...) or .form-control-submit (the
   two personal-information toggle links) — style both as the same gradient
   pill used on auth/registration/account so the whole flow reads as one
   system. Scoped to .page-order so this doesn't touch .btn-primary
   elsewhere on the site (product pages, etc). */
.page-order .btn.btn-primary,
.page-order .form-control-submit {
  display: inline-block;
  background: linear-gradient(90deg, var(--saica-purple-dark) 0%, var(--saica-purple-light) 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 16px;
}

.page-order .btn.btn-primary:hover,
.page-order .form-control-submit:hover {
  filter: brightness(1.08);
  color: #fff;
}

.page-order .btn.btn-primary.disabled,
.page-order .btn.btn-primary:disabled {
  background: #c9c9c9;
  color: #fff;
  filter: none;
}

/* Selectable option cards: saved addresses, delivery carriers, payment
   methods — stock markup is a bare radio with no card treatment. */
.page-order .address-item,
.page-order .delivery-option,
.page-order .payment-option {
  border: solid 2px #5e1b8f2e;
  border-radius: 15px;
  padding: 14px 18px;
  margin-bottom: 12px;
  transition: border-color .15s ease, background-color .15s ease;
}

.page-order .address-item.selected,
.page-order .delivery-option:has(input:checked),
.page-order .payment-option:has(input:checked) {
  border-color: var(--saica-purple-dark);
  background: #2c0c4d0d;
}

.page-order .address-item hr {
  border-color: #5e1b8f2e;
}

.page-order .address-alias {
  font-weight: 700;
  color: var(--saica-purple-dark);
}

.page-order .custom-radio {
  border-color: #5e1b8f54;
}

.page-order .custom-checkbox span {
  border-color: #5e1b8f54;
}

.page-order .custom-radio input:checked + span,
.page-order .custom-checkbox input:checked + span {
  background-color: var(--saica-purple-dark);
}

.page-order .checkbox-checked {
  color: #fff;
}

/* Core PrestaShop password-strength indicator (usePasswordPolicy.js,
   triggered on keyup in the register form's password field) opens a
   Bootstrap popover with hint bullets on top of the input. Keep the
   progress bar + green/red input border it also draws, just hide the
   floating balloon — checkout only, per request. */
.page-order .popover {
  display: none !important;
}

/* Order summary sidebar (#js-checkout-summary) — same white card + purple
   accents as the checkout steps, instead of the stock plain-bordered
   Bootstrap .card with a flat gray promo box. */
.page-order #js-checkout-summary {
  border: none;
  border-radius: 15px;
  box-shadow: 0 2px 12px rgba(44, 12, 77, .08);
  overflow: hidden;
}

.page-order #js-checkout-summary hr {
  margin: 0;
  border-color: #5e1b8f2e;
}

.page-order .cart-summary-top {
  color: var(--saica-purple-dark);
  font-weight: 700;
  font-size: 16px;
}

.page-order .cart-summary-products a {
  color: var(--saica-purple-dark);
}

.page-order .cart-summary-product {
  border-bottom-color: #5e1b8f2e;
}

/* .media-left has max-width:40px in the base theme, but as a flex item its
   default min-width:auto lets a broken/missing product image's alt text
   overflow that cap — pin both the wrapper and the image to a fixed
   thumbnail size so the row stays tidy either way. */
.page-order .cart-summary-product .media-left {
  min-width: 0;
  max-width: 48px;
}

.page-order .cart-summary-product .media-object {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: solid 1px #5e1b8f2e;
}

.page-order .cart-summary-product .product-name {
  color: #1E1E1E;
  font-weight: 600;
}

.page-order .cart-summary-line {
  color: #1E1E1E;
  font-size: 14px;
  padding: 4px 0;
}

.page-order .cart-summary-line .label {
  font-weight: 600;
}

.page-order .cart-summary-line.cart-total,
.page-order .cart-totals {
  color: var(--saica-purple-dark);
  border-top-color: #5e1b8f2e;
}

.page-order .cart-summary-line.cart-total .value {
  font-weight: 700;
}

/* Voucher / promo code block */
.page-order .block-promo .cart-voucher-area {
  background: #ffffff;
  border-radius: 15px;
  padding: 1rem;
}

.page-order .promo-code .voucher-icon {
  color: var(--saica-purple-dark);
}

.block-promo .voucher-icon {
  font-size: 29px;
}

.page-order .promo-code .btn-secondary {
  background: linear-gradient(90deg, var(--saica-purple-dark) 0%, var(--saica-purple-light) 100%);
  color: #fff;
  border: none;
  border-radius: 0 15px 15px 0;
  padding: 12px 30px;
  font-weight: 700;
}

.page-order .promo-code .btn-secondary:hover {
  filter: brightness(1.08);
  color: #fff;
}

.page-order .promo-name .label {
  color: var(--saica-purple-dark);
  font-weight: 600;
}

/* The "Crear una cuenta" register form's submit button hard-codes a
   fa-spin spinner icon (customer-form.tpl) with nothing to toggle it, so
   it rendered visible at rest. Hide by default; saica-checkout-spinner.js
   adds .show back on submit. */
.page-order .spinner-span {
  display: none;
}

.page-order .spinner-span.show {
  display: inline-block;
}

/* ==========================================================================
   CART PAGE (/carrito, body.page-cart) — same purple/white card language
   as checkout, applied to the product list (.cart-container) and the
   order-summary card (.card.cart-summary, which reuses the exact same
   cart-summary-totals.tpl / cart-voucher.tpl partials as checkout's
   #js-checkout-summary, so the same line/total/voucher rules apply here
   too). Stock IQIT cart page renders plain Bootstrap: no card shadow,
   vertical touchspin arrows for quantity, black .btn-primary
   "Finalizar compra".
   ========================================================================== */

.page-cart .cart-container,
.page-cart .cart-summary.card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 2px 12px rgba(44, 12, 77, .08);
  background: #fff;
}

.page-cart .cart-container {
  padding: 0.5rem 1.5rem;
  margin-bottom: 30px;
}

.page-cart .cart-item {
  border-bottom: 1px solid #5e1b8f2e;
  padding: 14px 0;
}

.page-cart .cart-item:last-child {
  border-bottom: none;
}

.page-cart .product-line-info .label {
  color: #1E1E1E;
  font-weight: 600;
}

.page-cart .product-line-info-secondary {
  color: #1E1E1E;
  opacity: .7;
  font-size: 13px;
}

.page-cart .product-price strong,
.page-cart .unit-price .value {
  color: var(--saica-purple-dark);
}

.page-cart .remove-from-cart {
  color: #5e1b8f;
}

.page-cart .remove-from-cart:hover {
  color: var(--saica-purple-dark);
}

/* Quantity stepper — same pill look as the product card's stepper
   (.saica-qty-stepper) and the mini-cart's (#blockcart-content above),
   reskinning the existing bootstrap-touchspin markup without touching its
   DOM structure, so the working touchspin JS keeps working. */
.page-cart .qty .bootstrap-touchspin {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  border: 2px solid var(--saica-purple-dark);
  border-radius: 24px;
  padding: 4px 14px;
  background: #fff;
}

.page-cart .qty .bootstrap-touchspin-prefix,
.page-cart .qty .bootstrap-touchspin-postfix {
  display: none;
}

.page-cart .qty .input-group-btn-vertical {
  display: contents;
}

.page-cart .qty input.js-cart-line-product-quantity {
  order: 2;
  flex: 0 0 24px;
  min-width: 24px;
  border: none;
  background: transparent;
  width: 24px;
  padding: 0;
  text-align: center;
  color: var(--saica-purple-dark);
  font-size: 16px;
  font-weight: 700;
  -moz-appearance: textfield;
}

.page-cart .js-cart-line-product-quantity::-webkit-inner-spin-button,
.page-cart .js-cart-line-product-quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-cart .qty .btn-touchspin {
  background: none;
  border: none;
  padding: 0;
  color: var(--saica-purple-dark);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.page-cart .qty .btn-touchspin .touchspin-up,
.page-cart .qty .btn-touchspin .touchspin-down {
  display: none;
}

.page-cart .qty .bootstrap-touchspin-down::before {
  content: '−';
}

.page-cart .qty .bootstrap-touchspin-up::before {
  content: '+';
}

.page-cart .qty .bootstrap-touchspin-down {
  order: 1;
}

.page-cart .qty .bootstrap-touchspin-up {
  order: 3;
}

.page-cart .cart-summary-line {
  color: #1E1E1E;
  font-size: 14px;
  padding: 4px 0;
}

.page-cart .cart-summary-line .label {
  font-weight: 600;
}

.page-cart .cart-summary-line.cart-total,
.page-cart .cart-totals {
  color: var(--saica-purple-dark);
  border-top-color: #5e1b8f2e;
}

.page-cart .cart-summary-line.cart-total .value {
  font-weight: 700;
}

.page-cart .form-control {
  background-color: #fff;
  color: #1E1E1E;
  border: solid 2px #5e1b8f54;
  border-radius: 15px;
  font-size: 14px;
}

.page-cart .input-group .form-control {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.page-cart .block-promo .cart-voucher-area {
  background: #ffffff;
  border-radius: 15px;
  padding: 1rem;
}

.page-cart .promo-code .voucher-icon {
  color: var(--saica-purple-dark);
}

.page-cart .promo-code .btn-secondary {
  background: linear-gradient(90deg, var(--saica-purple-dark) 0%, var(--saica-purple-light) 100%);
  color: #fff;
  border: none;
  border-radius: 0 15px 15px 0;
  padding: 12px 30px;
  font-weight: 700;
}

.page-cart .promo-code .btn-secondary:hover {
  filter: brightness(1.08);
  color: #fff;
}

.page-cart .btn.btn-primary,
.page-cart .form-control-submit {
  display: inline-block;
  background: linear-gradient(90deg, var(--saica-purple-dark) 0%, var(--saica-purple-light) 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 16px;
}

.page-cart .btn.btn-primary:hover,
.page-cart .form-control-submit:hover {
  filter: brightness(1.08);
  color: #fff;
}

.page-cart .btn.btn-primary.disabled,
.page-cart .btn.btn-primary:disabled {
  background: #c9c9c9;
  color: #fff;
  filter: none;
}

/* ==========================================================================
   MOBILE HEADER (mobile-headera.JPG)
   ========================================================================== */

#mobile-header-sticky {
  background: linear-gradient(90deg, var(--saica-purple-dark) 0%, var(--saica-purple-light) 100%);
  padding: 10px 0;
}

#mobile-header .mobile-main-bar {
  padding-top: 0;
  padding-bottom: 0;
}

#mobile-header .m-nav-btn > i {
    font-size: 2rem;
}

#mobile-header-sticky .row-mobile-header {
  gap: 8px;
  flex-wrap: nowrap;
  padding: 0px 15px;
}

#mobile-header-sticky .m-nav-btn {
  color: #fff;
  padding: 0.375rem;
}

#mobile-header-sticky .m-nav-btn > span {
  display: none;
}

#mobile-header-sticky .col-mobile-logo {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
}

#mobile-header-sticky .col-mobile-logo .logo {
  max-height: 26.4px;
  width: auto;
}

#mobile-header-sticky .col-mobile-btn-account .m-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

#mobile-header-sticky .col-mobile-btn-cart .m-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 9px 12px;
}

#mobile-header-sticky .col-mobile-btn-cart .cart-products-count-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: var(--saica-purple-dark);
  font-size: 11px;
  font-weight: 700;
  position: static;
  margin-left: 6px;
}

/* Same custom icons as desktop (cart.svg / user.png) instead of the
   FontAwesome glyphs. */
#mobile-header-sticky .col-mobile-btn-account .fa-user {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../img/user.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

#mobile-header-sticky .col-mobile-btn-account .fa-user::before {
  content: '';
}

#mobile-header-sticky .mobile-bag-icon.fa-shopping-bag {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 18px;
  height: 18px;
  padding-left: 18px;
  background-image: url('../img/cart.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px 18px;
}

#mobile-header-sticky .mobile-bag-icon.fa-shopping-bag::before {
  content: '';
}

/* Permanently-visible search bar row (replaces the vendor's collapsible
   search icon/dropdown), reusing the desktop search-widget's own markup
   (via {widget name="iqitsearch"}) with the same pill styling. */
.saica-mobile-search-row {
  padding: 10px 0.625rem 0;
}

.saica-mobile-search-row .search-widget,
.saica-mobile-search-row .search-widget form,
.saica-mobile-search-row .search-widget .input-group {
  width: 100%;
  max-width: none !important;
}

.saica-mobile-search-row .search-widget .input-group {
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

.saica-mobile-search-row .search-widget .form-search-control {
  border: none;
  background: transparent;
  padding: 1.1rem 1rem;
}

.saica-mobile-search-row .search-widget .search-btn {
  background: var(--saica-orange);
  color: #fff;
  border: none;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  margin: 4px;
  padding: 0 !important;
}

.saica-mobile-search-row .search-widget .search-btn .fa-search {
  display: none;
}

.saica-mobile-search-row .search-widget .search-btn {
  background-image: url('../img/search.svg');
  background-repeat: no-repeat;
  background-position: 55% center;
  background-size: 16px 16px;
}

.saica-mobile-search-row .search-widget .input-group > .search-btn {
  margin-left: 3px !important;
  border-top-left-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

@media (max-width: 767px) {
  #footer-container-main .footer-main-row {
    grid-template-columns: 1fr;
  }

  #footer-container-main .footer-main-row > .footer-brand-col {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    width: 100%;
    text-align: center;
  }

  #footer-container-main .footer-main-row > .block-iqitlinksmanager,
  #footer-container-main .footer-main-row > .block-iqitcontactpage {
    grid-column: 1;
    grid-row: auto;
  }

  #footer-copyrights .row {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: 10px;
  }
}

/* Elementor product carousels on mobile: regardless of the configured
   desktop slide count (desktop-swiper-cls-fix-N, fixed in the markup, not
   swapped per breakpoint), show 1.5 products — 1 full card plus a sliver
   of the next one, as a "swipe for more" affordance. Overrides the
   desktop-swiper-cls-fix-N width rules above (same specificity, wins on
   source order) within this media query only.
   Formula matches Swiper's own internal math for a fractional
   slidesPerView + spaceBetween (configured in
   saica-mobile-carousel-fix.js): slideSize = (containerWidth -
   spaceBetween * (slidesPerView - 1)) / slidesPerView, i.e.
   (100% - 16px * 0.5) / 1.5 = (100% - 8px) / 1.5. Getting this wrong (no
   subtraction, or subtracting the full 16px) previously left the last
   product either short of the edge or clipped past it, since our CSS
   !important and Swiper's own inline width both apply and must agree
   exactly for its end-of-scroll calculation to land on the real edge.
   The .swiper-wrapper CSS gap is zeroed out below so it doesn't double up
   with Swiper's own spaceBetween-driven margin. */
@media (max-width: 767px) {
  .elementor-products-carousel.desktop-swiper-cls-fix-1 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-2 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-3 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-4 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-5 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-6 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-7 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-8 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-9 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-10 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-11 .swiper-slide,
  .elementor-products-carousel.desktop-swiper-cls-fix-12 .swiper-slide {
    width: calc((100% - 8px) / 1.5) !important;
  }

  .elementor-products-carousel .swiper-wrapper {
    gap: 0 !important;
  }
}

/* Elementor product carousel arrows (same flecha-izq/flecha-der.svg as the
   PDP main image gallery): Swiper's own swiper-button-lock/disabled
   classes hide the boundary arrow (e.g. "prev" on the first slide) via
   display:none, so force visibility past those state classes, same as
   #main-product-wrapper's arrows. */
.swiper-container-wrapper .swiper-button-prev,
.swiper-container-wrapper .swiper-button-next {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  border-radius: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

.swiper-container-wrapper .swiper-button-prev::after,
.swiper-container-wrapper .swiper-button-next::after {
  content: none !important;
}

.swiper-container-wrapper .swiper-button-prev {
  left: 4px;
  width: 30px;
  height: 23px;
  background-image: url('../img/flecha-izq.svg');
}

.swiper-container-wrapper .swiper-button-next {
  right: 4px;
  width: 31px;
  height: 23px;
  background-image: url('../img/flecha-der.svg');
}

/* Mobile product carousels: draggable/swipeable only, no dots pagination
   (arrows above stay). */
@media (max-width: 767px) {
  .swiper-container-wrapper .swiper-pagination {
    display: none !important;
  }
}

#search_filter_toggler {
    background: var(--saica-purple-dark);
    color: #fff;
    /* border-color: var(--saica-purple-dark); */
    padding: 4px 10px;
    border-radius: 100px;
}

#search_filter_toggler i,
#search_filter_toggler .fa {
  color: #fff;
}

#active-search-filters,
.product-miniature-list .product-functional-buttons {
    margin-top: 0;
}

/* Mobile filters panel (#search_filter_toggler → #left-column.-only-facet-search):
   the vendor CSS explicitly hides every child of #left-column except
   #facets_search_wrapper in this mode (#left-column.-only-facet-search
   > :not(#facets_search_wrapper) { display: none }), so .block-categories
   (a sibling, not a descendant of #facets_search_wrapper) never showed —
   only the facets did. Also turn it into a real fullscreen panel: fixed
   position, own header (close button, added by
   saica-mobile-filters-close.js) and a fixed footer for the real "OK"
   apply button (#search_filter_controls, which persists across the
   panel's own AJAX-refreshed facet content). */
@media (max-width: 991px) {
  #left-column.-only-facet-search .block-categories {
    display: block !important;
  }

  /* Vendor text in here runs as small as 10.5px (category links,
     "Borrar todo", filter option labels, price range) — bump everything
     to a readable 14px floor. */
  #left-column.-only-facet-search,
  #left-column.-only-facet-search * {
    font-size: 14px !important;
  }

  /* Same everywhere except the "OK" apply button (restored to white
     right below — simpler/more reliable than a compound :not() here,
     whose browser support for a complex selector argument is spotty),
     which keeps its own white text on its purple gradient background. */
  #left-column.-only-facet-search,
  #left-column.-only-facet-search * {
    color: #1E1E1E !important;
  }

  #search_filter_controls .ok,
  #search_filter_controls .ok * {
    color: #fff !important;
  }

  #left-column.-only-facet-search {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: #fff;
    overflow-y: auto;
    padding: 70px 15px 90px !important;
    margin: 0 !important;
  }

  #search_filter_controls {
    display: flex !important;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100000;
    background: #fff;
    padding: 12px 15px;
    margin: 0 !important;
    gap: 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  }

  /* flex-basis 0 + grow 4/6 splits the space that's actually left after the
     row's own padding and gap, unlike a 40%/60% basis, which measures against
     the full width and so always overflowed by exactly gap + padding. */
  #search_filter_controls .js-search-filters-clear-all,
  #search_filter_controls .ok {
    box-sizing: border-box;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #search_filter_controls .js-search-filters-clear-all {
    flex: 4 1 0;
  }

  #search_filter_controls .ok {
    flex: 6 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, #562A76 0%, #7739A3 100%);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 10px;
    font-weight: 700;
  }

  .saica-mobile-filters-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .saica-mobile-filters-title {
    color: var(--saica-purple-dark);
    font-size: 18px;
    font-weight: 700;
  }

  .saica-mobile-filters-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--saica-purple-dark);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 42px;
    line-height: 1;
  }
}

.saica-mobile-filters-header {
  display: none;
}

.saica-mobile-filters-header.show {
  display: flex;
}

.category-top-menu > .category-sub-menu > li {
  border-bottom: 1px solid #1e1e1e52;
  padding: 10px 0px;
  color: #1e1e1e !important;
}

.category-top-menu > .category-sub-menu > li a {
  font-weight: 700;
}

.category-sub-menu > li {
  padding: 10px 0px 0px;
  color: #1e1e1e !important;
}

.category-sub-menu li a {
  color: #1e1e1e !important;
  font-weight: 500;
}

.block-links ul > li a:before {
  content: none !important;
  display: none !important;
}

.block-links ul > li a {
  padding-left: 0 !important;
}

.block-categories .collapse-icons {
  position: static !important;
  right: 0;
  top: 0;
  padding: 0;
  cursor: pointer;
  margin-left: 6px;
}

/* The vendor .remove icon is display:block once aria-expanded=true, and a
   block-level child inside an inline span forces the span onto its own
   full-width line (anonymous block box-fixup) instead of staying next to
   the link text. Force the icons back to inline so the span stays inline. */
.category-sub-menu li .collapse-icons {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
}

/* Only the currently-visible icon (vendor sets it to display:block) needs
   fixing to inline-block; the hidden one must stay display:none, or both
   icons show at once. */
.category-sub-menu li .collapse-icons[aria-expanded="true"] .remove {
  display: inline-block !important;
}

.category-sub-menu li .collapse-icons:not([aria-expanded="true"]) .add {
  display: inline-block !important;
}

#search_filters .noUi-horizontal .noUi-handle {
  width: 20px;
  height: 20px;
  top: -8px;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: none;
  border-radius: 100%;
  background-color: #7739A3;
}

#search_filters .noUi-connect {
  background: #7739a38c;
}

aside.facet.clearfix a {
  color: #1e1e1e !important;
}

.js-search-filters-clear-all i.fa.fa-times {
  margin-right: 10px !important;
}

.saica-filter-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

/* filter.svg's path uses fill="currentColor", which <img> can't inherit
   from the button's white text color — force it white via filter instead,
   matching the fa-filter icon it replaced on this purple-bg button. */
#search_filter_toggler .saica-filter-icon {
  filter: brightness(0) invert(1);
}

.js-top-menu-bottom.mobile-menu__footer {
  display: none !important;
}

#iqitmegamenu-mobile .mobile-menu__tab-icon.mobile-menu__tab-icon--img {
  /* display: none !important; */
  max-height: 26px !important;
  width: 26px;
}

.mobile-menu__link {
  color: #1e1e1e !important;
  padding-top: 1.4285714286rem;
  padding-bottom: 1.4285714286rem;
  font-size: 1.5714285714rem;
  font-style: normal;
  font-weight: 500;
  text-transform: none;
}

/* Same shadow as the cart dropdown (#blockcart-content). */
#iqitmegamenu-mobile {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
}

@media (min-width: 1140px) {
  .col-xl-4 {
    width: 31.333333%;
  }
}

/* .hotizontal is the stable custom CSS class set on the Elementor column
   (Elementor's own elementor-element-XXXXX ids are regenerated on every
   edit, so they can't be relied on as a CSS hook). */
.hotizontal .elementor-widget-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* .smart is the custom CSS class on this Elementor ProductsList widget;
   cards inside it get a 1-line title (ellipsis) instead of wrapping. */
.smart .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smart cards: the add-to-cart button (all states) overlaps the product
   image, pinned to its bottom-right corner, instead of sitting below the
   description. .product-add-cart is moved into .thumbnail-container by
   saica-product-stepper.js so this absolute positioning has that image
   wrapper (not the whole card) as its containing block. */
.smart .thumbnail-container {
  position: relative;
}

.smart .product-add-cart {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
}

/* Smart cards: "Agregar" button shows only the "+" (label hidden). */
.smart .product-add-cart .add-to-cart .saica-add-label {
  display: none;
}

/* Smart cards: every button state (+ / qty-stepper / out-of-stock "View")
   is a fixed 40x40 circle instead of the fit-content pill. */
.smart .product-add-cart .btn.btn-product-list,
.smart .product-add-cart .saica-qty-stepper {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Out-of-stock "View" button: eye icon only, no label, white icon. */
.smart .product-add-cart .saica-view-label {
  display: none;
}

.smart .product-add-cart .saica-view-icon {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

/* Once in the cart, show just the quantity — no −/+ — and cross-fade it
   into a trash icon on hover; clicking it removes the line entirely and
   the button reverts to its original "+" state (handled in
   saica-product-stepper.js). Both layers are stacked (absolute) so the
   fade is a smooth cross-fade instead of an abrupt display swap. */
.smart .product-add-cart .saica-qty-stepper {
  position: relative;
}

.smart .product-add-cart .saica-qty-decrease,
.smart .product-add-cart .saica-qty-increase {
  display: none;
}

.smart .product-add-cart .saica-qty-value {
  transition: opacity 0.25s ease;
  opacity: 1;
}

.smart .product-add-cart .saica-qty-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  color: #c0392b;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.smart .product-add-cart .saica-qty-stepper:hover .saica-qty-value {
  opacity: 0;
}

.smart .product-add-cart .saica-qty-stepper:hover .saica-qty-remove {
  opacity: 1;
  pointer-events: auto;
}

.autocomplete-suggestions {
  border-radius: 20px;
}

.autocomplete-suggestions .product-price {
  color: #2e2e2e;
  font-size: 18px;
  font-weight: 600;
}

.autocomplete-suggestions .col-shop {
  display: none;
}

.btn-buy-now:disabled {

    background: #Fff !important;
    color: #7739a3;
    border: #7739a3 solid 2px !important;
    border-radius: 24px;
}

.btn-buy-now:hover {

    background: #7739a335 !important;
    color: #7739a3 !important;
    border: #7739a3 solid 2px !important;
    border-radius: 24px;
}
.btn-buy-now {
    background: #Fff !important;
    color: #7739a3;
    border: #7739a3 solid 2px;
    border-radius: 24px;
    height: 48px !important;
}

.dropdown-menu a#wk-quick-order-link {
    background-color: inherit;
    font-weight: 400;
    margin-bottom: 0px;
}