/* Abbrivo Distribuciones brand override.
   Official brand colors as given by the client: principal #AD8BBC, sombras #A081AE. Both are a
   single lavender/purple family (no separate secondary hue), so the former cyan "info" accent
   (used for the product page's "Buy now" button) was retired in favor of a darker step within
   the same purple family instead of a second color. Redeclares Bootstrap 5 CSS custom properties
   instead of duplicating hummingbird's compiled selectors -- theme.css already defines everything
   off these variables at :root, so this file just needs to load after it. */
:root {
  --bs-blue: #ad8bbc;
  --bs-primary: #ad8bbc;
  --bs-primary-rgb: 173, 139, 188;
  --bs-primary-text-emphasis: #a081ae;
  --bs-primary-bg-subtle: #f7f3f8;
  --bs-primary-border-subtle: #e2d6e8;

  --bs-link-color: #ad8bbc;
  --bs-link-color-rgb: 173, 139, 188;
  --bs-link-hover-color: #a081ae;
  --bs-link-hover-color-rgb: 160, 129, 174;

  /* "Info" accent (Buy now button, misc Bootstrap .text-info/.bg-info usage) -- a darker step of
     the same purple family, not an unrelated hue, per the client's single-family brand palette. */
  --bs-cyan: #a081ae;
  --bs-info: #a081ae;
  --bs-info-rgb: 160, 129, 174;
  --bs-info-text-emphasis: #7d6588;
  --bs-info-bg-subtle: #f6f2f7;
  --bs-info-border-subtle: #ded3e3;
}

/* Bootstrap 5.3's button component doesn't read --bs-primary at use time -- each .btn-* variant
   gets its own --bs-btn-bg/--bs-btn-color/etc baked in at compile time with a literal hex value
   (verified: .btn-primary compiles to "--bs-btn-bg:#0b69f6", not "--bs-btn-bg:var(--bs-primary)").
   So the :root override above never reached ANY .btn-primary/.btn-outline-primary button
   site-wide (Añadir al carrito, this carousel's "Ver todo", etc.) -- they've all been rendering
   Bootstrap's stock blue the whole time. Re-deriving the actual button tokens from the brand
   tokens here, the same technique already used one-off for .product__buy-now-button, but as a
   real site-wide fix instead of a per-button patch. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-text-emphasis);
  --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.header-top,
.header-nav {
  border-bottom-color: var(--bs-primary-border-subtle);
}

/* Category/manufacturer/supplier listing pages: the sidebar (#left-column, class .left-column --
   full category tree via ps_categorytree, brand list, supplier list, facets) is a bare Bootstrap
   column with no responsive behavior of its own. Its only sizing rule is .col-md-4/.col-lg-3
   (md+), so below md it falls back to Bootstrap's ".row > * { width: 100% }" default and renders
   as a full-width block stacked ABOVE the actual page content. On mobile that dumps the store's
   entire category tree as a plain list right below the header, which reads as "categories
   repeating" since the header's own hamburger menu already covers the same categories and the
   subcategory tiles further down repeat them again. Categories stay fully reachable via that
   hamburger menu, so hiding this sidebar below md loses no real navigation -- matches the
   existing d-none/d-md-block pattern already used for .header-top above.
   Scoped to the .left-column class specifically (not the #left-column id) because contact.tpl
   reuses the same id with a different class (.wrapper__left-column) for real store-info content
   (address, hours) that must stay visible on mobile. */
.left-column {
  display: none;
}

@media (min-width: 768px) {
  .left-column {
    display: block;
  }
}

/* Top-nav mega-menu: some categories (Peluquería) have 30+ direct children, and hummingbird's
   .submenu__left tab list has no height cap by default -- with that many items the dropdown grows
   past the viewport instead of scrolling, which on a hover-triggered menu makes the extra items
   effectively unreachable. Cap both panes and let each scroll independently; .submenu__row already
   uses align-items:stretch, so without independent scroll a tall left list would also clip a
   shorter right pane's content to match its (now fixed) height. */
