/* ============================================================================
   Claire Organics — Product page
   ========================================================================== */

.template-product main.wrapper.main-content { padding: 30px 24px; }
.product-single { max-width: var(--rd-page); margin: 0 auto; }
.product-single__hero { align-items: flex-start; }

/* title */
.product-single h1, .product-single .h1 {
  font-family: var(--rd-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--rd-ink);
  margin-bottom: 18px;
}

/* price block */
.product-single__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.product-single__price {
  font-family: var(--rd-serif);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--rd-ink);
}
.product-single__sale-price { color: var(--rd-ink-soft); font-size: 1.1rem; }
.product-single__sale-percent {
  display: inline-block;
  background: var(--rd-clay-deep);     /* deep clay → white clears AA (matches collection .badge--sale) */
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-family: var(--rd-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* labels above controls ("Select Your Favorite", "Quantity") */
.product_option-detail label,
.product-single__quantity .quantity-label,
.product-option-wrapper label {
  font-family: var(--rd-sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rd-ink-soft);
}

/* variant select */
.product-single__variants,
#productSelect,
select.product-single__variants {
  font-family: var(--rd-sans);
  color: var(--rd-ink);
  background-color: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  padding: 12px 16px;
}
.product-single__variants:focus { border-color: var(--rd-sage); }

/* quantity stepper — scoped to the PDP buy box; the cart/drawer stepper is
   styled in redesign-pages.css (different markup, different container width) */
.product-single__quantity .cart-qty-adjust {
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}
.product-single__btn-qty-adjust { color: var(--rd-ink); cursor: pointer; padding: 0 14px; transition: color var(--rd-dur) var(--rd-ease); }
.product-single__btn-qty-adjust:hover { color: var(--rd-sage); }
.quantity-selector, .cart__quantity-selector { font-family: var(--rd-sans); color: var(--rd-ink); }

/* add to cart. The wishlist button is this button's row partner (same width,
   same form) — it must carry the same metrics or it renders ~13px shorter,
   since on its own it only picks up timber's generic .btn padding. */
.addToCart-btn, #AddToCart, #MobileAddToCart, .btn.wishlist {
  background-color: var(--rd-sage);
  color: #fff;
  border-radius: var(--rd-radius);
  padding: 16px 36px;
  font-size: .86rem;
  letter-spacing: .14em;
}
.addToCart-btn:hover, #AddToCart:hover, .btn.wishlist:hover { background-color: var(--rd-sage-deep); color: #fff; }

/* ---- trust strip under the buy box (additive in product.liquid) ---- */
.rd-pdp-trust {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rd-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
}
.rd-pdp-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--rd-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--rd-ink-soft);
}
.rd-pdp-trust svg { width: 18px; height: 18px; flex: none; color: var(--rd-sage); }
@media (max-width: 480px) { .rd-pdp-trust { grid-template-columns: 1fr; } }

/* gallery.
   The sand card lives on the .product-slider wrapper, NOT on .flexslider — the
   two boxes are identical so it looks the same, but .flexslider must stay
   transparent. It carries z-index:3 (theme.scss) while the hover-zoom magnifier
   #overlayZoom sits at z-index:1 behind it, and the zoom rule blanks the slide
   (`#overlayZoom.active + .flexslider .slides li { opacity: 0 }`). An opaque
   .flexslider therefore covered the magnifier and the image just vanished on
   hover. Radius + overflow stay put so the slides are still clipped. */
.product-slider { border-radius: var(--rd-radius-card); background: var(--rd-sand); }
.product-slider .flexslider { border-radius: var(--rd-radius-card); overflow: hidden; background: transparent; }
.product-slider .flexslider .flex-direction-nav a { background-color: rgba(255,255,255,.75); }
.product-slider .flexslider .flex-direction-nav a:hover { background-color: #fff; }
.product-slider .flex-control-nav { bottom: 14px; }
.product-slider .flex-control-nav a { background: rgba(255,255,255,.7); border: 1px solid var(--rd-line); }
.product-slider .flex-control-nav a.flex-active { background: var(--rd-sage); }
/* gallery thumbnails */
.flexslider-has-thumbs .flex-control-thumbs img { border-radius: 6px; }
.flex-control-thumbs .flex-active { outline: 2px solid var(--rd-sage); border-radius: 6px; }

/* social sharing */
.product-single .social-sharing a:hover { color: var(--rd-sage); }

/* description (RTE) — full width of the product wrapper */
.product-description.rte {
  max-width: none;
  margin: clamp(40px, 6vw, 72px) 0 0;
  color: var(--rd-ink-soft);
  font-size: 1.02rem;
  line-height: 1.8;
}
.product-description.rte h1, .product-description.rte h2,
.product-description.rte h3, .product-description.rte h4 {
  font-family: var(--rd-serif);
  color: var(--rd-ink);
  font-weight: 500;
}
.product-description.rte h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.product-description.rte strong { color: var(--rd-ink); }
.product-description.rte a { color: var(--rd-sage); text-decoration: underline; text-underline-offset: 2px; }
/* authored <hr> separators → a deliberate clay hairline (matches section flourish) */
.product-description.rte hr {
  border: 0;
  width: 46px;
  height: 1px;
  background: var(--rd-clay);
  opacity: .6;
  margin: 28px auto;
}

/* related products heading (AJAX-injected into #recommend-products-content) */
#recommend-products-content .section-header__title { text-align: center; font-size: clamp(1.7rem, 3vw, 2.4rem); }

/* Centre the "You may also like" row. The cards are floats sized by the store's
   products-per-row setting, so a short recommendation list (4 cards in a 5-up
   grid) leaves a hole on the right. Flex + centre keeps the same card widths and
   gutters but balances the leftover space. align-items keeps theme.equalHeights()
   in charge of card height instead of flex stretching them. */
#recommend-products-content .grid-uniform {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

/* sticky mobile add bar. The blanket .btn rule below also caught the Home
   button, which theme.css styles as a white tile with black content — sage bg
   under black icon/text. Keep it white and let only the CTA carry the sage.
   The bar is a flush edge-to-edge strip, so the CTA takes no radius. */
.floating-action-bar .floating-action-bar-wrapper .btn { background-color: var(--rd-sage); }
.floating-action-bar .floating-action-bar-wrapper .btn-back-home,
.floating-action-bar .floating-action-bar-wrapper .btn-back-home:hover {
  background-color: #fff;
  color: var(--rd-ink);
}
/* carries the ID because the shared add-to-cart rule sets the radius via
   #MobileAddToCart, which outranks any class-only selector here */
.floating-action-bar .floating-action-bar-wrapper .addToCart-btn,
.floating-action-bar #MobileAddToCart { border-radius: 0; }

/* ============================================================================
   Promotions (EasyStore promo-tag app) — product page
   The app owns the markup AND ships promotion.css, which loads after every
   redesign sheet, so each rule here carries .template-product purely to outrank
   it (the app's own selectors top out at .a.b / #id). Structure:
     .sf_promo-tag-wrapper > #sf_promo-tag-label
                           > .sf_promo-tag-container > #sf_promo-tag (chips)
                                                     > #sf_promo-view-more-tag
   The app marks each chip -clickable (opens the promo detail) or -unclickable
   (informational); they now read as such — a sage chip with a chevron for the
   actionable ones, a quiet dashed outline for the rest.
   ========================================================================== */
.template-product .sf_promo-tag-wrapper { margin: 2px 0 26px; }

/* "Promotions" → the theme's eyebrow role */
.template-product #sf_promo-tag-label label {
  display: block;
  margin: 0;
  font-family: var(--rd-sans);
  font-size: var(--rd-eyebrow-size);
  font-weight: var(--rd-eyebrow-weight);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-eyebrow-color);
}

