:root{
   /* --icon-star: url(../../extra/star.svg); */
   --icon-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23cfd5e2" stroke="%23cfd5e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-icon lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>');
}

main {
   padding: 2rem 5%;
   max-width: 1920px;
   margin: 0 auto;
}

@media(max-width: 768px) {
   main {
      padding: 0;
   }
}

.container h2 {
   --pico-font-size: 2.2rem;
}

/* ==========================================================================
   Entry Content
   ========================================================================== */

.entry-content {
   max-width: 1080px;
   margin: 0 auto;
   display: flex;
   align-items: flex-start;
   gap: 2rem;
   margin-bottom: 4rem;
   position: relative;
}

.product-images {
   display: flex;
   gap: 1rem;
   width: calc(55% - 1rem);
   position: sticky;
   top: 2rem;
}

.admin-bar .product-images {
   top: 4rem;
}

.main-slider {
   width: calc(88% - 1rem) !important;
   max-width: 485px;
   height: fit-content;
   max-height: 485px;
   overflow-y: hidden;
}

.main-slider.single-image {
   width: 100% !important;
   max-width: 100%;
   max-height: 100%;
}

.main-slider.single-image img{
   width: 100%;
}

.main-slider .slick-prev {
   left: calc(100% - 5.5rem);
   top: 93.5%;
}

.main-slider .slick-next {
   right: 1rem;
   top: 93.5%;
}

.main-slider .slick-dots {
   bottom: 1rem;
}

.main-slider img {
   border-radius: 0.5rem;
}

.thumbnail-slider {
   width: 12%;
   height: auto;
   max-height: 606.25px;
}

.thumbnail-slider .slick-slide {
   cursor: pointer;
}

.thumbnail-slider .slick-slide img {
   margin: 0 0 0.5rem 0;
   transition: filter var(--pico-transition);
   aspect-ratio: 1 / 1;
   object-fit: contain;
   background: #f5f5f5;
   border-radius: 0.25rem;
}

.thumbnail-slider .slick-current img {
   filter: brightness(0.85);
}

/* Entry Content: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Entry Content: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {

   .entry-content {
      flex-direction: column;
      gap: 1rem;
   }

   .product-images {
      width: 100%;
      position: relative;
      top: 0 !important;
   }

   .thumbnail-slider {
      display: none !important;
   }

   .main-slider {
      width: 100% !important;
      max-width: 100%;
      margin-bottom: 0 !important;
   }

   .main-slider img {
      border-radius: 0;
   }

}

/* ==========================================================================
   Summary
   ========================================================================== */

.summary {
   width: calc(45% - 1rem);
}

/* Title */

.product_title {
   --pico-font-size: 2.3rem;
   margin-bottom: 0.4rem;
}

/* Brand */

.product-brand {
   font-size: 0.9rem;
   text-decoration: none;
   --pico-color: var(--pico-secondary-border);
   font-weight: 600;
   margin-bottom: 0rem;
   display: inline-flex;
}

/* Rating */

.product-rating {
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
   margin-bottom: 1.1rem;
   text-decoration: none;
   --pico-color: var(--pico-secondary-border);
   font-size: 0.8rem;
   position: relative;
   line-height: 1;
}

.product-rating .rating-base, .product-rating .rating-mask {
   --icon-size: 1.1rem;
   display: flex;
   height: var(--icon-size);
   background-repeat: repeat-x;
}

.product-rating .rating-base {
   width: calc(5 * var(--icon-size));
   background-image: var(--icon-star);
   background-size: var(--icon-size);
}

.product-rating .rating-mask {
   position: absolute;
   -webkit-mask-image: var(--icon-star);
   -webkit-mask-size: var(--icon-size);
   mask-image: var(--icon-star);
   mask-size: var(--icon-size);
   background-color: #f4cf3e;
}

.unrated .rating-mask {
   display: none;
}

/* Price */

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
   color: var(--static-dark-color);
   font-weight: 600;
   font-size: 1.4rem;
}

span.price-notice {
   display: block;
   font-size: 0.8rem;
   font-weight: 400;
   color: #707072;
}

p.price del {
   color: #707072;
   font-weight: 400;
}

p.price ins {
   color: var(--static-dark-color);
}

/* Form */

.summary form {
   margin-bottom: 2rem;
}

/* Variations */

.variations {
   display: flex;
   border: none;
   margin: 2rem 0 0 0
}

