/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 17 2026 | 21:53:48 */
/* ==========================================================================
   SO PERFUME — SHOP LOOP PRODUCT CARD
   Paste into: Simple Custom CSS and JS -> its own CSS panel

   Load this AFTER master.css. Everything here is scoped to
   li.product.material or .sop-loop, so it never touches the rest of the site.

   REQUIRES sop-loop-meta.php, which prints the .sop-loop block at priority 6
   (between the title and the price). Without it the card still lays out
   correctly — it just carries no scent information.

   ---------------------------------------------------------------------------
   THE PROBLEM THIS FIXES
   ---------------------------------------------------------------------------
   Measured on the live /shop/ page: the "Select options" buttons sat at
   425, 425, 459, 425, 425, 459 px from their card tops. The cause was the old
   tag line, which measured 34, 34, 68, 34, 34, 68 px — five alphabetical tag
   names wrapped onto a second line for some products and not others, and
   every card below shifted.

   Two changes level it: the button is pinned to the card foot, and the scent
   line gets a fixed two-line box. All cards now measure 501.

   ALSO DROPPED from the old card CSS
     • ".product-loop-tags" and its bullet-separator rules — superseded by
       .sop-loop below.
     • "li.product:hover .product-loop-tags a { transform: translateY(-40px) }"
       — written to clear the add-to-cart overlay, which is now
       position:static, so it only made text jump on hover.
   ========================================================================== */


/* ==========================================================================
   1. CARD SHELL
   ========================================================================== */
/* The flex chain must be unbroken: li -> .product-wrap -> .product-meta ->
   button. Salient ships .product-wrap as display:block, which silently breaks
   it — .product-meta's "flex:1 1 auto" is then ignored, it only grows to fit
   its content, and "margin-top:auto" on the button has no free space to
   consume. Measured live: a card with one price row instead of two left a
   20px gap under its button; every declaration below is what closes it. */
li.product.material {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .06) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  padding: 0 !important;
}

li.product.material .product-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

li.product.material:hover {
  transform: translateY(-5%) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12) !important;
}

li.product.material .product-wrap > a img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  display: block !important;
}

/* The <li> is already display:flex (theme default), so the meta column only
   has to grow — then the button can be pushed to the foot in section 5. */
li.product.material .product-meta {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 14px 14px 0 !important;
  text-align: left !important;   /* centring made the ragged wrap worse */
  overflow: visible !important;
}

li.product.material .product-meta > a { text-decoration: none !important; }

li.product.material .nectar_quick_view { display: none !important; }
li.product.material .onsale { display: none !important; }


/* ==========================================================================
   2. TITLE
   Clamped to two lines. "Maldives In A Bottle Ylang Coco | 20" ran to three
   while its neighbour ran to two, dragging the whole card down with it.
   ========================================================================== */
li.product.material .woocommerce-loop-product__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 2.4em !important;
  margin: 0 0 8px !important;
  font-family: "Cinzel", serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: #1e1e1e !important;
  text-align: left !important;
}


/* ==========================================================================
   2b. BRAND — hoisted above the product name
   .product-meta is a flex column, so order:-1 lifts the brand above the title
   link. The hook fires after the title, so this is the only way to place it
   there without overriding the theme template.
   ========================================================================== */
