/* Purekoop refinement of the Atelier storefront. */
:root{--pk-ink:#2d2924;--pk-rule:#d8d2c6;--pk-paper:#f7f5ef}

/* Let packshots with white backgrounds sit naturally in the card. */
.product-card__media{background:#fff;border-bottom:1px solid var(--pk-rule)}
.product-card__media img{max-width:100%;object-fit:contain}
.product-card__add{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:17px}
.product-card__add span{font-size:1.13rem;line-height:1}
.product-card__body h3{overflow-wrap:anywhere}
.product-card__bottom strong{font-variant-numeric:tabular-nums}

/* Product photos get one clean canvas; thumbnails remain distinct controls. */
.gallery-main{background:#fff}
.gallery-main img{width:94%;height:94%;object-fit:contain}
.thumb{background:#fff}

/* Separate editorial category copy from the packshots. */
.category-card{isolation:isolate;overflow:hidden}
.category-card>div{position:relative;z-index:2}
.category-card img{z-index:1}

.brand{white-space:nowrap}
.brand i{font-style:normal;margin-left:1px}
.brand--footer{display:inline-block;margin-bottom:3px}

@media(max-width:599px){
  .product-card__link{grid-template-columns:minmax(0,42%) minmax(0,58%)}
  .product-card__media{min-height:212px}
  .product-card__media img{width:92%;height:88%}
  .product-card__body h3{-webkit-line-clamp:3;min-height:0;line-height:1.31}
  .product-card__summary{-webkit-line-clamp:2}
  .product-card__body{padding:13px 14px 12px}
  .product-card__add{min-height:48px;font-size:.82rem}
  .gallery-main img{width:94%;height:94%}
}
@media(max-width:380px){
  .product-card__body h3{font-size:.88rem}
  .product-card__summary{display:-webkit-box;font-size:.72rem}
  .product-card__media{min-height:215px}
  .category-card>div{width:67%}
  .category-card img{width:55%;right:-6%}
  .category-card p{max-width:16ch}
}