/* Altea Naturals storefront: hand-written base (ours). Universal behaviour the measured layers (base.generated.css, region
   CSS from tools/gen_region.py) cannot express: box model, centred page containers, accessibility helpers, element
   resets, and interactive states. Loaded after base.generated.css. */
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0}
.page-width{margin-left:auto;margin-right:auto}
.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px;padding:0!important;border:0;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap}
.list-unstyled{margin:0;padding:0;list-style:none}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
img,video{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}

/* media in a ratio box: the box takes its height from --ratio-percent, the picture fills it */
.ratio{position:relative;display:flex;align-items:stretch}
.ratio::before{content:"";width:0;height:0;padding-bottom:var(--ratio-percent)}
.card__media,.card__media>.media,.media>img,.media>video{position:absolute;top:0;left:0;width:100%;height:100%}
.card__media img,.media>img{object-fit:cover}
.media--transparent>img{object-fit:contain}

/* price rows by state: on sale shows the sale row (price + struck compare-at), otherwise the regular row */
.price--on-sale .price__regular,.price:not(.price--on-sale) .price__sale{display:none}
.price:not(.price--on-sale) .price__compare-price{display:none}
.price--sold-out .price__badge-sale,.price:not(.price--sold-out) .price__badge-sold-out,.price:not(.price--on-sale) .price__badge-sale{display:none}

/* accordions: the panel after a <details> collapses to an empty row while it is closed */
.accordion__content-wrapper{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .25s ease}
details[open]+.accordion__content-wrapper{grid-template-rows:1fr}
/* Shrine (base.css t/6): the content fades in once its row is open (.accordion__content is opacity 0 while closed);
   accordion-v2 rows animate both over the row's own --animation-duration (0.4s inline on every product accordion) */
.accordion__details[open]+.accordion__content-wrapper .accordion__content{opacity:1}
.accordion-v2 .accordion__content-wrapper{transition:grid-template-rows var(--animation-duration,.25s) ease-in-out}
.accordion-v2 .accordion__content{transition:opacity var(--animation-duration,.25s) ease-in-out}
/* and the caret turns over while the row is open (solid icons also lift 7%) */
.accordion__details .accordion__summary .icon-caret{transition:transform var(--animation-duration,.2s) ease-in-out}
.accordion__details[open] .accordion__summary .icon-caret{transform:rotate(180deg)}
.accordion-v2 .accordion__details[open] .accordion__collapse-icon--solid .icon-caret{transform:translateY(-7%) rotate(180deg)}
.accordion__content-wrapper>*{min-height:0}

/* rating stars (measured on /products/brazilian-green-propolis: 18.39px stars = 1em of the 18.4px text, 2.3px (.125em)
   apart, grey underlay #ececec from --bg-star-color, the --star-color overlay clipped to --rating of --visible-stars) */
