/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/lib/index.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_athome_storefront/cartridge/client/default/scss/ugcContent.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --close-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23000000" fill="none" viewBox="0 0 24 24"><path d="m3.3 3.2 17.5 17.5m0-17.5L3.3 20.7"></path></svg>') ;
  --spinner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16' preserveAspectRatio='none'><path vector-effect='non-scaling-stroke' stroke='%23fff' stroke-width='1.8' d='M15 8a7 7 0 1 1-7-7'/></svg>");
  --chevron-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="%23242424" stroke-linecap="square" stroke-width="1.3" d="m2 5.3 6 6 6-6"/></svg>');
}

/* CORE VERSION:2.0 */
/* BRAND */
/* PRIMARY ACCENT */
/* SECONDARY ACCENT */
/* INDICATING */
/* NEUTRALS */
/* CONTENT */
/* INTERACTION */
/* TYPOGRAPHY */
/* ~40px */
/* ~40px */
/* ~32px */
/* ~26px */
/* ~20px */
/* ~16px */
/* ~14px */
/* ~12px */
/* ~10px */
/* Future use */
/* SPACING */
/* LEGACY REMAPS */
/* LEGACY VERSION:X.X */
/* colors */
/* names taken from http://www.color-blindness.com/color-name-hue/ */
/* AT HOME COLOR SCHEME */
/* Color changes for accessibility */
/* Barkley style guide color-blindness */
/* Input focus color with opacity */
/* Box Shadow color */
/* Bethanys Added */
/* Fonts */
/* $ubuntu: 'Ubuntu', sans-serif; */
/* Filter variables */
/* Added for AHD-1309 requirement
provided by Jason Kysar 5/12/21
REMOVED DUPES FROM CORE */
/* ~34px */
/* Portly Dropdowns */
/* just form specific
Form Variables */
/* global not added red button when adding to cart */