.variations>* {
   width: 100%;
}

.variations tr {
   display: flex;
   flex-direction: column;
}

.variations tr>* {
   background: none;
   padding: 0;
   margin-bottom: 0.5rem;
   border: none;
}

.variations tr th label {
   margin: 0;
   font-weight: 600;
   text-transform: capitalize;
}

a.reset_variations {
   display: none !important;
   visibility: hidden !important;
}

ul.wcboost-variation-swatches__wrapper {
   box-shadow: none;
   margin-top: 0.3rem;
}

li.wcboost-variation-swatches__item {
   background: transparent;
   border: 1px solid var(--pico-form-element-border-color);
   min-height: 2.9rem !important;
   border-radius: 0.25rem !important;
   --pico-form-element-spacing-vertical: 0.5rem;
}

:root {
   --wcboost-swatches-item-gap: 0.8rem;
}

.wcboost-variation-swatches__item.selected {
   box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color) !important;
   background-color: #fbfcfc !important;
   border-color: transparent;
}

.wcboost-variation-swatches--color li.wcboost-variation-swatches__item {
   padding: 0 !important;
}

.wcboost-variation-swatches--color .wcboost-variation-swatches__name {
   border-radius: 0.25rem !important;
}

.woocommerce-variation.single_variation .woocommerce-variation-price, .woocommerce-variation.single_variation .woocommerce-variation-description {
   display: none !important;
}

.woocommerce-variation.single_variation .out-of-stock {
   margin: 0 0 2rem 0;
}

.woocommerce-variation-price {
   margin-bottom: 1rem;
}

/* Meta: attributes */

.product_meta>p {
   margin: 2rem 0 0.75rem 0;
   font-weight: 600;
   text-transform: capitalize;
}

.product_meta>ul {
   padding: 0;
   margin: 0 0 1.75rem 0;
   display: flex;
   align-items: center;
   gap: 1rem;
}

.product_meta>ul li {
   padding: 0.5rem;
   margin: 0;
   list-style: none;
   display: flex;
   justify-content: center;
   align-items: center;

   width: max-content;
   height: auto;
   min-width: 30%;
   padding-left: calc(var(--wcboost-swatches-item-width) / 2);
   padding-right: calc(var(--wcboost-swatches-item-width) / 2);
   overflow: hidden;

   background: #fbfcfc;
   border: 1px solid transparent;
   min-height: 2.9rem;
   border-radius: 0.25rem;
   --pico-form-element-spacing-vertical: 0.5rem;
   box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}

/* Form - Non Variation */

.summary form:not(.variations_form) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 0.8rem;
   margin-top: 1.5rem;
}

.summary form:not(.variations_form) .quantity {
   width: 35%;
}

/* Checkout buttons */

.variations_button {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.8rem;
}

.variations_button .quantity {
   width: 35%;
}

.single_add_to_cart_button {
   --pico-background-color: var(--static-dark-color);
   --pico-color: var(--static-light-color);
   --pico-border-color: var(--static-dark-color);
   background: linear-gradient(var(--primary-gradient-light), var(--main-gradient-color));
   box-shadow: 0 0 0 var(--pico-outline-width) transparent;
   transition: color var(--pico-transition), border var(--pico-transition), box-shadow var(--pico-transition);
}

.single_add_to_cart_button:hover, .single_add_to_cart_button:active, .single_add_to_cart_button:focus {
   --pico-border-color: #d3d3d3;
   --pico-color: #d3d3d3;
   box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}

p.stock.out-of-stock {
   margin: 1.5rem 0 2rem 0;
   --pico-background-color: rgb(255 123 85 / 10%);
   --pico-border-color: rgb(255 123 85 / 10%);
   --pico-color: rgb(255 123 85);
   font-weight: 600;
   --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
   border: var(--pico-border-width) solid var(--pico-border-color);
   border-radius: var(--pico-border-radius);
   outline: 0;
   background-color: var(--pico-background-color);
   box-shadow: var(--pico-box-shadow);
   color: var(--pico-color);
   font-size: 1rem;
   text-align: center;
   text-decoration: none;
   transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
   filter: grayscale(1);
}