.ps-mainmenu.ps-mainmenu--desktop .submenu__left,
.ps-mainmenu.ps-mainmenu--desktop .submenu__right {
  max-height: min(65vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu__left {
  scrollbar-width: thin;
  scrollbar-color: var(--bs-primary-border-subtle) transparent;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu__left::-webkit-scrollbar {
  width: 0.375rem;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu__left::-webkit-scrollbar-thumb {
  background-color: var(--bs-primary-border-subtle);
  border-radius: var(--bs-border-radius);
}

/* Top-nav: 9 top-level categories, some with long names ("Materiales descartables", "Perfumes y
   Fragancias"), don't all fit in one row at typical desktop widths. Reverted a forced-nowrap +
   JS "+Más" overflow approach (js/abbrivo-nav-overflow.js, now unused/removed) after it distorted
   the header -- forcing .ps-mainmenu__tree to nowrap made its container (.ps-mainmenu, a
   Bootstrap col-xl/col-auto grid column) grow to fit the un-wrapped content instead of clipping
   it, pushing against the logo/search/cart siblings sharing the same row. Tightening padding and
   letting it wrap to a second row -- styled deliberately instead of left as default flex-wrap
   overflow -- is the safe fix: it can't distort sibling elements since nothing is forced to stay
   on one line. */
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree {
  row-gap: 0.25rem;
}

.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
  padding-inline: 0.375rem;
}

.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle {
  padding-inline: 0.0625rem;
}

/* Product page "Añadir al carrito" + "Buy now" buttons: the base theme's own CSS gives the first
   button width:100% and adds the second one with only an inline margin-left, no flex/width rules
   coordinating the two -- so "Buy now" (unstyled Bootstrap .btn-warning, not even part of the
   compiled theme.css) wraps under the full-width first button instead of sitting beside it. Turn
   the wrapper into a proper flex row so both share the space, and recolor buy-now off Bootstrap's
   default yellow onto the brand cyan (a distinct secondary action, not competing with the magenta
   primary "Añadir al carrito"). Also gave it a real Spanish translation -- see
   translations/es-ES/ShopThemeActions.es-ES.xlf ("Buy now" had none, falling back to English). */
.page-product .product__add-to-cart {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-product .product__add-to-cart-button {
  flex: 2 1 12rem;
  width: auto;
}

.page-product .product__buy-now-button {
  --bs-btn-bg: var(--bs-cyan);
  --bs-btn-border-color: var(--bs-cyan);
  --bs-btn-hover-bg: var(--bs-info-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-info-text-emphasis);
  --bs-btn-active-bg: var(--bs-info-text-emphasis);
  --bs-btn-active-border-color: var(--bs-info-text-emphasis);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  flex: 1 1 9rem;
  margin-left: 0 !important;
}

/* Category/listing pages (with the left sidebar -- category tree + filters) only ever reach 3
   product cards per row at desktop (theme.css: 1 -> 2 @360px -> 3 @1200px), while sidebar-less
   pages already reach 4 in the same theme (@992px). Matching that existing density instead of
   inventing a new one: 4 columns from the same 1200px breakpoint, plus a 5th on very wide
   monitors where 4 cards would otherwise look oversized/sparse. */
@media (min-width: 1200px) {
  .layout-left-column .products,
  .layout-right-column .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .layout-left-column .products,
  .layout-right-column .products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .layout-full-width .products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Product cards: the compiled theme has zero rules for .product-miniature__title (verified --
   not a search miss) and no aspect-ratio on the image, so both default to inconsistent per-card
   behavior:
   - The title inherits the bare `a { color: var(--bs-link-color) }` rule, so every product name
     renders in the brand magenta -- loud, and competing with the price/add-to-cart button for
     attention instead of reading as plain card content.
   - Photos render at their own natural aspect ratio. This is a migrated catalog with real, varied
     source photos (some square, some phone-camera portrait shots) -- without a fixed ratio, image
     areas differ in height card to card and rows look ragged. object-fit:contain (not cover) so a
     non-square photo is never cropped, just letterboxed on a neutral background. */
.product-miniature__title {
  color: var(--bs-body-color);
  display: -webkit-box;
  font-weight: 500;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.product-miniature__title:hover {
  color: var(--bs-link-hover-color);
}

.product-miniature__image-container {
  aspect-ratio: 1 / 1;
  background-color: var(--bs-tertiary-bg);
  overflow: hidden;
}

.product-miniature__image-link {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

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

/* Product card redesign: .product-miniature__inner had a background-color matching the page
   background and no border/shadow at all -- cards had no visual boundary, so a dense grid read
   as a flat list rather than distinct cards. Added a real card treatment (border, shadow, hover
   lift) and gave the price real visual weight (it had font-weight but no font-size bump) since
   that's the right place for emphasis -- not the title, which now stays neutral. Also hides the
   quantity stepper on cards (still in the DOM, submits its default value of 1 -- this only hides
   it) since a full qty input on every card in a dense multi-column grid is a lot of visual weight
   for something the product page already offers; a plain "Añadir al carrito" is enough here. */
.product-miniature__inner {
  background-color: var(--bs-white);
  border: 0.0625rem solid var(--bs-border-color);
  box-shadow: none;
}

.product-miniature:hover .product-miniature__inner {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: var(--bs-box-shadow);
  transform: translateY(-0.1875rem);
}

.product-miniature__image {
  transition: var(--bs-transition-default, transform 0.2s ease);
}

.product-miniature:hover .product-miniature__image {
  transform: scale(1.04);
}

.product-miniature__bottom {
  padding: 1rem;
}

.product-miniature__price {
  color: var(--bs-primary);
  font-size: 1.125rem;
}

.product-miniature__form .quantity-button {
  display: none;
}

.product-miniature__add {
  padding-block: 0.5rem;
}

.product-miniature__add-text {
  font-size: 11px;
}

/* Homepage product sections (Destacados, Novedades, Peluquería) as real horizontal carousels
   instead of a static wrapping grid -- scoped to .module-products (the wrapper only these three
   widgets render, via the shared components/module-products.tpl) so it never touches the actual
   category/listing grid, which uses a separate template and should stay a real paginated grid.
   overflow-x:auto without setting overflow-y would compute overflow-y:auto too and could clip
   anything that needs to render outside the container's own box (the mistake in the earlier nav
   "+Más" attempt) -- checked here: .product-miniature__quickview-button's hover reveal
   (top:100% -> translateY(-100%)) stays within its own card's height, never past it, so nothing
   here needs to escape the scroll container's bounds. */
.module-products__list--carousel {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.module-products__scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-padding-inline: 0.25rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-primary-border-subtle) transparent;
}

.module-products__scroll .products {
  display: flex;
  gap: 1rem;
  grid-template-columns: unset;
}

.module-products__scroll .product-miniature {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 12rem;
}

@media (min-width: 576px) {
  .module-products__scroll .product-miniature {
    width: 13.5rem;
  }
}

@media (min-width: 992px) {
  .module-products__scroll .product-miniature {
    width: 15rem;
  }
}

.module-products__nav {
  align-items: center;
  background-color: var(--bs-white);
  border: 0.0625rem solid var(--bs-border-color);
  border-radius: 50%;
  color: var(--bs-body-color);
  display: none;
  flex: 0 0 auto;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.module-products__nav:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

@media (min-width: 768px) {
  .module-products__nav {
    display: flex;
  }
}

/* Section titles ("Destacados", "Novedades", "Peluquería"...): the base theme only sets a bottom
   margin on .section-title, everything else is bare browser <h2> styling. Gave it real visual
   weight and a brand-colored accent bar instead. */
.section-title {
  align-items: center;
  display: flex;
  font-size: 1.375rem;
  font-weight: 700;
  gap: 0.75rem;
  letter-spacing: 0.01em;
}

.section-title::before {
  background-color: var(--bs-primary);
  border-radius: var(--bs-border-radius);
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: 1.5rem;
  width: 0.3125rem;
}

/* Homepage content starts flush against the header with no top clearance at all (verified: no
   rule sets padding/margin on this wrapper in the compiled theme) -- the first carousel's title
   ("Destacados") touched the nav directly. Scoped to the homepage content wrapper specifically
   rather than adding top margin to every .section-title, since spacing *between* carousels
   already comes from the previous section's "Ver todo" button margin + this title's own bottom
   margin combined -- only the very first one had nothing above it. */
.page-content--home {
  padding-block-start: 2rem;
}

/* Infinite scroll (replaces click pagination on category/search/listing pages -- see
   abbrivo-infinite-scroll.js). The pagination block itself is hidden by that script once it
   confirms there's a next page to auto-load; this sentinel only shows a message while a fetch
   for the next page is in flight. */
.js-infinite-scroll-sentinel {
  height: 1px;
}

.js-infinite-scroll-sentinel--loading {
  align-items: center;
  color: var(--bs-secondary-color, #6c757d);
  display: flex;
  font-size: 0.875rem;
  gap: 0.625rem;
  height: auto;
  justify-content: center;
  padding-block: 2.5rem;
}

.js-infinite-scroll-sentinel--loading::before {
  animation: abbrivo-spin 0.7s linear infinite;
  border: 2px solid rgba(173, 139, 188, 0.15);
  border-radius: 50%;
  border-top-color: var(--bs-primary);
  content: "";
  display: inline-block;
  height: 1.125rem;
  width: 1.125rem;
}

.js-infinite-scroll-sentinel--loading::after {
  content: "Cargando más productos...";
}

@keyframes abbrivo-spin {
  to {
    transform: rotate(360deg);
  }
}