.product_cat-metodos .product--wrap, .product_cat-accesorios .product--wrap {padding-top: var(--size-96);}
.product__info .product__details {padding-bottom: var(--size-64); padding-top: var(--size-64); top: var(--size-56); position: sticky;}
.product__info .product__gallery ul {list-style: none; display: flex; flex-direction: column; gap: var(--size-16); margin: 0; padding: 0;}
.product__info .product__gallery img {border-radius: var(--size-8);}
.product-section {padding-bottom: var(--size-96); padding-top: var(--size-96);}

.accordion-item {border-radius: var(--size-16); transition: background-color 0.5s linear;}
.accordion-item.active {background-color: var(--color-gray_light);}
.accordion-header {background: transparent; border: none; cursor: pointer; display: flex; justify-content: space-between; font-size: var(--size-24); font-weight: 500; padding: var(--size-24); text-align: left; width: 100%;}
.accordion-header i {aspect-ratio: 1; position: relative; width: var(--size-16);}
.accordion-header i:before, .accordion-header i:after {background: var(--color-dark_blue); content: " "; height: 2px; left: 50%; position: absolute; top: 50%; transition: transform 0.3s ease-out; transform: translate(-50%, -50%); width: 100%;}
.accordion-item:not(.active) .accordion-header i:after {transform: translate(-50%, -50%) rotate(90deg);}
.accordion-item.active .accordion-header i {transform: rotate(.5turn);}
.accordion-content {max-height: 0; opacity: 0; overflow: hidden; padding: 0 var(--size-24); transition: max-height 0.5s ease-out, opacity 0.5s, padding 0.5s;}
.accordion-item.active .accordion-content {max-height: 200px; opacity: 1; padding: 0 var(--size-24) var(--size-24);}

.product__heading {position: relative; z-index: 2;}
.product__heading .product-title {position: relative; text-align: center;}
.product__heading .product-title .title--main_flavors ul {list-style: none; padding: 0;}
.product__heading .product-title .title--main_flavors li {display: inline-flex; gap: var(--size-16);}
.product__heading .product-title h1 {font-family: var(--font-janeiro); letter-spacing: 0; text-transform: uppercase;}
.product__heading .product__brand {max-height: var(--size-80); max-width: var(--size-112);}
.product__heading .product__image {position: relative; text-align: center;}
.product__heading .product__image figure {display: inline-block;}

.product__flavors {display: flex; align-items: center; overflow: hidden; padding: var(--size-32); position: relative; width: 100%; z-index: 1;}
.product__flavors ul {display: flex; gap: 0; margin: 0; list-style: none; padding: 0;}
.product__flavors ul li {display: flex; align-items: center; gap: 0; font-weight: 400; letter-spacing: -3px; line-height: 1; white-space: nowrap;}
.product__flavors ul li i {font-size: 5vw; margin: 0 10vw;}

.product__actions {bottom: 0; opacity: 0; padding: var(--size-8) 0; position: sticky; top: 80%; transition: opacity 0.3s; z-index: 99;}
.product__actions:before {content: " "; mask: linear-gradient(transparent, black, black); backdrop-filter: blur(8px); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0;}
.product__actions.is-scrolled:before {top: 0;}
.product__actions.is-pinned {opacity: 1;}
.product__actions .column.is-left {display: flex; align-items: center; gap: var(--size-16); font-weight: 600;}

.product__actions .wrap {position: relative; z-index: 1;}
.product__actions .column.is-left ul {display: flex; list-style: none;}
.product__actions .column.is-left ul li:not(:first-child):before {content: "·"; padding-left: var(--size-16);}
.product__actions .column.is-left ul li {display: flex; gap: var(--size-16);}
.product__actions .column.is-right {display: flex; align-items: center; justify-content: flex-end;}
.product__actions .column.is-right .cart {display: flex; justify-content: flex-end;}
.product__actions .column.is-right .product_coffee_custom_grind select {border: 1px solid var(--color-beige); border-radius: var(--size-32) !important; padding: var(--size-16) var(--size-24) !important;}
.product__actions .column.is-right .quantity {background: var(--color-white); border: 1px solid var(--color-beige); border-radius: var(--size-32); display: flex; align-items: center;}
.product__actions .column.is-right .quantity.low-stock {display: none;}
.product__actions .column.is-right .quantity button {aspect-ratio: 1; background: transparent; border: none;}
.product__actions .column.is-right .quantity input {-moz-appearance: textfield; border: none; padding: 0; text-align: center;}
.product__actions .column.is-right .quantity input::-webkit-outer-spin-button, .product__actions .column.is-right .quantity input::-webkit-inner-spin-button {-webkit-appearance: none;}
#product_coffee_grind {
  &, &::picker(select) {
    appearance: base-select;
    border: 1px solid var(--color-beige);
    border-radius: var(--size-16);
    cursor: pointer;
    padding: 0;
    line-height: var(--size-32);
    gap: var(--size-16);
  }
  &::picker-icon {
    content: "\e90a";
    font-family: 'singular' !important;
    font-size: var(--size-24);
  }
  &:focus::picker-icon {
    content: "\e907";
  }
  selectedcontent {
    display: flex;
    align-items: center;
    gap: .5ch;
    
    /* hide anything not an svg */
    > :not(svg) {
      display: none;
    }
  }
  option {
      cursor: pointer;
      display: grid;
      padding: var(--size-8) var(--size-16);
      grid-template-columns: [icon] auto [content] 1fr [mark] auto;
      transition: background-color 0.2s;
      
      &::checkmark {
        grid-area: 1 / mark;
        content: "\e90f";
        font-family: 'singular' !important;
      font-size: var(--size-16);
      }
      &:selected {
        font-weight: var(--font-500);
      }
      &:hover {
        background-color: var(--color-gray_light);
      }
    }

}

#product_coffee_grind {display: none;}
.custom-select-qty {position: relative; outline: none;}
.select--trigger {display: flex; align-items: center; justify-content: space-between; height: var(--size-64); border: 1px solid var(--color-beige); border-radius: var(--size-32); background: var(--color-white); cursor: pointer; color: var(--color-dark_blue);}
.select--trigger .selected-label {display: flex; align-items: center; gap: var(--size-8);}
.select--trigger .arrow {width: var(--size-16); height: var(--size-16); transition: transform 0.2s ease;}
.select--trigger .arrow [class^="icon-"] {font-size: var(--size-16);}
.custom-select-qty.open .select--trigger .arrow {transform: rotate(-180deg);}
.custom-select-qty.open .select--trigger {border-color: var(--color-dar_blue);}
.custom-options {position: absolute; bottom: 100%; left: 0; right: 0; background: var(--color-white); border: 1px solid var(--color-beige); border-radius: var(--size-16); overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 10; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; width: 12rem;}
.custom-select-qty.open .custom-options {opacity: 1; visibility: visible; transform: translateY(0);}
.option {display: flex; align-items: center; gap: var(--size-8); cursor: pointer; color: var(--color-dark_blue); padding: var(--size-8) var(--size-16); transition: background-color 0.15s ease; user-select: none;}
.option:not(:last-child) {border-bottom: 1px solid var(--color-beige);}
.option:hover {background-color: var(--color-gray_light);}
.option.selected {background-color: var(--color-dark_blue); color: var(--color-white);}
.option svg path {fill: var(--color-dark_blue);}
.option.selected svg path, .option.selected svg circle, .option.selected svg rect {fill: var(--color-white);}

.product__profile .profile-roast .roast__chart {height: var(--size-16); position: relative; width: 100%;}
.product__profile .profile-roast .roast__chart:before, .product__profile .profile-roast .roast__chart .roast__line, .product__profile .profile-roast .roast__chart .roast__limiter {background: var(--color-dark_blue); top: 50%; transform: translateY(-50%);}
.product__profile .profile-roast .roast__chart:before {content: " "; display: block; height: 1px; opacity: 0.3; position: relative; width: 100%; z-index: 1;}
.product__profile .profile-roast .roast__chart .roast__line {height: 2px; position: absolute; z-index: 2;}
.product__profile .profile-roast .roast__chart .roast__limiter {aspect-ratio: 1; height: var(--size-16); position: absolute; transform: translate(-50%, -50%) rotate(45deg);}

.product__profile .column.is-right {display: flex; flex-direction: column;}
.product__profile .profile-features dl {display: flex; flex-wrap: wrap;}
.product__profile .profile-features dt, .product__profile .profile-features dd {padding: var(--size-16) 0; margin: 0;}
.product__profile .profile-features dt:not(:first-of-type), .product__profile .profile-features dd:not(:first-of-type) {border-top: 1px solid var(--color-dark_blue);}
.product__profile .profile-features dt {width: 30%;}
.product__profile .profile-features dd {width: 70%;}

.profile-chart {aspect-ratio: 1; position: relative;}
.profile-chart .profile-points {left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); text-align: center;}
.profile-chart .profile-points .profile-points__value {font-size: 12vh; font-weight: 600; line-height: 1;}
.profile-chart .profile-points .profile-points__title {display: block; text-transform: uppercase;}

