/* Additions on top of the original theme styles.
   Everything here is either a new page (product detail, collection, search) or
   a small fix needed because the storefront no longer ships jQuery/Swiper. */

/* ------------------------------------------------------------------ */
/* Social icons inherit their colour from the wrapper                  */
/* ------------------------------------------------------------------ */

.zuui-share-link {
  color: var(--share-color, currentColor);
}

.zuui-share-icon svg {
  fill: currentColor;
  display: block;
}

.zuui-share-icon svg path {
  fill: currentColor;
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

/* The logo and the menu share one row, so the logo sits directly left of
   #custom_nav. The menu takes whatever width is left, and the logo shrinks on
   a phone instead of pushing the page sideways. */

#pc_nav .custom_nav {
  flex: 1 1 auto;
  min-width: 0;
}

#nav-action .content .left {
  min-width: 0;
}

#nav-action .content .left .nav-logo img {
  height: auto;
  max-width: var(--logo-max, 400px);
}

@media (min-width: 768px) {
  /* The theme reserves 120px for a logo that used to live on its own row. */
  #nav-action .content .left .nav-logo {
    margin-right: 40px;
  }
}

@media (max-width: 767px) {
  #nav-action .content .left .nav-logo img {
    max-width: min(var(--logo-max, 400px), 60vw);
  }
}

/* ------------------------------------------------------------------ */
/* Active navigation entry                                            */
/* ------------------------------------------------------------------ */

/* The theme already draws an underline that grows from 0 to 100% width on
   hover; the current page simply keeps it drawn. Colour stays whatever the
   owner picked, so this works on any palette. */

.custom_nav > ul li span > .nav-li-a.is-active {
  background-size: 100% 1px;
}

#nav-action .custom_nav > ul li span > .nav-li-a.is-active {
  font-weight: 700;
}

#mobile_nav_card .panel-navigation.is-active {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#mobile_nav_card .panel-menu-item.is-active {
  box-shadow: inset 3px 0 0 var(--menu-color);
}

/* ------------------------------------------------------------------ */
/* Email form feedback                                                */
/* ------------------------------------------------------------------ */

/* The block background is configurable, so the result is a bordered pill in the
   block's own text colour — visible on a dark or a light background, and big
   enough that a click never looks like it did nothing. */

.news_feedback {
  border: 1px solid currentColor;
  border-radius: 30px;
  display: inline-block;
  font-size: 14px;
  margin: 14px auto 0;
  max-width: 100%;
  opacity: 0.9;
  padding: 8px 18px;
}

/* `display: inline-block` above would otherwise defeat the hidden attribute. */
.news_feedback[hidden] {
  display: none;
}

.news_feedback.is-ok {
  background-color: rgba(255, 255, 255, 0.16);
}

.news_feedback.is-error {
  background-color: rgba(255, 90, 90, 0.22);
  font-weight: 700;
}

