/* -------------------------------------------------
   0. FONTS & VARIABLES
------------------------------------------------- */

:root{
    --color-cream:      #f7f4ee;
    --color-cream-alt:  #f1ede4;
    --color-white:      #ffffff;
    --color-white-grey: #f7f7f5;
    --color-dark:       #000000;
    --color-dark-soft:  #221e18;
    --color-text:       #2b271f;
    --color-text-muted: #756f62;
    --color-line:       #e4dfd3;
    --color-line-dark:  #3a352c;
    --color-text-green: #0c9c00;

    --font-body:    'Jost', Arial, sans-serif;
    --font-title: "Fraunces", serif;
    

    /* Jedyne dwie wielkosci czcionki uzywane w calym motywie (poza tytulami/naglowkami) */
    --fs-base: 14px;
    --fs-title: 13px;
    --fs-sm:   12px;


    --container: 1280px;
    --gap: 24px;
    --radius: 2px;

    /* Ujednolicone paddingi/marginesy przyciskow */
    --btn-padding:      10px 32px; /* domyslny .btn */
    --btn-padding-sm:   12px 22px; /* .btn-sm - ciasne miejsca (stopka, koszyk, karty produktow) */
    --btn-font-size:    12px;
    --btn-spacing-top:  16px; /* odstep nad przyciskiem, gdy stoi po tekscie */


    --luxora-veil: oklch(0.16 0.015 60);
    --luxora-veil-soft: oklch(0.21 0.018 60);
    --luxora-veil-deep: oklch(0.11 0.012 60);
 
    --luxora-ink: oklch(0.97 0.012 80);
    --luxora-sand: oklch(0.82 0.045 70);

    --luxora-ease: cubic-bezier(.16, 1, .3, 1);

    --luxora-line: color-mix(in oklab, var(--luxora-sand) 35%, transparent);

    --luxora-font-title: "Fraunces", Georgia, serif;
}

/* -------------------------------------------------
   1. RESET
------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-white);
    -webkit-font-smoothing:antialiased;
    text-rendering: optimizeLegibility;
    font-weight:450;
    line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
h1,h2,h3,h4{ font-family:var(--font-body); font-weight:500; margin:0; color:var(--color-dark); }
p{ margin:0; }
.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 20px;
}
.eyebrow{
    font-size:var(--fs-sm);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--color-text-muted);
    font-weight:400;
    display:block;
    margin-bottom:14px;
}
a:focus-visible, button:focus-visible, input:focus-visible{
    
    outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}

/* -------------------------------------------------
   2. BUTTONS
------------------------------------------------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
 
    padding: 10px 24px 8px;
 
    font-family: var(--luxora-font-body);
    font-size: .74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0;
 
    border: 1px solid transparent;
 
    transition: background .5s var(--luxora-ease), color .5s var(--luxora-ease), border-color .5s var(--luxora-ease), transform .4s var(--luxora-ease);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active{ transform:scale(.97); }
/* Kompaktowy wariant przycisku - te same proporcje, mniejszy padding.
   Uzywany wszedzie tam, gdzie .btn nie miesci sie w waskiej przestrzeni
   (stopka, koszyk, karty produktow, add-to-cart). */
.btn-sm{
    padding:var(--btn-padding-sm);
    font-size:var(--btn-font-size);
}

.btn-fill-light {
    background: var(--color-white);
    color: var(--luxora-veil-deep);
}
.btn-fill-light:hover{ 
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-outline-light{
    background:transparent;
    color:var(--color-white);
    border-color:rgba(255,255,255,.6);
}
.btn-outline-light:hover{ background:rgba(255,255,255,.12); }

.btn-outline-dark{
    background:transparent;
    color:var(--color-dark);
    border-color:var(--color-dark);
}
.btn-outline-dark:hover{ background:var(--color-dark); color:var(--color-white); }

.btn-fill-dark{
    background:var(--color-dark);
    color:var(--color-white);
}
.btn-fill-dark:hover{ background:var(--color-dark-soft); }

/* -------------------------------------------------
   3. TOP BAR
------------------------------------------------- */
.topbar{
    background:var(--color-white);
    border-bottom:1px solid var(--color-line);
    font-size:var(--fs-sm);
    color:var(--color-text-muted);
}
.topbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:38px;
}
.topbar-left{ display:flex; align-items:center; gap:18px; }
.topbar-left span{ position:relative; padding-right:18px; }
.topbar-left span:not(:last-child)::after{
    content:"";
    position:absolute; right:0; top:50%;
    width:1px; height:12px;
    background:var(--color-line);
    transform:translateY(-50%);
}
.topbar-right{ display:flex; align-items:center; gap:16px; }
.topbar-right button{
    background:none; border:none; color:var(--color-text-muted);
    display:flex; align-items:center; padding:0;
    transition:transform .1s ease-out;
}
.topbar-right button:active{ transform:scale(.9); }
.topbar-right svg{ width:16px; height:16px; }


/* ===== Badges (Nowość / Bestseller) ===== */
.product-badges{
    position:absolute;
    top:10px; left:10px;
    z-index:3;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.product-badge{
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:5px 10px;
    border-radius:999px;
    color:var(--color-white);
    width:max-content;
}

.product-badge--new{ background:#2f7a4d; }
.product-badge--bestseller{ background:var(--color-dark); }

/* ===== Responsywność ===== */
@media (max-width: 900px){
    .collection-banner{ min-height:180px; padding:24px; }
    .collection-products-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 480px){
    .collection-products-toggle{ width:100%; justify-content:center; }
}


/* ===== Announcement bar – zapętlona animacja tekstu (jak na etq-amsterdam.com) ===== */
.announcement-bar {
    background: #0080ff;
    color: #fff;
    width: 100%;
}
.announcement-bar__container {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 16px;
    box-sizing: border-box;
}
.announcement-bar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
}
.announcement-bar__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family:var(--font-body);
    font-weight:400;
    font-size:var(--fs-sm);
    line-height:20px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    animation: announcement-fade 7s infinite;
}
.announcement-bar__item strong {
    font-weight: 600;
}
/* drugi element startuje w połowie cyklu, żeby się zazębiały */
.announcement-bar__item:nth-child(2) {
    animation-delay: 3.5s;
}

@keyframes announcement-fade {
    0%   { opacity: 0; transform: translateY(10px); }
    8%   { opacity: 1; transform: translateY(0); }
    43%  { opacity: 1; transform: translateY(0); }
    50%  { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 0; }
}


/* =================================================
   KOSZYK BOCZNY (CART DRAWER) — dodane
================================================= */
/* =================================================
   KOSZYK — ZNACZEK PRZY IKONIE
================================================= */
.header-cart-btn{ position:relative; }

/* liczba produktów - w tym samym miejscu co ikona, na czarnym kole;
   gdy widoczna, całkowicie zastępuje ikonę koszyka (patrz reguła
   #cartToggle:has(...) svg poniżej) */
.cart-count-badge{
    display:none;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--color-dark);
    color:var(--color-white);
    font-family:var(--font-body);
    font-size:var(--fs-sm);
    font-weight:600;
    line-height:1;
}
.cart-count-badge.is-visible{
    display:flex;
    animation:cart-badge-pop .35s ease;
}
 
/* ikona koszyka znika, gdy liczba jest widoczna - liczba ją zastępuje */
#cartToggle:has(.cart-count-badge.is-visible) svg{
    display:none;
}
 
@keyframes cart-badge-pop{
    0%{ transform:scale(.4); }
    60%{ transform:scale(1.15); }
    100%{ transform:scale(1); }
}
 
@media (max-width:600px){

    }
    #cartToggle svg{ width:18px; height:18px; }
    .cart-count-badge{ width:24px; height:24px; font-size:10px; }

 

/* =================================================
   OVERLAY (przyciemnione tło)
================================================= */
.cart-drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(23,20,15,.5);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
    z-index:199;
}
body.cart-drawer-open .cart-drawer-overlay{
    opacity:1;
    visibility:visible;
}
body.cart-drawer-open{ overflow:hidden; }

/* =================================================
   PANEL KOSZYKA (off-canvas)
================================================= */
.cart-drawer{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    height:100dvh;
    width:440px;
    max-width:92vw;
    background:var(--color-white);
    
    z-index:200;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
body.cart-drawer-open .cart-drawer{
    transform:translateX(0);
    box-shadow:-30px 0 60px rgba(23,20,15,.16);
}
.cart-drawer.is-updating .cart-drawer-body{
    opacity:.45;
    pointer-events:none;
    transition:opacity .2s ease;
}

/* ---- nagłówek ---- */
.cart-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 32px;
    border-bottom:1px solid var(--color-line);
    flex-shrink:0;
}
.cart-drawer-head h3{
    font-size:14px;
    letter-spacing:.01em;
}
.cart-drawer-count{
    font-family:var(--font-body);
    font-size:var(--fs-base);
    font-weight:400;
    color:var(--color-text-muted);
}
.cart-drawer-close{
    background:none;
    border:none;
    cursor:pointer;
    display:inline-flex;
    padding:6px;
    margin:-6px;
    color:var(--color-dark);
    transition:opacity .2s ease;
}
.cart-drawer-close:hover{ opacity:.55; }
.cart-drawer-close svg{ width:19px; height:19px; }

