/** Shopify CDN: Minification failed

Line 2668:68 The "-" operator only works if there is whitespace on both sides

**/
/*custom CSS*/
html, body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

.d-none {
  display: none !important;
}

span,
.text-lg {
  font-family: "Satoshi";
}

.heading,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.prose :is(h1, h2, h3, h4, h5, h6) {
  font-family: Gelica;
  font-weight: 500;
}

h1,
.h1 {
  font-family: Gelica;
  font-size: 44px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

h2,
.h2 {
  font-family: Gelica;
  font-size: 38px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

h3,
.h3 {
  font-family: Gelica;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

h5,
.h5 {
  font-size: 24px;
  font-family: Gelica;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

p {
  font-family: Satoshi;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/*header*/

/*.header, .header__wrapper  {
  background-color: #312325;
} */

/*.slideshow__slide .prose {
  color: #EAE0D6;
}*/

/* store-header.is-filled .header__wrapper {
  background-color: #eae0d6;
  color: #312325;
}

.header__pdp {
  background-color: #eae0d6;
  color: #312325;
}

.header__pdp img {
  color: #312325;
  fill: #312325;
}*/

.dropdown-menu {
 /* background-color: #eae0d6;*/
  color: #312325;
  border-radius: 8px;
  border: 0;
}

.drawer::part(content) {
  border-radius: 12px;
}

.panel__wrapper span {
  font-family: "Gelica";
  font-size: 24px;
}

.panel__wrapper .text-with-icon span {
  font-family: "Satoshi";
  font-size: 16px;
}

.panel-footer__localization-wrapper {
  display: grid;
  justify-content: right;
  font-family: "Satoshi";
  font-size: 16px;
}

/* Hero Slide */

p,
span {
  font-family: "Satoshi", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.button,
.btn,
.button--xl {
  font-family: "Satoshi", sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 10px;
}

.content-over-media > :is(img, video, iframe, svg, video-media) {
  height: 100%;
}

#block-template--18230418735372__018240b3-044d-4dff-bf07-b752c37f9e88-image-1
  .prose {
  padding-bottom: 20px;
}

/* Logo scroll-area */

.image-link-blocks {
  align-items: center;
  width: 100%;
}

.image-link-blocks .image-link-blocks__inner {
  margin-right: 20px;
  padding: 0;
  max-height: 60px;
  width: fit-content;
  justify-content: center;
}

.image-link-blocks .image-link-blocks__item {
  justify-content: center;
  display: flex;
}

.image-link-blocks .image-link-blocks__inner img {
  max-height: 60px;
  width: auto;
}

/*Hot Spots*/

.shopify-section--hot-spots
  .content-over-media
  > :is(img, video, iframe, svg, video-media) {
  border-radius: 20px;
}

.shopify-section--hot-spots .hot-spot__dot {
  background-color: #312325;
  color: #f0e7e0;
  opacity: 1;
}

/* image with text overlay */

.shopify-section--image-with-text-overlay .prose {
  color: #f0e7e0;
}

/* media grid */

.media-grid .prose {
  color: #f0e7e0;
}

/*featured Collection*/
.circle-chevron {
  background-color: #59886b;
  color: #eae0d6;
}

.product-quick-add__button {
  font-size: 18px !important;
}

/*Product Card*/

.product-card {
  border-radius: 12px;
}
/*.product-card__info{
    max-width: 300px;
    margin-right: auto;
    margin-left: auto; } */

/*.product-card unit-price {
  display:none;
}*/

.product-card__image:not(
    :lang(ae),
    :lang(ar),
    :lang(arc),
    :lang(bcc),
    :lang(bqi),
    :lang(ckb),
    :lang(dv),
    :lang(fa),
    :lang(glk),
    :lang(he),
    :lang(ku),
    :lang(mzn),
    :lang(nqo),
    :lang(pnb),
    :lang(ps),
    :lang(sd),
    :lang(ug),
    :lang(ur),
    :lang(yi)
  ) {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.ruk-icon-percentage-star--100:before,
.ruk-icon-percentage-star--75:before {
  color: #ec91d8;
}

.ruk-icon-percentage-star--0 {
  color: #ec91d8;
}

.ruk-icon-percentage-star--50 {
  color: #ec91d8;
}

.ruk-rating-snippet-count {
  font-family: "Satoshi";
  color: #312325;
}

.ruk_rating_snippet i {
  font-family: "Satoshi";
}

.ruk_rating_snippet .ruk-rating-snippet-count {
  text-align: center;
  font-family: "Satoshi" !important;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-left: 4px;
}

scroll-carousel .product-card__title {
  font-family: Gelica;
  max-width: 200px;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.price-list .text-subdued {
  font-family: "Satoshi", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #312325;
}

price-list .text-on-sale {
  color: #ec91d8;
  font-family: "Satoshi";
}

.shopify-section--featured-collection
  .product-card
  .product-card__info
  .price-list {
  align-items: center !important;
}

.shopify-section--featured-collection
  .product-card
  .product-card__info
  .price-list
  .text-sm {
  font-size: 12px;
}

.shopify-section--featured-collection
  .product-card
  .product-card__info
  .price-list
  .line-through {
  margin-left: 0;
}

.shopify-section--main-product sale-price.text-lg {
  font-size: 16px !important;
  font-family: "Satoshi";
}

.shopify-section--main-product unit-price.text-subdued {
  font-family: "Satoshi";
  font-size: 6px;
  margin-right: auto;
  margin-left: auto;
  margin-top: -3px;
}

.shopify-section--main-product .variant-picker__option-info {
  font-family: "Satoshi";
  display: none;
}

.produkt_price-per-day {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  height: 40px;
  background-color: #f0e7e0;
  border-radius: 0 100px 100px 0;
  padding: 2px 16px;
}

.produkt_price-per-day p {
  font-size: 14px;
}

.rating-with-text {
  gap: 0;
  align-items: center;
}

.rating-with-text price-list {
  padding: 2px 16px;
  /* border-radius: 100px 0 0 100px; */
  border-radius: 100px;
  height: 40px;
}

.produkt-kurzbeschreibung {
  /* max-width: 80%; */
  /* margin: 6px auto 10px auto; */
  margin-block: 6px 10px;
}

.produkt-kurzbeschreibung p {
  font-family: Satoshi;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  overflow-wrap: break-word;
}

.w-full{
  width: 100%;
}

blockquote.blockquote.h3 {
  font-size: 28px;
}

/*multiple images with text */
.multiple-images-with-text__image-list > img {
  border-radius: 12px;
}

.multiple-images-with-text__content-with-nav .circle-button {
  background-color: #eae0d6;
  color: #312325;
}

/* featured Product */

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .product {
  display: flex;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #dcd2c9;
  gap: 20px;
}

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .product
  .h5 {
  font-size: 20px;
}

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .product
  .button,
#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .product
  .btn,
#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .product
  .button--xl {
  border-radius: 100px;
  padding: 8px 16px;
  width: 100%;
  font-size: 12px;
  margin-bottom: 0;
  line-height: normal;
}

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .text-on-sale,
#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .text-subdued,
#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .text-lg {
  font-size: 14px;
  font-family: "satoshi";
}

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .badge--on-sale {
  display: none;
}

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  img {
  width: 74px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 6px;
}

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .product-info
  > *
  + * {
  margin-block-start: 0;
  margin-block-end: 0;
}
#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .product-info {
  text-align: left;
  align-items: flex-start;
}

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .rating-with-text {
  margin: 2px 0;
}

#shopify-section-template--18322016010508__9fe809d6-1aeb-4724-a654-3cf622796fd2
  .rating-with-text
  price-list,
.cart-drawer__inner price-list {
  height: fit-content;
  background-color: transparent;
  padding-left: 0;
  display: block;
}

.cart-drawer__inner price-list .text-on-sale {
  font-size: 16px;
  color: #bb0606;
}

#shopify-section-template--18322016010508__32117dbd-2965-4aa2-8970-1f2629ff8764 {
  border-radius: 12px;
  margin: 20px;
}

.line-item-property-wrapper {
  justify-content: center;
}

.gravur_img {
  object-position: 0 50%;
  height: 60px;
  width: 100%;
  object-fit: cover;
  object-position: 0 35%;
  border-radius: 12px;
  margin-top: -16px;
}

/*.cart-drawer .cart-drawer__recommendations .recommendation-featured-media img {
  object-fit: initial !important;
} */

.cart-drawer .badge {
  margin-top: 10px;
}

/*.section.section-full.bg-custom.text-custom {
  border-radius: 12px;
}*/

.product-list__promo span {
  font-size: 20px;
}

.shopify-section .shopify-section--press .section--stack {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/*custom-icon-text Section*/
.icons-with-headings-and-text .icons-with-text {
  flex-direction: row;
  justify-content: left;
  width: 100%;
}

.icons-with-headings-and-text .icons-with-text .icon {
  margin-right: 20px;
}

.icons-with-headings-and-text .prose p {
  font-size: 14px;
  text-align: left;
}

.icons-with-headings-and-text .icons-with-text .h5 {
  font-size: 20px;
}

#icons-with-headings-and-text {
  border-radius: 12px !important;
}

.media-with-text__item {
  margin-bottom: 20px;
}

.media-with-text__media {
  border-radius: 12px;
}

.icons-with-text {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.icons-with-text .icon {
  margin-bottom: 16px;
}

.text-with-icons__item {
  gap: 12px;
}

.shopify-section--icons-with-text {
  margin: 20px;
  border-radius: 12px !important;
}

.icons-with-headings-and-text {
  border-radius: 16px;
}

.icon-text__container {
  display: flex;
  width: 100%;
  align-items: center;
}

.icon-text__container svg {
  margin-right: 20px;
}

.icon-text__container .h4 {
  font-size: 20px;
}

.icon-text__container p {
  font-size: 14px;
}

/*Accordion-Box*/
.accordion-box {
  border-radius: 12px;
  border: 1px solid #dcd2c9;
  background-color: transparent;
}

.accordion-box .circle-chevron {
  background-color: #dcd2c9;
  color: #312325;
}

.accordion-box .accordion__toggle span {
  /* font-family: "Gelica"; */
}

#shopify-section-template--18322016010508__3f74967a-9791-48e9-9e33-da023c522303
  .multiple-images-with-text__content-with-nav
  .circle-button {
  background-color: #312325;
  color: #eae0d6;
}

/* Ãœber uns Section*/
.shopify-section--media-with-text .media-with-text__item {
  padding: 12px !important;
  background-color: #f0e7e0;
  border-radius: 12px !important;
}

.media-with-text__content {
  background-color: #f0e7e0;
  color: #312325;
  padding: 20px !important;
}

.media-with-text__media img {
  border-radius: 12px;
}

.media-with-text__item .h2 {
  font-size: 44px;
  color: #312325;
}
/*product-recommendation*/

#shopify-section-template--18322016010508__main
  .horizontal-product-list-carousel
  > .horizontal-product-list:not(.separate) {
  border-radius: 12px;
}

#shopify-section-template--18322016010508__main
  .horizontal-product-list-carousel
  > .horizontal-product-list {
  display: flex;
}

#shopify-section-template--18322016010508__main product-recommendations .block {
  width: 100% !important;
  text-align: left;
}

#shopify-section-template--18322016010508__main product-recommendations {
  width: 100% !important;
}

#shopify-section-template--18322016010508__main product-recommendations span {
  font-family: "Gelica";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

#shopify-section-template--18322016010508__main
  product-recommendations
  .recommendation-featured-media
  img {
  height: 100%;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 6px;
}

#shopify-section-template--18322016010508__main
  product-recommendations
  .recommendation-featured-media {
  width: 40%;
  height: 100%;
}

#shopify-section-template--18322016010508__main
  product-recommendations
  .horizontal-product__info {
  width: 100%;
  padding-left: 10px;
}

#shopify-section-template--18322016010508__main
  product-recommendations
  .v-stack {
  text-align: left;
}

#shopify-section-template--18322016010508__main
  product-recommendations
  .horizontal-product {
  padding: 12px;
}

#shopify-section-template--18322016010508__main
  product-recommendations
  .horizontal-product {
  width: 100%;
  height: 100%;
}

#shopify-section-template--18322016010508__main
  product-recommendations
  .button {
  border-radius: 100px;
  font-size: 12px;
  font-family: "Satoshi";
  padding: 6px 16px;
  background-color: #59886b;
  color: #eae0d6;
  margin-bottom: 0;
}

.quick-buy-drawer__variant .price-list-pdp {
  background-color: transparent;
  padding-left: 0;
}

/*review.io* global*/

.CarouselWidget-prefix .CarouselWidget .CarouselWidget__header .header__inner {
  background-color: #312325 !important;
  background-image: none !important;
}

.CarouselWidget-prefix
  .CarouselWidget
  .R-ReviewsList
  .R-ReviewsList__item
  .item__inner {
  background-image: none !important;
  background-color: #f0e7e0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #312325 !important;
}

.CarouselWidget-prefix
  .R-BadgeElement
  .R-BadgeElement__icon
  .cssVar-badgeElement__icon {
  color: #03b0ee !important;
}

.CarouselWidget-prefix
  .CarouselWidget
  .CarouselWidget__header
  .R-RatingStars
  .R-RatingStars__stars
  .stars__icon.ricon-percentage-star--100 {
  color: #ffe100 !important;
}

.CarouselWidget-prefix
  .CarouselWidget
  .CarouselWidget__header
  .R-RatingStars
  .R-RatingStars__stars
  .stars__icon {
  --override-header-star-color: #ffe100 !important;
}

.CarouselWidget-prefix .header__inner {
  border-radius: 12px !important;
}

.CarouselWidget-prefix .CarouselWidget .R-TextBody--xxxs {
  margin-bottom: 20px !important;
}

.CarouselWidget .header__inner .cssVar-header__heading {
  font-family: Gelica;
  font-size: 24px !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: normal;
}

.CarouselWidget .header__inner .cssVar-header__subheading {
  font-family: Satoshi;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: normal;
}

.CarouselWidget .item__inner .cssVar-authorName {
  font-family: Gelica;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: normal;
}

.CarouselWidget .item__inner .cssVar-badgeElement__text,
.CarouselWidget .item__inner .R-TextBody--xxxs {
  font-family: Satoshi;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: normal;
}

.CarouselWidget .item__inner .R-TextBody--xxs {
  font-family: Satoshi;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: normal;
}

.CarouselWidget .item__inner .R-TextBody--xxxxs {
  font-family: Satoshi;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: normal;
}

/*Collection Page*/

.product-list {
  gap: 20px 16px;
}

.collection__results .product-card__title a {
  font-family: Gelica;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.rounded-sm {
  border-radius: 12px;
}

.sort-by-facet .circle-chevron {
  background-color: rgba(49, 35, 37, 0.1);
  color: #312325;
}

.sort-by-facet .bold {
  font-family: Satoshi;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.collection__top-bar .reversed-link {
  font-family: Satoshi;
  font-size: 18px;
}

.shopify-section--main-collection
  .product-card
  .product-card__info
  .price-list {
  align-items: center !important;
}

.shopify-section--main-collection
  .product-card
  .product-card__info
  .price-list
  .text-sm {
  font-size: 12px;
}

.shopify-section--main-collection
  .product-card
  .product-card__info
  .price-list
  .line-through {
  margin-left: 0;
}

.shopify-section--collection-list
  .collection-list
  .collection-card
  .collection-card__content
  .h2 {
  color: #f0e7e0 !important;
}

/*PDP*/

.product-info {
  display: flex;
  flex-direction: column;
  background-color: #F7F3EF;
  border-radius: 20px;
  /* align-items: center;
  text-align: center; */
}
scroll-shadow {
  display: none;
}

.product-info__buy-buttons {
  width: 100%;
}

.trust-fact {
  align-items: center;
  width: fit-content;
  height: fit-content;
  flex-shrink: 0;
  border-radius: 100px !important;
  background: #fff;
  padding: 8px;
  z-index: 1;
  justify-content: space-evenly;
  margin-bottom: 10px;
}

@media screen and (max-width: 999px) {
  .trust-fact {

  }
}

@media screen and (min-width: 1000px) {
  .product-info .trust-fact {
    display: flex;
  }
}

.trust-fact .icon {
  --size: 20px;
  width: var(--size);
  flex: 0 0 var(--size);
}

.add-to-cart-note {
  width: fit-content;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  /* margin-left: auto; */
}

.add-to-cart-note .spunch-icon {
  padding-right: 10px;
  padding-left: 10px;
}

.add-to-cart-note .atc-note-text {
  padding-right: 10px;
}

.trust-fact p {
  font-size: 14px;
  padding-right: 10px;
  padding-left: 10px;
}

.shopify-section--main-cart .cart-form__totals .h5 {
  font-size: 20px;
}

#shopify-block-34486a45-fbb1-44a5-ac02-20ad918481b0 {
  margin: 20px auto 12px auto;
}

.ruk_rating_snippet {
  color: #ec91d8;
}

.truncate-text {
  font-family: "Gelica";
  font-size: 18px;
}

.product-info__variant-picker {
  margin-top: 0;
}

.product .variant-picker .variant-picker__option-values {
  justify-content: center;
}

.product .variant-picker > div:empty {
  display: none;
}

.price-list-pdp {
  flex-direction: row;
  justify-content: center;
  align-content: center;
  background-color: #f0e7e0;
  padding: 0 16px;
  border-radius: 100px 0 100px 0;
  border-right: solid 2px #eae0d6;
}

compare-at-price.text-subdued.line-through {
  margin-left: 8px;
  font-size: 14px;
}

.product-info__price .rating-with-text {
  align-content: center;
  margin-bottom: 8px;
  gap: 12px;
}

.product-info__price .text-subdued {
  font-size: 12px;
}

.shopify-section--accordion-content p {
  font-size: 16px;
}

/*product-recommendation*/

.product-info__complementary-products
  .horizontal-product-list-carousel
  > .horizontal-product-list:not(.separate) {
  border-radius: 12px;
}

.product-info__complementary-products
  .horizontal-product-list-carousel
  > .horizontal-product-list {
  display: flex;
}

.product-info__complementary-products product-recommendations .block {
  width: 100% !important;
  text-align: left;
}

.product-info__complementary-products product-recommendations {
  width: 100% !important;
}

.product-info__complementary-products span {
  font-family: "Gelica";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.product-info__complementary-products .recommendation-featured-media img {
  height: 100%;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 6px;
}

.product-info__complementary-products .recommendation-featured-media {
  width: 40%;
  height: 100%;
}

.product-info__complementary-products .horizontal-product__info {
  width: 100%;
  padding-left: 10px;
}

.product-info__complementary-products .v-stack {
  text-align: left;
}

.product-info__complementary-products .horizontal-product {
  padding: 12px;
}

.product-info__complementary-products .horizontal-product {
  width: 100%;
  height: 100%;
}

.product-info__complementary-products .horizontal-product__cta {
  display: flex;
  align-items: left;
}

.product-info__complementary-products .horizontal-product__cta .button {
  border-radius: 100px;
  font-size: 12px;
  font-family: "Satoshi";
  padding: 6px 16px;
  background-color: #59886b;
  color: #eae0d6;
  margin-bottom: 0;
  margin-left: 0;
}

.quick-buy-drawer__variant .price-list-pdp {
  background-color: transparent;
  padding-left: 0;
}

/*footer*/

.footer .circle-chevron-secondary {
  background-color: #312325;
  color: #eae0d6;
}

.footer__copyright a {
  text-decoration: underline;
}

.footer .input:before,
.footer .input:after {
  border-color: #eae0d6;
}

.footer .h5 {
  font-size: 20px;
}

.footer p {
  color: #eae0d6;
}

.footer .footer__block--menu p {
  font-family: "Gelica";
  font-size: 20px;
}

.footer .footer__block--menu li a {
  font-family: "Satoshi";
  font-weight: normal;
}

#shopify-section-template--18322016928012__67b02473-88ed-4695-a922-55749e9b3ce1 {
  padding-bottom: 50px !important;
}

.facets__floating-filter button {
  border-radius: 100px;
}

.icon-text__text {
  font-size: 14px;
}

/* -------------Media Queries--------------- */

@media screen and (max-width: 699px) {
  .product-gallery__media-list-wrapper {
    overflow: clip;
  }
  .product-gallery__media-list {
    --product-gallery-media-list-grid: auto / auto-flow 100%;
    --product-gallery-media-list-gap: 0px;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.product-gallery .product-gallery__zoom {
  top: auto !important;
  bottom: 24px !important;
  right: 20px !important;
}

.product-gallery__nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.1875rem !important;
  height: 2.1875rem !important;
  transition: opacity 0.2s ease;
}

.product-gallery__nav-button[disabled] {
  opacity: 0;
  pointer-events: none;
}

.product-gallery__nav-button--prev {
  left: 20px;
}

.product-gallery__nav-button--prev svg {
  transform: rotate(180deg);
}

.product-gallery__nav-button--next {
  right: 20px;
}

@media screen and (min-width: 1000px) {
  .product-gallery__nav-button {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
}

.product-gallery__cursor {
  display: none !important;
}

@media screen and (min-width: 700px) and (max-width: 1000px) {
  .content-over-media .prose {
    max-width: 350px;
  }

  .header__logo-image {
    width: 80px;
  }
}

@media screen and (max-width: 999px) {
  /* Verhindert section-boxed (eingerückt + abgerundet) auf Mobile für die Buy Box */
  .shopify-section--main-product .section-boxed {
    border-radius: 0;
    box-shadow: none;
    margin-inline-start: 0;
    margin-inline-end: 0;
    --container-outer-width: 0px;
  }

  /* Section-Horizontal-Padding entfernen, damit product-info volle Breite füllt */
  .shopify-section--main-product .section {
    padding-inline-start: 0;
    padding-inline-end: 0;
    overflow-x: clip;
  }

  /* Hintergrundfarbe für Thumbnail-Leiste auf Mobile – volle Breite */
  .shopify-section--main-product .product-gallery__thumbnail-list-wrapper {
    padding: 8px 20px;
    width: 100%;
  }

  /* Gaps zwischen Hauptbild, Thumbnails und Buy Box entfernen */
  .shopify-section--main-product .product-gallery {
    gap: 0;
  }

  .shopify-section--main-product .product-gallery__ar-wrapper {
    gap: 0;
  }

  .shopify-section--main-product .product {
    gap: 0;
  }

  .product-info {
    padding: 20px 15px;
    border-radius: 20px;
    background-color: #F0E7E0;
    margin-inline: 16px;
  }

  .product-info .product-info__variant-picker {
    margin-inline: -20px;
  }

  .recharge-form__section-variant-price,
  .recharge-form__section-price,
  .recharge-form__section-price--compared {
    white-space: nowrap;
  }

  .recharge-form__section-variant-title {
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
  }

  .trust-fact {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 4px 8px;
    margin-bottom: 0;
  }

  .trust-fact .icon {
    width: 18px;
  }

  .trust-fact p {
    font-size: 10px;
    padding-inline: 7px 2px;
    margin-bottom: 1px;
  }
}

@media screen and (min-width: 1000px) {
  .p-s > p {
    font-size: 20px;
    font-family: "Satoshi";
  }
  p {
    font-size: 20px;
    font-family: "Satoshi";
  }

  h1,
  .h1 {
    font-size: 76px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-family: "Gelica";
  }

  h2,
  .h2 {
    font-size: 76px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-family: "Gelica";
  }

  h3,
  .h3 {
    font-size: 58px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-family: "Gelica";
  }

  h5,
  .h5 {
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-family: "Gelica";
  }

  .header__logo-image {
    width: 80px;
  }

  .image-link-blocks {
    justify-content: space-evenly;
  }

  /*Review.io*/

  .CarouselWidget-prefix .CarouselWidget .cssVar-header__heading {
    font-size: 24px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
  }

  .CarouselWidget-prefix .CarouselWidget .cssVar-authorName {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
  }

  .CarouselWidget-prefix .CarouselWidget .R-TextBody--xxxs {
    margin-bottom: 20px !important;
  }

  .content-over-media > :not(img, video, iframe, svg, video-media) {
    max-width: 450px;
  }

  .shopify-section--featured-collection .h2 {
    font-size: 48px;
  }

  .shopify-section--featured-collection span {
    font-size: 20px;
  }

  .accordion-box .accordion__toggle span {
    font-size: 20px;
  }

  .shopify-section--hot-spots
    .content-over-media
    > :is(img, video, iframe, svg, video-media) {
    height: 600px;
  }

  #shopify-section-template--18270794711308__fb17a4bf-5c48-4f24-813f-e1a1e5c844e8
    .prose {
    text-align: center;
  }

  #shopify-section-template--18270794711308__fb17a4bf-5c48-4f24-813f-e1a1e5c844e8
    p {
    margin-right: auto;
    margin-left: auto;
  }

  .button,
  .btn,
  .button--xl {
    font-size: 18px !important;
  }

  .rich-text .rich-text__wrapper {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
  }
  .rich-text .prose {
    text-align: center;
  }

  .shopify-section--featured-collection .h2 {
    font-size: 48px;
  }
  .shopify-section--featured-collection .product-card__title {
    font-size: 36px;
  }

  .shopify-section--featured-collection .produkt-kurzbeschreibung p {
    font-size: 18px;
    overflow-wrap: break-word;
  }
  .shopify-section--featured-collection sale-price,
  .shopify-section--featured-collection span {
    font-size: 20px;
  }

  .scrolling-text__text {
    /* font-size: 120px;
    padding-top:60px !important; */
  }

  .shopify-section--multiple-images-with-text .multiple-images-with-text {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .shopify-section--multiple-images-with-text p {
    font-size: 20px;
    margin-top: 10px !important;
    width: 600px;
  }

  .shopify-section--multiple-images-with-text .h1 {
    font-size: 76px;
  }

  .shopify-section--multiple-images-with-text .circle-button {
    width: 44px;
    height: 44px;
    margin-top: -20px;
  }

  .shopify-section--media-with-text .media-with-text__item {
    padding: 20px !important;
  }

  .shopify-section--media-with-text .media-with-text__icon {
    width: 28px;
  }

  .shopify-section--accordion-content {
    display: flex;
  }

  .shopify-section--accordion-content .section-stack--horizontal {
    align-items: center;
  }

  .shopify-section--accordion-content .section-stack__intro {
    max-width: 480px;
  }

  .shopify-section--accordion-content .section-stack__intro p {
    font-size: 20px;
  }

  .shopify-section--accordion-content .section-stack__intro .h2 {
    font-size: 56px;
  }

  .media-with-text__content .prose {
    max-width: 500px;
  }

  .media-with-text__content .prose p {
    font-size: 20px;
    color: #312325;
  }

  .shopify-section--media-with-text .prose .h2 {
    font-size: 76px;
    color: #312325;
  }

  .shopify-section--text-with-icons .section-boxed {
    border-radius: 16px !important;
  }

  .shopify-section--text-with-icons p {
    font-size: 20px;
  }

  .shopify-section--text-with-icons .h5 {
    font-size: 32px;
  }

  .content-over-media .prose {
    max-width: 550px;
  }

  .product-list .product-list__promo {
    grid-column: span 1;
    grid-column: 3;
  }

  .product-list .product-list__promo p {
    font-size: 22px;
  }

  .product-list .product-list__promo .h3 {
    font-size: 40px;
  }

  .collection__results .product-card__title a {
    font-family: Gelica;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .produkt-kurzbeschreibung p {
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    overflow-wrap: break-word !important;
  }

  .price-list .text-subdued {
    font-size: 20px;
  }

  .ruk_rating_snippet i {
    font-size: inherit;
    font-family: "Satoshi";
    font-size: 20px;
  }

  .ruk-icon-percentage-star--100:before,
  .ruk-icon-percentage-star--75:before {
    font-size: 20px;
  }

  /* #shopify-block-34486a45-fbb1-44a5-ac02-20ad918481b0 {
  margin: 20px auto -10px auto;
} */

  .ruk_rating_snippet .ruk-rating-snippet-count {
    font-size: 14px;
    font-family: "Satoshi";
  }

  /* PDP*/

  product-recommendations {
    display: none !important;
  }

  .trust-fact {
    margin-top: -5px;
    background: rgba(255, 255, 255, .5);
  }

  .trust-fact p {
    font-size: 14px !important;
  }

  .product-info {
    background-color: #F7F3EF;
    padding: 32px;
    border-radius: 20px;
  }

  .price-list-pdp {
    background-color: #eae0d6;
    font-family: "Satoshi";
    font-size: 20px;
  }

  .shopify-section--main-product sale-price.text-lg {
    font-size: 20px !important;
  }

  .produkt_price-per-day {
    background-color: #eae0d6;
    border-left: solid 2px #f0e7e0;
  }

  .shopify-section--main-product .rounded {
    border-radius: 20px !important;
  }

  .shopify-section--main-product .rounded-sm {
    border-radius: 6px !important;
  }

  .shopify-section--main-product .section p {
    font-size: 18px;
  }

  .shopify-section--main-product p.text-sm {
    font-size: 13px;
  }

  .shopify-section--main-product .produkt-kurzbeschreibung p {
    /* font-size: 20px; */
  }

  .shopify-section--main-product .variant-picker__option-info {
    font-family: "Satoshi";
    display: none;
  }

  .shopify-section--main-product .section .h5 {
    font-size: 28px;
  }

  .shopify-section--main-product .section .h3 {
    font-size: 40px;
  }

  blockquote.blockquote.h3 {
    font-size: 48px;
  }

  .shopify-section--icons-with-text .icons-with-headings-and-text .prose p {
    font-size: 18px;
  }

  .ruk_rating_snippet .ruk-rating-snippet-count {
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-size: 18px !important;
  }

  impact-text {
    font-size: 80px;
    /*background: linear-gradient(to right, rgba(49, 35, 37, 1), rgba(49, 35, 37, 0));
  -webkit-background-clip: text;
  color: transparent; */
  }

  .impact-text__content p {
    font-size: 20px;
  }

  .icon-text__text p {
    font-size: 18px;
  }

  .icons-with-headings-and-text .h4 {
    font-size: 28px !important;
  }

  #icons-with-headings-and-text {
    border-radius: 16px !important;
  }

  #shopify-section-template--18322016928012__5e57ea58-e343-4439-a8cb-70b3f5590ae4
    .rich-text__wrapper {
    max-width: fit-content;
  }

  .footer__wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .footer__wrapper img {
    max-width: 320px !important;
  }

  .footer__wrapper .h5,
  .footer .footer__block--menu p {
    font-size: 28px;
  }

  /* .footer__block-list {
  justify-content: center;

}
*/
}
/*#shopify-section-template--18322016010508__main .product-info {
  background-color: #F0E7E0;
  padding:32px;
  border-radius:12px;
} */

@media screen and (min-width: 1150px) {
  /* .header__wrapper {
    padding: 30px 160px 0 160px;
  }*/

  .header__wrapper a,
  .header__wrapper summary {
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .header__wrapper .header__main-nav {
    margin-right: auto;
    margin-left: auto;
  }

  .header__wrapper .header__link-list {
    align-items: center;
  }

  .floating-controls-container {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

.footer .klaviyo-form {
  max-width: 100% !important;
}
.footer .klaviyo-form input {
  border-radius: var(--rounded-input) !important;
  height: calc(var(--input-height) + 0.625rem) !important;
  padding-inline: var(--input-padding-inline) !important;
  border-color: rgb(var(--text-color) / 0.12) !important;
  color: rgb(240, 231, 224) !important;
  box-shadow: unset !important;
  font-family: inherit !important;
  font-size: 20px !important;
}
.footer .klaviyo-form .needsclick input:hover {
  border-color: rgb(240, 231, 224) !important;
}
.footer .klaviyo-form input:focus {
  border-color: currentColor !important;
  box-shadow: inset 0 0 0 1px !important;
}
.footer .klaviyo-form input::placeholder {
  opacity: 0.5 !important;
  font-size: 20px !important;
  font-family: inherit !important;
}
.footer .klaviyo-form button {
  font-size: 20px !important;
  font-weight: 400 !important;
  height: calc(var(--input-height) + 0.625rem) !important;
  font-family: inherit !important;
  border-radius: var(--rounded-input) !important;
  padding-inline: var(--input-padding-inline) !important;
  box-sizing: border-box;
  box-shadow: unset !important;
}
.footer .klaviyo-form p {
  line-height: 1.4;
  text-align: left !important;
  font-family: inherit !important;
}
.footer .klaviyo-form span {
  font-family: inherit !important;
}

@media screen and (max-width: 767px) {
  .footer .klaviyo-form input::placeholder,
  .footer .klaviyo-form button,
  .footer .klaviyo-form input {
    font-size: 16px !important;
  }
}

.shipping_info_main {
  width: 100%;
  position: relative;
  margin: 0px 0 0px;
}
.cart-drawer .progress-bar {
  background-color: #f0e7e0;
  height: 7px;
  width: 100%;
  display: inline-block;
  border-radius: 100px;
}
.progress-bar-marker.shipping_marker {
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  top: 6px;
  margin-left: -8px;
  width: 26px;
  height: 26px;
  z-index: 11;
  position: absolute;
  transition: left 0.35s ease-out;
  left: calc((var(--amountTotalPrice) * 100) / var(--treshold) - 20px);
}
.progress-bar-marker.first_marker.progress-bar-marker {
  position: absolute;
  top: 6px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--body-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: left 0.35s ease-out;
  left: calc((var(--amountTotalPrice) * 100) / var(--treshold) - 20px);
  z-index: 10;
}
.progress-bar-marker.second_marker {
  position: absolute;
  top: 8px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--body-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: left 0.35s ease-out;
  left: calc((var(--amountTotalPrice) * 100) / var(--treshold) - 20px);
  z-index: 10;
}
.cart-benefit__container {
  display: flex;
  background: #f0e7e0;
  width: 100%;
  margin: 0 0 20px;
  align-items: center;
  border-radius: 50px;
}
.cart-benefit__container > div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.cart-benefit__text{
  padding: 4px 12px;
}
.cart-benefit__product-image {
  width: 34px;
  min-width: 34px;
  background-color: #cfd0cd;
  border-radius: 100%;
}
.cart-benefit__product-image img {
  border-radius: 100%;
}
.cart-benefit__container p {
  font-size: 14px;
  color: #3e3e3d;
  line-height: 1.4;
}
.cart-first_giftproduct:not(.hidden) + .cart-second_giftproduct {
  display: none;
}
.cart-benefit__container .hidden {
  display: none;
}
.cart-drawer .progress-bar:before {
  background: #312325;
  position: absolute;
  top: 20px;
  width: 100px;
  height: 3px;
  z-index: 999999999;
  display: none;
}
.progress-amount {
  width: calc((var(--amountTotalPrice) * 100) / var(--treshold));
  height: 7px;
  z-index: 10;
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  background-color: #000;
  max-width: 100%;
  transition: width 0.35s ease-out;
  border-radius: 50px;
}
.free-ship-text-second {
  font-weight: 400;
}
.free-ship-text-first-amount {
  font-weight: 400;
}
.free-ship-text-first {
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  .progress-amount {
    top: 11px;
  }
  .progress-bar-marker {
    top: 5px !important;
  }
  .shipping_info_main {
    margin-bottom: 6px;
  }
}

/* New Cart Progress Bar */

.cart-progress-bar__wrapper{
  width: 100%;
  position: relative;
  padding-top: 16px;
}

.cart-progress-bar__container{
  width: 100%;
  display: flex;
  position: relative;
  padding-right: 16px;
}

.cart-progress-bar__block{
  position: relative;
  display: flex;
  flex-direction: column;
}

.cart-progress-bar__overflow{
  position: relative;
  width: 100%;
  height: 8px;
  display: flex;
  align-items: center;
}

.cart-progress-bar__progressWrapper{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #F0E7E0;
}

.cart-progress-bar__block.first .cart-progress-bar__progressWrapper{
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.cart-progress-bar__block.last .cart-progress-bar__progressWrapper{
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.cart-progress-bar__progressInner{
  background-color: var(--progress-bar-color);
  height: 100%;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.cart-progress-bar__block.active .cart-progress-bar__progressInner{
  border-radius: 0;
}

.cart-progress-bar__divider{
  width: 2px;
  border-radius: 50px;
  background-color: #EAE0D6;
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.cart-progress-bar__badge{
  position: absolute;
  right: -16px;
  width: 32px;
  height: 32px;
  z-index: 1;
  background-color: var(--progress-bar-badge-color);
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.cart-progress-bar__block.active .cart-progress-bar__badge{
  background-color: var(--progress-bar-badge-active-color);
}

.cart-progress-bar__badge svg path{
  stroke: var(--progress-bar-icon-color);
}

.cart-progress-bar__block.active .cart-progress-bar__badge svg path{
  stroke: var(--progress-bar-icon-active-color);
}

.cart-progress-bar__textBottom{
  align-self: end;
  transform: translateX(55%);
  font-size: 10px;
  line-height: 12px;
  color: #312325;
  padding-top: 16px;
}

/*=== */
.cart-drawer .atc-note-upper-wrapper,
.cart-drawer .add-to-cart-note {
  margin-bottom: 0 !important;
}

/* === Armbrand Product Page === */
@media screen and (min-width: 1000px) {
  .product-gallery {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
  }
}

.product-armband-info {
  /* max-width: 700px; */
  /* margin-left: auto;
  margin-right: auto; */
}
.product-armband-info > * + * {
  margin-top: 0;
  margin-bottom: 1.8rem;
}

.product-armband-info .product-info__title {
  margin-bottom: 0;
}

@media screen and (max-width: 999px) {
  .product-armband-info .product-info__title + .shopify-app-block {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1000px) {
  .product-armband-info .product-info__title + .shopify-app-block {
    margin-bottom: 4px;
  }
}

.product-armband-info .select {
  height: calc(var(--input-height) + 0.625rem);
}

.product-armband-info .product-info__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--product-info-block-spacing);
}
.product-armband-info .product-info__price .rating-with-text {
  display: inline-flex;
  margin-bottom: 0;
}
.product-armband-info
  .product-info__price
  .rating-with-text
  price-list:only-child {
  border-radius: 100px;
  border-right: 0;
}
.product-armband-info
  .product-info__price
  .rating-with-text:not(.rating-with-text-perday)
  + .text-subdued {
  max-width: 12rem;
  text-align: left;
}

.product-armband-info .product-info__image-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 1rem;
  width: 100%;
}
.product-armband-info .product-info__image-overlay.left {
  text-align: left;
}
.product-armband-info .product-info__image-overlay.right {
  text-align: right;
}
.product-armband-info .product-info__image-overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
}
.product-armband-info .product-info__image-overlay-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.product-armband-info .product-info__image-overlay-content span {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

.product-armband-info .product-info__allproperty {
  width: 100%;
  text-align: left;
  /* max-width: 500px; */
}
.product-armband-info .allproperty-label {
  margin: 0 0 0.4rem;
  font-size: 20px;
}
.product-armband-info .variant-option__subtitle {
  display: flex;
  gap: 5px;
  margin-top: -0.4rem;
}
.product-armband-info .product-info__allproperty .floating-label {
  width: calc(100% - var(--spacing-4) - var(--spacing-4));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-armband-info .product-info__variant-picker {
  width: 100%;
  text-align: left;
}
.product-armband-info .variant-picker__option-values {
  justify-content: flex-start !important;
}
.product-armband-info .select-chevron {
  top: calc(50% - 12px);
}

.product-armband-info .sale-point_title {
  text-align: left;
}

.variant-picker__option-values + .product-info__property {
  margin-top: 0.8rem;
}

.variant-pickers__wahle-dein-armband .block-swatch {
  flex: 1;
}

.product-armband-info .klaviyo-bis-trigger {
  margin: 0 0 10px !important;
  padding-block-start: var(--spacing-4);
  padding-block-end: var(--spacing-4);
  padding-inline-start: var(--spacing-8);
  padding-inline-end: var(--spacing-8);
}

.product-armband-info .variant-picker .block-swatch-value {
  font-size: 16px;
}
.product_info--inner-box > :first-child {
  margin-bottom: 1.8rem;
}
.product_info--inner-box > :last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 1000px) {
  .product-info__text :where(p, span) {
    font-size: 18px;
  }

  .product_info--inner-box {
    background-color: transparent !important;
  }
}

.product-recommendations-block {
  width: 100%;
  overflow: hidden;
}
.product-recommendations-block .horizontal-product-lists {
  border: 1px solid rgb(var(--text-color) / 0.12);
  border-radius: 12px;
}
.product-recommendations-block .horizontal-product-list-carousel {
  margin-inline: 0;
  padding-inline: 0;
  scroll-padding: 0;
  border: 1px solid rgb(var(--text-color) / 0.12);
  border-radius: 12px;
}

.product-recommendations-block .cart-drawer_recommendation-header .h-stack {
  margin-left: auto;
}
.product-recommendations-block .horizontal-product-list {
  border: 0 !important;
  gap: 12px;
  grid: auto / auto-flow 100%;
}

.product-recommendations-block .horizontal-product {
  border-radius: 12px;
  border-width: 0 !important;
  align-items: flex-start;
  position: relative;
  padding: var(--spacing-3);
}

.product-recommendations-block .horizontal-product__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.product-recommendations-block .horizontal-product__image {
  height: 100%;
  object-fit: cover;
  min-width: 5rem;
}

.product-recommendations-block .button {
  padding: 7px 16px;
  font-size: 12px;
  color: #eae0d6;
  background-color: #59886b;
  border-radius: 100px;
  height: auto;
  line-height: 1;
  margin-bottom: 0;
}

.product-recommendations-block .rec-products-title,
.product-recommendations-block .rec-products-title * {
  font-size: 20px;
  font-family: Gelica;
  font-weight: 500;
}
.product-recommendations-block .rec-products-title {
  padding-right: 1.3rem;
}

.product-recommendations-block .horizontal-product__info {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 3px;
}

.product-recommendations-block .horizontal-product__info-button {
  background: transparent;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  color: currentColor;
}

.product-recommendations-block .horizontal-product__info-button .icon {
  width: 20px;
  height: 20px;
}

.horizontal-product__info-drawer {
  height: auto;
}

.horizontal-product__info-drawer .drawer_header {
  padding-right: 2rem;
}
.horizontal-product__info-drawer .drawer_header.rec-products-title {
  font-size: 20px;
  font-family: Gelica;
  font-weight: 500;
}
.horizontal-product__info-drawer .drawer_content {
  padding-top: var(--spacing-4);
}

@media screen and (min-width: 1000px) {
  /* .product-recommendations-block .horizontal-product__image{
    min-width: 5.5rem;
  } */
  .product-recommendations-block .horizontal-product__info {
    font-size: 1rem;
    line-height: 1.2;
  }
}

/* Styling Changes For PDP Title Mobile */

@media screen and (max-width: 800px) {
  .product-armband-info .product-info__title {
    margin-bottom: 0.4rem;
    font-size: 28px;
  }

  #shopify-block-34486a45-fbb1-44a5-ac02-20ad918481b0 {
    margin: 12px auto 8px;
  }
}

.custom-modal{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.custom-modal__modal{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 40px 15px 15px;
  border-radius: 15px;
  background: #EAE0D6;
  max-width: 350px;
  width: 100%;
  z-index: 2;
}

.custom-modal--open{
  display: block;
}

.custom-modal__overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.custom-modal__close{
  width: 25px;
  height: 25px;
  background: #F0E7E0;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 100%;
}

.recharge-modal__items{
  display: flex;
  gap: 7px;
}

.recharge-modal__item{
  width: calc((100% - 14px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}


.recharge-modal__item * {
  text-align: center;
  color: #000;
  font-size: 12px !important;
  font-family: Satoshi, sans-serif;
}

.recharge-modal__item-img{
  mix-blend-mode: darken;
}

.recharge-modal__item-title{
  font-size: 18px !important;
  font-family: Gelica;
  font-weight: 500;
  line-height: 22px;
  margin-top: 10px;
}

.recharge-modal__item-block{
  border-radius: 8px;
  background: #F0E7E0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}

.recharge-modal__item-block-title{
  font-weight: 700;
}

.recharge-modal__text{
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-family: Satoshi, sans-serif;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 22px;
}

.recharge-modal{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.multiple-product-block-2 {
  margin-top: 0;
  margin-bottom: 30px;
}
.line-item_info-wrapper li[data-pair-symbol] {
  display: none;
}
@media screen and (max-width: 767px) {
  .multiple-product-block-2 {
    margin-bottom: 20px;
  }
}
/* Custom qty box */
.custom_quantitybox {
    border: 1px solid;
    border-radius: 100px;
    border-color: #dcd2c9;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    display: flex;
    align-items: center;
}
.custom_quantitybox input {
    border: unset;
}

.custom_quantitybox button {
    font-size: 18px;
}

.remaining-amount-value {
  font-size:14px;
}

.upsell-modal {
  max-width: 500px;
  padding-top: 15px;
  padding-left: 24px;
  padding-right: 24px;
}

.upsell-modal-footer,
.upsell-modal-header {
  text-align: center;
}

.upsell-modal-header > h3 {
  font-size: 1.8rem;
}

.upsell-item-variant-picker {
  margin-top: 10px;
  display: none;
}

[upsell-added] .upsell-item-variant-picker {
  display: block;
}

[upsell-added] .variant-picker-toggler .not-added,
.variant-picker-toggler .added {
  display: none;
}

[upsell-added] .variant-picker-toggler .added {
  display: block;
}


@media(max-width: 750px) {
  .product-info__buy-buttons:not(.pdp_bundle_enable .product-info__buy-buttons) {
    margin-top: 8px;
  }

  .upsell-modal-header > h3 {
    font-size: min(5.7vw, 1.5rem);
    max-width: 82vw;
  }
  .upsell-modal {
    max-width: 95% !important;
  }
  .upsell-modal .horizontal-product__info {
    display: flex;
  }

  .upsell-modal {
    max-width: 500px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .upsell-modal .recommendation-featured-media {
    flex-shrink: 0;
  }

  .niccos-upsell-item-wrapper .rec-products-title {
    word-break: break-word;
  }

  .variant-picker-toggler span {
    font-size: min(3vw, 16px);
  }

  .variant-picker-toggler {
    padding: 4px 10px;
  }

  .upsell-modal .bg-custom.text-custom {
    padding: 15px !important;
  }
}

/*** vDEV ***/
/* [Product page] Trust point */
.product-block--trust-point {
  border: 1px solid #3123251F;
  border-radius: 8px;
  background: #EAE0D6;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px;
  margin-block: 0 27px;
  width: 100%;
  text-align: left;
}

.product-block--trust-point > img {
  --size: 61px;
  width: var(--size);
  flex: 0 0 var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
}

.product-block--trust-point .bold {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 16.94px;
}

.product-block--trust-point .bold + span {
  margin-top: 5px;
}

.product-block--trust-point span {
  font-family: Satoshi, sans-serif;
  display: block;
  font-size: 13.67px;
  line-height: 18.2px;
}
/* /[Product page] Trust point */

/* [Section] Custom: Image with text */
custom-image-with-text-tabs {
  display: flex;
  flex-direction: row;
}

custom-image-with-text-tab {
  font-family: Satoshi, sans-serif;
  font-weight: 700;
  line-height: 22px;
  display: block;
  cursor: pointer;
  padding-block: 5px;
  white-space: nowrap;
  border-bottom: 1px transparent solid;
  scroll-snap-align: center;
  transition: opacity .2s ease-in-out, border-bottom-color .2s ease-in-out;
}

custom-image-with-text-tab:not(.is-selected):hover {
  opacity: .7;
}

custom-image-with-text-tab.is-selected {
  pointer-events: none;
  border-bottom-color: rgb(var(--text-color));
}

custom-image-with-text-list {
  --list-row-gap: var(--spacing-8);
  --list-column-gap: var(--grid-gutter);
  --list-grid: auto / auto-flow var(--list-carousel-item-width);
  --list-carousel-item-width: calc(var(--container-inner-width) / 3 -(var(--list-column-gap) / 3 * 2));
  scroll-padding-top: calc(var(--sticky-area-height) + 20px);
  display: grid;
  grid: var(--list-grid);
  gap: var(--list-gap);
  grid-template-rows: auto;
}

custom-image-with-text-card {
  scroll-snap-align: center;
  background: #F0E7E0;
  border-radius: 15px;
  display: flex;
}

custom-image-with-text-card .media-with-text__media img {
  display: block;
  aspect-ratio: var(--aspect-ratio);
}

.custom-image-with-text__content-title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 150%;
}

.custom-image-with-text__content-text {
  font-family: Satoshi, sans-serif;
}

.custom-image-with-text__content-title + .custom-image-with-text__content-text {
  margin-top: 24px;
}

@media screen and (max-width: 999px) {
  .shopify-section--custom-image-with-text section-header {
    margin-bottom: 30px;
  }

  .custom-image-with-text-tabs__wrapper {
    margin-inline: calc(max(
      var(--calculated-section-spacing-inline),
      50% - var(--container-max-width) / 2
    ) * -1);
    overflow: hidden;
  }

  custom-image-with-text-tabs {
    gap: 24px;
    margin-bottom: 27px;
    padding-inline: max(
      var(--calculated-section-spacing-inline),
      50% - var(--container-max-width) / 2
    );
  }

  custom-image-with-text-tab {
    font-size: 15px;
  }

  custom-image-with-text-card {
    flex-direction: column;
    gap: 32px;
  }

  .custom-image-with-text__content {
    padding: 0 24px 32px;
  }

  .custom-image-with-text__image .media-with-text__media,
  .custom-image-with-text__image .media-with-text__media img {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .custom-image-with-text__content-title {
    font-size: 14px;
  }

  .custom-image-with-text__content-text {
    font-size: 14px;
    line-height: 17px;
  }
}

@media screen and (min-width: 1000px) {
  .shopify-section--custom-image-with-text section-header {
    margin-bottom: 36px;
  }

  .floating-controls-container::before,
  .floating-controls-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50vw - 50%);
    background: rgb(var(--background));
    z-index: 1;
  }

  .floating-controls-container::before {
    left: 100%;
  }

  .floating-controls-container::after {
    right: 100%;
  }

  custom-image-with-text-tabs {
    gap: 45px;
    margin-bottom: 32px;
  }

  custom-image-with-text-tab {
    font-size: 15px;
    justify-content: space-between;
  }

  custom-image-with-text-card {
    padding: 14px;
    flex-direction: row-reverse;
    align-items: center;
  }

  .custom-image-with-text__image {
    --width: 33.333%;
    width: var(--width);
    flex: 0 0 var(--width);
  }

  .custom-image-with-text__content {
    padding: 56px;
  }

  .custom-image-with-text__content-title {
    font-size: 32px;
  }

  .custom-image-with-text__content-text {
    font-size: 16px;
    line-height: 20.92px;
  }
}

.shopify-section--custom-image-with-text .circle-button {
  background: rgb(var(--text-primary));
  color: rgb(var(--background-primary));
  z-index: 2;
}

.shopify-section--custom-image-with-text .circle-button:not([disabled]) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.shopify-section--custom-image-with-text .circle-button .animated-arrow::before {
  --size: 1rem;
  width: var(--size);
  height: var(--size);
  position: relative;
  margin-right: calc(var(--size) / 4);
}

@media screen and (max-width: 999px) {
  .shopify-section--custom-image-with-text .circle-button {
    display: none !important;
  }
}

@media screen and (max-width: 1399px) {
  .shopify-section--custom-image-with-text .circle-button[is="prev-button"] {
    left: -16px !important;
  }
  .shopify-section--custom-image-with-text .circle-button[is="next-button"] {
    right: -16px !important;
  }
}

@media screen and (min-width: 1400px) {
  .shopify-section--custom-image-with-text .circle-button[is="prev-button"] {
    left: -80px !important;
  }
  .shopify-section--custom-image-with-text .circle-button[is="next-button"] {
    right: -80px !important;
  }
}
/* /[Section] Custom: Image with text */
/*** /vDEV ***/

/* WhatsApp widget */
.chatarmin-widget-wrapper {
    z-index: 995 !important;
}

.modal{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
  background: #0006;
  padding: 50px;
}

.modal.visible{
  opacity: 1;
  visibility: visible;
}

.modal-faq video{
  height: 100% !important;
  width: auto !important;
  margin: 0 auto;
}

.outside-close-button{
  top: 10px;
  right: 10px;
  width: var(--spacing-12);
  height: var(--spacing-12);
  bottom: 100%;
  background: rgb(var(--dialog-background));
  color: rgb(var(--text-color));
  border-radius: var(--rounded-full);
  z-index: 1;
  place-items: center;
  margin-block-end: var(--spacing-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: grid;
  position: absolute;
}

.modal-faq .outside-close-button path{
  stroke: #59886B;
}

.modal-faq > div:not(.multi-column-lightbox) {
  position: relative;
  width: fit-content;
  height: 100%;
  margin: 0 auto;
  @media screen and (max-width: 700px){
    display: flex;
    align-items: center;
    height: fit-content;
    top: 50%;
    transform: translateY(-50%);
    video {
      height: unset !important;
    }
  }

  button {
    top: -50px;
    right: -40px;
    @media screen and (min-width: 700px){
      top: -50px;
      right: -50px;
    }
  }
}

@media screen and (min-width: 650px){
  .modal-faq{
    padding: 100px;
  }
}




/*multi columns*/

.multi-column-modal{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.multi-column-modal > *{
  flex: 0 0 calc(100% / var(--block-image-columns) - 14px * (var(--block-image-columns) - 1) / var(--block-image-columns))
}

.multi-column-modal__item{
  display: flex;
  padding: 3px 14px 3px 3px;
  gap: 14px;
  border-radius: 18px;
  background: #F0E7E0;
  align-items: start;
  cursor: pointer;
}

.multi-column-modal__item .v-stack{
  gap: 0;
  padding: 12px 0;
}

.multi-column-modal__item h4{
  font-size: 19px;
  font-weight: 700;
  font-family: "Satoshi";
}

.multi-column-modal__item .prose{
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.multi-column-modal__item .prose,
.multi-column-modal__item .prose > *,
.multi-column-modal__item .prose > .metafield-rich_text_field > *{
  font-size: 19px !important;
  font-weight: 400;
  margin: 0;
}

.multi-column-modal__item > img{
  height: 139px;
  object-fit: cover;
  position: relative;
}

.multi-column-modal__item-media{
  position: relative;
  flex: 0 0 var(--block-image-width);
}

.multi-column-modal__item-media:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 57.21%, rgba(0, 0, 0, 0.20) 100%);
}

.multi-column__collapsible{
  font-family: "Satoshi";
  font-size: 19px;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.multi-column__collapsible svg{
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 2;
}

.multi-column-modal__item-media svg{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.multi-column-lightbox{
  position: relative;
  height: 100%;
  max-height: 80%;
  border-radius: 15px;
  overflow: hidden;
  background: #F0E7E0;
}

.multi-column-lightbox__wrapper{
  max-width: 435px;
  padding: 20px;
  overflow: auto;
  max-height: 100%;
  padding-bottom: 72px;
}

.multi-column-lightbox__media{
  position: relative;
  padding-bottom: 100%;
  margin-bottom: 18px;
}

.multi-column-lightbox__media img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.multi-column-lightbox h4{
  font-family: "Satoshi";
  font-size: 19px;
  font-weight: 700;
}

.multi-column-lightbox .prose,
.multi-column-lightbox .prose > *,
.multi-column-lightbox .prose > .metafield-rich_text_field > *{
  font-size: 19px;
  margin-block-start: 10px;
}

.multi-column-lightbox__media + .v-stack .prose p:has(strong) {
  margin-block-start: 5px;
}

.modal-multi-column{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-multi-column .button-close{
  width: 100%;
  background: #000;
  font-size: 14px !important;
  padding-block: 10px;
  margin: 0;
  margin-top: 10px;
  font-weight: 500;
}

.button-close__sticky{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 20px 20px;
  background: #F0E7E0;
  width: 100%;
}

/* Normalize font rendering in multi-column section prose blocks —
   metafield_tag outputs different HTML structures depending on metafield type
   (single_line_text_field = raw text, multi_line_text_field = <p>, rich_text_field = <div.metafield-rich_text_field><p>)
   This ensures consistent Satoshi 16px/400 across all variants. */
#shopify-section-multi_column_VzVmfc .multi-column__item .prose,
#shopify-section-multi_column_VzVmfc .multi-column__item .prose p,
#shopify-section-multi_column_VzVmfc .multi-column__item .prose > div,
#shopify-section-multi_column_VzVmfc .multi-column__item .prose > .metafield-rich_text_field,
#shopify-section-multi_column_VzVmfc .multi-column__item .prose > .metafield-rich_text_field p {
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #312325;
}

.shopify-section--multi-column h2{
  font-size: 48px;
}

.shopify-section--multi-column .section-stack{
  gap: 43px;
}

.multi-column-lightbox .v-stack{
  gap: 0;
}


.shopify-section--multi-column  .section-header{
    grid-template-columns: 100%;
}

@media screen and (max-width: 600px) {
  .multi-column-modal > *{
    flex: 0 0 100%;
  }

  .multi-column-modal__item-media{
    flex: 0 0 140px;
  }

  .multi-column-modal__item{
    gap: 12px;
  }

  .multi-column__collapsible,
  .multi-column-modal__item h4,
  .multi-column-modal__item .prose,
  .multi-column-modal__item .prose > *,
  .multi-column-modal__item .prose > .metafield-rich_text_field > *
  .multi-column-modal__item .prose {
    font-size: 16px !important;
  }

  .shopify-section--multi-column h2{
    font-size: 28px;
  }

  .shopify-section--multi-column .section-stack{
    gap: 29px;
  }

  .multi-column-lightbox__wrapper{
    max-width: 335px;
  }

  .multi-column-lightbox h4{
    font-size: 16px;
  }

  .multi-column-lightbox .prose, .multi-column-lightbox .prose > *, .multi-column-lightbox .prose > .metafield-rich_text_field > * {
    font-size: 16px;
  }
}

/* Start - ID|19.08.25 - Footer width fix */
@media (min-width: 1000px) {
  .footer__block-list {
    flex-wrap: wrap;
  }

  .footer__block--menu:last-child {
    margin-inline-end: 0;
  }
}

@media (min-width: 1150px) {
  .footer__block--menu:last-child {
    margin-inline-end: 0;
  }
}

@media (min-width: 1000px) and (max-width: 1399px) {
  .footer__block--newsletter {
    flex: 0 0 100%;
  }

  .footer__block-list {
    --footer-block-list-gap: var(--spacing-10);
  }
}

@media (min-width: 1400px) {
  .footer__block--newsletter {
    flex: 0 0 23%;
  }

  .footer__block-list {
    --footer-block-list-gap: var(--spacing-5);
  }
}
/* End - ID|19.08.25 - Footer width fix */

/* Start - Menu */
@media screen and (min-width: 1150px) {
  .header {
    /* outline: 1px solid rgb(var(--text-color) / .12); */
    outline: 1px solid #E6E4E5;
  }
}

.header__link-list li details {

  &[open] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #312325;
    text-underline-offset: 5px;

    &::before {
      opacity: 1;
    }
  }
}

.header__link-list .dropdown-menu {
  overflow: visible;
  left: 50%;
  transform: translate(-50%);
}
.dropdown-menu {
  box-shadow: none;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  &::before,
  &::after {
    --size: 20px;
    /* content: url('./left-radius.svg'); */
    content: '';
    position: absolute;
    top: 25.5px;
    width: var(--size);
    height: var(--size);
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_1_3)'%3E%3Cpath d='M20.5 -0.5V20H19.5C19.5 9.23046 10.7696 0.5 0 0.5V-0.5H20.5Z' fill='white' stroke='%233123251f'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_3'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_1_3)'%3E%3Cpath d='M20.5 -0.5V20H19.5C19.5 9.23046 10.7696 0.5 0 0.5V-0.5H20.5Z' fill='white' stroke='%23E6E4E5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_3'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 1px 0 #fff;
  }

  &::before {
    right: 100%;
  }

  &::after {
    left: 100%;
    transform: scaleX(-1);
  }

  .contents {
    
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 45.5px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      border-bottom-right-radius: 12px;
      border-bottom-left-radius: 12px;
      /* border: 1px solid rgb(var(--text-color) / .12); */
      border: 1px solid #E6E4E5;;
      border-top: 0;
    }
  }
}

/* End - Menu */
/* Start - Mobile menu */
.panel-list__wrapper,
.drawer::part(content) {
  border-radius: 20px;
}
.navigation-drawer .panel__scroller {
  overflow-y: visible;
}
.panel__wrapper {
  gap:var(--spacing-5);
  --drawer-body-padding: 0;
  padding-bottom: var(--spacing-5);
}

.panel__wrapper--1-level > .panel__scroller .v-stack {
  padding-block-start: var(--spacing-5);
  padding-inline: var(--spacing-5);
  background-color: #FFFFFF;
}

@media screen and (min-width: 700px) {
	.panel__wrapper--1-level > .panel__scroller .v-stack,
  .panel__wrapper-back{
		background-color: transparent !important;
	}
}

.panel__wrapper-back {
  background-color: #FFFFFF;
  padding: var(--spacing-3-5) var(--spacing-5);
}

.panel__wrapper-back button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  min-height: fit-content;
}
.panel__wrapper-back :is(button,span) {
  font: normal 500 0.875rem/1.25rem Gelica;
  color: #685C5A;
}


.panel__wrapper--1-level > .panel__scroller .panel__scroller-extra-content.panel__scroller--1-level {
  padding-inline: var(--spacing-5);
}

.panel__wrapper--2-level,
.panel__wrapper--3-level {
  gap: 0;
}

.panel__wrapper--2-level > .panel__scroller-extra-content.panel__scroller--2-level,
.panel__wrapper--3-level > .panel__scroller-extra-content.panel__scroller--3-level {
  margin-inline: var(--spacing-5);
}

.panel__wrapper--1-level > .panel__scroller ul.v-stack li {
  padding-block: 18px;
  border-bottom: 1px solid #D9CFC9;
}
.panel__wrapper--1-level > .panel__scroller ul.v-stack li:first-child {
  padding-block-start: 0;
}
.panel__wrapper--1-level > .panel__scroller ul.v-stack li:last-child {
  border-bottom: none;
  padding-block-end: 0;
}
.panel__wrapper--1-level > .panel__scroller ul.v-stack li :is(button,a,span) {
  font: normal 500 1.25rem/1.75rem Gelica;
  color: #312325;
}
.panel__scroller-extra-content > *:not(:last-child) {
  margin-bottom: 20px;
}
.panel__scroller-extra-content.panel__scroller--1-level > *:not(:last-child) {
  margin-bottom: 32px;
}
.panel__scroller-extra-content.panel__scroller--1-level {
  border-top: 1px solid #D9CFC9;
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}
.panel__scroller--2-level,
.panel__scroller--3-level {
  padding-top: 20px;
  border-top: 1px solid #D9CFC9;
}

.panel__wrapper-link {
  margin-inline: var(--spacing-5);
  padding-block: var(--spacing-5);
  border-bottom: 1px solid #D9CFC9;
}
.panel__wrapper-link a {
  font: normal 400 1rem/1.5rem Satoshi;
  color: #312325;
}
.panel__wrapper--2-level > ul.v-stack *:last-child {
  border-bottom: none
}

.panel__wrapper-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-items: flex-start;
  row-gap: 1rem;
}
.panel__wrapper-list__item-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.75rem
}

.panel__wrapper-list__item-link img {
  width: 48px;
  height: 48px;
  min-width: 48px;
}

.panel__wrapper-list__item-link span {
  font: normal 600 1rem/1.5rem Satoshi;
  color: #312325;
}
.panel__wrapper-list__item-link span:has(small) {
  font: normal 600 1rem/1.25rem Satoshi;
}

.panel__wrapper-list__item-link small {
  margin-top: 0.3125rem;
  display: block;
  font: normal 400 0.875rem/1.25rem Satoshi;
  color: #312325;
}
/* End - Mobile menu */

/* Start - Minor PDP fixes */
.custom_quantitybox button.is-disabled {
  pointer-events: none;
}

@media (min-width: 750px) and (max-width: 1139px) {
  .multi-card__grid.blocks-lack-tablet.cols-tablet-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .multi-card__grid.blocks-lack-tablet.cols-tablet-3 .multi-card__cell {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (min-width: 1140px) {
  .multi-card__grid.blocks-lack-desktop.cols-desktop-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .multi-card__grid.blocks-lack-desktop.cols-desktop-3 .multi-card__cell {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* End - Minor PDP fixes */

/* Start ID | 26.10.2025 - Password page + countdownt */
.countdown-cell {
  background: var(--cdown-background, #F0E7E0);
  color: var(--cdown-text-color, var(--text-color));
  border-radius: 12px;
  padding: 10px;
}

.password-countdown .countdown-cell {
  min-width: 74px;
}

.fw-400 {
  font-weight: 400 !important;
}

.password-klaviyo-form--box {
  padding: 20px;
}

.password-klaviyo-form--box .text-xxs {
  font-size: 14px;
  font-family: 'Satoshi', sans-serif;
}

@media (min-width: 1400px) {
  .password-countdown .countdown-cell {
    min-width: 150px;
  }
}

.product__promo {
  margin-bottom: 10px;
}

.dynamic-banner {
  color: var(--color-text);
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  overflow: hidden;
  background-image: var(--background-card-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 176px;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.dynamic-banner__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-color);
  opacity: var(--overlay-opacity);
  pointer-events: none;
}

.dynamic-banner__info {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
}

div.dynamic-banner__info span.dynamic-banner__subheading {
  margin-bottom: 3px;
  font: normal 400 0.625rem/1rem var(--sub-font);
}

div.dynamic-banner__info p.dynamic-banner__heading {
  margin-bottom: 3px;
  font: normal 400 2rem/1.875rem var(--main-font);
}

div.dynamic-banner__info span.dynamic-banner__text {
  font: normal 400 0.8125rem/1.25rem var(--sub-font);
}

/* Promo-Banner-Button: Text per Flexbox vertikal mittig, Hoehe wie vorher (52px, bis 1200px 36px, siehe unten),
   etwas breiter als vorher und weisse Schrift (unabhaengig von der Button-Textfarbe im Metaobjekt). */
div.dynamic-banner__info a.dynamic-banner__link,
.header__wrapper a.dynamic-banner__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 20px;
  background-color: var(--background-button);
  color: #ffffff;
  text-decoration: none;
  padding: 0 42px;
  width: fit-content;
  border-radius: 100px;
  text-align: center;
  font: normal 500 1rem/1 var(--sub-font);
}

/* End ID | 26.10.2025 - Password page + countdownt */


/* Start ID | 02.12.2025 - PDP Bundle BuyBox */

.pdp_bundle_enable .variant-picker .block-swatch-value {
    width: 100%;
}
.pdp_bundle_main {
    display: flex;
    justify-content: space-between;
}
.pdp_bundle_main span {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pdp_bundle_main label.block-swatch{ position: relative; margin-top: 25px;}
.pdp_bundle_enable .variant-picker .block-swatch{
  width: 100%;
  padding: 15px 10px 15px 45px;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #31232533;
  background-color: white;
  font-family: 'Satoshi';
  font-size: 16px;
  position: relative;
}
.pdp_bundle_enable .variant-picker .block-swatch:before {
    content: "" !important;
    width: 24px;
    height: 24px;
    border: 1px solid #0000004D;
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    box-shadow: none;
    opacity: 1;
    margin-top: -12px;
    left: 10px;
    border-radius: 100%;
}
.pdp_bundle_enable .variant-picker__option-info {
    display: block;
    margin-bottom: 3px;
}
.pdp_bundle_enable .variant-picker__option-info .text-subdued{
  font-family: 'gelica';
  font-weight: 500;
  font-size: 18px;
  color: rgb(var(--text-color));

}
.pdp_bundle_enable .variant-picker .sr-only:checked+.block-swatch::before {
    border: 3px solid #312325;
    background: #fff;
    box-shadow: 0px 0px 0px 1px white;
}
.pdp_bundle_right .sale_price {
    color: #59886B;
}
.pdp_bundle_enable .variant-picker .sr-only:checked+.block-swatch .pdp_bundle_right .sale_price { color: #EC91D8;}
.pdp_bundle_right .oreginal_price_line {
    font-weight: 500;
    text-decoration: line-through;
    font-size: 14px;
    text-decoration-color: red;
    text-decoration-thickness: 2px;
}
.pdp_bundle_left .bundle_label {
    font-weight: 500;
    text-transform: uppercase;
}

span.save_base {
    background: #EC91D8;
    position: absolute;
    top: -14px;
    right: 10px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    font-size: 11px;
    color: white;
    border-radius: 20px;
    padding: 2px 11px;
}
.pdp_bundle_enable variant-picker {
    background: white;
    padding: 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    gap: 0;
}
.pdp_bundle_enable .product-info__description{ margin-bottom: 20px;}
.bundle_instuction {
    display: flex;
    justify-content: space-between;
    margin-top: -5px;
}
.bundle_instuction span:first-child::before {
    content: "";
    background: #59886B;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    margin-right: 8px;
    vertical-align: middle;
}
.pdp_bundle_enable .gift-card-recipient {
    font-size: 16px;
}

.pdp_bundle_enable .product-info__buy-buttons{
  background-color: white;
  padding: 15px;
  margin-bottom: 0;
}
.pdp_bundle_enable .product-block--sales-points {
    background-color: white;
    padding: 0px 15px 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-bottom: 25px;
}
.bundle_instuction span {
    font-size: 15px;
}
.pdp_bundle_enable .variant-picker__option-values{ display: flex !important;}
.pdp_bundle_enable .product-text-icon__container{ align-items: flex-start; padding: 12px;}

@media (max-width: 767px){
  .pdp_bundle_enable variant-picker { margin-top: 15px;}
  .pdp_bundle_enable .product-block--sales-points ul{ flex-direction: row;         justify-content: space-evenly;}
}

/* End ID | 02.12.2025 - PDP Bundle BuyBox */

/* Card-Slider.liquid based on Multi-Column */

.multi-column:has(.multi-column__slider) {
  display: block;
}

.multi-column:has(.multi-column__slider) .scrollbar {
  margin-top: 24px;
}

.multi-column__item-controls {
  width: 60px;
  height: 60px;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E9E9E966;
  backdrop-filter: blur(4px);
  border-radius: 50%;
  color: white;
  z-index: 20;
}

.multi-column__item-controls svg {
  display: block;
}

.multi-column__item-control--play {
  transform: translateX(2px);
}

.multi-column__item-control--pause {
  display: none;
}

.multi-column__item:has(.multi-column__item-controls) {
  cursor: pointer;
}

.multi-column__item:has(.multi-column__item-controls):hover .multi-column__item-controls {
  opacity: 1;
}

.multi-column__slider {
  grid: var(--multi-column-grid, none);
  align-items: start;
  gap: var(--grid-gutter);
  display: grid;
}

.multi-column__slider:has(.multi-column__item--card) {
  align-items: stretch;
}

.multi-column__slider .multi-column__item {
  grid-column: auto;
  justify-items: center;
}

.multi-column__item.multi-column__item--overlay {
  position: relative;
  color: rgb(var(--card-text-color));
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s ease-in-out;
}

.multi-column__item.multi-column__item--overlay .v-stack {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding: 10px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  background: rgb(var(--card-background));
}

.multi-column__item.multi-column__item--overlay.multi-column__item--large {
  transform: scale(1.08);
}

@media screen and (max-width: 1000px) {
  .multi-column__item.multi-column__item--overlay.multi-column__item--large:not(.multi-column__item--playing) .multi-column__item-controls {
    opacity: 1;
  }
}

.scroll-area:has(.multi-column__item--overlay) {
  overflow-x: clip;
  overflow-y: visible;
  padding-top: 30px;
  padding-bottom: 30px;
}

@media screen and (max-width: 1000px) {
  .scroll-area:has(.multi-column__item--overlay) {
    padding-left: 80px;
  }
}

.multi-column__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.multi-column__item.multi-column__item--card {
  background: rgb(var(--card-background));
  color: rgb(var(--card-text-color));
}

.multi-column__item.multi-column__item--card {
  border-radius: 10px;
  backdrop-filter: blur(30px);
}

.multi-column__item.multi-column__item--card .v-stack {
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  overflow: hidden;
}

.multi-column__item.multi-column__item--card .v-stack .badge {
  max-width: 100%;
  width: auto;
  white-space: normal;
  word-break: break-word;
  font-size: var(--text-xs);
}

.multi-column__item.multi-column__item--card .h4 {
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-style: var(--text-font-style);
  font-size: 22px;
  line-height: 1.2;
}

.multi-column__item.multi-column__item--card .v-stack .prose {
  font-size: var(--text-xs);
}

/* Mobile: wrapper transparent, Bild wie ursprünglich zentriert */
.multi-column__item.multi-column__item--card .card-img-wrap {
  display: block;
}

.multi-column__item.multi-column__item--card .card-img-wrap img {
  display: block;
  width: 55%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  margin: 24px auto 0;
}

@media screen and (max-width: 699px) {
  section-header.text-center {
    text-align: left;
  }
}

@media screen and (min-width: 700px) {
  .multi-column {
    --multi-column-list-column-max-gap: var(--spacing-16);
    grid: auto / auto-flow 38vw;
  }
}

@media screen and (min-width: 1000px) {
  .multi-column {
    --multi-column-list-row-min-gap: var(--spacing-16);
    grid: auto / repeat(12, minmax(0, 1fr));
  }

  .multi-column__item {
    grid-column: var(--multi-column-item-column-count);
  }

  .multi-column__item.multi-column__item--card {
    display: flex;
    overflow: hidden;
    gap: var(--spacing-5);
    padding-left: 32px;
  }

  /* Bild: wrapper streckt sich zur vollen Card-Höhe, Bild füllt den Wrapper */
  .multi-column__item.multi-column__item--card .card-img-wrap {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    flex-shrink: 0;
  }

  .multi-column__item.multi-column__item--card .card-img-wrap img {
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    max-height: 200px;
    min-height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    flex-shrink: 0;
  }

  .multi-column__item.multi-column__item--card .v-stack {
    flex: 1;
    padding: 24px 24px 24px 0;
    gap: 8px;
    justify-content: center;
  }

  /* padding-left des containers gibt Abstand links vom Bild */
  .multi-column__item.multi-column__item--card {
    padding-left: 24px;
  }
}

/* Hide empty prose block (when text metafield is blank → renders <p></p>) */
.multi-column__item.multi-column__item--card .v-stack .prose:has(> p:only-child:empty) {
  display: none;
}
.multi-column__item.multi-column__item--card .v-stack .prose > p:only-child:empty {
  display: none;
}

/* Badge: filled pill style instead of outline */
.multi-column__item.multi-column__item--card .badge.badge--outline {
  background: #E8E0D4;
  border: none;
  border-radius: 8px;
  color: #312325;
  font-size: 13px;
  font-weight: 400;
  padding: 5px 12px;
  text-transform: none;
  letter-spacing: 0;
}

/* Hide check icon inside badge */
.multi-column__item.multi-column__item--card .badge.badge--outline .icon {
  display: none;
}

/* Stack badges vertically */
.multi-column__item.multi-column__item--card .h-stack.wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* End Card-Slider.liquid */

/* Badge Styles for custom discount groups */

.badge.badge--card-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
}

/* Zubehoer PDP - compact rounded quantity selector */
.product-info__quantity-selector--zubehoer .quantity-selector {
  height: auto;
  border-radius: 100px;
  border-color: #DCD2C9;
}

.product-info__quantity-selector--zubehoer .quantity-selector__button {
  padding-inline-start: 17px;
  padding-inline-end: 17px;
  padding-block: 14px;
}

.product-info__quantity-selector--zubehoer .quantity-selector__input {
  font-size: 20px;
  min-width: 28px;
}

/* Zubehoer PDP - equal spacing between price, qty selector, ATC */
.product-info--zubehoer .product-info__price {
  margin-block-end: 16px;
}

.product-info--zubehoer .product-info__quantity-selector--zubehoer {
  margin-block-end: 16px;
}

/* Start | I.D. | 21.05.2026 - Line Item Subscription Switcher */
.cart-drawer .line-item {
  flex-wrap: wrap;
}

.line-item--abo-switch {
  padding: 12px;
  border-radius: 8px;
  background-color: #F7F3EF;
  border: 1px solid #F7F3EF;
  flex: 0 0 100%;
}

.line-item--abo-switch.is-active {
  border: 1px solid #EAE0D6;
}

.line-item--abo-switch.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.line-item--abo-switch-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.line-item--abo-switch .ios-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
}

.line-item--abo-switch .ios-toggle input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.line-item--abo-switch .ios-toggle__slider {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background-color: #DCD2C9;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.line-item--abo-switch .ios-toggle__slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.line-item--abo-switch .ios-toggle input[type="checkbox"]:checked + .ios-toggle__slider {
  background-color: rgb(var(--text-primary));
}

.line-item--abo-switch .ios-toggle input[type="checkbox"]:checked + .ios-toggle__slider::before {
  transform: translateX(16px);
}

.line-item--abo-switch .ios-toggle input[type="checkbox"]:focus-visible + .ios-toggle__slider {
  outline: 2px solid #58886b;
  outline-offset: 2px;
}

.line-item--abo-switch-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.line-item--abo-switch-caption {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--text-primary));
}

.line-item--abo-switch-info-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: rgb(var(--text-primary));
  text-decoration: underline;
  cursor: pointer;
}

.line-item--abo-switch-info-toggle > span {
  font-size: inherit;
  font-weight: 700;
}

.line-item--abo-switch.is-active .line-item--abo-switch-info-toggle {
  color: #58886b;
}

.line-item--abo-switch-info-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.line-item--abo-switch-info-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.line-item--abo-switch-info-content {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 400;
  color: rgb(var(--text-primary));
}

.line-item--abo-switch-info-content[hidden] {
  display: none;
}

.line-item--abo-switch-info-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.line-item--abo-switch-info-content li {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}

.line-item--abo-switch-info-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #58886b;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 10.5l3.2 3 6.8-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.line-item--abo-switch-main {
  display: none;
  margin-top: 12px;
}

.line-item--abo-switch.is-active .line-item--abo-switch-main {
  display: block;
}

.line-item--abo-switch .select-wrapper {
  position: relative;
  display: block;
}

.line-item--abo-switch .select-wrapper svg {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

.line-item--abo-switch .select {
  width: 100%;
  padding: 6px 36px 6px 12px;
  border: 1px solid #DCD2C9;
  border-radius: 8px;
  background-color: #ffffff;
  color: rgb(var(--text-primary));
  font-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
/* End | I.D. | 21.05.2026 - Line Item Subscription Switcher */


/* Product download button */
.product-download {
  margin-block-start: var(--spacing-1);
  display: none;
}
.product-download__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
  color: rgb(var(--button-background-primary));
  text-align: center;
  border-radius: 6px;
  border: 1px solid rgb(var(--button-background-primary));
}
.product-download__button span{
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.6;
}

.product-download__button:hover {
  background: rgb(var(--button-background-primary));
  color: white;
}
.product-download__button:hover img{
  filter: brightness(0) invert(1);
}
.product-download__button img {
  flex-shrink: 0;
}

@media (max-width: 999px){
  .product-download {
    margin-block-start: var(--spacing-3);
  }
  .product-info details.product-info__accordion:nth-last-child(2) {
    border-bottom: none;
  }
}

/* PDP Dog Size Selector */
.dog-size-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-bottom: 24px;
}

.dog-size-selector__heading {
  font-family: "Gelica", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: #312325;
  margin-bottom: 12px;
}

.dog-size-selector__options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.dog-size-selector__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background-color: #fff;
  color: #312325;
  font-family: 'Satoshi';
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dog-size-selector__option:hover {
  background-color: #f0e7e0;
}

.dog-size-selector__option.is-active {
  background-color: #312325;
  color: #fff;
}

.dog-size-selector__option.is-active:hover {
  background-color: #312325;
}

.dog-size-selector__result {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  color: #312325;
  font-family: 'Satoshi';
  margin-top: 12px;
}

.dog-size-selector.is-selected .dog-size-selector__result {
  display: flex;
}

.dog-size-selector__result-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.dog-size-selector__result-line {
  font-size: 13px;
  line-height: 1.5;
}

.dog-size-selector__result-line strong {
  font-weight: 600;
}



/* PDP Dog Size Selector — modal version */
.dog-size-v2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding-bottom: 24px;
}

.shopify-section--main-product .dog-size-v2__heading {
  font-family: "Gelica", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  color: rgb(var(--text-color));
}

.dog-size-v2__trigger {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  color: rgb(var(--button-background-primary));
  font-family: 'Satoshi';
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  cursor: pointer;
}

.dog-size-v2__trigger[hidden] {
  display: none;
}

/* Result */
.dog-size-v2__result {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dog-size-v2__result[hidden] {
  display: none;
}

.dog-size-v2__result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dog-size-v2__result-title {
  font-family: 'Satoshi';
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.dog-size-v2__change {
  padding: 0;
  border: none;
  background: none;
  color: rgb(var(--button-background-primary));
  font-family: 'Satoshi';
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  cursor: pointer;
}

.dog-size-v2__result-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.5);
}

.dog-size-v2__result-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #fff;
}

.dog-size-v2__result-range {
  font-family: 'Satoshi';
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.dog-size-v2__result-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.shopify-section--main-product .dog-size-v2__result-text p {
  font-family: 'Satoshi';
  font-size: 13px;
  line-height: 1.5;
}

.dog-size-v2__result-text strong {
  font-family: 'Satoshi';
  font-weight: 600;
}

.dog-size-v2__image,
.dog-size-v2__result-image img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Modal */
.dog-size-v2__overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(49, 35, 37, 0.45);
}

.dog-size-v2__overlay[hidden] {
  display: none;
}

.dog-size-v2__modal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 343px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 12px;
  background-color: #fff;
}

.dog-size-v2__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  padding: 0;
  border: none;
  background: none;
  color: #312325;
  cursor: pointer;
}

.dog-size-v2__modal-title {
  font-family: "Gelica", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  color: #312325;
  padding-right: 24px;
}

.dog-size-v2__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.dog-size-v2__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e3dccf;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dog-size-v2__option-image {
  display: flex;
  width: 40px;
  height: 40px;
}

.dog-size-v2__option-label {
  font-family: 'Satoshi';
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #312325;
}

.dog-size-v2__option.is-active {
  background-color: #312325;
  border-color: #312325;
}
.dog-size-v2__option.is-active img{
  filter: brightness(0) invert(1);
}

.dog-size-v2__option.is-active .dog-size-v2__option-label {
  color: #fff;
}

.dog-size-v2__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 32px 16px;
  border: 1px solid rgb(var(--button-background-primary));
  border-radius: 6px;
  background-color: transparent;
  color: rgb(var(--button-background-primary));
  font-family: 'Satoshi';
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dog-size-v2__apply:hover {
  background-color: rgb(var(--button-background-primary));
  color: #fff;
}

.dog-size-selector,
.dog-size-v2{
  display: none;
}
@media  (max-width: 768px) {
  .dog-size-selector__options{
    grid-template-columns: repeat(3, 1fr);
  }
  .dog-size-v2__result-card{ gap: 10px;}
}

/* Start | I.D. | 26.06.2026 - Safari: PLP grid items issue fixing  */
.product-card__figure > a {
  display: block;
}
/* End | I.D. | 26.06.2026 - Safari: PLP grid items issue fixing  */

/* Product page: Dog size */
product--dog-size {
  --product-info-block-spacing: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .product__dog-size__buybox {
    display: flex;
    flex-direction: column;

    .button {
      font-weight: 700;
      padding-inline: 10px;
      width: 100%;
      margin-block-end: 0;
    }

    .product__dog-size__buybox-text {
      font-family: Satoshi, sans-serif;
      font-weight: 400;
      font-size: 13px;
      line-height: 1.6;
      text-align: center;
    }

    .product__dog-size__buybox-bullets {
      font-family: Satoshi, sans-serif;
      font-weight: 400;
      font-size: 13px;
      line-height: 1.6;
      background-color: #FFFFFF80;
      border-radius: 8px;
      display: flex;
      flex-direction: column;

      variant-inventory {
        grid-column: 1 / -1;

        [data-variant-id]:not([hidden]) {
          display: flex;
          align-items: center;
          gap: 6px;

          i {
            width: 12px;
            aspect-ratio: 1;
            border-radius: 50%;
            background-color: currentColor;
            display: block;
            margin-inline: 2px;
          }
        }
      }

      .sales-points {
        margin-block-end: 0;
        display: flex;
        gap: 6px;

        .sales-point {
          flex: 1;

          .icon-and-text {
            gap: 6px;
          }
        }
      }
    }
  }
}

/* Vorbestellung-Hinweis (custom.pre_order_button_ Metafeld) ueber volle
   Breite strecken: das Metafeld bringt sein eigenes <style> mit
   "width: fit-content !important" mit, daher braucht der Override
   hoehere Selektor-Spezifitaet (zwei verkettete Klassen). */
.product-preorder-note {
  width: 100%;
  margin-bottom: -4px;
}

.product-preorder-note .lb-delivery-info-hr {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center;
  flex-wrap: nowrap;
  padding-block: var(--spacing-2-5) !important;
  min-height: 3.25rem;
}

.product-preorder-note .lb-delivery-info-hr img {
  flex-shrink: 0;
}

.product-preorder-note .lb-delivery-info-hr p,
.product-preorder-note .lb-delivery-info-hr span {
  font-size: 12px !important;
  line-height: normal !important;
  white-space: nowrap !important;
}

@media screen and (min-width: 1000px) {
  .product-preorder-note .lb-delivery-info-hr {
    min-height: 4.5rem;
  }

  .product-preorder-note .lb-delivery-info-hr p,
  .product-preorder-note .lb-delivery-info-hr span {
    font-size: 18px !important;
    white-space: normal;
  }
}

body.custom-drawer--is-active {
  overflow: hidden !important;

  .shopify-section--header {
    z-index: auto !important;
  }

  /* Resolvia chat bubble sets inline z-index 999999 – keep it below the drawer (999) */
  #resolvia-chat-widget {
    z-index: 998 !important;
  }
}

product--dog-size--drawer {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;

  &:not(.is-active) {
    display: none;
  }

  .custom-drawer__overlay {
    background: #0006;
    filter: blur(12px);
    min-height: 100lvh;
    position: fixed;
    inset: 0;
    backdrop-filter: blur(12px);
  }

  .custom-drawer__container {
    position: relative;
    max-height: 100%;
  }

  .custom-drawer__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-4);
    justify-content: space-between;
    position: relative;
    padding: 20px 10px;
  }
}

product--dog-size--drawer {

  header {

    span {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 16px;
      font-weight: 400;
      -webkit-text-stroke: 0.3px currentColor;
      line-height: 1.42;
      color: #59886B;
      margin-block-end: 20px;

      svg {
        flex: 0 0 18px;
        width: 18px;
      }
    }

    .h6 {
      color: #312325B2;
      font-family: var(--text-font-family);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.333;
      text-transform: uppercase;
    }
  }

  .product__dog-size__step {
    flex-direction: column;
    gap: 20px;

    &:not(.hidden) {
      display: flex;
    }

    &[data-step="1"] {

      header {

        .h6 {
          margin-bottom: 12px;
        }
      }
      
      .product__dog-size__text {
        margin-top: -5px;

        p {
          font-size: 16px;
          line-height: 1.5;
        }
      }
    }

    &[data-step="2"] {
      
      header {

        .h6 {
          margin-bottom: 6px;
        }
      }
    }
  }

  .product__dog-size__dogs {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: 4px;
    /* Karten strecken sich nur innerhalb ihrer Zeile. Der letzte Hund steht
       allein in der letzten Zeile und wuerde durch seinen zweizeiligen Text
       hoeher ausfallen als die uebrigen — 1fr gleicht alle Zeilen an. */
    grid-auto-rows: 1fr;

    .product__dog-size__dog {
      display: flex;
      flex-direction: column;
      gap: 4px;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid #E3DCCF;
      /* Feste Hoehe war zu knapp, seit die Dosierloeffel-Zeile groesser gesetzt
         ist: beim letzten Hund bricht sie auf zwei Zeilen um. min-height statt
         height laesst die Karte mitwachsen; da Grid-Items sich ohnehin auf die
         Zeilenhoehe strecken, bleiben alle Karten gleich hoch. */
      min-height: 120px;
      cursor: pointer;

      &.is-active {
        background-color: #312325;
        border-color: #312325;
        color: #fff;
      }

      img {
        height: 50px;
        width: 50px;
        object-fit: contain;
      }

      &.is-active {
        
        img {
          filter: invert(1) brightness(150%);
        }
      }

      span {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.53;
        display: block;
      }

      small {
        font-size: 14px;
        line-height: 1.333;
        display: block;
      }
    }
  }

  .product__dog-size__form {
    --title-height: 60px;
    --padding: 4px;
    background-color: #EAE0D6;
    border-radius: 12px;
    padding: calc(var(--title-height) + var(--padding)) var(--padding) var(--padding);
    position: relative;

    form {
      padding: 16px;
      background-color: #fff;
      border-radius: 10px;
    }
  }

  .product__dog-size__products {
    background-color: #F6F2EE;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    .product__dog-size__products-title {
      font-size: 17px;
      line-height: 1.333;

      em {
        font-style: normal;
        color: #59886B;
      }
    }

    .product__dog-size__products-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;

      .product__dog-size__products-message {
        position: absolute;
        inset: -12px;
        backdrop-filter: blur(8px);
        background-color: #F6F2EE3D;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.42;
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
      }

      .product__dog-size__products-item {
        background-color: #fff;
        border-radius: 8px;
        /* Vorher 4px oben/unten — mit der groesseren Schrift stand der Text
           direkt an der Kastenkante. */
        padding: 10px 14px 10px 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.42;

        img {
          width: 32px;
          flex: 0 0 32px;
          aspect-ratio: 1;
          border-radius: 4px;
        }

        small {
          display: block;
          color: #312325B2;
          font-size: 14px;
          /* Enger an den Produkttitel darunter: 1.666 erzeugte eine sichtbare
             Luecke zwischen "1. LIEFERUNG" und dem Namen des Geschenks. */
          line-height: 1.25;
        }
      }
    }
  }

  recharge-form {
    --title-height: 60px;
    --content-padding: 16px;
    display: block !important;
    margin-block-end: 0 !important;

    .recharge-form__section-selling-plans {
      position: absolute;
      z-index: -1;
      visibility: hidden;
    }

    .product__dog-size__submit {

      .button[type="submit"] {
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        height: 56px;
        width: 100%;
        margin-block-end: 0;
      }
    }

    .recharge-form__section {
      border: 0 !important;
      padding: 0;

      .recharge-form__section-variant-benefits {
        --icon: url("data:image/svg+xml,%3Csvg%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d=%22M8%201C4.13425%201%201%204.13425%201%208C1%2011.8658%204.13425%2015%208%2015C11.8658%2015%2015%2011.8658%2015%208C15%204.13425%2011.8658%201%208%201ZM11.9124%206.66241L7.50241%2011.0724C7.39275%2011.1821%207.24459%2011.2434%207.09%2011.2434C6.93541%2011.2434%206.78666%2011.1821%206.67759%2011.0724L4.66334%209.05814C4.43525%208.83011%204.43525%208.46139%204.66334%208.23336C4.89141%208.00525%205.26009%208.00525%205.48816%208.23336L7.09%209.83514L11.0876%205.83759C11.3156%205.6095%2011.6844%205.6095%2011.9124%205.83759C12.1405%206.06566%2012.1405%206.43434%2011.9124%206.66241Z%22%20fill=%22%2359886B%22%2F%3E%0A%3C%2Fsvg%3E");
        flex: 0 0 100%;
        display: none;
        text-align: left;

        ul {
          margin-block-start: 0;
          display: flex;
          flex-direction: column;
          /* 4px reichten, solange jeder Punkt einzeilig war. Seit die Schrift
             groesser ist, brechen laengere Punkte um — dann standen die Zeilen
             innerhalb eines Punktes genauso dicht wie die Punkte untereinander,
             und die Liste las sich nicht mehr als Aufzaehlung. */
          gap: 8px;

          li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 15px;
            line-height: 1.5;
            font-weight: 400;
            -webkit-text-stroke: 0.25px currentColor;
            min-width: 0;
            overflow-wrap: break-word;
            word-break: break-word;
            list-style: none;

            &::before {
              content: '';
              background: var(--icon) center / cover no-repeat;
              flex: 0 0 16px;
              aspect-ratio: 1;
              margin-top: 2px;
            }
          }
        }
      }
    }

    /* Pflegbarer Text direkt ueber der Paketauswahl, gilt fuer beide Layouts */
    .recharge-form__section-intro {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.45;
      color: #312325;
    }

    .recharge-form__section-variants {
      flex-direction: column;

      .recharge-form__section-variant {
        width: 100%;

        /* Das Badge sitzt zur Haelfte ausserhalb der Karte und ragt 10px nach
           oben heraus — bei 10px Listenabstand beruehrte es die Karte darueber.
           Nur die Karte mit Badge bekommt den Zusatzabstand, damit alle uebrigen
           Abstaende in der Liste unveraendert bleiben. */
        &:has(.recharge-form__section-variant-badge) {
          margin-top: 8px;
        }

        label {
          /* Unterkante des Badges liegt 18px unter der Kartenoberkante; mit den
             bisherigen 12px Polsterung ueberlappte es den Preis um 4px. */
          /* Symmetrie: oben schafft das Badge 26px Luft bis zum Preis, unten
             stuenden sonst nur die 12px der Grundpolsterung unter den Vorteilen.
             Gleicher Wert auf beiden Seiten laesst die Karte ruhig wirken. */
          &:has(.recharge-form__section-variant-badge) {
            padding-top: 26px;
            padding-bottom: 26px;
          }

          --border-color: #31232533;
          flex-direction: row;
          flex-wrap: wrap;
          background: none;
          color: #312325;
          border-color: var(--border-color);
          gap: 12px;
          padding: 12px;
          transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;

          &::before {
            content: '';
            width: var(--size);
            flex: 0 0 var(--size);
            border-radius: 50%;
            aspect-ratio: 1;
            border: 1px solid var(--border-color);
          }

          .recharge-form__section-variant-title {
            font-size: 16px;
            line-height: 1.42;
            font-weight: 700;
            text-align: left;
            margin-inline-end: auto;
            flex: 1;
          }

          .recharge-form__section-variant-badge {
            /* Etwas groesser als zuvor (11px Schrift, 2px Polsterung), damit das
               Badge schneller ins Auge faellt. Die Breite bleibt gleich — das
               seitliche Padding ist unveraendert. */
            font-size: 14.5px;
            font-weight: 700;
            line-height: 1.45;
            background-color: #59886B;
            color: #fff;
            padding: 4px 25px;
            border-radius: 4px;
            position: absolute;
            top: 3px;
            right: 4%;
            transform: translateY(-50%);
          }

          .recharge-form__section-variant-weeks {
            display: block;
            font-weight: 400;
            white-space: nowrap;
            flex: 1;

            b, strong {
              font-weight: 400;
            }
          }

          .recharge-form__section-variant-sale-badge {
            /* Basis sind 11px aus recharge-form.css. Diese Datei teilt sich das
               Popup mit der normalen BuyBox, deshalb wird der Wert hier lokal
               erhoeht und nicht dort. */
            font-size: 13px;
            transform: none;
            position: static;
            margin-inline-start: 4px;
            padding: 5px 4px;
            display: inline-flex;
            align-items: center;
            line-height: 1;
          }

          .recharge-form__section-variant-right {
            display: flex;
            justify-content: end;
            flex-direction: column;
            gap: 0 8px;
            text-align: end;
            flex: 1;
          }

          .recharge-form__section-variant-price {
            margin: 0;
            font-size: 16px;
            line-height: 1.42;
            flex: 0 0 auto;
          }

          .recharge-form__section-variant-daily {
            font-size: 14px;
            line-height: 1.333;
          }
        }

        input:checked + label {
          --border-color: #312325;
          box-shadow: 0 10px 0 #fff;
          background: #f5fff9;

          &::before {
            background: var(--border-color);
            box-shadow: 0 0 0 3px #fff inset;
          }

          .recharge-form__section-variant-benefits {
            display: flex;
          }
        }
      }
    }

    .recharge-form__block {

      .recharge-form__section-title {
        --height: 60px;
        --spacing: 4px;
        position: absolute;
        top: var(--spacing);
        right: var(--spacing);
        height: var(--height);
        width: 50%;
        display: flex;
        gap: 4px;
        justify-content: center;
        align-items: center;
        padding-left: 0;
        /* Beim Tabwechsel aendern sich Hintergrund, Radius und Schatten
           gleichzeitig — werden nicht alle drei animiert, springt der Rest,
           waehrend nur die Farbe blendet, und genau das wirkt abrupt. */
        transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
                    box-shadow .3s cubic-bezier(.4, 0, .2, 1),
                    border-radius .3s cubic-bezier(.4, 0, .2, 1),
                    color .3s cubic-bezier(.4, 0, .2, 1);

        &::before,
        &::after {
          display: none;
        }
        
        & > span {
          font-family: var(--text-font-family);
          font-weight: 500;
        }

        /* Immer sichtbar, damit die Tab-Leiste beim Umschalten nicht springt.
           Schreibweise bewusst wie eingegeben, kein uppercase. */
        & > small {
          background-color: #EC91D8;
          color: #fff;
          font-size: 14px;
          font-weight: 700;
          line-height: 1.333;
          padding: 2px 4px 2px 6px;
          border-radius: 24px;
          display: block;
        }

        .recharge-form__section-title-block {
          display: none;
        }
      }

      /* (Das Badge ist jetzt dauerhaft sichtbar — die frueher hier stehende
         Regel, die es nur bei gewaehltem Sparabo einblendete, entfaellt.) */

      input[name="recharge-form-type"]:checked + .recharge-form__section {

        .recharge-form__section-title {
          border-radius: 10px 10px 0 0;
          background: #fff;
          box-shadow: 0 10px #fff;

          /* Gleiche Staerke wie im inaktiven Tab: der aktive Tab wird allein
             durch das weisse Kaestchen kenntlich gemacht. Ein Wechsel der
             Schriftstaerke laesst sich ausserdem nicht sauber animieren und
             verschiebt die Beschriftung. */
          & > span {
            font-weight: 500;
          }
        }

        /* Tab-Wechsel: der eingeblendete Bereich fadet ein und gleitet dabei
           minimal nach oben. Bewusst kein echtes Cross-Fade — der alte Bereich
           wird per display:none entfernt, das laesst sich nicht animieren; eine
           Hoehen-Animation waere teuer und wuerde ruckeln, weil beide Panels
           unterschiedlich hoch sind. */
        .recharge-form__section-content {
          animation: dog-size-tab-fade .34s cubic-bezier(.22, .61, .36, 1) both;
        }
      }
    }

    [name="recharge-form-type"][value="single"] + .recharge-form__section {

      .recharge-form__section-variant-benefits {
        
        ul {

          li:not(:first-child) {
            --icon: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%208C2%207.46957%202.21071%206.96086%202.58579%206.58579C2.96086%206.21071%203.46957%206%204%206H12C12.5304%206%2013.0391%206.21071%2013.4142%206.58579C13.7893%206.96086%2014%207.46957%2014%208V12.6667C14%2013.1971%2013.7893%2013.7058%2013.4142%2014.0809C13.0391%2014.456%2012.5304%2014.6667%2012%2014.6667H4C3.46957%2014.6667%202.96086%2014.456%202.58579%2014.0809C2.21071%2013.7058%202%2013.1971%202%2012.6667V8ZM8.66667%209.33333C8.66667%209.15652%208.59643%208.98695%208.4714%208.86193C8.34638%208.7369%208.17681%208.66667%208%208.66667C7.82319%208.66667%207.65362%208.7369%207.5286%208.86193C7.40357%208.98695%207.33333%209.15652%207.33333%209.33333V11.3333C7.33333%2011.5101%207.40357%2011.6797%207.5286%2011.8047C7.65362%2011.9298%207.82319%2012%208%2012C8.17681%2012%208.34638%2011.9298%208.4714%2011.8047C8.59643%2011.6797%208.66667%2011.5101%208.66667%2011.3333V9.33333Z%22%20fill%3D%22%23312325%22/%3E%3Cpath%20d%3D%22M5.3335%206.66667V4.66667C5.3335%203.95942%205.61445%203.28115%206.11454%202.78105C6.61464%202.28095%207.29292%202%208.00016%202C8.70741%202%209.38568%202.28095%209.88578%202.78105C10.3859%203.28115%2010.6668%203.95942%2010.6668%204.66667V6.66667%22%20stroke%3D%22%23312325%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
            opacity: .5;
            text-decoration: line-through;
          }

          /* Der Gratisversand gilt ab der Schwelle auch fuer eine einmalige
             Lieferung. Dann bekommt der Punkt wieder den gruenen Haken und keine
             Durchstreichung — wie die Garantie darueber. Unterhalb der Schwelle
             steht dort "ab der 2. Lieferung", was fuer einen Einmalkauf nicht
             zutrifft, also bleibt er dort ausgegraut. Die Klasse setzt Liquid
             beim Rendern und das JS beim Variantenwechsel. */
          li.is-included {
            --icon: var(--icon-included, url("data:image/svg+xml,%3Csvg%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d=%22M8%201C4.13425%201%201%204.13425%201%208C1%2011.8658%204.13425%2015%208%2015C11.8658%2015%2015%2011.8658%2015%208C15%204.13425%2011.8658%201%208%201ZM11.9124%206.66241L7.50241%2011.0724C7.39275%2011.1821%207.24459%2011.2434%207.09%2011.2434C6.93541%2011.2434%206.78666%2011.1821%206.67759%2011.0724L4.66334%209.05814C4.43525%208.83011%204.43525%208.46139%204.66334%208.23336C4.89141%208.00525%205.26009%208.00525%205.48816%208.23336L7.09%209.83514L11.0876%205.83759C11.3156%205.6095%2011.6844%205.6095%2011.9124%205.83759C12.1405%206.06566%2012.1405%206.43434%2011.9124%206.66241Z%22%20fill=%22%2359886B%22%2F%3E%0A%3C%2Fsvg%3E"));
            opacity: 1;
            text-decoration: none;
          }
        }
      }
    }

    [name="recharge-form-type"][value="selling_plan"] + .recharge-form__section {

      .recharge-form__section-title {
        right: auto;
        left: var(--spacing);
      }
    }
  }
}

@media screen and (max-width: 699px) {

  product--dog-size {

    .product__dog-size__buybox {
      gap: 12px;

      .button {
        /* Hoehe +20% (61px), Schrift zweimal +20% (14px -> 16.8px -> 20.16px) */
        height: 73.2px;
        font-size: 20.16px;
      }

      .product__dog-size__buybox-bullets {
        gap: 6px;
        padding: 16px 12px;
      }
    }
  }

  product--dog-size--drawer {
    bottom: 0;
    padding-top: 16px;
    max-height: 100dvh;
    display: flex;
    align-items: end;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: 22px;

    .custom-drawer__container {
      overflow: hidden;
      border-radius: 12px 12px 0 0;
      background-color: #fff;
      max-height: calc(100dvh - 92px);
      transform: translateZ(0);
    }

    .custom-drawer__content {
      overflow: auto;
      max-height: calc(100dvh - 92px);
      overscroll-behavior: contain;
    }

    .outside-close-button {
      background-color: #fff;
      transform: none;
      position: relative;
      inset: auto;
      margin: 0 auto;
    }

    .custom-drawer__overlay {
      cursor: var(--cursor-close-svg-url) 28 28, auto;
    }

    .product__dog-size__form {
      /* Own variable name on purpose: --title-height is redeclared on the inner
         <recharge-form>, which would shadow it before it reaches the labels.
         Konstante Hoehe: 4px Versatz + 22px Textzeile + 2px Zeilenabstand
         + 23px Badge + 13px Luft = 64px. Nach der Schriftvergroesserung fuellte
         der Inhalt 45 der 52 nutzbaren Pixel — zu eng. Frueher wurde hier
         zwischen 30px und 56px umgeschaltet, je nachdem ob das Badge sichtbar
         war — dadurch sprang die Tab-Leiste beim Wechsel. Das Badge steht jetzt
         dauerhaft, also bleibt auch die Hoehe konstant. */
      --tab-strip: 64px;
      padding-top: calc(var(--tab-strip) + var(--padding));
    }

    .product__dog-size__step header {

      .h5 {
        font-size: 19px;
      }
    }

    [is="close-button"] {
      display: none;
    }

    .product__dog-size__dogs {
      --columns: 2;
      margin-block-end: 40px;
    }

    recharge-form {

      .recharge-form__section-variant-benefits {
        padding-left: 8px;
      }

      .recharge-form__section-variants {

        .recharge-form__section-variant {

          /* Auf schmalen Screens sprang die Preisspalte in eine eigene Zeile,
             obwohl noch Platz war: Der Wochen-Text ist nowrap und diktierte
             damit die Mindestbreite der linken Spalte. Titel plus Badge
             bleiben zusammen in einer Zeile, der Wochen-Text darf umbrechen,
             die Preisspalte nimmt nur ihre Inhaltsbreite.
             Bewusst unter `label` verschachtelt: die Basisregeln stehen dort
             ebenfalls, flacher gesetzt verlieren diese hier die Spezifitaet. */
          label {

            &::before {
              --size: 20px;
            }

            .recharge-form__section-variant-title {
              min-width: 0;
              white-space: nowrap;
            }

            .recharge-form__section-variant-weeks {
              white-space: normal;
            }

            .recharge-form__section-variant-right {
              flex: 0 0 auto;
              min-width: 0;
            }
          }

          .recharge-form__section-variant-text {
            font-size: 14px;
            line-height: 1.333;

            b {
              display: block;
            }
          }
        }
      }

      .recharge-form__block {

        .recharge-form__section-title {
          width: 48%;
          height: calc(var(--tab-strip) - var(--spacing));
          flex-wrap: wrap;
          /* centred, so the single-line tab sits in the middle of the strip
             instead of clinging to the top while its neighbour wraps to two
             lines, and the wrapped tab keeps even air above and below */
          align-content: center;
          justify-content: center;
          row-gap: 2px;
          overflow: hidden;

          & > span {
            font-size: 16px;
            flex: 0 0 100%;
            text-align: center;
          }

          & > small {
            flex: 0 1 auto;
            min-width: 0;
            max-width: 100%;
            white-space: nowrap;
          }
        }

        .recharge-form__section-variant-price {
          order: -2;
        }

        .recharge-form__section-variant-per {
          display: flex;
          flex-direction: column;
        }
      }
    }

    .custom-drawer__content {
      padding-block-end: 0;
    }

    .product__dog-size__step {

      &[data-step="2"] {
      }
    }

    .product__dog-size__submit {
      position: sticky;
      bottom: 0;
      z-index: 5;
      background-color: #fff;
      margin: 22px -40px -138px;
      border-top: 1px solid #3123251F;
      padding: 20px;

      &::before {
        content: '';
        display: block;
        background-color: #3123251F;
        height: 1px;
      }
    }
  }
}

@media screen and (min-width: 700px) {

  product--dog-size {

    .product__dog-size__buybox {
      gap: 16px;

      .button {
        /* +20% gegenueber den bisherigen 63px bzw. 18px */
        height: 75.6px;
        font-size: 21.6px;
      }

      .product__dog-size__buybox-text {
        font-size: 14.3px;
      }

      .product__dog-size__buybox-bullets {
        gap: 9px;
        padding: 9px 12px;
        height: 72px;
        font-size: 14.3px;

        variant-inventory {

          [data-variant-id]:not([hidden]) {
            justify-content: center;
          }
        }
      }
    }
  }

  product--dog-size--drawer {
    padding: 16px;
    top: 0;

    /* Seitlich 20px statt 10px: Die Sticky-Leiste unten zieht sich mit
       negativem Rand (-20px bzw. -33px in Variante 2) auf volle Breite und
       rechnet mit 20px Padding. Mit nur 10px ragte sie 10px je Seite heraus,
       das Popup liess sich dadurch horizontal verschieben. */
    .custom-drawer__content {
      padding-inline: 20px;
      padding-block-end: 0;
    }

    .product__dog-size__form {
      padding-bottom: 0;

      form {
        padding-bottom: 0;
      }
    }

    .custom-drawer__container {
      width: 620px;
      overflow: auto;
      overscroll-behavior: contain;
      border-radius: 12px;
      background-color: #fff;
      top: 50%;
      transform: translateY(-50%);
      margin-inline: auto;
    }

    /* X-Mitte sitzt 20px von oben und rechts: Inhalt hat rundum 20px Padding,
       Button ist 24px gross (Mitte 12px) → je 12px zuruecksetzen. */
    [is="close-button"] {
      margin: -12px -12px 0 0 !important;
      opacity: .5 !important;
    }

    .outside-close-button {
      display: none;
    }

    header {

      span {
        font-size: 17.4px;
      }

      .h6 {
        font-size: 15.2px;
      }
    }

    .product__dog-size__step header {
      align-items: start;
      gap: var(--spacing-4);
      display: flex;
      justify-content: space-between;
      position: relative;

      .h5 {
        font-size: 28.4px;
      }
    }

    .product__dog-size__dogs {
      --columns: 3;

      .product__dog-size__dog {

        span {
          font-size: 16.3px;
        }

        small {
          font-size: 15.2px;
        }
      }
    }

    .product__dog-size__step {

      &[data-step="1"] {
        /* Die Hunde-Auswahl stiess unten fast an den Popup-Rand */
        padding-bottom: 24px;

        .product__dog-size__text p {
          font-size: 17.6px;
        }
      }

      &[data-step="2"] {
        padding-bottom: 0;
      }
    }

    .product__dog-size__products {

      .product__dog-size__products-title {
        font-size: 18.5px;
      }

      .product__dog-size__products-items {

        .product__dog-size__products-message {
          font-size: 17.4px;
        }

        .product__dog-size__products-item {
          font-size: 17.4px;

          small {
            font-size: 15.2px;
          }
        }
      }
    }

    recharge-form {

      .product__dog-size__submit {

        .button[type="submit"] {
          font-size: 19.6px;
        }
      }

      .recharge-form__section-variant-benefits {
        margin-left: 13px;

        ul li {
          font-size: 16.3px;
        }
      }

      .recharge-form__section-variants {

        .recharge-form__section-variant {

          label {

            &::before {
              --size: 25px;
            }

            .recharge-form__section-variant-title {
              font-size: 17.4px;
            }

            .recharge-form__section-variant-badge {
              /* Desktop-Pendant zur Vergroesserung oben (vorher 12.1px) */
              font-size: 15.8px;
            }

            .recharge-form__section-variant-price {
              font-size: 17.4px;
            }

            .recharge-form__section-variant-daily {
              font-size: 15.2px;
            }
          }


          .recharge-form__section-variant-title {

            small {
              font-size: 16.3px;
              line-height: 1.53;
            }
          }
        }
      }

      .recharge-form__block {

        .recharge-form__section-title {

          & > span {
            font-size: 19.6px;
          }

          & > small {
            font-size: 15.2px;
          }
        }
      }

       .product__dog-size__submit {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background-color: #fff;
        margin: 22px -20px 0;
        border-top: 1px solid #3123251F;
        padding: 20px;

        &::before {
          content: '';
          display: block;
          background-color: #3123251F;
          height: 1px;
        }
      }
    }
  }
}
@keyframes dog-size-tab-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Popup oeffnen/schliessen: kurzes Ein- und Ausblenden statt hartem Umschalten.
   display laesst sich normalerweise nicht animieren; `allow-discrete` haelt das
   Element waehrend des Ausblendens sichtbar, `@starting-style` liefert den
   Startwert beim Einblenden. Browser ohne Unterstuetzung schalten weiterhin
   hart um — also kein Funktionsverlust, nur ohne Effekt. */
product--dog-size--drawer {
  transition: opacity .28s ease, display .28s allow-discrete;

  &:not(.is-active) {
    opacity: 0;
  }

  &.is-active {
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }
}

/* Wechsel zwischen Schritt 1 und 2: derselbe dezente Fade wie beim Tab-Wechsel */
product--dog-size--drawer .product__dog-size__step:not(.hidden) {
  animation: dog-size-tab-fade .34s cubic-bezier(.22, .61, .36, 1) both;
}

@media (prefers-reduced-motion: reduce) {

  product--dog-size--drawer,
  product--dog-size--drawer .product__dog-size__step:not(.hidden) {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  product--dog-size--drawer .recharge-form__section-content {
    animation: none !important;
  }
}

/* Product page: Dog size — Layout "Variante 2"
   Alles hier haengt an .custom-drawer--v2, damit das Standard-Layout
   unberuehrt bleibt. Gemeinsame Basis (Drawer, Schritt 1, Geschenke,
   Sticky-ATC) wird bewusst geerbt. */
product--dog-size--drawer.custom-drawer--v2 {

  /* Tab-Leiste traegt hier zwei Zeilen (Titel + Preis), darum mehr
     reservierter Platz als im Standard-Layout. Bewusst als feste Werte
     statt ueber --tab-strip, weil --title-height auf <recharge-form>
     erneut deklariert wird und die Variable dort abgefangen wuerde. */
  /* Alle Werte unten sind aus dem Design-PDF ausgemessen (Canvas 600x1086,
     1:1). Farben als Variablen, damit sie an einer Stelle pflegbar sind. */
  --v2-green: #63876D;
  --v2-pink: #DF95D4;
  --v2-beige: #E8E0D7;
  --v2-border: #D5D3D3;
  --v2-dark: #2F2425;
  --v2-gifts-bg: #F5F2EE;

  /* Im Standard-Layout ist der beige Container selbst der Rahmen um die
     Inhaltskarte. Im Entwurf ist die Box weiss mit grauem Rahmen und die
     beige Tab-Leiste ein eigener, 12px eingerueckter runder Container. */
  .product__dog-size__form {
    background-color: #fff;
    border: 1px solid var(--v2-border);
    border-radius: 12px;
    padding: 92px 12px 12px;

    &::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      height: 68px;
      background-color: var(--v2-beige);
      border-radius: 10px;
    }

    form {
      background: none;
      border-radius: 0;
      padding: 0;
    }
  }

  /* --- Tab-Leiste: Preise statt rosa Badge --- */
  .recharge-form__block {

    /* Aktiver Tab ist hier ein eigenstaendiges, rundum abgerundetes Kaestchen
       und verschmilzt nicht mit dem Inhalt darunter */
    /* Aktiver Tab: weisses Kaestchen ohne Rahmen, 4px im beigen Container */
    input[name="recharge-form-type"]:checked + .recharge-form__section {

      .recharge-form__section-title {
        background: #fff;
        border: 0;
        border-radius: 8px;
        box-shadow: none;

        & > span {
          font-weight: 400;
        }
      }
    }

    .recharge-form__section-title {
      /* 12px Einrueckung des beigen Containers + 4px Inset darin */
      --spacing: 16px;
      height: 60px;
      width: calc((100% - 32px) / 2);
      background: none;
      flex-wrap: wrap;
      align-content: center;
      row-gap: 2px;

      & > span {
        flex: 0 0 100%;
        text-align: center;
      }

      /* Preisblock ist im Markup vorhanden und wird im Standard-Layout
         ausgeblendet — hier wieder einblenden, auf eigener Zeile */
      .recharge-form__section-title-block {
        display: block;
        flex: 0 0 100%;
      }

      /* Versandhinweis passt nicht in die zweizeilige Leiste */
      .recharge-form__section-shipping {
        display: none;
      }

      /* Im Entwurf sind beide Tab-Beschriftungen normal gesetzt; der aktive
         Tab wird allein durch das weisse Kaestchen kenntlich gemacht */
      & > span {
        font-weight: 400;
      }

      .recharge-form__section-price-block {
        display: flex;
        gap: 6px;
        justify-content: center;
        align-items: baseline;
      }

      .recharge-form__section-price {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
      }

      .recharge-form__section-price--compared {
        font-weight: 400;
        opacity: .6;
        text-decoration: line-through;
      }

      .recharge-form__section-price--sale {
        color: var(--v2-green);
      }

      /* "Am guenstigsten"-Badge entfaellt in diesem Layout */
      & > small {
        display: none !important;
      }
    }
  }

  /* --- Headline ueber den Vorteilen --- */
  .recharge-form__section-headline {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #312325;
  }

  /* --- Vorteilsliste: einmal oberhalb der Varianten --- */
  .recharge-form__section-variant-benefits--standalone {
    display: flex !important;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    /* Haken in der Design-Gruenstufe #63876D */
    --icon: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M8%201C4.13425%201%201%204.13425%201%208C1%2011.8658%204.13425%2015%208%2015C11.8658%2015%2015%2011.8658%2015%208C15%204.13425%2011.8658%201%208%201ZM11.9124%206.66241L7.50241%2011.0724C7.39275%2011.1821%207.24459%2011.2434%207.09%2011.2434C6.93541%2011.2434%206.78666%2011.1821%206.67759%2011.0724L4.66334%209.05814C4.43525%208.83011%204.43525%208.46139%204.66334%208.23336C4.89141%208.00525%205.26009%208.00525%205.48816%208.23336L7.09%209.83514L11.0876%205.83759C11.3156%205.6095%2011.6844%205.6095%2011.9124%205.83759C12.1405%206.06566%2012.1405%206.43434%2011.9124%206.66241Z'%20fill='%2363876D'/%3E%3C/svg%3E");
  }

  /* Empfehlungs-Badge und Geschenke-Box in den Design-Toenen */
  .recharge-form__section-variant-badge {
    background-color: var(--v2-green);
  }

  .product__dog-size__products {
    background-color: var(--v2-gifts-bg);
  }

  .product__dog-size__submit .button[type="submit"] {
    background-color: var(--v2-green);
  }

  /* --- Variantenkarten --- */
  .recharge-form__section-variants {

    .recharge-form__section-variant {

      label {
        row-gap: 4px;
      }

      /* Variantentitel fett, Wochenangabe bewusst nicht — wie in Layout A.
         Weicht vom PDF ab, ist aber so gewuenscht. */
      .recharge-form__section-variant-title {
        font-weight: 700;
      }

      label {
        --border-color: var(--v2-border);
      }

      /* Ausgewaehlt: dunkler 1px-Rahmen, hellgruener Hintergrund wie Design 1 */
      input:checked + label {
        --border-color: var(--v2-dark);
        background: #f5fff9;
        border-width: 1px;
        box-shadow: none;
      }

      /* Rechte Spalte: Zeile 1 = Rabatt-Badge + Gesamtpreis,
         Zeile 2 = Packungspreis • Tagespreis */
      .recharge-form__section-variant-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
      }

      .recharge-form__section-variant-topline {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
      }

      /* Badge sitzt wie in Layout A direkt neben dem Titel, nur im
         Design-Rosaton */
      .recharge-form__section-variant-sale-badge {
        background: var(--v2-pink);
      }

      .recharge-form__section-variant-price {
        font-weight: 700;
      }

      .recharge-form__section-variant-subline {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 4px;
        font-size: 13px;
        line-height: 1.4;
        white-space: nowrap;
        opacity: .75;
      }
    }
  }

  /* Sticky-Leiste und ihre Trennlinie ueber die volle Popup-Breite:
     20px Drawer-Padding + 1px Box-Rahmen + 12px Box-Padding = 33px.
     Die Linie kommt allein von border-top; das zusaetzliche ::before lag
     innerhalb des Paddings und blieb daher an beiden Seiten zu kurz. */
  .product__dog-size__submit {
    margin-inline: -33px;

    &::before {
      display: none;
    }
  }
}

@media screen and (max-width: 699px) {

  product--dog-size--drawer.custom-drawer--v2 {

    /* Kein eigenes padding-top hier: die reservierte Hoehe von 92px aus dem
       Basis-Block muss auch auf Mobile gelten, sonst schiebt sich die beige
       Tab-Leiste (12px oben + 68px hoch) ueber die Headline. */

    .recharge-form__block {

      .recharge-form__section-title {

        .recharge-form__section-price {
          font-size: 15px;
        }
      }
    }

    .recharge-form__section-headline {
      font-size: 16px;
    }

    /* Mobile-Basisregel zieht den Preis per order: -2 vor das Badge —
       in Layout B soll das Badge links vom Preis stehen wie auf Desktop */
    .recharge-form__section-variant-topline {

      .recharge-form__section-variant-price {
        order: 0;
      }
    }
  }
}

@media screen and (min-width: 700px) {

  product--dog-size--drawer.custom-drawer--v2 {

    /* Design-Canvas ist 600px breit (PDF-MediaBox 600x1086, 1:1).
       min() statt fester Breite, damit das Popup auf schmalen Laptops
       und Tablets nicht seitlich herauslaeuft. */
    .custom-drawer__container {
      width: min(600px, 100%);
    }

    .recharge-form__block {

      .recharge-form__section-title {

        .recharge-form__section-price {
          font-size: 17.4px;
        }
      }
    }

    .recharge-form__section-headline {
      font-size: 18.5px;
    }

    .recharge-form__section-variant-benefits--standalone {

      ul li {
        font-size: 16.3px;
      }
    }

    /* Geschenke-Ueberschrift soll wie im Entwurf auf eine Zeile passen */
    .product__dog-size__products .product__dog-size__products-title {
      font-size: 17.4px;
    }

    .recharge-form__section-variants {

      .recharge-form__section-variant {

        .recharge-form__section-variant-subline {
          font-size: 13px;
        }
      }
    }
  }
}
/* Einheitliche Lesegroessen, gueltig fuer beide Layouts. Zwei Stufen:
     Stufe 1 — Flieusstext und Geschenke:            16px mobil / 18px Desktop
     Stufe 2 — Vorteile, Lieferintervall, Tages-
               preis, Dosierloeffel (Schritt 1) und
               "Aendere das Gewicht":                14.4px / 16.2px (-10%)
   Titel, Preise, Badges und Tab-Beschriftungen behalten ihre Abstufung.
   !important ist hier Absicht: die Ausgangsregeln stehen tief verschachtelt
   (bis zu sechs Ebenen) und in den Layout-spezifischen Bloecken. Eine flache
   Sammelregel wuerde sonst durchweg die Spezifitaet verlieren. */
product--dog-size--drawer {

  /* Die beiden erklaerenden Einleitungstexte bleiben bewusst bei 16px — sie
     waren von der generellen Vergroesserung ausgenommen. */
  .product__dog-size__text p,
  .recharge-form__section-intro {
    font-size: 16px !important;
  }

  .product__dog-size__products-title,
  .product__dog-size__products-item {
    font-size: 18px !important;
  }

  .product__dog-size__dog small,
  header span[data-step] {
    font-size: 16.4px !important;
  }

  /* Vorteile ein Pixel kleiner als die uebrige Sekundaerschrift */
  .recharge-form__section-variant-benefits li {
    font-size: 15.4px !important;
  }

  /* Lieferrhythmus und Tagespreis 10 % kleiner — die kleinste Schrift im Popup */
  .recharge-form__section-variant-weeks,
  .recharge-form__section-variant-daily {
    font-size: 14.76px !important;
  }
}

@media screen and (min-width: 700px) {

  product--dog-size--drawer {

    /* Desktop-Pendant: Einleitungstexte bleiben bei 18px */
    .product__dog-size__text p,
    .recharge-form__section-intro {
      font-size: 18px !important;
    }

    .product__dog-size__products-title,
    .product__dog-size__products-item {
      font-size: 20px !important;
    }

    .product__dog-size__dog small,
    header span[data-step] {
      font-size: 18.2px !important;
    }

    /* Desktop-Pendant: Vorteile ein Pixel kleiner */
    .recharge-form__section-variant-benefits li {
      font-size: 17.2px !important;
    }

    /* Desktop-Pendant: Lieferrhythmus und Tagespreis 10 % kleiner */
    .recharge-form__section-variant-weeks,
    .recharge-form__section-variant-daily {
      font-size: 16.38px !important;
    }

    /* Der Zurueck-Button ist auf Desktop nochmals 10 % kleiner als die uebrige
       Sekundaerschrift. Die Regel steht bewusst nach der Sammelregel oben —
       gleiche Spezifitaet, spaeter im Dokument, also gewinnt sie. */
    header span[data-step] {
      font-size: 16.58px !important;
    }
  }
}
/* /Product page: Dog size */
/* Safe area (iOS)
   Gegenstueck zu viewport-fit=cover in theme.liquid. Die Seite reicht jetzt bis
   an den unteren Bildschirmrand — damit fuellen unten fixierte Elemente den
   Streifen des Home-Indicators aus, statt einen hellen Rand stehen zu lassen.
   Ohne die Abstaende hier laege ihr Inhalt allerdings unter dem Indicator, wo er
   schlecht zu treffen ist. Also: Hintergrund bis nach unten, Inhalt darueber.

   Auf Geraeten ohne Home-Indicator ist env(safe-area-inset-bottom) = 0px, die
   Regeln sind dort also wirkungslos. Der Fallback deckt aeltere Browser ab, die
   env() nicht kennen. */
@media screen and (max-width: 699px) {

  /* Groessen-Popup: das weisse Kaestchen reicht bis ganz nach unten, der
     Sticky-ATC-Button bleibt oberhalb des Indicators. Die Maximalhoehen muessen
     denselben Betrag abziehen, sonst laeuft der Inhalt unten heraus. */
  product--dog-size--drawer {

    .custom-drawer__container {
      padding-bottom: env(safe-area-inset-bottom, 0px);
      max-height: calc(100dvh - 92px - env(safe-area-inset-bottom, 0px));
    }

    .custom-drawer__content {
      max-height: calc(100dvh - 92px - env(safe-area-inset-bottom, 0px));
    }
  }

  /* Sticky-ATC-Leiste der Produktseite */
  .product-quick-add {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  /* Cookie-Banner und der schwebende Filter-Button in Kollektionen */
  .privacy-bar {
    margin-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom, 0px));
  }

  .facets-drawer__floating-apply {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Aus dem "Custom CSS"-Feld des main-product-Abschnitts in
   templates/product.new-buybox-popup(.json|-2.json) hierher verschoben:
   die 6 Regeln zusammen ueberschritten Shopifys 500-Zeichen-Limit fuer
   dieses Feld, wodurch das Template im Theme-Editor/beim GitHub-Connect
   nicht gespeichert/importiert werden konnte (FileSaveError). Inhaltlich
   unveraendert, nur der Ablageort. */
@media only screen and (max-width: 1200px) {
  .product-info__text-icon {
    margin-bottom: 20px !important;
  }
  .dynamic-banner__link {
    align-items: center;
    height: 36px !important;
    padding: 0 20px !important;
    margin-top: 9px !important;
  }
  .dynamic-banner__info {
    margin-top: 9px !important;
  }
}

@media only screen and (min-width: 1200px) {
  .dynamic-banner__link {
    align-items: center;
    margin-top: 9px !important;
  }
  .dynamic-banner__info {
    margin-top: 20px !important;
  }
}

/* Einheitliche Hoehe aller Promo-Banner (BuyBox, Desktop-Menue, Handy-Menue) auf Handy und Desktop, statt
   festem Seitenverhaeltnis: mindestens 200px, waechst nur, wenn der Inhalt mehr braucht (nie abgeschnitten).
   Inhalt vertikal zentriert (vorher unten ausgerichtet plus fester Abstand oben). In der BuyBox per Promo-Block
   ueberschreibbar (Regler unten, 0 = diese 200px). */
.dynamic-banner,
.product__promo .dynamic-banner {
  aspect-ratio: auto;
  height: auto;
  min-height: 200px;
  align-items: center;
}
.dynamic-banner .dynamic-banner__info {
  margin-top: 0 !important;
}

/* Promo-Block: Hoehe optional im Theme-Editor (Hoehe Banner mobil / Desktop, 0 = Standard 200px wie oben). */
@media screen and (max-width: 999px) {
  .product__promo--h-m .dynamic-banner { aspect-ratio: auto; height: auto; min-height: var(--promo-h-m); }
}
@media screen and (min-width: 1000px) {
  .product__promo--h-d .dynamic-banner { aspect-ratio: auto; height: auto; min-height: var(--promo-h-d); }
}

.product__dog-size__buybox {
  align-items: stretch;
}

.product-preorder-note {
  width: 100%;
  margin-bottom: 16px;
}

.product-preorder-note .lb-delivery-info-hr {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center;
}

/* Product Card: Custom-Badges (Metafeld custom.badges, z. B. "#1 Bestseller") in Pink wie auf der PDP */
.product-card__badge-list .badge--primary {
  --badge-background: 235 146 215; /* #EB92D7 */
  --badge-color: 49 35 37; /* #312325 */
}

/* Exklusiv-Sichtbarkeit (Ankuendigungsbar, Promo Hero): versteckte Variante sicher ausblenden. */
[data-exclusive-visibility][hidden] { display: none !important; }

/* PDP: Rabatt-Badge (-20%) und Metafeld-Badges (#1 Bestseller) in einer Zeile und im gleichen Stil
   (pink, dunkle Schrift, gleiche Groesse/Rundung); der Rabatt bleibt fett. */
.product-info .product-info__badge-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.product-info .product-info__badge-list .badge--on-sale,
.product-info .product-info__badge-list .badge--primary {
  --badge-background: 235 146 215; /* #EB92D7 */
  --badge-color: 49 35 37; /* #312325 */
  padding: 3px 9px;
  border-radius: 4px;
  font-family: Satoshi, sans-serif;
  font-size: 15px;
  line-height: 19px;
  letter-spacing: 0;
  text-transform: none;
}
.product-info .product-info__badge-list .badge--primary { font-weight: 500; }
.product-info .product-info__badge-list .badge--on-sale { font-weight: 700; }

/* Promo-Banner: immer Abstand zum Kaufbutton bzw. Element darueber (unter "Jetzt Paket auswaehlen", unter dem
   Kaufbutton und im Recharge-Formular). Padding statt Margin, damit "Abstand oben" im Promo-Block weiter addiert. */
.product__promo { padding-top: 16px; }