/* ============================================================================
   Claire Organics — Product cards (shared) + collection page
   ========================================================================== */

/* ---- product card — open editorial style --------------------------------
   Refs: Cuura (open cards, consistent neutral image bed, calm spacing) +
   L'Occitane (restrained chrome). Drops the boxed white card for a rounded
   image tile + text on the ivory canvas; refined sale flag + quiet discount;
   slow image zoom + secondary-image crossfade on hover. */
.product_grid-item { margin-bottom: clamp(28px, 3vw, 46px); text-align: center; }

/* Larger imagery via fewer columns. The references (Cuura/L'Occitane) run 3-up
   PORTRAIT tiles, but every Claire product photo is shot SQUARE (1:1) — a
   portrait tile would side-crop them all — so we keep the 1:1 tile and enlarge
   it by dropping 5-up to 4-up. Converting the shared .product-list-grid to CSS
   grid overrides timber's float width classes for both the home featured grid
   and the collection grid. */
.product-list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(18px, 2.2vw, 38px);
  row-gap: clamp(30px, 3vw, 52px);
  /* The element still carries .grid-uniform, so timber hands it a negative
     gutter (margin: 0 0 0 -30px, -15px under 991px). That only made sense for
     the float layout, where it cancelled the 30px padding-left on each
     .grid__item child. Under CSS grid the children have no padding and `gap`
     owns the spacing, so the negative margin just drags the whole grid 30px
     left — eating the gutter against the collection sidebar — and pulls the
     pagination up by 30px. Zero it out. */
  margin: 0;
}
.product-list-grid > .product_grid-item {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
}
/* 991px matches timber's sidebar/full-width seam (was 989 → a 990–991px window
   where the grid stayed 4-up at full width) */
@media (max-width: 991px) { .product-list-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 749px) {
  .product-list-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 30px; }
}

