/** Shopify CDN: Minification failed

Line 169:60 Unexpected "{"

**/
.card__quick-add-container{
    display: flex;
}

.card__quick-add-container--desktop{
    display: none !important;
}

@media screen and (min-width: 900px){
    .card__quick-add-container button{
        height: unset;
    }
}

.video-reels [data-swiper-slide] .video-container{
    aspect-ratio: .7 !important;
}

.wt-products-slider__slider .wt-slider__slide .swiper-slide__content{
    flex-direction: column-reverse;
}
/* Card wrapper – transparent */
.wt-featured-collection .wt-slider__card-wrapper, .collection__grid__item   {
  background: transparent; /* ✅ remove white background */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;

  /* padding: 12px 12px 0; */
  padding: 0;


  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.main-search-tab__container .collection__grid__item{
  padding: 12px 12px 8px 12px;
}

.main-search-tab__container .collection__grid__item .card__title{
  padding-left: 0;
  padding-right: 0;
}

.main-search-tab__container .collection__grid__item .card__img {
  border-radius: 16px;
}

.main-search-tab__container .collection__grid__item div.card{
  padding-left: 8px;
  padding-right: 8px;
}

/* .main-search-tab__container .card__picture-container {
  display: flex;
} */

@media (min-width: 900px){
  .wt-featured-collection .card__quick-add-container button, .collection__grid__item .card__quick-add-container button{
    margin-left: 12px;
    margin-right: 12px;
  }

  .wt-featured-collection .card__title, .collection__grid__item .card__title{
    padding-left: 20px;
    padding-right: 20px;
  }
}

.wt-featured-collection .card__quick-add-container button, .collection__grid__item .card__quick-add-container button{
    margin-left: 8px;
    margin-right: 8px;
  }
.wt-featured-collection .card__title, .collection__grid__item .card__title{
    padding-left: 12px;
    padding-right: 12px;
  }


/* Hover lift */
.wt-featured-collection .wt-slider__card-wrapper:hover, .collection__grid__item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}


/* Image spacing only */
.wt-featured-collection .wt-slider__card-wrapper .card__picture-container, .collection__grid__item .card__picture-container{
  margin-bottom: 8px;
}


/* Keep image natural */
.wt-featured-collection .wt-slider__card-wrapper img, .collection__grid__item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  /* border-radius: 12px; */
  border-radius: 0;
}


/* Content layout */
.wt-featured-collection .wt-slider__card-wrapper .card__container, .collection__grid__item .card__container{
  display: flex;
  flex-direction: column;
}


/* REMOVE extra bottom gap under button */
.wt-featured-collection .wt-slider__card-wrapper .card__quick-add-container, .collection__grid__item .card__quick-add-container{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0;
}


/* Optional: tighter mobile */
@media (max-width: 899px) {
  .wt-featured-collection .wt-slider__card-wrapper, .collection__grid__item   {
    /* padding: 8px 8px 0 8px; */
    border-radius: 14px;
  }

  .wt-featured-collection .wt-slider__card-wrapper .card__title, .collection__grid__item .card__title{
    margin-top: 0;
  }

  .wt-featured-collection .wt-product__add-to-cart_form--wrapper button{
    margin-top: 4px;
    margin-bottom: 12px;
  }

  .card__quick-add-container{
    margin-top: 6px;
  }

  .jdgm-widget .jdgm-prev-badge{
    display: flex !important;
    flex-direction: column;
  }
}
/* ======================================
   MOBILE CARD HEIGHT COMPRESSION (FINAL)
====================================== */
@media (max-width: 899px) {


  /* Card wrapper */
  .wt-products-slider__slider .wt-slider__card-wrapper {
    padding: 8px !important;
  }


  /* Product image spacing */
  .wt-products-slider__slider .card__picture-container{
    margin-bottom: 6px !important;
  }


  /* Product title */
  .wt-products-slider__slider .card__center h3,
  .wt-products-slider__slider .card__center .card__heading, {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }


  /* Price block */
  .wt-products-slider__slider .price{
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }


  /* Sale price grouping */
  .wt-products-slider__slider .price__sale {
    gap: 6px !important;
  }


  /* Discount badge */
  .wt-products-slider__slider .price-item--percent{
    font-size: 11px !important;
    padding: 4px 8px !important;
  }


  /* Button wrapper */
  .wt-products-slider__slider .card__quick-add-container{
    margin-top: 8px !important;
  }


  /* Button (keep tappable, but compact) */
  .wt-products-slider__slider .card__quick-add-container button{
    min-height: 42px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
}

/* Fix for blog posts read more button */
.wt-blog__read {
  margin: 0;
}
.wt-blog__read button {
  margin-top: 0;
  margin-bottom: 0px;
  padding: 16px 0;
}

/* price */
@media (max-width: 1199px) {
    .price__sale .price-item--lower {
        font-size: var(--font-price-size);
    }
}

.wt-products-slider__slider .swiper-slide .swiper-slide__content .price__sale .price-item{
   font-size: var(--font-price-size);
   color: var(--color-price);
}

.wt-products-slider__slider .swiper-slide .swiper-slide__content .price__container .price__sale .price-item--percent {
    color: var(--color-sale-badge-text);
    background-color: var(--color-sale-badge-background);
}

/* hide star reviews in live search results */
.search-result-list .wt-rating__stars{
    display: none;
}

.wt-products-slider__slider .wt-slider__slide .swiper-slide__content .wt-products-slider__product {
  max-width: 80%;
  width: 100%;
  margin: 0px auto 0px auto;;
}

.wt-products-slider__slider .wt-slider__slide .swiper-slide__content {
  justify-content: flex-end;
}

@media screen and (max-width: 899px) {
  .wt-products-slider__slider .wt-slider__slide .swiper-slide__content .wt-products-slider__product{
    max-width: 320px;
    padding: 1rem;
  }

  .wt-products-slider__slider.wt-products-slider__slider--promo .wt-slider__nav-btn {
    display: flex !important;
    top: 25%;
    height: 30px;
    width: 30px;
    z-index: 15;
    pointer-events: auto;

  }

  .wt-products-slider__slider.wt-products-slider__slider--promo .wt-slider__nav-btn.wt-slider__nav-next {
    margin-right: 10px;
  }

  .wt-products-slider__slider.wt-products-slider__slider--promo .wt-slider__nav-btn.wt-slider__nav-prev {
    margin-left: 10px;
  }

  .svg-icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .wt-products-slider__product .wt-products-slider__product {
    width: 90%;
    margin: auto;
  }

  /* .wt-products-slider__slider .wt-slider__slide .swiper-slide__content .wt-products-slider__product {
    max-width: 280px;
  } */
} 
.collection__counter {
  display: none !important;
}
.price-item-percent,
.price-item--percent,
.price__sale .price-item--percent {
    display: none !important;
}

/* ======================================
   PRODUCT PAGE HEAD (21 Aug 2026)
   1. Vendor line ("Clarity Labs") above the product title, hidden.
      .wt-product__brand only ever renders on product pages.
   2. 20px gap between the header and page content, all templates.
      main#root is the content wrapper on every template.
====================================== */
.wt-product__brand{
  display:none !important;
}

main#root{
  padding-top:20px !important;
}