/* ---- lista produktów ---- */
.cart-drawer-body{
    flex:1 1 auto;
    overflow-y:auto;
    padding:8px 32px;
}
.cart-drawer-item{
    display:grid;
    grid-template-columns:76px 1fr auto;
    gap:18px;
    padding:22px 0;
    border-bottom:1px solid var(--color-line);
}
.cart-drawer-item:last-child{ border-bottom:none; }

.cart-drawer-item-img{
    display:block;
    width:76px;
    height:76px;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--color-cream);
    flex-shrink:0;
}
.cart-drawer-item-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cart-drawer-item-info{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}
.cart-drawer-item-name{
    font-family:var(--font-body);
    font-size:var(--fs-base);
    font-weight:400;
    color:var(--color-dark);
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    transition:opacity .2s ease;
}
.cart-drawer-item-name:hover{ opacity:.6; }

.cart-drawer-item-meta{
    font-size:var(--fs-sm);
    color:var(--color-text-muted);
    line-height:1.5;
}
.cart-drawer-item-meta p{ margin:0; }

.cart-drawer-item-qty{
    display:inline-flex;
    align-items:center;
    border:1px solid var(--color-line);
    border-radius:var(--radius);
    width:fit-content;
}
.qty-btn{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    font-size:var(--fs-base);
    line-height:1;
    color:var(--color-dark);
    cursor:pointer;
    transition:background .2s ease;
}
.qty-btn:hover{ background:var(--color-cream); }
.qty-value{
    min-width:26px;
    text-align:center;
    font-size:var(--fs-sm);
    font-weight:400;
    color:var(--color-dark);
}

.cart-drawer-item-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:space-between;
    text-align:right;
}
.cart-drawer-item-price{
    font-family:var(--font-body);
    font-size:var(--fs-base);
    font-weight:400;
    color:var(--color-dark);
    white-space:nowrap;
}
.cart-drawer-item-remove{
    background:none;
    border:none;
    cursor:pointer;
    padding:4px;
    margin:0 -4px -4px 0;
    color:var(--color-text-muted);
    transition:color .2s ease;
}
.cart-drawer-item-remove:hover{ color: var(--color-dark); }
.cart-drawer-item-remove svg{ width:16px; height:16px; }

/* ---- pusty koszyk ---- */
.cart-drawer-empty{
    height:100%;
    min-height:320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    text-align:center;
    padding:40px 20px;
}
.cart-drawer-empty svg{
    width:52px;
    height:52px;
    color:var(--color-line-dark);
    opacity:.5;
}
.cart-drawer-empty p{
    font-size:var(--fs-base);
    color:var(--color-text-muted);
}

/* ---- stopka / podsumowanie ---- */
.cart-drawer-footer{
    flex-shrink:0;
    padding:24px 32px 30px;
    background:var(--color-white-grey);
    border-top:1px solid var(--color-line);
}
.cart-drawer-subtotal{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:6px;
}
.cart-drawer-subtotal span:first-child{
    font-family:var(--font-body);
    font-size:var(--fs-sm);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}
.cart-drawer-subtotal .amount{
    font-family:var(--font-body);
    font-size:20px;
    color:var(--color-dark);
}
.cart-drawer-note{
    font-size:var(--fs-sm);
    color:var(--color-text-muted);
    margin-bottom:18px;
}
.cart-drawer-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.cart-drawer-actions .btn{ width:100%; }

/* ---- stan ładowania przycisku "Dodaj do koszyka" ---- */
.single_add_to_cart_button.is-loading,
.ajax_add_to_cart.loading{
    position:relative;
    color:transparent !important;
    pointer-events:none;
}
.single_add_to_cart_button.is-loading::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:16px; height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:cart-btn-spin .6s linear infinite;
}
@keyframes cart-btn-spin{ to{ transform:rotate(360deg); } }

/* =================================================
   RESPONSYWNOŚĆ
================================================= */
@media (max-width:600px){
    .cart-drawer{ width:100%; max-width:100%; }
    .cart-drawer-head,
    .cart-drawer-body,
    .cart-drawer-footer{ padding-left:20px; padding-right:20px; }
    .cart-drawer-item{ grid-template-columns:64px 1fr auto; gap:14px; }
    .cart-drawer-item-img{ width:64px; height:64px; }
}

/* =========================================
   STEPPER ILOŚCI – KOSZYK
========================================= */

.cart-row-qty .quantity {
    display: inline-flex;
    align-items: center;
    margin: 0;

    height: 42px;
}

.cart-row-qty .quantity .qty-step {
    width: 38px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--color-dark);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--fs-base);
    line-height: 1;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.cart-row-qty .quantity .qty-step:hover {
    background: #f5f5f5;
}

.cart-row-qty .quantity .qty {
    width: 42px;
    height: 40px;
    padding: 0;
    margin: 0;


    border: 0;
    background: transparent;

    text-align: center;

    font-size: var(--fs-base);
    line-height: 40px;
    color: var(--color-text-muted);

    appearance: textfield;
    -moz-appearance: textfield;
}

.cart-row-qty .quantity .qty:focus {
    outline: none;
    box-shadow: none;
}

.cart-row-qty .quantity .qty::-webkit-inner-spin-button,
.cart-row-qty .quantity .qty::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}


/* =================================================
   ZNACZNIKI "NOWOŚĆ" / "BESTSELLER" NA ZDJĘCIU PRODUKTU
   (content-product.php) — nachodzą na .product-media,
   po przeciwnej stronie niż etykieta promocji (.onsale)
================================================= */
.luxora-product-badges{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}
 
.luxora-badge{
    padding: 7px 10px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--fs-sm, 11px);
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}
 
.luxora-badge-new{
    background: var(--color-dark);
    color: var(--color-white);
}
 
.luxora-badge-bestseller{
    background: var(--color-white);
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
}
 
@media (max-width: 500px){
    .luxora-product-badges{
        top: 8px;
        right: 8px;
        gap: 4px;
    }
    .luxora-badge{
        padding: 6px 9px;
        font-size: 10px;
    }
}


/* =================================================
   WYSZUKIWARKA — PŁYWAJĄCY PANEL Z MARGINESAMI
   (inc/search-module.php + assets/js/search-overlay.js)
================================================= */
 
.search-overlay-backdrop{
    position:fixed;
    inset:0;
    background:rgba(23,20,15,.5);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
    z-index:299;
}
body.search-overlay-open .search-overlay-backdrop{
    opacity:1;
    visibility:visible;
}
body.search-overlay-open{ overflow:hidden; }
 
/* panel z lekkimi marginesami z każdej strony (16px dookoła - góra tak
   samo jak boki), płynnie "wpływa" od góry przy otwarciu */
.search-overlay{
    position:fixed;
    top:16px;
    left:16px;
    right:16px;
    z-index:300;
    max-width:1000px;
    margin:0 auto;
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    background:var(--color-white);
    border-radius:var(--radius);
    box-shadow:0 30px 80px rgba(23,20,15,.22);
    opacity:0;
    visibility:hidden;
    transform:translateY(-36px) scale(.98);
    transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1), visibility .5s ease;
}
body.search-overlay-open .search-overlay{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}
 
.search-overlay-inner{
    position:relative;
    padding:56px 48px 48px;
}
 
.search-overlay-close{
    position:absolute;
    top:20px;
    right:22px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    margin:-8px;
    color:var(--color-dark);
    transition:opacity .2s ease;
}
.search-overlay-close:hover{ opacity:.55; }
.search-overlay-close svg{ width:18px; height:18px; }
 
/* ---- pole wyszukiwania ---- */
.search-overlay-form{
    display:flex;
    align-items:center;
    gap:16px;
    border-bottom:1px solid var(--color-line);
    padding-bottom:16px;
}
.search-overlay-input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:none;
    font-family:var(--font-display);
    font-size:var(--fs-base);
    color:var(--color-dark);
    caret-color:var(--color-dark);
}
.search-overlay-input::placeholder{
    color:var(--color-text-muted);
    opacity:.7;
}
.search-overlay-submit{
    flex-shrink:0;
    background:none;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    color:var(--color-dark);
    transition:opacity .2s ease;
}
.search-overlay-submit:hover{ opacity:.6; }
.search-overlay-submit svg{ width:22px; height:22px; }
 
.search-overlay-hint{
    margin-top:14px;
    font-size:13px;
    color:var(--color-text-muted);
}
 
/* WAŻNE: [hidden] musi być tu jawnie wymuszony - inaczej reguła
   "display:grid/flex" niżej (ta sama specyficzność co domyślny atrybut
   hidden przeglądarki) wygrywa i przełączanie JS-em (browse.hidden = true)
   nie ma żadnego efektu wizualnego */
.search-overlay-browse[hidden],
.search-overlay-results[hidden],
.search-overlay-viewall[hidden]{
    display:none !important;
}
 