/* Chips and "View More" flow as one wrapped row. The app leaves them inline
   inside a 450px column, which put every chip on a line of its own. */
.template-product .sf_promo-tag-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  max-width: 100%;                             /* the app caps this at 450px */
}
.template-product #sf_promo-tag { display: contents; }

.template-product .sf_promo-promo-label {
  margin: 0;                                   /* the container's gap owns spacing */
  padding: 8px 15px;
  border: 1px solid var(--rd-line);
  border-radius: 999px;
  background: var(--rd-sand-soft);
  color: var(--rd-ink-soft);
  font-family: var(--rd-sans);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  transition: background var(--rd-dur) var(--rd-ease),
              border-color var(--rd-dur) var(--rd-ease),
              color var(--rd-dur) var(--rd-ease),
              transform var(--rd-dur) var(--rd-ease),
              box-shadow var(--rd-dur) var(--rd-ease);
}
/* the app lays a 5% currentColor wash over every chip — redundant now that they
   carry a real bed, and it muddies the tint */
.template-product .sf_promo-promo-label::before { display: none; }
/* the title is a <b> the app paints its own blue; inherit the chip instead */
.template-product .sf_promo-tag-label-title { color: inherit; font-weight: inherit; }

/* Informational: quiet, dashed, no affordance. The whole border is restated
   because the app's `border: 1px dashed` shorthand lands after the base rule at
   equal specificity and would otherwise reset the colour to currentColor. */
.template-product .sf_promo-promo-label.sf_promo-label-unclickable {
  border: 1px dashed color-mix(in srgb, var(--rd-ink-soft) 30%, transparent);
}
/* The app turns an unclickable chip's text blue on hover — its inline <style>
   rule ties the base rule above and wins on load order. These chips aren't
   interactive, so the hover warms into the button family (tint bed, deep-sage
   text) instead of the clickable chips' solid fill and lift. */
.template-product .sf_promo-promo-label.sf_promo-label-unclickable:hover {
  background: var(--rd-sage-tint);
  border-color: color-mix(in srgb, var(--rd-sage) 45%, transparent);
  color: var(--rd-sage-deep);
}

/* actionable: sage chip that lifts on hover */
.template-product .sf_promo-promo-label.sf_promo-label-clickable {
  padding-right: 2.5em;                        /* room for the chevron */
  background: var(--rd-sage-tint);
  border-color: color-mix(in srgb, var(--rd-sage) 35%, transparent);
  color: var(--rd-sage-deep);
}
.template-product .sf_promo-promo-label.sf_promo-label-clickable:hover {
  background: var(--rd-sage);
  border-color: var(--rd-sage);
  color: var(--rd-btn-ink);
  transform: translateY(-1px);
  box-shadow: var(--rd-shadow-sm);
}
.template-product .sf_promo-promo-label .sf_promo-svg-icon {
  right: 11px;
  width: 1.1em; height: 1.1em;
  stroke-width: 2.2;
  opacity: .85;
  transition: transform var(--rd-dur) var(--rd-ease);
}
.template-product .sf_promo-promo-label.sf_promo-label-clickable:hover .sf_promo-svg-icon {
  transform: translate(3px, -50%);             /* keeps the app's -50% centring */
}

/* "View More" carries the chip class too — keep it a quiet text link instead */
.template-product #sf_promo-view-more-tag {
  margin: 0;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--rd-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--rd-sage-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.template-product #sf_promo-view-more-tag:hover { color: var(--rd-sage); }