/* ============================================================
   FLAGSHIP PRODUCT CARDS — concentric geometry + precision type
   Canonical values live in main.css. Inner curves are computed there as
   outer radius - actual inset; media and image nodes inherit their plate.
   ============================================================ */
:root {
  --ol-card-radius-outer: var(--ol-radius-card);
  --ol-card-inset: var(--ol-card-padding);
  --ol-card-radius-inner: var(--ol-radius-plate);
  --ol-feature-radius-outer: var(--ol-radius-feature-card);
  --ol-feature-inset: var(--ol-feature-card-padding);
  --ol-feature-radius-inner: var(--ol-radius-feature-plate);
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product,
body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product:hover {
  border-radius: var(--ol-card-radius-outer) !important;
  border-color: color-mix(
    in oklab,
    var(--ol-forest-900) 12%,
    transparent
  ) !important;
  background: color-mix(in oklab, var(--ol-cream-50) 96%, white) !important;
  box-shadow: 0 18px 44px -38px rgba(20, 32, 26, 0.5) !important;
  transition:
    transform 0.52s cubic-bezier(0.2, 0.75, 0.2, 1),
    border-color 0.52s cubic-bezier(0.2, 0.75, 0.2, 1),
    box-shadow 0.52s cubic-bezier(0.2, 0.75, 0.2, 1) !important;
}

@media (hover: hover) {
  body.oasis-redesign
    :is(
      .ol-products__grid,
      .ol-shop-body,
      .related.products,
      .upsells.products,
      .up-sells.products
    )
    ul.products
    li.product:hover {
    border-color: color-mix(
      in oklab,
      var(--ol-forest-900) 20%,
      transparent
    ) !important;
    box-shadow: 0 28px 62px -40px rgba(20, 32, 26, 0.58) !important;
    transform: translateY(-2px) !important;
  }
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product
  > a.woocommerce-LoopProduct-link,
body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product
  > a.woocommerce-loop-product__link {
  padding: var(--ol-card-inset) var(--ol-card-inset) 0 !important;
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  .ol-card__plate {
  position: relative;
  order: 0;
  display: grid;
  width: 100%;
  margin: 0 0 0.9rem;
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  /* The inset lives HERE, not on the <img>. border-radius clips an image's
     border box, but a padded image paints inside its content box, so the
     photo's square corners survive the rounding. Pad the plate, not the photo. */
  padding: clamp(0.75rem, 1.15vw, 0.95rem);

  /* No frame. The plate used to paint its own beige gradient, border and inner
     shadow, which stacked a third surface between the card and the photo —
     card > plate > photo. It is now just a transparent spacer that holds the
     square aspect ratio and the inset; the photo reads directly on the card. */
  border: 0;
  border-radius: var(--ol-card-plate-radius, 16px);
  background: transparent;
  box-shadow: none;
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  .ol-card__plate
  img.ol-card__image,
body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  li.product:hover
  .ol-card__plate
  img.ol-card__image {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  /* Zero padding is load-bearing: with padding, border-radius would clip the
     border box while the photo painted inside the content box, leaving the
     white image corners square. The plate carries the inset instead. */
  padding: 0 !important;
  border-radius: 10px !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(0.96) contrast(1.015) !important;
  transform: scale(1) !important;
  transition:
    transform 0.68s cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 0.68s cubic-bezier(0.2, 0.75, 0.2, 1) !important;
}

@media (hover: hover) {
  body.oasis-redesign
    :is(
      .ol-products__grid,
      .ol-shop-body,
      .related.products,
      .upsells.products,
      .up-sells.products
    )
    li.product:hover
    .ol-card__plate
    img.ol-card__image {
    filter: saturate(1) contrast(1.02) !important;
    transform: scale(1.02) !important;
  }
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  .ol-shop-card__meta {
  min-height: 1.3em;
  margin: 0 0.65rem 0.42rem !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product
  .woocommerce-loop-product__title,
body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product
  h2.woocommerce-loop-product__title {
  min-height: 2.7em !important;
  margin: 0 0.65rem 0.55rem !important;
  font-family: var(--ol-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-wrap: pretty;
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product
  .price {
  min-height: 1.4rem !important;
  margin: 0 0.65rem !important;
  padding: 0 0 0.8rem !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.93rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  font-variant-numeric: lining-nums tabular-nums;
}

body.oasis-redesign .ol-card-options {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 4.25rem;
  margin: auto 1rem 0;
  padding: 0;
  border: 0;
}

body.oasis-redesign .ol-card-options--empty {
  min-height: 4.25rem;
}

body.oasis-redesign .ol-card-options__legend {
  width: 100%;
  margin: 0 0 0.32rem;
  padding: 0;
  color: color-mix(in oklab, var(--ol-ink-900) 58%, transparent);
  font-family: var(--ol-font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
}

body.oasis-redesign .ol-card-options__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  min-width: 0;
}

body.oasis-redesign .ol-card-option {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  cursor: pointer;
}

body.oasis-redesign .ol-card-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

body.oasis-redesign .ol-card-option > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 44px;
  padding: 0.55rem 0.72rem;
  box-sizing: border-box;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 22%, transparent);
  border-radius: var(--ol-radius-control);
  background: color-mix(in oklab, var(--ol-cream-100) 80%, white);
  color: var(--ol-forest-900);
  font-family: var(--ol-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 0.25s var(--ol-ease),
    background-color 0.25s var(--ol-ease),
    color 0.25s var(--ol-ease);
}

body.oasis-redesign .ol-card-option input:checked + span {
  border-color: var(--ol-forest-900);
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
}

body.oasis-redesign .ol-card-option input:focus-visible + span {
  outline: 3px solid color-mix(in oklab, var(--ol-forest-700) 34%, transparent);
  outline-offset: 2px;
}

body.oasis-redesign .ol-card-option.is-disabled {
  cursor: not-allowed;
}

body.oasis-redesign .ol-card-option.is-disabled > span {
  border-style: dashed;
  color: color-mix(in oklab, var(--ol-ink-900) 38%, transparent);
  opacity: 0.62;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product
  > :is(.button, a.add_to_cart_button, .ol-select-size, .ol-shop-card__cta) {
  margin: 0.7rem 1rem 1rem !important;
  border-radius: var(--ol-radius-control) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product
  > .ol-shop-card__cta--disabled {
  border-color: color-mix(
    in oklab,
    var(--ol-ink-900) 15%,
    transparent
  ) !important;
  background: color-mix(in oklab, var(--ol-cream-200) 60%, white) !important;
  color: color-mix(in oklab, var(--ol-ink-900) 46%, transparent) !important;
}

body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  ul.products
  li.product
  .onsale,
body.oasis-redesign
  :is(
    .ol-products__grid,
    .ol-shop-body,
    .related.products,
    .upsells.products,
    .up-sells.products
  )
  .ol-shop-card__stock {
  border-radius: var(--ol-radius-badge) !important;
}

/* Dedicated featured specimen: same geometry and type hierarchy at hero scale. */
body.oasis-redesign .ol-hero-product,
body.oasis-redesign .ol-hero-product:hover {
  padding: var(--ol-feature-inset);
  border-radius: var(--ol-feature-radius-outer);
  transition:
    border-color 0.52s cubic-bezier(0.2, 0.75, 0.2, 1),
    box-shadow 0.52s cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 0.52s cubic-bezier(0.2, 0.75, 0.2, 1);
}

body.oasis-redesign .ol-hero-product__plate {
  border-radius: var(--ol-feature-radius-inner);
}

body.oasis-redesign .ol-hero-product__image {
  border-radius: inherit;
}

body.oasis-redesign .ol-hero-product__eyebrow {
  border-radius: var(--ol-radius-badge);
}

body.oasis-redesign .ol-hero-product__name {
  font-family: var(--ol-font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

body.oasis-redesign .ol-hero-product__price {
  min-height: 1.4rem;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

body.oasis-redesign .ol-hero-product__action {
  display: grid;
  gap: 0.7rem;
  padding: 0 1.15rem 1.1rem;
}

body.oasis-redesign .ol-hero-product__action .ol-card-options {
  min-height: 0;
  margin: 0;
}

body.oasis-redesign .ol-hero-product__action :is(.button, .add_to_cart_button) {
  width: 100% !important;
  min-width: 0;
  border-radius: var(--ol-radius-control) !important;
}

@media (max-width: 420px) {
  body.oasis-redesign .ol-hero-product {
    padding: var(--ol-feature-inset);
    border-radius: var(--ol-feature-radius-outer);
  }

  body.oasis-redesign .ol-hero-product__name {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.oasis-redesign .ol-card-option > span,
  body.oasis-redesign .ol-hero-product,
  body.oasis-redesign .ol-hero-product__image {
    transition: none !important;
  }
}

/* ==========================================================================
   CARD CTA — single source of truth for home, shop, related and upsells.
   Shop's variable-product CTA renders as a <span>, home's as an <a>, so any
   rule written as `a.button` silently skipped shop and the two pages drifted.
   Match on the class, never the tag.
   ========================================================================== */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products, .ol-hero__feature)
  li.product :is(.button, a.button, span.button, .add_to_cart_button, .ol-select-size) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: .8rem 1rem !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 45%, transparent) !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ol-forest-900) !important;
  font: 700 .66rem/1 var(--ol-font-body) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products, .ol-hero__feature)
  li.product :is(.button, a.button, span.button, .add_to_cart_button, .ol-select-size):hover {
  background-color: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
  border-color: var(--ol-forest-900) !important;
}

/* ==========================================================================
   CARD RHYTHM — one inset, one vertical line.
   The plate sat 11px from the card edge, the title 21px and the button 17px,
   because the loop link, the text nodes and the CTA each carried their own
   ad-hoc margins. Every element now hangs off a single --ol-card-pad, so the
   image, the category, the name, the price and the button share one left edge.
   ========================================================================== */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products)
  ul.products li.product {
  --ol-card-pad: 18px;
  padding: 0 0 var(--ol-card-pad) !important;
}

html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products)
  ul.products li.product > a.woocommerce-LoopProduct-link {
  padding: var(--ol-card-pad) var(--ol-card-pad) 0 !important;
}

/* plate spans the full inset width; only its bottom gap remains */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products)
  ul.products li.product .ol-card__plate {
  margin: 0 0 0.85rem !important;
}

/* text nodes: no horizontal margin of their own — the link's padding sets it */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products)
  ul.products li.product :is(.ol-shop-card__meta, .woocommerce-loop-product__title, h2.woocommerce-loop-product__title, .price) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* nodes that live OUTSIDE the link must reproduce the same inset */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products)
  ul.products li.product > :is(.price, .ol-card-options, .ol-card-options--empty, .button, a.button, span.button, .add_to_cart_button, .ol-select-size) {
  margin-left: var(--ol-card-pad) !important;
  margin-right: var(--ol-card-pad) !important;
  width: calc(100% - (2 * var(--ol-card-pad))) !important;
}

html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products)
  ul.products li.product .ol-card-options {
  margin-bottom: 0.7rem !important;
}

/* ==========================================================================
   MOBILE CATALOG DENSITY
   Home: 2 per row. Shop: 3 per row. Both were 1-up on phones.
   A 3-up card at 390px is ~110px wide, so the card internals have to shrink
   with it or the title/price/CTA overflow their own cell.
   ========================================================================== */
@media (max-width: 768px) {

  /* --- Home catalog: 2 across --- */
  html body.oasis-redesign .ol-products__grid ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* --- Shop archive: stays 2 across. 3 across at 390px gives ~110px cards,
         which is too small to read. --- */

  /* Shared: shrink the card to fit the narrower cell. */
  html body.oasis-redesign :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body) ul.products li.product {
    --ol-card-pad: 9px;
    min-width: 0;
  }
  html body.oasis-redesign :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body) ul.products li.product .woocommerce-loop-product__title {
    font-size: .78rem !important;
    min-height: 2.6em !important;
    line-height: 1.3 !important;
  }
  html body.oasis-redesign :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body) ul.products li.product .price {
    font-size: .8rem !important;
  }
  html body.oasis-redesign :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body) ul.products li.product .ol-shop-card__meta {
    font-size: .52rem !important;
  }
  html body.oasis-redesign :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body) ul.products li.product :is(.button, a.button, span.button, .add_to_cart_button, .ol-select-size) {
    padding: .7rem .4rem !important;
    font-size: .56rem !important;
    letter-spacing: .06em !important;
  }

  /* Size chips have to wrap inside a ~110px cell instead of pushing it wider. */
  html body.oasis-redesign :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body) ul.products li.product .ol-card-options__chips {
    flex-wrap: wrap;
    gap: 4px;
  }
  html body.oasis-redesign :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body) ul.products li.product .ol-card-option > span {
    padding: .3rem .4rem !important;
    font-size: .58rem !important;
  }
}