/* ---- widok startowy: 3 kolumny (odzwierciedlenie footera) ---- */
.search-overlay-browse{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
    margin-top:36px;
    padding-top:30px;

}
.search-browse-col h4{
    font-family:var(--font-body);
    font-size: var(--fs-base);
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: var(--color-dark);
    margin-bottom:18px;
}
.search-browse-col ul{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.search-browse-col a{
    font-size:14px;
    color:var(--color-dark);
    transition:opacity .2s ease;
    font-weight: 400;
}
.search-browse-col a:hover{ opacity:.6; }
 
/* kolumny "wylewają się" jedna po drugiej przy otwarciu panelu */
.search-browse-col{
    opacity:0;
    transform:translateY(16px);
}
body.search-overlay-open .search-browse-col{
    animation:search-col-in .55s cubic-bezier(.22,.61,.36,1) both;
}
body.search-overlay-open .search-browse-col:nth-child(1){ animation-delay:.12s; }
body.search-overlay-open .search-browse-col:nth-child(2){ animation-delay:.2s; }
body.search-overlay-open .search-browse-col:nth-child(3){ animation-delay:.28s; }
 
@keyframes search-col-in{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
}
 
/* przycisk "Zobacz wszystkie wyniki" pod dwoma kolumnami wyników */
.search-overlay-viewall{
    display:flex;
    width:fit-content;
    margin:32px auto 4px;
}
 
/* ---- wyniki na żywo: 2 kolumny (Produkty / Kategorie) ---- */
.search-overlay-results{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    margin-top:36px;
    padding-top:30px;
    border-top:1px solid var(--color-line);
    transition:opacity .15s ease;
    font-weight: 400;
}
.search-overlay-results.is-loading{
    opacity:.45;
    pointer-events:none;
}
.search-results-col h4{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:400;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--color-text-muted);
    margin-bottom:16px;
}
.search-results-list{ display:flex; flex-direction:column; }
 
.search-overlay-empty{
    font-size:13px;
    color:var(--color-text-muted);
    padding:8px 0;
}
 
/* produkty */
.search-result-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid var(--color-line);
    transition:opacity .2s ease;
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ opacity:.65; }
 
.search-result-thumb{
    width:50px;
    height:50px;
    flex-shrink:0;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--color-cream);
}
.search-result-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
 
.search-result-info{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}
.search-result-name{
    font-size:13.5px;
    color:var(--color-dark);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.search-result-price{
    font-size:12px;
    color:var(--color-text-muted);
}
 
/* kategorie / podkategorie */
.search-result-category{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:13px 0;
    border-bottom:1px solid var(--color-line);
    transition:opacity .2s ease;
}
.search-result-category:last-child{ border-bottom:none; }
.search-result-category:hover{ opacity:.6; }
.search-result-category-name{
    font-size:13.5px;
    color:var(--color-dark);
}
.search-result-category-count{
    font-size:11.5px;
    color:var(--color-text-muted);
    white-space:nowrap;
}
 
/* =================================================
   RESPONSYWNOŚĆ — WYSZUKIWARKA
================================================= */
@media (max-width:900px){
    .search-overlay-browse,
    .search-overlay-results{
        gap:28px;
    }
}
 
@media (max-width:700px){
    .search-overlay-inner{ padding:64px 28px 40px; }
    .search-overlay-browse{
        grid-template-columns:1fr 1fr;
        row-gap:32px;
    }
    .search-overlay-results{
        grid-template-columns:1fr;
        gap:28px;
    }
}
 
@media (max-width:480px){
    .search-overlay{ top:10px; left:10px; right:10px; }
    .search-overlay-inner{ padding:56px 20px 36px; }
    .search-overlay-close{ top:14px; right:14px; }
    .search-overlay-browse{
        grid-template-columns:1fr;
        row-gap:28px;
    }
}

/* =================================================
   KONTO — PŁYWAJĄCY PANEL Z MARGINESAMI
   (inc/account-module.php + assets/js/account-overlay.js)
================================================= */

.account-overlay-backdrop{
    position:fixed;
    inset:0;
    background:rgba(23,20,15,.5);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
    z-index:299;
}
body.account-overlay-open .account-overlay-backdrop{
    opacity:1;
    visibility:visible;
}
body.account-overlay-open{ overflow:hidden; }

/* panel z lekkimi marginesami z każdej strony (16px dookoła - góra tak
   samo jak boki), płynnie "wpływa" od góry przy otwarciu - ten sam
   wzorzec co panel wyszukiwania, węższy (konto ma mniej treści) */
.account-overlay{
    position:fixed;
    top:16px;
    left:16px;
    right:16px;
    z-index:300;
    max-width:640px;
    margin:0 auto;
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    background:var(--color-white);
    border-radius:var(--radius);
    box-shadow:0 30px 80px rgba(23,20,15,.22);
    opacity:0;
    visibility:hidden;
    transform:translateY(-36px) scale(.98);
    transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1), visibility .5s ease;
}
body.account-overlay-open .account-overlay{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.account-overlay-inner{
    position:relative;
    padding:56px 48px 48px;
}

.account-overlay-close{
    position:absolute;
    top:20px;
    right:22px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    margin:-8px;
    color:var(--color-dark);
    transition:opacity .2s ease;
}
.account-overlay-close:hover{ opacity:.55; }
.account-overlay-close svg{ width:18px; height:18px; }

/* ---- nagłówek (wspólny dla obu stanów) ---- */
.account-overlay-header{
    margin-bottom:36px;
}
.account-overlay-header h2{
    font-family:var(--font-body);
    font-size:22px;
    font-weight:500;
    color:var(--color-dark);
}

/* =================================================
   STAN: NIEZALOGOWANY — logowanie + rejestracja
   (wc_get_template('myaccount/form-login.php'))
================================================= */

/* WooCommerce owija oba formularze w #customer_login.col2-set - ustawiamy
   je obok siebie na desktopie, jeden pod drugim na mobile */
.account-overlay-forms #customer_login.col2-set{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 48px;
}
.account-overlay-forms .u-column1.col-1,
.account-overlay-forms .u-column2.col-2{
    min-width:0;
}
/* separator pionowy między kolumnami */
.account-overlay-forms .u-column2.col-2{
    border-left:1px solid var(--color-line);
    padding-left:48px;
}

.account-overlay-forms h2{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--color-text-muted);
    margin-bottom:22px;
}

/* pola formularza (label/input) - reużywamy tej samej stylistyki co
   pola na kasie (.form-row, .input-text już zdefiniowane globalnie) */
.account-overlay-forms .form-row{
    width:100%;
    margin:0 0 16px;
}

.account-overlay-forms .woocommerce-form-login__rememberme{
    display:flex;
    align-items:center;
    gap:8px;
    margin:4px 0 22px;
    font-size:13px;
    color:var(--color-text);
    cursor:pointer;
}
.account-overlay-forms .woocommerce-form-login__rememberme input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color:var(--color-dark);
    margin:0;
}

.account-overlay-forms button[type="submit"]{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:15px 34px;
    border:1px solid var(--color-dark);
    border-radius:var(--radius);
    background:var(--color-dark);
    color:var(--color-white);
    font-family:var(--font-body);
    font-size:12px;
    letter-spacing:.15em;
    text-transform:uppercase;
    font-weight:500;
    transition:background .2s ease, transform .1s ease-out;
}
.account-overlay-forms button[type="submit"]:hover{ background:var(--color-dark-soft); }
.account-overlay-forms button[type="submit"]:active{ transform:scale(.98); }

.account-overlay-forms .woocommerce-LostPassword{
    margin-top:16px;
    font-size:12.5px;
}
.account-overlay-forms .woocommerce-LostPassword a{
    color:var(--color-text-muted);
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color .2s ease;
}
.account-overlay-forms .woocommerce-LostPassword a:hover{ color:var(--color-dark); }

.account-overlay-forms .woocommerce-privacy-policy-text{
    margin-top:18px;
    font-size:11.5px;
    color:var(--color-text-muted);
    line-height:1.6;
}

/* jeżeli rejestracja jest wyłączona w ustawieniach WooCommerce, kolumna
   #customer_login staje się jednokolumnowa - dopilnowujemy węższego układu */
.account-overlay-forms #customer_login.col2-set:not(:has(.u-column2)){
    grid-template-columns:1fr;
    max-width:360px;
    margin:0 auto;
}

/* =================================================
   STAN: ZALOGOWANY — menu konta
================================================= */

.account-overlay-menu ul{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:20px;
}
.account-overlay-menu a{
    display:block;
    padding:14px 0px;
    border-bottom:1px solid var(--color-line);
    font-size:15px;
    color:var(--color-dark);
    transition:opacity .2s ease;
}
.account-overlay-menu a:hover{ opacity:.6; }

.account-overlay-logout{
    display:inline-flex;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--color-text-muted);
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color .2s ease;
}
.account-overlay-logout:hover{ color:var(--color-dark); }

/* =================================================
   RESPONSYWNOŚĆ — KONTO
================================================= */
@media (max-width:700px){
    .account-overlay-inner{ padding:64px 28px 40px; }

    .account-overlay-forms #customer_login.col2-set{
        grid-template-columns:1fr;
        gap:36px;
    }
    .account-overlay-forms .u-column2.col-2{
        border-left:none;
        padding-left:0;
        padding-top:32px;
        border-top:1px solid var(--color-line);
    }
}