/* ======================================
   TESTIMONIALS CAROUSEL - product pages only (21 Aug 2026)
   Hidden on every product template; the homepage instance is untouched
   because its body class is template-index, not template-product-*.
   The section wrapper holds nothing else, so it collapses to 0px.
====================================== */
body[class^="template-product"] [class*="ai-testimonials-section-"]{
  display:none !important;
}

/* ======================================
   PRODUCT TITLE - Start Case (21 Aug 2026)
   The theme uppercases every h1-h6 via --font-headline-transform.
   This overrides it for the product page title ONLY, so section
   headings elsewhere stay uppercase.
   capitalize adds capitals but never removes them, so "DeTan"
   keeps its internal capital while "of" becomes "Of".
====================================== */
.wt-product__name{
  text-transform:capitalize !important;
}

/* ======================================
   HEADER CART COUNT (22 Aug 2026)
   The theme's icon set "option_4" is a dot-only indicator: critical.css
   hides the number with text-indent:200% + overflow:hidden inside a 10px
   circle. The count is present and correct in the HTML, just clipped.
   Proper fix is Theme settings > Icons > Icon set, but that panel is
   currently unreachable - config/settings_schema.json has trailing
   commas (invalid JSON) starting in the Typography panel. Documented,
   not fixed, because settings_data.json holds orphaned keys that a
   settings save could prune (layout, sticky_header, logo widths,
   enable_wishlist). Fix the schema deliberately, not as a side effect.

   To resize: change width/height/min-width together, and font-size to
   about 60% of that. Desktop and mobile are set separately below.
====================================== */
.wt-header__panel__counter{
  text-indent:0 !important;
  overflow:visible !important;
  line-height:1 !important;
  align-items:center !important;
  justify-content:center !important;
  /* DESKTOP size - icon is 28px here */
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  font-size:10px !important;
}

/* MOBILE - the cart icon is only 18px, so a desktop-sized badge covers it
   completely. Smaller, and nudged onto the bottom-right corner instead. */
@media screen and (max-width: 749px){
  .wt-header__panel__counter{
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
    font-size:8px !important;
    top:auto !important;
    bottom:-2px !important;
    right:-4px !important;
    left:auto !important;
  }
}

/* ======================================
   PRODUCT PAGE PRICE - one line + Save badge (23 Aug 2026)
   Theme default stacks the price onto two lines below 1200px
   (.price__sale.visible is column-reverse, only becoming row-reverse
   at min-width:1200px). That hit mobile, tablet and small laptops.

   Scoped to .price--large, which exists ONLY on the product page -
   0 occurrences on collection, home and search, so those grids keep
   the theme's own layout untouched.

   display:contents on the details wrapper lifts the price and the
   Save badge up to be flex children of .price__sale, so all three
   items can be ordered: price, struck compare, Save %.

   The Save badge markup already existed but was hidden globally by
   the .price-item--percent rule further up this file. That global
   hide stays; this only un-hides it on the product page.
   Wording ("Save 33%") comes from snippets/price.liquid.
====================================== */
.price--large .price__sale.visible{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  gap:9px !important;
}

