/* Collection pages (shop and categories), loaded only there by inc/collections.php. 2026-11-08, user: "las colecciones
   quedaron todas repetidas… personalizarla con cada estilo… explorar más los elementos de las marcas".
   1) Base: the filters toolbar and a real grid (every brand). 2) One block per layout, from each brand's own pack:
   modern keeps Magpro's framed bottle; organic is editorial (bottle under a cream arch, serif, text link); apothecary
   is a numbered label panel with copper bands; earth puts the bottle on a gold seal in a soft card; candy is a tinted
   gummy-shaped card; sport cuts the corner and slants. Only transform/opacity animate. */

/* ---------- 1. Base ---------- */
.bb-collection ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 22px; margin: 0 0 2rem; }
.bb-collection ul.products::before, .bb-collection ul.products::after { display: none !important; }
.bb-collection ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; display: flex; flex-direction: column; }
.bb-collection ul.products li.product[hidden] { display: none !important; }
@media (max-width: 1024px) { .bb-collection ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 781px) { .bb-collection ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } }

.bb-col-toolbar { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 2rem; }
.bb-col-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bb-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 999px; background: #fff; color: var(--wp--preset--color--ink) !important; text-decoration: none !important; font-weight: 600; font-size: .9rem;
	line-height: 1.2; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease; }
.bb-chip:hover { border-color: var(--wp--preset--color--primary); transform: translateY(-1px); }
.bb-chip-n { font-size: .75rem; font-weight: 700; color: var(--wp--preset--color--muted); }
.bb-chip.is-current { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff !important; }
.bb-chip.is-current .bb-chip-n { color: inherit; opacity: .9; }
.bb-col-tools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.bb-col-search { flex: 1 1 280px; margin: 0 !important; } /* a label rule elsewhere left 14px below it: search sat 7px off the sort box (all brands) */
.bb-col-search input { width: 100%; min-height: 46px; box-sizing: border-box; padding: .6rem 1rem .6rem 2.7rem; font: inherit; font-size: .95rem;
	border: 1.5px solid var(--wp--preset--color--line); border-radius: 999px; color: var(--wp--preset--color--ink);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat .95rem center / 18px; }
.bb-col-search input:focus { outline: none; border-color: var(--wp--preset--color--primary); }
.bb-col-tools .woocommerce-ordering { display: block !important; margin: 0 !important; float: none !important; }
.bb-col-tools .woocommerce-ordering select { min-height: 46px; padding: .5rem 2.4rem .5rem 1rem; font: inherit; font-size: .92rem; color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--line); border-radius: 999px; appearance: none; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 1rem center; }
.bb-col-count { margin: 0; font-size: .9rem; color: var(--wp--preset--color--muted); white-space: nowrap; }
.bb-col-empty { margin: 0 0 2rem; padding: 2rem 1rem; text-align: center; border: 1.5px dashed var(--wp--preset--color--line); border-radius: 14px; }
.bb-col-reset { margin-left: .5rem; padding: .35rem .9rem; border: 1.5px solid var(--wp--preset--color--primary); border-radius: 999px; background: none;
	color: var(--wp--preset--color--ink); font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 781px) {
	/* Families wrap onto lines on a phone (a sideways strip with negative margins cut the first and last chip). */
	.bb-collection .bb-col-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: .45rem; }
	.bb-chip { padding: .45rem .8rem; font-size: .84rem; }
	.bb-col-search { flex-basis: 100%; }
	.bb-col-tools .woocommerce-ordering { flex: 1 1 auto; }
	.bb-col-tools .woocommerce-ordering select { width: 100%; }
}

/* ---------- 2a. organic (Real Setas): editorial, the bottle under a cream arch ---------- */
.bb-collection.bb-layout-organic .woocommerce-products-header { background: none; text-align: center; padding-bottom: .5rem; }
.bb-collection.bb-layout-organic .woocommerce-products-header::after { content: ""; display: block; width: 72px; height: 2px; margin: 1rem auto 0; background: var(--wp--preset--color--glow); }
.bb-collection.bb-layout-organic .woocommerce-products-header .term-description { margin-inline: auto; }
.bb-collection.bb-layout-organic .bb-col-chips { justify-content: center; gap: 1.4rem; }
.bb-collection.bb-layout-organic .bb-chip { border: 0; border-radius: 0; background: none; padding: .3rem 0; font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 600; font-size: 1.02rem; box-shadow: inset 0 -2px 0 transparent; }
.bb-collection.bb-layout-organic .bb-chip:hover { transform: none; box-shadow: inset 0 -2px 0 var(--wp--preset--color--line); }
.bb-collection.bb-layout-organic .bb-chip.is-current { background: none; color: var(--wp--preset--color--ink) !important; font-style: italic; box-shadow: inset 0 -2px 0 var(--wp--preset--color--glow); }
.bb-collection.bb-layout-organic .bb-col-tools { justify-content: center; }
.bb-collection.bb-layout-organic .bb-col-search { flex: 0 1 420px; }
.bb-collection.bb-layout-organic .bb-col-search input, .bb-collection.bb-layout-organic .bb-col-tools .woocommerce-ordering select {
	border-radius: 0; border: 0; border-bottom: 1.5px solid var(--wp--preset--color--glow); background-color: transparent; }