/* ==========================================================================
   CARD HEIGHT — stop reserving 68px of nothing on simple products.
   .ol-card-options--empty carried min-height: 4.25rem so a simple product would
   line up with a variable product's size chips. But it reserved that space on
   EVERY card, including rows with no variable product at all — which is the
   dead band between the price and Add to Cart.

   The grid already stretches every card in a row to the tallest one, so the
   alignment can come from pushing the CTA to the bottom instead of padding the
   middle. Rows of simple products collapse to their natural height; a row with a
   variable product still lines its buttons up, because the shorter cards stretch
   and their auto margin absorbs the difference.
   ========================================================================== */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body, .related.products)
  ul.products li.product .ol-card-options--empty {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The CTA is the last child: an auto top margin pins it to the bottom of the
   card, which is what actually aligns the buttons across a row. */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body, .related.products)
  ul.products li.product > :is(.button, a.button, span.button, .add_to_cart_button, .ol-select-size) {
  margin-top: auto !important;
}

/* ==========================================================================
   PHOTO AS A PRINT, NOT A FRAMED PICTURE.
   The plate frame is gone, but the product shots are white-on-white against a
   cream card, so their edges dissolved and the card read flat. Rather than
   re-introduce a third surface behind the photo, give the photo itself an edge:
   a hairline warm border plus a soft shadow, so it sits ON the card like a
   print. Two surfaces, real depth.
   ========================================================================== */