.news_feedback.is-pending {
  opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Product card call to action                                         */
/* ------------------------------------------------------------------ */

/* The original theme only reserved a box for product images inside the
   "New Product" slider. Everywhere else the image was laid out at its own
   aspect ratio, so a 1000x600 upload next to a square one looked squashed and
   object-fit:cover had no effect. Reserve the box for every product card. */

.collection_item .collection-product-item,
.block_new_product .content .swiper_box .swiper .swiper-slide .collection_item .collection-product-item {
  display: block;
  overflow: hidden;
  padding-top: var(--product-image-ratio, 100%);
  position: relative;
  width: 100%;
}

.collection_item .collection-product-item .collection-product-item-image,
.block_new_product .content .swiper_box .swiper .swiper-slide .collection_item .collection-product-item img {
  height: 100%;
  left: 0;
  object-fit: var(--product-image-fit, cover);
  position: absolute;
  top: 0;
  width: 100%;
}

/* Collection cards sit in a row, so they need a shared box too. */
.block_collection .swiper .list .list_item .img_box {
  overflow: hidden;
  padding-top: 100%;
  position: relative;
  width: 100%;
}

.block_collection .swiper .list .list_item .img_box img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.collection_item .actions-wrapper .actions-wrapper-btn {
  display: block;
  text-decoration: none;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Carousel helpers                                                    */
/* ------------------------------------------------------------------ */

.swiper-slide-clone {
  pointer-events: none;
}

.swiper > .swiper-wrapper {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.block_slides .swiper,
.block_new_product .swiper,
.block_collection .swiper,
.block_slogan .swiper,
.block_testimonials .swiper {
  overflow: hidden;
}

.my-swiper-button-prev,
.my-swiper-button-next {
  user-select: none;
}

/* ------------------------------------------------------------------ */
/* Footer contact block                                                */
/* ------------------------------------------------------------------ */

.footer .footer_top .content {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .footer .footer_top .content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer .footer_top .content {
    grid-template-columns: repeat(var(--footer-columns, 4), minmax(0, 1fr));
  }
}

.footer .footer_contact {
  margin-top: 12px;
}

.footer .footer_contact a {
  color: inherit;
  text-decoration: none;
}

.footer .footer_contact a:hover {
  text-decoration: underline;
}

.footer .footer_detail { margin: 0; }
.footer .footer_detail p { margin: 0 0 0.5em; }
.footer .footer_detail p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Shared index pages (collections, blog, page, search)                */
/* ------------------------------------------------------------------ */

.st-index {
  display: block;
  padding-top: 24px;
  padding-bottom: 64px;
}

.st-index-title {
  color: var(--title_color);
  font-family: var(--title_font_family);
  font-size: var(--title_font_size);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
  margin: 12px 0 24px;
  width: 100%;
}

.st-index-detail {
  color: var(--detail_color);
  margin-bottom: 24px;
  width: 100%;
}

.pdp-breadcrumb {
  align-items: center;
  color: var(--detail_color);
  display: flex;
  flex-wrap: wrap;
  font-size: calc(var(--general_font_size) - 3px);
  gap: 8px;
  padding: 4px 0 8px;
  width: 100%;
}

.pdp-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.pdp-breadcrumb a:hover {
  text-decoration: underline;
}

.pdp-breadcrumb .sep {
  opacity: 0.4;
}

.st-empty {
  padding: 40px 0;
  text-align: center;
  width: 100%;
}

.st-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
}

.st-pagination .page-item {
  border: 1px solid rgba(29, 29, 29, 0.2);
  border-radius: 6px;
  color: inherit;
  min-width: 40px;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
}

.st-pagination .page-item.active {
  background: var(--main_button_bg);
  border-color: var(--main_button_bg);
  color: var(--main_button_color);
}

.st-pagination .page-item.disabled {
  opacity: 0.4;
}

.st-collection-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.st-collection-card {
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.st-collection-media {
  border-radius: 10px;
  display: block;
  overflow: hidden;
  padding-top: 100%;
  position: relative;
}

.st-collection-media img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: transform 0.4s ease;
  width: 100%;
}

.st-collection-card:hover .st-collection-media img {
  transform: scale(1.05);
}

.st-collection-title {
  display: block;
  font-family: var(--title_font_family);
  font-size: calc(var(--general_font_size) + 2px);
  margin-top: 12px;
}

.st-collection-count {
  display: block;
  font-size: calc(var(--general_font_size) - 4px);
  opacity: 0.6;
}

.st-rich {
  color: var(--detail_color);
  line-height: 1.7;
  max-width: 820px;
  width: 100%;
}

.st-rich p {
  margin: 0 0 1em;
}

.st-article-meta {
  color: var(--detail_color);
  font-size: calc(var(--general_font_size) - 3px);
  margin-bottom: 24px;
  opacity: 0.7;
}

.st-article-cover {
  border-radius: 10px;
  margin-bottom: 32px;
  max-width: 820px;
  overflow: hidden;
  width: 100%;
}

.st-article-cover img {
  display: block;
  width: 100%;
}

.st-related-posts,
.block_blogs .container_wrapper,
.st-blog-grid {
  margin-top: 48px;
  width: 100%;
}

.st-search-form {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  max-width: 640px;
  width: 100%;
}

.st-search-form input {
  border: 1px solid rgba(29, 29, 29, 0.25);
  border-radius: 999px;
  flex: 1;
  font-size: var(--general_font_size);
  padding: 12px 20px;
}

.st-search-hint {
  color: var(--detail_color);
  opacity: 0.75;
  width: 100%;
}

.st-search-other {
  margin-top: 40px;
  width: 100%;
}

.st-search-other .list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-search-other .list li {
  border-bottom: 1px solid rgba(29, 29, 29, 0.1);
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}

.st-search-other .list a {
  color: inherit;
  text-decoration: none;
}

.st-search-other .list a:hover {
  text-decoration: underline;
}

.st-search-other .list span {
  font-size: calc(var(--general_font_size) - 4px);
  opacity: 0.6;
}

.st-contact-card {
  border: 1px solid rgba(29, 29, 29, 0.12);
  border-radius: 10px;
  margin-top: 40px;
  max-width: 560px;
  padding: 24px;
  width: 100%;
}

.st-contact-card h2 {
  font-family: var(--title_font_family);
  font-size: calc(var(--general_font_size) + 4px);
  margin: 0 0 12px;
}

.st-contact-card .list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-contact-card .list li {
  display: flex;
  gap: 16px;
  padding: 6px 0;
}

.st-contact-card .list li > span:first-child {
  opacity: 0.6;
  width: 90px;
}

.st-contact-card .list a {
  color: inherit;
}

/* ------------------------------------------------------------------ */
/* Product detail page                                                 */
/* ------------------------------------------------------------------ */

.pdp {
  display: block;
  padding-bottom: 80px;
  padding-top: 24px;
}

.pdp-main {
  display: flex;
  gap: 50px;
  width: 100%;
}

.pdp-gallery {
  flex: 1 1 55%;
  max-width: 55%;
}

.pdp-stage {
  background: #f6f5f3;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.pdp-stage::before {
  content: '';
  display: block;
  padding-top: var(--product-image-ratio, 100%);
}

.pdp-stage img {
  height: 100%;
  left: 0;
  object-fit: var(--product-image-fit, cover);
  position: absolute;
  top: 0;
  width: 100%;
}

.pdp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.pdp-thumb {
  background: #f6f5f3;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  height: 84px;
  overflow: hidden;
  padding: 0;
  width: 84px;
}

.pdp-thumb.active {
  border-color: var(--main_color);
}

.pdp-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pdp-info {
  flex: 1 1 45%;
  max-width: 45%;
}

.pdp-subtitle {
  color: var(--detail_color);
  font-size: calc(var(--general_font_size) - 2px);
  letter-spacing: var(--title_letter_spacing);
  opacity: 0.75;
  text-transform: uppercase;
}

.pdp-title {
  color: var(--title_color);
  font-family: var(--title_font_family);
  font-size: var(--big_product_font_size);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
  line-height: 1.25;
  margin: 8px 0 12px;
}

.pdp-rating {
  align-items: center;
  color: var(--detail_color);
  display: flex;
  font-size: calc(var(--general_font_size) - 3px);
  gap: 10px;
  margin-bottom: 16px;
}

.pdp-stars {
  font-size: calc(var(--general_font_size) + 2px);
  letter-spacing: 2px;
}

.pdp-price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: calc(var(--big_product_font_size) - 4px);
  gap: 12px;
  margin-bottom: 8px;
}

.pdp-save {
  background: var(--discount_tag_bg);
  border-radius: 999px;
  color: var(--discount_tag_color);
  font-size: calc(var(--general_font_size) - 5px);
  padding: 4px 12px;
}

.pdp-sku {
  color: var(--detail_color);
  font-size: calc(var(--general_font_size) - 4px);
  opacity: 0.6;
}

.pdp-excerpt {
  color: var(--detail_color);
  line-height: 1.7;
  margin: 20px 0;
}

.pdp-option {
  margin-bottom: 18px;
}

.pdp-option-label {
  color: var(--title_color);
  font-size: calc(var(--general_font_size) - 2px);
  font-weight: 600;
  margin-bottom: 8px;
}

.pdp-option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pdp-pill {
  border: 1px solid rgba(29, 29, 29, 0.25);
  border-radius: 5px;
  display: inline-block;
  font-size: calc(var(--general_font_size) - 3px);
  min-width: 44px;
  padding: 6px 12px;
  text-align: center;
}

.pdp-swatch {
  background: var(--swatch);
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(29, 29, 29, 0.2);
  border-radius: 50%;
  display: inline-block;
  height: 28px;
  width: 28px;
}

.pdp-specs {
  border-top: 1px solid rgba(29, 29, 29, 0.12);
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.pdp-specs li {
  border-bottom: 1px solid rgba(29, 29, 29, 0.12);
  color: var(--detail_color);
  display: flex;
  font-size: calc(var(--general_font_size) - 3px);
  gap: 16px;
  padding: 10px 0;
}

.pdp-specs li > span:first-child {
  opacity: 0.6;
  width: 130px;
}

.pdp-stock {
  border-radius: 6px;
  display: inline-block;
  font-size: calc(var(--general_font_size) - 4px);
  margin-top: 20px;
  padding: 6px 14px;
}

.pdp-stock-in-stock {
  background: #e6f4ea;
  color: #1c6b3a;
}

.pdp-stock-low-stock {
  background: #fff4e0;
  color: #8a5a00;
}

.pdp-stock-out-of-stock {
  background: #fdecec;
  color: #96201f;
}

.pdp-details {
  border-top: 1px solid rgba(29, 29, 29, 0.12);
  margin-top: 60px;
  width: 100%;
}

.pdp-block {
  border-bottom: 1px solid rgba(29, 29, 29, 0.12);
}

.pdp-block-head {
  align-items: center;
  background: none;
  border: 0;
  color: var(--title_color);
  cursor: pointer;
  display: flex;
  font-family: var(--title_font_family);
  font-size: calc(var(--general_font_size) + 2px);
  justify-content: space-between;
  padding: 22px 0;
  text-align: left;
  width: 100%;
}

.pdp-block-plus {
  height: 12px;
  position: relative;
  width: 12px;
}

.pdp-block-plus::before,
.pdp-block-plus::after {
  background: currentColor;
  content: '';
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pdp-block-plus::before {
  height: 2px;
  width: 12px;
}

.pdp-block-plus::after {
  height: 12px;
  width: 2px;
}

.pdp-block.open .pdp-block-plus::after {
  opacity: 0;
}

.pdp-block-body {
  color: var(--detail_color);
  display: none;
  line-height: 1.75;
  max-width: 820px;
  padding-bottom: 24px;
}

.pdp-block.open .pdp-block-body {
  display: block;
}

/* Detail copy is written in the admin as blocks of text and pictures.
   Every picture is a figure that takes a whole row, so two of them can never
   end up side by side, and the caption sits right underneath it. */
.pdp-block-body p,
.pdp-block-body ul,
.pdp-block-body ol {
  margin: 0 0 1em;
}

.pdp-block-body h3 {
  color: var(--title_color);
  font-size: calc(var(--general_font_size) + 2px);
  margin: 1.4em 0 0.6em;
}

.pdp-block-body img {
  border-radius: 10px;
  display: block;
  height: auto;
  max-width: 100%;
}

.pdp-block-body .content-figure {
  margin: 28px 0;
  width: 100%;
}

.pdp-block-body .content-figure img {
  width: 100%;
}

.pdp-block-body .content-figure figcaption {
  color: var(--detail_color);
  font-size: calc(var(--general_font_size) - 3px);
  line-height: 1.6;
  margin-top: 10px;
  opacity: 0.72;
  text-align: center;
}

.pdp-related {
  margin-top: 80px;
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1023px) {
  .st-collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .st-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-main {
    flex-direction: column;
    gap: 24px;
  }

  .pdp-gallery,
  .pdp-info {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* The picture is already width:100%; only the breathing room changes. */
  .pdp-block-body .content-figure {
    margin: 20px 0;
  }

  .pdp-block-body .content-figure figcaption {
    font-size: calc(var(--general_font_size) - 4px);
    margin-top: 8px;
  }

  .st-index {
    padding-top: 12px;
    padding-bottom: 40px;
  }
}