/* ===== Layout "candy" (2026-11-08, Smart Gummies): a candy brand, from its packaging. Clear jars full of colored
   gummies, one label color per flavor, a rounded "60 Gomas" type, a yellow dot on the logo. Loaded only when the
   brand's layout is "candy" (functions.php). Any brand can use it; its colors come from the palette, the label
   colors from --sg-c1…c5 (set them in the brand's style variation to change them). ===== */
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

.bb-layout-candy {
	--sg-c1: #105e38; --sg-c2: #a74650; --sg-c3: #864663; --sg-c4: #a81656; --sg-c5: #2279c6;
	--sg-stripe: linear-gradient(90deg, var(--sg-c1) 0 20%, var(--sg-c2) 20% 40%, var(--sg-c3) 40% 60%, var(--sg-c4) 60% 80%, var(--sg-c5) 80% 100%);
	--sg-round: "Fredoka", "Poppins", system-ui, sans-serif;
}
.bb-layout-candy :where(h1, h2, h3, h4, .wp-block-heading, .bb-eyebrow, .bb-stat, .bb-step, .wp-block-navigation-item__content,
	.wp-element-button, .wp-block-button__link, .bb-more, .woocommerce-loop-product__title, .product_title, .bb-footer-title, legend) {
	font-family: var(--sg-round) !important;
}
.bb-layout-candy :where(h1, h2, h3) { font-weight: 700; letter-spacing: -.01em; }
.bb-layout-candy .bb-eyebrow { letter-spacing: .04em; text-transform: none; font-weight: 600; font-size: .95rem; }

/* Header: fuchsia, the wordmark left, menu items as white pills; the five label colors as a stripe underneath. */
.bb-layout-candy .bb-header { background: var(--wp--preset--color--primary) !important; border-bottom: 0 !important; box-shadow: none !important; position: relative; }
.bb-layout-candy .bb-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--sg-stripe); z-index: 5; }
.bb-layout-candy .bb-header .wp-block-site-logo img { max-height: 54px; width: auto !important; }
.bb-layout-candy .bb-header .wp-block-site-logo a { background: none !important; }
/* Outline buttons on the night home band stay white. */
.sg-hero .is-style-outline .wp-block-button__link { color: #fff !important; border-color: rgba(255,255,255,.85) !important; background: transparent !important; }
.bb-layout-candy .bb-header .wp-block-navigation__container { gap: .5rem; }
.bb-layout-candy .bb-header .wp-block-navigation-item__content {
	color: #fff !important; font-weight: 600; font-size: 1rem; padding: .45rem 1.05rem !important; border-radius: 999px;
	border: 2px solid rgba(255,255,255,.55); transition: background .15s, color .15s, border-color .15s;
}
.bb-layout-candy .bb-header .wp-block-navigation-item__content::after { display: none !important; }
.bb-layout-candy .bb-header .wp-block-navigation-item__content:hover,
.bb-layout-candy .bb-header .current-menu-item > .wp-block-navigation-item__content,
.bb-layout-candy .bb-header .wp-block-navigation [aria-current=page] { background: var(--wp--preset--color--glow); border-color: var(--wp--preset--color--glow); color: var(--wp--preset--color--ink) !important; }
.bb-layout-candy .bb-header .wp-block-navigation__responsive-container-open { color: #fff; }
.bb-layout-candy .bb-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/* Mobile menu: night panel; every link is a big pill in one label color. */
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--night) !important; color: #fff !important; padding: 1.25rem 1.25rem 2rem !important;
}
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: ""; display: block; width: 190px; height: 64px; margin: .25rem 0 1.6rem; background: var(--bb-logo) left center / contain no-repeat;
}
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .8rem !important; width: 100%; align-items: stretch !important; }
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; margin: 0 !important; padding: 0 !important; }
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block; width: 100%; box-sizing: border-box; text-align: center; color: #fff !important; font-size: 1.3rem !important; font-weight: 700;
	padding: .95rem 1.2rem !important; border-radius: 999px; border: 0 !important; box-shadow: 0 5px 0 rgba(0,0,0,.28);
}
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4n+1) .wp-block-navigation-item__content { background: var(--sg-c1); }
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4n+2) .wp-block-navigation-item__content { background: var(--sg-c2); }
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4n+3) .wp-block-navigation-item__content { background: var(--sg-c3); }
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4n+4) .wp-block-navigation-item__content { background: var(--sg-c4); }
.bb-layout-candy .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }

/* Buttons: candy pills with a solid shadow underneath that "press" on click. */
.bb-layout-candy .wp-element-button, .bb-layout-candy .wp-block-button__link, .bb-layout-candy .woocommerce a.button, .bb-layout-candy .bb-more,
.bb-layout-candy .woocommerce button.button, .bb-layout-candy .single_add_to_cart_button {
	border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .01em; text-transform: none !important;
	box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark) !important; transition: transform .08s, box-shadow .08s !important;
}
.bb-layout-candy .wp-element-button:active, .bb-layout-candy .wp-block-button__link:active, .bb-layout-candy .bb-more:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--wp--preset--color--primary-dark) !important; }
.bb-layout-candy .is-style-outline .wp-block-button__link { box-shadow: 0 5px 0 color-mix(in srgb, currentColor 35%, transparent) !important; border-width: 2px !important; }

/* Cards: sticker look. Rounded, a 2px night border and a solid colored shadow offset to the corner. */
.bb-layout-candy .bb-card-box {
	border: 2px solid var(--wp--preset--color--night) !important; border-radius: 24px !important;
	box-shadow: 7px 7px 0 var(--sg-c4) !important; background: #fff;
}
.bb-layout-candy .wp-block-column:nth-child(4n+1) > .bb-card-box { box-shadow: 7px 7px 0 var(--sg-c1) !important; }
.bb-layout-candy .wp-block-column:nth-child(4n+2) > .bb-card-box { box-shadow: 7px 7px 0 var(--sg-c2) !important; }
.bb-layout-candy .wp-block-column:nth-child(4n+3) > .bb-card-box { box-shadow: 7px 7px 0 var(--sg-c3) !important; }
.bb-layout-candy .bb-media-round img { border-radius: 28px !important; }
.bb-layout-candy .bb-chips li { border-radius: 999px; }
.bb-layout-candy .bb-badges p { border-radius: 999px !important; font-family: var(--sg-round); font-weight: 600; }
.bb-layout-candy .bb-section-title::after { content: ""; display: block; width: 90px; height: 8px; margin: .7rem auto 0; border-radius: 999px; background: var(--sg-stripe); }