/* A touch more separation between the card and the page behind it, so the card
   itself is a surface too rather than a tint on the background. */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body)
  ul.products li.product {
  background: #FFFDFA !important;
  border-color: color-mix(in oklab, var(--ol-forest-900) 10%, transparent) !important;
}

@media (hover: hover) {
  html body.oasis-redesign
    :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body)
    ul.products li.product:hover .ol-card__image {
    box-shadow:
      0 2px 4px rgba(45, 42, 30, .06),
      0 12px 26px -10px rgba(45, 42, 30, .22) !important;
  }
}

/* ==========================================================================
   FEATURED PRODUCT — same treatment as the catalog cards.
   Its photo carried `padding: 1.35rem 2.4rem 1rem`, so its border-radius clipped
   a box the picture never reached: the corners stayed square and the hairline
   border drew around empty space instead of around the shot. Exactly the trap
   the catalog images had. The inset moves to the plate; the photo is bare.
   ========================================================================== */

/* ==========================================================================
   DEPTH — the restrained shadow read flat. Deepen it for both the catalog and
   the featured photo, and firm up the hairline so the shot has a real edge.
   ========================================================================== */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body, .related.products)
  ul.products li.product .ol-card__image,
html body.oasis-redesign .ol-hero-product__image { border: 1px solid color-mix(in oklab, var(--ol-ink-900) 12%, transparent) !important;box-shadow: 0 1px 2px rgba(45, 42, 30, .07), 0 4px 8px -2px rgba(45, 42, 30, .12), 0 14px 28px -10px rgba(45, 42, 30, .30) !important; }

