/* Only grids containing our template are affected. No cart or single-product image rules. */
body ul.products:has(> li.ik-product-card) {
    display:grid!important; grid-template-columns:repeat(var(--ik-columns,4),minmax(0,1fr))!important;
    gap:var(--ik-gap,32px)!important; list-style:none!important;
}
body ul.products:has(> li.ik-product-card)::before,
body ul.products:has(> li.ik-product-card)::after { content:none!important; display:none!important; }
body ul.products li.product.ik-product-card {
    position:relative; float:none!important; clear:none!important; width:auto!important;
    margin:0!important; padding:0!important; min-width:0; overflow:hidden;
    background:var(--ik-background,#f8f8f8); border:1px solid transparent; border-radius:var(--ik-radius,8px);
    box-shadow:none; text-align:left; transition:border-color .2s ease;
}
body ul.products li.product.ik-product-card:hover,
body ul.products li.product.ik-product-card:focus-within { border-color:var(--ik-accent,#76c6d5); }
body ul.products li.ik-product-card .ik-card-link {
    display:flex; flex-direction:column; position:relative; padding:var(--ik-padding,20px);
    text-decoration:none; color:var(--ik-title-color,#484848); height:100%; box-sizing:border-box;
}
body ul.products li.ik-product-card:has(.ik-card-commerce) .ik-card-link { height:auto; }
body ul.products li.ik-product-card .ik-card-heading { min-height:56px; padding-right:48px; }
body ul.products li.ik-product-card .ik-card-title {
    font:600 var(--ik-title-size,clamp(20px,1.25vw,28px))/1.25 "Neue Haas Grotesk Display Pro",Arial,sans-serif; color:var(--ik-title-color,#484848); margin:0 0 5px; padding:0;
}
body ul.products li.ik-product-card .ik-card-subtitle { font-size:var(--ik-subtitle-size,15px); line-height:1.4; color:var(--ik-subtitle-color,#8b8b8b); margin:0; }
body ul.products li.ik-product-card .ik-card-badge {
    position:absolute; top:18px; right:12px; background:var(--ik-badge-color,#fff58a); color:#333;
    border-radius:3px; padding:5px 10px; font-size:13px; line-height:1.4;
}
body ul.products li.ik-product-card .ik-card-media {
    display:flex; justify-content:center; align-items:center; aspect-ratio:1/var(--ik-image-ratio,.90);
    margin:10px -10px 12px; overflow:hidden; border-radius:16px;
}
body ul.products li.ik-product-card .ik-card-media img {
    display:block; width:100%!important; height:100%!important; max-height:100%;
    margin:0!important; object-fit:contain; transition:transform .25s ease;
}
body ul.products li.ik-product-card .ik-card-capacity { margin:auto 0 0; min-height:22px; text-align:center; font-size:var(--ik-capacity-size,14px); line-height:22px; color:var(--ik-capacity-color,#a0a0a0); }
body ul.products li.ik-product-card .ik-card-commerce { padding:0 18px 20px; display:flex; flex-direction:column; gap:10px; }
body ul.products li.ik-product-card .ik-card-commerce .price { margin:0; }
body ul.products li.ik-product-card a:focus-visible { outline:2px solid #32899a; outline-offset:-3px; }
@media(min-width:1600px) { body ul.products:has(> li.ik-product-card) { gap:var(--ik-gap,32px)!important; } }
@media(max-width:1100px) { body ul.products:has(> li.ik-product-card) { grid-template-columns:repeat(var(--ik-tablet-columns,2),minmax(0,1fr))!important; gap:var(--ik-gap,32px)!important; } }
@media(prefers-reduced-motion:reduce) { body ul.products li.ik-product-card, body ul.products li.ik-product-card .ik-card-media img { transition:none; } }
/* 1.2: match the requested hover treatment even when the theme adds lift/shadows. */
body ul.products li.product.ik-product-card,
body ul.products li.product.ik-product-card:hover,
body ul.products li.product.ik-product-card:focus-within {
    box-shadow:none!important; transform:translateY(0)!important;
    overflow:hidden!important; transition:all .3s; 
}
body ul.products li.product.ik-product-card:hover,
body ul.products li.product.ik-product-card:focus-within {
    border-radius:8px!important; border:1px solid #3FBBCE!important;
}
body ul.products li.ik-product-card .ik-card-media { position:relative; }
body ul.products li.ik-product-card .ik-card-video {
    position:absolute; inset:0; width:100%; height:100%; border:0;
    pointer-events:none; opacity:0; background:#fff;
}
body ul.products li.ik-product-card.ik-video-playing .ik-card-video { opacity:1; }
body ul.products li.ik-product-card.ik-video-playing .ik-card-media img { opacity:0; }
body ul.products li.ik-product-card .ik-card-capacity { flex-shrink:0; padding-top:8px; }
@media(prefers-reduced-motion:reduce) {
    body ul.products li.product.ik-product-card { transition:none!important; }
}

/* 1.2.1: visual shell includes capacity and turns white immediately, before video ready. */
body ul.products li.ik-product-card .ik-card-link { padding-bottom:8px; }
body ul.products li.ik-product-card .ik-card-visual {
    display:flex; flex-direction:column; flex:1; min-width:0;
    margin:8px -10px 0; border-radius:15px; overflow:hidden;
    background:transparent; transition:background-color .3s ease;
}
body ul.products li.ik-product-card:hover .ik-card-visual,
body ul.products li.ik-product-card:focus-within .ik-card-visual { background:#fff; }
body ul.products li.ik-product-card .ik-card-media {
    flex-shrink:0; margin:0; border-radius:0; min-height:0;
}
body ul.products li.ik-product-card .ik-card-capacity {
    box-sizing:border-box; margin:auto 0 0; padding:12px 8px 18px;
    min-height:52px; background:transparent;
}

/* 1.2.2: reference image-product-list-card.liquid hides the poster on hover,
   rather than waiting for Vimeo's playback event. Explicit layers prevent overlap. */
body ul.products li.ik-product-card .ik-card-media {
    isolation:isolate;
}
body ul.products li.ik-product-card .ik-card-media img {
    position:relative; z-index:0; transition:opacity .3s ease!important;
}
body ul.products li.ik-product-card .ik-card-media::after {
    content:""; position:absolute; inset:0; z-index:1; background:#fff;
    pointer-events:none; opacity:0; transition:opacity .3s ease;
}
body ul.products li.ik-product-card.ik-video-active .ik-card-media::after {
    opacity:1;
}
body ul.products li.ik-product-card.ik-video-active .ik-card-media img {
    opacity:0!important;
}
body ul.products li.ik-product-card .ik-card-video {
    z-index:2; max-width:none!important; max-height:none!important;
    transition:opacity .3s ease!important;
}
body ul.products li.ik-product-card .ik-card-capacity {
    position:relative; z-index:3;
}

/* Match the reference theme's bidirectional 300ms opacity fade. Keep all layers
   mounted/visible to the renderer: visibility:hidden would cut off the fade. */
@media(prefers-reduced-motion:reduce) {
    body ul.products li.ik-product-card .ik-card-media img,
    body ul.products li.ik-product-card .ik-card-media::after,
    body ul.products li.ik-product-card .ik-card-video,
    body ul.products li.ik-product-card .ik-card-visual { transition:none!important; }
}

/* 1.2.4: exported theme typography, tag-driven badge, full-width contained media. */
body ul.products li.ik-product-card { font-family:"Neue Haas Grotesk Display Pro",Arial,sans-serif; }
body ul.products li.ik-product-card .ik-card-badge {
    display:flex; align-items:center; justify-content:center; box-sizing:border-box;
    height:28px; padding:4px 12px; background:var(--ik-badge-color,#fff462);
    color:#191919; font-size:14px; font-weight:400; line-height:normal;
}
body ul.products li.ik-product-card .ik-card-media img {
    width:100%!important; height:100%!important; max-width:100%!important;
    object-fit:contain!important; object-position:center!important;
}
body ul.products li.ik-product-card .ik-card-video {
    inset:0!important; width:100%!important; height:100%!important; transform:none!important;
}
@media(max-width:1200px) {
    body ul.products li.ik-product-card .ik-card-badge { padding:0 5px; height:22px; }
}
/* 1.2.5: scope automatic sizes to cards; consume the site's public variables
   without defining or overwriting typography for the rest of the website. */
body ul.products li.product.ik-product-card {
    --ik-auto-title:var(--font-size-h4,clamp(20px,1.25vw,28px));
    --ik-auto-p:var(--font-size-p,clamp(14px,.83vw,18px));
}
body ul.products li.product.ik-product-card .ik-card-heading,
body ul.products li.product.ik-product-card .ik-card-link {
    font-weight:400; font-style:normal; text-transform:none; letter-spacing:normal;
}
body ul.products li.product.ik-product-card .ik-card-title {
    font-size:var(--ik-title-size,var(--ik-auto-title))!important;
    font-weight:600!important; color:var(--ik-title-color,#333)!important;
    font-style:normal!important; line-height:1.25!important;
    letter-spacing:normal!important; text-transform:none!important;
    -webkit-text-stroke:0; margin:0 0 5px!important;
}
body ul.products li.product.ik-product-card .ik-card-subtitle {
    font-size:var(--ik-subtitle-size,var(--ik-auto-p))!important;
    font-weight:400!important; color:var(--ik-subtitle-color,#666)!important;
    font-style:normal!important; line-height:1.4!important;
    letter-spacing:normal!important; text-transform:none!important;
    -webkit-text-stroke:0; margin:0!important;
}
body ul.products li.product.ik-product-card .ik-card-capacity {
    font-size:var(--ik-capacity-size,var(--ik-auto-p))!important;
    font-weight:400!important; color:var(--ik-capacity-color,#c7c7c7)!important;
    font-style:normal!important; letter-spacing:normal!important;
}

body ul.products li.product.ik-product-card .ik-card-title,
body ul.products li.product.ik-product-card .ik-card-subtitle,
body ul.products li.product.ik-product-card .ik-card-capacity {
    font-family:"Neue Haas Grotesk Display Pro",Arial,sans-serif!important;
}

/* 1.2.6: match the collection's actual max-width:767px card rules, which
   override the public typography variables on mobile. Outer page gutters stay owned by the page/theme. */
@media(max-width:767px) {
    body ul.products:has(> li.ik-product-card) {
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        column-gap:16px!important; row-gap:20px!important;
    }
    body ul.products li.product.ik-product-card {
        min-width:0!important; max-width:100%!important; box-sizing:border-box;
    }
    body ul.products li.product.ik-product-card .ik-card-link {
        width:100%; min-width:0; box-sizing:border-box;
        padding:20px 8px 8px!important;
    }
    body ul.products li.product.ik-product-card .ik-card-heading {
        width:100%; min-width:0; min-height:49px;
        padding:0!important; box-sizing:border-box;
    }
    body ul.products li.product.ik-product-card .ik-card-title {
        display:block; width:74%; max-width:74%;
        font-size:16px!important; line-height:22px!important;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    body ul.products li.product.ik-product-card .ik-card-subtitle {
        display:block; width:100%; max-width:100%;
        font-size:12px!important; line-height:22px!important;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    body ul.products li.product.ik-product-card .ik-card-badge {
        top:20px; right:10px; height:22px; padding:0 5px;
        font-size:12px!important; line-height:22px!important;
    }
    body ul.products li.product.ik-product-card .ik-card-visual {
        width:100%; min-width:0; margin:8px 0 0!important; border-radius:8px;
    }
    body ul.products li.product.ik-product-card .ik-card-media {
        width:100%; aspect-ratio:1/1; margin:0!important;
    }
    body ul.products li.product.ik-product-card .ik-card-capacity {
        width:100%; min-width:0; min-height:34px; box-sizing:border-box;
        font-size:12px!important; line-height:16px!important;
        padding:8px 2px 10px!important;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    body ul.products li.product.ik-product-card .ik-card-commerce {
        padding:0 8px 12px; min-width:0;
    }
}