.ugc-carousel-wrapper {
  margin-bottom: 48px;
  padding-inline: 16px;
  position: relative;
}
@media (min-width: 544px) {
  .ugc-carousel-wrapper {
    margin-bottom: 4rem;
    padding-inline: 0;
  }
}
.ugc-carousel-wrapper .ugc-splide {
  visibility: hidden;
}
.ugc-carousel-wrapper .splide__arrows {
  position: relative;
  width: 99px;
  left: 19px;
}
.ugc-carousel-wrapper li.splide__slide {
  cursor: pointer;
  margin-right: 16px;
  overflow: hidden;
}
.ugc-carousel-wrapper .ugc-gallery-item {
  height: 320px;
  width: 320px;
  overflow: hidden;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .ugc-carousel-wrapper .ugc-gallery-item {
    height: 376px;
    width: 376px;
  }
}
.ugc-carousel-wrapper .ugc-gallery-item img {
  object-fit: cover;
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
}
.ugc-carousel-wrapper .play-icon:not(.play-pause-btn) {
  position: absolute;
  opacity: 0.9;
  background: #FFFFFF;
  z-index: 2;
  border-radius: 50%;
  height: 36px;
  width: 36px;
  padding-left: 6px;
  color: #242424;
  top: 38%;
  left: 0;
  right: 0;
  justify-self: center;
}
@media (min-width: 768px) {
  .ugc-carousel-wrapper .play-icon:not(.play-pause-btn) {
    height: 68px;
    width: 68px;
    padding-left: 12px;
  }
}
.ugc-carousel-wrapper .ugc-caption {
  background-color: #FFFFFF;
  position: absolute;
  bottom: 24px;
  left: 24px;
  padding: 16px 24px;
  border-radius: 2px;
  background: rgba(251, 249, 245, 0.85);
  color: #242424;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.48px;
  z-index: 2;
}
.ugc-carousel-wrapper button.splide__arrow {
  width: 24px;
  height: 24px;
  background-color: #F9F5EF;
  opacity: 1;
}
@media (max-width: 767.98px) {
  .ugc-carousel-wrapper button.splide__arrow {
    bottom: -2.7em;
  }
}
.ugc-carousel-wrapper button.splide__arrow.splide__arrow--prev {
  right: auto;
  left: 0;
}
.ugc-carousel-wrapper button.splide__arrow.splide__arrow--next {
  right: 2.5em;
}
.ugc-carousel-wrapper .ugc-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}
.ugc-carousel-wrapper .ugc-section-title {
  display: flex;
  justify-content: center;
  width: 65%;
  max-width: 763px;
}
.ugc-carousel-wrapper .custom-scrollbar {
  position: relative;
  width: 100%;
  height: 3px;
  background-color: #F9F5EF;
  margin: 4px auto;
  border-radius: 100px;
  visibility: hidden;
}
.ugc-carousel-wrapper .splide__arrow.splide-pause-btn {
  right: 0;
}
.ugc-carousel-wrapper .splide-pause-btn .play-icon {
  display: none;
}
.ugc-carousel-wrapper .splide-pause-btn .pause-icon {
  display: inline-block;
}
.ugc-carousel-wrapper .splide-pause-btn.is-paused .play-icon {
  display: inline-block;
  padding-left: 4px;
}
.ugc-carousel-wrapper .splide-pause-btn.is-paused .pause-icon {
  display: none;
}
.ugc-carousel-wrapper .scroll-slider {
  position: absolute;
  height: 4px;
  background-color: #D6D6D6;
  border-radius: 100px;
  cursor: pointer;
  transition: left 0.2s ease;
}
.ugc-carousel-wrapper.splide__noScroll {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ugc-carousel-wrapper.splide__noScroll .splide {
  display: inline-block;
  margin: 0 auto;
}
.ugc-carousel-wrapper.splide__noScroll .splide__arrow,
.ugc-carousel-wrapper.splide__noScroll .ugc-section-title {
  display: none;
}
.ugc-carousel-wrapper.splide__noScroll .splide__track {
  display: inline-flex;
}

/* UGC Individual Content Modal */
#ugc-content-modal .ugc-content-modal-dialog {
  max-width: 904px;
  position: relative;
  height: 482px !important;
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-content-modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100vh !important;
  }
}
#ugc-content-modal .ugc-content-modal-content {
  position: relative;
  border-radius: 16px;
  border: none;
  overflow: hidden;
  max-height: 484px !important;
  background-color: #FBF9F5;
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-content-modal-content {
    height: 100%;
    max-height: 100vh !important;
  }
}
#ugc-content-modal .ugc-content-modal-content button.close svg {
  height: 16px;
  width: 16px;
}
#ugc-content-modal .ugc-content-modal-body {
  padding: 16px !important;
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-content-modal-body {
    padding: 0 !important;
  }
}
#ugc-content-modal .ugc-modal-close {
  position: absolute;
  top: 24px;
  right: 16px;
  z-index: 10;
  margin: 0;
  padding: 4px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  line-height: 0;
}
@media (min-width: 544px) {
  #ugc-content-modal .ugc-modal-close {
    background: transparent;
    border-radius: none;
  }
}
#ugc-content-modal .ugc-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
}
#ugc-content-modal .ugc-modal-nav[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
#ugc-content-modal .ugc-modal-nav.ugc-modal-nav--prev {
  left: 16px;
}
#ugc-content-modal .ugc-modal-nav.ugc-modal-nav--next {
  right: 16px;
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-modal-nav {
    display: none;
  }
}
#ugc-content-modal .ugc-content-modal-row {
  align-items: flex-start;
  gap: 24px;
  padding-inline: 24px;
  justify-content: center;
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-content-modal-row {
    padding: 0;
  }
}
#ugc-content-modal .ugc-media-col {
  max-width: 450px;
}
@media (max-width: 1199.98px) {
  #ugc-content-modal .ugc-media-col {
    max-width: 350px;
  }
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-media-col {
    max-width: 100%;
  }
}
#ugc-content-modal .ugc-shop-product-btn {
  position: absolute;
  bottom: 70px;
  background-color: #FFFFFF;
  opacity: 0.96;
  border: none;
  color: #242424;
}
#ugc-content-modal .ugc-products-col {
  max-width: 304px;
  padding-top: 8px;
  color: #242424;
  height: -webkit-fill-available;
  max-height: 450px;
  overflow-y: scroll;
  scrollbar-width: none;
}
@media (max-width: 1199.98px) {
  #ugc-content-modal .ugc-products-col {
    max-height: 350px;
  }
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-products-col {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    padding: 24px;
    overflow-y: auto;
    z-index: 20;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  #ugc-content-modal .ugc-products-col.is-open {
    transform: translateX(0);
    max-height: 100vh;
  }
}
#ugc-content-modal .ugc-products-col .ugc-back-btn {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 24px;
  font-size: 1rem;
  font-weight: 500;
  color: #242424;
  cursor: pointer;
}
@media (min-width: 544px) {
  #ugc-content-modal .ugc-products-col .ugc-back-btn {
    display: none;
  }
}
#ugc-content-modal .ugc-media-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #242424;
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-media-frame {
    aspect-ratio: auto;
  }
}
#ugc-content-modal .ugc-media-img,
#ugc-content-modal .ugc-media-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0;
}
@media (max-width: 767.98px) {
  #ugc-content-modal .ugc-media-img,
  #ugc-content-modal .ugc-media-video {
    height: 100vh;
  }
}
#ugc-content-modal .ugc-attribution-row {
  color: #242424;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