@media (max-width:480px){
    .account-overlay{ top:10px; left:10px; right:10px; }
    .account-overlay-inner{ padding:56px 20px 36px; }
    .account-overlay-close{ top:14px; right:14px; }
}

/* =========================================================
   PREMIUM CONTACT PANEL
========================================================= */

.contact-panel-overlay{
    position:fixed;
    inset:0;
    background:rgba(18,18,18,.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    z-index:9998;
    opacity:0;
    transition:opacity .35s ease;
}

.contact-panel-overlay.is-visible{
    opacity:1;
}

.contact-panel{
    position:fixed;
    top:0;
    right:0;
    width:min(620px, 100%);
    height:100vh;
    height:100dvh;
    background:var(--color-white);
    z-index:9999;
    transform:translateX(100%);
    transition:transform .5s cubic-bezier(.22,.61,.36,1);
    box-shadow: none;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.contact-panel.is-open{
    transform:translateX(0);
     box-shadow:-20px 0 60px rgba(0,0,0,.12);
}

.contact-panel-inner{
    min-height:100%;
    padding:56px 56px 48px;
    display:flex;
    flex-direction:column;
}


/* HEADER */

.contact-panel-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px;
    margin-bottom:32px;
}

.contact-panel-header .eyebrow{
    display:block;
    margin-bottom:14px;
}

.contact-panel-header h2{
    margin:0;
    font-size:clamp(32px,4vw,48px);
    line-height:1.05;
    font-weight:400;
    letter-spacing:-.035em;
    color:var(--color-dark);
}

.contact-panel-close{
    flex:0 0 auto;
    width:44px;
    height:44px;
    padding:10px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:50%;
    background:transparent;
    color:var(--color-dark);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.contact-panel-close svg{
    width:100%;
    height:100%;
}

.contact-panel-close:hover{
    background:var(--color-dark);
    color:var(--color-white);
    border-color:var(--color-dark);
    transform:rotate(90deg);
}


/* INTRO */

.contact-panel-intro{
    padding:22px 0;
    margin-bottom:30px;
    border-top:1px solid rgba(0,0,0,.1);
    border-bottom:1px solid rgba(0,0,0,.1);
}

.contact-panel-intro p{
    margin:0;
    font-size:15px;
    line-height:1.7;
    color:var(--color-text-muted);
}

.contact-panel-intro p + p{
    margin-top:5px;
}


/* FORM */

.contact-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.contact-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.contact-field{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.contact-field > span{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--color-dark);
}

.contact-field small{
    font-size:10px;
    text-transform:none;
    letter-spacing:0;
    color:var(--color-text-muted);
}

.contact-field input,
.contact-field select,
.contact-field textarea{
    width:100%;
    border:0;
    border-bottom:1px solid rgba(0,0,0,.18);
    border-radius:0;
    background:transparent;
    padding:11px 0 13px;
    font-family:inherit;
    font-size:15px;
    color:var(--color-dark);
    outline:none;
    transition:border-color .25s ease;
}

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

.contact-field input::placeholder,
.contact-field textarea::placeholder{
    color:var(--color-text-muted);
    opacity:.65;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
    border-color:var(--color-dark);
}


/* SELECT */

.contact-field select{
    appearance:none;
    -webkit-appearance:none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 7px) 50%,
        calc(100% - 2px) 50%;
    background-size:5px 5px;
    background-repeat:no-repeat;
    padding-right:25px;
}


/* CONSENT */

.contact-consent{
    display:flex;
    align-items:flex-start;
    gap:10px;
    cursor:pointer;
}

.contact-consent input{
    flex:0 0 auto;
    width:16px;
    height:16px;
    margin:2px 0 0;
    accent-color:var(--color-dark);
}

.contact-consent span{
    font-size:11px;
    line-height:1.55;
    color:var(--color-text-muted);
}


/* SUBMIT */

.contact-submit{
    width:100%;
    min-height:58px;
    border:1px solid var(--color-dark);
    background:var(--color-dark);
    color:var(--color-white);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px 0 24px;
    cursor:pointer;
    font-family:inherit;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.1em;
    transition:
        background .3s ease,
        color .3s ease;
}

.contact-submit svg{
    width:20px;
    height:20px;
    transition:transform .3s ease;
}

.contact-submit:hover{
    background:transparent;
    color:var(--color-dark);
}

.contact-submit:hover svg{
    transform:translateX(5px);
}

.contact-submit:disabled{
    opacity:.55;
    cursor:not-allowed;
}


/* NOTE */

.contact-form-note{
    margin:0;
    text-align:center;
    font-size:11px;
    line-height:1.5;
    color:var(--color-text-muted);
}


/* DIRECT CONTACT */

.contact-panel-direct{
    margin-top:auto;
    padding-top:34px;
    margin-top:48px;
    border-top:1px solid rgba(0,0,0,.1);
    display:flex;
    flex-direction:column;
    gap:5px;
}

.contact-panel-direct-label{
    margin-bottom:7px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--color-text-muted);
}

.contact-panel-direct a{
    width:max-content;
    font-size:14px;
    color:var(--color-dark);
    text-decoration:none;
    transition:opacity .2s ease;
}

.contact-panel-direct a:hover{
    opacity:.55;
}


/* STATUS */

.contact-panel-status{
    display:none;
    margin-bottom:24px;
    padding:16px 18px;
    font-size:13px;
    line-height:1.6;
    border-left:2px solid var(--color-dark);
    animation:luxoraContactStatus .35s ease;
}

.contact-panel-status.is-visible{
    display:block;
}

.contact-panel-status.is-success{
    background:#f3f5f2;
}

.contact-panel-status.is-error{
    background:#f8eeee;
    border-left-color:#8a4a4a;
}

@keyframes luxoraContactStatus{
    from{
        opacity:0;
        transform:translateY(-8px);
    }

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


/* BODY LOCK */

body.contact-panel-open{
    overflow:hidden;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .contact-panel{
        width:100%;
    }

    .contact-panel-inner{
        padding:32px 24px 35px;
    }

    .contact-panel-header{
        margin-bottom:25px;
    }

    .contact-panel-header h2{
        font-size:36px;
    }

    .contact-panel-close{
        width:40px;
        height:40px;
    }

    .contact-form-row{
        grid-template-columns:1fr;
        gap:22px;
    }

    .contact-panel-intro{
        margin-bottom:25px;
    }

}

@media (max-width:400px){

    .contact-panel-inner{
        padding-left:20px;
        padding-right:20px;
    }

    .contact-panel-header h2{
        font-size:32px;
    }

}

.contact-honeypot{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.woocommerce-message[role="alert"] {
    display: none !important;
}

.woocommerce-error{
    display: none !important;
}

/* =================================================
   PULPIT "MOJE KONTO" (woocommerce/myaccount/dashboard.php)
================================================= */

.account-dashboard-intro{
    font-size:var(--fs-base);
    color:var(--color-text-muted);
    margin-bottom:36px;
    max-width:520px;
    line-height:1.6;
    font-weight: 400;
}

/* ---- karty skrótów ---- */
.account-quick-links{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--gap);
    margin-bottom:48px;
}

.account-quick-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:28px 24px;
    background:var(--color-cream);
    border:1px solid var(--color-line);
    border-radius:var(--radius);
    transition:transform .25s cubic-bezier(.22,.61,.36,1), border-color .2s ease, background .2s ease;
}
.account-quick-card:hover{
    transform:translateY(-4px);
    border-color:var(--color-dark);
    background:var(--color-white);
}

.account-quick-card svg{
    width:26px;
    height:26px;
    color:var(--color-dark);
    margin-bottom:4px;
}

.account-quick-card-title{
    font-family:var(--font-body);
    font-size:15px;
    font-weight:500;
    color:var(--color-dark);
}

.account-quick-card-desc{
    font-size:var(--fs-sm);
    color:var(--color-text-muted);
    line-height:1.5;
}

/* ---- ostatnie zamówienie ---- */
.account-last-order{
    padding-top:36px;
    border-top:1px solid var(--color-line);
}
.account-last-order h2{
    font-family:var(--font-body);
    font-size:15px;
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--color-text-muted);
    margin-bottom:18px;
}

/* wiersz zamówienia - reużywany też w orders.php (lista wszystkich zamówień) */
.account-order-row{
    display:flex;
    align-items:center;
    gap:24px;
    padding:20px 24px;
    background:var(--color-white);
    border:1px solid var(--color-line);
    border-radius:var(--radius);
}

.account-order-row-info{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
    min-width:0;
}

.account-order-number{
    font-family:var(--font-body);
    font-size:var(--fs-base);
    font-weight:500;
    color:var(--color-dark);
    transition:opacity .2s ease;
}
a.account-order-number:hover{ opacity:.6; }

.account-order-date{
    font-size:var(--fs-sm);
    color:var(--color-text-muted);
}