/* Summary: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Summary: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
   .summary {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      padding-right: var(--pico-spacing);
      padding-left: var(--pico-spacing);
   }
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.woocommerce-reviews {
   margin-bottom: 4rem;
}

.woocommerce-reviews-title {
   margin-bottom: 2rem;
}

.woocommerce-reviews-rating-wrapper {
   display: flex;
   gap: 2rem;
   align-items: center;
   margin: 1rem auto 2rem auto;
   background-color: var(--pico-form-element-background-color);
   padding: 2rem 1rem;
   border-radius: 0.5rem;
   border: 1px solid var(--pico-form-element-border-color);
}

.wrr-left {
   width: 40%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.wrr-left .rating-number {
   font-size: 3.6rem;
   font-weight: 700;
}

.wrr-left .product-rating {
   flex-direction: column;
   align-items: flex-start;
}

.wrr-left .rating-base, .wrr-left .rating-mask {
   --icon-size: 1.3rem;
}

.wrr-left .rating-text {
   margin-top: 0.5rem;
   font-size: 0.95rem;
   width: 100%;
   text-align: center;
}

.wrr-right {
   width: 60%;
   max-width: 600px;
}

.wrr-right>* {
   display: flex;
   gap: 0.75rem;
   align-items: center;
   --pico-typography-spacing-vertical: 0.4rem;
}

.wrr-right .rating-text {
   width: 8.5%;
   display: flex;
   font-weight: 600;
   font-size: 0.8rem;
}

.wrr-right .rating-base {
   width: calc(81.5% - 1.5rem);
   height: 0.8rem;
   display: flex;
   background-color: var(--pico-form-element-border-color);
   border-radius: 0.25rem;
   position: relative;
}

.wrr-right .rating-base::after {
   display: flex;
   height: 0.8rem;
   content: "";
   position: absolute;
   border-radius: 0.25rem;
   background-color: #f4cf3e;
   width: var(--data-width);
}

.wrr-right .rating-percent {
   width: 10%;
   text-align: end;
}

.wrr-right .rating-one .rating-base::after {
   background-color: var(--pico-form-element-invalid-active-border-color);
}

.wrr-right .rating-two .rating-base::after {
   background-color: #f0ad4e;
}

.wrr-right .rating-three .rating-base::after {
   background-color: #f4cf3e;
}

.wrr-right .rating-four .rating-base::after, .wrr-right .rating-five .rating-base::after {
   background-color: var(--pico-form-element-valid-border-color);
}

/* Review content */

#comments {
   margin-bottom: 2rem;
}

.commentlist {
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   gap: 1rem;
   justify-content: center;
   align-items: stretch;
   flex-wrap: wrap;
}

.commentlist li {
   margin: 0;
   width: calc(33% - 0.5rem);
   padding: 1rem;
   background-color: var(--pico-form-element-background-color);
   border-radius: 0.5rem;
   border: 1px solid var(--pico-form-element-border-color);
   display: flex;
   flex-direction: column;
}

.comment-header {
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
}

.comment-header .avatar {
   width: 2.8rem;
   height: 2.8rem;
   border-radius: 100%;
   margin-bottom: 0.5rem;
}

.comment-rating p:first-child {
   font-weight: 500;
   text-transform: capitalize;
   margin-bottom: 0.2rem;
}

.comment-rating p:last-child {
   margin: 0;
   --icon-size: 1rem;
}

.comment-footer {
   text-align: right;
   margin-top: auto;
}

.comment-footer span {
   font-size: 0.85rem;
}

/* Review Modal */

#review_form_wrapper {
   display: flex;
   justify-content: center;
}

#review_form_wrapper>button {
   --pico-background-color: rgb(255 123 85 / 10%);
   --pico-border-color: rgb(255 123 85 / 10%);
   --pico-color: rgb(255 123 85);
   font-weight: 600;
}

#review_form_wrapper>button:hover, #review_form_wrapper>button:active, #review_form_wrapper>button:focus {
   --pico-background-color: rgb(255 123 85 / 20%);
   --pico-border-color: rgb(255 123 85 / 20%);
}

.review-form-dialog article>header>div .icon-bg {
   background: rgb(244 207 62 / 10%);
   --pico-primary: rgb(244 207 62);
}

.review-form-dialog article>header>div .icon {
   background: rgb(244 207 62 / 20%);
}

#commentform label {
   display: none;
}

.comment-form-rating .stars {
   display: flex;
   justify-content: center;
   margin: 0;
}

.comment-form-rating span[role=group] {
   display: flex;
   justify-content: center;
   margin-bottom: 2rem;
   width: max-content;
   gap: 0.3rem;
}

