/* Recipe home/collection product-card media treatment.
 * Canonical listing ratio: 720x1280 (9:16), matching Recipe source photography at 1080x1920.
 * Use contain so the complete garment remains visible; with the matching 9:16 derivative this fills the card without crop or letterboxing.
 * Title/price legibility improvements remain in recipe-owner-fixes.css.
 */
.recipe-store .recipe-product-card__media{
  position:relative !important;
  aspect-ratio:720 / 1280 !important;
  background:var(--recipe-card) !important;
  overflow:hidden !important;
}

.recipe-store .recipe-product-card__media img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  transform:none !important;
  transition:none !important;
}

/* Keep the complete 9:16 product image visible; the hover treatment belongs to the card shell, not the photography. */
.recipe-store .recipe-product-card:hover .recipe-product-card__media img{
  transform:none !important;
}

/*
 * Product-card hover requested by the owner:
 * a soft elevated cream/white rounded shell appears around the existing card,
 * creating the inset-photo / floating-card treatment from the supplied reference,
 * without resizing the grid or cropping the product image.
 */
.recipe-store .recipe-product-card{
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  border:0;
  background:transparent;
  transform:translateY(0);
  transition:transform .24s cubic-bezier(.2,.7,.2,1);
}

.recipe-store .recipe-product-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-12px;
  border:1px solid rgba(38,35,31,.08);
  border-radius:22px;
  background:#faf9f6;
  box-shadow:0 18px 48px rgba(35,31,27,.14),0 3px 10px rgba(35,31,27,.07);
  opacity:0;
  transform:scale(.985);
  pointer-events:none;
  transition:opacity .22s ease,transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s ease;
}

.recipe-store .recipe-product-card:focus-within{
  transform:translateY(-4px);
  z-index:3;
}
.recipe-store .recipe-product-card:focus-within::before{
  opacity:1;
  transform:scale(1);
}

@media(hover:hover) and (pointer:fine){
  .recipe-store .recipe-product-card:hover{
    transform:translateY(-4px);
    z-index:3;
  }
  .recipe-store .recipe-product-card:hover::before{
    opacity:1;
    transform:scale(1);
  }
}

/* Department merchandising rails: four cards on desktop, swipe/scroll with a visible next-card cue on mobile. */
.recipe-store .recipe-department-section{
  overflow:hidden;
}

.recipe-store .recipe-product-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 54px) / 4);
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:14px;
  margin:-14px -14px 0;
  padding:14px 14px 32px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.recipe-store .recipe-product-rail::-webkit-scrollbar{
  display:none;
}

.recipe-store .recipe-product-rail>.recipe-product-card{
  min-width:0;
  scroll-snap-align:start;
}

.recipe-store .recipe-product-rail:focus-visible{
  outline:1px solid currentColor;
  outline-offset:6px;
}

/* /collections directory department tiles use the same portrait geometry as Recipe imagery.
 * The previous 4:5 + cover treatment cropped category/product fallback images.
 */
.recipe-store .recipe-collection-tile--directory{
  min-height:0 !important;
  aspect-ratio:720 / 1280 !important;
  background:var(--recipe-card) !important;
}

.recipe-store .recipe-collection-tile--directory > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  transition:none !important;
}

.recipe-store .recipe-collection-tile--directory:hover > img{
  transform:none !important;
}

/* Consent is a compact sheet above the fixed mobile destination bar, never underneath it. */
.recipe-store .recipe-consent{
  box-sizing:border-box;
}
.recipe-store .recipe-consent p{
  margin:0 0 14px;
  line-height:1.55;
}
.recipe-store .recipe-consent form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.recipe-store .recipe-consent button{
  min-height:42px;
  padding:9px 11px;
  line-height:1.2;
  cursor:pointer;
}

@media(max-width:980px){
  .recipe-store .recipe-product-rail{
    grid-auto-columns:40vw;
  }
}

@media(max-width:760px){
  .recipe-store .recipe-collection-tile--directory{
    aspect-ratio:720 / 1280 !important;
  }
  .recipe-store .recipe-product-rail{
    grid-auto-columns:64vw;
    gap:12px;
    margin:-10px calc(-1 * var(--recipe-page-pad, 20px)) 0 -10px;
    padding:10px var(--recipe-page-pad, 20px) 20px 10px;
    scroll-padding-inline:10px;
  }
  /* Touch devices keep the clean resting card; the elevated shell is a hover/keyboard affordance. */
  .recipe-store .recipe-product-card:focus-within{
    transform:none;
  }
  .recipe-store .recipe-product-card:focus-within::before{
    opacity:0;
    transform:scale(.985);
  }
  .recipe-store .recipe-consent{
    z-index:90;
    left:12px;
    right:12px;
    bottom:calc(70px + env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    max-height:min(40vh,240px);
    overflow:auto;
    padding:14px;
    border-color:rgba(18,18,18,.16);
    box-shadow:0 12px 34px rgba(18,18,18,.16);
    font-size:11px;
    line-height:1.5;
  }
  .recipe-store .recipe-consent p{
    margin-bottom:12px;
  }
  .recipe-store .recipe-consent button{
    min-height:44px;
    padding:9px 8px;
    font-size:10px;
    font-weight:650;
  }
}

@media(max-width:390px){
  .recipe-store .recipe-consent form{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .recipe-store .recipe-product-card,
  .recipe-store .recipe-product-card::before{
    transition:none;
  }
}