.price--large .price__sale__details-wrapper{
  display:contents !important;
}

.price--large .price__details{
  display:none !important;
}

.price--large .price-item--sale{ order:1 !important; }
.price--large .price__sale > span:not([class]){ order:2 !important; }

/* Struck compare price steps down to 80% of the live price.
   1em, not 18px: em resolves against .price (18px) which is what the
   block's "Text scale" sliders move, so the ratio survives if those are
   changed. 1 x 18 = 18px, which is 0.80 of the 22.4px price.
   NOTE: main.css shrinks this to 13px below 1199px, and an earlier rule
   in this file cancels that back to 16px for product CARDS. This rule is
   !important so the product page keeps 18px at every width regardless. */
.price--large .price-item--lower{
  font-size:1em !important;
}

.price--large .price-item--percent{
  order:3 !important;
  display:inline !important;
  background:none !important;
  color:#0F6E56 !important;
  font-size:13px !important;
  font-weight:500 !important;
  padding:0 !important;
}

/* ======================================
   STICKY PRODUCT INFO - clear the header (23 Aug 2026)
   The theme makes the product info column sticky from 900px up:
     @media (min-width:900px){ .wt-product__main{ position:sticky;
                               top:calc(var(--gap,8px)*2) } }   -> 16px
   But the sticky header occupies the top 82px and sits at z-index 16
   against the column's z-index 5, so the column parked 66px too high
   and the header covered the title and price.

   Header height measured live: 122px at rest, 82px once scrolled.
   82px is the one that matters - sticky is only engaged while scrolled.
   94px = 82px header + 12px breathing gap.

   Matches the theme's own min-width:900px so MOBILE IS UNTOUCHED
   (confirmed fine as-is). Also body-scoped to product templates.
   If the header design changes height, this number needs revisiting -
   the theme exposes no header-height CSS variable to key off.
====================================== */
@media screen and (min-width: 900px){
  body[class^="template-product"] .wt-product__main{
    top:94px !important;
  }
}

/* ======================================
   SECTION SPACING CAP - 40px desktop / 20px mobile (31 Aug 2026)

   !! READ THIS BEFORE EDITING THE SELECTORS !!
   The AI blocks name EVERY inner element with the same prefix as their
   outer wrapper: ai-product-feature-<uid>, ai-product-feature-container-<uid>,
   ai-product-feature-grid-<uid>, -column-, -carousel-, and so on.
   A bare [class*="ai-product-feature-"] matches 48 elements on the DeTan
   PDP and forces padding onto every nested container - it destroys the
   layout. The "> " direct-child combinator is what restricts this to the
   ONE outer wrapper, which is always a direct child of .shopify-block.
   Verified: 48 matches without it, 4 with it.

   Deliberately NOT included:
     .wt-parallax__gallery  (160/801) - structural, the parallax scroll
                                        effect needs that space
     .wt__quick-buy--wrapper (56/74)  - a drawer, not a section
   Already within spec, so untouched: .wt-before-after, ai-key-ingredients,
   ai-testimonials-section, ai-announcement-bar.

   TRADE-OFF: these blocks expose padding sliders in the theme editor.
   This cap overrides them, so those sliders will appear to do nothing.
   Delete this block to hand control back to the editor.
====================================== */
@media screen and (min-width: 750px){
  .shopify-block > [class*="ai-product-feature-"],
  .shopify-block > [class*="ai-how-it-works-"],
  .shopify-block > [class*="ai-faq-accordion-"],
  .jm-review-widget,
  .hh{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
}

@media screen and (max-width: 749px){
  .shopify-block > [class*="ai-product-feature-"],
  .shopify-block > [class*="ai-how-it-works-"],
  .shopify-block > [class*="ai-faq-accordion-"],
  .jm-review-widget,
  .hh{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
}

/* ======================================
   POPULAR ADD-ONS SPACING - match the DeTan template (1 Sep 2026)
   The featured-collection section padding had drifted between product
   templates. Measured before this rule:

     de-tan, anti-acne, anti-dandruff .... 40/40 desktop, 20/20 mobile  OK
     muscle-recovery, syndet-bar,
     muscle-relief-wash, gentle-care ..... 0/20 desktop, 0/40 mobile    WRONG

   The second group had no top padding at all, so Popular Add-Ons sat
   flush against the marquee bar above it - and its mobile bottom (40px)
   was LARGER than its desktop bottom (20px), which looks like the two
   values were entered into the wrong fields.

   This forces every product template to the DeTan values. The three
   already-correct templates are unaffected (the rule matches what they
   already compute). Horizontal padding is untouched - still 24px.

   Scoped to product templates: the homepage has a featured collection
   too (body.template-index) and keeps its own spacing.
====================================== */
@media screen and (min-width: 750px){
  body[class^="template-product"] .fc-section.npg{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
}

@media screen and (max-width: 749px){
  body[class^="template-product"] .fc-section.npg{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
}