/* =========================================================
   Product card
   ========================================================= */
.product-card{
  --product-content-inset:1em;
  --product-img-ratio:4 / 5;
  --product-card-background:var(--section-bg-color, var(--color-base-white));
  --product-card-foreground:var(--section-text-color, var(--color-base-black));
  --product-card-border-color:rgba(var(--product-card-foreground), 0.15);
  --product-card-border:1px solid var(--product-card-border-color);
  border-radius:var(--product-card-border-radius);
  transition:all var(--transition-duration-normal);
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
}
.product-card .badge{
  position:absolute;
  z-index:1;
  inset-block-start:var(--product-content-inset);
  max-width:calc(100% - var(--product-content-inset) * 2);
  background-color:var(--badge-bg-color);
  color:var(--badge-text-color);
  border-radius:calc(var(--product-card-border-radius) * 0.66);
  padding:0.3em 0.8em;
  font-size:var(--text-xs);
  line-height:1.4;
}
.product-card .badge[data-position$=left]{
  inset-inline-start:var(--product-content-inset);
}
.product-card .badge[data-position$=right]{
  inset-inline-end:var(--product-content-inset);
}
.product-card .badge span{
  max-width:32ch;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Image: fixed ratio so every card in a row lines up, never stretched */
.product-card .img-link{
  display:block;
  position:relative;
  flex-shrink:0;
  width:100%;
  aspect-ratio:var(--product-img-ratio);
  overflow:hidden;
  outline-offset:-1px;
  border-radius:var(--product-card-border-radius);
}
.product-card .img-link img{
  display:block;
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:inherit;
  pointer-events:none;
  transition:transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover){
  .product-card:hover .img-link img{
    transform:scale(1.04);
  }
}
.product-card .img-link .card-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgba(var(--product-card-foreground), 0.05);
  border-radius:inherit;
}
.product-card .img-link .card-placeholder svg{
  width:40%;
  height:auto;
  max-width:100px;
  color:rgba(var(--product-card-foreground), 0.6);
}

/* Info block */
.product-card .info{
  flex:1 1 auto;
  min-width:0;
  padding:1.25em;
  display:flex;
  flex-direction:column;
  gap:var(--gap-sm);
  border-radius:var(--product-card-border-radius);
  background-color:var(--product-card-background);
  color:rgb(var(--product-card-foreground));
}
.product-card .info .title,
.product-card .info .price{
  align-self:var(--product-card-text-alignment);
}
.product-card .info .title{
  max-width:100%;
  text-align:var(--product-card-text-align, start);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  line-height:1.35;
  /* reserve two lines so prices & buttons align across a row */
  min-height:calc(1.35em * 2);
  overflow-wrap:anywhere;
  color:currentColor;
}
.product-card[data-style$=compact] .info .title{
  min-height:0;
}
.product-card .info .price{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:var(--product-card-text-alignment);
  -moz-column-gap:var(--gap-md);
       column-gap:var(--gap-md);
  row-gap:2px;
  max-width:100%;
  margin-block-end:0.5em;
  font-size:var(--text-md);
}
.product-card .info .price .current{
  font-size:var(--text-lg);
  font-weight:600;
  white-space:nowrap;
}
.product-card .info .price .compare-at{
  color:currentColor;
  opacity:0.6;
  font-weight:400;
  white-space:nowrap;
  -webkit-text-decoration:line-through;
  text-decoration:line-through;
}
.product-card .info yc-product-form,
.product-card .info yc-product,
.product-card .info yc-modal{
  display:block;
  width:100%;
}
.product-card .info > yc-product-form,
.product-card .info > yc-product,
.product-card .info > .yc-btn{
  margin-block-start:auto;
}
.product-card .info button.secondary,
.product-card .info .yc-btn.secondary{
  width:100%;
  min-width:0;
  text-align:center;
}
.product-card .info > yc-product-form button[data-buy-button] span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.product-card .info button.secondary:hover,
.product-card .info .yc-btn.secondary:hover{
  color:var(--product-card-background);
}

