/* Sorellina Clinic — /shop. The Dermalogica partner creatives (injected by
   Refersion's creative.js into #rfsn_img_*) stand on painted timber shelves
   with a brass lip, like the retail shelf by the reception desk. */

.shop-disclosure { margin-top: 22px; max-width: 34rem; font-size: .84rem; color: var(--on-dark-2); }
.js .hero-glass .shop-disclosure { animation: rise 700ms var(--ease-out) 620ms both; }

/* packages and gift cards: two notice slips on the wall */
.shop-slips { display: flex; flex-wrap: wrap; gap: 28px clamp(28px, 4vw, 56px); align-items: flex-start; }
.shop-slips .slip { flex: 1 1 320px; max-width: 30rem; padding: 26px 28px 28px; }
.shop-slips .slip-member { margin-left: 0; margin-top: clamp(0px, 3vw, 36px); }
.shop-slips .slip-go { font-variant-numeric: tabular-nums; }

/* the shelf */
.partner-fallback .text-link { display: inline; }
.shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  column-gap: 32px; row-gap: 64px; align-items: end;
  padding: 0 4px;
}
.shelf > script { display: none; }
.dermalogica-shop-item { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.dermalogica-shop-item[hidden], .dermalogica-shop-item:has(> div:empty) { display: none; }
/* a stretch of shelf under each item; neighbours on the same row meet,
   so the row reads as one board */
.dermalogica-shop-item::after {
  content: ""; position: absolute; left: -17px; right: -17px; bottom: -20px; height: 12px;
  background: var(--charcoal);
  box-shadow: inset 0 2px 0 var(--brass), inset 0 3px 0 rgba(110, 80, 23, .6), 0 10px 14px -6px rgba(27, 28, 30, .35);
}
.dermalogica-shop-item > div { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }
.dermalogica-shop-item a { display: block; padding: 8px; background: var(--paper); box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 8px 14px -4px rgba(27, 28, 30, .3); transition: transform 220ms var(--ease-out); --focus: var(--blue); }
.dermalogica-shop-item img { display: block; max-width: 100%; height: auto; max-height: 340px; }
.dermalogica-shop-item a:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .dermalogica-shop-item a:hover { transform: translateY(-4px); } }
.shop-shelf-note { margin-top: 56px; }
/* the two long banner creatives get a double width of shelf */
@media (min-width: 640px) {
  .shelf { grid-auto-flow: row dense; }
  .dermalogica-shop-item:has(img[src*="728x90"]), .dermalogica-shop-item:has(img[src*="Partner+Programme+Banners"]) { grid-column: span 2; }
}
/* two to a shelf on phones */
@media (max-width: 639px) {
  .shelf { grid-auto-flow: row dense; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 52px; padding: 0; }
  .dermalogica-shop-item::after { left: -12px; right: -12px; bottom: -18px; height: 10px; }
  .dermalogica-shop-item a { padding: 5px; }
  .dermalogica-shop-item:has(img[src*="728x90"]), .dermalogica-shop-item:has(img[src*="Partner+Programme+Banners"]) { grid-column: 1 / -1; }
}

/* Refersion creatives inject fixed-width markup; keep it inside its shelf. */
.shelf, .dermalogica-shop-item { min-width: 0; overflow: clip; }
.dermalogica-shop-item * { max-width: 100%; height: auto; }