.product__profile .coffee-profile {display: grid;}
.product__profile .coffee-profile .item strong {display: block; font-size: var(--size-24);}
.product__profile .coffee-profile .item label {font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase;}

.firstword {display: block;}
.product__summary {background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;}
.product__summary .wrap {display: flex; align-items: center; height: 100%; position: relative; z-index: 2;}
.product__color-panel {bottom: -3.4375rem; position: absolute; right: 0; top: 7.8572rem; width: 50%; z-index: 1;}
.product__summary .product__title h1 {color: #fff; margin: 0 0 2.1428rem;}
.product__summary .product__label {width: 7.8571rem;}
.product__summary .product__label svg path {fill: var(--color-white);}
.product__summary .product__label .label-text {animation: label-text-anim 8s linear infinite; transform-origin: center;}
@keyframes label-text-anim {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

.product__summary .product__image {padding: 0 0 6rem;}
.product__summary .product__image figure {position: relative;}
.product__summary .product__image figure:before {background: url(../images/bg-product_shadow.png) center bottom no-repeat; background-size: contain; content: ' '; height: 110%; left: 50%; position: absolute; top: 5vh; transform: translateX(-50%); width: 110%; z-index: 1;}
.product__summary .product__image img {max-height: calc(100vh - 12rem); object-fit: contain; position: relative; z-index: 1;}

.summary__description {position: relative; z-index: -1;}
.summary__description:before {aspect-ratio: 1; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%); content: " "; left: 50%; mix-blend-mode: overlay; position: fixed; top: 50%; transform: translate(-50%,-50%); width: 45%; z-index: -1;}
.summary__description .row {height: 100vh;}
.summary__description .product__title {color: var(--color-white);}

.product__summary .product-addto > form {display: flex;}
.product__summary .single_add_to_cart_button {display: inline-flex; align-items: center; flex: 0 1 100%; justify-content: space-between;}
.product__summary .single_add_to_cart_button > span {display: flex; gap: var(--size-20); justify-content: center; width: 100%;}
.product__summary .single_add_to_cart_button > span:after {content: "\e908"; font-family: 'Novafont' !important; font-size: var(--size-20); font-weight: normal;}
.product__summary .single_add_to_cart_button + .added_to_cart {display: none;}

.summary__options {height: 200vh; position: absolute; right: calc((100% - 1600px) / 2); top: 0; width: calc(1600px - 33%); z-index: 10;}
.summary__options .options--row {height: calc(100vh - 6rem); position: sticky; top: 6rem;}
.summary__options .product__actions .actions__box {background: var(--color-white); border-radius: 2.1875rem; padding: var(--size-10); position: relative; top: 50%; transform: translateY(-50%);}
.summary__options .product-price {padding: var(--size-20) 0; text-align: center;}
.summary__options .product-price .amount {font-family: var(--font-main); font-size: var(--size-30);}
.summary__options .qty-defaults {margin-bottom: var(--size-10);}
.summary__options .qty-defaults ul {display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; margin: 0; padding: 0;}
.summary__options .qty-defaults ul li {width: calc(25% - 0.5rem);}
.summary__options .qty-defaults ul li button {background: transparent; border-width: 1px; border-style: solid; border-radius: var(--size-20); cursor: pointer; display: block; font-family: var(--font-secondary); font-weight: var(--font-weight-bold); padding: var(--size-10); text-align: center; width: 100%;}
.summary__options .qty-defaults ul li button:not(.active) {border-color: rgb(0 41 64 / 20%);}
.summary__options .qty-defaults ul li button.active {border-color: rgb(0 41 64 / 100%);}
.summary__options .qty-defaults ul li button:hover {background-color: var(--color-light_blue);}
.summary__options .qty-defaults ul li button:before {aspect-ratio: 1; display: block; margin: 0 auto var(--size-10); width: var(--size-60);}
.summary__options .qty-defaults ul li .qty-one:before {content: url(../images/icon-bottles_one.svg);}
.summary__options .qty-defaults ul li .qty-two:before {content: url(../images/icon-bottles_two.svg);}
.summary__options .qty-defaults ul li .qty-three:before {content: url(../images/icon-bottles_three.svg);}
.summary__options .qty-defaults ul li .qty-more:before {content: url(../images/icon-bottles_more.svg);}
.summary__options .quantity {border: 1px solid transparent; border-radius: var(--size-30); display: flex; align-items: center; font-size: 1rem; font-weight: 700; height: var(--size-60); margin-right: 0; overflow: hidden; padding: 0.625rem 0; transition: all 0.3s; max-width: 0;}
.summary__options .show-qty .quantity {border-color: var(--color-dark_blue); margin-right: var(--size-10); max-width: 20em; padding: 0.625rem;}
.summary__options .quantity .qty {-webkit-appearance: none; -moz-appearance: textfield; appearance: none; background-color: transparent !important; border: none !important; font-size: var(--size-20); !important; margin: 0; opacity: 0; padding: 1em 0 !important; pointer-events: none; text-align: center; transition: opacity 0.2s; width: var(--size-40) !important;}
.summary__options .quantity .qty:hover, .summary__options .quantity .qty:focus { -moz-appearance: number-input;}
.summary__options .quantity .qty::-webkit-outer-spin-button, .summary__options .quantity .qty::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0; opacity: 0;}
.summary__options .quantity button {background: transparent; border: none; border-radius: var(--size-20); color: var(--color-dark_blue); cursor: pointer; display: inline-flex; align-items: center; font-size: var(--size-20); font-weight: 400; justify-content: center; height: var(--size-40); opacity: 0; transition: opacity 0.2s; width: var(--size-40);}
.summary__options .quantity button:hover {background-color: var(--color-light_blue);}
.summary__options .show-qty .quantity .qty, .summary__options .show-qty .quantity button {opacity: 1;}