@media (hover: hover) {
  html body.oasis-redesign
    :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body)
    ul.products li.product:hover .ol-card__image,
  html body.oasis-redesign .ol-hero-product:hover .ol-hero-product__image {
    box-shadow:
      0 2px 4px rgba(45, 42, 30, .08),
      0 8px 14px -4px rgba(45, 42, 30, .16),
      0 22px 42px -12px rgba(45, 42, 30, .38) !important;
  }
}

/* ==========================================================================
   CATALOG SHOTS — make the product fill its frame.
   The source photos carry a wide white margin, so the card showed a small vial
   floating in a big white rectangle. Two changes:

   1. The plate becomes the photo's frame (it can clip; an <img> cannot clip its
      own scaled content). It carries the radius, hairline and shadow — this is
      NOT the old beige plate: it is white, edge-to-edge with the photo, and
      reads as the photo itself.
   2. The image fills that frame and is scaled slightly, which crops the source's
      dead white margin. The product gets bigger and bolder, and hover pushes the
      zoom further.
   ========================================================================== */

@media (hover: hover) {
  html body.oasis-redesign
    :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body)
    ul.products li.product:hover .ol-card__image {
    transform: scale(1.16) !important;
  }
  html body.oasis-redesign
    :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body)
    ul.products li.product:hover .ol-card__plate {
    box-shadow:
      0 2px 4px rgba(45, 42, 30, .08),
      0 8px 14px -4px rgba(45, 42, 30, .16),
      0 22px 42px -12px rgba(45, 42, 30, .38) !important;
  }
}