.bb-collection.bb-layout-organic ul.products { gap: 44px 28px; }
.bb-collection.bb-layout-organic ul.products li.product { text-align: center; }
.bb-collection.bb-layout-organic ul.products li.product a img {
	border: 0 !important; border-radius: 999px 999px 18px 18px !important; padding: 12% 10% 6% !important; aspect-ratio: 4 / 5;
	background: radial-gradient(circle at 50% 40%, #fffaf1 0%, #efe3cf 72%) !important; box-shadow: none !important; }
.bb-collection.bb-layout-organic ul.products li.product:hover a img { transform: translateY(-6px) !important; box-shadow: 0 18px 30px rgba(120, 90, 40, .14) !important; }
.bb-collection.bb-layout-organic ul.products li.product .bb-card-cat { margin-top: 1rem; }
.bb-collection.bb-layout-organic ul.products li.product .bb-more {
	align-self: center; background: none !important; border: 0 !important; border-radius: 0 !important; padding: .2rem 0 !important; color: var(--wp--preset--color--ink) !important;
	box-shadow: inset 0 -1.5px 0 var(--wp--preset--color--glow); font-weight: 600; }
.bb-collection.bb-layout-organic ul.products li.product .bb-more::after { content: " →"; transition: margin .2s ease; }
.bb-collection.bb-layout-organic ul.products li.product:hover .bb-more::after { margin-left: .25rem; }

/* ---------- 2b. apothecary (Xtralife): a numbered label panel with copper bands ---------- */
.bb-collection.bb-layout-apothecary .woocommerce-products-header { background: var(--wp--preset--color--night); border-radius: 0; color: #f3ead9;
	box-shadow: inset 0 -4px 0 var(--wp--preset--color--glow), inset 0 -6px 0 var(--wp--preset--color--night), inset 0 -8px 0 var(--wp--preset--color--glow); }
.bb-collection.bb-layout-apothecary .woocommerce-products-header :is(h1, p, .term-description) { color: #f3ead9 !important; }
.bb-collection.bb-layout-apothecary .bb-chip { border-radius: 0; border: 1px solid var(--wp--preset--color--ink); text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; padding: .55rem .9rem; }
.bb-collection.bb-layout-apothecary .bb-chip:hover { transform: none; background: var(--wp--preset--color--surface); }
.bb-collection.bb-layout-apothecary .bb-chip.is-current { background: var(--wp--preset--color--night); border-color: var(--wp--preset--color--night); color: #f3ead9 !important; }
.bb-collection.bb-layout-apothecary .bb-chip.is-current .bb-chip-n { color: var(--wp--preset--color--glow); opacity: 1; }
.bb-collection.bb-layout-apothecary .bb-col-search input, .bb-collection.bb-layout-apothecary .bb-col-tools .woocommerce-ordering select { border-radius: 0; border: 1px solid var(--wp--preset--color--ink); }
.bb-collection.bb-layout-apothecary ul.products { counter-reset: bbn; gap: 24px 18px; }
.bb-collection.bb-layout-apothecary ul.products li.product {
	counter-increment: bbn; background: #fff; border: 1px solid var(--wp--preset--color--line); padding: 1.1rem 1rem 1rem !important;
	background-image: linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow)), linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow));
	background-size: 100% 4px, 100% 2px; background-position: 0 0, 0 7px; background-repeat: no-repeat; transition: box-shadow .25s ease, transform .25s ease !important; }
.bb-collection.bb-layout-apothecary ul.products li.product::before { content: "Nº " counter(bbn, decimal-leading-zero); display: block; margin: .3rem 0 .6rem;
	font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: var(--wp--preset--color--glow); }
.bb-collection.bb-layout-apothecary ul.products li.product:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 30px color-mix(in srgb, var(--wp--preset--color--glow) 16%, transparent) !important; }
.bb-collection.bb-layout-apothecary ul.products li.product a img { border: 0 !important; border-radius: 0 !important; padding: 6% !important;
	background: var(--wp--preset--color--surface) !important; box-shadow: none !important; transform: none !important; }
.bb-collection.bb-layout-apothecary ul.products li.product .woocommerce-loop-product__title { text-transform: uppercase; letter-spacing: .05em; font-size: .86rem; }
.bb-collection.bb-layout-apothecary ul.products li.product .bb-more { display: block; width: 100%; box-sizing: border-box; text-align: center; margin-top: auto;
	background: var(--wp--preset--color--night) !important; color: #f3ead9 !important; border: 0 !important; }
.bb-collection.bb-layout-apothecary ul.products li.product .bb-more:hover { background: var(--wp--preset--color--glow) !important; color: var(--wp--preset--color--night) !important; }

/* ---------- 2c. earth (Herbalic): a soft card, the bottle on a gold seal, gold dots ---------- */
.bb-collection.bb-layout-earth .bb-chip { background: rgba(255, 255, 255, .7); border-color: transparent; }
.bb-collection.bb-layout-earth .bb-chip.is-current { background: var(--wp--preset--color--night); border-color: var(--wp--preset--color--night); color: #fff !important; }
.bb-collection.bb-layout-earth .bb-chip.is-current::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--wp--preset--color--glow); }
.bb-collection.bb-layout-earth ul.products li.product { background: #fff; border-radius: 22px; padding: 14px 14px 16px !important;
	box-shadow: 0 6px 20px rgba(60, 45, 20, .06) !important; transition: transform .25s ease, box-shadow .25s ease !important; }