/* znaczek statusu - kolor zależny od modyfikatora status-{slug} */
.account-order-status{
    flex-shrink:0;
    padding:6px 14px;
    border-radius:999px;
    font-size:var(--fs-sm);
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
    background:var(--color-white-grey);
    color:var(--color-text-muted);
}
.account-order-status.status-completed{
    background:rgba(12,156,0,.1);
    color:#0c9c00;
}
.account-order-status.status-processing{
    background:rgba(23,20,15,.08);
    color:var(--color-dark);
}
.account-order-status.status-on-hold,
.account-order-status.status-pending{
    background:rgba(180,140,20,.12);
    color:#8a6a10;
}
.account-order-status.status-cancelled,
.account-order-status.status-failed{
    background:rgba(178,59,59,.1);
    color:#b23b3b;
}
.account-order-status.status-refunded{
    background:var(--color-white-grey);
    color:var(--color-text-muted);
}

.account-order-total{
    flex-shrink:0;
    font-family:var(--font-body);
    font-size:var(--fs-base);
    font-weight:500;
    color:var(--color-dark);
    white-space:nowrap;
}

.account-order-row .btn{
    flex-shrink:0;
}

/* =================================================
   RESPONSYWNOŚĆ — PULPIT
================================================= */
@media (max-width:900px){
    .account-quick-links{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:600px){
    .account-quick-links{
        grid-template-columns:1fr;
    }
    .account-order-row{
        flex-wrap:wrap;
        row-gap:12px;
        padding:18px;
    }
    .account-order-row-info{
        flex:1 1 100%;
        order:1;
    }
    .account-order-status{
        order:2;
    }
    .account-order-total{
        order:3;
        margin-left:auto;
    }
    .account-order-row .btn{
        order:4;
        width:100%;
        margin-top:6px;
    }
}

/* =========================================================
   LUXORA – ACCOUNT PANEL SECTIONS
========================================================= */

.account-main-panel {
    position: relative;
}


/*
 * Wszystkie sekcje są domyślnie zamknięte.
 */

.account-section {
    display: none;
}


/*
 * Aktywna sekcja.
 */

.account-section.is-active {
    display: block;
}


/* =========================================================
   NAGŁÓWEK SEKCJI
========================================================= */

.account-section-header {
    margin-bottom: 32px;
}

.account-section-heading h3{
    font-family: var(--font-body);
    font-size: var(--fs-base);
    
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--color-dark);
}

.account-section-eyebrow {
    display: block;
    margin-bottom: 8px;

    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
}

.account-section-header h2 {
    margin: 0 0 10px;
}

.account-section-header p {
    margin: 0;
    opacity: 0.65;
}


/* =========================================================
   ORDERS
========================================================= */

.account-orders-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.account-order-card {
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #fff;
}


.account-order-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 24px;
    align-items: center;
}


.account-order-card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.account-order-number {
    font-weight: 500;
    font-size: var(--fs-title);
}


.account-order-date {
    font-size: 13px;
    opacity: 0.55;
}


.account-order-status {
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
}


.account-order-total {
    font-size: var(--fs-base) !important;
    font-weight: 400;
    white-space: nowrap;
}

.account-overlay-menu .account-order-view {
    font-size: var(--fs-base) !important;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: underline;

    padding-top: 10px;
}



.account-order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid rgba(0, 0, 0, 0.07);
}


.account-order-items-count {
    font-size: 13px;
    opacity: 0.55;
}

.account-order-item-main {
    padding: 8px 0;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.account-empty-state {
    padding: 40px 0;
    text-align: center;
    font-weight: 400;
}

.account-empty-state h3 {
    margin-bottom: 10px;
}

.account-empty-state p {
    margin-bottom: 24px;
    opacity: 0.65;
}


/* =========================================================
   ACCOUNT DETAILS
========================================================= */

.account-section[data-account-view="edit-account"]
    .woocommerce-EditAccountForm {

    max-width: 620px;
}


/* =========================================================
   ANIMACJA
========================================================= */

.account-section.is-active {
    animation: luxoraAccountSectionIn 0.25s ease both;
}


@keyframes luxoraAccountSectionIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .account-order-card-main {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .account-order-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }


    .account-order-total {
        order: 2;
    }

}

/* =========================================================
   LUXORA – ACCOUNT ACCORDION
========================================================= */

.account-view {
    display: none;
}

.account-view.is-active {
    display: block;
}


/* =========================================================
   PRZYCISKI NAWIGACJI
========================================================= */

.account-nav-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0;
    border: 0;
    background: transparent;

    cursor: pointer;

    text-align: left;
    font: inherit;
    color: inherit;

    font-size: var(--fs-base);
}


.account-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    font-size: 20px;
    line-height: 1;

    transition:
        transform 0.25s ease;
}


.account-nav-item.is-active
.account-nav-arrow {
    transform: rotate(45deg);
}


/* =========================================================
   SEKCJA PO ROZWINIĘCIU
========================================================= */

.account-view-orders,
.account-view-edit-account {
    margin-top: 30px;
    padding-top: 30px;

    border-top: 1px solid rgba(0, 0, 0, 0.08);

    animation:
        luxoraAccountReveal
        0.3s ease;
}


@keyframes luxoraAccountReveal {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

}


/* =========================================================
   DASHBOARD – KARTY JAK PRZYCISKI
========================================================= */

.account-quick-card {
    appearance: none;
    -webkit-appearance: none;

    border: 0;
    background: transparent;

    font: inherit;
    color: inherit;

    text-align: left;

    cursor: pointer;
}


.account-quick-card:hover {
    cursor: pointer;
}

.account-field-hint {
    font-size: var(--fs-sm);
    font-weight: 400;
}

.account-form-message {
    margin: 0 0 24px;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.5;
}

.account-form-message.is-success {
    color: #0c9c00;
}

.account-form-message.is-error {
    color: #b00020;
}


/* =========================================================
   PRODUCTS SLIDER
   Wszystkie style: .products-slider, .product-grid, .product-card,
   .slider-button, .products-slider__navigation, .products-slider__progress
   Kolejność: bazowe style -> media queries (od największego do najmniejszego),
   dzięki czemu breakpointy faktycznie nadpisują style bazowe.
========================================================= */

.products-slider {
    position: relative;
}


/* ---------------------------------------------------------
   PRODUCT GRID (poziomy scroll-snap)
--------------------------------------------------------- */

.product-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap);

    margin-bottom: 10px;
    padding-bottom: 4px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
    -ms-overflow-style: none;

    touch-action: pan-x;
}

.product-grid::-webkit-scrollbar {
    display: none;
}


/* ---------------------------------------------------------
   PRODUCT CARD
--------------------------------------------------------- */

.product-card {
    text-align: left;

    /* Karta nie może się ściskać – domyślnie 5 w rzędzie */
    flex: 0 0 calc((100% - (var(--gap) * 4)) / 5);
    min-width: 0;

    scroll-snap-align: start;

    /* animacja wejścia (reveal) */
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease);
}

.product-card .product-img {
    background: var(--color-white-grey);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 16px;
}

.product-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

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

.product-card .product-brand {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: 2px;
    padding: 0 10px;
}

.product-card .product-name {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 8px;
    padding: 0 10px;
}

.product-card .product-price {
    font-size: var(--fs-title);
    font-weight: 400;
    color: var(--color-text-muted);
    padding: 0 10px;
}

/* Reveal: stagger tylko na pierwszych kartach widocznych w kadrze,
   reszta (do przewinięcia sliderem) bez dodatkowego opóźnienia. */
.products.is-visible .product-card {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.products.is-visible .product-card:nth-child(1)   { transition-delay: calc(var(--reveal-step) * 1); }
.products.is-visible .product-card:nth-child(2)   { transition-delay: calc(var(--reveal-step) * 2); }
.products.is-visible .product-card:nth-child(3)   { transition-delay: calc(var(--reveal-step) * 3); }
.products.is-visible .product-card:nth-child(4)   { transition-delay: calc(var(--reveal-step) * 4); }
.products.is-visible .product-card:nth-child(5)   { transition-delay: calc(var(--reveal-step) * 5); }
.products.is-visible .product-card:nth-child(6)   { transition-delay: calc(var(--reveal-step) * 6); }
.products.is-visible .product-card:nth-child(n+7) { transition-delay: calc(var(--reveal-step) * 6); }


/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

.products-slider__navigation {
    display: flex;
    align-items: center;
    gap: 32px;
}

.collection-products-slider .products-slider__navigation {
    margin-top: 16px;
}

.products-slider__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* ---------------------------------------------------------
   SLIDER BUTTON (wersja końcowa – ostatnia w pliku wygrywa)
--------------------------------------------------------- */

.slider-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    padding: 0;

    border: none;
    border-radius: 0;
    background: transparent;
    color: #111111;
    cursor: pointer;

    transition: opacity .3s ease;
}

.slider-button span {
    font-size: 20px;
    line-height: 1;
}

.slider-button .icon-caret {
    width: 10px;
    height: 6px;
}

/* strzałka "w dół" (caret) obrócona na "w lewo" / "w prawo" */
.slider-button--prev .icon-caret {
    transform: rotate(90deg);
}