.product-values {position: relative; z-index: 2;}
.product-values .marquee-values {position: absolute; overflow: hidden; top: 50%; transform: translate(-5%,-50%) rotate(-5deg); width: 110%;}
.product-values .marquee-wrap {display: flex; justify-content: space-between; position: relative; width: 100%;}
.product-values .marquee-wrap ul {flex-shrink: 0; margin: 0; padding: 0;}
.product-values .marquee-wrap.marquee-1 ul, .product-values .marquee-wrap.marquee-3 ul {}
.product-values .marquee-wrap ul li {width: fit-content; display: inline-block; line-height: 1.2em; list-style: none; padding: 0 0.9375rem; font-family: var(--font-main); font-size: clamp(3.75rem, 7.5vw, 7.5rem); font-weight: 500;}
.product-values .marquee-wrap ul li:nth-child(odd) {color: var(--color-white);}
.product-values .marquee-wrap ul li:nth-child(even) {color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--color-white);}

.recipe-list .item__image {margin: 0; position: relative;}
.recipe-list .item__image > a {display: block;}
.recipe-list .item__image img {aspect-ratio: 12/14; border-radius: var(--size-30); display: block; object-fit: cover;}
.recipe-list .item__image figcaption {background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); border-radius: 0 0 var(--size-30) var(--size-30); bottom: 0; color: var(--color-white); left: 0; padding: var(--size-60) var(--size-30) var(--size-30); pointer-events: none; position: absolute; text-align: center; width: 100%;}
.recipe-list .item__image figcaption .item__title {font-size: 1.5em; line-height: 1.2em; font-weight: var(--font-weight-bold); text-wrap: balance;}
.recipe-list .item__image figcaption .item__title:after {background: url(../images/img-recipe_stripe.svg) center no-repeat; content: " "; display: block; height: var(--size-10); margin: var(--size-10) 0;}