.product_grid-item .grid-link {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* image tile: consistent warm bed, rounded, clips the hover zoom */
.product_grid-item .grid-link__image {
  display: block;
  position: relative;
  background: var(--rd-sand);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  overflow: hidden;
  opacity: 1 !important;
  box-shadow: 0 1px 2px rgba(44, 52, 42, .04);
  transition: box-shadow var(--rd-dur) var(--rd-ease);
}
.product_grid-item .grid-link:hover .grid-link__image { box-shadow: var(--rd-shadow); }

/* images fill the tile; slow zoom + secondary-image crossfade on hover */
.product_grid-item .grid-link__image-centered { opacity: 1 !important; }
/* Force ONLY the featured image opaque (beats the theme's hover-dim), and only
   when in stock — never blanket every img: the secondary must stay hidden until
   hover, and sold-out items should keep the theme's dim. */
.product_grid-item:not(.sold-out) .product-featured_image { opacity: 1 !important; }
.product_grid-item .product-featured_image,
.product_grid-item .product-secondary_image {
  transition: transform .65s var(--rd-ease), opacity var(--rd-dur) var(--rd-ease);
}
.product_grid-item .grid-link:hover .product-featured_image,
.product_grid-item .grid-link:hover .product-secondary_image { transform: scale(1.06); }
/* secondary sits ABOVE the featured (z-index 3 > theme's featured 2), hidden at
   rest, crossfades in on hover */
.product_grid-item .product-secondary_image { opacity: 0; z-index: 3; }
.product_grid-item .grid-link:hover .product-secondary_image { opacity: 1 !important; }

/* text block on the ivory canvas */
.product_grid-item .product-meta_link { display: block; padding: 16px 6px 0; }

/* title — apothecary label, clamped to 2 lines so prices align across a row */
.grid-link__title {
  font-family: var(--rd-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .07em;
  line-height: 1.5;
  color: var(--rd-ink);
  text-transform: uppercase;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;   /* 2 × line-height(1.5) → 1- and 2-line titles align prices */
}

/* price */
.grid-link__meta { color: var(--rd-ink-soft); font-size: .95rem; line-height: 1.5; }
.product_grid-item .grid-link .grid-link__meta > .money,
.grid-link__meta .money { color: var(--rd-ink); font-weight: 700; }
/* compare-at price: muted but AA on ivory (was #9b9384 ≈ 2.7:1, failed) */
.grid-link__sale_price { color: var(--rd-ink-soft); font-weight: 400; font-size: .88rem; margin-right: 3px; }
/* quiet discount — soft clay tint, not a loud solid pill */
.product_grid-item .grid-link .grid-link__meta .grid-link__sale_price-percent {
  display: inline-block;
  color: var(--rd-clay-deep);          /* AA on the soft clay tint + ivory */
  background: rgba(143, 86, 48, .08);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
}

/* sale / sold-out flags — refined, delicate */
.badge--sale {
  top: 12px; left: 12px;
  background: var(--rd-clay-deep);     /* deep clay → white text clears AA (~6:1) */
  color: #fff;
  border-radius: 999px;
  padding: 4px 11px;
  box-shadow: 0 6px 16px -8px rgba(44, 52, 42, .5);
}
.badge--sale .badge__text {
  font-family: var(--rd-sans);
  font-weight: 700;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
/* centered overlay (theme default) — explicit so it never clips and never
   collides with the top-left SALE badge when an item is both on-sale + sold-out */
.badge--sold-out {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 6px 16px;
  background: rgba(44, 52, 42, .88);
  border-radius: 999px;
  box-shadow: none;
}
.badge--sold-out .badge__text {
  font-family: var(--rd-sans);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .62rem;
  color: #fff;
}

/* quick-add float button — renders on the live store (home_page_add_to_cart);
   absent in preview because the theme checks == true and preview passes "1".
   .btn already gives it the sage system; clip it to the rounded tile bottom. */
.product_grid-item .grid-link__image .float-btn.btn {
  border-radius: 0;
  letter-spacing: .1em;
  font-size: .72rem;
}

/* reduced-motion: keep the (motion-free) image crossfade, drop the zoom */
@media (prefers-reduced-motion: reduce) {
  .product_grid-item .product-featured_image,
  .product_grid-item .product-secondary_image {
    transition: opacity var(--rd-dur) var(--rd-ease);
    transform: none !important;
  }
}

/* ---- collection page shell ---- */
.template-collection main.wrapper.main-content { padding-top: 24px; }

/* collection banner — slim editorial band. The real banner image lives inside
   .rte--header (collection.description); the old cdn.store-assets / .collection-hero
   selectors never matched the live /cdn/s/ src, so the banner ran ~620px tall and
   pushed every product below the fold. Cap it to a ~21:6 band. */
.template-collection .rte--header {
  max-width: var(--rd-page);
  margin: 0 auto 8px;
  padding: 0 24px;
}
.template-collection .rte--header img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 6;
  object-fit: cover;
  border-radius: var(--rd-radius-card);
}

/* collection title */
.template-collection .section-header__title,
.template-collection h1 {
  text-align: center;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}

/* sidebar: sort + collections list */
.collection-sidebar h4,
.sidebar h4,
aside h4 {
  font-family: var(--rd-sans);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rd-ink);
}
select.btn--tertiary,
.collection-sorting select {
  background-color: var(--rd-surface);
  color: var(--rd-ink);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  font-family: var(--rd-sans);
  letter-spacing: .02em;
  text-transform: none;
}
select.btn--tertiary:hover,
select.btn--tertiary:focus,
select.btn--tertiary:active { background-color: var(--rd-surface); color: var(--rd-ink); }

/* collection list links */
.template-collection aside a,
.collection-sidebar a { color: var(--rd-ink-soft); transition: color var(--rd-dur) var(--rd-ease); }
.template-collection aside a:hover,
.collection-sidebar a:hover { color: var(--rd-sage); }

/* curated sidebar groups ("Shop by Concern" + the gated Collections list) —
   additive markup in collection.liquid */
.collection-sidebar .rd-sidebar-group { margin: 0 0 26px; }
/* The sort/tag blocks above them are plain .form-horizontal wrappers with no
   bottom margin of their own, so the Sort-by select sat flush against the next
   group's heading. Put them on the same 26px rhythm. */
.collection-sidebar .form-horizontal { margin: 0 0 26px; }
.collection-sidebar > :last-child { margin-bottom: 0; }
.collection-sidebar .rd-sidebar-group > .h4 { display: block; margin-bottom: 12px; }
.collection-sidebar .collection-link { margin: 8px 0; line-height: 1.3; }
.collection-sidebar .collection-link a { font-family: var(--rd-sans); font-size: .9rem; }

/* pagination */
.pagination-custom a, .pagination a { color: var(--rd-ink); }
.pagination-custom .active span, .pagination .active span { color: var(--rd-sage); }

@media (max-width: 749px) {
  .grid-link__title { font-size: .74rem; letter-spacing: .05em; }
  .product_grid-item .product-meta_link { padding: 12px 2px 0; }
  .product_grid-item { margin-bottom: 26px; }
}