.bb-collection.bb-layout-earth ul.products li.product:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 34px rgba(60, 45, 20, .12) !important; }
/* Herbalic's product images are already the brand scene (bottle on a sand pedestal, arch in its label color,
   content/herbalic.co/tools/make_catalog.py, 2026-11-08): they fill the card, square, no padding or backdrop. */
.bb-collection.bb-layout-earth ul.products li.product a img { border: 0 !important; border-radius: 16px !important; padding: 0 !important; box-shadow: none !important; transform: none !important;
	aspect-ratio: 1 / 1 !important; object-fit: cover !important; background: var(--wp--preset--color--surface) !important; }
.bb-collection.bb-layout-earth ul.products li.product .bb-card-cat::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px;
	background: var(--wp--preset--color--glow); margin-right: .45rem; vertical-align: middle; }

/* ---------- 2d. candy (Smart Gummies): a gummy-shaped card tinted with the product's own colour ---------- */
.bb-collection.bb-layout-candy .bb-chip { border-width: 2px; border-color: var(--wp--preset--color--night); }
.bb-collection.bb-layout-candy ul.products li.product { border-radius: 30px !important; padding: 14px 14px 18px !important; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1) !important;
	background: color-mix(in srgb, var(--bb-accent, var(--wp--preset--color--primary)) 12%, #fff) !important; }
.bb-collection.bb-layout-candy ul.products li.product:nth-child(odd):hover { transform: rotate(-1.5deg) translateY(-4px) !important; }
.bb-collection.bb-layout-candy ul.products li.product:nth-child(even):hover { transform: rotate(1.5deg) translateY(-4px) !important; }
.bb-collection.bb-layout-candy ul.products li.product a img { border: 0 !important; border-radius: 24px !important; padding: 6% !important; box-shadow: none !important; transform: none !important;
	background: radial-gradient(circle at 50% 45%, #fff 0 55%, color-mix(in srgb, var(--bb-accent, var(--wp--preset--color--primary)) 18%, #fff) 56%) !important; }

/* ---------- 2e. sport: cut corner, slanted chips ---------- */
.bb-collection.bb-layout-sport .bb-chip { border-radius: 0; transform: skewX(-10deg); text-transform: uppercase; font-style: italic; font-weight: 800; font-size: .8rem; }
.bb-collection.bb-layout-sport .bb-chip.is-current { background: var(--wp--preset--color--night); border-color: var(--wp--preset--color--night); }
.bb-collection.bb-layout-sport ul.products li.product a img { border-radius: 0 !important; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }

/* ---------- 3. Backdrops behind the bottle ----------
   Most product photos are JPGs on white. The decorative backdrop (arch, panel, seal, gummy) is drawn on a layer behind
   the photo and the photo multiplies onto it, so the white disappears and only the bottle stays. */
.bb-collection:is(.bb-layout-organic, .bb-layout-apothecary, .bb-layout-candy) ul.products li.product a.woocommerce-loop-product__link { position: relative; isolation: isolate; display: block; }
.bb-collection:is(.bb-layout-organic, .bb-layout-apothecary, .bb-layout-candy) ul.products li.product a.woocommerce-loop-product__link::before {
	content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 5; z-index: -1; transition: transform .35s ease; }
.bb-collection:is(.bb-layout-organic, .bb-layout-apothecary, .bb-layout-candy) ul.products li.product a img {
	background: transparent !important; mix-blend-mode: multiply; position: relative; aspect-ratio: 4 / 5; }
.bb-collection.bb-layout-organic ul.products li.product a.woocommerce-loop-product__link::before {
	border-radius: 999px 999px 18px 18px; background: radial-gradient(circle at 50% 40%, #fffaf1 0%, #efe3cf 72%); }
.bb-collection.bb-layout-organic ul.products li.product:hover a.woocommerce-loop-product__link::before { transform: translateY(-6px); }
.bb-collection.bb-layout-apothecary ul.products li.product a.woocommerce-loop-product__link::before { background: var(--wp--preset--color--surface); }
/* earth: the backdrop is inside Herbalic's own catalog images (see 2c), nothing is drawn behind them. */
.bb-collection.bb-layout-candy ul.products li.product a.woocommerce-loop-product__link::before { border-radius: 24px;
	background: radial-gradient(circle at 50% 45%, #fff 0 52%, color-mix(in srgb, var(--bb-accent, var(--wp--preset--color--primary)) 20%, #fff) 53%); }
.bb-collection.bb-layout-candy ul.products li.product:hover a.woocommerce-loop-product__link::before { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.bb-collection ul.products li.product, .bb-collection ul.products li.product a img, .bb-chip { transition: none !important; transform: none !important; }
}