/* ==========================================================================
   Noamy Kids — cards.css (loaded right after components.css)
   Product-card polish (Leona, 26-10): every frame identical, product centred and whole,
   "Snel bekijken" never over the product on touch, card bodies aligned per row.
   The images themselves are normalised server-side (inc/card-image.php): 600x600, trimmed,
   same margin all round, on --cream. Frame ratio here = NMK_CARD_W / NMK_CARD_H there.
   ========================================================================== */

/* frame: fixed square, same cream as the baked-in image background */
.card{height:100%}
.card .media{aspect-ratio:1/1;background:var(--cream);isolation:isolate}
.card .media__link{position:absolute;inset:0}
.card .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* fallback while a normalised image is still being built: show the whole product */
.card .media img:not(.nmk-cardimg){object-fit:contain;padding:7%;mix-blend-mode:multiply}
@media (hover:hover) and (pointer:fine){
.card:hover .media img.main{transform:scale(1.02)}
}

/* badges + heart: tidy in the corners */
.card .flags{top:10px;left:10px;gap:4px}
.card .wish{top:10px;right:10px}

/* "Snel bekijken": desktop hover only; on touch the whole frame already links to the product */
.card .quick{left:10px;right:10px;bottom:10px}
@media (hover:none),(pointer:coarse),(max-width:860px){
.card .quick{display:none}
}

/* body: same height per row, prices and sizes on one line across the row */
.card .body{display:flex;flex-direction:column;flex:1 1 auto;padding:14px 2px 0}
.card .cat{display:block;line-height:1.6;min-height:1.6em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{line-height:1.4;min-height:2.8em;margin:5px 0 6px;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.card .price{line-height:1.5;min-height:1.5em}
.card .sizes{margin-top:auto;padding-top:10px;flex-wrap:nowrap;overflow:hidden}
.card .size-chip{flex:none}

@media(max-width:760px){
.card .flags{top:8px;left:8px}
.card .flag{font-size:9px;padding:5px 8px}
.card .wish{top:8px;right:8px;width:30px;height:30px}
.card .wish svg{width:15px;height:15px}
.card .body{padding-top:12px}
.card .cat{font-size:9px}
.card h3{font-size:14px}
.card .price{font-size:14px}
.card .sizes{gap:4px;padding-top:8px}
.card .size-chip{font-size:10.5px;padding:5px 7px}
}

/* Shop the look (Leona, 28-10): the product thumbs in the look list use the same normalised
   card image (nmk_card_image_html) in the same frame as the shop card: fixed square, --cream,
   whole product centred, every frame the same size. Not-yet-normalised images get the
   card fallback (contain + margin + multiply, so a white packshot background disappears). */
.look-item{grid-template-columns:88px minmax(0,1fr) auto}
.look-item .look-item__media{position:relative;display:block;width:88px;aspect-ratio:1/1;overflow:hidden;background:var(--cream);border-radius:var(--r);isolation:isolate;align-self:center}
.look-item .look-item__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:0}
.look-item .look-item__media img:not(.nmk-cardimg){padding:7%;mix-blend-mode:multiply}
@media(max-width:760px){
.look-item{grid-template-columns:76px minmax(0,1fr) auto;gap:12px}
.look-item .look-item__media{width:76px}
}

/* Small product thumbs (Joey, 02-11-2026): side-cart line items, side-cart upsells
   ("Maak het compleet") and the PDP bundle ("Maak de look compleet") use the same normalised
   card image (nmk_look_item_image → nmk_card_image_html) in the same frame as the shop card:
   fixed square, --cream, whole product centred, every frame the same size. Selectors are
   (0,2,1) so they beat side-cart.css / conversion.css / shortcodes.css (0,1,1), which load later. */
.nmk-side-cart__item{grid-template-columns:72px minmax(0,1fr)}
.nmk-upsell__list .nmk-upsell{grid-template-columns:64px minmax(0,1fr)}
.bundle-items .bi{grid-template-columns:72px minmax(0,1fr)}
.nmk-side-cart__item .nmk-side-cart__thumb,
.nmk-upsell .nmk-upsell__thumb,
.bi .bi__media{position:relative;display:block;width:100%;aspect-ratio:1/1;height:auto;overflow:hidden;background:var(--cream);border-radius:var(--r);isolation:isolate;align-self:start}
.nmk-side-cart__item .nmk-side-cart__thumb img,
.nmk-upsell .nmk-upsell__thumb img,
.bi .bi__media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;object-fit:contain;object-position:center;border-radius:0;box-sizing:border-box}
.nmk-side-cart__item .nmk-side-cart__thumb img:not(.nmk-cardimg),
.nmk-upsell .nmk-upsell__thumb img:not(.nmk-cardimg),
.bi .bi__media img:not(.nmk-cardimg){padding:7%;mix-blend-mode:multiply}
.nmk-upsell .nmk-upsell__thumb{align-self:center}