.slider-button--next .icon-caret {
    transform: rotate(-90deg);
}

.slider-button:hover {
    background: transparent;
    color: #111111;
    opacity: .6;
}

.slider-button:not(:disabled):hover {
    background: var(--color-white);
    color: var(--color-dark);
}

.slider-button:disabled,
.slider-button:disabled:hover {
    opacity: .3;
    cursor: default;
}


/* ---------------------------------------------------------
   PROGRESS BAR
--------------------------------------------------------- */

.products-slider__progress {
    position: relative;

    width: 100%;
    height: 1px;

    background: #d8d8d8;
    overflow: hidden;
}

.products-slider__progress-fill {
    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: #111;
    transition: width 0.3s ease;
}


/* ---------------------------------------------------------
   RESPONSIVE (desktop-first: od największego do najmniejszego)
--------------------------------------------------------- */

/* Tablet: ~4 produkty widoczne */
@media (max-width: 1199px) {

    .product-card {
        flex-basis: calc((100% - (var(--gap) * 3)) / 4);
    }

}

/* Mobile / tablet: ~2,2 produktu – widać, że lista się przewija */
@media (max-width: 899px) {

    .product-grid {
        gap: var(--gap);
    }

    .product-card {
        flex-basis: calc((100% - var(--gap)) / 2.2);
    }

}

@media (max-width: 767px) {

    .products-slider__navigation {
        gap: 20px;
        margin-top: 28px;
    }

    .collection-products-slider .products-slider__navigation {
        margin-top: 28px;
    }

}

/* Małe telefony: ~1,5 karty */
@media (max-width: 480px) {

    .product-grid {
        gap: 16px;
    }

    .product-card {
        flex-basis: 68%;
    }

}


/* ---------------------------------------------------------
   15. ANIMATIONS
--------------------------------------------------------- */
 