li.product.material .product-meta > .sop-loop-brand {
  order: -1 !important;
  margin: 0 0 5px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #303B32 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ==========================================================================
   3. THE SCENT BLOCK
   Printed by sop_loop_meta(). Replaces the old .product-loop-tags output.
   ========================================================================== */
.sop-loop {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 0 4px !important;
}

/* family · gender */
.sop-loop-eyebrow {
  margin: 0 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: #303B32 !important;
  line-height: 1 !important;
}

/* The curated three notes, one per pyramid tier — not five alphabetical tags.
   The fixed two-line box is the single change that stopped the cards drifting
   out of alignment. */
.sop-loop-oil {
  margin: 0 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 11.5px !important;
  font-style: italic !important;
  color: #6E7B78 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 2.7em !important;
}

/* Fallback: if sop-loop-meta.php is not installed yet, the old
   .product-loop-tags output is still printed. Give it the same shape so the
   card never renders as bare unstyled links. */
.product-loop-tags {
  margin: 0 0 4px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 11.5px !important;
  font-style: italic !important;
  color: #6E7B78 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 2.7em !important;
  text-align: left !important;
}
.product-loop-tags a {
  color: #6E7B78 !important;
  font-size: 11.5px !important;
  text-decoration: none !important;
}
.product-loop-tags a + a::before { content: " · " !important; color: #b3a9a2 !important; }

.sop-loop-foot {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

/* accord dots — the product-page discs at 11px, same colour language */
.sop-loop-dots {
  display: inline-flex !important;
  gap: 3px !important;
  flex: 0 0 auto !important;
}

.sop-dot {
  --c: #9a8f86;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%,
    color-mix(in srgb, var(--c) 55%, #fff) 0%,
    var(--c) 52%,
    color-mix(in srgb, var(--c) 72%, #000) 100%);
  box-shadow: inset 0 -2px 4px color-mix(in srgb, var(--c) 60%, #000);
}

/* season · intensity — faint on purpose: it supports the scan, it is not the
   message. Truncates rather than wrapping, so it cannot add height. */
.sop-loop-chips {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #9a8f86 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}


/* ==========================================================================
   4. PRICE
   Sits below the scent block, next to the call to action.
   ========================================================================== */
li.product.material .price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  margin: 0 0 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(16, 32, 31, .08) !important;
  overflow: visible !important;
  text-align: left !important;
  font-size: 12px !important;
  color: #1e1e1e !important;
}

li.product.material .variation-price-item {
  display: flex !important;
  width: auto !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 5px !important;
  white-space: nowrap !important;   /* keeps a size and its price together */
  font-size: 12px !important;
  margin-bottom: 0 !important;
}

/* the " | " separator only reads correctly on a single line */
li.product.material .variation-price-item + .variation-price-item::before {
  content: none !important;
}

li.product.material .variation-name {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  min-width: 42px !important;   /* keeps the two size labels aligned */
}


/* ==========================================================================
   5. BUTTON
   ========================================================================== */
/* Salient ships the button as a hover overlay:
     .woocommerce .material.product .product-wrap .product-add-to-cart a
   at specificity (0,5,1) with !important, so a plain
   "li.product.material .product-add-to-cart a.button" (0,4,2) loses and the
   button renders as bare transparent text. Repeating Salient's .product-wrap
   step and adding .button takes this to (0,6,2), which wins. */
.product-add-to-cart { z-index: 99 !important; }

.woocommerce li.product.material .product-wrap .product-add-to-cart {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important;
  transform: none !important;
  display: block !important;
  text-align: center !important;
  /* margin-top:auto levels every card; the negative sides cancel
     .product-meta's 14px padding so the button runs edge to edge. The card's
     border-radius:16px + overflow:hidden clips its bottom corners for us. */
  margin: auto -14px 0 !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  top: auto !important; bottom: auto !important;
  left: auto !important; right: auto !important;
}

.woocommerce li.product.material .product-wrap .product-add-to-cart a.button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #1e1e1e !important;
  background-color: #1e1e1e !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 15px 10px !important;
  margin: 0 !important;
  min-height: 42px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.woocommerce li.product.material .product-wrap .product-add-to-cart a.button .text {
  color: #fff !important;
  font-size: 11px !important;
}

.woocommerce li.product.material .product-wrap .product-add-to-cart a.button:hover,
.woocommerce li.product.material .product-wrap .product-add-to-cart a.button:hover .text {
  background-color: #303B32 !important;
  color: #fff !important;
}

/* Quick View lives inside .product-add-to-cart, so it needs its own kill */
li.product.material .product-add-to-cart a.nectar_quick_view { display: none !important; }


/* ==========================================================================
   5b. NEUTRALISE SALIENT'S HOVER CHOREOGRAPHY
   Salient fades the price out and slides the title and price up 11px on
   hover, to clear room for the overlay we just removed. Left alone it makes
   the price disappear and the text jump — the "cut text all over the place".

     .woocommerce .material.product:hover .product-wrap .product-meta > .price
        { opacity: 0 }                                        (0,7,0)
     .woocommerce .material.product:hover .product-meta > .price, ... h2
        { transform: translateY(-11px) }

   Adding the li type selector gives (0,7,1), which outranks the first.
   ========================================================================== */
.woocommerce li.product.material:hover .product-wrap .product-meta > .price {
  opacity: 1 !important;
  transform: none !important;
}

.woocommerce li.product.material:hover .product-wrap .product-meta > h2,
.woocommerce li.product.material:hover .product-wrap .product-meta > a,
.woocommerce li.product.material:hover .product-wrap .product-meta > .sop-loop,
.woocommerce li.product.material:hover .product-wrap .product-meta > .product-loop-tags,
.woocommerce li.product.material:hover .product-wrap .product-meta > .product-add-to-cart,
.woocommerce li.product.material:hover .product-wrap .product-meta .woocommerce-loop-product__title {
  transform: none !important;
  opacity: 1 !important;
}


/* ==========================================================================
   6. MOBILE — two up
   ========================================================================== */
@media only screen and (max-width: 690px) {
  li.product.material .product-wrap > a img { height: 180px !important; }
  li.product.material .product-meta { padding: 11px 11px 0 !important; }

  li.product.material .woocommerce-loop-product__title {
    font-size: 11px !important;
    letter-spacing: .07em !important;
  }

  .sop-loop { gap: 6px !important; }
  .sop-loop-eyebrow { font-size: 8px !important; letter-spacing: .12em !important; }
  .sop-loop-oil { font-size: 10.5px !important; }

  /* at ~160px of card width the dots and the chips cannot share a row */
  .sop-loop-foot { flex-wrap: wrap !important; gap: 5px 7px !important; }
  .sop-loop-chips { font-size: 8.5px !important; }
  .sop-dot { width: 9px; height: 9px; }

  li.product.material .variation-price-item { font-size: 11px !important; }
  li.product.material .variation-name { font-size: 10px !important; min-width: 38px !important; }
  .woocommerce li.product.material .product-wrap .product-add-to-cart { margin: auto -11px 0 !important; padding: 0 !important; }
}


/* ==========================================================================
   7. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  li.product.material,
  li.product.material .product-add-to-cart a.button { transition: none !important; }
  li.product.material:hover { transform: none !important; }
}