.stars a {
   --icon-size: 2rem;
   --icon-color: #cfd5e2;
   padding: 0;
   margin: 0;
   color: transparent;
   border: 0;
   outline: none;
   font-size: 0;
   line-height: 0;
   display: flex;
   width: var(--icon-size);
   height: var(--icon-size);
   -webkit-mask-image: var(--icon-star);
   -webkit-mask-size: var(--icon-size);
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center center;
   mask-image: var(--icon-star);
   mask-size: var(--icon-size);
   mask-repeat: no-repeat;
   mask-position: center center;
   background-color: var(--icon-color);
}

/* Key CSS: Color all stars up to and including the active one */
.stars:has(.star-1.active, .star-1:hover, .star-1:active, .star-1:focus) .star-1 {
   --icon-color: #f4cf3e;
}

.stars:has(.star-2.active, .star-2:hover, .star-2:active, .star-2:focus) .star-1,
.stars:has(.star-2.active, .star-2:hover, .star-2:active, .star-2:focus) .star-2 {
   --icon-color: #f4cf3e;
}

.stars:has(.star-3.active, .star-3:hover, .star-3:active, .star-3:focus) .star-1,
.stars:has(.star-3.active, .star-3:hover, .star-3:active, .star-3:focus) .star-2,
.stars:has(.star-3.active, .star-3:hover, .star-3:active, .star-3:focus) .star-3 {
   --icon-color: #f4cf3e;
}

.stars:has(.star-4.active, .star-4:hover, .star-4:active, .star-4:focus) .star-1,
.stars:has(.star-4.active, .star-4:hover, .star-4:active, .star-4:focus) .star-2,
.stars:has(.star-4.active, .star-4:hover, .star-4:active, .star-4:focus) .star-3,
.stars:has(.star-4.active, .star-4:hover, .star-4:active, .star-4:focus) .star-4 {
   --icon-color: #f4cf3e;
}

.stars:has(.star-5.active, .star-5:hover, .star-5:active, .star-5:focus) .star-1,
.stars:has(.star-5.active, .star-5:hover, .star-5:active, .star-5:focus) .star-2,
.stars:has(.star-5.active, .star-5:hover, .star-5:active, .star-5:focus) .star-3,
.stars:has(.star-5.active, .star-5:hover, .star-5:active, .star-5:focus) .star-4,
.stars:has(.star-5.active, .star-5:hover, .star-5:active, .star-5:focus) .star-5 {
   --icon-color: #f4cf3e;
}

#commentform .comment-form-rating a:hover, #commentform .comment-form-rating a:active, #commentform .comment-form-rating a:focus {
   background-color: #f4cf3e;
}

#commentform .form-submit, #commentform .form-submit input {
   margin: 0;
}

#commentform .form-submit .submit {
   --pico-background-color: var(--static-dark-color);
   --pico-color: var(--static-light-color);
   --pico-border-color: var(--static-dark-color);
   background: linear-gradient(var(--primary-gradient-light), var(--main-gradient-color));
   box-shadow: 0 0 0 var(--pico-outline-width) transparent;
   transition: color var(--pico-transition), border var(--pico-transition), box-shadow var(--pico-transition);
}

#commentform .form-submit .submit:hover, #commentform .form-submit .submit:active, #commentform .form-submit .submit:focus {
   --pico-border-color: #d3d3d3;
   --pico-color: #d3d3d3;
   box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}

p.must-log-in {
   text-align: center;
   font-weight: 600;
}

p.must-log-in a {
   background-color: transparent;
}

/* Reviews: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {
   .commentlist li {
      width: calc(50% - 0.5rem);
   }
}

/* Reviews: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
   .woocommerce-reviews-rating-wrapper {
      flex-direction: column;
      gap: 1rem;
   }

   .wrr-left {
      width: 100%;
   }

   .wrr-left .rating-number {
      font-size: 3.6rem;
   }

   .wrr-right {
      width: 100%;
   }

   .wrr-right>* {
      justify-content: space-between;
   }

   .wrr-right .rating-text, .wrr-right .rating-percent {
      width: 14%;
   }

   .wrr-right .rating-base {
      width: 72%;
   }

   .commentlist li {
      width: 100%;
   }

}

/* ==========================================================================
   Container
   ========================================================================== */

/* Container: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Container: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {}