/* Adapted from the user-supplied CodePen by izrada-sajtova-rs. See third_party/codepen/. */
.shop .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px; align-items: stretch; }
.shop .product-card.sj-product-card { --card-accent: var(--sj-primary); --card-soft: var(--sj-soft); position: relative; isolation: isolate; background: none; border: 0; border-radius: 28px; box-shadow: none; overflow: visible; display: flex; min-inline-size: 0; margin-block: 0 14px; }
.shop .product-card.sj-product-card[data-tone="lilac"] { --card-accent: var(--sj-lilac); --card-soft: color-mix(in srgb,var(--sj-lilac) 20%,var(--sj-surface)); }
.shop .product-card.sj-product-card[data-tone="rose"] { --card-accent: var(--sj-pink); }
.sj-card-back { position: absolute; inset: 12px; border-radius: 31px; background: var(--card-accent); z-index: -1; opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease; }
.sj-card-inner { position: relative; inline-size: 100%; display: flex; flex-direction: column; background: var(--sj-surface); border-radius: 28px; box-shadow: 0 10px 30px rgb(0 0 0 / .06),0 2px 8px rgb(0 0 0 / .04); transition: transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease; }
.sj-card-badges { position: absolute; inset-block-start: 20px; inset-inline-start: 20px; z-index: 3; display: flex; gap: 7px; max-inline-size: calc(100% - 94px); }
.sj-card-badge { font-size: 10px; padding: 6px 12px; border-radius: 100px; color: var(--sj-text); background: var(--sj-surface); box-shadow: 0 2px 8px rgb(0 0 0 / .04); }
.sj-card-actions { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; z-index: 4; display: grid; gap: 8px; }
.shop .sj-card-actions :is(a,button) { inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%; background: color-mix(in srgb,var(--sj-surface) 88%,transparent); color: var(--sj-text); display: grid; place-items: center; box-shadow: 0 5px 18px rgb(0 0 0 / .08); backdrop-filter: blur(12px); cursor: pointer; padding: 0; transition: transform .35s ease,background .25s ease; }
.sj-card-actions [hidden] { display: none !important; }
.shop .sj-card-actions :is(a,button):hover { color: var(--sj-surface); background: var(--sj-primary); transform: scale(1.08); }
.shop .sj-card-actions form.sj-card-fav-form { margin: 0; padding: 0; display: contents; }
.shop .sj-card-actions :is(a,button).sj-card-fav-btn.is-active { color: #e0245e; background: color-mix(in srgb,var(--sj-surface) 92%,transparent); }
.shop .sj-card-actions :is(a,button).sj-card-fav-btn.is-active:hover { background: #e0245e; color: #fff; }
.product-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-block-end: 12px; }
.product-title-group { flex: 1; min-inline-size: 0; }
.product-fav-action { flex-shrink: 0; margin-block-start: 6px; }
.product-fav-form { margin: 0; }
.product-fav-button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb,var(--sj-border) 45%,transparent); background: var(--sj-surface); color: var(--sj-text); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .25s ease; text-decoration: none; }
.product-fav-button:hover { border-color: var(--sj-primary); color: var(--sj-primary); transform: translateY(-1px); }
.product-fav-button.is-active { border-color: #e0245e; color: #e0245e; background: color-mix(in srgb,#e0245e 8%,var(--sj-surface)); }
.product-fav-button.is-active:hover { background: #e0245e; color: #fff; }
.product-fav-button svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .product-header-row { flex-direction: column; gap: 12px; }
  .product-fav-action { margin-block-start: 0; }
}
.shop .sj-card-media { position: relative; display: grid; place-items: center; block-size: clamp(240px,25vw,330px); overflow: hidden; border-radius: 28px 28px 0 0; color: var(--sj-primary); }
.sj-card-media::before { content: ""; position: absolute; inline-size: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,var(--card-soft),transparent 70%); opacity: .7; transform: scale(.9); transition: transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease; }
.sj-card-media::after { content: ""; position: absolute; inset-block-start: -30%; left: -70%; inline-size: 42%; block-size: 170%; background: linear-gradient(90deg,transparent,rgb(255 255 255 / .7),transparent); transform: rotate(18deg); opacity: 0; transition: left .9s ease,opacity .3s ease; pointer-events: none; z-index: 2; }
.sj-card-glow { position: absolute; inset-block-end: 36px; inline-size: 60%; block-size: 35px; border-radius: 50%; background: color-mix(in srgb,var(--card-accent) 24%,transparent); filter: blur(18px); transition: transform .6s ease; }
.shop .sj-card-media img { position: absolute; inline-size: 78%; block-size: 78%; object-fit: contain; filter: drop-shadow(0 20px 17px rgb(0 0 0 / .14)); transition: transform .75s cubic-bezier(.2,.8,.2,1),opacity .45s ease,clip-path .75s cubic-bezier(.2,.8,.2,1); }
.sj-card-image-main { opacity: 1; transform: none; clip-path: circle(100% at 50% 50%); }
.sj-card-image-alt { opacity: 0; transform: scale(.72) rotate(-16deg) translateX(28px); clip-path: circle(0% at 70% 30%); }
.shop .sj-card-media .product-placeholder { position: relative; background: none; border: 0; block-size: 100%; inline-size: 100%; }
.sj-card-info { position: relative; flex: 1; display: flex; flex-direction: column; padding: 5px 24px 24px; }
.sj-card-category { color: var(--sj-muted); font-size: 11px; margin-block-end: 7px; }
.shop .sj-product-card h2 { font-size: 24px; margin: 0 0 9px; line-height: 1.7; overflow-wrap: anywhere; }
.sj-card-variant { color: var(--sj-muted); font-size: 11px; margin: 0 0 10px; overflow-wrap: anywhere; }
.sj-card-rating { display: flex; align-items: center; gap: 5px; color: var(--sj-primary); font-size: 11px; margin-block-end: 10px; }
.sj-card-rating span { color: var(--sj-muted); }
.shop .sj-product-card .price { font-size: 21px; margin-block: auto 16px; padding-block-start: 6px; line-height: 1.8; }
.shop .sj-product-card .price small { font-size: 11px; font-weight: 400; }
.sj-card-form { margin: 0; }
.shop .sj-card-buy { inline-size: 100%; min-block-size: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 16px; background: var(--sj-text); color: var(--sj-surface); padding: 8px 18px 8px 8px; font: 600 12px/1.8 var(--sj-font-body); cursor: pointer; transition: transform .35s ease,background .3s ease; text-decoration: none; }
.sj-card-buy>span:last-child { inline-size: 39px; block-size: 39px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb,var(--sj-surface) 13%,transparent); }
.shop .sj-card-buy:hover { background: var(--sj-primary); }
.shop .sj-card-buy:disabled { background: var(--sj-disabled); color: var(--sj-muted); cursor: default; }
.sj-product-card :is(a,button):focus-visible { outline: 2px solid var(--sj-primary); outline-offset: 4px; }
.sj-product-card:focus-within .sj-card-inner { box-shadow: 0 16px 40px rgb(0 0 0 / .12); }
.sj-product-card:focus-within .sj-card-back { opacity: 1; transform: translateY(10px) translateX(-6px) rotate(-2deg); }
@media (hover: hover) and (pointer: fine) {
  .sj-product-card:hover .sj-card-inner { transform: translateY(-13px); box-shadow: 0 30px 55px rgb(0 0 0 / .13),0 10px 20px rgb(0 0 0 / .06); }
  .sj-product-card:hover .sj-card-back { opacity: 1; transform: translateY(14px) translateX(-8px) rotate(-3deg); }
  .sj-product-card:hover .sj-card-media::before { transform: scale(1.28); opacity: 1; }
  .sj-product-card:hover .sj-card-media::after { left: 130%; opacity: 1; }
  .sj-product-card:hover .sj-card-glow { transform: scaleX(1.25) translateY(6px); }
  .sj-product-card:hover .sj-card-media[data-has-alternate] .sj-card-image-main { opacity: 0; transform: scale(.74) rotate(12deg) translateX(-24px); clip-path: circle(0% at 30% 70%); }
  .sj-product-card:hover .sj-card-image-alt { opacity: 1; transform: scale(1.04); clip-path: circle(100% at 50% 50%); }
  .sj-product-card:hover .sj-card-buy { transform: translateY(4px); }
}
@media (max-width: 1050px) { .shop .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; } .shop .sj-card-media { block-size: 290px; } }
@media (max-width: 580px) { .shop .product-grid { grid-template-columns: minmax(0,1fr); gap: 28px; max-inline-size: 380px; margin-inline: auto; } .shop .sj-card-media { block-size: 280px; } .sj-card-info { padding-inline: 22px; } .sj-product-card:hover .sj-card-inner,.sj-product-card:hover .sj-card-buy { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sj-product-card *, .sj-product-card *::before, .sj-product-card *::after { transition: none !important; animation: none !important; } .sj-product-card:is(:hover,:focus-within) .sj-card-inner,.sj-product-card:is(:hover,:focus-within) .sj-card-back,.sj-product-card:hover .sj-card-buy { transform: none; } .sj-product-card:hover .sj-card-media::after { opacity: 0; } }