/*
 * Fotos i webshoppen (Unsplash via UnsplashImporter).
 * Statisk fil frem for app.css, fordi CSS-buildet ikke er reproducerbart.
 *
 * <x-shop.photo> lægger .tb-photo som bundlag i et element med position:relative
 * og overflow:hidden. --fx/--fy er fokuspunktet (%), --z zoomen; udsnittet
 * følger fokuspunktet i alle formater. tb-grade-* er colorgraden (ShopPhotos::GRADES),
 * --bn sløringen (trin 0-20, hvert trin 0,25 px, maks. 5 px). Graden ligger i --tb-gf,
 * så grad og sløring kan kombineres.
 */
.tb-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tb-photo img {
    display: block; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
    /* Sløring giver bløde, gennemsigtige kanter; en lille ekstra zoom (0,5 % pr. trin) skjuler dem. */
    transform: scale(calc(var(--z, 1) * (1 + var(--bn, 0) * .005))); transform-origin: var(--fx, 50%) var(--fy, 50%);
    filter: var(--tb-gf, brightness(1)) blur(calc(var(--bn, 0) * .25px));
}
.tb-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* Colorgrades */
.tb-grade-warm { --tb-gf: sepia(.22) saturate(1.18) hue-rotate(-6deg) brightness(1.03); }
.tb-grade-warm::after { background: rgba(240, 150, 80, .12); mix-blend-mode: soft-light; }
.tb-grade-cool { --tb-gf: saturate(.85) hue-rotate(6deg) brightness(1.03); }
.tb-grade-cool::after { background: rgba(70, 120, 180, .18); mix-blend-mode: soft-light; }
.tb-grade-muted { --tb-gf: saturate(.6) contrast(.94) brightness(1.06); }
.tb-grade-bw { --tb-gf: grayscale(1) contrast(1.08); }
.tb-grade-duotone { background: var(--tb-accent, #E85D3D); }
.tb-grade-duotone { --tb-gf: grayscale(1) contrast(1.15) brightness(1.1); }
.tb-grade-duotone img { mix-blend-mode: multiply; }

/* Mørk bund under titlen (stil D) */
.tb-photo-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(32,25,20,0) 28%, rgba(32,25,20,.42) 62%, rgba(32,25,20,.8) 100%); }
.tb-photo-scrim--soft { background: linear-gradient(180deg, rgba(32,25,20,0) 55%, rgba(32,25,20,.35) 100%); }

/* Produktkortets billedfelt med foto (x-shop.product-card): indholdet over fotoet,
   titel og mærke i hvidt, lidt højere felt end med den algoritmiske kunst. */
.tb-has-photo { position: relative !important; overflow: hidden; }
.tb-has-photo > * { position: relative; z-index: 2; }
.tb-has-photo > .tb-photo { position: absolute; z-index: 0; }
.tb-has-photo > .tb-photo-scrim { position: absolute; z-index: 1; }
.tb-has-photo .tb-art-title { color: #fff !important; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.tb-has-photo .tb-art-meta, .tb-has-photo .tb-art-meta span { color: rgba(255,255,255,.92) !important; }
.tb-has-photo .tb-mark { background: #fff !important; }
.tb-art-grid { min-height: 150px !important; }
.tb-art-sale { min-height: 160px !important; }
.tb-art-carousel { min-height: 190px !important; }
.tb-art-category, .tb-art-theme, .tb-art-creator { min-height: 215px !important; }

/* Forsidens mosaik */
.tb-mosaic { position: relative; width: min(100%, 520px); aspect-ratio: 1 / .92; margin: 0 auto; }
.tb-mosaic-tile { position: absolute; overflow: hidden; box-shadow: 0 14px 30px rgba(32,25,20,.18); background: #F4ECE0; }
.tb-mosaic-1 { left: 0; top: 4%; width: 56%; aspect-ratio: 1 / 1.05; border-radius: 44px 44px 44px 10px; }
.tb-mosaic-2 { right: 0; top: 0; width: 40%; aspect-ratio: 1 / 1; border-radius: 36px 36px 10px 36px; }
.tb-mosaic-3 { right: 6%; bottom: 0; width: 50%; aspect-ratio: 4 / 3; border-radius: 36px 36px 36px 10px; }
.tb-mosaic-4 { left: 10%; bottom: 2%; width: 30%; aspect-ratio: 1 / 1; border-radius: 50%; }
.tb-mosaic-q { position: absolute; z-index: 2; left: 44%; top: 43%; max-width: 200px; background: #fff; color: #201914;
    padding: 11px 15px; border-radius: 16px 16px 16px 4px; font: 700 15px/1.3 'Bricolage Grotesque', sans-serif;
    box-shadow: 0 8px 20px rgba(32,25,20,.15); }
@media (max-width: 540px) { .tb-mosaic-q { left: 36%; font-size: 14px; max-width: 170px; } }
@media (prefers-reduced-motion: no-preference) {
    .tb-mosaic-tile { animation: tbMosaicIn .6s ease both; }
    .tb-mosaic-2 { animation-delay: .08s; } .tb-mosaic-3 { animation-delay: .16s; } .tb-mosaic-4 { animation-delay: .24s; }
    @keyframes tbMosaicIn { from { transform: translateY(10px); } to { transform: none; } }
}

/* Kategoriflise med foto: duotone i kategoriens farve */
/* isolation: flisens egen baggrund males nederst, fotoet (z -1) ovenpå den og under teksten;
   indholdet forbliver statisk, så hovedlinkets ::after stadig dækker hele flisen. */
.tb-cat-tile.has-photo { min-height: 210px !important; overflow: hidden; isolation: isolate; justify-content: flex-end !important; }
.tb-cat-tile.has-photo > .tb-photo, .tb-cat-tile.has-photo > .tb-photo-scrim { z-index: -1; }
.tb-cat-tile.has-photo .tb-cat-main { display: inline-block !important; background: #fff; padding: 6px 12px; border-radius: 12px 12px 12px 3px; }
.tb-cat-tile.has-photo .tb-cat-count { color: #fff !important; margin-top: 6px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* Kreditering (Unsplash) */
.tb-photo-credit { font-size: 11px; color: #857363; }
.tb-photo-credit a { color: inherit; }