/* Engravers-Gothic (the site's own font file) doesn't cover every Polish
   diacritic (ą, ę...) or every digit — a Google Fonts fallback (Jost) was
   tried here but the site's own CSP appears to block fonts.googleapis.com,
   so it never loaded. Falling back straight to Century-Gothic instead:
   it's self-hosted from the site's own domain (proven to load) and is
   already one of the site's two brand fonts, so missing characters render
   in a legitimate — if not pixel-identical — house style instead of an
   unpredictable system font. This is a limitation of the actual font file,
   present site-wide (see the global h1-h4 rule in the site's own CSS),
   not something introduced by this embed.

   dnka-banners embed — fully self-contained styling.
   Fonts are self-hosted here (see @font-face below) so headings render
   correctly even without the agency's script, which used to be the only
   thing that loaded these font files on the page.
   The only thing still shared with the site is the .btn / .btn-content
   button classes (used everywhere on the site).
   Renders directly into Horoshop's own <section class="banners ..."> placeholders
   (first one = hero slider, carries banners--cover; the rest = single category
   banners, carry banners--wide instead — matched on the shared 'banners' class,
   not the modifier, since it differs by slot), so page position/order always
   matches what Horoshop already lays out. */

/* Self-hosted in Supabase Storage (public "fonts" bucket, same project as
   everything else in this site) instead of pointing at dnka.com.pl: that
   server doesn't send Access-Control-Allow-Origin, so the font loaded fine
   on dnka.com.pl itself (same-origin) but was silently CORS-blocked on
   dnka.store and dnka.world (cross-origin), falling back to a system font.
   Supabase Storage's public buckets send Access-Control-Allow-Origin: *
   by default, so this loads identically on all three domains. */