/* Product grid. */
.bb-layout-candy ul.products li.product { border: 2px solid var(--wp--preset--color--night); border-radius: 24px; padding: 1rem 1rem 1.4rem !important; background: #fff; box-shadow: 6px 6px 0 var(--wp--preset--color--glow); }
.bb-layout-candy ul.products li.product img { border-radius: 18px; }

/* Footer: the logo's yellow, night text, rounded top corners under the label stripe; columns stay left-aligned. */
.bb-layout-candy .bb-footer { background: var(--wp--preset--color--glow) !important; border-top: 0 !important; border-radius: 36px 36px 0 0; position: relative; margin-top: 2rem; }
.bb-layout-candy .bb-footer::before { content: ""; position: absolute; left: 36px; right: 36px; top: -8px; height: 8px; border-radius: 8px 8px 0 0; background: var(--sg-stripe); }
.bb-layout-candy .bb-footer, .bb-layout-candy .bb-footer :where(p, a, li, h2, h3) { color: var(--wp--preset--color--night) !important; }
.bb-layout-candy .bb-footer a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bb-layout-candy .bb-footer a:hover { color: var(--wp--preset--color--primary-dark) !important; }
.bb-layout-candy .bb-footer .bb-footer-logo img, .bb-layout-candy .bb-footer .wp-block-site-logo img { filter: brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(2500%) hue-rotate(245deg) brightness(.6); opacity: 1; }
.bb-layout-candy .bb-footer-title { font-weight: 700 !important; font-size: 1.15rem; text-transform: none !important; letter-spacing: 0 !important; }
.bb-layout-candy .bb-footer-cta { background: #fff !important; border: 2px solid var(--wp--preset--color--night) !important; border-radius: 24px !important; box-shadow: 6px 6px 0 var(--wp--preset--color--primary) !important; }
.bb-layout-candy .bb-footer .wp-block-button__link { background: var(--wp--preset--color--primary) !important; color: #fff !important; }
.bb-layout-candy .bb-footer-bottom { border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--night) 35%, transparent) !important; }
.bb-layout-candy .bb-footer-bottom p { color: var(--wp--preset--color--night) !important; opacity: .85; }

/* Form "candy": rounded fields with a night border, choices as colored pills, a fuchsia pill to send. */
.bc-form--candy .bc-form { border: 2px solid var(--wp--preset--color--night, #251942); border-radius: 28px; box-shadow: 8px 8px 0 var(--wp--preset--color--glow, #f2c94c); }
.bc-form--candy legend, .bc-form--candy .bc-field > label { font-family: "Fredoka", "Poppins", sans-serif; font-weight: 600; font-size: 1.05rem; }
.bc-form--candy input[type=text], .bc-form--candy input[type=email], .bc-form--candy input[type=tel], .bc-form--candy select, .bc-form--candy textarea {
	border: 2px solid var(--wp--preset--color--night, #251942) !important; border-radius: 16px !important; background: #fff;
}
.bc-form--candy input:focus, .bc-form--candy select:focus, .bc-form--candy textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--glow, #f2c94c) 70%, transparent) !important; }
.bc-form--candy .bc-choice span { border: 2px solid var(--wp--preset--color--night, #251942); font-weight: 600; }
.bc-form--candy .bc-choice label:nth-of-type(4n+1) input:checked + span { background: #105e38; border-color: #105e38; }
.bc-form--candy .bc-choice label:nth-of-type(4n+2) input:checked + span { background: #a74650; border-color: #a74650; }
.bc-form--candy .bc-choice label:nth-of-type(4n+3) input:checked + span { background: #864663; border-color: #864663; }
.bc-form--candy .bc-choice label:nth-of-type(4n+4) input:checked + span { background: #2279c6; border-color: #2279c6; }
.bc-form--candy .bc-dial { border: 2px solid var(--wp--preset--color--night, #251942); border-radius: 16px; }
.bc-form--candy button[type=submit] { border-radius: 999px !important; font-family: "Fredoka", "Poppins", sans-serif; font-weight: 700; font-size: 1.1rem; padding-inline: 2.4rem;
	box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark, #7d0f40) !important; }

/* Sections of this layout's pages. */
.bb-layout-candy .sg-head { position: relative; overflow: hidden; }
.bb-layout-candy .sg-head::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -60px; top: -70px; background: color-mix(in srgb, var(--wp--preset--color--glow) 55%, transparent); }
.bb-layout-candy .sg-head > * { position: relative; z-index: 1; }
/* Distributor terms as gummies: three colored circles. */
.sg-gummies { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.sg-gummies > .wp-block-column { margin: 0 !important; aspect-ratio: 1; max-width: 260px; justify-self: center; width: 100%; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.4rem; box-sizing: border-box; box-shadow: inset 0 -12px 0 rgba(0,0,0,.18), 0 10px 0 rgba(0,0,0,.08); }
.sg-gummies > .wp-block-column:nth-child(1) { background: var(--sg-c1, #105e38); }
.sg-gummies > .wp-block-column:nth-child(2) { background: var(--sg-c3, #864663); }
.sg-gummies > .wp-block-column:nth-child(3) { background: var(--sg-c5, #2279c6); }
.sg-gummies :where(p) { color: #fff !important; margin: 0; }
.sg-gummies .bb-stat { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.05; }
/* Volume discounts as colored pills. */
.sg-pills { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .7rem; }
.sg-pills li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.4rem; border-radius: 999px; color: #fff; font-family: var(--sg-round, sans-serif); font-weight: 600; font-size: 1.05rem; }
.sg-pills li strong { font-size: 1.35rem; }
.sg-pills li:nth-child(1) { background: var(--sg-c2, #a74650); } .sg-pills li:nth-child(2) { background: var(--sg-c3, #864663); } .sg-pills li:nth-child(3) { background: var(--sg-c4, #a81656); }
/* How to start, as a conversation. */
.sg-chat { list-style: none; padding: 0; margin: 0 auto; max-width: 720px; display: grid; gap: 1rem; }
.sg-chat li { max-width: 78%; padding: 1rem 1.3rem; border-radius: 24px; font-size: 1.05rem; line-height: 1.45; position: relative; }
.sg-chat li strong { display: block; font-family: var(--sg-round, sans-serif); font-size: .85rem; letter-spacing: .03em; margin-bottom: .2rem; opacity: .85; }
.sg-chat .sg-you { justify-self: end; background: var(--wp--preset--color--glow, #f2c94c); color: var(--wp--preset--color--night, #251942); border-bottom-right-radius: 6px; }
.sg-chat .sg-us { justify-self: start; background: var(--wp--preset--color--night, #251942); color: #fff; border-bottom-left-radius: 6px; }
/* Checklist with colored ticks. */
.sg-ticks { list-style: none; padding: 0; display: grid; gap: .55rem; }
.sg-ticks li { padding-left: 2.1rem; position: relative; }
.sg-ticks li::before { content: "✓"; position: absolute; left: 0; top: .05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem; background: var(--sg-c1, #105e38); }
.sg-ticks li:nth-child(4n+2)::before { background: var(--sg-c2, #a74650); } .sg-ticks li:nth-child(4n+3)::before { background: var(--sg-c3, #864663); } .sg-ticks li:nth-child(4n+4)::before { background: var(--sg-c4, #a81656); }
/* Where to buy: one tile per gummy, in its label color. */
.sg-tiles { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.sg-tiles > .wp-block-column { margin: 0 !important; border-radius: 28px; padding: 1.4rem 1.2rem 1.6rem; text-align: center; color: #fff; box-shadow: inset 0 -10px 0 rgba(0,0,0,.15); }
.sg-tiles :where(h3, p, a) { color: #fff !important; }
.sg-tiles > .wp-block-column { display: flex; flex-direction: column; }
.sg-tiles .wp-block-buttons { margin-top: auto; justify-content: center; }
.sg-tiles img { max-height: 230px; width: auto; margin: 0 auto; display: block; filter: drop-shadow(0 16px 20px rgba(0,0,0,.3)); }
.sg-tiles h3 { font-size: 1.2rem; margin: .8rem 0 .4rem; }
.sg-tiles .wp-block-button__link { background: #fff !important; color: var(--wp--preset--color--night) !important; box-shadow: 0 5px 0 rgba(0,0,0,.25) !important; }
.sg-tile--green { background: var(--sg-c1, #105e38); } .sg-tile--wine { background: var(--sg-c2, #a74650); } .sg-tile--plum { background: var(--sg-c3, #864663); } .sg-tile--magenta { background: var(--sg-c4, #a81656); }

@media (max-width: 781px) {
	.bb-layout-candy .bb-footer { border-radius: 26px 26px 0 0; }
	.sg-gummies { grid-template-columns: 1fr; } .sg-gummies > .wp-block-column { max-width: 220px; }
	.sg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .sg-tiles img { max-height: 150px; } .sg-tiles h3 { font-size: 1rem; }
	.sg-tiles > .wp-block-column { padding: 1rem .7rem 1.2rem; border-radius: 22px; }
	.sg-chat li { max-width: 90%; }
	.sg-pills li { font-size: .95rem; padding: .75rem 1.1rem; }
}

/* Scene covers (home hero and product worlds): the text lines up with the page container; on the hero, a soft night
   gradient on the left keeps the headline readable without covering the jars. */
.sg-hero-scene > .wp-block-cover__inner-container, .sg-world.wp-block-cover > .wp-block-cover__inner-container {
	width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 24px); box-sizing: border-box;
}
.sg-hero-scene > .wp-block-cover__inner-container > .wp-block-columns > .wp-block-column:first-child { flex-basis: 40% !important; max-width: 470px; }
.sg-hero-scene > .wp-block-cover__background { background: linear-gradient(90deg, rgba(37,25,66,.92) 0%, rgba(37,25,66,.7) 30%, rgba(37,25,66,0) 52%) !important; opacity: 1 !important; }
@media (max-width: 781px) {
	.sg-hero-scene > .wp-block-cover__inner-container > .wp-block-columns > .wp-block-column:first-child { flex-basis: auto !important; max-width: none; }
	.sg-hero-scene > .wp-block-cover__background { display: none !important; }
}
/* On computers the scene covers take the photo's own 16:9 shape: nothing is cropped (jar caps were cut at 620 px). */
@media (min-width: 782px) {
	.wp-block-cover.sg-hero-scene, .wp-block-cover.sg-world { aspect-ratio: 16 / 9 !important; min-height: 0 !important; height: auto !important; max-height: 900px; }
}


/* ===== Brand elements (2026-11-08, user: "usa elementos de la marca"): the double leaf of the logo and the dome
   gummy of the jars, in the label colors. Pure SVG in CSS: no extra requests, no text, decorative only. ===== */
.bb-layout-candy { --sg-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M2 22C4 10 12 4 24 3C22 14 14 21 2 22Z'/%3E%3Cpath d='M14 23C18 16 24 13 31 13C28 20 22 23 14 23Z'/%3E%3C/svg%3E"); --sg-gum-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M3 31C3 14 10 5 20 5C30 5 37 14 37 31Z'/%3E%3C/svg%3E");
	--sg-g1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%23105e38' d='M3 31C3 14 10 5 20 5C30 5 37 14 37 31Z'/%3E%3Cg fill='white' fill-opacity='.28'%3E%3Ccircle cx='12' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='17' r='3.2'/%3E%3Ccircle cx='28' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='27' r='3'/%3E%3C/g%3E%3Cellipse cx='13' cy='12' rx='4' ry='2.4' fill='white' fill-opacity='.55' transform='rotate(-30 13 12)'/%3E%3C/svg%3E"); --sg-g2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%23a74650' d='M3 31C3 14 10 5 20 5C30 5 37 14 37 31Z'/%3E%3Cg fill='white' fill-opacity='.28'%3E%3Ccircle cx='12' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='17' r='3.2'/%3E%3Ccircle cx='28' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='27' r='3'/%3E%3C/g%3E%3Cellipse cx='13' cy='12' rx='4' ry='2.4' fill='white' fill-opacity='.55' transform='rotate(-30 13 12)'/%3E%3C/svg%3E"); --sg-g3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%23864663' d='M3 31C3 14 10 5 20 5C30 5 37 14 37 31Z'/%3E%3Cg fill='white' fill-opacity='.28'%3E%3Ccircle cx='12' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='17' r='3.2'/%3E%3Ccircle cx='28' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='27' r='3'/%3E%3C/g%3E%3Cellipse cx='13' cy='12' rx='4' ry='2.4' fill='white' fill-opacity='.55' transform='rotate(-30 13 12)'/%3E%3C/svg%3E"); --sg-g4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%23a81656' d='M3 31C3 14 10 5 20 5C30 5 37 14 37 31Z'/%3E%3Cg fill='white' fill-opacity='.28'%3E%3Ccircle cx='12' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='17' r='3.2'/%3E%3Ccircle cx='28' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='27' r='3'/%3E%3C/g%3E%3Cellipse cx='13' cy='12' rx='4' ry='2.4' fill='white' fill-opacity='.55' transform='rotate(-30 13 12)'/%3E%3C/svg%3E"); --sg-gy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%23f2c94c' d='M3 31C3 14 10 5 20 5C30 5 37 14 37 31Z'/%3E%3Cg fill='white' fill-opacity='.28'%3E%3Ccircle cx='12' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='17' r='3.2'/%3E%3Ccircle cx='28' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='27' r='3'/%3E%3C/g%3E%3Cellipse cx='13' cy='12' rx='4' ry='2.4' fill='white' fill-opacity='.55' transform='rotate(-30 13 12)'/%3E%3C/svg%3E"); --sg-gl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%239ccc3a' d='M3 31C3 14 10 5 20 5C30 5 37 14 37 31Z'/%3E%3Cg fill='white' fill-opacity='.28'%3E%3Ccircle cx='12' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='17' r='3.2'/%3E%3Ccircle cx='28' cy='22' r='3.2'/%3E%3Ccircle cx='20' cy='27' r='3'/%3E%3C/g%3E%3Cellipse cx='13' cy='12' rx='4' ry='2.4' fill='white' fill-opacity='.55' transform='rotate(-30 13 12)'/%3E%3C/svg%3E"); }
/* Eyebrows carry the logo's leaves, in the eyebrow's own color. */
.bb-layout-candy .bb-eyebrow::before { content: ""; display: inline-block; width: 1.15em; height: .85em; margin-right: .4em; vertical-align: -.05em;
	background: currentColor; -webkit-mask: var(--sg-leaf) center / contain no-repeat; mask: var(--sg-leaf) center / contain no-repeat; }
/* Section titles end in four gummies, one per label color. */
.bb-layout-candy .bb-section-title::after { width: 104px !important; height: 20px !important; border-radius: 0 !important;
	background: var(--sg-g1) 0 0 / 22px 19px no-repeat, var(--sg-g2) 27px 0 / 22px 19px no-repeat, var(--sg-g3) 54px 0 / 22px 19px no-repeat, var(--sg-g4) 81px 0 / 22px 19px no-repeat !important; }
/* Ticks become little gummies. */
.bb-layout-candy .sg-ticks li::before { border-radius: 0 !important; width: 1.6rem !important; height: 1.35rem !important; padding-top: .2rem; box-sizing: border-box;
	-webkit-mask: var(--sg-gum-mask) center / contain no-repeat; mask: var(--sg-gum-mask) center / contain no-repeat; }
/* Page heads: gummies scattered in the corner instead of a plain circle. */
.bb-layout-candy .sg-head::after { width: 260px !important; height: 200px !important; border-radius: 0 !important; right: 0 !important; top: 0 !important; opacity: .9;
	background: var(--sg-gy) 150px 22px / 58px 49px no-repeat, var(--sg-g4) 206px 92px / 40px 34px no-repeat, var(--sg-gl) 96px 110px / 34px 29px no-repeat,
		var(--sg-g2) 210px 14px / 28px 24px no-repeat !important; }

/* ===== Catalog (shop, categories, product pages) in the brand. ===== */
.bb-layout-candy .woocommerce-products-header { position: relative; overflow: hidden; background: var(--wp--preset--color--night); border-radius: 32px;
	padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 3rem); margin: 0 0 2.2rem; color: #fff; }
.bb-layout-candy .woocommerce-products-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--sg-stripe); }
.bb-layout-candy .woocommerce-products-header::after { content: ""; position: absolute; right: clamp(-40px, -2vw, 0px); bottom: -6px; width: 300px; height: 150px; pointer-events: none;
	background: var(--sg-g1) 20px 70px / 70px 60px no-repeat, var(--sg-g2) 96px 40px / 86px 73px no-repeat, var(--sg-g3) 186px 78px / 64px 54px no-repeat,
		var(--sg-g4) 238px 20px / 52px 44px no-repeat; }
.bb-layout-candy .woocommerce-products-header__title { color: #fff !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; margin: 0 0 .4rem !important; position: relative; z-index: 1; max-width: 70%; }
.bb-layout-candy .woocommerce-products-header .term-description, .bb-layout-candy .woocommerce-products-header .page-description { position: relative; z-index: 1; max-width: 60ch; }
.bb-layout-candy .woocommerce-products-header :where(p, a) { color: rgba(255,255,255,.88) !important; }
.bb-layout-candy .woocommerce-result-count { font-family: var(--sg-round); font-weight: 600; color: var(--wp--preset--color--muted); }
.bb-layout-candy .woocommerce-ordering select { border: 2px solid var(--wp--preset--color--night); border-radius: 999px; padding: .5rem 2.2rem .5rem 1rem; font-family: var(--sg-round); font-weight: 600; background-color: #fff; }
/* Product cards: the label color on top, a solid shadow in the same color, the name in the round type. */
.bb-layout-candy ul.products li.product { position: relative; overflow: hidden; padding-top: 1.4rem !important;
	box-shadow: 7px 7px 0 var(--bb-accent, var(--wp--preset--color--glow)) !important; border-color: var(--wp--preset--color--night) !important; }
.bb-layout-candy ul.products li.product::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; background: var(--bb-accent, var(--wp--preset--color--primary)); }
.bb-layout-candy ul.products li.product .woocommerce-loop-product__title { font-weight: 700 !important; font-size: 1.15rem !important; color: var(--wp--preset--color--ink); }
.bb-layout-candy ul.products li.product .bb-card-cat { font-family: var(--sg-round); text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--bb-accent, var(--wp--preset--color--primary)); }
.bb-layout-candy ul.products li.product .bb-more { display: block; text-align: center; margin-top: .8rem; background: var(--bb-accent, var(--wp--preset--color--primary)) !important; color: #fff !important;
	box-shadow: 0 5px 0 color-mix(in srgb, var(--bb-accent, #7d0f40) 70%, #000) !important; }
/* Product page: rounded gallery, round-type title, the label color as a candy stripe under it. */
.bb-layout-candy.single-product .product_title { font-size: clamp(1.9rem, 4vw, 2.7rem) !important; line-height: 1.12; }
.bb-layout-candy.single-product .product_title::after { content: ""; display: block; width: 72px; height: 8px; margin: .7rem 0 0; border-radius: 999px; background: var(--bb-accent, var(--wp--preset--color--primary)); }
.bb-layout-candy.single-product .woocommerce-product-gallery img { border-radius: 28px; }
.bb-layout-candy.single-product .woocommerce-tabs h2 { font-size: 1.5rem; }

/* ===== Motion "candy" (assets/motion.js tags blocks below the fold with .bb-reveal, then .is-in). Gummy feel: things
   pop in with a little bounce, cards wobble like jelly under the pointer, decorations float. Only transform and
   opacity; nothing above the fold is hidden; all off with reduced motion. ===== */
@keyframes sg-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes sg-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sg-jelly { 0% { transform: scale(1, 1); } 30% { transform: scale(1.08, .92); } 50% { transform: scale(.95, 1.05); } 70% { transform: scale(1.03, .97); } 100% { transform: scale(1, 1); } }
@keyframes sg-float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-10px) rotate(-3deg); } }
@keyframes sg-wobble { 0%, 100% { transform: translateY(-4px) rotate(0); } 30% { transform: translateY(-4px) rotate(-1.6deg); } 65% { transform: translateY(-4px) rotate(1.2deg); } }
@media (prefers-reduced-motion: no-preference) {
	.bb-layout-candy .bb-reveal { opacity: 0; transform: translateY(28px) scale(.94);
		transition: opacity .45s ease var(--bb-d, 0ms), transform .8s cubic-bezier(.34, 1.56, .64, 1) var(--bb-d, 0ms); }
	.bb-layout-candy .bb-reveal.is-in { opacity: 1; transform: none; }
	.bb-layout-candy .sg-hero-scene > .wp-block-cover__image-background { animation: sg-settle 1.6s cubic-bezier(.2, .7, .2, 1) both; }
	.bb-layout-candy .sg-hero-scene .wp-block-cover__inner-container .wp-block-column > * { animation: sg-rise .7s cubic-bezier(.34, 1.56, .64, 1) both; }
	.bb-layout-candy .sg-hero-scene .wp-block-cover__inner-container .wp-block-column > *:nth-child(2) { animation-delay: .08s; }
	.bb-layout-candy .sg-hero-scene .wp-block-cover__inner-container .wp-block-column > *:nth-child(3) { animation-delay: .16s; }
	.bb-layout-candy .sg-hero-scene .wp-block-cover__inner-container .wp-block-column > *:nth-child(4) { animation-delay: .24s; }
	.bb-layout-candy .sg-gummies > .wp-block-column:hover, .bb-layout-candy .sg-tiles > .wp-block-column:hover { animation: sg-jelly .6s ease both; }
	.bb-layout-candy ul.products li.product { transition: transform .2s ease; }
	.bb-layout-candy ul.products li.product:hover { animation: sg-wobble .5s ease both; }
	.bb-layout-candy .wp-element-button:hover, .bb-layout-candy .wp-block-button__link:hover { animation: sg-jelly .5s ease; }
	.bb-layout-candy .sg-head::after, .bb-layout-candy .woocommerce-products-header::after { animation: sg-float 3.2s ease-in-out infinite alternate; }
	.bb-layout-candy .bb-section-title.is-in::after, .bb-layout-candy .bb-reveal.is-in .bb-section-title::after { animation: sg-jelly .7s ease .3s both; }
	.bb-layout-candy .bb-header.is-scrolled { box-shadow: 0 8px 24px rgba(37, 25, 66, .25) !important; }
}
@media (max-width: 781px) {
	.bb-layout-candy .woocommerce-products-header::after { width: 180px; height: 90px; background-size: 42px 36px, 52px 44px, 38px 32px, 30px 26px;
		background-position: 10px 44px, 56px 22px, 110px 48px, 142px 10px; opacity: .55; }
	.bb-layout-candy .woocommerce-products-header__title { max-width: 100%; }
	.bb-layout-candy .sg-head::after { opacity: .45; }
}

/* ===== Motion v2, selective (2026-11-08, user: "no sé si todo deba tener animaciones… proponer qué vale la pena").
   Kept: hero settle, product worlds, the 1-2-3 steps, the distributor chat, card/tile wobble, button press.
   Dropped: every paragraph/title/column fading in (reading felt slow), the endless floating decorations, the jelly on
   every button. ===== */
@media (prefers-reduced-motion: no-preference) {
	/* everything motion.js tags enters at once… */
	.bb-layout-candy .bb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	/* …except the pieces where movement tells something */
	.bb-layout-candy .sg-gummies > .wp-block-column.bb-reveal, .bb-layout-candy ul.products > li.product.bb-reveal,
	.bb-layout-candy .sg-tiles > .wp-block-column.bb-reveal, .bb-layout-candy .sg-facts > li.bb-reveal {
		opacity: 0 !important; transform: translateY(40px) scale(.8) !important;
		transition: opacity .4s ease var(--bb-d, 0ms), transform .9s cubic-bezier(.34, 1.7, .64, 1) var(--bb-d, 0ms) !important; }
	.bb-layout-candy .sg-gummies > .wp-block-column.bb-reveal.is-in, .bb-layout-candy ul.products > li.product.bb-reveal.is-in,
	.bb-layout-candy .sg-tiles > .wp-block-column.bb-reveal.is-in, .bb-layout-candy .sg-facts > li.bb-reveal.is-in { opacity: 1 !important; transform: none !important; }
	/* product worlds: the photo comes closer, the text slides in from its side */
	.bb-layout-candy .sg-world.bb-reveal > .wp-block-cover__image-background { transform: scale(1.14); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
	.bb-layout-candy .sg-world.bb-reveal.is-in > .wp-block-cover__image-background { transform: scale(1); }
	.bb-layout-candy .sg-world.bb-reveal .wp-block-column:not(:empty) { opacity: 0; transform: translateX(-70px);
		transition: opacity .5s ease .2s, transform .9s cubic-bezier(.34, 1.4, .64, 1) .2s; }
	.bb-layout-candy .sg-world.bb-world--product-left.bb-reveal .wp-block-column:not(:empty) { transform: translateX(70px); }
	.bb-layout-candy .sg-world.bb-reveal.is-in .wp-block-column:not(:empty) { opacity: 1; transform: none; }
	/* the distributor chat: bubbles one after another, from their own side */
	.bb-layout-candy .sg-chat.bb-reveal > li { opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.6, .64, 1); }
	.bb-layout-candy .sg-chat.bb-reveal.is-in > li { opacity: 1; transform: none; }
	.bb-layout-candy .sg-chat.bb-reveal.is-in > li:nth-child(2) { transition-delay: .45s; } .bb-layout-candy .sg-chat.bb-reveal.is-in > li:nth-child(3) { transition-delay: .9s; }
	.bb-layout-candy .sg-chat.bb-reveal.is-in > li:nth-child(4) { transition-delay: 1.35s; } .bb-layout-candy .sg-chat.bb-reveal.is-in > li:nth-child(5) { transition-delay: 1.8s; }
	/* decorations: one bounce, not an endless float; no jelly on every button */
	.bb-layout-candy .sg-head::after, .bb-layout-candy .woocommerce-products-header::after { animation: sg-jelly .9s ease .3s both !important; }
	.bb-layout-candy .wp-element-button:hover, .bb-layout-candy .wp-block-button__link:hover { animation: none !important; }
}

/* ===== Product page v2: the gallery as a sticker card in the label color, label facts as big tiles, the scene with its
   fruit, and a soft "before you take it" card with the logo leaves. ===== */
.bb-layout-candy .woocommerce-product-gallery .flex-viewport { height: auto !important; } /* flexslider measured before the photo loaded */
.bb-layout-candy.single-product .woocommerce-product-gallery { background: #fff; border: 2px solid var(--wp--preset--color--night); border-radius: 28px;
	box-shadow: 9px 9px 0 var(--bb-accent, var(--wp--preset--color--primary)); padding: 14px; box-sizing: border-box; }
.bb-layout-candy.single-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 14px; border: 2px solid transparent; }
.bb-layout-candy.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: var(--bb-accent, var(--wp--preset--color--primary)); }
.bb-layout-candy.single-product .summary .bb-chips li { background: var(--bb-accent, var(--wp--preset--color--primary)) !important; border-color: transparent !important; color: #fff !important; font-family: var(--sg-round); }
.bb-layout-candy .sg-pd-what, .bb-layout-candy .sg-pd-label, .bb-layout-candy .sg-pd-before { max-width: 860px; }
.bb-layout-candy .sg-pd-what p { font-size: 1.15rem; line-height: 1.65; }
.bb-layout-candy .sg-facts { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; }
.bb-layout-candy .sg-facts li { background: color-mix(in srgb, var(--bb-accent, #a81656) 10%, #fff); border: 2px solid color-mix(in srgb, var(--bb-accent, #a81656) 35%, #fff);
	border-radius: 22px; padding: 1rem 1.1rem; display: flex; flex-direction: column; justify-content: center; min-height: 92px; }
.bb-layout-candy .sg-fact-big { font-family: var(--sg-round); font-weight: 700; font-size: 1.55rem; line-height: 1.1; color: color-mix(in srgb, var(--bb-accent, #a81656) 80%, #000); }
.bb-layout-candy .sg-fact-small { font-size: .92rem; color: var(--wp--preset--color--text); margin-top: .2rem; }
.bb-layout-candy .sg-pd-scene { margin: 0 0 2rem; } .bb-layout-candy .sg-pd-scene img { width: 100%; height: auto; border-radius: 28px; display: block; }
.bb-layout-candy .sg-pd-before { background: var(--wp--preset--color--surface); border-radius: 26px; padding: 1.4rem 1.6rem; border: 2px dashed color-mix(in srgb, var(--bb-accent, #a81656) 40%, #fff); }
.bb-layout-candy .sg-pd-before h2::before { content: ""; display: inline-block; width: 1.1em; height: .8em; margin-right: .4em; background: var(--bb-accent, var(--wp--preset--color--primary));
	-webkit-mask: var(--sg-leaf) center / contain no-repeat; mask: var(--sg-leaf) center / contain no-repeat; }
.bb-layout-candy .sg-pd-before li { margin-bottom: .45rem; }
@media (max-width: 781px) { .bb-layout-candy .sg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bb-layout-candy .sg-fact-big { font-size: 1.3rem; } }

/* Catalog toolbar: search and sort on one line, same height and the same candy pill (the search label carried a 14px
   bottom margin that pushed it 7px off the sort box). */
.bb-layout-candy .bb-col-tools { align-items: center !important; }
.bb-layout-candy .bb-col-search { margin: 0 !important; }
.bb-layout-candy .bb-col-search input[type=search], .bb-layout-candy .woocommerce-ordering select {
	height: 48px !important; box-sizing: border-box; border: 2px solid var(--wp--preset--color--night) !important; border-radius: 999px !important;
	font-family: var(--sg-round); font-weight: 600; font-size: 1rem; background-color: #fff; }
.bb-layout-candy .bb-col-search input[type=search]:focus, .bb-layout-candy .woocommerce-ordering select:focus {
	outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--glow) 70%, transparent) !important; }
.bb-layout-candy .woocommerce-ordering { margin: 0 !important; }

.sg-world--counter { background: linear-gradient(135deg, #251942 0%, #3a2154 100%) !important; }

/* ===== brand-motion pass (2026-11-08): pieces with a verb that explain the label. candy.js adds body.bb-candy-motion
   and .bb-wait / .is-in; without JS or with reduced motion everything is still and complete. ===== */
.bb-layout-candy .wp-site-blocks { overflow-x: clip; }
.bb-layout-candy .sg-gum { display: inline-block; width: 34px; height: 29px; position: relative; background: var(--c, #a81656);
	-webkit-mask: var(--sg-gum-mask) center / contain no-repeat; mask: var(--sg-gum-mask) center / contain no-repeat; }
.bb-layout-candy .sg-gum::after { content: ""; position: absolute; left: 22%; top: 24%; width: 26%; height: 16%; border-radius: 50%; background: rgba(255,255,255,.55); transform: rotate(-30deg); }

/* "Un frasco, un mes": a glass jar that fills with 60 gummies from the bottom, two by two; the servings count to 30. */
.bb-layout-candy .sg-dose { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bb-layout-candy .sg-dose-jar { position: relative; width: min(300px, 80vw); padding: 34px 16px 18px; box-sizing: border-box; border-radius: 44px 44px 36px 36px;
	border: 3px solid color-mix(in srgb, var(--wp--preset--color--night) 25%, transparent); background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.35) 40%, rgba(255,255,255,.7)); }
.bb-layout-candy .sg-dose-cap { position: absolute; left: 22%; right: 22%; top: -22px; height: 30px; border-radius: 10px;
	background: repeating-linear-gradient(90deg, #d9d9df 0 6px, #f4f4f7 6px 12px); border: 2px solid #c9c9d1; }
.bb-layout-candy .sg-dose-gums { display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 6px 5px; }
.bb-layout-candy .sg-dose-count { font-family: var(--sg-round); font-weight: 700; font-size: 1.5rem; color: var(--wp--preset--color--ink); margin: 0; }
.bb-layout-candy .sg-dose-count .sg-num { font-size: 3rem; color: var(--wp--preset--color--primary); margin-right: .2em; font-variant-numeric: tabular-nums; }
.bb-layout-candy .sg-formula { font-family: var(--sg-round); font-size: 1.35rem; color: var(--wp--preset--color--primary-dark); }

/* "Una porción" on the product page: the gummies of one serving, then the label amount. */
.bb-layout-candy .sg-portion { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin: .6rem 0 1.4rem; padding: 1.1rem 1.4rem;
	border-radius: 26px; background: #fff; border: 2px solid var(--wp--preset--color--night); box-shadow: 7px 7px 0 var(--bb-accent, var(--wp--preset--color--primary)); }
.bb-layout-candy .sg-portion .sg-gum { width: 62px; height: 53px; }
.bb-layout-candy .sg-portion-gums { display: flex; gap: 6px; }
.bb-layout-candy .sg-portion-eq { font-family: var(--sg-round); font-weight: 700; font-size: 1.3rem; color: var(--wp--preset--color--ink); }
.bb-layout-candy .sg-portion-vals { display: grid; gap: .1rem; }
.bb-layout-candy .sg-portion-val { margin: 0; font-family: var(--sg-round); font-weight: 700; font-size: 1.4rem; color: var(--wp--preset--color--ink); }
.bb-layout-candy .sg-portion-val .sg-num { font-size: 2.4rem; color: color-mix(in srgb, var(--bb-accent, #a81656) 85%, #000); font-variant-numeric: tabular-nums; }
.bb-layout-candy .sg-portion-val small { display: block; font-family: var(--wp--preset--font-family--body, inherit); font-weight: 500; font-size: .9rem; color: var(--wp--preset--color--text); }

/* Label facts as one line with the gummy as separator, not loose pills (skill brand-motion §4). */
.bb-layout-candy .sg-world .bb-chips, .bb-layout-candy.single-product .summary .bb-chips { display: block; margin: .6rem 0 1.2rem; }
.bb-layout-candy .sg-world .bb-chips li, .bb-layout-candy.single-product .summary .bb-chips li { display: inline; background: none !important; border: 0 !important;
	padding: 0 !important; font-family: var(--sg-round); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.bb-layout-candy.single-product .summary .bb-chips li { color: var(--wp--preset--color--ink) !important; }
.bb-layout-candy .sg-world .bb-chips li + li::before, .bb-layout-candy.single-product .summary .bb-chips li + li::before {
	content: ""; display: inline-block; width: .95em; height: .8em; margin: 0 .55em; vertical-align: -.05em; background: var(--wp--preset--color--glow);
	-webkit-mask: var(--sg-gum-mask) center / contain no-repeat; mask: var(--sg-gum-mask) center / contain no-repeat; }
.bb-layout-candy.single-product .summary .bb-chips li + li::before { background: var(--bb-accent, var(--wp--preset--color--primary)); }

@media (prefers-reduced-motion: no-preference) {
	/* gummies land with a bounce, two by two (pairs share --i) */
	.bb-candy-motion .sg-anim.bb-wait .sg-gum { opacity: 0; transform: translateY(-140px) rotate(-12deg); }
	.bb-candy-motion .sg-anim.is-in .sg-gum { opacity: 1; transform: none;
		transition: transform .75s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 55ms), opacity .2s ease calc(var(--i) * 55ms); }
	.bb-candy-motion .sg-portion.is-in .sg-gum { transition-delay: calc(var(--i) * 140ms); }
	/* the four title gummies land */
	.bb-candy-motion .bb-section-title.bb-wait::after { opacity: 0; transform: translateY(-34px); }
	.bb-candy-motion .bb-section-title.is-in::after { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) .15s, opacity .2s ease .15s; }
	/* the logo leaves sprout from their base */
	.bb-candy-motion .bb-eyebrow.bb-wait::before { transform: scale(0) rotate(-35deg); }
	.bb-candy-motion .bb-eyebrow.is-in::before { transform: none; transform-origin: 0 100%; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
	/* the color stripe of the shop header fills left to right */
	.bb-candy-motion .woocommerce-products-header::before { transform-origin: left; animation: sg-fill 1.1s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes sg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 781px) {
	.bb-layout-candy .sg-dose-jar { width: min(260px, 78vw); } .bb-layout-candy .sg-dose .sg-gum { width: 28px; height: 24px; }
	.bb-layout-candy .sg-portion .sg-gum { width: 48px; height: 41px; } .bb-layout-candy .sg-portion-val .sg-num { font-size: 2rem; }
}

.bb-layout-candy .sg-portion { width: fit-content; max-width: 100%; box-sizing: border-box; }

/* ===== Product page, compact (2026-11-08, user: "mucho espacio que se puede compactar"). ===== */
@media (min-width: 782px) {
	.bb-layout-candy.single-product div.product div.images { width: 40% !important; }
	.bb-layout-candy.single-product div.product div.summary { width: 55% !important; }
}
.bb-layout-candy.single-product .woocommerce-product-gallery { padding: 10px; }
.bb-layout-candy.single-product .woocommerce-product-gallery .flex-control-thumbs { margin-top: 8px !important; }
.bb-layout-candy.single-product .woocommerce-product-gallery .flex-control-thumbs li { width: 22% !important; margin-right: 4% !important; }
.bb-layout-candy.single-product .woocommerce-tabs { margin-top: 1.2rem; }
.bb-layout-candy .woocommerce-Tabs-panel--description > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bb-layout-candy .sg-pd-what h2, .bb-layout-candy .sg-pd-label h2, .bb-layout-candy .sg-pd-before h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.bb-layout-candy .sg-pd-what p { font-size: 1.05rem; margin: 0; }
.bb-layout-candy .sg-pd-what + .sg-pd-label { margin-top: 1.4rem; }
/* serving + facts on one row, each tile as wide as its text */
.bb-layout-candy .sg-pd-label { display: flex; flex-wrap: wrap; align-items: stretch; gap: .8rem; max-width: none; }
.bb-layout-candy .sg-pd-label > h2 { flex-basis: 100%; }
.bb-layout-candy .sg-pd-label .sg-portion { margin: 0; padding: .8rem 1.2rem; }
.bb-layout-candy .sg-facts { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.bb-layout-candy .sg-facts li { min-height: 0; padding: .7rem 1.1rem; justify-content: center; }
.bb-layout-candy .sg-fact-big { font-size: 1.25rem; }
/* the flavor band */
.bb-layout-candy .sg-pd-scene { position: relative; margin: 1.8rem 0; border-radius: 28px; overflow: hidden; height: clamp(300px, 32vw, 430px);
	background: var(--bb-accent, var(--wp--preset--color--night)); }
.bb-layout-candy .sg-pd-scene img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.bb-layout-candy .sg-pd-scene--text-left img { object-position: 70% 50%; } .bb-layout-candy .sg-pd-scene--text-right img { object-position: 30% 50%; }
.bb-layout-candy .sg-pd-scene-text { position: absolute; top: 50%; transform: translateY(-50%); width: min(42%, 440px); color: #fff; }
.bb-layout-candy .sg-pd-scene--text-left .sg-pd-scene-text { left: clamp(20px, 4vw, 48px); } .bb-layout-candy .sg-pd-scene--text-right .sg-pd-scene-text { right: clamp(20px, 4vw, 48px); }
.bb-layout-candy .sg-pd-scene-text :where(p) { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.3); margin: 0 0 .7rem; }
.bb-layout-candy .sg-pd-scene-text .bb-eyebrow { color: var(--wp--preset--color--glow); }
.bb-layout-candy .sg-pd-scene-title { font-family: var(--sg-round); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; }
.bb-layout-candy .sg-pd-scene-title em { font-style: normal; color: var(--wp--preset--color--glow); }
.bb-layout-candy .sg-pd-scene-text .wp-element-button { display: inline-block; background: #fff !important; color: var(--wp--preset--color--night) !important; padding: .75rem 1.4rem; text-decoration: none; text-shadow: none; }
/* before you take it: compact, two columns of points on wide screens */
.bb-layout-candy .sg-pd-before { padding: 1.1rem 1.4rem; max-width: none; }
.bb-layout-candy .sg-pd-before ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; }
@media (min-width: 900px) { .bb-layout-candy .sg-pd-before ul { columns: 2; column-gap: 2.4rem; } .bb-layout-candy .sg-pd-before li { break-inside: avoid; } }
.bb-layout-candy .sg-pd-before li { font-size: .95rem; margin-bottom: .35rem; }
.bb-layout-candy .sg-pd-before p { font-size: .9rem; margin: 0; color: var(--wp--preset--color--muted); }
.bb-layout-candy.single-product .related { margin-top: 2.6rem !important; padding-top: 0 !important; }
.bb-layout-candy.single-product .related > h2 { font-size: 1.6rem; }
@media (max-width: 781px) {
	.bb-layout-candy .sg-pd-scene { height: auto; display: flex; flex-direction: column; }
	.bb-layout-candy .sg-pd-scene img { height: 230px; }
	.bb-layout-candy .sg-pd-scene-text { position: static; transform: none; width: auto; padding: 1.2rem 1.2rem 1rem; }
	.bb-layout-candy .sg-pd-scene-text :where(p) { text-shadow: none; }
}

/* Gummy rain beside the distributor chat (candy.js moves it with the scroll; static pile without JS). */
.bb-layout-candy .sg-chat-wrap { position: relative; margin-top: 1.8rem; padding-bottom: 70px; }
.bb-layout-candy .sg-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bb-layout-candy .sg-rain .sg-gum { position: absolute; left: var(--x); bottom: var(--b); width: 40px; height: 34px; will-change: transform; }
@media (max-width: 781px) { .bb-layout-candy .sg-rain { display: none; } .bb-layout-candy .sg-chat-wrap { padding-bottom: 0; } }

/* Gummy rain v2 (2026-11-08, user: "quedó como con un lag"): JS moved them a frame behind the compositor scroll.
   Scroll-driven CSS where supported (Chrome/Edge): the fall runs on the compositor, tied to the chat crossing the
   screen, each gummy a little later. Fallback (candy.js): one timed shower when the chat comes into view. */
@keyframes sg-rain-fall { from { transform: translateY(-560px) rotate(var(--r)); } 70% { transform: translateY(8px) rotate(0deg); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.bb-candy-motion .sg-chat-wrap { view-timeline: --sg-chat block; }
		.bb-candy-motion .sg-rain .sg-gum { animation: sg-rain-fall linear both; animation-timeline: --sg-chat;
			animation-range: cover calc(18% + var(--k) * 5%) cover calc(52% + var(--k) * 5%); }
	}
	.bb-candy-motion .sg-rain.sg-rain-wait .sg-gum { transform: translateY(-560px) rotate(var(--r)); }
	.bb-candy-motion .sg-rain.sg-rain-go .sg-gum { animation: sg-rain-fall 1.1s cubic-bezier(.34, 1.3, .64, 1) both; animation-delay: calc(var(--k) * 120ms); }
}
.bb-layout-candy .sg-rain .sg-gum { will-change: auto; }

/* Counter band: the text keeps to the purple side; a soft night gradient behind it on medium screens, so it never sits
   on the labels. */
@media (min-width: 782px) {
	.bb-layout-candy .sg-world--counter > .wp-block-cover__background { background: linear-gradient(90deg, rgba(37,25,66,.95) 0%, rgba(37,25,66,.75) 34%, rgba(37,25,66,0) 50%) !important; opacity: 1 !important; display: block !important; }
	.bb-layout-candy .sg-world--counter .wp-block-columns > .wp-block-column:first-child { flex-basis: 40% !important; max-width: 460px; }
}