@keyframes luxora-fade-rise {
    from {
        opacity: 0;
        transform: translateY(1.4rem);
        filter: blur(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
 
@keyframes luxora-image-zoom {
    0% {
        transform: scale(1.14) translate3d(0, 1.5%, 0);
    }
    20% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.03) translate3d(0, 0, 0);
    }
}
 
@keyframes luxora-pulse-dot {
    0%, 100% {
        opacity: .35;
        transform: scale(.85);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}
 
/* scroll-reveal — activated by .is-visible, added via IntersectionObserver (see home-reveal.js) */
 
.luxora-reveal {
    opacity: 0;
    transform: translateY(1.2rem);
    filter: blur(10px);
    transition: opacity 1.1s var(--luxora-ease), transform 1.1s var(--luxora-ease), filter 1.1s var(--luxora-ease);
}
 
.luxora-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
 
 /* ---------------------------------------------------------
   18. REDUCED MOTION
--------------------------------------------------------- */
 
@media (prefers-reduced-motion: reduce) {
 
    .site-main *,
    .site-main *::before,
    .site-main *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
 

/* =========================================================
   LUXORA — SCROLL REVEAL (strona główna)
   Każda sekcja z index.php "wstaje" od dołu, z narastającym
   opóźnieniem (stagger) w obrębie elementów tej samej sekcji.
   Ten sam język animacji co coming-soon.css / home.css:
   opacity + translateY + lekki blur, cubic-bezier(.16,1,.3,1).

   Działanie: JS (scroll-reveal.js) dodaje klasę .is-visible do
   sekcji, gdy wejdzie w widok — CSS poniżej robi resztę.
========================================================= */


:root {
    --reveal-duration: .9s;
    --reveal-ease: cubic-bezier(.16, 1, .3, 1);
    --reveal-distance: 34px;
    --reveal-blur: 8px;
    --reveal-step: .09s;   /* odstęp między kolejnymi elementami w stagger */
}


/* ---------------------------------------------------------
   0. STAN BAZOWY — pomocnicza klasa
   (nadawana przez JS każdemu elementowi, który ma animować się
   niezależnie; większość reguł niżej jest jednak "gotowa" i
   celuje bezpośrednio w istniejące klasy z index.php)
--------------------------------------------------------- */

.reveal-up {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease);

    will-change: opacity, transform, filter;
}

.is-visible .reveal-up,
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


/* ---------------------------------------------------------
   1. PASEK ZALET (.features-strip)
--------------------------------------------------------- */

.features-strip li {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease);
}

.features-strip.is-visible li:nth-child(1) { transition-delay: calc(var(--reveal-step) * 1); }
.features-strip.is-visible li:nth-child(2) { transition-delay: calc(var(--reveal-step) * 2); }
.features-strip.is-visible li:nth-child(3) { transition-delay: calc(var(--reveal-step) * 3); }
.features-strip.is-visible li:nth-child(4) { transition-delay: calc(var(--reveal-step) * 4); }

.features-strip.is-visible li {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


/* ---------------------------------------------------------
   2. NAGŁÓWKI SEKCJI (.section-head) — używane w
   Produktach / Markach / Kategoriach
--------------------------------------------------------- */

.section-head .eyebrow,
.section-head h2,
.section-head p {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease);
}

.section-head .eyebrow { 
    transition-delay: calc(var(--reveal-step) * 1); }
.section-head h2       { transition-delay: calc(var(--reveal-step) * 2); }
.section-head p        { transition-delay: calc(var(--reveal-step) * 3); }

.is-visible .section-head .eyebrow,
.is-visible .section-head h2,
.is-visible .section-head p {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.section-head .eyebrow .bestseller {
    color: var(--color-dark);
    font-weight: 500;
    font-size: var(--fs-base);
    margin-bottom: 68px;
}


/* ---------------------------------------------------------
   3. PRODUKTY (.products .product-card)
   Stagger tylko na pierwszych kartach widocznych w kadrze -
   reszta (poza ekranem, do przewinięcia sliderem w poziomie)
   pojawia się bez dodatkowego opóźnienia, żeby przy szybkim
   przewijaniu slidera nic nie "czekało" bez potrzeby.
   (Style .product-card są w sekcji PRODUCTS SLIDER.)
--------------------------------------------------------- */

.products-cta {
    opacity: 0;
    transform: translateY(var(--reveal-distance));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);

    transition-delay: calc(var(--reveal-step) * 7);
}

.products.is-visible .products-cta {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   4. MARKI (.brands-row .brand-name)
--------------------------------------------------------- */

.brand-name {
    display: inline-block;
    opacity: 0;
    transform: translateY(calc(var(--reveal-distance) * .6));

    transition:
        opacity .7s var(--reveal-ease),
        transform .7s var(--reveal-ease),
        color .4s ease;
}

.brands.is-visible .brand-name {
    opacity: 1;
    transform: translateY(0);
}

.brands.is-visible .brand-name:nth-child(1) { transition-delay: calc(var(--reveal-step) * 1); }
.brands.is-visible .brand-name:nth-child(2) { transition-delay: calc(var(--reveal-step) * 2); }
.brands.is-visible .brand-name:nth-child(3) { transition-delay: calc(var(--reveal-step) * 3); }
.brands.is-visible .brand-name:nth-child(4) { transition-delay: calc(var(--reveal-step) * 4); }
.brands.is-visible .brand-name:nth-child(5) { transition-delay: calc(var(--reveal-step) * 5); }
.brands.is-visible .brand-name:nth-child(6) { transition-delay: calc(var(--reveal-step) * 6); }


/* ---------------------------------------------------------
   5. KATEGORIE (.category-grid .category-card)
   Kolejność zgodna ze strukturą w index.php:
   1. karta "tall" (lampy wiszące)
   2. górna karta w kolumnie prawej (lampy stołowe)
   3-4. dwie karty w .row-split (podłogowe / kinkiety)
--------------------------------------------------------- */

.category-card {
    opacity: 0;
    transform: translateY(calc(var(--reveal-distance) * 1.2));
    filter: blur(var(--reveal-blur));

    transition:
        opacity 1s var(--reveal-ease),
        transform 1s var(--reveal-ease),
        filter 1s var(--reveal-ease);
}

.categories.is-visible .category-card {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.categories.is-visible .category-grid > .category-card.tall {
    transition-delay: calc(var(--reveal-step) * 1);
}

.categories.is-visible .category-grid-right > .category-card {
    transition-delay: calc(var(--reveal-step) * 2);
}

.categories.is-visible .row-split .category-card:nth-child(1) {
    transition-delay: calc(var(--reveal-step) * 3);
}

.categories.is-visible .row-split .category-card:nth-child(2) {
    transition-delay: calc(var(--reveal-step) * 4);
}


/* ---------------------------------------------------------
   6. INSPIRACJE (.inspiration)
   Tekst wjeżdża od dołu, zdjęcie dodatkowo z lekkim scale —
   ten sam zestaw ruchu co tło w hero, tylko subtelniejszy.
--------------------------------------------------------- */

.inspiration-text > * {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease);
}

.inspiration.is-visible .inspiration-text > * {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.inspiration.is-visible .inspiration-text .eyebrow { transition-delay: calc(var(--reveal-step) * 1); }
.inspiration.is-visible .inspiration-text h2       { transition-delay: calc(var(--reveal-step) * 2); }
.inspiration.is-visible .inspiration-text p        { transition-delay: calc(var(--reveal-step) * 3); }
.inspiration.is-visible .inspiration-text .btn     { transition-delay: calc(var(--reveal-step) * 4); }

.inspiration-image {
    opacity: 0;
    transform: translateY(calc(var(--reveal-distance) * 1.3)) scale(1.03);

    transition:
        opacity 1.1s var(--reveal-ease),
        transform 1.1s var(--reveal-ease);

    transition-delay: calc(var(--reveal-step) * 2);
}

.inspiration.is-visible .inspiration-image {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* ---------------------------------------------------------
   7. DLACZEGO LUXORA (.why-grid .why-item)
--------------------------------------------------------- */

.why-luxora .eyebrow {
    opacity: 0;
    transform: translateY(var(--reveal-distance));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
}

.why-luxora.is-visible .eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.why-item {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease);
}

.why-luxora.is-visible .why-item {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.why-luxora.is-visible .why-item:nth-child(1) { transition-delay: calc(var(--reveal-step) * 2); }
.why-luxora.is-visible .why-item:nth-child(2) { transition-delay: calc(var(--reveal-step) * 3); }
.why-luxora.is-visible .why-item:nth-child(3) { transition-delay: calc(var(--reveal-step) * 4); }
.why-luxora.is-visible .why-item:nth-child(4) { transition-delay: calc(var(--reveal-step) * 5); }


/* ---------------------------------------------------------
   8. NEWSLETTER (.newsletter)
--------------------------------------------------------- */

.newsletter .container > * {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));

    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease);
}

.newsletter.is-visible .container > * {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.newsletter.is-visible h2               { transition-delay: calc(var(--reveal-step) * 1); }
.newsletter.is-visible p                { transition-delay: calc(var(--reveal-step) * 2); }
.newsletter.is-visible .newsletter-form { transition-delay: calc(var(--reveal-step) * 3); }


/* ---------------------------------------------------------
   9. REDUCED MOTION — bez animacji, treść od razu widoczna
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .features-strip li,
    .section-head .eyebrow,
    .section-head h2,
    .section-head p,
    .product-card,
    .products-cta,
    .brand-name,
    .category-card,
    .inspiration-text > *,
    .inspiration-image,
    .why-luxora .eyebrow,
    .why-item,
    .newsletter .container > *,
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


.woocommerce-product-details__short-description {
    display: none !important;
}
.product_meta {
    display: none !important;
}


.woocommerce ul.products li.product 
.woocommerce-loop-category__title, 
.woocommerce ul.products li.product 
.woocommerce-loop-product__title {
    padding: 0 !important;
    margin: 12px 0 6px !important;
    color: var(--color-dark);
    font-family: var(--font-body);
    font-size:var(--fs-title) !important;
    font-weight: 400;
    line-height: 1.3;


}

.woocommerce ul.products li.product .price {
    
      font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-text-muted);
}

.woocommerce ul.products li.product .button {
position: relative;
    display: block !important;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    margin: 0px auto 0 !important;
    align-self: center !important;
    justify-self: center !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    border-radius: 2px;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background .25s ease;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    white-space: nowrap;
    text-indent: -9999px;
    overflow: hidden;
}

.wpclv-attributes .wpclv-terms .wpclv-term.active, .wpclv-attributes .wpclv-terms .wpclv-term:hover {
    border-color: var(--color-dark);
}
section.related.products > h2, section.up-sells.upsells > h2 {
    letter-spacing: 2.4px;
    text-transform: uppercase;
    font-family: Jost, Arial, sans-serif;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 22.4px;
    color: rgb(0, 0, 0);
    text-align: center;

}


/* =========================================================
   WPC Linked Variation — SWATCHE KOLORÓW
   ========================================================= */

/* Kontener kolorów */
.wpclv-attributes .wpclv-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}


/* =========================================================
   ROZMIAR KWADRATÓW
   ========================================================= */

.wpclv-attributes .wpclv-term-color {
    width: 24px;
    height: 24px;
    padding: 2px;
    box-sizing: border-box;
}


/* =========================================================
   PODSTAWOWA RAMKA
   ========================================================= */

.wpclv-attributes .wpclv-term-color a,
.wpclv-attributes .wpclv-term-color span {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    /* Normalna ramka */
    border: none !important;

    /* Bez cienia i bez powiększania */
    box-shadow: none !important;
    transform: none !important;

    transition: border-color 0.15s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

/* Po najechaniu tylko ramka zmienia kolor na czarny */
.wpclv-attributes .wpclv-term-color:hover a,
.wpclv-attributes .wpclv-term-color:hover span {
    border-color: #000000 !important;

    /* Bez zmiany rozmiaru */
    transform: none !important;
    box-shadow: none !important;
}


/* =========================================================
   AKTYWNY / WYBRANY KOLOR
   ========================================================= */

/* Wybrany kolor — tylko czarna ramka 1 px */
.wpclv-attributes .wpclv-term-color.active a,
.wpclv-attributes .wpclv-term-color.active span {
    border: 1px solid #000000 !important;

    /* Bez cienia */
    box-shadow: none !important;

    /* Bez powiększania */
    transform: none !important;
}


/* =========================================================
   KOLORY PODSTAWOWE
   ========================================================= */

/* Antracytowy */
.wpclv-term[aria-label="Antracytowy"] a,
.wpclv-term[aria-label="Antracytowy"] span {
    background-color: #383838 !important;
}

/* Beżowy */
.wpclv-term[aria-label="Beżowy"] a,
.wpclv-term[aria-label="Beżowy"] span {
    background-color: #d8c3a5 !important;
}

/* Biały */
.wpclv-term[aria-label="Biały"] a,
.wpclv-term[aria-label="Biały"] span {
    background-color: #ffffff !important;
    border-width: 1px !important;
    border-color: #e4dfd3 !important;
}

/* Bordowy */
.wpclv-term[aria-label="Bordowy"] a,
.wpclv-term[aria-label="Bordowy"] span {
    background-color: #800020 !important;
}

/* Brązowy */
.wpclv-term[aria-label="Brązowy"] a,
.wpclv-term[aria-label="Brązowy"] span {
    background-color: #795548 !important;
}

/* Czarny */
.wpclv-term[aria-label="Czarny"] a,
.wpclv-term[aria-label="Czarny"] span {
    background-color: #0f0f0f !important;
}

/* Czerwony */
.wpclv-term[aria-label="Czerwony"] a,
.wpclv-term[aria-label="Czerwony"] span {
    background-color: #d32f2f !important;
}

/* Fioletowy */
.wpclv-term[aria-label="Fioletowy"] a,
.wpclv-term[aria-label="Fioletowy"] span {
    background-color: #7b3f98 !important;
}

/* Niebieski */
.wpclv-term[aria-label="Niebieski"] a,
.wpclv-term[aria-label="Niebieski"] span {
    background-color: #1565c0 !important;
}

/* Różowy */
.wpclv-term[aria-label="Różowy"] a,
.wpclv-term[aria-label="Różowy"] span {
    background-color: #e78fb3 !important;
}

/* Szary */
.wpclv-term[aria-label="Szary"] a,
.wpclv-term[aria-label="Szary"] span {
    background-color: #808080 !important;
}

/* Zielony */
.wpclv-term[aria-label="Zielony"] a,
.wpclv-term[aria-label="Zielony"] span {
    background-color: #2e7d32 !important;
}

/* Żółty */
.wpclv-term[aria-label="Żółty"] a,
.wpclv-term[aria-label="Żółty"] span {
    background-color: #f4c430 !important;
}


/* =========================================================
   KOLORY METALICZNE
   ========================================================= */

/* Chrom */
.wpclv-term[aria-label="Chrom"] a,
.wpclv-term[aria-label="Chrom"] span {
    background: linear-gradient(
        135deg,
        #4a4a4a 0%,
        #e8e8e8 18%,
        #ffffff 35%,
        #8a8a8a 50%,
        #f5f5f5 68%,
        #555555 100%
    ) !important;
}


/* Miedziany */
.wpclv-term[aria-label="Miedziany"] a,
.wpclv-term[aria-label="Miedziany"] span {
    background: linear-gradient(
        135deg,
        #6e2c1e 0%,
        #b87333 25%,
        #e0a36a 45%,
        #8c4a2f 65%,
        #c47a44 82%,
        #5e281c 100%
    ) !important;
}


/* Mosiądz */
.wpclv-term[aria-label="Mosiądz"] a,
.wpclv-term[aria-label="Mosiądz"] span {
    background: linear-gradient(
        135deg,
        #6f5a16 0%,
        #b5a642 22%,
        #f0d66a 42%,
        #8c761c 60%,
        #d4af37 78%,
        #66500f 100%
    ) !important;
}


/* =========================================================
   PRZEZROCZYSTY
   ========================================================= */

.wpclv-term[aria-label="Przezroczysty"] a,
.wpclv-term[aria-label="Przezroczysty"] span {
    background-color: #ffffff !important;

    background-image:
        linear-gradient(45deg, #dddddd 25%, transparent 25%),
        linear-gradient(-45deg, #dddddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #dddddd 75%),
        linear-gradient(-45deg, transparent 75%, #dddddd 75%) !important;

    background-size: 8px 8px !important;

    background-position:
        0 0,
        0 4px,
        4px -4px,
        -4px 0 !important;
}


/* =========================================================
   ZABEZPIECZENIE — BRAK DODATKOWYCH EFEKTÓW
   ========================================================= */

.wpclv-attributes .wpclv-term-color:hover,
.wpclv-attributes .wpclv-term-color.active {
    transform: none !important;
}

.wpclv-attributes .wpclv-term-color,
.wpclv-attributes .wpclv-term-color a,
.wpclv-attributes .wpclv-term-color span {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
        margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.wpclv-attribute-label{
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-base);
    padding-bottom: 4px;
}

/* Bez etykiety atrybutu ("Kolor") nad swatchami */
.luxora-color-swatches .wpclv-attribute-label {
    display: none;
}
/* Mniejsze kwadraty na mobile */
@media (max-width: 600px) {
    .luxora-color-swatches .wpclv-term-color,
    .luxora-color-swatches .wpclv-term-color a,
    .luxora-color-swatches .wpclv-term-color span {
        width: 10px !important;
        height: 10px !important;
    }
}


.summary .price {
    display: inline !important;
     margin-bottom: 20px !important;
}

.summary .product-price-note {
    display: inline !important;

    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--color-text-muted) !important;
    vertical-align: baseline !important;
}



.product-delivery-note {
    margin: 0 0px 6px 0 !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.4;
    color: var(--color-text-muted) !important;
}
.product-delivery {
    color: var(--color-text);
}

.shop-load-more-wrap {
	display: flex;
	justify-content: center;
	margin: 40px 0;
}

.shop-load-more:disabled {
	opacity: 0.6;
	cursor: default;
}

.shop-load-more-spinner {
	display: none;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: shop-load-more-spin 0.6s linear infinite;
}

.shop-load-more.is-loading .shop-load-more-spinner {
	display: inline-block;
}

@keyframes shop-load-more-spin {
	to {
		transform: rotate(360deg);
	}
}

.shop-subcategory-list {
	margin: 6px 0 10px 18px;
	padding-left: 12px;
	border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.shop-subcategory-list .shop-category-count {
	font-size: 0.85em;
}


/**
 * Chowamy natywny checkbox - zostaje w DOM-ie (działa, jest
 * dostępny z klawiatury/czytnika ekranu), ale wizualnie niewidoczny.
 * To, co faktycznie widać, to .shop-attribute-checkbox obok niego.
 */
.shop-attribute-option .shop-filter-checkbox-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Widoczny focus dla użytkowników klawiatury - inaczej zniknie
   całkowicie razem z ukryciem natywnego inputa */
.shop-filter-checkbox-input:focus-visible ~ .shop-attribute-checkbox {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.shop-filter-checkbox-input:checked ~ .shop-attribute-checkbox {
	background: currentColor;
	border-color: currentColor;
}

.shop-filter-checkbox-input:checked ~ .shop-attribute-checkbox::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

/* Marki - responsywna lista, tyle pozycji ile faktycznie
   istnieje w pa_marka, zawija się swobodnie */
.footer-brands-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.footer-brands-list a {
    color:rgba(255,255,255,.65);
    font-family: 400;
	font-size: var(--fs-sm);
	transition: color 0.2s ease;
}
.footer-brands-list a:hover {
	color: var(--color-dark);
}

/* Honeypot - ukryty dla ludzi, wciąż w DOM-ie dla botów */
.contact-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status formularza (sukces/błąd) */
.contact-panel-status {
	font-size: var(--fs-sm);
	margin-bottom: 4px;
}
.contact-panel-status.is-success {
	color: #2e7d32;
}
.contact-panel-status.is-error {
	color: #d32f2f;
}
.contact-submit.is-sending {
	opacity: 0.7;
	pointer-events: none;
}

/* =========================================================
   LUXORA — RELATED PRODUCTS
   Usunięcie pseudo-elementów WooCommerce z CSS Grid
   ========================================================= */

.related.products ul.products::before,
.related.products ul.products::after {
    content: none !important;
    display: none !important;
}

.woocommerce-checkout-review-order-table .easypack-shipping-method-logo {
    display: none;
}

span#inpost_pl_delivery_terms, span#inpost_pl_block_delivery_terms {
    display: none;
}

.woocommerce-checkout-review-order-table .easypack-custom-shipping-method-logo {
    display: none;
}

.luxora-order-shipping .woocommerce-shipping-methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.luxora-shipping-point {
	flex: 0 0 100%;
	margin-top: 10px;
}

.luxora-shipping-point #easypack_show_geowidget {
    cursor: pointer !important;
    background: var(--color-dark) !important;
    color: var(--color-white) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    padding: 16px 34px !important;

    font-family: var(--luxora-font-body) !important;
    font-size: .74rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    border: 1px solid transparent !important;
    border-radius: 999px !important;

    box-shadow: none !important;
    transition:
        background .5s var(--luxora-ease),
        color .5s var(--luxora-ease),
        border-color .5s var(--luxora-ease),
        transform .4s var(--luxora-ease) !important;
}

.luxora-shipping-point #easypack_show_geowidget:hover {
    background: var(--color-dark-soft) !important;
    color: var(--color-white) !important;
    transform: translateY(-1px) !important;
}


.luxora-shipping-point #easypack_show_geowidget:hover{ background:var(--color-dark-soft); transform: translateY(-1px) !important; }

.luxora-shipping-point #selected-parcel-machine {
    border: none !important;
    margin-top: 0px !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.5 !important;
    font-family: var(--font-body) !important;
}

.easypack_show_geowidget {
    box-shadow: none !important;
}

.newsletter-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.newsletter-ajax-message {
    margin-top: 1rem;
    min-height: 1.5em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.newsletter-ajax-message--success,
.newsletter-ajax-message--error {
    opacity: 1;
}

.newsletter-ajax-message--success {
    color:rgba(255,255,255,.7); font-size:var(--fs-base); margin-bottom:28px; line-height:1.7; font-weight: 400;
}

.newsletter-ajax-message--error {
    color:rgba(255,255,255,.7); font-size:var(--fs-base); margin-bottom:28px; line-height:1.7; font-weight: 400;
}

.newsletter-form--success {
    display: none;
}

.newsletter-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


.luxora-order-summary .luxora-order-delivery {
        display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 35px;
    font-size: var(--fs-sm);
    font-weight: 400;
}


@media (max-width: 900px){
    .footer-top{ grid-template-columns:1fr 1fr; }
    .hero .container{ justify-content: center; }
    .btn { padding: var(--btn-padding-sm);}
}


/* ---------------------------------------------------------
   5. NAWIGACJA POD ZDJĘCIAMI
   Białe tło na całym pasku, czarne strzałki bez okręgów/obramowań,
   licznik "X / N" pośrodku, między strzałkami.
--------------------------------------------------------- */

/* Desktop: sliderowe przyciski i licznik nie są potrzebne */
.product-gallery-controls {
    display: none;
}


.slider-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #ffffff;
}


/* =========================================================
   COLLECTION PRODUCTS SLIDER
========================================================= */

.collection-products-slider {
    position: relative;
    overflow: hidden;
}

.collection-products-slider__viewport {
    width: 100%;
    overflow: hidden;
}

.collection-products-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - 24px) / 2);
    gap: 48px 24px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.collection-products-slider__track::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   KAŻDY PRODUKT