@font-face {
    font-family: 'Engravers-Gothic';
    src: url('https://okayenoycyzjufxgflhs.supabase.co/storage/v1/object/public/fonts/engravers-gothic-bt-font.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century-Gothic';
    src: url('https://okayenoycyzjufxgflhs.supabase.co/storage/v1/object/public/fonts/centurygothic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century-Gothic';
    src: url('https://okayenoycyzjufxgflhs.supabase.co/storage/v1/object/public/fonts/centurygothic_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Horoshop renders its own native banner markup into these sections before
   our script runs. Hide it until dnka-hero-root/dnka-cat-root is added (right
   when we set the real content) so visitors never see the old content flash
   before ours loads. :not() excludes the section the moment our script has
   taken it over, so there's no specificity fight with a competing "show"
   rule (a plain .dnka-hero-root selector is weaker than this one and would
   lose, leaving the banner hidden forever — that was the bug just now).
   No layout shift: visibility keeps the box's size. */
section.banners:not(.dnka-hero-root):not(.dnka-cat-root) {
    visibility: hidden;
}

.dnka-hero-root,
.dnka-cat-root {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.dnka-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.dnka-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .9s ease;
}
.dnka-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.dnka-slide-img,
.dnka-cat-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

/* subtle zoom-in on hover, like the reference site */
.dnka-hero-root:hover .dnka-slide.is-active .dnka-slide-img,
.dnka-cat-root:hover .dnka-cat-img {
    transform: scale(1.06);
}

.dnka-slide:after,
.dnka-cat-root:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(86.92deg, rgba(0,0,0,.6) 2%, rgba(0,0,0,0) 50.22%, rgba(0,0,0,0) 76.54%, rgba(0,0,0,.3) 96.81%);
}

.dnka-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 10em;
}
@media screen and (max-width: 1630px) { .dnka-content { margin: 0 8em; } }
@media screen and (max-width: 1430px) { .dnka-content { margin: 0 5em; } }
@media screen and (max-width: 768px)  { .dnka-content { margin: 0 24px; } }

.dnka-col {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 640px;
}

.dnka-heading {
    font-family: 'Century-Gothic', Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-size: calc(24px + 26 * (100vw / 1440)) !important;
    line-height: 1.05 !important;
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
    margin: 0 0 20px !important;
}

.dnka-desc {
    font-family: 'Century-Gothic', Arial, Helvetica, sans-serif !important;
    font-size: calc(12px + 11 * (100vw / 1440)) !important;
    line-height: 1.6 !important;
    color: #fff !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
    margin: 0 0 35px !important;
}

/* reveal-on-active animation for the hero slider only */
.dnka-hero-root .dnka-heading,
.dnka-hero-root .dnka-desc,
.dnka-hero-root .dnka-slide-btn {
    opacity: 0;
    transform: translateY(30px);
}
.dnka-hero-root .dnka-slide.is-active .dnka-heading,
.dnka-hero-root .dnka-slide.is-active .dnka-desc,
.dnka-hero-root .dnka-slide.is-active .dnka-slide-btn {
    animation: dnkaFadeUp .8s ease forwards;
}
.dnka-hero-root .dnka-slide.is-active .dnka-desc { animation-delay: .15s; }
.dnka-hero-root .dnka-slide.is-active .dnka-slide-btn { animation-delay: .3s; }

@keyframes dnkaFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* category banners are single/static — show immediately, no reveal animation */
.dnka-cat-root .dnka-heading,
.dnka-cat-root .dnka-desc,
.dnka-cat-root .dnka-slide-btn {
    opacity: 1;
    transform: none;
}

/* self-contained on purpose — don't lean on the site's own .btn sizing/
   alignment rules, which may or may not be present on every device (that
   gap is exactly what made this button render wide with top-aligned text
   on mobile once). */
.dnka-slide-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    white-space: nowrap;
    padding: 15px 30px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-family: 'Century-Gothic', Arial, Helvetica, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.dnka-dots {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.dnka-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: .25s;
}
.dnka-dot.is-active {
    background: #fff;
    width: 22px;
    border-radius: 5px;
}

.dnka-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.65);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color .2s, transform .2s;
}
.dnka-arrow:hover { color: #fff; transform: translateY(-50%) scale(1.15); }
.dnka-arrow--prev { left: 8px; }
.dnka-arrow--next { right: 8px; }

@media (max-width: 768px) {
    .dnka-arrow { display: none; }
    .dnka-dots { bottom: 14px; }
    /* full screen height, like the reference site. Went with a shorter box
       earlier to reduce object-fit:cover cropping on wide/landscape photos —
       but now that every banner can have its own purpose-cropped mobile
       image (with drag-to-reposition in the admin), full height is safe:
       upload a mobile image for anything that still crops badly instead of
       shrinking the box for everyone. */
    .dnka-hero-root, .dnka-cat-root {
        width: 100%;
        height: 100vh;
        height: 100svh;
    }
    /* the admin's per-banner mobile-image drag-to-reposition + scroll-to-zoom
       — only takes effect here (mobile), set as CSS vars per-<img> in
       main.js, so the same element still uses the plain centered/unzoomed
       crop on desktop */
    .dnka-slide-img, .dnka-cat-img {
        object-position: var(--pos-mobile-x, 50%) var(--pos-mobile-y, 50%);
        transform: scale(calc(var(--zoom-mobile, 100) / 100));
    }
}

/* Header category menu (all three shops): the theme's own stylesheet caps
   each pill at max-width 11% with a 10px right margin, so 7–8 pills leave a
   big empty strip on the right on wide screens. Stretch them to share the
   full row evenly — logo edge to cart edge — never narrower than their text.
   Below 1025px the theme's original sizing is left alone. */
@media (min-width: 1025px) {
    .products-menu__container {
        gap: 10px;
    }
    .products-menu__container > .products-menu__item {
        flex: 1 1 0 !important;
        min-width: max-content;
        max-width: none !important;
        margin-right: 0 !important;
    }
}

/* Cart popup grid lines (pl/world): some product descriptions were pasted
   from a spreadsheet and carry a stray style block (td{border:1px solid #ccc})
   that outlines every table cell on the page — including the cart's. Keep
   the cart table borderless, as it is on dnka.store. */
.cart-items td,
.cart-items th {
    border: 0;
}

/* Phones: the banner's text/button block can be moved up or down per banner
   (admin slider → --btn-y, 0 = top … 1 = bottom), so it never lands on top of
   text that's part of the photo itself. Kept clear of the edges and of the
   slider dots at the bottom. Desktop is unaffected. */
@media (max-width: 768px) {
    .dnka-content.has-btn-y {
        align-items: flex-start;
    }
    .dnka-content.has-btn-y > .dnka-col {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(16px + (100% - 64px) * var(--btn-y));
        transform: translateY(calc(var(--btn-y) * -100%));
    }
}

/* Horoshop mobile theme gives every ".about p" the start state of a scroll-in
   animation (opacity:0) meant for the About page. The homepage SEO text reuses
   .about but is never animated, so its paragraphs stayed invisible. */
.about .text-expander__content p{opacity:1 !important;transform:none !important;}

/* "O nas" page: its HTML wraps the block in .container, which Horoshop styles
   with min-width:1000px; next to the side menu the column is narrower, so the
   block spilled off the right edge on laptop screens. */
.page-content .about .container{min-width:0;}