/* ==========================================================================
   FEATURED PRODUCT — frame it like the catalog, but never crop it.
   `object-fit: cover` filled the frame at desktop width, but on a narrower
   phone card it cropped the shot. The plate is the clipping frame (so the
   rounding is real) and the photo is `contain`, so the whole product always
   fits. The plate is white — the same white as the shot's own background — so
   any letterboxing is invisible.
   ========================================================================== */

/* The featured plate had no definite height (324x226) while its <img> resolved
   to its intrinsic square (322x322) — 97px taller — so the plate's overflow
   simply chopped the bottom off the shot. object-fit never came into it: the
   ELEMENT was overflowing its container, not the picture inside it.
   Give the plate a square box; the photo then fits inside it. */
html body.oasis-redesign .ol-hero-product__plate { padding: 0 !important;box-sizing: border-box;overflow: hidden !important;border: 1px solid color-mix(in oklab, var(--ol-ink-900) 12%, transparent) !important;border-radius: 12px !important;background: #fff !important;box-shadow: 0 1px 2px rgba(45, 42, 30, .07), 0 4px 8px -2px rgba(45, 42, 30, .12), 0 14px 28px -10px rgba(45, 42, 30, .30) !important;aspect-ratio: 1 / 1 !important;height: auto !important;max-height: none !important; }
html body.oasis-redesign .ol-hero-product__image,
html body.oasis-redesign .ol-hero-product:hover .ol-hero-product__image { padding: 0 !important;max-height: none !important;border-radius: 0 !important;object-fit: contain !important;width: 100% !important;height: 100% !important;border: 0 !important;box-shadow: none !important;min-height: 0 !important;align-self: stretch !important;justify-self: stretch !important; }

/* The featured card's link is a 2-row grid whose media row was capped
   (minmax(14.5rem, 1fr)). Once the plate became a square it outgrew that row,
   overflowed into the details row, and painted its white background straight
   over the product name and price. Let the media row size to the plate. */
html body.oasis-redesign .ol-hero-product__link {
  grid-template-rows: auto auto !important;
  align-content: start;
  gap: .9rem;
}
html body.oasis-redesign .ol-hero-product {
  min-height: 0 !important;
}

/* ==========================================================================
   HOVER MOTION — unified, and locked so it can never affect layout.
   The "simple cards extend / variable cards shrink on hover" jitter was the
   image zoom leaking into layout: an unclipped scaled photo grew the plate, the
   grid re-equalised the row, and the auto-margined CTA made simple vs variable
   cards redistribute that height differently. The plate is now a fixed square
   with overflow:hidden, so the zoom is clipped and layout can't move — this
   block makes that guarantee explicit and syncs the card-lift + photo-zoom to
   one timing so a row moves as a single piece.
   ========================================================================== */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body, .related.products)
  ul.products li.product {
  transition:
    transform .45s cubic-bezier(.2, .75, .2, 1),
    border-color .45s cubic-bezier(.2, .75, .2, 1),
    box-shadow .45s cubic-bezier(.2, .75, .2, 1) !important;
}
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body, .related.products)
  ul.products li.product .ol-card__plate { padding: 0 !important;overflow: hidden !important;border: 1px solid color-mix(in oklab, var(--ol-ink-900) 12%, transparent) !important;border-radius: 12px !important;background: #fff !important;box-shadow: 0 1px 2px rgba(45, 42, 30, .07), 0 4px 8px -2px rgba(45, 42, 30, .12), 0 14px 28px -10px rgba(45, 42, 30, .30) !important;aspect-ratio: 1 / 1 !important;height: auto !important;contain: paint; }
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body, .related.products)
  ul.products li.product .ol-card__image { width: 100% !important;height: 100% !important;padding: 0 !important;border: 0 !important;border-radius: 0 !important;box-shadow: none !important;object-fit: cover !important;transform: scale(1.09) !important;transition: transform .45s cubic-bezier(.2, .75, .2, 1), filter .45s ease !important;will-change: transform; }

