/**
 * Nowości — Latest Brands Carousels
 *
 * Palette: brand cyan + peach accents, green savings, faint cyan page tint.
 * Typography: Hanken Grotesk for headings; body inherits the theme font.
 *
 * Everything is scoped under .nowosci-page so nothing leaks into the
 * global theme. The product card internals come from the canonical
 * product.tpl miniature; here we only add carousel-context polish.
 */

/* ============================================
   DESIGN TOKENS  (brand palette from _variables.scss)
   ============================================ */
.nowosci-page {
    --nb-primary: #2fb5d2;        /* brand cyan */
    --nb-primary-deep: #1c93ad;   /* deep cyan */
    --nb-secondary: #f39d72;      /* peach */
    --nb-secondary-deep: #e07c4a; /* deep peach */
    --nb-success: #4cbb6c;        /* savings green */
    --nb-danger: #ff4c4c;
    --nb-ink: #232323;
    --nb-muted: #7a7a7a;
    --nb-hairline: #ececec;
    --nb-page-bg: #f6fbfc;        /* very light cyan tint */
    --nb-surface: #ffffff;        /* card / section background */

    --nb-shadow-sm: 0 1px 2px rgba(28, 147, 173, .06), 0 4px 14px rgba(35, 35, 35, .05);
    --nb-shadow-md: 0 8px 22px rgba(28, 147, 173, .12), 0 18px 44px rgba(35, 35, 35, .08);
    --nb-radius: 18px;
    --nb-radius-sm: 12px;

    --nb-heading-font: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

    /* Responsive card width — overridden per breakpoint below.
       ~5 cards visible on large desktop. */
    --nb-card-width: calc((100% - (4 * 20px)) / 5);
    --nb-gap: 20px;
}

/* ============================================
   PAGE SHELL
   ============================================ */
.nowosci-page {
    background:
        radial-gradient(1200px 460px at 12% -8%, rgba(47, 181, 210, .08), transparent 60%),
        radial-gradient(900px 420px at 96% 4%, rgba(243, 157, 114, .07), transparent 55%),
        var(--nb-page-bg);
    color: var(--nb-ink);
    padding: 0 0 72px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nowosci-page *,
.nowosci-page *::before,
.nowosci-page *::after {
    box-sizing: border-box;
}

.nowosci-page h1,
.nowosci-page h2 {
    font-family: var(--nb-heading-font);
    margin: 0;
    letter-spacing: -0.02em;
}

/* ============================================
   PAGE HEADER BAND
   ============================================ */
.nowosci-hero {
    max-width: 1320px;
    margin: 0 auto;
    padding: 44px 32px 12px;
}

.nowosci-hero__inner {
    max-width: 760px;
}

.nowosci-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--nb-heading-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--nb-primary-deep);
}

.nowosci-hero__eyebrow::before {
    content: '';
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nb-primary), var(--nb-secondary));
}

.nowosci-hero__title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.06;
    color: var(--nb-ink);
    margin: 14px 0 0;
}

.nowosci-hero__subtitle {
    margin: 14px 0 0;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: var(--nb-muted);
    max-width: 620px;
}

/* ============================================
   BRAND SECTION
   ============================================ */
.nowosci-brand {
    max-width: 1320px;
    margin: 0 auto;
    padding: 34px 32px 8px;
}

/* --- Section header row --- */
.nowosci-brand__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.nowosci-brand__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.nowosci-brand__logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--nb-surface);
    border: 1px solid var(--nb-hairline);
    box-shadow: var(--nb-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nowosci-brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
}

/* Typographic monogram fallback when no logo file exists */
.nowosci-brand__logo--mono {
    font-family: var(--nb-heading-font);
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--nb-primary), var(--nb-secondary));
    border: none;
}

.nowosci-brand__titles {
    min-width: 0;
}

.nowosci-brand__name {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 800;
    line-height: 1.12;
    color: var(--nb-ink);
}

/* Accent keyword sitting on the cyan->peach gradient underline bar */
.nowosci-brand__name-accent {
    display: inline-block;
    color: var(--nb-primary-deep);
    padding-bottom: 7px;
    background-image: linear-gradient(90deg, var(--nb-primary), var(--nb-secondary));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 4px;
    border-radius: 2px;
}

.nowosci-brand__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.nowosci-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--nb-heading-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    padding: 6px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.nowosci-chip--count {
    color: var(--nb-primary-deep);
    background: rgba(47, 181, 210, .1);
    border: 1px solid rgba(47, 181, 210, .2);
}

/* "Nowość" pill — peach; carries a leading dot so it never relies on color alone */
.nowosci-chip--new {
    color: #fff;
    background: linear-gradient(135deg, var(--nb-secondary), var(--nb-secondary-deep));
    text-transform: uppercase;
    letter-spacing: .1em;
}

.nowosci-chip--new::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    margin-right: 6px;
}

/* "Zobacz wszystkie" link */
.nowosci-brand__all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nb-heading-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--nb-primary-deep);
    text-decoration: none;
    padding: 8px 4px;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}