/* Standard style */
.product-card[data-style$=standard]{
  border:var(--product-card-border);
  background-color:var(--product-card-background);
}
.product-card[data-style$=standard] .img-link{
  border-bottom:var(--product-card-border);
}
.product-card[data-style$=standard] .img-link,
.product-card[data-style$=standard] .img-link img,
.product-card[data-style$=standard] .card-placeholder{
  border-end-end-radius:0;
  border-end-start-radius:0;
}
.product-card[data-style$=standard] .info{
  position:static;
  border-start-end-radius:0;
  border-start-start-radius:0;
}
.product-card[data-style$=standard] .info button{
  width:100%;
}

/* Compact style (info floats over the image) */
.product-card[data-style$=compact]{
  --product-img-ratio:3 / 4;
}
.product-card[data-style$=compact]::before{
  content:"";
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:var(--product-card-border-radius);
  -webkit-backdrop-filter:var(--overlay-blur);
          backdrop-filter:var(--overlay-blur);
  background-color:var(--overlay-background);
  opacity:0;
  transition:var(--transition-duration-normal);
  pointer-events:none;
}
.product-card[data-style$=compact]:hover::before{
  opacity:1;
}
.product-card[data-style$=compact] .info{
  position:absolute;
  z-index:2;
  inset-block-end:0;
  inset-inline:0;
  margin:var(--product-content-inset);
  padding:var(--product-content-inset);
  flex:none;
}

/* =========================================================
   Product grids — always at least 2 products side by side
   ========================================================= */
.items-grid.products-grid{
  --products-gap:var(--gap-lg);
  gap:var(--products-gap);
  align-items:stretch;
}
.items-grid.products-grid > li{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.items-grid.products-grid > li > .product-card{
  flex:1 1 auto;
}
.items-grid.products-grid[data-columns="1"]{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 1280px){
  .items-grid.products-grid[data-columns="4"]{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1024px){
  .items-grid.products-grid,
  .items-grid.products-grid[data-columns]{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Product sliders: keep slides equal height */
yc-slider.products-slider yc-slider-item > .product-card{
  height:100%;
}

/* =========================================================
   Small screens: 2 compact, readable cards per row
   ========================================================= */
@media (max-width: 768px){
  .items-grid.products-grid{
    --products-gap:10px;
  }
  /* more room for the cards: drop the side frame around listings */
  yc-section:has(.products-grid),
  yc-section:has(.products-slider){
    padding-inline:10px;
  }
  yc-section .product-listing{
    border-inline:none;
    border-radius:0;
  }
  yc-section .product-listing .collections-area,
  yc-section .product-listing .filter-area{
    padding-inline:4px;
  }
  yc-section .product-listing .products-area{
    padding:12px 0;
  }
}
@media (max-width: 640px){
  .product-card{
    --product-content-inset:0.6em;
  }
  .product-card .badge{
    font-size:1.05rem;
    padding:0.25em 0.6em;
  }
  .product-card .info{
    padding:0.7em 0.6em 0.75em;
    gap:4px;
  }
  .product-card .info .title{
    font-size:var(--text-sm);
  }
  .product-card .info .price{
    font-size:var(--text-xs);
    -moz-column-gap:6px;
         column-gap:6px;
  }
  .product-card .info .price .current{
    font-size:var(--text-md);
  }
  .product-card .info > yc-product-form button.secondary,
  .product-card .info > yc-product > yc-modal > button[data-trigger],
  .product-card .info > .yc-btn.secondary{
    padding:10px 4px;
    font-size:min(var(--text-sm), 3.5vw);
    line-height:1.2;
    letter-spacing:0;
    white-space:normal;
    text-align:center;
    overflow:visible;
  }
  .product-card .info > yc-product-form button[data-buy-button] span{
    white-space:normal;
    overflow:visible;
  }
  .product-card[data-style$=compact] .info{
    padding:0.6em;
  }
}
@media (max-width: 360px){
  .items-grid.products-grid{
    --products-gap:8px;
  }
  .product-card .info{
    padding:0.6em 0.5em 0.7em;
  }
}