/*
Theme Name: Tlocznia Rzeczyca
Theme URI: https://marketingczarnecki.pl
Author: MCZ
Description: Motyw dla sklepu Tlocznia Rzeczyca
Version: 1.0
Text Domain: tlocznia
*/

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; background: #0d0f1a; }

#site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #0d0f14;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
    overflow: visible;
}

.header-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: visible;
}

/* ============================================================
   LOGO
   ============================================================ */
.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.site-logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
}

.site-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.site-logo-text .logo-top {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-logo-text .logo-bottom {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #FACC15;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.header-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 2;
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-nav ul li a {
    position: relative;
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b0b8cc;
    text-decoration: none;
    padding: 8px 16px;
    transition: color 0.22s ease;
}

.header-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: calc(100% - 32px);
    height: 2px;
    background: #FACC15;
    border-radius: 2px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-nav ul li a:hover,
.header-nav ul li.current-menu-item > a,
.header-nav ul li.current_page_item > a,
.header-nav ul li.current-menu-ancestor > a {
    color: #FACC15;
}

.header-nav ul li a:hover::after,
.header-nav ul li.current-menu-item > a::after,
.header-nav ul li.current_page_item > a::after,
.header-nav ul li.current-menu-ancestor > a::after {
    transform: translateX(-50%) scaleX(1);
}

/* Nav ukrywa sie gdy search otwarty */
#site-header.search-open .header-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================================
   SEARCH BAR - wewnatrz headera, wysuwa sie od prawej
   ============================================================ */
.header-search-bar {
    position: absolute;
    top: 0;
    left: 220px;
    right: 160px;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    background: #0d0f14;
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 4;
}

#site-header.search-open .header-search-bar {
    clip-path: inset(0 0 0 0%);
    pointer-events: all;
}

.search-bar-icon {
    color: #FACC15;
    font-size: 15px;
    flex-shrink: 0;
}

#headerSearchInput {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 1.5px solid rgba(250, 204, 21, 0.4);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    padding: 6px 0;
    caret-color: #FACC15;
    transition: border-color 0.2s ease;
}

#headerSearchInput:focus {
    border-bottom-color: #FACC15;
}

#headerSearchInput::placeholder {
    color: #fff;
}

.search-clear-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    display: none;
    align-items: center;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.search-clear-btn:hover { color: #c8cdd8; }
.search-clear-btn.visible { display: flex; }

/* Ikona lupy / X */
#searchTrigger .icon-search { display: flex; }
#searchTrigger .icon-close  { display: none;  }

#site-header.search-open #searchTrigger .icon-search { display: none;  }
#site-header.search-open #searchTrigger .icon-close  { display: flex; }

/* ============================================================
   SEARCH DROPDOWN - pelna szerokosc pod headerem
   ============================================================ */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #12151e;
    border-top: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    z-index: 999;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On mobile: also make header overflow visible so dropdown shows below */
@media (max-width: 960px) {
    #site-header {
        overflow: visible;
    }
    .header-search-bar {
        /* search bar slides in below existing content on mobile */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 56px;
        right: 140px;
        z-index: 4;
    }
}

.search-dropdown.has-results {
    max-width: 1340px;
    margin: 0 auto;
    max-height: 480px;
}

.search-dropdown-inner {
    padding: 20px 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(250,204,21,0.25) transparent;
}

.search-dropdown-inner::-webkit-scrollbar { width: 3px; }
.search-dropdown-inner::-webkit-scrollbar-thumb { background: rgba(250,204,21,0.25); border-radius: 2px; }

.search-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.search-loader i { color: #FACC15; animation: sr-spin 0.8s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }

.search-no-results {
    padding: 24px;
    text-align: center;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.sr-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease;
    cursor: pointer;
}

.sr-item:hover { background: rgba(250,204,21,0.06); }

.sr-thumb {
    width: 46px;
    height: 46px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.07);
}

.sr-thumb-ph {
    width: 46px;
    height: 46px;
    border-radius: 7px;
    background: #1c2030;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #252b40;
    font-size: 16px;
}

.sr-info { flex: 1; min-width: 0; }

.sr-title {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #e0e3ef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}

.sr-item:hover .sr-title { color: #FACC15; }

.sr-type {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 3px;
}

.sr-price {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #FACC15;
    flex-shrink: 0;
}

.sr-view-all {
    display: block;
    margin-top: 10px;
    padding: 11px;
    text-align: center;
    background: rgba(250,204,21,0.07);
    border: 1px solid rgba(250,204,21,0.18);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.sr-view-all:hover {
    background: rgba(250,204,21,0.14);
    border-color: rgba(250,204,21,0.36);
}

/* ============================================================
   HEADER ACTIONS
   ============================================================ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

.header-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #b0b8cc;
    font-size: 17px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.header-icon-btn:hover {
    color: #FACC15;
    background: rgba(250,204,21,0.08);
}

/* Cart count badge */
.cart-count {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #FACC15;
    color: #0d0f14;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 800;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-count.bump {
    transform: scale(1.4);
}

/* ============================================================
   OVERLAY
   ============================================================ */
.site-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 990;
    pointer-events: none;
    transition: background 0.3s ease;
}

.site-overlay.active {
    background: rgba(0,0,0,0.5);
    pointer-events: all;
}

/* ============================================================
   MINI CART
   ============================================================ */
.mini-cart {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: #13161e;
    border-left: 1px solid rgba(255,255,255,0.07);
    box-shadow: -12px 0 48px rgba(0,0,0,0.55);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-cart.active {
    transform: translateX(0);
}

.mini-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.mini-cart-title {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mini-cart-close {
    background: transparent;
    border: none;
    color: #d8dbe8;
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
}

.mini-cart-close:hover {
    color: #FACC15;
    background: rgba(250,204,21,0.08);
}

.mini-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(250,204,21,0.2) transparent;
}

.mini-cart-body::-webkit-scrollbar { width: 3px; }
.mini-cart-body::-webkit-scrollbar-thumb { background: rgba(250,204,21,0.2); border-radius: 2px; }

.mini-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 0;
    color: #d8dbe8;
}

.mini-cart-empty i { font-size: 42px; }

.mini-cart-empty p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0;
}

.mini-cart-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mini-cart-item:last-child { border-bottom: none; }

.mini-cart-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.07);
}

.mini-cart-thumb-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #1c2030;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #252b40;
    font-size: 20px;
}

.mini-cart-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mini-cart-item-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #d8dbe8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-cart-item-qty {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #fff;
}

.mini-cart-item-price {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #FACC15;
    flex-shrink: 0;
}

.mini-cart-footer {
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.mini-cart-total span {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mini-cart-total strong {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.mini-cart-btn {
    display: block;
    padding: 13px;
    text-align: center;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.mini-cart-btn-cart {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: #c8cdd8;
}

.mini-cart-btn-cart:hover {
    border-color: rgba(250,204,21,0.4);
    color: #FACC15;
}

.mini-cart-btn-checkout {
    background: #FACC15;
    border: 1px solid #FACC15;
    color: #0d0f14;
}

.mini-cart-btn-checkout:hover {
    background: #f5c000;
    border-color: #f5c000;
}

/* ============================================================
   MOBILE HAMBURGER  (visible only above 960px breakpoint)
   ============================================================ */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #b0b8cc;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: color 0.2s;
}

.mobile-menu-toggle:hover { color: #FACC15; }

/* ============================================================
   MOBILE NAV  (slide-down, used only on mid breakpoints)
   ============================================================ */
.mobile-nav {
    display: none;
    background: #12151e;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 8px 24px 20px;
    width: 100%;
}

.mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav ul li a {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b0b8cc;
    text-decoration: none;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: color 0.2s, padding-left 0.2s;
}

.mobile-nav ul li:last-child a { border-bottom: none; }

.mobile-nav ul li a:hover,
.mobile-nav ul li.current-menu-item > a {
    color: #FACC15;
    padding-left: 8px;
}

/* ============================================================
   MOBILE BACK BUTTON
   ============================================================ */
.mobile-back-btn {
    /* hidden by default – shown via mobile breakpoint below */
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.10);
    color: #b0b8cc;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    position: relative;
    z-index: 3;
}

.mobile-back-btn:hover,
.mobile-back-btn:active {
    background: rgba(250,204,21,0.12);
    border-color: rgba(250,204,21,0.45);
    color: #FACC15;
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION
   ============================================================ */
.mobile-bottom-nav {
    /* hidden on desktop */
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #0d0f14;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.45);
    z-index: 999;
    align-items: stretch;
    overflow: visible;   /* allows logo circle to stick out above */
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-bottom-nav.hidden {
    transform: translateY(100%);
}

/* nav items */
.mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: #505570;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 6px 4px 8px;
    transition: color 0.2s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.mbn-item i {
    font-size: 19px;
    line-height: 1;
    transition: color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mbn-item:hover i,
.mbn-item.active i {
    transform: translateY(-1px);
}

.mbn-item:hover,
.mbn-item.active {
    color: #FACC15;
}

/* active indicator dot on top */
.mbn-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #FACC15;
    border-radius: 0 0 3px 3px;
}

/* center logo home button */
.mbn-home {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
}

.mbn-home::before { display: none; } /* no top line for home */

.mbn-logo-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #FACC15;
    display: flex;
    align-items: center;
    justify-content: center;
    /* protrude ~16px above the 64px bar */
    transform: translateY(-14px);
    box-shadow: 0 0 20px rgba(250,204,21,0.35),
                0 -2px 10px rgba(0,0,0,0.25),
                0 4px 10px rgba(0,0,0,0.3);
    border: 3px solid #0d0f14;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
    flex-shrink: 0;
}

.mbn-logo-circle img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.mbn-home:hover .mbn-logo-circle,
.mbn-home.active .mbn-logo-circle {
    transform: translateY(-18px) scale(1.07);
    box-shadow: 0 0 32px rgba(250,204,21,0.55), 0 4px 16px rgba(0,0,0,0.4);
}

/* ============================================================
   RESPONSIVE – 960px (tablet/mobile)
   ============================================================ */
@media (max-width: 960px) {
    /* Hide desktop nav & hamburger */
    .header-nav        { display: none; }
    .mobile-menu-toggle { display: none !important; }
    /* Bottom nav replaces slide-down mobile nav */
    .mobile-nav        { display: none !important; }

    /* Show bottom nav */
    .mobile-bottom-nav { display: flex; }

    /* Body padding so content isn't hidden under bottom bar + protruding circle */
    body { padding-bottom: 78px; }

    /* Back button visible only on non-home pages */
    body:not(.home):not(.front-page) .mobile-back-btn {
        display: flex;
    }

    /* Logo centered on non-home pages, nudged left to avoid icon overlap */
    body:not(.home):not(.front-page) .header-inner .site-logo {
        position: absolute;
        left: 50%;
        /* shift left: center between back-btn (~56px) and actions (~120px from right) */
        transform: translateX(calc(-50% - 28px));
        z-index: 2;
        max-width: calc(100% - 200px);
        overflow: hidden;
    }

    /* On non-home, back btn fills the left slot in flex */
    body:not(.home):not(.front-page) .header-inner {
        justify-content: space-between;
    }

    /* Search bar: start just after back button / logo image */
    .header-search-bar { left: 56px; right: 140px; }
}

/* ============================================================
   RESPONSIVE – 600px (small mobile)
   ============================================================ */
@media (max-width: 600px) {
    .header-inner { padding: 0 16px; }
    .mini-cart { width: 100vw; }
    .header-search-bar { left: 56px; right: 130px; }
    .site-logo-text .logo-top  { font-size: 15px; }
    .site-logo-text .logo-bottom { font-size: 9px; }
    .mbn-logo-circle { width: 50px; height: 50px; }
    .mbn-logo-circle img { width: 30px; height: 30px; }
}

/* ============================================================
   MOBILE SEARCH ROW  (element lives OUTSIDE <header>)
   ============================================================ */

.mobile-search-row,
.mobile-search-dropdown {
    display: none;
}

@media (max-width: 960px) {

    .header-search-bar { display: none !important; }

    .mobile-search-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
        background: #0d0f14;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
        overflow: hidden;
        height: 0;
        transition: height 0.3s cubic-bezier(0.22,1,0.36,1);
        position: sticky;
        top: 72px;
        z-index: 1002;
    }

    body.search-open .mobile-search-row {
        height: 52px;
    }

    #mobileSearchInput {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 1.5px solid rgba(250,204,21,0.45);
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        color: #ffffff;
        padding: 6px 0;
        caret-color: #FACC15;
        min-width: 0;
        opacity: 0;
        transition: opacity 0.2s ease 0.1s;
    }

    body.search-open #mobileSearchInput { opacity: 1; }
    #mobileSearchInput:focus { border-bottom-color: #FACC15; }
    #mobileSearchInput::placeholder { color: #555a72; }

    .mobile-search-row .search-bar-icon {
        color: #FACC15;
        font-size: 15px;
        flex-shrink: 0;
    }

    .mobile-search-dropdown {
        display: block;
        background: #12151e;
        box-shadow: 0 12px 36px rgba(0,0,0,0.5);
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.35s cubic-bezier(0.22,1,0.36,1);
        position: sticky;
        top: 124px;
        z-index: 1002;
        pointer-events: all;
    }

    .mobile-search-dropdown.has-results {
        max-height: 420px;
        overflow-y: auto;
    }
}

#site-footer {
    width: 100%;
    background: #0a0c14;
    border-top: 1px solid rgba(124,58,237,0.4);
}

.footer-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 64px 60px 48px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 48px;
}

/* Kolumna 1 */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 20px;
}