.nowosci-brand__all svg {
    transition: transform .2s;
}

.nowosci-brand__all:hover,
.nowosci-brand__all:focus-visible {
    color: var(--nb-secondary-deep);
    border-bottom-color: var(--nb-secondary);
    text-decoration: none;
}

.nowosci-brand__all:hover svg,
.nowosci-brand__all:focus-visible svg {
    transform: translateX(4px);
}

/* ============================================
   CAROUSEL
   ============================================ */
.nowosci-carousel {
    position: relative;
}

.nowosci-carousel__track {
    display: flex;
    gap: var(--nb-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 2px 16px;
    /* Hide scrollbar — Firefox + IE */
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

/* Hide scrollbar — WebKit */
.nowosci-carousel__track::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.nowosci-carousel__track:focus-visible {
    outline: 2px solid var(--nb-primary);
    outline-offset: 3px;
    border-radius: var(--nb-radius-sm);
}

/* Each card occupies a fixed responsive width and snaps to start */
.nowosci-page .nowosci-carousel__track > .product-miniature {
    flex: 0 0 var(--nb-card-width);
    width: var(--nb-card-width);
    max-width: var(--nb-card-width);
    scroll-snap-align: start;
}

/* While dragging, suppress snap + smooth so the grab feels direct */
.nowosci-carousel.is-dragging .nowosci-carousel__track {
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: grabbing;
}

.nowosci-carousel.is-dragging .nowosci-carousel__track,
.nowosci-carousel.is-dragging .nowosci-carousel__track * {
    user-select: none;
}

/* --- Prev / next round buttons --- */
.nowosci-carousel__nav {
    position: absolute;
    top: calc(50% - 18px); /* nudge up to account for the track's bottom padding */
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    /* Deep-ink base so the white chevron clears the WCAG 3:1 graphical-contrast
       bar (white-on-#2fb5d2 was only ~1.9:1). Hover brightens to brand cyan. */
    background: var(--nb-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--nb-shadow-md);
    transition: background .2s, transform .2s, opacity .2s, box-shadow .2s;
}

/* Subtle dark halo on the chevron keeps it ≥3:1 against the background in every
   state (default ink, hover cyan, disabled), satisfying the graphical-contrast
   requirement without losing the brand-cyan hover affordance. */
.nowosci-carousel__nav svg {
    filter: drop-shadow(0 0 1px rgba(35, 35, 35, .55));
}

.nowosci-carousel__nav--prev { left: -8px; }
.nowosci-carousel__nav--next { right: -8px; }

.nowosci-carousel__nav:hover {
    background: var(--nb-primary-deep);
}

.nowosci-carousel__nav:active {
    transform: translateY(-50%) scale(.94);
}

.nowosci-carousel__nav[disabled] {
    opacity: .32;
    cursor: default;
    box-shadow: none;
}

/* Hide nav entirely when JS determines there is only one page */
.nowosci-carousel__nav[hidden] {
    display: none;
}

/* --- Dots / progress --- */
.nowosci-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    min-height: 8px;
}

.nowosci-carousel__dots:empty {
    display: none;
}

.nowosci-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(47, 181, 210, .28);
    cursor: pointer;
    transition: width .25s, background .25s;
}

.nowosci-carousel__dot--active {
    width: 22px;
    background: linear-gradient(90deg, var(--nb-primary), var(--nb-secondary));
}

/* ============================================
   PRODUCT CARD POLISH — carousel context ONLY
   Scoped tight to .nowosci-page .nowosci-carousel__track so the rest of
   the store's miniature styling is untouched. The miniature internals
   (price, add-to-cart, availability) keep working as-is.
   ============================================ */