.product__related .item {height: 100vh;}
.product__related .columns-row .col-right {padding-right: var(--size-40); position: relative;}
.product__related .columns-row .col-right:before {aspect-ratio: 1; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%); filter: blur(2rem);; content: " "; left: 50%; mix-blend-mode: overlay; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 110%; z-index: 0;}
.product__related .col-left {color: #fff;}
.product__related .col-left h2 {font-size: clamp(2.25rem, 6.25vw, 6.25rem); text-wrap: balance;}
.product__related .col-left .product-desc {font-size: var(--size-20); line-height: 1.2em; margin-bottom: var(--size-40); max-width: 75%;}
.product__related .item-image {aspect-ratio: 1; height: 80vh; pointer-events: none; position: relative;}
.product__related .item-image iframe {pointer-events: none; height: 100%; width: 100%;}
.product__related .item-image .item__video {height: 100%; clip-path: url(#slider-clip-video); position: relative; width: 100%; z-index: 2;}
.product__related .item-image img {aspect-ratio: 1; left: 0; max-width: 100%; position: absolute; top: 0;}
.product__related .item-image .img-left_top,
.product__related .item-image .img-left_bottom,
.product__related .item-image .img-right_top,
.product__related .item-image .img-right_bottom {z-index: 1;}
.product__related .item-image .img-left_mid,
.product__related .item-image .img-right_mid {z-index: 3;}

@keyframes promo-label-anim {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

.recipes__list .item {padding: 0;}
.recipes__list .recipe-list {display: flex; flex-wrap: wrap; gap: 2.8571em;}

.product__related .section-title {text-align: center;}


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

@media screen and (min-width: 1181px) {
  .product__profile .column.is-left {position: sticky; top: var(--size-80);}
}

@media screen and (min-width: 821px) {
  .product__related .columns-row {display: flex; flex-wrap: wrap; align-items: center; height: 100vh;}
  .product__related .columns-row .col-left {width: 55%;}
  .product__related .columns-row .col-right {width: 45%;}
}
@media screen and (min-width: 821px) and (max-width: 1600px) {
  
}

@media screen and (min-width: 821px) and (max-width: 1180px) {
  
}

@media screen and (min-width: 769px) {
  .product_cat-cafe .product__heading {height: 120vh;}
  .product__heading .product-title {top: 25vh;}
  .product__heading .product-title h1 {font-size: 10vw;}
  .product__heading .product__image figure img {height: 80vh; width: auto;} 
  .product_cat-cafe .product__heading .product__image {top: 8vh;}

  .product__heading .product-title .title--main_flavors ul {display: inline-flex; gap: var(--size-16); margin: 0 0 var(--size-32);}
  .product__heading .product-title .title--main_flavors li:not(:first-child):before {content: "\e90f"; font-family: "Singular"; font-size: var(--size-8);}

  .product__flavors ul li {font-size: 10vw;}

  .product__origin .origin--featured {margin-bottom: var(--size-64);}
  .product__origin .origin--info .column {padding: var(--size-32);}

  .product__profile .column.is-right {gap: var(--size-48);}
  .product__profile .coffee-profile {grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--size-16) var(--size-8);}
  .profile-chart {padding: 3em;}

  .product__actions .column.is-right .quantity input {width: var(--size-32);}
  .product__actions .column.is-right .quantity button {height: var(--size-48);}
  .select--trigger {gap: var(--size-16); padding: var(--size-8) var(--size-24);}
}

@media screen and (max-width: 768px) {
  .product_cat-cafe .product__heading {height: 80vh;}
  .product__heading .product-title {top: 20vh;}
  .product__heading .product-title h1 {font-size: clamp(2rem, 12vw, 4rem);}
  .product_cat-cafe .product__heading .product__image {top: 15vh;}

  .title--main_flavors ul {height: 1rem; margin: 0 0 var(--size-16); position: relative; overflow: hidden; width: 100%;}
  .title--main_flavors ul li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(100%);
    animation: slideUp 12s infinite; /* 12s = 3s por slide x 4 slides */
  }
  .title--main_flavors ul li:nth-child(1) { animation-delay: 0s; }
  .title--main_flavors ul li:nth-child(2) { animation-delay: 3s; }
  .title--main_flavors ul li:nth-child(3) { animation-delay: 6s; }
  .title--main_flavors ul li:nth-child(4) { animation-delay: 9s; }

  .product__heading .product-title .title--main_flavors li:before,
  .product__heading .product-title .title--main_flavors li:after {content: "\e90f"; font-family: "Singular"; font-size: var(--size-8);}

  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    5% {
      opacity: 1;
      transform: translateY(0);
    }
    20% {
      opacity: 1;
      transform: translateY(0);
    }
    25% {
      opacity: 0;
      transform: translateY(-100%);
    }
    100% {
      opacity: 0;
      transform: translateY(-100%);
    }
  }

  .product__flavors ul li {font-size: 15vw;}

  .product__origin .origin--featured {margin-bottom: var(--size-32);}
  .product__origin .origin--info .column {padding: var(--size-16);}

  .profile-chart {padding: 2em;}
  .product__profile .column.is-right {display: flex; flex-direction: column; gap: var(--size-24);}
  .product__profile .coffee-profile {grid-template-columns: repeat(2, 1fr); gap: var(--size-16) var(--size-48);}
  .product__profile .coffee-profile .item {display: flex; flex-direction: row-reverse; justify-content: space-between;}

  .product__actions .column.is-left {justify-content: center;}
  .product__actions .column.is-left ul {margin: 0; padding: 0;}

  .select--trigger .selected-label span {display: none;}

  .product__actions .column.is-right .quantity {padding: 0 4px;}
  .product__actions .column.is-right .quantity button {height: var(--size-32);}
  .product__actions .column.is-right .quantity input {width: var(--size-24);}
  .product__actions .column.is-right .cart {flex-grow: 1;}
  .product__actions .column.is-right .single_add_to_cart_button {flex-grow: 1; justify-content: center;}
  .custom-select-qty {flex-grow: 0;}
  .select--trigger {gap: var(--size-8); padding: var(--size-8) var(--size-16);}
  
}