/* the big look photo: shown whole (natural ratio), so the numbered spots stay on the
   right garment; no fixed 4:5 crop that cut landscape shots */
.look .shot{background:var(--cream)}
.look .shot img{display:block;aspect-ratio:auto;width:100%;height:auto;object-fit:contain}

/* Earrings (Leona, 28-10): product_cat-kinderoorbellen sits smaller in the SAME square frame,
   centred, with cream space around it, so they match the rest optically. CSS only: the
   normalised files (inc/card-image.php, inc/pdp-image.php) stay as they are. Those already
   carry a 7% baked-in margin, so --nmk-earring-pad 11% brings the earring from ~86% to ~67%
   of the frame. Classes: .card/.look-item/.bi/.nmk-upsell/.nmk-side-cart__item get
   product_cat-<slug> (nmk_product_cat_classes()), the PDP body gets pdp-cat-<slug>. Other
   categories untouched. */
:root{--nmk-earring-pad:11%;--nmk-earring-pad-raw:18%}
/* shop cards, archive, rails, cart cross-sells */
.card.product_cat-kinderoorbellen .media img{box-sizing:border-box;object-fit:contain;padding:var(--nmk-earring-pad)}
.card.product_cat-kinderoorbellen .media img:not(.nmk-cardimg){padding:var(--nmk-earring-pad-raw)}
/* shop the look list, PDP bundle, side-cart line items + upsells (same square frame) */
.look-item.product_cat-kinderoorbellen .look-item__media img,
.bi.product_cat-kinderoorbellen .bi__media img,
.nmk-upsell.product_cat-kinderoorbellen .nmk-upsell__thumb img,
.nmk-side-cart__item.product_cat-kinderoorbellen .nmk-side-cart__thumb img{box-sizing:border-box;padding:var(--nmk-earring-pad)}
.look-item.product_cat-kinderoorbellen .look-item__media img:not(.nmk-cardimg),
.bi.product_cat-kinderoorbellen .bi__media img:not(.nmk-cardimg),
.nmk-upsell.product_cat-kinderoorbellen .nmk-upsell__thumb img:not(.nmk-cardimg),
.nmk-side-cart__item.product_cat-kinderoorbellen .nmk-side-cart__thumb img:not(.nmk-cardimg){padding:var(--nmk-earring-pad-raw)}
/* PDP: stage, thumbs, sticky bar (body class, so cards on the same page are unaffected) */
body.pdp-cat-kinderoorbellen .gal .stage img{box-sizing:border-box;object-fit:contain;padding:var(--nmk-earring-pad)}
body.pdp-cat-kinderoorbellen .gal .stage img:not(.nmk-pdpimg){padding:var(--nmk-earring-pad-raw)}
body.pdp-cat-kinderoorbellen .gal .thumbs img{box-sizing:border-box;object-fit:contain;padding:var(--nmk-earring-pad)}
body.pdp-cat-kinderoorbellen .gal .thumbs img:not(.nmk-pdpimg){padding:var(--nmk-earring-pad-raw)}
body.pdp-cat-kinderoorbellen .sticky-buy .sticky-buy__img{box-sizing:border-box;object-fit:contain;padding:5px}

/* Home product rails (Joey, 31-10): no visible scrollbar (touch/trackpad/drag still scroll)
   + round prev/next arrows centred on the product photos. Arrows are injected by global.js
   (initRailNav, home only); hidden on phones where swiping is enough. */
body.home .rail{scrollbar-width:none;-ms-overflow-style:none}
body.home .rail::-webkit-scrollbar{display:none;width:0;height:0}
.rail-bleed.has-rail-nav{position:relative}
.rail-nav{position:absolute;z-index:5;top:var(--rail-nav-y,40%);transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);box-shadow:var(--shadow);display:grid;place-items:center;padding:0;cursor:pointer;color:var(--ink);transition:opacity .2s ease,visibility .2s ease,background-color .2s ease,border-color .2s ease}
.rail-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rail-nav--prev{left:max(8px,calc((100% - var(--max)) / 2 + var(--pad) - 22px))}
.rail-nav--next{right:max(8px,calc((100% - var(--max)) / 2 + var(--pad) - 22px))}
@media (hover:hover) and (pointer:fine){.rail-nav:hover{background:#fff;border-color:var(--ink)}}
.rail-nav:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.rail-nav[disabled],.rail-nav.is-off{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:767px){.rail-nav{display:none}}