.rating-stars{font-size:var(--font-size,1.1rem)}
.rating-stars-and-text{display:flex;align-items:center;justify-content:var(--alignment,flex-start)}
.rating-stars__container{display:flex;position:relative;flex:none}
.rating-stars__container svg{display:block;width:1em;height:1em;flex:none;overflow:hidden}
.rating-stars__container svg+svg{margin-left:.125em}
.rating-stars__container--underlay{color:var(--bg-star-color,#ececec)}
.rating-stars__container--overlay{position:absolute;top:0;left:0;overflow:hidden;color:var(--star-color,#ffcc00);width:calc(var(--rating) / var(--visible-stars) * 100%)}
.rating-stars__label{margin-left:.14375em}

/* menu drawer (header-drawer > details): closed it waits off the left edge; opened it covers the full height at the left,
   400px wide (350px on a 390px phone: the viewport less 40px), measured open on the origin */
header-drawer .menu-drawer{position:fixed!important;top:0!important;left:0!important;height:100%!important;width:min(400px,calc(100vw - 40px))!important;z-index:10;background-color:rgb(255,255,255);transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s ease;overflow-y:auto}
header-drawer details.menu-opening .menu-drawer{transform:none!important;visibility:visible!important}
header-drawer details.menu-opening .menu-drawer :is(.header-drawer-v2__header,.header-drawer-v2__body,.header-drawer-v2__footer,.menu-drawer__title){visibility:visible!important}
body.overflow-hidden{overflow:hidden}

/* buttons that say they are full width */
.button--full-width{display:flex;width:100%}

/* drawer upsell switch (Shipping protection), measured off and on at 390: 40x20 track, 17.19px knob centred 10px from
   the left (off) / 30px (on); the track grey (rgba(18,18,18,.2)) off, black on */
cart-drawer-upsell .toggle-switch{position:relative;display:block;flex:none;width:40px;height:20px;border-radius:20px;background-color:rgba(18,18,18,.2);padding:1px 6px;margin-left:15px;border:0;cursor:pointer}
cart-drawer-upsell .toggle-switch__slider{position:absolute;top:10px;left:10px;width:17.1875px;height:17.1875px;border-radius:20px;background-color:#fff;transform:translate(-50%,-50%);transition:left .2s ease;font-size:0;line-height:0}
cart-drawer-upsell[data-selected="true"] .toggle-switch{background-color:#000}
cart-drawer-upsell[data-selected="true"] .toggle-switch__slider{left:30px}

/* cart drawer, measured closed and open (class active) at 1440 and 390: a fixed full-screen layer, hidden when closed,
   dimmed rgba(18,18,18,.5) when open; the white panel at the right edge, 400px wide on desktop
   (cart-drawer--desktop-width-normal) and the full width on phones (cart-drawer--mobile-width-full), slid out to the right
   while closed */
cart-drawer.drawer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;justify-content:flex-end;visibility:hidden;background-color:rgba(0,0,0,0);transition:visibility .25s ease,background-color .25s ease}
cart-drawer.drawer.active{visibility:visible;background-color:rgba(18,18,18,.5)}
cart-drawer .cart-drawer__overlay,cart-drawer #CartDrawer-Overlay{position:fixed;top:0;left:0;right:0;bottom:0}
cart-drawer .drawer__inner{position:relative;display:grid;height:100%;background-color:#fff;transform:translateX(100%);transition:transform .25s ease;overflow:hidden}
cart-drawer.active .drawer__inner{transform:none}
@media (min-width:750px){cart-drawer.cart-drawer--desktop-width-normal .drawer__inner{width:400px;max-width:calc(100vw - 30px)}}
@media (max-width:749px){cart-drawer.cart-drawer--mobile-width-full .drawer__inner{width:100%;max-width:100%}}
/* empty drawer (measured open with an empty cart): the empty-state block fills the panel, the rest collapses; with items
   the empty-state block is gone */
cart-drawer:not(.is-empty) .drawer__inner-empty{display:none}
cart-drawer.is-empty .drawer__inner-empty{display:flex;height:100%}
cart-drawer.is-empty .drawer__header,cart-drawer.is-empty .cart-drawer__body,cart-drawer.is-empty .drawer__footer,cart-drawer.is-empty .cart__ctas{display:none}
/* the stars take the block's own colour variables (a measured text colour on the containers must not win) */
.rating-stars .rating-stars__container--underlay,.rating-stars .rating-stars__container--underlay svg{color:var(--bg-star-color,#ececec)!important;fill:currentColor}
.rating-stars .rating-stars__container--overlay,.rating-stars .rating-stars__container--overlay svg{color:var(--star-color,#ffcc00)!important;fill:currentColor}

/* header icon buttons: 44x44 hit areas with the glyph centred (measured at 1440 and 390: menu, search, account, cart) */
.header__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;position:relative}
summary.header__icon{display:block}
.header__icon>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* responsive visibility utilities (class names as the markup uses them; breakpoints 750 / 990) */
@media (max-width:749px){.small-hide{display:none!important}}
@media (min-width:750px) and (max-width:989px){.medium-hide{display:none!important}}
@media (min-width:750px){.medium-up-hide{display:none!important}}
@media (min-width:990px){.large-up-hide{display:none!important}}
/* product form buttons on phones: the fill is on the button itself (measured at 390: rgb(0,0,0); desktop paints it in
   ::after, which the measured region rules carry) */
@media (max-width:749px){.product-form__submit.button{background-color:rgb(0,0,0)}}
/* product gallery arrows on phones (measured at 390): 30px circles at mid-height of the slider, 10px from each side */
@media (max-width:749px){
  slider-component.product-media-slider{position:relative}
  media-gallery .slider--mobile-arrows-sides .splide__arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%}
  media-gallery .slider--mobile-arrows-sides .splide__arrow--prev{left:10px;right:auto}
  media-gallery .slider--mobile-arrows-sides .splide__arrow--next{right:10px;left:auto}
}

/* product cards with a second picture (measured on /collections/all): the second waits at opacity 0 and swaps in on hover
   (first fades out; second fades in at scale 1.03; .4s opacity, .5s transform) */
.media--hover-effect>img+img{opacity:0;transition:opacity .4s cubic-bezier(.25,.46,.45,.94),transform .5s ease}
.media--hover-effect>img:first-child{transition:opacity .4s cubic-bezier(.25,.46,.45,.94)}
@media (hover:hover){
  .card-wrapper:hover .media--hover-effect>img:first-child:not(:only-child){opacity:0}
  .card-wrapper:hover .media--hover-effect>img+img{opacity:1;transform:scale(1.03)}
}

/* form fields (measured on /pages/contact at 1440): a 47px box, the 1px ring drawn by ::after (rgba(18,18,18,.6), 6px
   radius; the section's own ring colour comes from its measured region CSS), the input 15px inside, the label at
   21px / 11px in the text size; once the field has a value or focus the label moves to 6px at 10px and the text sits
   22px from the top */
.field{position:relative;display:flex;width:100%}
.field::after{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border-radius:6px;box-shadow:0 0 0 1px rgba(18,18,18,.6);pointer-events:none;z-index:1;transition:box-shadow .1s ease}
.field:focus-within::after{box-shadow:0 0 0 2px rgba(18,18,18,.6)}
.field__input{flex-grow:1;width:100%;height:45px;margin:1px;padding:15px;border:0;border-radius:6px;background-color:#fff;color:rgb(18,18,18);font-family:inherit;font-size:16px;line-height:24px;letter-spacing:.4px;box-sizing:border-box;-webkit-appearance:none;appearance:none;outline:none;transition:padding .1s ease}
textarea.field__input{height:100px;min-height:100px;resize:vertical}
.field__input::placeholder{opacity:0}
.field__label{position:absolute;top:11px;left:21px;font-size:16px;line-height:24px;letter-spacing:1px;color:rgba(18,18,18,.9);pointer-events:none;transition:top .1s ease,font-size .1s ease}
.field__input:focus~.field__label,.field__input:not(:placeholder-shown)~.field__label{top:6px;font-size:10px;line-height:1.2;letter-spacing:.4px}
.field__input:focus,.field__input:not(:placeholder-shown){padding:22px 15px 8px 20px}

/* pagination (measured on /collections/all at 1440): a centred wrapping row of 44px cells 10px apart; the current page at
   16px with a 20x1px underline 8px from the bottom, the others at 14px; the next / previous caret 10x6 turned sideways */
.pagination-wrapper{margin-top:50px}
.pagination__list{display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none}
.pagination__list>li{flex:1 0 44px;max-width:44px;height:44px}
.pagination__list>li:not(:last-child){margin-right:10px}
.pagination__item{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:14px;color:rgb(18,18,18);text-decoration:none}
.pagination__item--current{font-size:16px}
.pagination__item--current::after{content:"";position:absolute;display:block;width:20px;height:1px;bottom:8px;left:50%;transform:translateX(-50%);background-color:currentColor}
.pagination__item-arrow svg{display:block;width:10px;height:6px}
.pagination__item--prev svg{transform:rotate(-90deg)}
.pagination__item--next svg{transform:rotate(90deg)}

/* product gallery slides (measured on /products/cure-thyroid-support-drops-special-discount): the media box takes its
   height from the container's inline --ratio (715px wide at ratio 1.5 → 476.66px), the picture covers it */
.product-media-container .product__media{position:relative;padding-top:calc(100% / var(--ratio, 1))}
.product-media-container .product__media>img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.product-media-container.media-fit-contain .product__media>img{object-fit:contain}

/* footer grid (Shrine's 12 columns, measured on / at 1440 and 390): a block takes N/12 of the row less its 20px side
   margins (desktop-2 183.2px, desktop-3 295px, desktop-12 1300px of 1340px); on phones mobile-2 takes the row,
   mobile-1 half of it less the 20px gap */
@media (min-width:750px){.footer__blocks-wrapper>.footer-block[class*="footer-block--desktop-"]{flex:0 0 auto}
  .footer__blocks-wrapper>.footer-block--desktop-2{width:calc(100% * 2 / 12 - 40px)}
  .footer__blocks-wrapper>.footer-block--desktop-3{width:calc(100% * 3 / 12 - 40px)}
  .footer__blocks-wrapper>.footer-block--desktop-4{width:calc(100% * 4 / 12 - 40px)}
  .footer__blocks-wrapper>.footer-block--desktop-6{width:calc(100% * 6 / 12 - 40px)}
  .footer__blocks-wrapper>.footer-block--desktop-12{width:calc(100% - 40px)}}
@media (max-width:749px){.footer__blocks-wrapper>.footer-block--mobile-2{width:100%}
  .footer__blocks-wrapper>.footer-block--mobile-1{width:calc(50% - 10px)}}

/* sticky Add to cart bar (measured on /products/brazilian-green-propolis at 1440 and 390, hidden and revealed): fixed to
   the bottom, white with a soft top shadow, waiting below the viewport (translateY 100%) until the product's own Add to
   cart button has scrolled above it (public/_pq/site.js sets transform:none); 10px above / below (15px below on
   phones). Row: 52px picture, then title + price and the button pushed right; phones drop the picture and stack */
sticky-atc.sticky-atc{display:block;position:fixed;left:0;right:0;bottom:0;width:100%;z-index:2;padding:10px 0;background-color:rgb(255,255,255);box-shadow:rgba(0,0,0,.2) 0 -1px 10px 0;transform:translateY(100%);transition:transform .15s ease-in-out}
sticky-atc .sticky-atc-container{display:flex;align-items:center;justify-content:space-between;column-gap:15px;width:100%;max-width:1400px;margin:0 auto;padding:0 50px}
sticky-atc .sticky-atc__image{display:block;flex:none;width:52px;height:52px}
sticky-atc .sticky-atc__image img{display:inline;width:52px;height:52px;max-width:100%}
sticky-atc .sticky-atc__left{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;column-gap:15px;padding-right:10px;min-width:0}
sticky-atc .sticky-atc__left__content{display:block}
sticky-atc .sticky-atc__price{margin-top:4px}
sticky-atc .sticky-atc__button{display:block;flex:none;border-radius:8px}
@media (max-width:749px){
  sticky-atc.sticky-atc{padding:10px 0 15px}
  sticky-atc .sticky-atc-container{padding:0 15px;column-gap:10px}
  sticky-atc .sticky-atc__image.mobile-hidden{display:none}
  sticky-atc .sticky-atc__left{flex-direction:column;align-items:flex-start;padding-right:0}
}

/* colour schemes: the theme settings block in <head> defines the palette (--color-base-*, --gradient-base-*); each
   scheme class picks its foreground / background pair, and scheme elements paint themselves with it (the text at 90%) */
:root,.color-background-1{--color-foreground:var(--color-base-text);--color-background:var(--color-base-background-1);--gradient-background:var(--gradient-base-background-1)}
.color-background-2{--color-foreground:var(--color-base-text);--color-background:var(--color-base-background-2);--gradient-background:var(--gradient-base-background-2)}
.color-accent-1{--color-foreground:var(--color-base-solid-button-labels);--color-background:var(--color-base-accent-1);--gradient-background:var(--gradient-base-accent-1)}
.color-accent-2{--color-foreground:var(--color-base-solid-button-labels);--color-background:var(--color-base-accent-2);--gradient-background:var(--gradient-base-accent-2)}
.color-inverse{--color-foreground:var(--color-base-background-1);--color-background:var(--color-base-text);--gradient-background:rgb(var(--color-base-text))}
body,.color-background-1,.color-background-2,.color-accent-1,.color-accent-2,.color-inverse,.color-custom{color:rgba(var(--color-foreground),.9);background-color:rgb(var(--color-background))}
.gradient{background:rgb(var(--color-background));background:var(--gradient-background)}

/* product thumbnails (measured on /products/brazilian-green-propolis at 1440 and 390): the row between two 44px arrows,
   N per view from the gallery's --desktop-thumbnails / --mobile-thumbnails (less 8px / 5px each), square cells, the
   picture covering a 12px-rounded button that fills the cell */
.thumbnail-slider{display:flex;align-items:center}
.thumbnail-slider .slider-button{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px}
.thumbnail-slider .thumbnail-list.slider{display:flex;flex:1 1 0%;column-gap:7.5px;padding:7.5px 1px;overflow-x:auto;scroll-padding-left:5px}
.thumbnail-slider .thumbnail-list.slider--tablet-up{align-items:center;padding:5px}
.thumbnail-list__item{position:relative;flex:0 0 auto}
.thumbnail-list__item::before{content:"";display:block;padding-bottom:100%}
.thumbnail-list__item.slider__slide{width:calc(100% / var(--mobile-thumbnails) - 5px)}
@media (min-width:750px){.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide{width:calc(100% / (var(--desktop-thumbnails) - 1) - 8px)}}
@media (min-width:900px){.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide{width:calc(100% / var(--desktop-thumbnails) - 8px)}}
.thumbnail-list__item .thumbnail{display:block;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:12px;padding:0;border:0}
.thumbnail-list__item .thumbnail img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.thumbnail-list__item .thumbnail[aria-current]{box-shadow:rgb(26,26,26) 0 0 0 1px}

/* review quote under the buy box: 50px round avatar 15px left of the text */
.review-item__image{position:relative;display:block;flex:0 0 auto;width:50px;height:50px;margin-right:15px;border-radius:40px;overflow:hidden}
.review-item__image img{position:absolute;top:0;left:0;width:50px;height:50px;object-fit:cover;display:block}

/* rich text: the first block has no top margin, the last none below; lists inside accordions keep 16px above / below */
.rte>p:first-child{margin-top:0}
.rte>p:last-child,.rte li:last-child{margin-bottom:0}
.image-with-text__content>:first-child{margin-top:0}
.image-with-text__content>:last-child{margin-bottom:0}
.accordion__content__inner ul{margin-top:16px;margin-bottom:16px;padding-left:20px}
.accordion__content__inner>ul:last-child{margin-bottom:16px}

/* the sticky bar's sale badge: a flex pill on desktop, hidden on phones (sticky-atc--mobile-no-badge) */
sticky-atc .price__badge-sale{display:flex;align-items:center}
@media (max-width:749px){sticky-atc.sticky-atc--mobile-no-badge .price__badge-sale{display:none}}

/* section divider wave: the svg spans the row */
.section-divider__svg svg{display:block;width:100%}

/* blocks with their own margins (block-margins): the first block (after a leading <style>) has no top margin and the
   last none below, whatever its inline margins say */
.block-margins>:first-child,.block-margins>style:first-child+*{margin-top:0!important}
.block-margins>:last-child{margin-bottom:0!important}

/* carousel slides (Facebook-style testimonials, icon bar): the slide container fills the slide, 4px / 8px inside */
.facebook-testimonials .splide__slide__container{height:100%;padding:4px 8px 8px}
.facebook-testimonials .fb-post{height:100%}
@media (min-width:750px){.image-with-text__text-item>.image-with-text__content{height:100%}}

/* carousel cards on phones (measured at 390 on /products/brazilian-green-propolis; the slides past the first one carry
   no measured region rules): Facebook-style posts and icon-bar cards */
@media (max-width:749px){
  .fb-post__top{display:flex;margin-bottom:10px}
  .fb-post__profile-picture{flex:0 0 auto;width:40px;height:40px;border-radius:50%;overflow:hidden}
  .fb-post__profile-picture img{display:block;width:40px;height:40px;max-width:100%;object-fit:cover;vertical-align:bottom}
  .fb-post__content__text{margin-bottom:10px}
  .fb-post__content__text p{margin:0;font-size:15px;line-height:19.95px}
  .fb-post__content .media{display:flex;margin:0 -15px 10px}
  .fb-post__content__image{display:block;width:100%;max-width:100%;height:auto;object-fit:cover;vertical-align:bottom}
  .icon-bar-card{display:flex;margin-top:0}
  .icon-bar-card__icon{flex:0 0 auto;color:rgb(42,127,138)}
  .icon-bar-card .material-icon{display:inline-block;width:50px;height:50px;max-width:50px;font-size:50px;line-height:50px;vertical-align:bottom;color:rgb(42,127,138)}
  .icon-bar-card .multicolumn-card__info{padding:10px 15px 0}
  .icon-bar-card .multicolumn-card__info h3{margin:0;font-size:22.1px;line-height:30.6px}
  .icon-bar-card .multicolumn-card__info .rte{margin-top:10px}
  .fb-post__reactions{display:flex}
  .fb-post__reactions__icons svg{display:block;width:17px;height:17px}
  .fb-post__ctas{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;align-items:center}
  .fb-post__ctas__btn{display:flex;align-items:center;justify-content:center}
  .fb-post__ctas__btn svg{display:block;width:18px;height:20px}
}
/* review quote: text paragraphs carry no margins (measured: 0) */
.review-item__text p{margin:0}
.banner__box--custom-margins>*{margin-bottom:0!important}

/* footer blocks (measured on / at 1440): menu items 15px apart, the first link flush with the heading; the email
   signup's text keeps 1em below it */
@media (min-width:750px){.footer-block__details-content>li:not(:last-child){margin-right:15px}}
.footer-block__details-content>:first-child .list-menu__item--link{padding-top:0}
.footer .footer-block__details-content.footer-block__details-content-mb p{margin-bottom:1em}

/* collection / search toolbar on phones (measured on /collections/all at 390): Filter button and product count share
   the first row (count right, 20px apart), active filter pills take the row below */
@media (max-width:749px){
  .facets-container{display:grid;grid-template-columns:1fr max-content;column-gap:20px}
  .facets-container>.mobile-facets__wrapper{grid-column:1;grid-row:1}
  .facets-container>.product-count{grid-column:2;grid-row:1;align-self:center}
  .facets-container>.active-facets-mobile{grid-column:1/-1;grid-row:2}
}
/* side borders the measured layers only carry for the top edge */
.fb-post.custom-border-hex{border-left-color:var(--border-color,#dfdfdf);border-right-color:var(--border-color,#dfdfdf)}
header-drawer .menu-drawer{border-right-color:rgba(var(--color-foreground),.1)}
.splide__pagination__page{border:0}
@media (max-width:749px){.fb-post__ctas__btn svg{margin-right:4px}}
.banner__content{width:100%}
header-drawer{width:44px}

/* cart drawer lines and footer (measured open on /products/brazilian-green-propolis at 1440 and 390 with a Buy 2, Get 1
   Free line and a subscription line): the picture takes --image-size (20%) of the row with a soft shadow, the right
   column the rest 12.5px in; the name row carries the 20px remove button; under it the 97x27 tinted stepper (25px
   buttons) 60px in and the line totals pushed right; footer totals stacked 10px apart, "Discounts:" with its badge on one
   wrapping row, the Check out button across the drawer */
cart-drawer .cart-drawer-item{display:flex;position:relative;align-items:flex-start;gap:0}
cart-drawer .cart-item__media{position:relative;flex:0 0 auto;width:var(--image-size,20%)}
cart-drawer .cart-item__image{display:inline;width:100%;height:auto;max-width:100%;box-shadow:rgba(0,0,0,.05) 3px 3px 10px 0}
cart-drawer .cart-drawer-item__right{flex-grow:1;min-width:0;padding-left:12.5px}
cart-drawer .cart-drawer-item__details-and-delete-btn{display:flex;align-items:flex-start}
cart-drawer .cart-item__details{flex:1 1 auto;min-width:0}
cart-drawer .cart-drawer-item__cart-remove-button{display:flex;flex:none;width:20px;height:20px}
cart-drawer .cart-drawer-item__cart-remove-button .button{display:flex;position:relative;align-items:center;justify-content:center;width:20px;height:20px;min-width:0;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer}
cart-drawer .cart-drawer-item__cart-remove-button .button::before,cart-drawer .cart-drawer-item__cart-remove-button .button::after{content:none}
cart-drawer .cart-drawer-item__cart-remove-button svg{display:block;width:15px;height:15px}
cart-drawer .cart-drawer-item__quantity-and-prices{display:flex;align-items:center;justify-content:space-between}
@media (min-width:750px){cart-drawer .cart-item__quantity{padding-left:60px}}
cart-drawer .cart-item__quantity-wrapper{display:flex}
cart-drawer quantity-input.cart-quantity{display:flex;position:relative;align-items:center;border-radius:6px;background-color:rgb(234,246,246)}
cart-drawer quantity-input.cart-quantity .quantity__button{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:content-box;width:14px;height:14px;margin-left:1px;padding:5.6px;border:0;border-radius:6px;background-color:inherit;color:inherit;cursor:pointer}
cart-drawer quantity-input.cart-quantity .quantity__button svg{width:9.8px;height:auto;pointer-events:none}
cart-drawer quantity-input.cart-quantity .quantity__input{flex-grow:1;box-sizing:content-box;width:21px;height:14px;padding:5.6px 9.8px;border:0;background-color:inherit;font-size:14px;line-height:14px;text-align:center;-moz-appearance:textfield;appearance:textfield}
cart-drawer quantity-input.cart-quantity .quantity__input::-webkit-inner-spin-button,cart-drawer quantity-input.cart-quantity .quantity__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
cart-drawer .cart-item__totals{display:flex;position:relative;align-items:flex-start;justify-content:flex-end}
cart-drawer .cart-item__price-wrapper{display:block;text-align:right}
cart-drawer .drawer__close{display:flex;position:absolute;align-items:center;justify-content:center;width:30px;height:30px;min-height:0;padding:0;border:0;background-color:rgb(235,235,235)}
cart-drawer .drawer__close svg{width:19.5px;height:19.5px}
cart-drawer .drawer__header{position:relative}
cart-drawer .cart-drawer__totals{display:flex;flex-direction:column;row-gap:10px}
cart-drawer .cart-drawer__footer__discounts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:3px;margin-top:5px;font-size:12px;line-height:12px}
cart-drawer .cart-drawer__footer__discounts .badge{display:flex;align-items:center;column-gap:4px;padding:0 5px;border-radius:6px;background-color:rgba(26,26,26,.08);box-shadow:rgba(0,0,0,.05) 1px 1px 3px 0;font-size:10px;line-height:17.5px}
cart-drawer .badge svg{width:1em;height:1em;flex:none}
cart-drawer .cart__ctas .cart__checkout-button{display:inline-flex;width:100%;min-height:49px}
/* totals rows: --text-size (x1.15 from 750px), line-height 1.1; the amount at .9em in the row's colour */
#CartDrawer .drawer__inner .cart-drawer__totals__row,#CartDrawer .drawer__inner .cart-drawer__totals__row>span,#CartDrawer .drawer__inner .cart-drawer__totals__row strong{font-size:var(--text-size);line-height:1.1}
@media (min-width:750px){#CartDrawer .drawer__inner .cart-drawer__totals__row,#CartDrawer .drawer__inner .cart-drawer__totals__row>span,#CartDrawer .drawer__inner .cart-drawer__totals__row strong{font-size:calc(var(--text-size) * 1.15)}}
#CartDrawer .drawer__inner .cart-drawer__totals__row strong{font-size:inherit}
#CartDrawer .drawer__inner .cart-drawer__totals__row .cart-drawer__totals__row__money{font-size:.9em;line-height:1.1;color:inherit;border-color:currentColor}
#CartDrawer .drawer__inner .cart-drawer__footer__discounts .badge{font-weight:700}
#CartDrawer .drawer__inner .cart-drawer__footer__discounts .badge,#CartDrawer .drawer__inner .cart-drawer__discounts .badge{border:1px solid rgba(26,26,26,0)}
#CartDrawer .drawer__inner .cart-drawer__footer__discounts .badge{width:auto}
/* close crosses (drawers, menu): two lines stroked in the text colour, --x-stroke wide, round caps */
.x-svg{display:block}
.x-svg line{stroke:currentColor;stroke-width:var(--x-stroke,1.5px);stroke-linecap:round}
cart-drawer .drawer__close{color:rgb(46,42,57)}

/* cart page states (Dawn's main-cart-items / footer): an empty cart shows the warning block, a filled one the line table
   and the footer */
#MainContent cart-items:not(.is-empty) .cart__warnings{display:none!important}
#MainContent cart-items.is-empty .cart__contents,#MainContent cart-items.is-empty .title-wrapper-with-link{display:none!important}
#MainContent cart-items:not(.is-empty) .cart__contents.critical-hidden{display:block!important}
#MainContent cart-items:not(.is-empty) .title-wrapper-with-link{display:flex}
#main-cart-footer.is-empty{display:none}

/* cart page line table (measured on /cart with a subscription line and a Buy 2, Get 1 Free line at 1440 and 390):
   desktop a table (130px picture, details half the width, quantity 60px in, totals right), phones a grid
   (100px picture spanning two rows, details over two columns, totals right, quantity under the details) */
table.cart-items{width:100%;border-spacing:0;border-collapse:separate}
.cart-items thead th{padding-bottom:18px;vertical-align:middle;text-align:left;font-weight:400}
.cart-items thead th.right{text-align:right}
.cart-item__image-container{display:inline-flex;align-items:flex-start;border-width:0}
.cart-item__image{display:block;height:auto;max-width:100%;vertical-align:bottom}
.cart-item__details>*{max-width:300px}
.cart-item__details>*+*{margin-top:6px}
.cart-item__details>dl:empty,.cart-item__details>p.product-option:empty,.cart-item__details>ul.discounts:empty{display:none}
.cart-item .discounts__discount{display:flex;align-items:center}
.cart-item__quantity-wrapper{display:flex}
.main-quantity .quantity__button{display:flex;align-items:center;justify-content:center;margin:1px 0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.main-quantity .quantity__input{display:block;margin:1px 0;padding:0 5px;border:0;background:transparent;text-align:center;-moz-appearance:textfield;appearance:textfield}
.main-quantity .quantity__input::-webkit-inner-spin-button,.main-quantity .quantity__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cart-item__quantity-wrapper cart-remove-button{display:flex}
.cart-item__quantity-wrapper cart-remove-button .button{display:flex;align-items:center;justify-content:center}
.cart-item__error{display:flex;align-items:flex-start;margin-top:10px}
.cart-item__totals .cart-item__price-wrapper,.cart-item__totals .cart-item__discounted-prices,.cart-item__totals dd{display:block;text-align:right}
.cart-item__totals dd>.price,.cart-item__totals dd.price{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:10px}
@media (min-width:750px){
  .cart-items thead th{border-bottom:1px solid rgba(var(--color-foreground),.08)}
  .cart-items thead th.cart-items__heading--wide{padding-left:60px}
  .cart-items thead th.small-hide.right{padding-left:40px}
  .cart-item{display:table-row}
  .cart-item>td{display:table-cell;padding-top:40px;vertical-align:top}
  .cart-item__media{width:130px}
  .cart-item__image{width:130px}
  .cart-item__details{width:50%;padding-left:40px}
  .cart-item__quantity{padding-left:60px}
  .cart-item__totals{padding-left:40px;text-align:right}
  .main-quantity .quantity__button{width:45px;height:45px}
  .main-quantity .quantity__input{width:50px;height:45px}
  .cart-item__quantity-wrapper cart-remove-button{width:36px;height:42px;margin-top:5px}
  .cart-item__quantity-wrapper cart-remove-button .button{width:35px;height:41px;margin-bottom:1px}
}
@media (max-width:749px){
  table.cart-items,.cart-items thead,.cart-items tbody{display:block}
  .cart-items thead tr{display:flex;justify-content:space-between}
  .cart-items thead th{display:block}
  .cart-item{display:grid;grid-template-columns:100px repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:15px;margin-bottom:35px}
  .cart-item>td{display:block}
  .cart-item__media{grid-row:1/3;width:100px}
  .cart-item__image{width:100px;max-width:100px}
  .cart-item__details{grid-column:2/4}
  .cart-item__totals{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right}
  .cart-item__quantity{grid-column:2/5}
  .cart-item__quantity-wrapper{flex-wrap:wrap}
  .main-quantity .quantity__button{width:40px;height:44px}
  .main-quantity .quantity__input{width:45px;height:44px}
  .cart-item__quantity-wrapper cart-remove-button{width:46px;height:46px}
  .cart-item__quantity-wrapper cart-remove-button .button{width:45px;height:45px;margin-bottom:1px}
}
#MainContent .cart-item__details>ul.discounts:not(:empty){display:block!important}
/* the cart page's stepper: a flex box (142x47 / 127x46), 6px rounded; remove link 41px (45px on phones) */
quantity-input.main-quantity{display:flex;position:relative;min-height:47px;border-radius:6px}
@media (max-width:749px){quantity-input.main-quantity{min-height:42px}}
.cart-item__quantity-wrapper cart-remove-button .button{min-height:35px}
@media (max-width:749px){.cart-item__quantity-wrapper cart-remove-button .button{min-height:45px}}
#MainContent .cart-item__details>p.product-option:not(:empty){display:block!important}
/* cart footer: the blocks column 350px wide at the right on desktop; Shopify's subscription consent under Check out */
@media (min-width:750px){.cart__footer>.cart__blocks{width:350px;margin-left:auto}}
#shopify-buyer-consent{display:inline-block;margin-top:.8em}
#shopify-subscription-policy-button{text-decoration:underline;cursor:pointer}
/* footer menu links on tablets (measured at 820): 10px above each link after the first */
@media (min-width:750px) and (max-width:989px){.footer-block__details-content>li:not(:first-child)>.list-menu__item--link{padding-top:10px!important}}
/* tablets (measured at 820 on /products/brazilian-green-propolis): media and info side by side, half each; the
   Facebook-style posts a 3-column row of 39.76% cards 40px apart that scrolls sideways */
@media (min-width:750px) and (max-width:989px){
  .product.product--medium>.product__media-wrapper,.product.product--medium>.product__info-wrapper{width:50%;max-width:50%}
  #MainContent .facebook-testimonials .splide--destroy-desktop .splide__track{overflow-x:auto;scrollbar-width:none}
  #MainContent .facebook-testimonials .splide--destroy-desktop .splide__list{display:grid;grid-template-columns:repeat(3,39.76%);column-gap:40px}
}
/* product grids on tablets (measured at 820 on /collections/all): two columns 40px apart */
@media (min-width:750px) and (max-width:989px){#MainContent ul.product-grid>.grid__item{width:calc(50% - 20px);max-width:calc(50% - 20px)}}

/* 2026-10-19 theme (Altea – LIVE, Shrine PRO 1.9.0) rules the measured layers miss: text sized by --font-size (x1.15 from
   750px); accordion titles leave room for the icons (6rem, 5rem in the small / large accordions); the sticky bar's
   picture 42px tall (52px from 750px) */
.font-size--desktop-auto{font-size:var(--font-size)}
@media (min-width:750px){.font-size--desktop-auto{font-size:calc(var(--font-size) * 1.15)}}
.accordion__title{display:inline-block;max-width:calc(100% - 60px);margin:0}
.accordion--small .accordion__title,.accordion--large .accordion__title{max-width:calc(100% - 50px)}
sticky-atc .sticky-atc__image{width:auto;height:auto}
sticky-atc .sticky-atc__image img{width:auto;height:42px}
@media (min-width:750px){sticky-atc .sticky-atc__image img{height:52px}}
/* the rating line keeps the body's unitless line height (1.8) at its own font size */
.rating-stars-and-text,.rating-stars-and-text>*{line-height:1.8}
@media (min-width:750px){.rating-stars-and-text.font-size--desktop-auto,.rating-stars-and-text.font-size--desktop-auto>*{line-height:1.8}}
/* the theme hides empty blocks */
a:empty,article:empty,div:empty,dl:empty,h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty,section:empty,ul:empty{display:none}
.cart-drawer__overlay:empty,cart-drawer-items{display:block}
/* headings as the theme types them (rich text on pages, policy bodies): the heading font, its scale and spacing; zero
   specificity so every measured rule wins */
:where(.h0,.h1,.h2,.h3,.h4,.h5,h1,h2,h3,h4,h5){font-family:var(--font-heading-family);font-style:var(--font-heading-style);font-weight:var(--font-heading-weight);letter-spacing:calc(var(--font-heading-scale) * var(--font-heading-letter-spacing));color:rgb(var(--color-foreground));line-height:calc(1 + var(--font-heading-line-height) / max(1,var(--font-heading-scale)));word-break:break-word}
:where(.h0){font-size:calc(var(--font-heading-scale) * 3.25rem)}
:where(.h1,h1){font-size:calc(var(--font-heading-scale) * 2.25rem)}
:where(.h2,h2){font-size:calc(var(--font-heading-scale) * 2rem)}
:where(.h3,h3){font-size:calc(var(--font-heading-scale) * 1.7rem)}
:where(.h4,h4){font-size:calc(var(--font-heading-scale) * 1.45rem)}
:where(.h5,h5){font-size:calc(var(--font-heading-scale) * 1.2rem)}
@media (min-width:750px){
  :where(.h0){font-size:calc(var(--font-heading-scale) * 4.25rem)}
  :where(.h1,h1){font-size:calc(var(--font-heading-scale) * 3rem)}
  :where(.h2,h2){font-size:calc(var(--font-heading-scale) * 2.4rem)}
  :where(.h3,h3){font-size:calc(var(--font-heading-scale) * 1.8rem)}
  :where(.h5,h5){font-size:calc(var(--font-heading-scale) * 1.3rem)}
}
:where(blockquote){font-style:italic;border-left:.2rem solid rgba(var(--color-foreground),.2);padding-left:1rem}
@media (min-width:750px){:where(blockquote){padding-left:1.5rem}}
/* the drawer's close button: centred on the header row (measured open at 1440 and 390: top 50%, lifted by half its height) */
cart-drawer .drawer__header .drawer__close{top:50%;bottom:auto}
/* steppers: the ring from the block's --border-width / --border-color; minus greyed at the minimum (Dawn: .disabled) */
quantity-input.cart-quantity{border:var(--border-width,0) solid var(--border-color,transparent)}
.quantity__button.disabled{cursor:not-allowed;opacity:.5}
/* the cart page's last line keeps no gap below it (Dawn) */
@media (max-width:749px){.cart-items .cart-item:last-child{margin-bottom:0}}
/* the cart page's line table on tablets (measured at 820 with lines): 80px picture, details 280px (40px in), quantity 40px in */
@media (min-width:750px) and (max-width:989px){
  #MainContent .cart-item__media{width:80px}
  #MainContent .cart-item__image{width:80px;max-width:100%}
  #MainContent .cart-item__details{width:280px}
  #MainContent .cart-item__quantity{padding-left:40px}
}

/* the header's country picker (the theme's localization-form v2; list shown by public/_pq/site.js): the theme's own rules
   for the open list */
.disclosure__item{position:relative}
.menu-drawer .localization-form-v2 .disclosure__list-wrapper{right:unset;left:0}
.menu-drawer .localization-form-v2 .disclosure__list-wrapper--language{right:0;left:unset}
.disclosure__list-wrapper{border-width:var(--popup-border-width);border-style:solid;border-color:rgba(var(--color-foreground),var(--popup-border-opacity));overflow:hidden;position:absolute;bottom:100%;transform:translateY(-1rem);z-index:2;background-color:rgb(var(--color-background));border-radius:var(--popup-corner-radius);box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity))}
.disclosure__list{position:relative;overflow-y:auto;font-size:1.4rem;padding-bottom:.5rem;padding-top:.5rem;scroll-padding:.5rem 0;min-height:8.2rem;max-height:19rem;max-width:22rem;min-width:12rem;width:max-content}
.disclosure__link{display:block;padding:.5rem 2.2rem;text-decoration:none;line-height:calc(1 + .8 / var(--font-body-scale))}
.localization-form-v2{flex-shrink:0}
@media screen and (max-width:999px){.localization-form-v2 .disclosure__list-wrapper{right:-2rem}}
.localization-selector+.disclosure__list-wrapper{margin-left:1rem;opacity:1;animation:animateLocalization var(--duration-default) ease}
.localization-v2__button{display:flex;align-items:center;gap:7px;padding:.5rem 0}
.localization-v2__button svg{width:10px;height:10px;flex-shrink:0}
.localization-v2__button img{flex-shrink:0}
.disclosure__link:hover,.localization-v2__button:hover span{text-decoration:underline;text-underline-offset:.3rem}
.localization-form-v2 .disclosure__list-wrapper{bottom:auto;top:100%;transform:translateY(.5rem)}
.localization-form-v2--images-original .localization-form-v2__image{height:1.4rem;width:auto}
.localization-form-v2--images-circle .localization-form-v2__image,.localization-form-v2--images-square .localization-form-v2__image{--size:2rem;width:var(--size);height:var(--size);object-fit:cover}
.localization-form-v2--images-circle .localization-form-v2__image{border-radius:50%}
.localization-form-v2 .disclosure__link{padding:.5rem 1.3rem;display:flex;align-items:center;gap:7px}
.localization-form-v2 .localization-form{margin:0;padding:0;display:block}
.localization-form-v2+.localization-form-v2{margin-left:1.2rem}
@media screen and (min-width:990px){.localization-form-v2{padding-right:.6rem}}
@media screen and (min-width:750px){.localization-v2__button .localization-form-v2__image{--size:2.4rem}}
@media screen and (max-width:749px){.localization-v2__button{gap:5px}}
@media screen and (max-width:749px){.localization-v2__button .localization-form-v2__image{--size:2.2rem}}
.disclosure__list-wrapper[hidden]{display:none}
/* compare-at prices (since 2026-10-19 13:14): the theme's sale-state rules (base.css), unused by every page before; the
   badge's 1px border (theme .badge{border:1px solid …}) */
.price--on-sale .price__sale{display:initial;flex-direction:row;flex-wrap:wrap}
.price-layout.price--on-sale .price__sale{display:flex;column-gap:.6rem;align-items:baseline}
.card__badge .badge{border-style:solid;border-width:1px}
.price--on-sale .price__badge-sale{display:inline-flex}

/* header: the menu stays on one row whatever the picker shows. Shrine's middle-left grid is auto 1fr auto, so a long
   country label ("U.S. Outlying Islands | USD $", 45px wider than "United States | USD $") took the 4px the menu needed
   at 1200px and pushed "Manage Subscription" onto a second row (Ryan, 2026-10-19) */
.header--middle-left .header__inline-menu>.list-menu--inline{flex-wrap:nowrap}
.header--middle-left .header__inline-menu .list-menu__item{white-space:nowrap}