.nowosci-page .nowosci-carousel__track > .product-miniature {
    background: var(--nb-surface);
    border: 1px solid var(--nb-hairline);
    border-radius: var(--nb-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.nowosci-page .nowosci-carousel__track > .product-miniature:hover {
    transform: translateY(-5px);
    box-shadow: var(--nb-shadow-md);
    border-color: rgba(47, 181, 210, .35);
}

.nowosci-page .nowosci-carousel__track > .product-miniature .thumbnail-container {
    height: 100%;
}

/* Image — centered, gentle zoom on hover */
.nowosci-page .nowosci-carousel__track > .product-miniature .thumbnail-container-image {
    position: relative;
    overflow: hidden;
    background: var(--nb-surface);
}

.nowosci-page .nowosci-carousel__track > .product-miniature .product-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nowosci-page .nowosci-carousel__track > .product-miniature .product-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform .5s ease;
}

.nowosci-page .nowosci-carousel__track > .product-miniature:hover .product-thumbnail img {
    transform: scale(1.05);
}

/* --- Discount flag -> rounded cyan badge, top-right corner --- */
.nowosci-page .nowosci-carousel__track > .product-miniature .product-flags {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 3;
}

.nowosci-page .nowosci-carousel__track > .product-miniature .product-flag {
    display: inline-block;
    font-family: var(--nb-heading-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    padding: 7px 11px;
    border-radius: 999px;
    color: #fff;
    background: var(--nb-ink);
    box-shadow: 0 4px 12px rgba(35, 35, 35, .18);
}

/* The savings badge ("-56%") gets the brand cyan treatment.
   theme.css (line 8196) forces position:absolute + top/right with !important on
   .product-miniature .product-flag.discount-percentage, which would yank the badge
   out of our .product-flags flex column and anchor it to .thumbnail-container.
   Re-assert static positioning with !important so it stacks in the flex column
   alongside any real flag (e.g. 'new') instead of overlapping it. */
.nowosci-page .nowosci-carousel__track > .product-miniature .product-flag.discount-percentage,
.nowosci-page .nowosci-carousel__track > .product-miniature .cat-miniature__flag--discount {
    position: static !important;
    top: auto !important;
    right: auto !important;
    background: linear-gradient(135deg, var(--nb-primary), var(--nb-primary-deep));
    box-shadow: 0 4px 14px rgba(28, 147, 173, .35);
}

/* "Nowość"/new flag stays peach to echo the section pill.
   custom.css (line 3753) sets .product-flags .product-flag.new background with
   !important, so we must also use !important here to win the brand peach. */
.nowosci-page .nowosci-carousel__track > .product-miniature .product-flag.new {
    background: linear-gradient(135deg, var(--nb-secondary), var(--nb-secondary-deep)) !important;
}

/* --- Price row: current bold, regular struck-through, green savings tint --- */
.nowosci-page .nowosci-carousel__track > .product-miniature .cat-miniature__price-current {
    color: var(--nb-ink);
    font-weight: 800;
}

.nowosci-page .nowosci-carousel__track > .product-miniature .regular-price,
.nowosci-page .nowosci-carousel__track > .product-miniature .cat-miniature__price-old {
    color: var(--nb-muted);
    text-decoration: line-through;
}

/* When discounted, give the current price a subtle savings-green hint */
.nowosci-page .nowosci-carousel__track > .product-miniature .product-price-and-shipping:has(.regular-price) .cat-miniature__price-current {
    color: var(--nb-success);
}

/* ============================================
   PAGE-LOAD REVEAL  (one orchestrated entrance)
   Each section fades+rises with a stagger via --nb-reveal-delay.
   Wrapped so it only runs when motion is welcome.
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
    .nowosci-hero__inner {
        animation: nb-rise .6s cubic-bezier(.2, .7, .2, 1) both;
    }

    .nowosci-brand {
        animation: nb-rise .6s cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: var(--nb-reveal-delay, 0s);
    }

    @keyframes nb-rise {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.nowosci-page__empty {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 0 32px;
}

.nowosci-page__empty .alert {
    border-radius: var(--nb-radius-sm);
}

/* ============================================
   ACCESSIBILITY — focus styles
   ============================================ */
.nowosci-page .nowosci-carousel__nav:focus-visible,
.nowosci-page .nowosci-carousel__dot:focus-visible {
    outline: 3px solid var(--nb-secondary);
    outline-offset: 2px;
}

.nowosci-page a:focus-visible {
    outline: 2px solid var(--nb-primary);
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE CARD COUNTS
   >=1280: 5  |  1024-1279: 4  |  768-1023: 3
   480-767: 2  |  <480: ~1.4 (peeking)
   ============================================ */
@media (max-width: 1279px) {
    .nowosci-page {
        --nb-card-width: calc((100% - (3 * 20px)) / 4); /* 4 cards */
    }
}

@media (max-width: 1023px) {
    .nowosci-page {
        --nb-card-width: calc((100% - (2 * 18px)) / 3); /* 3 cards */
        --nb-gap: 18px;
    }
    .nowosci-hero { padding: 32px 24px 8px; }
    .nowosci-brand { padding: 28px 24px 8px; }
    /* On touch widths, arrows are out of the way — pull them inside the edges */
    .nowosci-carousel__nav--prev { left: 2px; }
    .nowosci-carousel__nav--next { right: 2px; }
}

@media (max-width: 767px) {
    .nowosci-page {
        --nb-card-width: calc((100% - (1 * 16px)) / 2); /* 2 cards */
        --nb-gap: 16px;
    }
    .nowosci-brand__head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 14px;
    }
}

@media (max-width: 479px) {
    .nowosci-page {
        --nb-card-width: 72%; /* ~1.4 cards — the next one peeks */
        --nb-gap: 14px;
    }
    .nowosci-hero { padding: 26px 16px 6px; }
    .nowosci-brand { padding: 24px 16px 8px; }
    .nowosci-carousel__nav { width: 38px; height: 38px; }
    /* Keep the brand identity readable on the smallest screens */
    .nowosci-brand__logo { width: 46px; height: 46px; }
    .nowosci-page__empty { padding: 0 16px; }
}

/* ============================================
   REDUCED MOTION — disable non-essential motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .nowosci-page,
    .nowosci-page *,
    .nowosci-page *::before,
    .nowosci-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}