========================================================= */

.collection-products-slider__track > li {
    min-width: 0;
    scroll-snap-align: start;
}


/* =========================================================
   NAVIGATION
========================================================= */


/* =========================================================
   CTA
========================================================= */

.collection-products-slider + .products-cta {
    margin-top: 40px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .collection-products-slider__track {
        grid-auto-columns: calc((100% - 12px) / 2);
        gap: 32px 12px;
    }

    .collection-products-slider + .products-cta {
        margin-top: 32px;
    }

}

.category-tile .woocommerce-loop-product__title {
    padding: 0 !important;
    margin: 12px 0 6px !important;
    color: var(--color-dark);
    font-family: var(--font-body);
    font-size:var(--fs-title) !important;
    font-weight: 400;
    line-height: 1.3;


}

.category-tile .price {
      font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-text-muted);
    padding: 0 10px;

}


.products-cta{
    text-align:center;
    margin-top: 20px;
}

.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    word-wrap: normal!important;
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    overflow-wrap: normal!important;
    padding: 0;
    position: absolute!important;
    width: 1px
}

@media (max-width: 600px){
    .container{ padding:0 16px; }
    .topbar-left span:nth-child(2){ display:none; }
    .hero{ min-height:520px; text-align:left; }
    .hero-content h1{   font-size:
            clamp(
                1.5rem,
                16vw,
                3rem
            );}
     .hero-content h2{   font-size:
            clamp(
                1.5rem,
                16vw,
                3rem
            );}
       .hero-content p{   font-size: .9rem ;}       
    .why-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr; }
}

.pswp__scroll-wrap{
    display: none !important;
}