/* ==========================================================================
   UNIFIED CARD — single authority for the product tile across home
   (.ol-products__grid), shop (.ol-shop-body / .ol-shop-shell .ol-shop-body) and
   the product page's related/upsell grids. This block owns the li's STRUCTURE
   (flex column, stretch, overflow) plus its surface (border, radius, cream fill,
   shadow, 18px bottom rhythm) and the hover lift — the values are the verified
   live baseline, gathered identically from all three surfaces. It loads last and
   out-specifies every legacy card block in main.css, so those can be (and are)
   deleted without changing a pixel. Do NOT reintroduce per-surface card bodies:
   change the card here, once, and every surface moves together.
   ========================================================================== */
html body.oasis-redesign
  :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body, .related.products, .upsells.products, .up-sells.products)
  ul.products li.product {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  float: none !important;
  padding: 0 0 18px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  text-align: left !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 11%, transparent) !important;
  border-radius: var(--ol-radius-card) !important;
  background: color-mix(in oklab, var(--ol-cream-50) 94%, white) !important;
  box-shadow: 0 18px 44px -38px rgba(20, 32, 26, .5) !important;
  transform: none !important;
  transition:
    transform .45s cubic-bezier(.2, .75, .2, 1),
    border-color .45s cubic-bezier(.2, .75, .2, 1),
    box-shadow .45s cubic-bezier(.2, .75, .2, 1) !important;
}
@media (hover: hover) {
  html body.oasis-redesign
    :is(.ol-products__grid, .ol-shop-shell .ol-shop-body, .ol-shop-body, .related.products, .upsells.products, .up-sells.products)
    ul.products li.product:hover {
    /* Padding intentionally unchanged on hover — zeroing it collapsed the card
       18px (the shrink bug). Only the lift + framing move. */
    border-color: color-mix(in oklab, var(--ol-forest-900) 20%, transparent) !important;
    box-shadow: 0 28px 62px -40px rgba(20, 32, 26, .58) !important;
    transform: translateY(-2px) !important;
  }
}

/* cache-bust 1784148429: hover-motion fix is live on home + shop + related; force fresh fetch */