.footer-logo img {
    height: 46px;
    width: auto;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-logo-top {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-logo-bottom {
    font-family: Oswald, sans-serif;
    font-size: 10px;
    font-weight: 300;
    color: #FACC15;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 4px;
}

.footer-desc {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #d8dbe8;
    margin: 0 0 24px;
    max-width: 280px;
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #d8dbe8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.footer-social:hover {
    background: rgba(250,204,21,0.1);
    border-color: rgba(250,204,21,0.3);
    color: #FACC15;
}

/* Kolumny 2-4 */
.footer-col-title {
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 20px;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #d8dbe8;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-links a:hover {
    color: #FACC15;
    padding-left: 4px;
}

.footer-links--social a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-links--social i {
    width: 16px;
    text-align: center;
    color: #d8dbe8;
}

.footer-links--contact {
    gap: 16px;
}

.footer-links--contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #d8dbe8;
    line-height: 1.5;
}

.footer-links--contact i {
    color: #FACC15;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.footer-links--contact a {
    color: #d8dbe8;
    text-decoration: none;
    transition: color 0.2s;
    padding-left: 0;
}

.footer-links--contact a:hover {
    color: #FACC15;
    padding-left: 0;
}

/* Bottom bar */
.footer-bar {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 18px 60px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-copy {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
}

.footer-credits {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
}

.footer-credits a {
    color: #d8dbe8;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-credits a:hover { color: #FACC15; }

/* Responsive */
@media (max-width: 960px) {
    .footer-inner { grid-template-columns: 1fr 1fr; padding: 48px 28px 36px; }
    .footer-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .footer-inner { grid-template-columns: 1fr; padding: 40px 20px 28px; gap: 32px; }
    .footer-bar { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── Cookie Banner ── */
.ck-banner {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.ck-banner.ck-active { opacity: 1; visibility: visible; }

.ck-overlay {
    position: absolute; inset: 0;
    background: rgba(5,6,14,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ck-box {
    position: relative;
    background: #12151f;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    padding: 28px;
    width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(250,204,21,.25) transparent;
    transform: translateY(18px) scale(0.97);
    transition: transform .35s cubic-bezier(.34,1.46,.64,1);
}
.ck-box::-webkit-scrollbar { width: 4px; }
.ck-box::-webkit-scrollbar-thumb { background: rgba(250,204,21,.25); border-radius: 4px; }
.ck-banner.ck-active .ck-box { transform: translateY(0) scale(1); }

/* Header */
.ck-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ck-icon {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    background: rgba(250,204,21,.1); color: #FACC15; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
}
.ck-title {
    font-family: Oswald, sans-serif; font-size: 19px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #fff; margin: 0 0 3px;
}
.ck-sub { font-family: Inter, sans-serif; font-size: 11px; color: #d8dbe8; margin: 0; }

.ck-desc {
    font-family: Inter, sans-serif; font-size: 13px; line-height: 1.7;
    color: #7a8299; margin: 0 0 20px;
}

/* Options */
.ck-options {
    background: #0d0f1a; border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px; overflow: hidden; margin-bottom: 20px;
}
.ck-option {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.ck-option:last-child { border-bottom: none; }

.ck-option-row { display: flex; align-items: center; gap: 11px; margin-bottom: 5px; }
.ck-option-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-option-name { font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; color: #c8cdd8; }

.ck-badge {
    font-family: Inter, sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: #FACC15; background: rgba(250,204,21,.1);
    border: 1px solid rgba(250,204,21,.2); border-radius: 20px; padding: 2px 8px;
}
.ck-option-desc {
    font-family: Inter, sans-serif; font-size: 11px; color: #fff;
    line-height: 1.6; margin: 0; padding-left: 51px;
}

/* Toggle */
.ck-toggle {
    position: relative; display: inline-flex;
    width: 38px; height: 21px; flex-shrink: 0; cursor: pointer;
}
.ck-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ck-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 21px;
    transition: background .2s, border-color .2s;
}
.ck-slider::before {
    content: '';
    position: absolute;
    width: 15px; height: 15px;
    left: 2px; top: 2px;
    background: #fff; border-radius: 50%;
    transition: transform .22s;
}
.ck-toggle input:checked + .ck-slider { background: #FACC15; border-color: #FACC15; }
.ck-toggle input:checked + .ck-slider::before { transform: translateX(17px); background: #0d0f1a; }

/* Always-on toggle (no input) */
.ck-toggle--on .ck-slider { background: rgba(250,204,21,.4); border-color: rgba(250,204,21,.2); cursor: default; }
.ck-toggle--on .ck-slider::before { transform: translateX(17px); background: #0d0f1a; }

/* Buttons */
.ck-actions { display: flex; flex-direction: column; gap: 8px; }
.ck-btn {
    width: 100%; border: none; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .2s, transform .15s;
}
.ck-btn--accept {
    padding: 13px 20px;
    background: #FACC15; color: #0d0f1a;
    font-family: Oswald, sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.ck-btn--accept:hover { background: #f5c000; transform: translateY(-1px); }

.ck-btn--save {
    padding: 12px 20px;
    background: rgba(255,255,255,.06); color: #c8cdd8;
    border: 1px solid rgba(255,255,255,.1) !important;
    font-family: Oswald, sans-serif; font-size: 13px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}
.ck-btn--save:hover { background: rgba(255,255,255,.1); }

.ck-btn--reject {
    padding: 9px 20px;
    background: transparent; color: #fff;
    font-family: Inter, sans-serif; font-size: 12px; font-weight: 500;
}
.ck-btn--reject:hover { color: #7a8299; }

.ck-footer-link {
    text-align: center; margin: 14px 0 0;
    font-family: Inter, sans-serif; font-size: 11px;
}
.ck-footer-link a { color: #d8dbe8; text-decoration: none; transition: color .15s; }
.ck-footer-link a:hover { color: #FACC15; }

@media (max-width: 500px) {
    .ck-box { padding: 20px 14px; border-radius: 16px; }
    .ck-title { font-size: 17px; }
    .ck-option-desc { padding-left: 0; margin-top: 5px; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
    width: 100%;
    min-height: calc(100vh - 72px);
    background: linear-gradient(135deg, #0d0f1a 0%, #161030 45%, #1a0f2e 100%);
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    padding: 80px 0 60px;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(120,60,200,0.18) 0%, transparent 70%);
    pointer-events: none;
}

.hero-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

/* BADGE */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250,204,21,0.1);
    border: 1px solid rgba(250,204,21,0.3);
    border-radius: 20px;
    padding: 6px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FACC15;
    width: fit-content;
}
.hero-badge i { font-size: 10px; }

/* HEADING */
.hero-content { display: flex; flex-direction: column; gap: 28px; }

.hero-heading {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    transform: skewX(-3deg);
    transform-origin: left center;
}

.hero-line {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(46px, 5.5vw, 76px);
    font-weight: 700;
    line-height: 1.0;
    text-transform: uppercase;
    color: #ffffff;
}

.hero-line .accent { color: #FACC15; }

/* TEXT */
.hero-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #7a8299;
    max-width: 340px;
}
.hero-text p { margin: 0; }

/* CTA */
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.btn-primary {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FACC15;
    color: #0d0f14;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 8px;
    border: 2px solid #FACC15;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(250,204,21,0.25);
}
.btn-primary:hover {
    background: #f5c000;
    border-color: #f5c000;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(250,204,21,0.4);
}

.o-nas-button {
    width: max-content;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FACC15;
    color: #0d0f14;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 8px;
    border: 2px solid #FACC15;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(250,204,21,0.25);
}

.o-nas-button:hover {
    background: #f5c000;
    border-color: #f5c000;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(250,204,21,0.4);
}

/* VISUAL */
.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-image-wrap {
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 32px 72px rgba(0,0,0,0.65));
    transform: rotate(-6deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.15, 0.64, 1);
    cursor: default;
}

.hero-image-wrap:hover {
    transform: rotate(-3deg) scale(1.05);
}

.hero-image {
    display: block;
    width: 400px;
    height: 500px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.1);
    object-fit: cover;
}

/* FLOATING BADGES */
.hero-img-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10,12,22,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px 16px 10px 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    animation: badge-float 3.2s ease-in-out infinite;
}

.badge-top    { top: -16px; right: -20px; animation-delay: 0s; }
.badge-bottom { bottom: 36px; left: -24px; animation-delay: 1.6s; }

@keyframes badge-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-7px); }
}

.badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.badge-icon--yellow { background: rgba(250,204,21,0.15); color: #FACC15; border: 1px solid rgba(250,204,21,0.3); }
.badge-icon--green  { background: rgba(52,211,153,0.15);  color: #34d399; border: 1px solid rgba(52,211,153,0.3); }

.badge-body { display: flex; flex-direction: column; gap: 1px; }

.badge-label {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d8dbe8;
}

.badge-value {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
}

.ticker-wrap {
    width: 100%;
    background: rgba(250, 204, 21, 0.08);
    border-top: 1px solid #FACC15;
    border-bottom: 1px solid #FACC15;
    overflow: hidden;
}

.ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 13px 0;
    animation: ticker-scroll 30s linear infinite;
    will-change: transform;
}

.ticker-wrap:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 0 44px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FACC15;
    white-space: nowrap;
}

.ticker-star {
    font-size: 8px;
    color: #7c3fc0;
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; padding: 0 28px; gap: 40px; }
    .hero-image { max-width: 320px; }
    .badge-top { top: -10px; right: -8px; }
    .badge-bottom { bottom: 24px; left: -10px; }
}

@media (max-width: 480px) {
    .hero { padding: 44px 0 36px; }
    .hero-line { font-size: 40px; }
    .hero-image { max-width: 260px; }
    .hero-text { font-size: 13px; }
    .ticker-item { padding: 0 24px; font-size: 11px; }
}

/* Social proof */
.hero-social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-avatars {
    display: flex;
    align-items: center;
}

.hero-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #0d0f1a;
    object-fit: cover;
    margin-left: -8px;
}

.hero-avatars .hero-avatar:first-child {
    margin-left: 0;
}

.hero-avatar-more {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #0d0f1a;
    background: #FACC15;
    color: #0d0f14;
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    letter-spacing: 0.02em;
}

.hero-social-text {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #d8dbe8;
}

/* KIEDY TANKOWAĆ */
.kiedy {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}
.kiedy-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
.kiedy-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.04em;
    margin: 0 0 64px;
    position: relative;
}
.kiedy-heading::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: #FACC15;
    border-radius: 2px;
    margin: 14px auto 0;
}
.kiedy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.kiedy-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.kiedy-card:hover {
    border-color: rgba(250,204,21,0.25);
    transform: translateY(-4px);
}
.kiedy-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.kiedy-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(30%);
    transition: transform 0.5s ease, filter 0.4s ease;
}
.kiedy-card:hover .kiedy-card-img {
    transform: scale(1.05);
    filter: grayscale(0%);
}
.kiedy-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(13,15,26,0.85) 100%);
}
.kiedy-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #FACC15;
    color: #0d0f14;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
}
.kiedy-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.kiedy-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(250,204,21,0.5);
    color: #FACC15;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.kiedy-card-heading {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0;
}
.kiedy-card-text {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #d8dbe8;
    flex: 1;
}
.kiedy-card-text p { margin: 0; }
.kiedy-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    margin-top: 4px;
    transition: gap 0.2s ease;
}
.kiedy-card-link:hover { gap: 12px; }
@media (max-width: 900px) {
    .kiedy-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 600px) {
    .kiedy-inner { padding: 0 20px; }
    .kiedy { padding: 64px 0 56px; }
}

/* Kolory kart */
/* Karta 1 - pomaranczowy */
.kiedy-card:nth-child(1)                   { border-color: #f97316; }
.kiedy-card:nth-child(1) .kiedy-card-badge { background: #f97316; color: #fff; }
.kiedy-card:nth-child(1) .kiedy-card-icon  { border-color: #f97316; color: #f97316; }
.kiedy-card:nth-child(1) .kiedy-card-link  { color: #f97316; }
.kiedy-card:nth-child(1):hover             { border-color: #f97316; box-shadow: 0 0 24px rgba(249,115,22,0.2); }

/* Karta 2 - zolty */
.kiedy-card:nth-child(2)                   { border-color: #FACC15; }
.kiedy-card:nth-child(2) .kiedy-card-badge { background: #FACC15; color: #0d0f14; }
.kiedy-card:nth-child(2) .kiedy-card-icon  { border-color: #FACC15; color: #FACC15; }
.kiedy-card:nth-child(2) .kiedy-card-link  { color: #FACC15; }
.kiedy-card:nth-child(2):hover             { border-color: #FACC15; box-shadow: 0 0 24px rgba(250,204,21,0.2); }

/* Karta 3 - fioletowy */
.kiedy-card:nth-child(3)                   { border-color: #7c3aed; }
.kiedy-card:nth-child(3) .kiedy-card-badge { background: #7c3aed; color: #fff; }
.kiedy-card:nth-child(3) .kiedy-card-icon  { border-color: #a78bfa; color: #a78bfa; }
.kiedy-card:nth-child(3) .kiedy-card-link  { color: #a78bfa; }
.kiedy-card:nth-child(3):hover             { border-color: #7c3aed; box-shadow: 0 0 24px rgba(124,58,237,0.2); }

/* ============================================================
   PRODUKTY SEKCJA
   ============================================================ */

.produkty {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.produkty-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

.produkty-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 20px;
    flex-wrap: wrap;
}

.produkty-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.produkty-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FACC15;
}

.produkty-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1;
}

.produkty-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.2s ease;
    padding-bottom: 4px;
}

.produkty-all-link:hover { gap: 12px; }

/* GRID */
.produkty-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* CARD */
.produkty-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.produkty-card:hover {
    border-color: rgba(250,204,21,0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.produkty-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #1c2030;
}

.produkty-card-img {
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
}

.produkty-card:hover .produkty-card-img {
    transform: scale(1.06);
}

/* Badge */
.pbadge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 5px;
    z-index: 1;
}

.pbadge--orange { background: #f97316; color: #fff; }
.pbadge--yellow { background: #FACC15; color: #0d0f14; }
.pbadge--purple { background: #7c3aed; color: #fff; }

/* Body */
.produkty-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.produkty-card-title {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.2;
}

.produkty-card-desc {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.produkty-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.produkty-card-tags .ptag {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #d8dbe8;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 3px 8px;
}

/* Footer: cena + przycisk */
.produkty-card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.produkty-card-price {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}

.produkty-card-price ins {
    text-decoration: none;
    color: #ffffff;
}

.produkty-card-price del {
    font-size: 14px;
    color: #fff;
    margin-right: 6px;
}

.produkty-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(250,204,21,0.08);
    border: 1px solid rgba(250,204,21,0.25);
    color: #FACC15;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, color 0.2s, gap 0.2s;
}

.produkty-card-btn:hover {
    background: #FACC15;
    border-color: #FACC15;
    color: #0d0f14;
    gap: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
    .produkty-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .produkty-inner { padding: 0 20px; }
    .produkty-grid { grid-template-columns: 1fr; }
    .produkty { padding: 64px 0 56px; }
}
/* ============================================================
   PORÓWNANIE
   ============================================================ */

.porownanie {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.porownanie-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 80px;
}

/* LEWA */
.porownanie-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.0;
    letter-spacing: 0.02em;
    margin: 0 0 24px;
}

.porownanie-accent { color: #7c3aed; }

.porownanie-tekst {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #d8dbe8;
    margin-bottom: 40px;
}
.porownanie-tekst p { margin: 0; }

.porownanie-lista {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.porownanie-lista-item {
    display: flex;
    gap: 18px;
    align-items: center;
}

.plista-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.plista-icon--red   { background: rgba(239,68,68,0.12); border: 1.5px solid rgba(239,68,68,0.35); color: #ef4444; }
.plista-icon--green { background: rgba(52,211,153,0.12); border: 1.5px solid rgba(52,211,153,0.35); color: #34d399; }

.plista-body { font-family: Inter, sans-serif; font-size: 13px; line-height: 1.65; color: #c8cdd8; }
.plista-body p { margin: 0; }
.plista-body h3 { text-transform: uppercase; margin: 0; }
.plista-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

/* PRAWA */
.porownanie-right {
    position: relative;
}

/* VS pulsujący */
.porownanie-vs-badge {
    position: absolute;
    top: calc(32px + 125px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FACC15;
    color: #0d0f14;
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 0 0 0 rgba(250,204,21,0.7);
    animation: vs-pulse 2s ease-in-out infinite;
}

@keyframes vs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(250,204,21,0.7); }
    70%  { box-shadow: 0 0 0 14px rgba(250,204,21,0); }
    100% { box-shadow: 0 0 0 0 rgba(250,204,21,0); }
}

/* Karta przechylona */
.pcard {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    overflow: visible;
    transform: rotate(2deg);
    transition: transform 0.4s ease;
    position: relative;
}

.pcard:hover {
    transform: rotate(1deg) scale(1.01);
}

.pcard-divider {
    width: 1px;
    background: rgba(255,255,255,0.07);
    margin: 24px 0;
}

.pcard-col {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Top — ikona lub zdjęcie — wyśrodkowane */
.pcard-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100px;
}

.pcard-bottle-icon {
    font-size: 150px;
    height: 250px;
    color: #dadada;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcard-bottle-icon--yellow { color: #FACC15; }

.pcard-img {
    height: 250px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}

/* Label — wyśrodkowany */
.pcard-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

.pcard-label--yellow {
    color: #FACC15;
    border-bottom-color: rgba(250,204,21,0.15);
}

/* Lista — do lewej */
.pcard-list {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 2.1;
    text-align: left;
}
.pcard-list p, .pcard-list ul, .pcard-list li { margin: 0; padding: 0; list-style: none; }

.pcard-list--inne     { color: #fff; }
.pcard-list--tlocznia { color: #e0e3ef; font-weight: 500; }

/* Responsive */
@media (max-width: 960px) {
    .porownanie-inner { grid-template-columns: 1fr; gap: 56px; padding: 0 28px; }
    .porownanie-vs-badge { top: calc(32px + 125px); left: 50%; }
    .pcard { transform: none; }
}
@media (max-width: 600px) {
    .porownanie-inner { padding: 0 20px; }
    .porownanie { padding: 64px 0 56px; }
    .pcard { grid-template-columns: 1fr; }
    .pcard-divider { width: auto; height: 1px; margin: 0 24px; }
    .porownanie-vs-badge { top: auto; bottom: calc(50% - 26px); }
}

.blog-section {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.blog-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
}

.blog-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 20px;
}

.blog-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1;
}

.blog-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c8cdd8;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 4px;
    transition: color 0.2s, gap 0.2s;
}

.blog-all-link:hover { color: #FACC15; gap: 12px; }

/* GRID */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* CARD */
.blog-card {
    display: flex;
    flex-direction: column;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s;
}

.blog-card:hover {
    border-color: rgba(250,204,21,0.2);
    transform: translateY(-4px);
}

/* Image */
.blog-card-img-link { display: block; text-decoration: none; }

.blog-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #1c2030;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    filter: brightness(0.85);
}

.blog-card:hover .blog-card-img {
    transform: scale(1.05);
    filter: brightness(1);
}

.blog-card-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #FACC15;
    color: #0d0f14;
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 5px;
}

/* Body */
.blog-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
}

.blog-card-meta i { margin-right: 5px; }

.blog-card-title {
    margin: 0;
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.blog-card-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-card-title a:hover { color: #FACC15; }

.blog-card-excerpt {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: #d8dbe8;
    margin: 0;
    flex: 1;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    margin-top: 4px;
    transition: gap 0.2s;
}

.blog-card-link:hover { gap: 11px; }

/* Responsive */
@media (max-width: 960px) {
    .blog-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .blog-inner { padding: 0 28px; }
}

@media (max-width: 600px) {
    .blog-inner { padding: 0 20px; }
    .blog-section { padding: 64px 0 56px; }
}


.newsletter-section {
    width: 100%;
    padding: 100px 60px;
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #6d28d9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.newsletter-inner {
    position: relative;
    z-index: 1;
    max-width: 560px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.newsletter-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1;
}

.newsletter-sub {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    margin: 0;
    border: 1px dashed rgba(255,255,255,0.25);
    padding: 14px 24px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
}

.newsletter-highlight {
    color: #FACC15;
    font-weight: 700;
}

/* Override plugin form styles */
.newsletter-section .ts-newsletter-form {
    max-width: 100%;
    width: 100%;
}

.newsletter-section .ts-newsletter-subscribe-form {
    display: flex;
    gap: 0;
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.newsletter-section .ts-newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 16px 20px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #ffffff;
    min-width: 0;
}

.newsletter-section .ts-newsletter-input::placeholder {
    color: rgba(255,255,255,0.45);
}

.newsletter-section .ts-newsletter-btn {
    background: #FACC15;
    color: #0d0f14;
    border: none;
    padding: 16px 28px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    border-radius: 0;
}

.newsletter-section .ts-newsletter-btn:hover {
    background: #f5c000;
}

.newsletter-section .ts-newsletter-btn:disabled {
    background: #a0a0a0;
    cursor: not-allowed;
}

.newsletter-section .ts-newsletter-message {
    margin-top: 0;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    padding: 12px 18px;
}

.newsletter-section .ts-newsletter-success {
    background: rgba(52,211,153,0.15);
    color: #34d399;
    border: 1px solid rgba(52,211,153,0.3);
}

.newsletter-section .ts-newsletter-error {
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.3);
}

.newsletter-disclaimer {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

@media (max-width: 600px) {
    .newsletter-section { padding: 64px 24px; }
    .newsletter-section .ts-newsletter-subscribe-form { flex-direction: column; border-radius: 10px; }
    .newsletter-section .ts-newsletter-btn { border-radius: 0 0 9px 9px; }
}

.page-hero {
    width: 100%;
    padding: 80px 0 60px;
    background: linear-gradient(135deg, #0d0f1a 0%, #161030 60%, #1a0f2e 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 100% at 100% 50%, rgba(124,58,237,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.page-hero-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    position: relative;
    z-index: 1;
}

.page-hero-title {
    font-family: Oswald, sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 20px;
    line-height: 1;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-size: 13px;
}

.breadcrumbs a {
    color: #d8dbe8;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumbs a:hover { color: #FACC15; }

.bc-sep {
    color: #d8dbe8;
    font-size: 10px;
}

.bc-current {
    color: #FACC15;
    font-weight: 500;
}

/* Content */
.page-content {
    width: 100%;
    padding: 72px 0 100px;
    background: #0d0f1a;
}

.page-content-inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 60px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #8891aa;
}

.page-content-inner h2 {
    font-family: Oswald, sans-serif;
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 48px 0 16px;
}

.page-content-inner h3 {
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #c8cdd8;
    letter-spacing: 0.03em;
    margin: 32px 0 12px;
}

.page-content-inner p { margin: 0 0 18px; }

.page-content-inner a {
    color: #FACC15;
    text-decoration: none;
    border-bottom: 1px solid rgba(250,204,21,0.3);
    transition: border-color 0.2s;
}

.page-content-inner a:hover { border-color: #FACC15; }

.page-content-inner ul,
.page-content-inner ol {
    padding-left: 20px;
    margin: 0 0 18px;
}

.page-content-inner li { margin-bottom: 6px; }

.page-content-inner strong { color: #c8cdd8; font-weight: 600; }

.page-content-inner hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 40px 0;
}

.page-content-inner table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 14px;
}

.page-content-inner th {
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    color: #FACC15;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(250,204,21,0.2);
    text-align: left;
}

.page-content-inner td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #7a8299;
}

@media (max-width: 768px) {
    .page-hero-inner,
    .page-content-inner { padding: 0 24px; }
    .page-hero { padding: 56px 0 40px; }
}

.onas-hero {
    width: 100%;
    min-height: calc(100vh - 72px);
    background: linear-gradient(135deg, #0d0f1a 0%, #161030 45%, #1a0f2e 100%);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 80px 0 60px;
}

.onas-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 70% at 70% 50%, rgba(124,58,237,0.2) 0%, transparent 65%);
    pointer-events: none;
}

.onas-hero-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.onas-hero-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.onas-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250,204,21,0.1);
    border: 1px solid rgba(250,204,21,0.3);
    border-radius: 20px;
    padding: 6px 16px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FACC15;
    width: fit-content;
}

.onas-badge i { font-size: 10px; }

.onas-heading {
    margin: 0;
    display: flex;
    flex-direction: column;
    transform: skewX(-3deg);
    transform-origin: left center;
}

.onas-line {
    display: block;
    font-family: Oswald, sans-serif;
    font-size: clamp(46px, 5.5vw, 76px);
    font-weight: 700;
    line-height: 1.0;
    text-transform: uppercase;
    color: #ffffff;
}

.onas-line .accent { color: #FACC15; }

.onas-tekst {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #7a8299;
    max-width: 400px;
}

.onas-tekst p { margin: 0; }

.onas-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #c0c6d6;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.15);
    transition: color 0.2s, border-color 0.2s;
}

.btn-outline:hover { color: #FACC15; border-color: rgba(250,204,21,0.4); }

/* Zdjęcie */
.onas-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.onas-img-wrap {
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 32px 64px rgba(0,0,0,0.6));
}

.onas-img {
    display: block;
    width: 400px;
    height: 500px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.1);
    object-fit: cover;
}

/* Nakładka fioletowa na zdjęcie */
.onas-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: rgba(90,40,180,0.25);
    pointer-events: none;
}

/* Badge na zdjęciu */
.onas-img-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10,12,22,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px 16px 10px 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    z-index: 2;
    animation: badge-float 3.2s ease-in-out infinite;
}

.badge-top-right    { top: -16px; right: -20px; animation-delay: 0s; }
.badge-bottom-left  { bottom: 36px; left: -24px; animation-delay: 1.6s; }

@media (max-width: 960px) {
    .onas-hero-inner { grid-template-columns: 1fr; padding: 0 28px; gap: 40px; }
    .onas-hero-visual { order: -1; }
    .onas-img { width: 320px; height: 400px; }
}

@media (max-width: 480px) {
    .onas-hero-inner { padding: 0 20px; }
    .onas-img { width: 260px; height: 320px; }
}

.onas-why {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.onas-why-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
}

.onas-why-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 56px;
    text-align: center;
}

.onas-why-heading .accent { color: #FACC15; }

.onas-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.onas-why-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.onas-why-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #d8dbe8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.onas-why-box-title {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.2;
}

.onas-why-box-text {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: #d8dbe8;
}

.onas-why-box-text p { margin: 0; }

@media (max-width: 768px) {
    .onas-why-grid { grid-template-columns: 1fr; gap: 40px; }
    .onas-why-inner { padding: 0 24px; }
}

.onas-process {
    width: 100%;
    padding: 100px 0 80px;
    background: #0b0d18;
}

.onas-process-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
}

.onas-process-label {
    display: block;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 14px;
}

.onas-process-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 56px;
    text-align: center;
    line-height: 1;
}

.onas-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.onas-process-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s, transform 0.25s;
}

.onas-process-card:hover {
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-4px);
}

.onas-process-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #1c2030;
}

.onas-process-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0.75) grayscale(20%);
    transition: filter 0.4s, transform 0.5s;
}

.onas-process-card:hover .onas-process-img {
    filter: brightness(0.9) grayscale(0%);
    transform: scale(1.05);
}

.onas-process-num {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-family: Oswald, sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: rgba(255,255,255,0.06);
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

.onas-process-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.onas-process-card-title {
    font-family: Oswald, sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0;
}

.onas-process-card-text {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #d8dbe8;
}

.onas-process-card-text p { margin: 0; }

@media (max-width: 900px) {
    .onas-process-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .onas-process-inner { padding: 0 24px; }
}

.onas-ekipa {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.onas-ekipa-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

/* LEWA - małe na dole, duże przy prawej krawędzi zasłania połowę małego */
.onas-ekipa-visual {
    position: relative;
    height: 500px;
}

/* Małe zdjęcie — na dole, lewa strona */
.onas-ekipa-img-bg {
    position: absolute;
    bottom: 75px;
    left: 0;
    width: 65%;
    height: 55%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    z-index: 1;
}

.onas-ekipa-img-small {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(30%) brightness(0.7);
}

/* Duże zdjęcie — pełna wysokość, przy prawej krawędzi, z-index wyższy */
.onas-ekipa-img-front {
    position: absolute;
    top: 0;
    right: 0;
    width: 72%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: -12px 12px 48px rgba(0,0,0,0.55);
    z-index: 2;
}

.onas-ekipa-img-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(15%) brightness(0.9);
}

/* PRAWA */
.onas-ekipa-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.onas-ekipa-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1.05;
}

.onas-ekipa-tekst {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #d8dbe8;
}

.onas-ekipa-tekst p { margin: 0 0 12px; }
.onas-ekipa-tekst p:last-child { margin: 0; }

/* Cytat */
.onas-cytat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid #FACC15;
    border-radius: 0 12px 12px 0;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.onas-cytat-text {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #c8cdd8;
    font-style: italic;
}

.onas-cytat-text p { margin: 0; }

.onas-cytat-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.onas-cytat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(250,204,21,0.3);
    flex-shrink: 0;
}

.onas-cytat-author-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onas-cytat-imie {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.onas-cytat-info {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #d8dbe8;
}

@media (max-width: 900px) {
    .onas-ekipa-inner { grid-template-columns: 1fr; gap: 56px; padding: 0 24px; }
    .onas-ekipa-visual { height: 380px; }
}

.onas-stats-bar {
    width: 100%;
    background: linear-gradient(90deg, #5b21b6 0%, #7c3aed 50%, #6d28d9 100%);
    padding: 36px 60px;
}

.onas-stats-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.onas-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.onas-stat-val {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

.onas-stat-val--infinity {
    font-size: clamp(40px, 5vw, 62px);
    line-height: 0.8;
}

.onas-stat-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.onas-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

/* O NAS - FAQ */
.onas-faq {
    width: 100%;
    padding: 80px 0 60px;
    background: #0d0f1a;
}

.onas-faq-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.onas-faq-label {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 4px;
}

.onas-faq-sub {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    margin: 0 0 32px;
}

.onas-faq-list {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    overflow: hidden;
}

.onas-faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.onas-faq-item:last-child { border-bottom: none; }

.onas-faq-q {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    text-align: left;
    transition: background 0.2s;
}

.onas-faq-q:hover { background: rgba(255,255,255,0.03); }

.onas-faq-icon {
    color: #FACC15;
    font-size: 13px;
    flex-shrink: 0;
}

.onas-faq-q span {
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    flex: 1;
}

.onas-faq-arrow {
    color: #fff;
    font-size: 11px;
    flex-shrink: 0;
    transition: transform 0.25s;
}

.onas-faq-item.open .onas-faq-arrow { transform: rotate(180deg); }

.onas-faq-a {
    display: none;
    padding: 0 24px 20px 52px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: #d8dbe8;
}

.onas-faq-a.open { display: block; }
.onas-faq-a p { margin: 0; }
.onas-faq-a strong { color: #c8cdd8; }

.onas-faq-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    margin-top: 20px;
    transition: gap 0.2s;
}

.onas-faq-more:hover { gap: 12px; }

/* O NAS - CTA KOŃCOWE */
.onas-cta-section {
    width: 100%;
    padding: 100px 60px;
    background: #0a0c14 center/cover no-repeat;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.onas-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,12,20,0.75);
    pointer-events: none;
}

.onas-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.onas-cta-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(36px, 5vw, 62px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1;
}

.onas-cta-sub {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #d8dbe8;
    margin: 0;
}

@media (max-width: 768px) {
    .onas-stats-bar { padding: 28px 24px; }
    .onas-stats-inner { flex-wrap: wrap; gap: 24px; }
    .onas-stat-divider { display: none; }
    .onas-faq-inner { padding: 0 20px; }
    .onas-cta-section { padding: 64px 24px; }
}

.kontakt-hero {
    width: 100%;
    padding: 80px 0 100px;
    background: linear-gradient(160deg, #0d0f1a 0%, #12102a 60%, #1a0f2e 100%);
    position: relative;
    overflow: hidden;
}

.kontakt-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 80% 30%, rgba(124,58,237,0.15) 0%, transparent 65%);
    pointer-events: none;
}

.kontakt-hero-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.kontakt-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 16px;
}

.kontakt-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(44px, 6vw, 80px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 1.0;
    margin: 0 0 24px;
    transform: skewX(-3deg);
}

.kontakt-accent { color: #FACC15; }

.kontakt-tekst {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #d8dbe8;
    max-width: 500px;
}

.kontakt-tekst p { margin: 0; }

/* 3 karty */
.kontakt-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.kontakt-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: border-color 0.25s, transform 0.25s;
}

a.kontakt-card:hover {
    border-color: rgba(250,204,21,0.25);
    transform: translateY(-4px);
}

.kontakt-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 8px;
}

.kontakt-card-icon--yellow { background: rgba(250,204,21,0.12); border: 1px solid rgba(250,204,21,0.25); color: #FACC15; }
.kontakt-card-icon--orange { background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.25); color: #f97316; }
.kontakt-card-icon--purple { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.25); color: #a78bfa; }

.kontakt-card-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

.kontakt-card-val {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #c8cdd8;
    line-height: 1.4;
}

.kontakt-card-hint {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #fafafa;
}

/* SEKCJA 2: WSPÓŁPRACA */
.kontakt-wspolpraca {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.kontakt-wspolpraca-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.kontakt-wspolpraca-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
}

.kontakt-wspolpraca-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0;
}

.kontakt-wspolpraca-sub {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #d8dbe8;
    line-height: 1.7;
    margin: 0;
}

.kontakt-wspolpraca-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.kontakt-wspolpraca-box {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.25s, transform 0.25s;
}

.kontakt-wspolpraca-box:hover {
    border-color: rgba(250,204,21,0.15);
    transform: translateY(-3px);
}

.kontakt-wspolpraca-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FACC15;
}

.kontakt-wspolpraca-box-title {
    font-family: Oswald, sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0;
}

.kontakt-wspolpraca-box-text {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #d8dbe8;
}

.kontakt-wspolpraca-box-text p { margin: 0; }

/* Social */
.kontakt-socials {
    display: flex;
    gap: 12px;
}

.kontakt-social {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #d8dbe8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.kontakt-social:hover {
    background: rgba(250,204,21,0.1);
    border-color: rgba(250,204,21,0.3);
    color: #FACC15;
}

@media (max-width: 900px) {
    .kontakt-cards { grid-template-columns: 1fr; }
    .kontakt-wspolpraca-grid { grid-template-columns: 1fr; }
    .kontakt-hero-inner,
    .kontakt-wspolpraca-inner { padding: 0 24px; }
}

/* ============================================================
   KONTAKT — SEKCJA FORMULARZ
   ============================================================ */

.kontakt-form-section {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.kontakt-form-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

/* LEWA */
.kform-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 16px;
    border-left: 4px solid #FACC15;
    padding-left: 16px;
    line-height: 1.1;
}

.kform-sub {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: #d8dbe8;
    margin: 0 0 36px;
}

.kform-boxes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.kform-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.kform-box-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.kform-box-icon--yellow { background: rgba(250,204,21,0.12); border: 1px solid rgba(250,204,21,0.25); color: #FACC15; }
.kform-box-icon--orange { background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.25); color: #f97316; }
.kform-box-icon--purple { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.25); color: #a78bfa; }

.kform-box-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kform-box-body strong {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.kform-box-body div,
.kform-box-body p {
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: #d8dbe8;
    margin: 0;
}

.kform-social-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kform-social-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

.kform-social-hint {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
    margin: 0;
    line-height: 1.6;
}

/* PRAWA — FORMULARZ */
.kform-right {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 40px;
}

.kform-success {
    background: rgba(52,211,153,0.1);
    border: 1px solid rgba(52,211,153,0.25);
    border-radius: 10px;
    padding: 16px 20px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #34d399;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.kform {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kform-hp { display: none !important; }

.kform-row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.kform-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kform-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d8dbe8;
}

.kform-label span { color: #FACC15; }

.kform-input {
    background: #0d0f1a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 13px 16px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #c8cdd8;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.kform-input:focus {
    border-color: rgba(250,204,21,0.4);
}

.kform-input::placeholder { color: #d8dbe8; }

.kform-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23404660' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.kform-textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

.kform-rodo .kform-checkbox-label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
}

.kform-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #FACC15;
    cursor: pointer;
}

.kform-checkbox-label span {
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: #d8dbe8;
}

.kform-checkbox-label a {
    color: #FACC15;
    text-decoration: none;
}

.kform-checkbox-label a:hover { text-decoration: underline; }

.req { color: #FACC15; }

.kform-submit {
    width: 100%;
    padding: 16px;
    background: #FACC15;
    color: #0d0f14;
    border: none;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.2s, transform 0.15s;
    margin-top: 4px;
}

.kform-submit:hover {
    background: #f5c000;
    transform: translateY(-2px);
}

.kform-footer-note {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #d8dbe8;
    text-align: center;
    margin: 0;
}

@media (max-width: 960px) {
    .kontakt-form-inner { grid-template-columns: 1fr; padding: 0 24px; gap: 48px; }
    .kform-row--2 { grid-template-columns: 1fr; }
    .kform-right { padding: 28px 20px; }
}

.kontakt-mapa {
    width: 100%;
    padding: 80px 0 60px;
    background: #0a0c14;
}

.kontakt-mapa-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.kontakt-mapa-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0;
    text-align: center;
}

.kontakt-mapa-sub {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    line-height: 1.7;
    text-align: center;
    max-width: 480px;
    margin-bottom: 8px;
}

.kontakt-mapa-sub p { margin: 0; }

.kontakt-mapa-wrap {
    width: 100%;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
}

.kontakt-mapa-iframe {
    width: 100%;
    height: 420px;
    border: none;
    display: block;
    filter: invert(90%) hue-rotate(180deg) brightness(0.85) contrast(1.1);
}

/* KONTAKT — FAQ */
.kontakt-faq {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.kontakt-faq-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kontakt-faq-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 12px;
}

.kontakt-faq-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 12px;
    text-align: center;
}

.kontakt-faq-sub {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    text-align: center;
    margin: 0 0 40px;
    line-height: 1.65;
}

.kontakt-faq-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kontakt-faq-item {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.kontakt-faq-item.open {
    border-color: rgba(250,204,21,0.2);
}

.kontakt-faq-q {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    text-align: left;
}

.kontakt-faq-q span {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

.kontakt-faq-arrow {
    color: #fff;
    font-size: 11px;
    flex-shrink: 0;
    transition: transform 0.25s;
}

.kontakt-faq-item.open .kontakt-faq-arrow { transform: rotate(180deg); }

.kontakt-faq-a {
    display: none;
    padding: 0 20px 18px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: #d8dbe8;
}

.kontakt-faq-a p { margin: 0; }
.kontakt-faq-a strong { color: #c8cdd8; }

/* KONTAKT — CTA KOŃCOWE */
.kontakt-cta {
    width: 100%;
    padding: 80px 60px;
    background: linear-gradient(160deg, #1a0f2e 0%, #12102a 50%, #0d0f1a 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.kontakt-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(124,58,237,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.kontakt-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.kontakt-cta-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(32px, 4.5vw, 58px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    line-height: 1;
}

.kontakt-cta-sub {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin: 0;
    line-height: 1.7;
    border: 1px dashed rgba(255,255,255,0.15);
    padding: 10px 20px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}

.kontakt-cta-sub p { margin: 0; }

.kontakt-cta-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .kontakt-mapa-inner,
    .kontakt-faq-inner { padding: 0 20px; }
    .kontakt-mapa-iframe { height: 280px; }
    .kontakt-cta { padding: 64px 24px; }
}

/* ============================================================
   KONTAKT — WYSIWYG CONTENT STYLES
   ============================================================ */

/* FAQ sub */
.kontakt-faq-sub p {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    line-height: 1.65;
    margin: 0;
    text-align: center;
}

/* FAQ odpowiedź */
.kontakt-faq-a p {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    line-height: 1.75;
    margin: 0 0 10px;
}

.kontakt-faq-a p:last-child { margin-bottom: 0; }

.kontakt-faq-a strong { color: #c8cdd8; font-weight: 600; }

.kontakt-faq-a a { color: #FACC15; text-decoration: none; }
.kontakt-faq-a a:hover { text-decoration: underline; }

.kontakt-faq-a ul, .kontakt-faq-a ol {
    padding-left: 18px;
    margin: 8px 0;
    color: #d8dbe8;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.75;
}

/* CTA sub */
.kontakt-cta-sub p {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
    margin: 0;
}

/* Kform box body wysiwyg */
.kform-box-body div p,
.kform-box-body div li {
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: #d8dbe8;
    margin: 0;
}

/* Kontakt wspolpraca box */
.kontakt-wspolpraca-box-text p {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #d8dbe8;
    margin: 0 0 8px;
}
.kontakt-wspolpraca-box-text p:last-child { margin: 0; }

.sklep-hero {
    width: 100%;
    padding: 56px 0 48px;
    background: linear-gradient(135deg, #0d0f1a 0%, #12102a 60%, #1a0f2e 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sklep-hero-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.sklep-hero-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(36px, 5vw, 66px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin: 8px 0 10px;
    line-height: 1;
}

.sklep-hero-sub {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #d8dbe8;
    margin: 0;
    line-height: 1.6;
}

.sklep-hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.sklep-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 28px;
}

.sklep-stat-val {
    font-family: Oswald, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

.sklep-stat-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}

.sklep-stat-div {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.08);
}

/* TOOLBAR */
.sklep-toolbar {
    width: 100%;
    background: #0a0c14;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 14px 0;
}

.sklep-toolbar-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sklep-count {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #fff;
}

.sklep-count p { margin: 0; }

.sklep-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sklep-sort-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}

/* WooCommerce ordering select */
.woocommerce-ordering select,
.sklep-toolbar .woocommerce-ordering select {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #c8cdd8;
    font-family: Inter, sans-serif;
    font-size: 12px;
    padding: 8px 32px 8px 12px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23404660' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

/* GRID */
.sklep-grid-section {
    width: 100%;
    padding: 48px 0 80px;
    background: #0d0f1a;
}

.sklep-grid-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
}

/* Paginacja */
.sklep-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.sklep-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sklep-pagination .page-numbers {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    transition: all 0.2s;
}

.sklep-pagination .page-numbers.current,
.sklep-pagination .page-numbers:hover {
    background: #FACC15;
    color: #0d0f14;
    border-color: #FACC15;
}

.sklep-empty {
    padding: 80px 60px;
    text-align: center;
    font-family: Inter, sans-serif;
    color: #fff;
}

/* FAQ */
.sklep-faq {
    width: 100%;
    padding: 60px 0 80px;
    background: #0a0c14;
}

.sklep-faq-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
}

.sklep-faq-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0 0 28px;
    text-align: center;
}

.sklep-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.sklep-faq-box {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sklep-faq-box-q {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.sklep-faq-box-q i { color: #FACC15; font-size: 14px; }

.sklep-faq-box-a {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #d8dbe8;
    margin: 0;
}

/* Responsive */
@media (max-width: 960px) {
    .sklep-hero-inner,
    .sklep-toolbar-inner,
    .sklep-grid-inner,
    .sklep-faq-inner { padding: 0 24px; }
    .sklep-hero-inner { flex-direction: column; align-items: flex-start; }
    .sklep-faq-grid { grid-template-columns: 1fr; }
    .produkty-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .produkty-grid { grid-template-columns: 1fr; }
}

/* Fix: tytuł karty produktu — link */
.produkty-card-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
}

.produkty-card-title a:hover { color: #FACC15; }

/* Fix: toolbar wycentrowane */
.sklep-toolbar-inner {
    justify-content: center;
    gap: 12px;
}

.sklep-count { display: none; }

/* Fix: sortowanie — wyrównanie verticalne */
.sklep-toolbar-inner {
    justify-content: space-between;
}

.sklep-count { display: block; }

.sklep-toolbar-right {
    align-items: center;
}

.woocommerce-ordering {
    margin: 0 !important;
    line-height: 1;
}

.woocommerce-ordering select {
    vertical-align: middle;
    line-height: 1;
}

.sklep-sort-label {
    line-height: 1;
}

@media (max-width: 960px) {
    .sklep-hero-inner,
    .sklep-toolbar-inner,
    .sklep-grid-inner,
    .sklep-faq-inner {
        padding: 0 20px;
    }

    .sklep-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .sklep-hero-stats {
        width: 100%;
        justify-content: flex-start;
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.06);
    }

    .sklep-stat:first-child {
        padding-left: 0;
    }

    .sklep-faq-grid {
        grid-template-columns: 1fr;
    }

    .produkty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sklep-hero {
        padding: 28px 0 24px;
    }

    /* Statystyki — w rząd bez separatorów */
    .sklep-hero-stats {
        flex-wrap: wrap;
    }

    .sklep-stat {
        padding: 10px 16px 10px 0;
        align-items: flex-start;
    }

    .sklep-stat-div {
        display: none;
    }

    .sklep-stat-val {
        font-size: 22px;
    }

    /* Toolbar — count nad selectem */
    .sklep-toolbar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sklep-toolbar-right {
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .woocommerce-ordering {
        flex: 1;
    }

    .woocommerce-ordering select,
    .sklep-toolbar .woocommerce-ordering select {
        width: 100%;
        max-width: 100%;
        font-size: 13px;
        padding: 10px 36px 10px 12px;
    }

    .produkty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .produkty-grid {
        grid-template-columns: 1fr;
    }
}

.sp-breadcrumbs {
    width: 100%;
    padding: 16px 60px;
    background: #0a0c14;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sp-breadcrumbs-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
}

.sp-breadcrumbs a { color: #fff; text-decoration: none; transition: color .2s; }
.sp-breadcrumbs a:hover { color: #FACC15; }

/* MAIN */
.sp-main {
    width: 100%;
    padding: 56px 0 80px;
    background: #0d0f1a;
}

.sp-main-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* GALERIA */
.sp-gallery-main {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    aspect-ratio: 1/1;
}

#sp-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .3s;
}

.sp-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.sp-thumb {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.06);
    background: none;
    padding: 0;
    cursor: pointer;
    transition: border-color .2s;
    flex-shrink: 0;
}

.sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-thumb--active { border-color: #FACC15; }

/* INFO */
.sp-cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sp-cat-link {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sp-cat-link i { font-size: 9px; }

.sp-title {
    font-family: Oswald, sans-serif;
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
    line-height: 1.05;
}

/* Gwiazdki */
.sp-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sp-stars i, .sp-avg-stars i { color: #FACC15; font-size: 13px; }
.sp-stars i.fa-regular, .sp-avg-stars i.fa-regular { color: #d8dbe8; }

.sp-rating-val {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FACC15;
}

.sp-rating-count, .sp-add-review {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
    text-decoration: none;
    transition: color .2s;
}

.sp-rating-count:hover, .sp-add-review:hover { color: #FACC15; }

.sp-rating-sep { color: #d8dbe8; }

.sp-quote {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #d8dbe8;
    border-left: 3px solid rgba(250,204,21,0.3);
    padding: 10px 16px;
    margin: 0 0 20px;
    font-style: italic;
    background: rgba(255,255,255,0.02);
    border-radius: 0 8px 8px 0;
}

/* Cena */
.sp-price-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.sp-price {
    font-family: Oswald, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

.sp-price .woocommerce-Price-amount { font-family: inherit; font-size: inherit; color: inherit; }

.sp-stock {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
}

.sp-stock--in { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
.sp-stock--out { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

/* Warianty */
.sp-variations { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }

.sp-variation-group { display: flex; flex-direction: column; gap: 10px; }

.sp-variation-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d8dbe8;
}

.sp-variation-options { display: flex; gap: 8px; flex-wrap: wrap; }

.sp-var-btn {
    padding: 9px 18px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: #12151f;
    color: #8891aa;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.sp-var-btn:hover { border-color: rgba(250,204,21,0.4); color: #FACC15; }
.sp-var-btn--active { border-color: #FACC15; color: #FACC15; background: rgba(250,204,21,0.08); }

/* Formularz dodaj do koszyka */
.sp-add-form { margin-bottom: 28px; }

.sp-form-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sp-qty {
    display: flex;
    align-items: center;
    background: #12151f;
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.sp-qty-btn {
    width: 40px;
    height: 48px;
    background: transparent;
    border: none;
    color: #d8dbe8;
    font-size: 18px;
    cursor: pointer;
    transition: color .2s, background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-qty-btn:hover { color: #FACC15; background: rgba(250,204,21,0.06); }

.sp-qty-input {
    width: 52px;
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.sp-add-btn {
    flex: 1;
    height: 50px;
    background: #FACC15;
    color: #0d0f14;
    border: none;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .2s, transform .15s;
}

.sp-add-btn:hover { background: #f5c000; transform: translateY(-2px); }

/* USP */
.sp-usp {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 24px;
}

.sp-usp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #d8dbe8;
    flex: 1;
}

.sp-usp-img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }

.sp-usp-icon {
    font-size: 24px;
    color: #FACC15;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

/* Meta */
.sp-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.sp-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 4px;
}

.sp-meta-item i { font-size: 12px; }

.sp-meta-row {
    display: flex;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-size: 12px;
}

.sp-meta-k { color: #fff; flex-shrink: 0; min-width: 100px; }
.sp-meta-v { color: #7a8299; }
.sp-meta-v a { color: #7a8299; text-decoration: none; transition: color .2s; }
.sp-meta-v a:hover { color: #FACC15; }

/* Share */
.sp-share { display: flex; gap: 8px; }

.sp-share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #d8dbe8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-decoration: none;
    transition: all .2s;
}

.sp-share-btn:hover { background: rgba(250,204,21,0.1); border-color: rgba(250,204,21,0.3); color: #FACC15; }

/* TABY */
.sp-tabs-section {
    width: 100%;
    background: #0a0c14;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.sp-tabs-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
}

.sp-tabs-nav {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.sp-tabs-nav::-webkit-scrollbar { display: none; }

.sp-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 18px 24px;
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
    margin-bottom: -1px;
}

.sp-tab-btn:hover { color: #c8cdd8; }
.sp-tab-btn--active { color: #FACC15; border-bottom-color: #FACC15; }

.sp-tab-panel { display: none; }
.sp-tab-panel--active { display: block; }

.sp-tab-content {
    padding: 56px 0 80px;
}

.sp-tab-empty {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 40px 0;
}

/* Tab: Opis */
.sp-opis-grid {
    display: block;
}

.sp-opis-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 14px;
}

.sp-opis-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin: 0 0 24px;
}

.sp-opis-accent { color: #7a8299; }

.sp-opis-body { font-family: Inter, sans-serif; font-size: 14px; line-height: 1.8; color: #7a8299; }
.sp-opis-body p { margin: 0 0 14px; }
.sp-opis-body p:last-child { margin: 0; }
.sp-opis-body strong { color: #c8cdd8; font-weight: 600; }
.sp-opis-body ul { padding-left: 0; list-style: none; margin: 16px 0; }
.sp-opis-body ul li { padding: 6px 0 6px 24px; position: relative; color: #8891aa; font-size: 13px; }
.sp-opis-body ul li::before { content: '✓'; position: absolute; left: 0; color: #FACC15; font-weight: 700; }
.sp-opis-body blockquote {
    background: #12151f;
    border-left: 3px solid #FACC15;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 20px 0;
    font-style: italic;
    color: #8891aa;
    font-size: 13px;
}

.sp-opis-img-wrap { border-radius: 16px; overflow: hidden; }
.sp-opis-img { width: 100%; display: block; object-fit: cover; border-radius: 16px; }

/* Tab: Wartości odżywcze */
.sp-wartosci, .sp-jakuzywac {
    max-width: 800px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #7a8299;
}

.sp-wartosci p, .sp-jakuzywac p { margin: 0 0 14px; }
.sp-wartosci strong, .sp-jakuzywac strong { color: #c8cdd8; }

.sp-wartosci table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.sp-wartosci th {
    font-family: Oswald, sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FACC15;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(250,204,21,0.15);
    text-align: left;
}

.sp-wartosci td {
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #7a8299;
    font-size: 13px;
}

.sp-wartosci tr:last-child td { border-bottom: none; }

/* OPINIE */
.sp-reviews-summary {
    display: flex;
    gap: 48px;
    align-items: center;
    margin-bottom: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
}

.sp-reviews-avg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sp-avg-num {
    font-family: Oswald, sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

.sp-avg-stars { display: flex; gap: 4px; }

.sp-avg-label {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #fff;
}

.sp-reviews-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.sp-reviews-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
}

.sp-rb-label { width: 40px; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sp-rb-label i { color: #FACC15; font-size: 10px; }

.sp-rb-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}

.sp-rb-fill { height: 100%; background: #FACC15; border-radius: 4px; transition: width .4s; }

.sp-rb-cnt { width: 20px; text-align: right; flex-shrink: 0; }

/* Lista opinii */
.sp-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 48px;
}

.sp-review-item {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-review-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(250,204,21,0.12);
    border: 1px solid rgba(250,204,21,0.2);
    color: #FACC15;
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.sp-review-author {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.sp-review-date {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
}

.sp-review-stars { display: flex; gap: 3px; }
.sp-review-stars i { color: #FACC15; font-size: 12px; }
.sp-review-stars i.fa-regular { color: #d8dbe8; }

.sp-review-text {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #7a8299;
    margin: 0;
}

/* Formularz opinii */
.sp-review-form-wrap {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 32px;
}

.sp-review-form-title {
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.06em;
    margin: 0 0 24px;
}

.sp-review-form-stars {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.sp-review-form-stars-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d8dbe8;
}

/* CSS-only star rating */
.ts-star-rating {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.ts-star-rating input { display: none; }

.ts-star-rating .star-label {
    cursor: pointer;
    color: #d8dbe8;
    font-size: 20px;
    transition: color .15s;
}

.ts-star-rating input:checked ~ .star-label,
.ts-star-rating .star-label:hover,
.ts-star-rating .star-label:hover ~ .star-label {
    color: #FACC15;
}

.sp-review-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

.ts-review-message {
    border-radius: 8px;
    padding: 12px 16px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    margin-bottom: 16px;
}

.ts-review-message.success { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
.ts-review-message.error { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

/* RELATED */
.sp-related {
    width: 1340px;
    margin: 0 auto;
    padding: 80px 0 60px;
    background: #0d0f1a;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.sp-related-inner { width: 100%; padding: 0 60px; }

.sp-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
}

.sp-related-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0;
}

.sp-related-all {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s;
}

.sp-related-all:hover { gap: 10px; }

/* Stats bar */
.sp-stats-bar {
    width: 1340px;
    margin: 0 auto;
    background: #0a0c14;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 40px 60px;
}

.sp-stats-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.sp-stat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }

.sp-stat-val {
    font-family: Oswald, sans-serif;
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

.sp-stat-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

.sp-stat-div { width: 1px; height: 40px; background: rgba(255,255,255,0.06); flex-shrink: 0; }

@media (max-width: 960px) {
    .sp-breadcrumbs {
        padding: 12px 20px;
    }

    .sp-main-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 0 20px;
    }

    .sp-tabs-inner {
        padding: 0 20px;
    }

    .sp-opis-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sp-related-inner {
        padding: 0 20px;
    }

    .sp-stats-bar {
        padding: 28px 20px;
    }

    .sp-stat-div {
        display: none;
    }

    .sp-review-form-row {
        grid-template-columns: 1fr;
    }

    .sp-usp {
        gap: 12px;
        flex-wrap: wrap;
    }

    .sp-usp-item {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
}

@media (max-width: 640px) {
    /* Breadcrumbs — ukryj środkowe elementy, zostaw tylko Home i bieżący */
    .sp-breadcrumbs {
        padding: 10px 16px;
        overflow: hidden;
    }

    .sp-breadcrumbs-inner {
        font-size: 11px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    /* Taby — scrollable, mniejszy padding */
    .sp-tabs-nav {
        gap: 0;
    }

    .sp-tab-btn {
        padding: 14px 16px;
        font-size: 12px;
        letter-spacing: 0.05em;
    }

    .sp-tab-content {
        padding: 36px 0 60px;
    }

    /* Galeria */
    .sp-gallery-thumbs {
        gap: 8px;
    }

    .sp-thumb {
        width: 56px;
        height: 56px;
    }

    /* Cena i stock w kolumnie */
    .sp-price-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .sp-price {
        font-size: 28px;
    }

    /* Warianty — przyciski na pełną szerokość */
    .sp-variation-options {
        gap: 6px;
    }

    .sp-var-btn {
        flex: 1 1 calc(50% - 3px);
        text-align: center;
        padding: 10px 12px;
    }

    /* Formularz dodaj do koszyka */
    .sp-form-row {
        flex-direction: column;
        gap: 10px;
    }

    .sp-qty {
        width: 100%;
        justify-content: space-between;
    }

    .sp-qty-btn {
        flex: 1;
        height: 52px;
    }

    .sp-qty-input {
        flex: 2;
        font-size: 17px;
    }

    .sp-add-btn {
        width: 100%;
        height: 54px;
        padding: 20px;
        font-size: 15px;
    }

    /* USP — 2 w rzędzie */
    .sp-usp {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 16px 0;
    }

    .sp-usp-item {
        flex: unset;
        font-size: 10px;
    }

    /* Meta */
    .sp-meta-k {
        min-width: 80px;
    }

    /* Stats bar — 2 kolumny */
    .sp-stats-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .sp-stat-item {
        flex: unset;
    }

    /* Opinie — summary w kolumnie */
    .sp-reviews-summary {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }

    .sp-reviews-avg {
        flex-direction: row;
        gap: 14px;
        align-items: center;
    }

    .sp-avg-num {
        font-size: 44px;
    }

    /* Formularz opinii */
    .sp-review-form-wrap {
        padding: 20px 16px;
    }

    /* Related */
    .sp-related {
        width: 100%;
        max-width: 100%;
        padding: 52px 0 40px;
    }

    .sp-related-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 24px;
    }
}

@media (max-width: 400px) {
    .sp-var-btn {
        flex: 1 1 100%;
    }

    .sp-usp {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .sp-stats-inner {
        grid-template-columns: 1fr;
    }

    .sp-tab-btn {
        padding: 12px 12px;
        font-size: 11px;
    }
}

.cart-page {
    width: 100%;
    min-height: 100vh;
    background: #0d0f1a;
    padding: 56px 0 100px;
}

.cart-page-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* HEADING */
.cart-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 20px;
    flex-wrap: wrap;
}

.cart-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin: 0 0 6px;
    line-height: 1;
}

.cart-subline {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #fff;
    font-style: italic;
    margin: 0;
}

.cart-total-badge {
    text-align: right;
    flex-shrink: 0;
}

.ctb-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 4px;
}

.ctb-val {
    font-family: Oswald, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

/* CART ITEMS */
.cart-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }

.cart-item {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    transition: border-color .2s;
}

.cart-item:hover { border-color: rgba(255,255,255,0.12); }

.cart-item-thumb {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d0f1a;
}

.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.cart-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.cart-item-name {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-decoration: none;
    transition: color .2s;
    line-height: 1.2;
}

.cart-item-name:hover { color: #FACC15; }

.cart-item-remove {
    background: transparent;
    border: none;
    color: #d8dbe8;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
    transition: color .2s;
    line-height: 1;
}

.cart-item-remove:hover { color: #f87171; }

.cart-item-variant {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #d8dbe8;
}

.cart-item-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(250,204,21,0.1);
    color: #FACC15;
    border: 1px solid rgba(250,204,21,0.2);
    border-radius: 20px;
    padding: 3px 10px;
    width: fit-content;
}

.cart-item-tag i { font-size: 9px; }

.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 12px;
}

/* QTY */
.cart-item-qty {
    display: flex;
    align-items: center;
    background: #0d0f1a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.ciq-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #d8dbe8;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s, background .2s;
}

.ciq-btn:hover { color: #FACC15; background: rgba(250,204,21,0.06); }

.ciq-input {
    width: 44px;
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    -moz-appearance: textfield;
}

.ciq-input::-webkit-inner-spin-button,
.ciq-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Prices */
.cart-item-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

.cip-old {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
    text-decoration: line-through;
}

.cip-main {
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.cip-unit {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #d8dbe8;
}

/* UPSELL */
.cart-upsell { margin-top: 8px; }

.cart-upsell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cart-upsell-title {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
}

.cart-upsell-title small {
    font-size: 11px;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-family: Inter, sans-serif;
}

.cart-upsell-sub {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

.cart-upsell-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cart-upsell-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-upsell-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d0f1a;
}

.cart-upsell-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cart-upsell-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.cart-upsell-name {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.cart-upsell-name:hover { color: #FACC15; }

.cart-upsell-desc {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-upsell-price {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #FACC15;
}

.cart-upsell-price .woocommerce-Price-amount { font-family: inherit; font-size: inherit; color: inherit; }

.cart-upsell-add {
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.3);
    color: #a78bfa;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all .2s;
    flex-shrink: 0;
}

.cart-upsell-add:hover { background: rgba(124,58,237,0.3); color: #c4b5fd; }
.cart-upsell-add:disabled { opacity: .5; cursor: not-allowed; }

/* EMPTY */
.cart-empty {
    text-align: center;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cart-empty i { font-size: 48px; color: #d8dbe8; }
.cart-empty p { font-family: Inter, sans-serif; font-size: 14px; color: #d8dbe8; margin: 0; }

/* SUMMARY (RIGHT) */
.cart-right { position: sticky; top: 100px; }

.cart-summary {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-summary-title {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cart-field-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 8px;
}

.cart-coupon-row {
    display: flex;
    gap: 8px;
}

.cart-input {
    flex: 1;
    background: #0d0f1a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #c8cdd8;
    font-family: Inter, sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 0 14px;
    height: 40px;
    outline: none;
    transition: border-color .2s;
}

.cart-input::placeholder { color: #d8dbe8; }
.cart-input:focus { border-color: rgba(250,204,21,0.3); }

.cart-coupon-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #FACC15;
    border: none;
    color: #0d0f14;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
}

.cart-coupon-btn:hover { background: #f5c000; }

.cart-coupon-msg {
    margin-top: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
}

.cart-coupon-msg.success { background: rgba(52,211,153,0.1); color: #34d399; }
.cart-coupon-msg.error   { background: rgba(239,68,68,0.1); color: #f87171; }

/* Free shipping bar */
.cart-free-bar { display: flex; flex-direction: column; gap: 8px; margin-top: 0; }

.cart-free-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #c8cdd8;
}

.cart-free-option i { color: #FACC15; font-size: 13px; }

.cart-free-option--active i { color: #34d399; }
.cart-free-option--active { color: #34d399; }

.cart-free-price { margin-left: auto; font-weight: 700; color: #d8dbe8; }

.cart-free-progress {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}

.cart-free-fill { height: 100%; background: #FACC15; border-radius: 4px; transition: width .4s; }

.cart-free-hint {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
    text-align: right;
}

.cart-free-hint strong { color: #FACC15; }

/* Breakdown */
.cart-breakdown { display: flex; flex-direction: column; gap: 8px; }

.cart-breakdown-row {
    display: flex;
    justify-content: space-between;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
}

.cart-breakdown-row--discount span:last-child { color: #34d399; }
.cart-breakdown-row--muted { opacity: .5; }

/* Total */
.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.cart-total-label {
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
}

.cart-total-val {
    font-family: Oswald, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

.cart-vat-note {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #d8dbe8;
    text-align: right;
    display: block;
    margin-top: -12px;
}

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    background: #FACC15;
    color: #0d0f14;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, transform .15s;
}

.cart-checkout-btn:hover { background: #f5c000; transform: translateY(-2px); }

/* Payment icons */
.cart-payment-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
}

.cart-payment-icons i { font-size: 24px; color: #fff; }

.cart-blik {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff;
    border: 1px solid #d8dbe8;
    border-radius: 4px;
    padding: 2px 6px;
}

/* Bottom quote */
.cart-bottom-quote {
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #d8dbe8;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed rgba(255,255,255,0.06);
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 1100px) {
    .cart-page-inner { grid-template-columns: 1fr; padding: 0 24px; }
    .cart-right { position: static; }
}

@media (max-width: 600px) {
    .cart-upsell-grid { grid-template-columns: 1fr; }
    .cart-item-bottom { flex-direction: column; align-items: flex-start; }
    .cart-item-prices { align-items: flex-start; }
}

/* Cart: zastosowane kupony */
.cart-applied-coupons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.cart-applied-coupon {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(52,211,153,0.07);
    border: 1px solid rgba(52,211,153,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: Inter, sans-serif;
    font-size: 12px;
}

.cart-applied-coupon i.fa-tag { color: #34d399; font-size: 11px; }

.cac-code {
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #34d399;
    flex: 1;
}

.cac-save {
    color: #34d399;
    font-weight: 700;
    font-size: 12px;
}

.cac-remove {
    background: transparent;
    border: none;
    color: rgba(52,211,153,0.4);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    transition: color .2s;
    line-height: 1;
    flex-shrink: 0;
}

.cac-remove:hover { color: #f87171; }

/* Globalne zabezpieczenie przed overflow */
.cart-page,
.cart-page-inner,
.cart-items,
.cart-item,
.cart-upsell,
.cart-summary {
    box-sizing: border-box;
}

.cart-item-name,
.cart-upsell-name,
.cart-upsell-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 1100px) {
    .cart-page-inner {
        grid-template-columns: 1fr;
        padding: 0 24px;
    }

    .cart-right {
        position: static;
    }

    .cart-upsell-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cart-page {
        padding: 36px 0 80px;
    }

    .cart-page-inner {
        padding: 0 16px;
        gap: 28px;
    }

    /* Heading */
    .cart-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 24px;
    }

    .cart-total-badge {
        text-align: left;
    }

    .ctb-val {
        font-size: 24px;
    }

    /* Cart item */
    .cart-item {
        padding: 16px;
        gap: 12px;
    }

    .cart-item-thumb {
        width: 64px;
        height: 64px;
        border-radius: 8px;
    }

    .cart-item-name {
        font-size: 14px;
    }

    .cart-item-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cart-item-prices {
        align-items: flex-start;
    }

    .cip-main {
        font-size: 17px;
    }

    /* Upsell */
    .cart-upsell-grid {
        grid-template-columns: 1fr;
    }

    .cart-upsell-card {
        padding: 12px;
    }

    /* Summary */
    .cart-summary {
        padding: 20px 16px;
        gap: 16px;
    }

    .cart-total-val {
        font-size: 24px;
    }

    .cart-checkout-btn {
        height: 54px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    /* Item — obrazek mniejszy, info w pełnej szerokości */
    .cart-item {
        flex-wrap: wrap;
        padding: 14px;
        gap: 10px;
    }

    .cart-item-thumb {
        width: 56px;
        height: 56px;
    }

    .cart-item-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .cart-item-top {
        align-items: flex-start;
    }

    .cart-item-name {
        font-size: 13px;
        white-space: normal;
        word-break: break-word;
    }

    /* Ilość i cena obok siebie w jednej linii */
    .cart-item-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }

    .cart-item-prices {
        align-items: flex-end;
    }

    .ciq-btn {
        width: 32px;
        height: 32px;
    }

    .ciq-input {
        width: 36px;
        font-size: 13px;
    }

    /* Upsell — nie wystawaj */
    .cart-upsell-card {
        min-width: 0;
        overflow: hidden;
    }

    .cart-upsell-info {
        min-width: 0;
        overflow: hidden;
    }

    .cart-upsell-name,
    .cart-upsell-desc {
        max-width: 100%;
    }

    /* Kupon */
    .cart-coupon-row {
        gap: 6px;
    }

    .cart-input {
        font-size: 13px;
        min-width: 0;
    }

    /* Payment icons */
    .cart-payment-icons {
        gap: 8px;
        flex-wrap: wrap;
    }

    .cart-payment-icons i {
        font-size: 20px;
    }
}

.checkout-page {
    width: 100%;
    min-height: 100vh;
    background: #0d0f1a;
    padding: 56px 0 100px;
}

.checkout-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* HEADING */
.checkout-heading-wrap { margin-bottom: 36px; }

.checkout-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 6px;
    line-height: 1;
    text-align: center;
}

.checkout-subline {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #fff;
    font-style: italic;
    margin: 0;
    text-align: center;
}

/* SECTIONS */
.co-section {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 16px;
}

.co-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.co-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FACC15;
    color: #0d0f14;
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.co-section-title {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin: 0;
}

/* FIELDS */
.co-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.co-field { display: flex; flex-direction: column; gap: 6px; }
.co-field--full { grid-column: 1 / -1; }
.co-field--narrow { max-width: 160px; }

.co-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}

.co-label span { color: #FACC15; }

.co-input {
    background: #0d0f1a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #c8cdd8;
    font-family: Inter, sans-serif;
    font-size: 13px;
    padding: 12px 14px;
    outline: none;
    transition: border-color .2s;
    width: 100%;
    box-sizing: border-box;
}

.co-input::placeholder { color: #d8dbe8; }
.co-input:focus { border-color: rgba(250,204,21,0.35); }
.co-input--error { border-color: rgba(239,68,68,0.5) !important; }

.co-field-error {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #f87171;
    display: none;
}

.co-field-hint {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #d8dbe8;
    margin: 0;
}

/* Checkboxes */
.co-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
    cursor: pointer;
    line-height: 1.5;
}

.co-checkbox { display: none; }

.co-checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    margin-top: 1px;
    background: #0d0f1a;
}

.co-checkbox:checked + .co-checkmark {
    background: #FACC15;
    border-color: #FACC15;
}

.co-checkbox:checked + .co-checkmark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: 2px solid #0d0f14;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
    display: block;
}

.co-marketing-check { margin-top: -4px; }

/* Faktura VAT */
.co-vat-toggle { position: relative; }
.co-vat-arrow {
    margin-left: auto;
    color: #fff;
    font-size: 12px;
    transition: transform .25s;
}

.co-vat-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* SHIPPING */
.co-shipping-methods { display: flex; flex-direction: column; gap: 10px; }

.co-shipping-option {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0d0f1a;
    border: 1.5px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color .2s;
}

.co-shipping-option:hover { border-color: rgba(250,204,21,0.25); }
.co-shipping-option--active { border-color: #FACC15; }

.co-shipping-radio { display: none; }

.co-shipping-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s;
}

.co-shipping-option--active .co-shipping-dot {
    border-color: #FACC15;
    background: radial-gradient(circle, #FACC15 40%, transparent 40%);
}

.co-shipping-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #d8dbe8;
    flex-shrink: 0;
}

.co-shipping-option--active .co-shipping-icon { color: #FACC15; background: rgba(250,204,21,0.08); }

.co-shipping-info { flex: 1; }

.co-shipping-name {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    display: block;
}

.co-shipping-sub {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
    display: block;
    margin-top: 2px;
}

.co-shipping-price {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.co-no-shipping {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    text-align: center;
    padding: 20px 0;
}

/* PAYMENT */
.co-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.co-payment-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0d0f1a;
    border: 1.5px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 18px 14px;
    cursor: pointer;
    transition: border-color .2s;
    position: relative;
    text-align: center;
}

.co-payment-option:hover { border-color: rgba(250,204,21,0.25); }
.co-payment-option--active { border-color: #FACC15; }

.co-payment-radio { display: none; }

.co-payment-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    transition: border-color .2s;
}

.co-payment-option--active .co-payment-dot {
    border-color: #FACC15;
    background: radial-gradient(circle, #FACC15 38%, transparent 38%);
}

.co-payment-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 26px;
    color: #c8cdd8;
    min-height: 32px;
}

.co-payment-icon-wrap .fa-brands { color: #c8cdd8; }

.co-payment-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #d8dbe8;
    text-transform: uppercase;
}

/* Payment logos */
.co-pay-logo {
    font-family: Inter, sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 4px;
}

.co-pay-logo--blik { background: #0d0f1a; color: #ffffff; border: 2px solid #ffffff; font-size: 14px; }
.co-pay-logo--payu { color: #1dc8ff; }
.co-pay-logo--p24  { color: #d2232a; }

.co-payment-gateway-fields {
    margin-top: 8px;
    padding: 16px;
    background: #0d0f1a;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #7a8299;
}

/* ZGODY */
.co-consents {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 16px;
}

.co-consents .co-checkbox-label { font-size: 11px; color: #fff; }
.co-consents a { color: #FACC15; text-decoration: none; }
.co-consents a:hover { text-decoration: underline; }

/* SUMMARY (RIGHT) */
.checkout-right { position: sticky; top: 100px; }

.co-summary {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
}

.co-summary-title {
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Order items */
.co-order-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }

.co-order-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.co-oi-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d0f1a;
    position: relative;
}

.co-oi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cos-badge {
    position: absolute;
    top: 0;
    left: 0;
    font-family: Inter, sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 0 0 4px 0;
}

.cos-badge--orange { background: #f97316; color: #fff; }
.cos-badge--yellow { background: #FACC15; color: #0d0f14; }

.co-oi-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.co-oi-name {
    font-family: Oswald, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.co-oi-variant, .co-oi-qty {
    font-family: Inter, sans-serif;
    font-size: 10px;
    color: #d8dbe8;
}

.co-oi-price {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

/* Breakdown */
.co-summary-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 16px;
}

.cosb-row {
    display: flex;
    justify-content: space-between;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
}

.cosb-row--discount span:last-child { color: #FACC15; }

/* Total */
.co-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.cost-label {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
}

.cost-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.cost-val {
    font-family: Oswald, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

.cost-note {
    font-family: Inter, sans-serif;
    font-size: 10px;
    color: #d8dbe8;
}

/* CTA */
.co-place-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    background: #FACC15;
    color: #0d0f14;
    border: none;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .15s;
    margin-bottom: 10px;
}

.co-place-order-btn:hover { background: #f5c000; transform: translateY(-2px); }

.co-ssl-note {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
    text-align: center;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.co-ssl-note i { color: #34d399; }

/* Help box */
.co-help-box {
    background: linear-gradient(135deg, #12102a 0%, #1a0f2e 100%);
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: 14px;
    padding: 24px 20px;
}

.co-help-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.co-help-icon {
    font-size: 28px;
    color: #7c3aed;
    margin-bottom: 4px;
}

.co-help-title {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin: 0;
}

.co-help-sub {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #d8dbe8;
    margin: 0 0 6px;
}

.co-help-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #FACC15;
    text-decoration: none;
    transition: color .2s;
}

.co-help-phone:hover { color: #f5c000; }
.co-help-phone i { font-size: 12px; }

/* Responsive */
@media (max-width: 1100px) {
    .checkout-inner { grid-template-columns: 1fr; padding: 0 24px; }
    .checkout-right { position: static; }
}

@media (max-width: 600px) {
    .co-fields { grid-template-columns: 1fr; }
    .co-field--narrow { max-width: 100%; }
    .co-payment-grid { grid-template-columns: 1fr 1fr; }
    .co-vat-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   VARIANT MODAL (cart upsell)
   ============================================================ */

.variant-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.variant-modal {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    max-width: 440px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: vmSlideIn .25s ease;
}

@keyframes vmSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.variant-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #d8dbe8;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.variant-modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); }

.variant-modal-thumb {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: #0d0f1a;
    flex-shrink: 0;
    align-self: center;
}

.variant-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.variant-modal-title {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

.variant-modal-price {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #FACC15;
    text-align: center;
    line-height: 1;
}

.variant-modal-price .woocommerce-Price-amount { font-family: inherit; font-size: inherit; color: inherit; }

/* Atrybuty */
.vm-loading {
    text-align: center;
    color: #d8dbe8;
    font-family: Inter, sans-serif;
    font-size: 13px;
    padding: 20px 0;
}

.vm-attr-group { display: flex; flex-direction: column; gap: 10px; }

.vm-attr-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}

.vm-attr-options { display: flex; gap: 8px; flex-wrap: wrap; }

.vm-opt-btn {
    padding: 9px 18px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: #0d0f1a;
    color: #8891aa;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.vm-opt-btn:hover { border-color: rgba(250,204,21,0.4); color: #FACC15; }
.vm-opt-btn--active { border-color: #FACC15; color: #FACC15; background: rgba(250,204,21,0.08); }

.variant-modal-add {
    width: 100%;
    height: 50px;
    background: #FACC15;
    color: #0d0f14;
    border: none;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .2s, transform .15s;
    margin-top: 4px;
}

.variant-modal-add:hover:not(:disabled) { background: #f5c000; transform: translateY(-2px); }
.variant-modal-add:disabled { background: #1e2235; color: #fff; cursor: not-allowed; transform: none; }

.variant-modal-msg {
    border-radius: 8px;
    padding: 10px 14px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    text-align: center;
}

.variant-modal-msg.success { background: rgba(52,211,153,0.1); color: #34d399; }
.variant-modal-msg.error   { background: rgba(239,68,68,0.1); color: #f87171; }

/* ============================================================
   UPSELL VARIANT MODAL
   ============================================================ */

.upsell-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,6,14,0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.upsell-modal {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    overflow: hidden;
}

.upsell-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.upsell-modal-title {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.upsell-modal-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: color .2s;
    line-height: 1;
}

.upsell-modal-close:hover { color: #f87171; }

.upsell-modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }

.upm-group { display: flex; flex-direction: column; gap: 10px; }

.upm-attr-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}

.upm-options { display: flex; flex-wrap: wrap; gap: 8px; }

.upm-opt-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: #0d0f1a;
    color: #8891aa;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}

.upm-opt-btn:hover { border-color: rgba(250,204,21,0.35); color: #c8cdd8; }

.upm-opt-btn--active {
    border-color: #FACC15;
    color: #FACC15;
    background: rgba(250,204,21,0.08);
}

.upsell-modal-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.upsell-modal-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    background: #FACC15;
    color: #0d0f14;
    border: none;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .15s, opacity .2s;
}

.upsell-modal-add-btn:hover:not(:disabled) { background: #f5c000; transform: translateY(-2px); }
.upsell-modal-add-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* WC checkout form fields override */
.checkout-page .form-row { margin: 0; padding: 0; }
.checkout-page .form-row label { font-family: Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; margin-bottom: 6px; display: block; }
.checkout-page .form-row label .required { color: #FACC15; }
.checkout-page .form-row input.input-text,
.checkout-page .form-row select,
.checkout-page .form-row textarea {
    background: #0d0f1a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    color: #c8cdd8 !important;
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color .2s !important;
    height: auto !important;
    box-shadow: none !important;
}
.checkout-page .form-row input.input-text:focus { border-color: rgba(250,204,21,0.35) !important; }
.checkout-page .form-row input.input-text::placeholder { color: #d8dbe8 !important; }
.checkout-page .form-row.woocommerce-validated input.input-text { border-color: rgba(52,211,153,0.4) !important; }
.checkout-page .form-row.woocommerce-invalid input.input-text { border-color: rgba(239,68,68,0.5) !important; }
.checkout-page .form-row .woocommerce-error { color: #f87171; font-size: 11px; margin-top: 4px; }
.woocommerce-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-family: Inter, sans-serif; font-size: 13px; color: #f87171; list-style: none; }
.woocommerce-error li::before { content: none; }
.co-free { color: #34d399; font-weight: 700; }
.cosb-ship-name { font-size: 10px; color: #fff; font-family: Inter, sans-serif; }
.co-gateway-fields { margin-top: 0; }
.co-payment-desc { padding: 14px; background: #0d0f1a; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; margin-top: -4px; font-family: Inter, sans-serif; font-size: 13px; color: #7a8299; }
.co-payment-desc p { margin: 0; }

.ty-page {
    background: #0d0f1a;
    min-height: 100vh;
    padding-bottom: 100px;
}

/* HERO */
.ty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 24px 48px;
    text-align: center;
}

.ty-check {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    margin-bottom: 24px;
    box-shadow: 0 0 0 12px rgba(52,211,153,0.1);
}

.ty-check--neutral { background: #7c3aed; box-shadow: 0 0 0 12px rgba(124,58,237,0.1); }

.ty-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    line-height: 1;
}

.ty-sub {
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #d8dbe8;
    margin: 0 0 28px;
}

.ty-order-badge {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 28px;
    text-align: center;
}

.ty-order-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 4px;
}

.ty-order-num {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #FACC15;
    letter-spacing: 0.08em;
}

/* MAIN GRID */
.ty-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 24px;
}

/* CARDS */
.ty-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 24px;
}

.ty-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ty-card-icon { color: #FACC15; font-size: 16px; }

.ty-card-title {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
}

/* STATUS STEPS */
.ty-steps { display: flex; flex-direction: column; }

.ty-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ty-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #d8dbe8;
    flex-shrink: 0;
    background: #0d0f1a;
}

.ty-step--done .ty-step-dot {
    background: #34d399;
    border-color: #34d399;
    color: #fff;
}

.ty-step-line {
    width: 2px;
    height: 20px;
    background: rgba(255,255,255,0.06);
    margin-left: 13px;
}

.ty-step-info { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }

.ty-step-name {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #c8cdd8;
}

.ty-step--done .ty-step-name { color: #34d399; }

.ty-step-date {
    font-family: Inter, sans-serif;
    font-size: 10px;
    color: #fff;
}

/* ORDER ITEMS */
.ty-order-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.ty-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ty-oi-qty {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    min-width: 22px;
    flex-shrink: 0;
}

.ty-oi-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d0f1a;
}

.ty-oi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ty-oi-name {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #c8cdd8;
    flex: 1;
    line-height: 1.3;
}

.ty-oi-price {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

/* SUMMARY ROWS */
.ty-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 14px;
}

.ty-sr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
    gap: 10px;
}

.ty-sr span:last-child {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #c8cdd8;
    text-align: right;
}

.ty-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ty-total-row > span:first-child {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
}

.ty-total-val {
    font-family: Oswald, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #FACC15;
}

/* CO TERAZ */
.ty-next {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 24px;
    text-align: center;
}

.ty-next-title {
    font-family: Oswald, sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin: 0 0 24px;
}

.ty-next-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ty-next-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ty-next-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #c8cdd8;
    margin-bottom: 4px;
}

.ty-next-card-title {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin: 0;
}

.ty-next-card-text {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
    margin: 0;
    line-height: 1.5;
}

.ty-next-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    margin-top: 4px;
    transition: color .2s;
}

.ty-next-link:hover { color: #FACC15; }
.ty-next-link--yellow { color: #FACC15; }
.ty-next-link--yellow:hover { color: #f5c000; }

/* SOCIAL */
.ty-social {
    max-width: 700px;
    margin: 0 auto;
    padding: 48px 24px;
    background: linear-gradient(135deg, #1a0f35 0%, #0f1a35 50%, #1a1035 100%);
    border-radius: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ty-social-badge {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7c3aed;
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.3);
    border-radius: 20px;
    padding: 4px 14px;
}

.ty-social-title {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    line-height: 1;
}

.ty-social-text {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #d8dbe8;
    margin: 0;
    max-width: 480px;
    line-height: 1.6;
}

.ty-social-text strong { color: #a78bfa; }

.ty-social-icons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.ty-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #c8cdd8;
    text-decoration: none;
    transition: all .2s;
}

.ty-social-btn:hover { background: rgba(124,58,237,0.3); border-color: rgba(124,58,237,0.5); color: #fff; }

/* Responsive */
@media (max-width: 700px) {
    .ty-main { grid-template-columns: 1fr; }
    .ty-next-grid { grid-template-columns: 1fr; }
}

#co-processing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 20, 0.88);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.co-processing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.co-dots {
    display: flex;
    gap: 12px;
}

.co-dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FACC15;
    animation: co-dot-bounce 1.2s ease-in-out infinite;
}

.co-dots span:nth-child(2) { animation-delay: 0.2s; background: #a78bfa; }
.co-dots span:nth-child(3) { animation-delay: 0.4s; background: #34d399; }

@keyframes co-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1.2); opacity: 1; }
}

.co-processing-text {
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff;
    margin: 0;
}

/* ── Checkout overlay ── */
.checkout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 20, 0.88);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.co-dots {
    display: flex;
    gap: 10px;
}
.co-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FACC15;
    animation: co-dot-bounce 1.2s ease-in-out infinite;
}
.co-dots span:nth-child(1) { animation-delay: 0s; }
.co-dots span:nth-child(2) { animation-delay: 0.2s; }
.co-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes co-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1.2); opacity: 1; }
}
.co-overlay-text {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff;
    margin: 0;
}

.sr-page {
    background: #0d0f1a;
    min-height: 100vh;
    padding-bottom: 100px;
}

/* HERO */
.sr-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 24px 56px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sr-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px;
}

.sr-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(32px, 6vw, 64px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.05;
    margin: 0 0 12px;
    max-width: 800px;
}

.sr-count {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #d8dbe8;
    margin: 0 0 32px;
}
.sr-count strong { color: #FACC15; }

/* FORM */
.sr-form { width: 100%; max-width: 600px; }

.sr-input-wrap {
    display: flex;
    align-items: center;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 6px 6px 6px 16px;
    gap: 10px;
    transition: border-color .2s;
}
.sr-input-wrap:focus-within { border-color: #FACC15; }

.sr-form-icon { color: #fff; font-size: 15px; flex-shrink: 0; }

.sr-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #ffffff;
    padding: 8px 0;
}
.sr-input::placeholder { color: #fff; }

.sr-submit {
    background: #FACC15;
    color: #0d0f1a;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}
.sr-submit:hover { background: #f5c000; }

/* CONTENT */
.sr-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* SECTION HEADER */
.sr-section-header { margin-bottom: 24px; }

.sr-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin: 0;
}
.sr-section-title i { color: #FACC15; font-size: 16px; }

.sr-section-count {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #0d0f1a;
    background: #FACC15;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 4px;
}

/* PRODUCTS GRID */
.sr-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.sr-product-card {
    display: flex;
    flex-direction: column;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s, transform .2s;
    position: relative;
}
.sr-product-card:hover { border-color: rgba(250,204,21,0.3); transform: translateY(-3px); }

.sr-product-img {
    aspect-ratio: 1;
    background: #0d0f1a;
    position: relative;
    overflow: hidden;
}
.sr-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sr-product-card:hover .sr-product-img img { transform: scale(1.04); }
.sr-product-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #303450; font-size: 32px; }

.sr-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
}
.sr-badge--sale { background: #FACC15; color: #0d0f1a; }
.sr-badge--out  { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

.sr-product-info { padding: 14px 16px 16px; flex: 1; }

.sr-product-cat {
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    display: block;
    margin-bottom: 6px;
}

.sr-product-name {
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px;
    line-height: 1.3;
}

.sr-product-price {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #FACC15;
}
.sr-from { font-size: 11px; color: #d8dbe8; font-family: Inter, sans-serif; font-weight: 400; }

.sr-product-arrow {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(250,204,21,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #FACC15;
    opacity: 0;
    transition: opacity .2s;
}
.sr-product-card:hover .sr-product-arrow { opacity: 1; }

/* SEE ALL */
.sr-see-all { text-align: center; margin-top: 24px; }
.sr-see-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    border: 1px solid rgba(250,204,21,0.3);
    padding: 10px 24px;
    border-radius: 10px;
    transition: all .2s;
}
.sr-see-all-btn:hover { background: rgba(250,204,21,0.08); }

/* POSTS LIST */
.sr-posts-list { display: flex; flex-direction: column; gap: 12px; }

.sr-post-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 16px;
    text-decoration: none;
    transition: border-color .2s;
    position: relative;
}
.sr-post-card:hover { border-color: rgba(250,204,21,0.25); }

.sr-post-thumb {
    width: 90px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d0f1a;
}
.sr-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sr-post-info { flex: 1; min-width: 0; }

.sr-post-meta {
    display: flex;
    gap: 14px;
    font-family: Inter, sans-serif;
    font-size: 10px;
    color: #fff;
    margin-bottom: 6px;
}
.sr-post-meta i { margin-right: 4px; }

.sr-post-title {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-post-excerpt {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-post-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #d8dbe8;
    transition: all .2s;
}
.sr-post-card:hover .sr-post-arrow { background: rgba(250,204,21,0.1); color: #FACC15; }

/* EMPTY */
.sr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    text-align: center;
}
.sr-empty-icon { font-size: 56px; color: #252840; margin-bottom: 20px; }
.sr-empty-title { font-family: Oswald, sans-serif; font-size: 28px; font-weight: 600; color: #ffffff; text-transform: uppercase; margin: 0 0 10px; }
.sr-empty-text { font-family: Inter, sans-serif; font-size: 14px; color: #d8dbe8; margin: 0 0 32px; }

.sr-suggestions-label { font-family: Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.sr-suggestions-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sr-chip {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #c8cdd8;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 6px 16px;
    text-decoration: none;
    transition: all .2s;
}
.sr-chip:hover { border-color: rgba(255,255,255,0.2); color: #fff; }
.sr-chip--yellow { color: #FACC15; border-color: rgba(250,204,21,0.3); }
.sr-chip--yellow:hover { background: rgba(250,204,21,0.08); }

@media (max-width: 640px) {
    .sr-products-grid { grid-template-columns: repeat(2, 1fr); }
    .sr-post-thumb { width: 70px; height: 56px; }
    .sr-post-title { font-size: 14px; }
}

.ma-page { background: #0d0f1a; min-height: 100vh; }

/* AUTH */
.ma-auth { max-width: 460px; margin: 0 auto; padding: 64px 20px 80px; }
.ma-auth-brand { text-align: center; margin-bottom: 36px; }
.ma-auth-logo { width: 52px; height: 52px; border-radius: 14px; background: rgba(250,204,21,.12); color: #FACC15; font-size: 22px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.ma-auth-title { font-family: Oswald, sans-serif; font-size: 30px; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.ma-auth-sub { font-family: Inter, sans-serif; font-size: 14px; color: #d8dbe8; margin: 0; }
.ma-auth-box { background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; overflow: hidden; }
.ma-auth-tab-buttons { display: flex; border-bottom: 1px solid rgba(255,255,255,.06); }
.ma-tab-btn { flex: 1; padding: 15px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #fff; cursor: pointer; transition: all .2s; }
.ma-tab-btn--active { color: #FACC15; border-bottom-color: #FACC15; }
.ma-auth-panel { display: none; padding: 24px; }
.ma-auth-panel--active { display: block; }

/* FORM */
.ma-form { display: flex; flex-direction: column; gap: 14px; }
.ma-field { display: flex; flex-direction: column; gap: 5px; }
.ma-field label { font-family: Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #d8dbe8; }
.ma-field input,
.ma-form input[type=text],
.ma-form input[type=email],
.ma-form input[type=password],
.ma-form input[type=tel] {
    width: 100%; background: #0d0f1a; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
    padding: 11px 13px; font-family: Inter, sans-serif; font-size: 14px; color: #fff;
    outline: none; transition: border-color .2s; box-sizing: border-box;
}
.ma-field input:focus, .ma-form input:focus { border-color: rgba(250,204,21,.4); }
.ma-input-disabled { opacity: .35 !important; cursor: not-allowed !important; }
.ma-field-hint { font-family: Inter, sans-serif; font-size: 11px; color: #fff; margin-top: 2px; }
.ma-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ma-pass-wrap { position: relative; }
.ma-pass-wrap input { padding-right: 42px; }
.ma-pass-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; cursor: pointer; font-size: 14px; padding: 0; transition: color .2s; }
.ma-pass-toggle:hover { color: #FACC15; }
.ma-checkbox { display: flex; align-items: center; gap: 9px; font-family: Inter, sans-serif; font-size: 13px; color: #d8dbe8; cursor: pointer; }
.ma-checkbox input { width: auto; }

.ma-submit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #FACC15; color: #0d0f1a; border: none; border-radius: 12px;
    padding: 13px 28px; font-family: Oswald, sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
    transition: background .2s; text-decoration: none; white-space: nowrap;
}
.ma-submit-btn:hover { background: #f5c000; }

.ma-cancel-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 22px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600;
    color: #d8dbe8; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
    text-decoration: none; transition: all .2s;
}
.ma-cancel-btn:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.ma-forgot { text-align: center; font-family: Inter, sans-serif; font-size: 12px; color: #fff; text-decoration: none; transition: color .2s; display: block; }
.ma-forgot:hover { color: #FACC15; }

/* LAYOUT */
.ma-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; max-width: 1200px; margin: 0 auto; padding: 44px 24px 80px; align-items: start; }

/* SIDEBAR */
.ma-sidebar { background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; overflow: hidden; position: sticky; top: 90px; }
.ma-sidebar-user { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ma-avatar { width: 42px; height: 42px; border-radius: 12px; background: rgba(250,204,21,.15); color: #FACC15; font-family: Oswald, sans-serif; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ma-sidebar-user-info strong { display: block; font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ma-sidebar-user-info span { font-family: Inter, sans-serif; font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; display: block; }
.ma-stats { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06); gap: 14px; }
.ma-stat { flex: 1; text-align: center; }
.ma-stat-val { display: block; font-family: Oswald, sans-serif; font-size: 18px; font-weight: 700; color: #FACC15; line-height: 1.2; }
.ma-stat-val small { font-size: 10px; color: #d8dbe8; font-family: Inter, sans-serif; font-weight: 400; }
.ma-stat-label { font-family: Inter, sans-serif; font-size: 9px; color: #fff; letter-spacing: .08em; text-transform: uppercase; }
.ma-stat-divider { width: 1px; height: 28px; background: rgba(255,255,255,.06); flex-shrink: 0; }
.ma-nav { padding: 10px 0; }
.ma-nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 18px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: #d8dbe8; text-decoration: none; transition: all .15s; position: relative; }
.ma-nav-item i { width: 15px; text-align: center; font-size: 13px; }
.ma-nav-item:hover { color: #fff; background: rgba(255,255,255,.03); }
.ma-nav-item--active { color: #FACC15 !important; background: rgba(250,204,21,.06); }
.ma-nav-item--active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #FACC15; border-radius: 0 3px 3px 0; }
.ma-nav-item--logout { color: #3a2020 !important; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.04); }
.ma-nav-item--logout:hover { color: #f87171 !important; }
.ma-nav-badge { margin-left: auto; background: rgba(250,204,21,.15); color: #FACC15; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }

/* MAIN */
.ma-main { min-width: 0; }
.ma-section-header { margin-bottom: 22px; }
.ma-section-title { font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0; letter-spacing: .06em; }

.ma-back-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: Inter, sans-serif; font-size: 12px; font-weight: 600;
    color: #FACC15; text-decoration: none; margin-bottom: 10px;
    transition: opacity .15s; opacity: .8;
}
.ma-back-link:hover { opacity: 1; }

/* DASHBOARD */
.ma-dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
.ma-dcard { display: flex; align-items: center; gap: 14px; background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 18px; text-decoration: none; transition: border-color .2s, transform .15s; }
.ma-dcard:hover { border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
.ma-dcard-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.ma-dcard-val { display: block; font-family: Oswald, sans-serif; font-size: 19px; font-weight: 700; color: #fff; }
.ma-dcard-label { display: block; font-family: Inter, sans-serif; font-size: 10px; color: #d8dbe8; text-transform: uppercase; letter-spacing: .06em; }

.ma-last-order { background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; overflow: hidden; }
.ma-last-order-header { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.06); font-family: Inter, sans-serif; font-size: 11px; }
.ma-last-order-label { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.ma-last-order-all { color: #FACC15; text-decoration: none; font-weight: 600; }

/* ORDERS TABLE — stałe kolumny żeby nagłówki = wartości */
.ma-orders-table { background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; overflow: hidden; }

.ma-orders-head,
.ma-order-row {
    display: grid;
    grid-template-columns: 130px 100px 1fr 110px 100px;
    align-items: center;
    gap: 0;
    padding: 0 18px;
}
.ma-orders-head {
    padding-top: 12px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-family: Inter, sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.ma-orders-head span, .ma-order-row > * { padding: 0 8px; }
.ma-orders-head span:first-child, .ma-order-row > *:first-child { padding-left: 0; }
.ma-orders-head span:last-child, .ma-order-row > *:last-child { padding-right: 0; text-align: right; }

.ma-order-row {
    padding-top: 14px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .15s;
}
.ma-order-row:last-child { border-bottom: none; }
.ma-order-row:hover { background: rgba(255,255,255,.02); }

.ma-or-hash { font-family: Oswald, sans-serif; font-size: 15px; font-weight: 600; color: #fff; display: block; }
.ma-or-date { font-family: Inter, sans-serif; font-size: 12px; color: #d8dbe8; }
.ma-or-total { font-family: Oswald, sans-serif; font-size: 15px; font-weight: 700; color: #FACC15; }

.ma-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: Inter, sans-serif; font-size: 11px; font-weight: 600;
    border-radius: 20px; padding: 4px 10px; white-space: nowrap;
    width: max-content;
}

.ma-or-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: Inter, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #c8cdd8;
    text-decoration: none; border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; padding: 7px 14px; white-space: nowrap; transition: all .15s;
}
.ma-or-btn:hover { color: #FACC15; border-color: rgba(250,204,21,.3); }

/* ORDER DETAIL */
.ma-order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }

.ma-od-card { background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 20px; }

.ma-od-card-title {
    font-family: Inter, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #d8dbe8;
    margin: 0 0 16px; display: flex; align-items: center; gap: 7px;
}
.ma-od-card-title i { color: #FACC15; }

.ma-od-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.ma-od-list dt { font-family: Inter, sans-serif; font-size: 11px; color: #d8dbe8; font-weight: 600; padding: 0; margin: 0; }
.ma-od-list dd { font-family: Inter, sans-serif; font-size: 13px; color: #c8cdd8; margin: 0; padding: 0; }

.ma-od-address { font-family: Inter, sans-serif; font-size: 13px; color: #c8cdd8; line-height: 1.9; font-style: normal; margin: 0; }

.ma-od-products { background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 20px; margin-top: 0; }

.ma-od-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.ma-od-item:last-of-type { border-bottom: none; }

.ma-od-thumb { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.ma-od-thumb-ph { width: 54px; height: 54px; border-radius: 8px; background: #0d0f1a; display: flex; align-items: center; justify-content: center; color: #303450; font-size: 20px; flex-shrink: 0; }

.ma-od-item-info { flex: 1; min-width: 0; }
.ma-od-item-name { display: block; font-family: Inter, sans-serif; font-size: 14px; color: #fff; font-weight: 500; }
.ma-od-item-qty { display: block; font-family: Inter, sans-serif; font-size: 11px; color: #d8dbe8; margin-top: 3px; }
.ma-od-item-price { font-family: Oswald, sans-serif; font-size: 16px; font-weight: 700; color: #FACC15; white-space: nowrap; flex-shrink: 0; }

.ma-od-totals { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 7px; }
.ma-od-total-row { display: flex; justify-content: space-between; font-family: Inter, sans-serif; font-size: 13px; }
.ma-od-total-row span:first-child { color: #d8dbe8; }
.ma-od-total-row span:last-child { color: #c8cdd8; }
.ma-od-total-row--final { padding-top: 12px; margin-top: 5px; border-top: 1px solid rgba(255,255,255,.07); }
.ma-od-total-row--final span { font-family: Oswald, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #FACC15 !important; }

/* ADRESY */
.ma-addresses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ma-addr-card { background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; overflow: hidden; }
.ma-addr-header { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.06); font-family: Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #d8dbe8; }
.ma-addr-header i { color: #FACC15; }
.ma-addr-edit { margin-left: auto; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color .15s; }
.ma-addr-edit:hover { color: #FACC15; }
.ma-addr-body { padding: 16px; }
.ma-addr-body address { font-family: Inter, sans-serif; font-size: 13px; color: #c8cdd8; line-height: 1.85; font-style: normal; }
.ma-addr-body address strong { color: #fff; }
.ma-addr-empty { font-family: Inter, sans-serif; font-size: 13px; color: #303450; margin: 0 0 10px; }
.ma-addr-add { font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; color: #FACC15; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* PROFIL / SEKCJE FORMULARZA */
.ma-profile-form { max-width: 540px; }
.ma-form-section { background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.ma-form-section-title { font-family: Oswald, sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 18px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ma-optional { font-family: Inter, sans-serif; font-size: 10px; font-weight: 400; color: #fff; text-transform: none; letter-spacing: 0; }

/* ALERTS / EMPTY */
.ma-alert { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 13px 16px; font-family: Inter, sans-serif; font-size: 13px; margin-bottom: 18px; }
.ma-alert--success { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); color: #86efac; }
.ma-alert--error   { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: #f87171; }

.ma-empty { display: flex; flex-direction: column; align-items: center; padding: 60px 24px; text-align: center; background: #12151f; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; }
.ma-empty-icon { font-size: 40px; color: #252840; margin-bottom: 14px; }
.ma-empty-title { font-family: Oswald, sans-serif; font-size: 19px; font-weight: 600; color: #fff; text-transform: uppercase; margin: 0 0 6px; }
.ma-empty-text { font-family: Inter, sans-serif; font-size: 13px; color: #d8dbe8; margin: 0 0 18px; }
.ma-empty-btn { font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; color: #FACC15; text-decoration: none; border: 1px solid rgba(250,204,21,.3); border-radius: 10px; padding: 10px 20px; transition: background .2s; }
.ma-empty-btn:hover { background: rgba(250,204,21,.06); }

.ma-welcome-banner { display: flex; align-items: center; gap: 10px; background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.2); border-radius: 12px; padding: 13px 24px; font-family: Inter, sans-serif; font-size: 14px; color: #FACC15; max-width: 1200px; margin: 24px auto 0; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .ma-layout { grid-template-columns: 1fr; padding: 20px 16px 60px; gap: 20px; }
    .ma-sidebar { position: static; }
    .ma-orders-head { display: none; }
    .ma-order-row { grid-template-columns: 1fr auto !important; grid-template-rows: auto auto auto; gap: 6px !important; }
    .ma-order-row > *:nth-child(3) { grid-column: 1 / -1; }
    .ma-order-detail-grid, .ma-addresses-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .ma-dashboard-grid { grid-template-columns: 1fr 1fr; }
    .ma-field-row { grid-template-columns: 1fr; }
    .ma-auth { padding: 36px 14px 60px; }
}

.ma-forgot-box {
    background: #12151f;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 36px 32px;
    width: 100%;
    max-width: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ma-forgot-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none; border: none;
    color: #d8dbe8; font-size: 22px;
    cursor: pointer; line-height: 1;
    transition: color .15s;
}
.ma-forgot-close:hover { color: #fff; }
.ma-forgot-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(250,204,21,.1); color: #FACC15; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.ma-forgot-title { font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0; }
.ma-forgot-text { font-family: Inter, sans-serif; font-size: 13px; color: #d8dbe8; margin: 0; }

/* ── SHARED ── */
.bl-cat-badge {
    display: inline-block;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0d0f1a;
    background: #FACC15;
    border-radius: 6px;
    padding: 4px 10px;
    text-decoration: none;
    margin-bottom: 14px;
}
.bl-cat-badge--sm { font-size: 9px; padding: 3px 8px; margin-bottom: 10px; }

/* ── BLOG PAGE ── */
.bl-page { background: #0d0f1a; min-height: 100vh; }

/* HERO */
.bl-hero {
    padding: 72px 0 80px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bl-hero-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.bl-hero-text { display: flex; flex-direction: column; align-items: flex-start; }

.bl-hero-meta {
    display: flex;
    gap: 18px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #d8dbe8;
    margin-bottom: 18px;
}
.bl-hero-meta i { margin-right: 5px; color: #FACC15; }

.bl-hero-title {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.bl-hero-excerpt {
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #7a8090;
    line-height: 1.7;
    margin: 0 0 28px;
}

.bl-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FACC15;
    color: #0d0f1a;
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 26px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.bl-hero-btn:hover { background: #f5c000; transform: translateX(3px); }
.bl-hero-btn i { transition: transform 0.2s; }
.bl-hero-btn:hover i { transform: translateX(3px); }

/* Hero image — tilted like front-page */
.bl-hero-img-wrap {
    perspective: 1000px;
}
.bl-hero-img-link {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    transform: rotate(-3deg) scale(0.97);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s;
    box-shadow: -12px 16px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
}
.bl-hero-img-link:hover {
    transform: rotate(0deg) scale(1);
    box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
}
.bl-hero-img { width: 100%; height: 380px; object-fit: cover; display: block; }

/* GRID SECTION */
.bl-grid-section { padding: 72px 0 100px; }
.bl-grid-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* CARD */
.bl-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s;
}
.bl-card:hover { border-color: rgba(250,204,21,0.2); transform: translateY(-4px); }

.bl-card-img-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/10;
}
.bl-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1);
}
.bl-card:hover .bl-card-img { transform: scale(1.05); }

.bl-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bl-card-meta {
    display: flex;
    gap: 14px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
    margin-bottom: 10px;
}
.bl-card-meta i { margin-right: 4px; color: #FACC15; }

.bl-card-title {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px;
    line-height: 1.25;
    letter-spacing: 0.02em;
}
.bl-card-title a { color: #ffffff; text-decoration: none; transition: color 0.15s; }
.bl-card-title a:hover { color: #FACC15; }

.bl-card-excerpt {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    line-height: 1.65;
    margin: 0 0 auto;
    padding-bottom: 18px;
}

.bl-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #FACC15;
    text-decoration: none;
    margin-top: 16px;
    transition: gap 0.2s;
}
.bl-card-btn:hover { gap: 11px; }

/* EMPTY */
.bl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 14px; color: #303450; font-family: Oswald, sans-serif; text-transform: uppercase; }
.bl-empty-icon { font-size: 56px; }
.bl-empty h2 { font-size: 24px; font-weight: 700; color: #d8dbe8; margin: 0; }
.bl-empty p { font-family: Inter, sans-serif; font-size: 14px; color: #fff; margin: 0; text-transform: none; }

/* ────────────────────────────────────────────
   SINGLE POST
──────────────────────────────────────────── */
.sp-article { background: #0d0f1a; min-height: 100vh; }

/* HERO */
.sp-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-color: #12151f;
}
.sp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(13,15,26,0.3) 0%,
        rgba(13,15,26,0.5) 40%,
        rgba(13,15,26,0.95) 100%
    );
}
.sp-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    padding: 40px 32px 56px;
}
.sp-hero-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.sp-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.15s;
}
.sp-back:hover { color: #FACC15; }

.sp-hero-title {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 4.5vw, 54px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.08;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.sp-hero-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.sp-hero-meta i { margin-right: 5px; color: #FACC15; }

/* BODY */
.sp-body { padding: 64px 0 100px; }
.sp-content-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
}

/* CONTENT TYPOGRAPHY */
.sp-content {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.85;
    color: #b8bcc8;
}
.sp-content h1, .sp-content h2, .sp-content h3, .sp-content h4 {
    font-family: Oswald, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin: 40px 0 16px;
    line-height: 1.15;
    letter-spacing: 0.02em;
}
.sp-content h2 { font-size: 26px; }
.sp-content h3 { font-size: 21px; }
.sp-content h4 { font-size: 17px; }
.sp-content p { margin: 0 0 22px; }
.sp-content a { color: #FACC15; text-decoration: underline; text-underline-offset: 3px; }
.sp-content a:hover { color: #f5c000; }
.sp-content img { max-width: 100%; border-radius: 12px; margin: 28px 0; display: block; }
.sp-content ul, .sp-content ol { margin: 0 0 22px; padding-left: 24px; }
.sp-content li { margin-bottom: 8px; color: #b8bcc8; }
.sp-content blockquote {
    border-left: 3px solid #FACC15;
    margin: 32px 0;
    padding: 16px 24px;
    background: rgba(250,204,21,0.05);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #c8cdd8;
}
.sp-content strong { color: #ffffff; font-weight: 700; }
.sp-content code {
    background: rgba(255,255,255,0.06);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 13px;
    color: #FACC15;
}
.sp-content hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 40px 0;
}

/* TAGS */
.sp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 0;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.sp-tag {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #d8dbe8;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 5px 13px;
    text-decoration: none;
    transition: all 0.15s;
}
.sp-tag:hover { color: #FACC15; border-color: rgba(250,204,21,0.3); background: rgba(250,204,21,0.05); }

/* NAVIGATION */
.sp-nav {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sp-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #d8dbe8;
    text-decoration: none;
    transition: color 0.15s;
}
.sp-nav-back:hover { color: #FACC15; }

.sp-nav-posts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.sp-nav-post {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 16px 18px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.sp-nav-post:hover { border-color: rgba(250,204,21,0.25); background: rgba(250,204,21,0.03); }
.sp-nav-post--next { text-align: right; }

.sp-nav-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-nav-post--next .sp-nav-label { justify-content: flex-end; }

.sp-nav-ptitle {
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .bl-hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
    .bl-hero-img-wrap { order: -1; }
    .bl-hero-img { height: 260px; }
    .bl-grid { grid-template-columns: 1fr 1fr; }
    .bl-grid-inner { padding: 0 20px; }
    .sp-hero-content { padding: 32px 20px 44px; }
    .sp-content-wrap { padding: 0 20px; }
    .sp-nav-posts { grid-template-columns: 1fr; }
    .sp-nav-post--next { text-align: left; }
    .sp-nav-post--next .sp-nav-label { justify-content: flex-start; }
}
@media (max-width: 600px) {
    .bl-grid { grid-template-columns: 1fr; }
    .bl-hero { padding: 44px 0 52px; }
    .sp-hero { min-height: 420px; }
}

p,
span {
    color: #d8dbe8;
}


/* ============================================================
   METODY — HERO
   ============================================================ */
.metody-hero {
    width: 100%;
    padding: 80px 0 100px;
    background: linear-gradient(160deg, #0d0f1a 0%, #12102a 60%, #1a0f2e 100%);
    position: relative;
    overflow: hidden;
}

.metody-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 80% 30%, rgba(124,58,237,0.15) 0%, transparent 65%);
    pointer-events: none;
}

.metody-hero-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.metody-hero-content {
    max-width: 700px;
}

.metody-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 16px;
}

.metody-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(44px, 6vw, 80px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 1.0;
    margin: 0 0 24px;
    transform: skewX(-3deg);
    transform-origin: left center;
}

.metody-accent { color: #FACC15; }

.metody-hero-tekst {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #d8dbe8;
    max-width: 520px;
}

.metody-hero-tekst p { margin: 0; }

/* Trust bar */
.metody-trust-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 20px 32px;
    flex-wrap: wrap;
}

.metody-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 160px;
    padding: 4px 16px;
}

.metody-trust-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.metody-trust-icon--yellow { background: rgba(250,204,21,0.12); border: 1px solid rgba(250,204,21,0.25); color: #FACC15; }
.metody-trust-icon--orange { background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.25); color: #f97316; }
.metody-trust-icon--purple { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.25); color: #a78bfa; }
.metody-trust-icon--green  { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.25); color: #34d399; }

.metody-trust-label {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #c8cdd8;
}

.metody-trust-div {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* ============================================================
   SEKCJA WSPÓLNA
   ============================================================ */
.metody-section {
    width: 100%;
    padding: 100px 0 80px;
    background: #0d0f1a;
}

.metody-section--alt {
    background: #0a0c14;
}

.metody-section-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
}

.metody-section-header {
    text-align: center;
    margin-bottom: 56px;
}

.metody-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 14px;
}

.metody-section-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 16px;
    line-height: 1;
}

.metody-section-sub {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #d8dbe8;
    max-width: 560px;
    margin: 0 auto;
}

.metody-section-sub p { margin: 0; }

/* ============================================================
   PŁATNOŚCI — KARTY
   ============================================================ */
.metody-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.metody-payment-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.metody-payment-card:hover {
    border-color: rgba(250,204,21,0.2);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

.metody-payment-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Logotypy */
.metody-payment-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 9px;
}

.metody-payment-logo--payu {
    background: #d91e52;
}

.metody-payment-logo--paynow {
    background: #00a372;
}

.metody-payment-logo--pobranie {
    background: rgba(250,204,21,0.12);
    border: 1px solid rgba(250,204,21,0.25);
    color: #FACC15;
    font-size: 22px;
    width: 38px;
    padding: 0;
    border-radius: 10px;
}

.mpl-text {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-transform: uppercase;
}

.mpl-text span { color: rgba(255,255,255,0.6); }

/* Badge dostępności */
.metody-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.metody-payment-badge--green { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25); color: #34d399; }
.metody-payment-badge--yellow { background: rgba(250,204,21,0.1); border: 1px solid rgba(250,204,21,0.25); color: #FACC15; }

.metody-payment-title {
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    margin: 0;
}

.metody-payment-desc {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #d8dbe8;
    flex: 1;
}

.metody-payment-desc p { margin: 0; }

/* Sub-metody */
.metody-payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mpm-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #c8cdd8;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    padding: 5px 10px;
}

.mpm-item i { color: #FACC15; font-size: 12px; }

/* Footer karty */
.metody-payment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;
}

.metody-payment-time,
.metody-payment-secure {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
}

.metody-payment-time i { color: #7c3aed; }
.metody-payment-secure i { color: #34d399; }

/* ============================================================
   DOSTAWA — KARTY
   ============================================================ */
.metody-delivery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.metody-delivery-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.metody-delivery-card:hover {
    border-color: rgba(250,204,21,0.2);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

.metody-delivery-card-inner {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.metody-delivery-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.metody-delivery-icon-wrap--orange {
    background: rgba(249,115,22,0.12);
    border: 1px solid rgba(249,115,22,0.3);
    color: #f97316;
}

.metody-delivery-icon-wrap--yellow {
    background: rgba(250,204,21,0.12);
    border: 1px solid rgba(250,204,21,0.3);
    color: #FACC15;
}

.metody-delivery-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.metody-delivery-title {
    font-family: Oswald, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    margin: 0;
}

.metody-delivery-desc {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: #d8dbe8;
}

.metody-delivery-desc p { margin: 0; }

/* Features */
.metody-delivery-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.metody-delivery-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #c8cdd8;
}

.metody-delivery-features li i {
    color: #34d399;
    font-size: 11px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* Meta */
.metody-delivery-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}

.metody-delivery-meta-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mdm-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.mdm-val {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #c8cdd8;
    font-weight: 600;
    text-align: right;
}

/* Tagi specjalne */
.metody-delivery-pobranie-tag,
.metody-delivery-inpost-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    width: fit-content;
}

.metody-delivery-pobranie-tag {
    background: rgba(250,204,21,0.08);
    border: 1px solid rgba(250,204,21,0.2);
    color: #FACC15;
}

.metody-delivery-inpost-badge {
    background: rgba(249,115,22,0.08);
    border: 1px solid rgba(249,115,22,0.2);
    color: #f97316;
}

/* ============================================================
   TABELA PORÓWNAWCZA
   ============================================================ */
.metody-table-section {
    width: 100%;
    padding: 80px 0 60px;
    background: #0d0f1a;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.metody-table-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
}

.metody-compare-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07);
}

.metody-compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.metody-compare-table thead tr {
    background: #0a0c14;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.metody-compare-table th {
    font-family: Oswald, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #FACC15;
    padding: 16px 20px;
    text-align: left;
}

.metody-compare-table td {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #c8cdd8;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
    background: #12151f;
}

.metody-compare-table tbody tr:last-child td { border-bottom: none; }

.metody-compare-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

.mct-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
}

.mct-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.mct-icon--payu    { background: #d91e52; color: #fff; font-family: Oswald, sans-serif; letter-spacing: 0.05em; }
.mct-icon--paynow  { background: #00a372; color: #fff; font-family: Oswald, sans-serif; letter-spacing: 0.05em; }
.mct-icon--pobranie { background: rgba(250,204,21,0.15); border: 1px solid rgba(250,204,21,0.3); color: #FACC15; font-size: 12px; }
.mct-icon--kurier  { background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.25); color: #f97316; font-size: 12px; }
.mct-icon--inpost  { background: rgba(250,204,21,0.12); border: 1px solid rgba(250,204,21,0.25); color: #FACC15; font-size: 12px; }

.mct-tag {
    display: inline-block;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 5px;
}

.mct-tag--blue   { background: rgba(99,102,241,0.15); color: #818cf8; }
.mct-tag--orange { background: rgba(249,115,22,0.12); color: #f97316; }
.mct-tag--yellow { background: rgba(250,204,21,0.12); color: #FACC15; }

.mct-yes { color: #34d399; font-size: 16px; }
.mct-no  { color: #d8dbe8; font-size: 16px; }
.mct-shield { color: #7c3aed; font-size: 14px; margin-right: 4px; }

/* ============================================================
   FAQ
   ============================================================ */
.metody-faq {
    width: 100%;
    padding: 100px 0 80px;
    background: #0a0c14;
}

.metody-faq-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metody-faq-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 12px;
}

.metody-faq-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 12px;
    text-align: center;
}

.metody-faq-sub {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #d8dbe8;
    text-align: center;
    margin: 0 0 40px;
    line-height: 1.65;
}

.metody-faq-sub p { margin: 0; }

.metody-faq-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metody-faq-item {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.metody-faq-item.open { border-color: rgba(250,204,21,0.2); }

.metody-faq-q {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    text-align: left;
}

.metody-faq-q span {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

.metody-faq-arrow {
    color: #fff;
    font-size: 11px;
    flex-shrink: 0;
    transition: transform 0.25s;
}

.metody-faq-item.open .metody-faq-arrow { transform: rotate(180deg); }

.metody-faq-a {
    display: none;
    padding: 0 20px 18px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: #d8dbe8;
}

.metody-faq-a p { margin: 0 0 10px; }
.metody-faq-a p:last-child { margin: 0; }
.metody-faq-a strong { color: #c8cdd8; }
.metody-faq-a a { color: #FACC15; text-decoration: none; }
.metody-faq-a a:hover { text-decoration: underline; }

/* ============================================================
   CTA KOŃCOWE
   ============================================================ */
.metody-cta {
    width: 100%;
    padding: 100px 60px;
    background: linear-gradient(160deg, #1a0f2e 0%, #12102a 50%, #0d0f1a 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.metody-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(124,58,237,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.metody-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.metody-cta-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(250,204,21,0.1);
    border: 1px solid rgba(250,204,21,0.25);
    color: #FACC15;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.metody-cta-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(32px, 4.5vw, 58px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    line-height: 1;
}

.metody-cta-sub {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin: 0;
    line-height: 1.7;
}

.metody-cta-sub p { margin: 0; }

.metody-cta-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .metody-payment-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .metody-hero-inner,
    .metody-section-inner,
    .metody-table-inner,
    .metody-faq-inner { padding: 0 24px; }
    .metody-hero { padding: 60px 0 80px; }
    .metody-delivery-grid { grid-template-columns: 1fr; }
    .metody-trust-item { padding: 8px 12px; }
    .metody-trust-div { display: none; }
    .metody-cta { padding: 64px 24px; }
}

@media (max-width: 700px) {
    .metody-payment-grid { grid-template-columns: 1fr; }
    .metody-trust-bar { gap: 8px; padding: 16px 20px; }
}

@media (max-width: 480px) {
    .metody-heading { font-size: 36px; }
    .metody-delivery-card-inner { padding: 24px 20px; }
    .metody-payment-card { padding: 24px 20px; }
    .metody-table-inner { padding: 0 16px; }
    .metody-faq-inner { padding: 0 16px; }
}

/* ============================================================
   FORMAT 3L / 5L
   ============================================================ */
.format {
    width: 100%;
    padding: 100px 0 80px;
    background: #0a0c14;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.format-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* ── PRAWA: tekst ── */
.format-content {
    order: 2;
}

.format-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FACC15;
    margin-bottom: 16px;
}

.format-heading {
    font-family: Oswald, sans-serif;
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin: 0 0 32px;
}

.format-accent {
    color: #FACC15;
}

.format-objection {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid #FACC15;
    border-radius: 0 12px 12px 0;
    padding: 18px 20px;
    margin-bottom: 32px;
}

.format-objection-q {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 6px;
}

.format-objection-a {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.6;
}

.format-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

.format-card {
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 24px 22px;
    transition: border-color 0.25s, transform 0.25s;
}

.format-card:hover {
    border-color: rgba(250,204,21,0.25);
    transform: translateY(-3px);
}

.format-card--alt {
    border-color: rgba(124,58,237,0.25);
}

.format-card--alt:hover {
    border-color: rgba(124,58,237,0.5);
}

.format-card-vol {
    font-family: Oswald, sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #FACC15;
    line-height: 1;
}

.format-card--alt .format-card-vol {
    color: #a78bfa;
}

.format-card-porcje {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.06em;
    margin: 6px 0 16px;
    text-transform: uppercase;
}

.format-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.format-card-list li {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #ffffff;
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.format-card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #FACC15;
    font-weight: 700;
}

.format-card--alt .format-card-list li::before {
    color: #a78bfa;
}

.format-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250,204,21,0.08);
    border: 1px solid rgba(250,204,21,0.2);
    border-radius: 20px;
    padding: 8px 18px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #FACC15;
    letter-spacing: 0.04em;
}

.format-pill i { font-size: 12px; }

.format-visuals {
    order: 1;
    position: relative;
    height: 520px;
}

.format-visual-card {
    position: absolute;
    inset: 0;
    background: #12151f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    transform: rotate(-6deg);
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1),
                border-color 0.25s,
                box-shadow 0.4s;
}

.format-visual-card:hover {
    transform: rotate(-8deg) scale(1.02);
    border-color: rgba(250,204,21,0.3);
    box-shadow: 0 24px 64px rgba(0,0,0,0.65);
}

.format-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.format-visual-cap {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .format-inner {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 0 28px;
    }

    .format-content { order: 2; }
    .format-visuals  { order: 1; height: 360px; }
}

@media (max-width: 600px) {
    .format { padding: 64px 0 56px; }
    .format-inner  { padding: 0 20px; }
    .format-cards  { grid-template-columns: 1fr; }
    .format-visuals { height: 280px; }
    .format-visual-card { width: 72%; }
}

  .cert-section { background: #111; padding: 48px 0; font-family: sans-serif; }
  .cert-heading { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 32px; text-transform: uppercase; }
  .cert-row { display: flex; align-items: center; background: #1a1a1a; border: 1px solid #2a2a2a; margin-bottom: 12px; }
  .cert-img { width: 140px; height: 120px; object-fit: cover; flex-shrink: 0; display: block; }
  .cert-body { flex: 1; padding: 20px 24px; border-left: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; }
  .cert-num { color: #9a8040; font-size: 12px; font-weight: 500; margin-right: 6px; }
  .cert-title { color: #fff; font-size: 16px; font-weight: 700; margin: 0 0 6px; }
  .cert-desc { color: #aaa; font-size: 13px; margin: 0; line-height: 1.5; }
  .cert-tag { width: 160px; flex-shrink: 0; padding: 12px 16px; text-align: center; border: 1.5px solid #b8922a; color: #d4a83a; font-size: 13px; font-weight: 700; line-height: 1.4;}

  /* ── NAPRAWA OVERFLOW ─────────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

.cart-page {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

.cart-page-inner {
    box-sizing: border-box;
    max-width: 100%;          /* zapobiega wychodzeniu poza viewport */
}

/* ── NAZWY UPSELL MAX 35 ZNAKÓW ───────────────────────── */
.cart-upsell-name {
    max-width: 35ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ── UPSELL CARD — nie wystawaj ───────────────────────── */
.cart-upsell-card {
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.cart-upsell-info {
    min-width: 0;
    overflow: hidden;
    flex: 1;
}