#ugc-content-modal .ugc-attribution-username {
  font-size: 0.875rem;
  font-weight: 500;
}
#ugc-content-modal .ugc-caption {
  line-height: 1.2;
  font-size: 0.875rem;
  margin-bottom: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#ugc-content-modal .ugc-products-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: 1px;
}
#ugc-content-modal .ugc-product-tile-inner {
  grid-area: product-image;
}
#ugc-content-modal .ugc-product-form {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: 48px;
}
#ugc-content-modal .ugc-product-heart {
  position: absolute;
  top: 0;
  left: 4px;
  z-index: 2;
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ugc-content-modal .ugc-product-heart .heart svg {
  width: 14px;
  height: 14px;
}
#ugc-content-modal .ugc-product-img-wrap {
  overflow: hidden;
  aspect-ratio: 1/1;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 4px;
}
#ugc-content-modal .ugc-product-img-wrap .ugc-product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 0;
}
#ugc-content-modal .ugc-rating-row {
  grid-area: rating;
  margin-bottom: 8px;
}
#ugc-content-modal .ugc-product-name {
  font-size: 0.875rem;
  color: #242424;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  letter-spacing: 0.7px;
  margin-bottom: 16px;
  text-decoration: none;
  grid-area: product-name;
}
#ugc-content-modal .ugc-product-name:hover {
  text-decoration: underline;
}
#ugc-content-modal .ugc-product-price {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 16px;
  grid-area: prod-price;
}
#ugc-content-modal .js-add-to-cart-plp {
  grid-area: add-to-cart-btn;
  max-height: 48px;
}

#ugc-content-modal .ugc-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
#ugc-content-modal .ugc-products-grid:not(:has(.hide-element)):has(.clp-plp) {
  grid-template-columns: 1fr;
}

#ugc-content-modal .ugc-product-tile {
  font-size: 0.75rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "product-image" "rating" "product-name" "prod-price" "add-to-cart-btn";
}
#ugc-content-modal .ugc-product-tile:not(:has(.hide-element)):has(.clp-plp) {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "product-image rating" "product-image product-name" "product-image prod-price" "product-image add-to-cart-btn";
  column-gap: 8px;
}

#ugc-content-modal .ugc-products-grid:has(.hide-element) .ugc-product-name, #ugc-content-modal .ugc-products-grid:has(.hide-element) .ugc-product-price, #ugc-content-modal .ugc-products-grid:has(.hide-element) .js-add-to-cart-plp {
  display: none;
}