/* ============================================
   FANTAZJA — Complete Stylesheet
   Design System + All Components
============================================ */

/* ── VARIABLES ── */
:root {
   --color-primary: #d10466;
   --color-primary-dark: #a80352;
   --color-primary-light: #f5e0eb;
   --color-primary-ultra-light: #fdf2f7;
   --color-text: #1a1a2e;
   --color-text-light: #6b6b80;
   --color-text-muted: #9d9db0;
   --color-white: #ffffff;
   --color-off-white: #fafafa;
   --color-border: #ebebf0;
   --color-bg-warm: #fdf8f5;
   --font-display: 'Cormorant Garamond', Georgia, serif;
   --font-body: 'Outfit', system-ui, sans-serif;
   --radius: 12px;
   --radius-lg: 20px;
   --radius-xl: 32px;
   --shadow-soft: 0 4px 24px rgba(209, 4, 102, 0.06);
   --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.04);
   --shadow-hover: 0 8px 32px rgba(209, 4, 102, 0.12);
   --max-width: 1280px;
   --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── RESET ── */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased
}

body {
   font-family: var(--font-body);
   color: var(--color-text);
   background: #ffffff;
   line-height: 1.6;
   overflow-x: hidden
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

a {
   text-decoration: none;
   color: inherit;
   transition: var(--transition)
}

button,
input,
select,
textarea {
   font-family: var(--font-body)
}

button {
   cursor: pointer
}

/* ── Admin Bar offset ── */
body.admin-bar .header {
   top: 32px
}

body.admin-bar .mobile-nav {
   top: 32px;
   height: calc(100dvh - 32px)
}

body.admin-bar .search-overlay {
   top: 32px;
   height: calc(100dvh - 32px)
}

body.admin-bar .hero {
   padding-top: 162px
}

body.admin-bar .breadcrumbs {
   padding-top: 150px
}

/* Admin bar offset */
.admin-bar .cart-drawer {
   top: 32px;
   height: calc(100vh - 32px)
}

.admin-bar .cart-drawer-overlay {
   top: 32px
}

@media(max-width:782px) {
   .admin-bar .cart-drawer {
      top: 46px;
      height: calc(100vh - 46px)
   }

   .admin-bar .cart-drawer-overlay {
      top: 46px
   }
}

@media(max-width:782px) {
   body.admin-bar .header {
      top: 46px
   }

   body.admin-bar .mobile-nav {
      top: 46px;
      height: calc(100dvh - 46px)
   }

   body.admin-bar .search-overlay {
      top: 46px;
      height: calc(100dvh - 46px)
   }

   body.admin-bar .hero {
      padding-top: 176px
   }

   body.admin-bar .breadcrumbs {
      padding-top: 136px
   }
}

@media(max-width:600px) {
   body.admin-bar .header {
      top: 0
   }

   body.admin-bar .mobile-nav {
      top: 0;
      height: 100dvh
   }
}

/* ── LAYOUT ── */
.container {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 24px
}

.woo-main {
   background: #fff
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0
}

/* ── TYPOGRAPHY ── */
.section-label {
   font-family: var(--font-body);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--color-primary);
   margin-bottom: 16px;
   display: inline-block
}

.section-title {
   font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(32px, 5vw, 50px);
   line-height: 1.15;
   color: #1a1a2e
}

.section-title em {
   font-style: italic;
   color: var(--color-primary)
}

h1,
h2,
h3,
h4,
h5,
h6 {
   color: #1a1a2e
}

b,
strong {
   font-weight: 600;
}

/* ── BUTTONS ── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: .5px;
   padding: 16px 36px;
   border-radius: 50px;
   border: none;
   cursor: pointer;
   transition: var(--transition)
}

.btn-primary {
   background: var(--color-primary);
   color: #fff
}

.btn-primary:hover {
   background: var(--color-primary-dark);
   transform: translateY(-2px);
   box-shadow: var(--shadow-hover)
}

.btn-outline {
   background: transparent;
   color: var(--color-primary);
   border: 1.5px solid var(--color-primary)
}

.btn-outline:hover {
   background: var(--color-primary);
   color: #fff;
   transform: translateY(-2px)
}

.btn-white {
   background: #fff;
   color: var(--color-primary)
}

.btn-white:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, .15)
}

.btn-arrow::after {
   content: '→';
   transition: transform .3s ease
}

.btn-arrow:hover::after {
   transform: translateX(4px)
}

/* ── ANIMATIONS ── */
.reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity .8s ease, transform .8s ease
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0)
}

.reveal-delay-1 {
   transition-delay: .1s
}

.reveal-delay-2 {
   transition-delay: .2s
}

.reveal-delay-3 {
   transition-delay: .3s
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   background: rgba(255, 255, 255, .97);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   transition: var(--transition)
}

.header.scrolled {
   box-shadow: 0 1px 20px rgba(0, 0, 0, .06)
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   gap: 16px
}

.logo-link {
   flex-shrink: 0
}

.logo-link img {
   height: 130px;
   width: auto
}

.header-actions {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-shrink: 0
}

.nav-icon {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: var(--transition);
   position: relative;
   background: none;
   border: none
}

.nav-icon:hover {
   background: var(--color-primary-ultra-light)
}

.nav-icon svg {
   width: 19px;
   height: 19px;
   stroke: var(--color-text);
   stroke-width: 1.5;
   fill: none
}

.cart-count {
   position: absolute;
   top: 2px;
   right: 2px;
   width: 16px;
   height: 16px;
   background: var(--color-primary);
   color: #fff;
   font-size: 10px;
   font-weight: 600;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center
}

.menu-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   padding: 8px;
   background: none;
   border: none
}

.menu-toggle span {
   width: 24px;
   height: 1.5px;
   background: var(--color-text);
   display: block;
   transition: var(--transition)
}

/* Nav */
.header-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   min-width: 0
}

.main-nav {
   display: flex;
   align-items: center;
   gap: 0;
   list-style: none
}

.main-nav>li {
   position: relative
}

.main-nav>li>a {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 12px 13px;
   font-size: 13px;
   font-weight: 500;
   color: var(--color-text);
   letter-spacing: .2px;
   position: relative;
   white-space: nowrap
}

.main-nav>li>a .chevron {
   width: 12px;
   height: 12px;
   stroke: var(--color-text-muted);
   stroke-width: 2;
   fill: none;
   transition: transform .3s ease
}

.main-nav>li:hover>a {
   color: var(--color-primary)
}

.main-nav>li:hover>a .chevron {
   stroke: var(--color-primary);
   transform: rotate(180deg)
}

.main-nav>li>a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 13px;
   right: 13px;
   height: 2px;
   background: var(--color-primary);
   transform: scaleX(0);
   transition: transform .3s ease;
   transform-origin: left
}

.main-nav>li:hover>a::after {
   transform: scaleX(1)
}

/* Highlight nav item */
.nav-highlight>a {
   background: var(--color-primary) !important;
   color: #fff !important;
   border-radius: 50px;
   padding: 10px 22px !important;
   margin-left: 6px;
   font-weight: 600 !important
}

.nav-highlight>a::after {
   display: none !important
}

.nav-highlight:hover>a {
   background: var(--color-primary-dark) !important
}

/* Mega dropdown */
.mega-dropdown {
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   background: #fff;
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   box-shadow: 0 12px 40px rgba(0, 0, 0, .1);
   padding: 28px 32px;
   min-width: 260px;
   opacity: 0;
   visibility: hidden;
   transition: opacity .25s ease, transform .25s ease;
   transform: translateX(-50%) translateY(8px);
   z-index: 100;
   border-top: 2px solid var(--color-primary)
}

.main-nav>li:hover>.mega-dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0)
}

.mega-dropdown ul {
   list-style: none
}

.mega-dropdown>ul>li {
   position: relative
}

.mega-dropdown>ul>li>a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 9px 12px;
   font-size: 14px;
   color: var(--color-text);
   border-radius: 8px;
   transition: var(--transition);
   font-weight: 500
}

.mega-dropdown>ul>li>a:hover {
   background: var(--color-primary-ultra-light);
   color: var(--color-primary)
}

.mega-dropdown>ul>li>a .chevron-right {
   width: 14px;
   height: 14px;
   stroke: var(--color-text-muted);
   stroke-width: 2;
   fill: none
}

/* Sub-dropdown */
.sub-dropdown {
   position: absolute;
   left: 100%;
   top: -10px;
   background: #fff;
   border-radius: var(--radius);
   box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
   padding: 16px 20px;
   min-width: 200px;
   opacity: 0;
   visibility: hidden;
   transition: opacity .2s ease, transform .2s ease;
   transform: translateX(8px);
   z-index: 110;
   border-left: 2px solid var(--color-primary-light)
}

.mega-dropdown>ul>li:hover>.sub-dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateX(0)
}

.sub-dropdown a {
   display: block;
   padding: 7px 12px;
   font-size: 13px;
   color: var(--color-text-light);
   border-radius: 6px;
   transition: var(--transition)
}

.sub-dropdown a:hover {
   background: var(--color-primary-ultra-light);
   color: var(--color-primary)
}

/* ═══════════════════════════════════════════
   BREADCRUMBS
═══════════════════════════════════════════ */
.breadcrumbs {
   padding: 90px 0 0;
   background: #fff
}

.breadcrumbs-inner {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--color-text-muted);
   padding: 16px 0;
   border-bottom: 1px solid var(--color-border);
   flex-wrap: wrap
}

.breadcrumbs-inner a:hover {
   color: var(--color-primary)
}

.breadcrumbs-inner svg,
.bc-sep {
   width: 14px;
   height: 14px;
   stroke: var(--color-text-muted);
   stroke-width: 1.5;
   fill: none;
   flex-shrink: 0
}

.breadcrumbs-inner .current,
.breadcrumbs-inner>span:last-child {
   color: var(--color-text);
   font-weight: 500
}

/* ═══════════════════════════════════════════
   WOOCOMMERCE: CATEGORY PAGE
═══════════════════════════════════════════ */
.cat-header {
   padding: 40px 0 32px
}

.cat-header-inner {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 40px
}

.cat-title {
   font-family: var(--font-display);
   font-size: clamp(34px, 4vw, 48px);
   font-weight: 400;
   line-height: 1.15;
   margin-bottom: 12px
}

.cat-title em {
   font-style: italic;
   color: var(--color-primary)
}

.cat-desc {
   font-size: 15px;
   color: var(--color-text-light);
   margin-bottom: 6rem;
   line-height: 1.7
}

.cat-meta {
   display: flex;
   align-items: center;
   gap: 24px;
   flex-shrink: 0
}

.results-count {
   font-size: 13px;
   color: var(--color-text-muted)
}

.results-count strong {
   color: var(--color-text);
   font-weight: 600
}

/* Sort select */
.sort-select {
   position: relative
}

.sort-select select,
.woocommerce-ordering select {
   appearance: none;
   -webkit-appearance: none;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 10px 40px 10px 16px;
   font-family: var(--font-body);
   font-size: 13px;
   color: var(--color-text);
   cursor: pointer;
   transition: var(--transition);
   outline: none
}

.sort-select select:hover,
.sort-select select:focus,
.woocommerce-ordering select:hover {
   border-color: var(--color-primary)
}

.sort-select::after {
   content: '';
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 5px solid var(--color-text-muted);
   pointer-events: none
}

/* Category layout */
.category-layout {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 40px;
   padding-bottom: 80px
}

/* ── Sidebar filters ── */
.sidebar {
   position: static;
   align-self: start
}

.filter-section {
   padding: 24px 0;
}

.filter-section:first-child {
   padding-top: 0
}

.filter-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
   user-select: none;
   margin-bottom: 16px
}

.filter-header h3 {
   font-size: 14px;
   font-weight: 600;
   letter-spacing: .3px
}

.filter-header svg {
   width: 16px;
   height: 16px;
   stroke: var(--color-text-muted);
   stroke-width: 2;
   fill: none;
   transition: transform .3s ease
}

/* Price */
.price-range {
   display: flex;
   align-items: center;
   gap: 12px
}

.price-input {
   flex: 1;
   position: relative
}

.price-input input {
   width: 100%;
   border: 1px solid var(--color-border);
   border-radius: 10px;
   padding: 10px 12px;
   font-family: var(--font-body);
   font-size: 13px;
   color: var(--color-text);
   outline: none;
   transition: var(--transition);
   text-align: center
}

.price-input input:focus {
   border-color: var(--color-primary)
}

.price-input label {
   position: absolute;
   top: -8px;
   left: 12px;
   font-size: 10px;
   color: var(--color-text-muted);
   background: #fff;
   padding: 0 4px;
   letter-spacing: .5px;
   text-transform: uppercase;
   font-weight: 600
}

.price-separator {
   color: var(--color-text-muted);
   font-size: 18px;
   flex-shrink: 0
}

/* Category list */
.filter-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 2px
}

.filter-list a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
   font-size: 13.5px;
   color: var(--color-text-light);
   border-radius: 8px;
   transition: var(--transition)
}

.filter-list a:hover {
   background: var(--color-primary-ultra-light);
   color: var(--color-primary)
}

.filter-list a.active {
   background: var(--color-primary-ultra-light);
   color: var(--color-primary);
   font-weight: 600
}

.filter-list .count {
   font-size: 12px;
   color: var(--color-text-muted);
   background: var(--color-off-white);
   padding: 2px 8px;
   border-radius: 10px;
   min-width: 28px;
   text-align: center
}

/* Filter select */
.filter-select {
   width: 100%;
   appearance: none;
   -webkit-appearance: none;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: 10px;
   padding: 11px 40px 11px 14px;
   font-family: var(--font-body);
   font-size: 13px;
   color: var(--color-text);
   cursor: pointer;
   outline: none;
   transition: var(--transition);
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpolyline points='6 9 12 15 18 9' stroke='%239d9db0' stroke-width='2'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center
}

.filter-select:hover,
.filter-select:focus {
   border-color: var(--color-primary)
}

.filter-apply {
   width: 100%;
   background: var(--color-primary);
   color: #fff;
   border: none;
   border-radius: var(--radius);
   padding: 13px;
   font-size: 13px;
   font-weight: 600;
   transition: var(--transition);
   margin-top: 24px;
   letter-spacing: .3px
}

.filter-apply:hover {
   background: var(--color-primary-dark)
}

.filter-clear {
   width: 100%;
   background: none;
   color: var(--color-text-muted);
   border: none;
   padding: 10px;
   font-size: 12px;
   transition: var(--transition);
   text-align: center
}

.filter-clear:hover {
   color: var(--color-primary)
}

/* Active filter chips */
.active-filters {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 24px
}

.filter-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--color-primary-ultra-light);
   color: var(--color-primary);
   border: 1px solid var(--color-primary-light);
   border-radius: 50px;
   padding: 6px 14px;
   font-size: 12px;
   font-weight: 500
}

.filter-chip button {
   background: none;
   border: none;
   cursor: pointer;
   display: flex;
   padding: 0
}

.filter-chip button svg {
   width: 14px;
   height: 14px;
   stroke: var(--color-primary);
   stroke-width: 2;
   fill: none
}

/* Mobile filter */
.mobile-filter-btn {
   display: none;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 14px;
   font-size: 14px;
   font-weight: 500;
   transition: var(--transition);
   margin-bottom: 24px
}

.mobile-filter-btn svg {
   width: 18px;
   height: 18px;
   stroke: var(--color-text);
   stroke-width: 1.5;
   fill: none
}

.mobile-filter-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary)
}

/* ── Product card (loop) ── */
.products-grid,
ul.products {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   list-style: none !important;
   padding: 0 !important;
   margin: 0 !important
}

.product-card,
ul.products li.product {
   border-radius: var(--radius-lg) !important;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--color-border);
   transition: var(--transition);
   padding: 0 !important;
   margin: 0 !important;
   list-style: none
}

.product-card:hover,
ul.products li.product:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover);
   border-color: transparent
}

.product-img {
   position: relative;
   overflow: hidden;
   aspect-ratio: 1;
   background: var(--color-off-white)
}

.product-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease
}

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

.product-badge {
   position: absolute;
   top: 12px;
   left: 12px;
   background: var(--color-primary);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .3px;
   text-transform: uppercase;
   padding: 4px 12px;
   border-radius: 50px;
   z-index: 2
}

.product-badge.sale {
   background: #e63946
}

.product-badge.new {
   background: var(--color-primary)
}

.product-wishlist {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 36px;
   height: 36px;
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(8px);
   border: none;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(.8);
   transition: var(--transition);
   z-index: 2
}

.product-card:hover .product-wishlist {
   opacity: 1;
   transform: scale(1)
}

.product-wishlist:hover {
   background: var(--color-primary)
}

.product-wishlist svg {
   width: 16px;
   height: 16px;
   stroke: var(--color-text);
   stroke-width: 1.5;
   fill: none;
   transition: var(--transition)
}

.product-wishlist:hover svg {
   stroke: #fff
}

.product-quickadd {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 12px;
   background: linear-gradient(transparent, rgba(0, 0, 0, .03));
   transform: translateY(100%);
   transition: transform .35s ease;
   z-index: 2
}

.product-card:hover .product-quickadd {
   transform: translateY(0)
}

.product-quickadd-btn {
   width: 100%;
   background: var(--color-primary);
   color: #fff;
   border: none;
   border-radius: 10px;
   padding: 11px;
   font-size: 13px;
   font-weight: 600;
   transition: var(--transition);
   letter-spacing: .3px
}

.product-quickadd-btn:hover {
   background: var(--color-primary-dark)
}

.product-info {
   padding: 18px 20px 22px
}

.product-category {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--color-text-muted);
   margin-bottom: 6px
}

.product-name {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 500;
   margin-bottom: 8px;
   line-height: 1.3;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.product-name a:hover {
   color: var(--color-primary)
}

.product-rating {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 10px
}

.stars {
   display: flex;
   gap: 1px
}

.stars svg {
   width: 14px;
   height: 14px
}

.stars svg.filled {
   fill: #f5a623;
   stroke: #f5a623
}

.stars svg.empty {
   fill: none;
   stroke: var(--color-border);
   stroke-width: 1.5
}

.rating-count {
   font-size: 12px;
   color: var(--color-text-muted)
}

.product-price {
   display: flex;
   align-items: baseline;
   gap: 10px
}

.product-price .current {
   font-size: 18px;
   font-weight: 700;
   color: var(--color-primary)
}

.product-price .old {
   font-size: 14px;
   color: var(--color-text-muted);
   text-decoration: line-through
}

/* WC price override */
ul.products li.product .price,
.woocommerce-Price-amount {
   font-size: 18px;
   font-weight: 700;
   color: var(--color-primary);
   float: right;
   margin-left: 10px;
}

ul.products li.product .price del {
   font-size: 14px;
   color: var(--color-text-muted);
   font-weight: 400
}

/* ── Pagination ── */
.pagination,
.woocommerce-pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 48px 0 0
}

.woocommerce-pagination ul {
   display: flex;
   align-items: center;
   gap: 6px;
   list-style: none;
   padding: 0;
   margin: 0;
   border: none !important
}

.page-btn,
.woocommerce-pagination a,
.woocommerce-pagination span {
   width: 42px;
   height: 42px;
   border: 1px solid var(--color-border) !important;
   border-radius: 10px !important;
   background: #fff;
   font-size: 14px;
   font-weight: 500;
   color: var(--color-text);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition);
   padding: 0 !important
}

.page-btn:hover,
.woocommerce-pagination a:hover {
   border-color: var(--color-primary) !important;
   color: var(--color-primary)
}

.page-btn.active,
.woocommerce-pagination span.current {
   background: var(--color-primary) !important;
   border-color: var(--color-primary) !important;
   color: #fff !important
}

/* ═══════════════════════════════════════════
   WOOCOMMERCE: SINGLE PRODUCT
═══════════════════════════════════════════ */
.product-section {
   padding: 40px 0 80px
}

.product-main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: start
}

/* Gallery */
.gallery {
   position: sticky;
   top: 90px
}

.gallery-main {
   position: relative;
   border-radius: var(--radius-xl);
   overflow: hidden;
   background: var(--color-off-white);
   margin-bottom: 16px;
   cursor: zoom-in
}

.gallery-main img {
   width: 100%;
   aspect-ratio: 4/5;
   object-fit: cover;
   transition: transform .5s ease
}

.gallery-main:hover img {
   transform: scale(1.04)
}

.gallery-badges {
   position: absolute;
   top: 20px;
   left: 20px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   z-index: 2
}

.gallery-badge {
   display: inline-block;
   background: var(--color-primary);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .5px;
   text-transform: uppercase;
   padding: 6px 16px;
   border-radius: 50px
}

.gallery-badge.sale {
   background: #e63946
}

.gallery-actions {
   position: absolute;
   top: 20px;
   right: 20px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   z-index: 2
}

.gallery-action {
   width: 44px;
   height: 44px;
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(8px);
   border: none;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition)
}

.gallery-action:hover {
   background: var(--color-primary)
}

.gallery-action svg {
   width: 18px;
   height: 18px;
   stroke: var(--color-text);
   stroke-width: 1.5;
   fill: none;
   transition: var(--transition)
}

.gallery-action:hover svg {
   stroke: #fff
}

.gallery-thumbs {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 12px
}

.gallery-thumb {
   border-radius: var(--radius);
   overflow: hidden;
   cursor: pointer;
   border: 2px solid transparent;
   transition: var(--transition);
   background: var(--color-off-white)
}

.gallery-thumb.active {
   border-color: var(--color-primary)
}

.gallery-thumb:hover {
   border-color: var(--color-primary-light)
}

.gallery-thumb img {
   width: 100%;
   aspect-ratio: 1;
   object-fit: cover
}

/* ═══════ GALLERY BADGES (PRO STYLE) ═══════ */
.gallery-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* Żeby nie blokowały klikania w zdjęcie */
}

.gallery-badges .onsale {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.35);
    display: inline-block;
    animation: badgePulse 2.5s infinite;
}

@keyframes badgePulse {
    0% { box-shadow: 0 4px 15px rgba(255, 65, 108, 0.35); }
    50% { box-shadow: 0 4px 25px rgba(255, 65, 108, 0.6); }
    100% { box-shadow: 0 4px 15px rgba(255, 65, 108, 0.35); }
}

/* ═══════ LIGHTBOX ═══════ */
.custom-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.custom-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.custom-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    object-fit: contain;
}

.custom-lightbox.active img {
    transform: scale(1) translateY(0);
}

.custom-lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
}

.custom-lightbox-close svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

/* ═══════ LIGHTBOX NAWIGACJA ═══════ */
.custom-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.custom-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.custom-lightbox-prev { left: 32px; }
.custom-lightbox-next { right: 32px; }

.custom-lightbox-nav svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.custom-lightbox img {
    /* Upewnij się, że ma płynne wracanie na miejsce */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    will-change: transform;
}

/* Ta klasa wyłącza opóźnienia, gdy ciągniesz zdjęcie */
.custom-lightbox img.dragging {
    transition: none !important;
}

/* Wygaszenie zdjęcia podczas zmiany */
.custom-lightbox img.changing {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
}

@media (max-width: 768px) {
    .custom-lightbox-prev { left: 16px; }
    .custom-lightbox-next { right: 16px; }
    .custom-lightbox-nav { width: 44px; height: 44px; }
}

/* Kursor lupy dla głównego zdjęcia */
#mainImage {
    cursor: zoom-in;
}

/* Product info */
.product-meta-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px
}

.product-brand {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--color-primary)
}

.product-sku {
   font-size: 12px;
   color: var(--color-text-muted)
}

.single-product .product-title,
.product-title {
   font-family: var(--font-display);
   font-size: clamp(28px, 3vw, 38px);
   font-weight: 400;
   line-height: 1.2;
   margin-bottom: 16px
}

.single-product .product-rating {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 24px;
   padding-bottom: 24px;
   border-bottom: 1px solid var(--color-border)
}

.rating-text {
   font-size: 14px;
   color: var(--color-text-light)
}

.rating-text strong {
   color: var(--color-text);
   font-weight: 600
}

.rating-divider {
   width: 1px;
   height: 16px;
   background: var(--color-border)
}

.rating-link {
   font-size: 13px;
   color: var(--color-primary);
   font-weight: 500
}

.rating-link:hover {
   text-decoration: underline
}

/* ── CENA NA STRONIE PRODUKTU (PRO STYLE) ── */
.product-price-block {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 32px;
}

/* Nowa cena - duża i wyraźna */
.price-current .amount {
   font-size: 36px !important;
   font-weight: 800 !important;
   color: var(--color-primary) !important;
   line-height: 1;
   letter-spacing: -0.5px;
}

/* Stara cena - MUSI być szara i cieńsza, żeby nie myliła klienta */
.price-old .amount {
   font-size: 22px !important;
   color: #9ca3af !important; /* Elegancki, zgaszony szary */
   text-decoration: line-through;
   font-weight: 400 !important;
   line-height: 1;
}
.price-old {
   text-decoration: none; /* Zapobiega podwójnemu przekreśleniu */
}

/* Badge oszczędności - smuklejszy, wyrównany, nowoczesny */
.price-discount {
   display: inline-flex;
   align-items: center;
   background: #e63946;
   color: #ffffff;
   font-size: 13px;
   font-weight: 500;
   padding: 6px 12px;
   border-radius: 8px; /* Mniejsze zaokrąglenie wygląda bardziej "pro" niż wielka piguła */
   box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2);
   line-height: 1;
   transform: translateY(-2px); /* Optymalne wyrównanie względem dużych cyfr */
}

/* Wymuszenie bieli i wyrównania wewnątrz czerwonego badge'a */
.price-discount .woocommerce-Price-amount,
.price-discount .woocommerce-Price-currencySymbol {
   color: #ffffff !important;
   font-weight: 700 !important;
   margin-left: 4px;
}

/* ── CENY W PRODUKTACH POWIĄZANYCH (PRO STYLE) ── */
.rel-card-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* Nowa cena (ins) */
.rel-card-price ins {
    text-decoration: none; /* Usuwamy domyślne podkreślenie */
}

.rel-card-price ins .amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

/* Stara cena (del) - identyczna jak na karcie produktu */
.rel-card-price del {
    text-decoration: none; /* Usuwamy domyślne przekreślenie tagu del */
}

.rel-card-price del .amount {
    font-size: 14px !important;
    color: #9ca3af !important; /* Ten sam elegancki szary */
    text-decoration: line-through; /* Przekreślamy tylko samą kwotę */
    font-weight: 400 !important;
}

/* ── CENY W PRODUKTACH POWIĄZANYCH (PRO STYLE) ── */
.rel-card-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* Nowa cena (ins) - dajemy ją na pierwsze miejsce */
.rel-card-price ins {
    text-decoration: none;
    order: 1; /* Pierwszy element */
}

.rel-card-price ins .amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

/* Stara cena (del) - dajemy ją na drugie miejsce */
.rel-card-price del {
    text-decoration: none;
    order: 2; /* Drugi element */
}

.rel-card-price del .amount {
    font-size: 14px !important;
    color: #9ca3af !important; /* Ten sam elegancki szary */
    text-decoration: line-through;
    font-weight: 400 !important;
}

/* Usuwamy marginesy, które WooCommerce czasem dodaje między del a ins */
.rel-card-price del, 
.rel-card-price ins {
    margin: 0 !important;
}

/* Opcjonalnie: poprawienie wyglądu badge'a procentowego w Related, jeśli go używasz */
.rel-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e63946;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3);
}

/* Variants */
.variant-group {
   margin-bottom: 24px
}

.variant-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px
}

.variant-label span {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .3px
}

.variant-label a {
   font-size: 12px;
   color: var(--color-primary);
   font-weight: 500
}

.variant-label a:hover {
   text-decoration: underline
}

.size-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.size-btn {
   min-width: 52px;
   padding: 10px 14px;
   border: 1.5px solid var(--color-border);
   border-radius: 10px;
   background: #fff;
   font-size: 13px;
   font-weight: 500;
   color: var(--color-text);
   text-align: center;
   transition: var(--transition)
}

.size-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary)
}

.size-btn.active,
.size-btn.selected {
   border-color: var(--color-primary);
   background: var(--color-primary-ultra-light);
   color: var(--color-primary);
   font-weight: 600
}

.size-btn.disabled,
.size-btn.out-of-stock {
   opacity: .35;
   cursor: not-allowed;
   text-decoration: line-through
}

.color-swatches {
   display: flex;
   gap: 10px
}

.color-swatch {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 2px solid transparent;
   cursor: pointer;
   transition: var(--transition);
   padding: 3px
}

.color-swatch::before {
   content: '';
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%
}

.color-swatch.active,
.color-swatch.selected {
   border-color: var(--color-primary)
}

.color-swatch:hover {
   border-color: var(--color-primary-light)
}

/* Variation Swatches plugin overrides */
.swatch-item.swatch-label {
   min-width: 52px;
   padding: 10px 14px;
   border: 1.5px solid var(--color-border) !important;
   border-radius: 10px !important;
   font-size: 13px;
   font-weight: 500;
   transition: var(--transition)
}

.swatch-item.swatch-label.selected {
   border-color: var(--color-primary) !important;
   background: var(--color-primary-ultra-light) !important;
   color: var(--color-primary) !important
}

.swatch-item.swatch-label.disabled {
   opacity: .35;
   text-decoration: line-through
}

.swatch-item.swatch-color {
   width: 36px !important;
   height: 36px !important;
   border-radius: 50% !important;
   border: 2px solid transparent !important;
   padding: 3px
}

.swatch-item.swatch-color.selected {
   border-color: var(--color-primary) !important
}

/* Add to cart */
.add-to-cart-row,
.cart {
   display: flex;
   gap: 12px;
   margin-bottom: 24px;
   padding-bottom: 24px;
   border-bottom: 1px solid var(--color-border)
}

.qty-selector,
.quantity {
   display: flex;
   align-items: center;
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
   flex-shrink: 0
}

.qty-btn {
   width: 44px;
   height: 50px;
   background: none;
   border: none;
   font-size: 18px;
   color: var(--color-text);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition)
}

.qty-btn:hover {
   background: var(--color-primary-ultra-light);
   color: var(--color-primary)
}

.qty-input,
.quantity input[type="number"] {
   width: 48px;
   height: 50px;
   border: none;
   border-left: 1px solid var(--color-border);
   border-right: 1px solid var(--color-border);
   text-align: center;
   font-size: 15px;
   font-weight: 600;
   color: var(--color-text);
   outline: none;
   -moz-appearance: textfield
}

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

.btn-add-to-cart,
.single_add_to_cart_button {
   flex: 1;
   background: var(--color-primary) !important;
   color: #fff !important;
   border: none !important;
   border-radius: var(--radius) !important;
   font-size: 15px !important;
   font-weight: 600 !important;
   letter-spacing: .5px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: var(--transition);
   padding: 14px 24px !important
}

.btn-add-to-cart:hover,
.single_add_to_cart_button:hover {
   background: var(--color-primary-dark) !important;
   transform: translateY(-1px);
   box-shadow: var(--shadow-hover)
}

.btn-add-to-cart svg {
   width: 20px;
   height: 20px;
   stroke: #fff;
   stroke-width: 1.5;
   fill: none
}

/* Product USPs */
.product-usps {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin-bottom: 28px
}

.product-usp {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   border-radius: var(--radius);
   background: var(--color-off-white);
   transition: var(--transition)
}

.product-usp:hover {
   background: var(--color-primary-ultra-light)
}

.product-usp-icon {
   width: 36px;
   height: 36px;
   flex-shrink: 0;
   border-radius: 10px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center
}

.product-usp-icon svg {
   width: 18px;
   height: 18px;
   stroke: var(--color-primary);
   stroke-width: 1.5;
   fill: none
}

.product-usp-text {
   font-size: 13px;
   font-weight: 500;
   line-height: 1.4
}

.product-usp-text small {
   display: block;
   font-weight: 400;
   color: var(--color-text-muted);
   font-size: 11px
}

/* Accordion */
.product-accordion {
   border-top: 1px solid var(--color-border);
   display: none;
}

.accordion-item {
   border-bottom: 1px solid var(--color-border)
}

.accordion-trigger {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 20px 0;
   background: none;
   border: none;
   font-size: 15px;
   font-weight: 600;
   color: var(--color-text);
   letter-spacing: .2px;
   text-align: left
}

.accordion-trigger svg {
   width: 18px;
   height: 18px;
   stroke: var(--color-text-muted);
   stroke-width: 2;
   fill: none;
   transition: transform .3s ease;
   flex-shrink: 0
}

.accordion-trigger.open svg {
   transform: rotate(180deg)
}

.accordion-trigger:hover {
   color: var(--color-primary)
}

.accordion-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s ease
}

.accordion-body.open {
   max-height: 1200px;
   padding-bottom: 24px
}

.accordion-body-inner {
   font-size: 14px;
   line-height: 1.8;
   color: var(--color-text-light)
}

.desc-content p {
   margin-bottom: 16px
}

.desc-content strong {
   color: var(--color-text);
   font-weight: 600
}

.desc-content ul {
   padding-left: 20px;
   margin-bottom: 16px
}

.desc-content li {
   margin-bottom: 6px
}

/* Specs table */
.specs-table {
   width: 100%;
   border-collapse: collapse
}

.specs-table tr:nth-child(even) td {
   background: var(--color-off-white)
}

.specs-table td {
   padding: 12px 16px;
   font-size: 14px;
   border-bottom: 1px solid var(--color-border)
}

.specs-table td:first-child {
   font-weight: 600;
   color: var(--color-text);
   width: 40%
}

.specs-table td:last-child {
   color: var(--color-text-light)
}

/* Reviews */
.reviews-summary {
   display: flex;
   align-items: center;
   gap: 32px;
   padding: 24px;
   background: var(--color-off-white);
   border-radius: var(--radius-lg);
   margin-bottom: 24px
}

.reviews-score {
   text-align: center;
   flex-shrink: 0
}

.reviews-score .big-number {
   font-family: var(--font-display);
   font-size: 52px;
   font-weight: 300;
   line-height: 1
}

.reviews-score .out-of {
   font-size: 13px;
   color: var(--color-text-muted);
   margin-top: 4px
}

.reviews-bars {
   flex: 1
}

.review-bar-row {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 6px
}

.review-bar-label {
   font-size: 12px;
   color: var(--color-text-muted);
   width: 14px;
   text-align: right
}

.review-bar-track {
   flex: 1;
   height: 6px;
   background: var(--color-border);
   border-radius: 3px;
   overflow: hidden
}

.review-bar-fill {
   height: 100%;
   background: #f5a623;
   border-radius: 3px
}

.review-bar-count {
   font-size: 12px;
   color: var(--color-text-muted);
   width: 20px
}

.review-item {
   padding: 20px 0;
   border-bottom: 1px solid var(--color-border)
}

.review-item:last-child {
   border-bottom: none
}

.review-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 8px
}

.review-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--color-primary-ultra-light);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 600;
   color: var(--color-primary)
}

.review-author {
   font-size: 14px;
   font-weight: 600
}

.review-date {
   font-size: 12px;
   color: var(--color-text-muted)
}

.review-stars {
   display: flex;
   gap: 1px;
   margin-bottom: 8px
}

.review-stars svg {
   width: 13px;
   height: 13px
}

.review-text {
   font-size: 14px;
   line-height: 1.7;
   color: var(--color-text-light)
}

/* Related products */
.related {
   padding: 80px 0;
   background: var(--color-off-white)
}

.related-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 40px
}

.related-title {
   font-family: var(--font-display);
   font-size: clamp(28px, 3vw, 40px);
   font-weight: 400
}

.related-title em {
   font-style: italic;
   color: var(--color-primary)
}

.related-link {
   font-size: 14px;
   font-weight: 500;
   color: var(--color-primary);
   display: flex;
   align-items: center;
   gap: 6px
}

.related-link:hover {
   gap: 10px
}

.related-link svg {
   width: 16px;
   height: 16px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none
}

.related-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px
}

.rel-card {
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: #fff;
   transition: var(--transition)
}

.rel-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover)
}

.rel-card-img {
   position: relative;
   overflow: hidden;
   aspect-ratio: 1;
   background: var(--color-off-white)
}

.rel-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease
}

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

.rel-card-info {
   padding: 16px 18px
}

.rel-card-cat {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   color: var(--color-text-muted);
   margin-bottom: 4px
}

.rel-card-name {
   font-family: var(--font-display);
   font-size: 17px;
   font-weight: 500;
   margin-bottom: 8px;
   line-height: 1.3;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.rel-card-name a:hover {
   color: var(--color-primary)
}

.rel-card-price {
   font-size: 16px;
   font-weight: 700;
   color: var(--color-primary)
}

.rel-card-price .old {
   font-size: 13px;
   color: var(--color-text-muted);
   text-decoration: line-through;
   font-weight: 400;
   margin-left: 8px
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer {
   background: var(--color-text);
   padding: 80px 0 32px;
   color: #fff
}

.footer h5,
.footer h4,
.footer h3,
.footer h2 {
   color: #fff
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: 48px;
   margin-bottom: 60px
}

.footer-brand .footer-logo {
   margin-bottom: 16px
}

.footer-brand .footer-logo img {
   height: 80px;
   width: auto;
   filter: brightness(0) invert(1)
}

.footer-brand p {
   font-size: 14px;
   line-height: 1.7;
   color: rgba(255, 255, 255, .5);
   max-width: 280px
}

.footer-desc {
   font-size: 14px;
   line-height: 1.7;
   color: rgba(255, 255, 255, .5);
   max-width: 280px
}

.footer-desc p {
   font-size: 14px;
   line-height: 1.7;
   color: rgba(255, 255, 255, .5);
   margin-bottom: 8px
}

.footer-social {
   display: flex;
   gap: 12px;
   margin-top: 24px
}

.social-link {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition)
}

.social-link:hover {
   background: var(--color-primary);
   border-color: var(--color-primary)
}

.social-link svg {
   width: 16px;
   height: 16px;
   fill: rgba(255, 255, 255, .7);
   stroke: rgba(255, 255, 255, .7);
   stroke-width: 1.5
}

.footer-col h5 {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 20px
}

.footer-col ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.footer-col a {
   font-size: 14px;
   color: rgba(255, 255, 255, .5);
   transition: var(--transition)
}

.footer-col a:hover {
   color: var(--color-primary)
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding-top: 28px;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.footer-bottom p {
   font-size: 13px;
   color: rgba(255, 255, 255, .35)
}

.footer-bottom-links {
   display: flex;
   gap: 24px
}

.footer-bottom-links a {
   font-size: 13px;
   color: rgba(255, 255, 255, .35)
}

.footer-bottom-links a:hover {
   color: rgba(255, 255, 255, .7)
}

/* ═══════════════════════════════════════════
   WC: NOTICES, MESSAGES
═══════════════════════════════════════════ */
.woocommerce-message {
   background: var(--color-primary-ultra-light);
   border: 1px solid var(--color-primary-light);
   border-radius: var(--radius);
   padding: 16px 20px;
   margin-bottom: 24px;
   font-size: 14px;
   color: var(--color-text)
}

.woocommerce-message a.button,
.woocommerce-message .restore-item {
   color: var(--color-primary) !important;
   font-weight: 600;
   background: none !important;
   border: none;
   padding: 0 !important;
   text-decoration: underline
}

.woocommerce-error {
   background: #fef2f2;
   border: 1px solid #fecaca;
   border-radius: var(--radius);
   padding: 16px 20px;
   margin-bottom: 24px;
   font-size: 14px;
   color: #991b1b;
   list-style: none
}

.woocommerce-info {
   background: var(--color-off-white);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 16px 20px;
   margin-bottom: 24px;
   font-size: 14px
}

/* ═══════════════════════════════════════════
   WC: CART PAGE
═══════════════════════════════════════════ */
.woocommerce-cart .woo-main {
   padding: 40px 0 80px
}

.woocommerce-cart .container {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 24px
}

.woocommerce-cart .woocommerce-cart-form {
   margin-bottom: 48px
}

/* Cart table */
table.shop_table {
   width: 100%;
   border-collapse: collapse;
   border: none !important;
   border-radius: var(--radius-lg);
   overflow: hidden
}

table.shop_table th {
   padding: 16px 20px;
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--color-text-light);
   text-align: left;
   border: none !important
}

table.shop_table td {
   padding: 20px;
   vertical-align: middle;
   border-bottom: 1px solid var(--color-border) !important;
   border-left: none !important;
   border-right: none !important
}

table.shop_table .product-thumbnail {
   width: 100px
}

table.shop_table .product-thumbnail img {
   width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: var(--radius)
}

table.shop_table .product-name a {
   font-family: var(--font-display);
   font-size: 16px;
   font-weight: 500;
   color: var(--color-text)
}

table.shop_table .product-name a:hover {
   color: var(--color-primary)
}

table.shop_table .product-name .variation {
   display: block;
   font-size: 12px;
   color: var(--color-text-muted);
   margin-top: 4px;
   font-family: var(--font-body)
}

table.shop_table .product-price,
.cart_item .product-price {
   font-size: 15px;
   color: var(--color-text-light)
}

table.shop_table .product-subtotal {
   font-size: 16px;
   font-weight: 700;
   color: var(--color-primary)
}

table.shop_table .product-remove a {
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--color-off-white);
   color: var(--color-text-muted) !important;
   font-size: 18px;
   transition: var(--transition)
}

table.shop_table .product-remove a:hover {
   background: #fef2f2;
   color: #e63946 !important
}

/* Quantity in cart */
table.shop_table .quantity {
   display: inline-flex;
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden
}

table.shop_table .quantity input.qty {
   width: 40px;
   height: 38px;
   text-align: center;
   border: none;
   font-size: 14px;
   font-weight: 600
}

/* Update cart / coupon */
.cart-collaterals,
.cart_totals {
   margin-top: 0
}

.actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 24px 0 !important;
   border: none !important
}

.actions .coupon {
   display: flex;
   gap: 8px;
   align-items: center
}

.actions .coupon input {
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 12px 16px;
   font-size: 14px;
   outline: none;
   transition: var(--transition);
   font-family: var(--font-body)
}

.actions .coupon input:focus {
   border-color: var(--color-primary)
}

.actions .coupon button,
.actions .button,
button[name="update_cart"] {
   background: var(--color-off-white) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius) !important;
   padding: 12px 24px !important;
   font-size: 13px !important;
   font-weight: 600 !important;
   transition: var(--transition) !important;
   font-family: var(--font-body) !important;
   letter-spacing: .3px !important
}

.actions .coupon button:hover,
.actions .button:hover,
button[name="update_cart"]:hover {
   border-color: var(--color-primary) !important;
   color: var(--color-primary) !important
}

/* Cart totals */
.cart_totals {
   max-width: 480px;
   margin-left: auto !important
}

.cart_totals h2 {
   font-family: var(--font-display);
   font-size: 28px;
   font-weight: 400;
   margin-bottom: 24px
}

.cart_totals table {
   border: none !important
}

.cart_totals th {
   font-size: 14px;
   font-weight: 600;
   color: var(--color-text);
   padding: 12px 0 !important;
   border: none !important
}

.cart_totals td {
   font-size: 15px;
   color: var(--color-text-light);
   padding: 12px 0 !important;
   text-align: right !important;
   border: none !important
}

.cart_totals .order-total th,
.cart_totals .order-total td {
   font-size: 20px;
   font-weight: 700;
   color: var(--color-primary);
   padding-top: 20px !important;
   border-top: 2px solid var(--color-border) !important
}

.wc-proceed-to-checkout a.checkout-button {
   display: block !important;
   width: 100% !important;
   background: var(--color-primary) !important;
   color: #fff !important;
   border: none !important;
   border-radius: var(--radius) !important;
   padding: 18px 24px !important;
   font-size: 16px !important;
   font-weight: 600 !important;
   text-align: center !important;
   transition: var(--transition) !important;
   margin-top: 24px !important;
   font-family: var(--font-body) !important;
   letter-spacing: .5px !important
}

.wc-proceed-to-checkout a.checkout-button:hover {
   background: var(--color-primary-dark) !important;
   transform: translateY(-1px);
   box-shadow: var(--shadow-hover)
}

/* ═══════════════════════════════════════════
   WC: CHECKOUT PAGE
═══════════════════════════════════════════ */
.woocommerce-checkout .woo-main {
   padding: 40px 0 80px
}

.checkout-layout,
.woocommerce-checkout .col2-set {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 48px
}

/* Form fields */
.woocommerce form .form-row {
   margin-bottom: 16px
}

.woocommerce form .form-row label {
   font-size: 13px;
   font-weight: 600;
   color: var(--color-text);
   margin-bottom: 6px;
   display: block;
   letter-spacing: .2px
}

.woocommerce form .form-row label .required {
   color: var(--color-primary)
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
#billing_address_1,
#billing_city,
#billing_postcode,
#billing_phone,
#billing_email,
#shipping_address_1,
#shipping_city,
#shipping_postcode {
   width: 100% !important;
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius) !important;
   padding: 14px 16px !important;
   font-family: var(--font-body) !important;
   font-size: 14px !important;
   color: var(--color-text) !important;
   outline: none !important;
   transition: var(--transition) !important;
   background: #fff !important;
   appearance: none;
   -webkit-appearance: none
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus {
   border-color: var(--color-primary) !important;
   box-shadow: 0 0 0 3px rgba(209, 4, 102, .08) !important
}

.woocommerce form .form-row select {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%239d9db0' stroke-width='2'/%3E%3C/svg%3E") !important;
   background-repeat: no-repeat !important;
   background-position: right 14px center !important;
   padding-right: 40px !important
}

/* Select2 overrides (WC uses select2 for country/state) */
.select2-container .select2-selection--single {
   height: auto !important;
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius) !important;
   padding: 10px 16px !important
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
   font-family: var(--font-body) !important;
   font-size: 14px !important;
   color: var(--color-text) !important;
   line-height: 1.5 !important;
   padding: 0 !important
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
   top: 50% !important;
   transform: translateY(-50%);
   right: 12px !important
}

.select2-dropdown {
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius) !important;
   box-shadow: 0 8px 32px rgba(0, 0, 0, .1) !important
}

.select2-results__option--highlighted {
   background: var(--color-primary-ultra-light) !important;
   color: var(--color-primary) !important
}

/* Order review table */
.woocommerce-checkout-review-order-table {
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius-lg) !important;
   overflow: hidden
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
   padding: 14px 20px !important;
   font-size: 14px !important;
   border-bottom: 1px solid var(--color-border) !important;
   border-left: none !important;
   border-right: none !important
}

.woocommerce-checkout-review-order-table thead th {
   background: var(--color-off-white);
   font-size: 13px !important;
   font-weight: 600 !important;
   text-transform: uppercase !important;
   letter-spacing: .5px !important
}

.woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total th {
   font-size: 18px !important;
   font-weight: 700 !important;
   color: var(--color-primary) !important
}

/* Payment methods */
.wc_payment_methods {
   list-style: none !important;
   padding: 0 !important;
   margin: 24px 0 !important
}

.wc_payment_method {
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   margin-bottom: 12px;
   overflow: hidden;
   transition: var(--transition)
}

.wc_payment_method.active,
.wc_payment_method:has(input:checked) {
   border-color: var(--color-primary);
   background: var(--color-primary-ultra-light)
}

.wc_payment_method label {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 20px;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer
}

.wc_payment_method label img {
   max-height: 24px;
   width: auto
}

.payment_box {
   padding: 0 20px 16px 20px;
   font-size: 13px;
   color: var(--color-text-light);
   line-height: 1.6
}

/* Place order button */
#place_order {
   display: block !important;
   width: 100% !important;
   background: var(--color-primary) !important;
   color: #fff !important;
   border: none !important;
   border-radius: var(--radius) !important;
   padding: 18px 24px !important;
   font-size: 16px !important;
   font-weight: 600 !important;
   letter-spacing: .5px !important;
   transition: var(--transition) !important;
   font-family: var(--font-body) !important;
   margin-top: 24px !important;
   cursor: pointer !important
}

#place_order:hover {
   background: var(--color-primary-dark) !important;
   transform: translateY(-1px);
   box-shadow: var(--shadow-hover)
}

/* ═══════════════════════════════════════════
   WC: MY ACCOUNT
═══════════════════════════════════════════ */
.woocommerce-MyAccount-navigation {
   background: var(--color-off-white);
   border-radius: var(--radius-lg);
   padding: 8px;
   margin-bottom: 32px
}

.woocommerce-MyAccount-navigation ul {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 4px
}

.woocommerce-MyAccount-navigation li a {
   display: block;
   padding: 12px 20px;
   font-size: 14px;
   font-weight: 500;
   color: var(--color-text-light);
   border-radius: var(--radius);
   transition: var(--transition)
}

.woocommerce-MyAccount-navigation li a:hover {
   background: #fff;
   color: var(--color-primary)
}

.woocommerce-MyAccount-navigation li.is-active a {
   background: #fff;
   color: var(--color-primary);
   font-weight: 600;
   box-shadow: var(--shadow-card)
}

.woocommerce-MyAccount-content {
   font-size: 15px;
   line-height: 1.7;
   color: var(--color-text-light)
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
   font-family: var(--font-display);
   font-weight: 400;
   margin-bottom: 20px
}

/* Login/Register form */
.woocommerce-form-login,
.woocommerce-form-register {
   max-width: 480px;
   margin: 0 auto;
   padding: 40px;
   background: var(--color-off-white);
   border-radius: var(--radius-lg)
}

#customer_login {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   max-width: 960px;
   margin: 0 auto
}

#customer_login h2 {
   font-family: var(--font-display);
   font-size: 28px;
   font-weight: 400;
   margin-bottom: 24px
}

#customer_login .form-row .input-text {
   width: 100%;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 14px 16px;
   font-size: 14px;
   outline: none;
   transition: var(--transition)
}

#customer_login .form-row .input-text:focus {
   border-color: var(--color-primary)
}

.woocommerce-Button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
   background: var(--color-primary) !important;
   color: #fff !important;
   border: none !important;
   border-radius: var(--radius) !important;
   padding: 14px 32px !important;
   font-size: 14px !important;
   font-weight: 600 !important;
   transition: var(--transition) !important;
   cursor: pointer !important;
   font-family: var(--font-body) !important
}

.woocommerce-Button:hover,
.woocommerce-form-login__submit:hover {
   background: var(--color-primary-dark) !important
}

/* Order details table */
.woocommerce-orders-table,
.woocommerce-table--order-details {
   width: 100%;
   border-collapse: collapse
}

.woocommerce-orders-table th,
.woocommerce-table--order-details th {
   padding: 14px 16px;
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .5px
}

.woocommerce-orders-table td,
.woocommerce-table--order-details td {
   padding: 14px 16px;
   border-bottom: 1px solid var(--color-border);
   font-size: 14px
}

.woocommerce-orders-table .button,
.woocommerce-orders-table .woocommerce-button {
   padding: 8px 16px !important;
   font-size: 12px !important;
   border-radius: 8px !important
}

/* ═══════════════════════════════════════════
   404 / SEARCH / EMPTY
═══════════════════════════════════════════ */
.page-404,
.no-results {
   text-align: center;
   padding: 120px 24px 80px
}

.page-404 h1 {
   font-family: var(--font-display);
   font-size: clamp(80px, 12vw, 160px);
   font-weight: 300;
   color: var(--color-primary-light);
   line-height: 1;
   margin-bottom: 16px
}

.page-404 h2,
.no-results h2 {
   font-family: var(--font-display);
   font-size: clamp(28px, 4vw, 42px);
   font-weight: 400;
   margin-bottom: 16px
}

.page-404 p,
.no-results p {
   font-size: 16px;
   color: var(--color-text-light);
   max-width: 480px;
   margin: 0 auto 32px
}

.search-results-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   text-align: left
}

/* ═══════════════════════════════════════════
   HOMEPAGE: HERO
═══════════════════════════════════════════ */
.hero {
   min-height: 120vh;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #fff 0%, var(--color-primary-ultra-light) 50%, var(--color-bg-warm) 100%);
   padding-top: 130px
}

.hero::before {
   content: '';
   position: absolute;
   top: -30%;
   right: -10%;
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(209, 4, 102, .06) 0%, transparent 70%);
   pointer-events: none
}

.hero .container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
   position: relative;
   z-index: 2
}

.hero-content {
   max-width: 560px;
   animation: fadeInUp .8s ease both
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: 50px;
   padding: 8px 20px 8px 12px;
   font-size: 13px;
   font-weight: 500;
   color: var(--color-text-light);
   margin-bottom: 32px;
   box-shadow: var(--shadow-soft)
}

.hero-badge .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--color-primary);
   animation: pulse 2s infinite
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1)
   }

   50% {
      opacity: .5;
      transform: scale(1.3)
   }
}

.hero-title {
   font-family: var(--font-display);
   font-size: clamp(42px, 5.5vw, 68px);
   font-weight: 400;
   line-height: 1.08;
   margin-bottom: 28px;
   animation: fadeInUp .8s ease .15s forwards;
   opacity: 0;
   color: #1a1a2e
}

.hero-title em {
   font-style: italic;
   color: var(--color-primary);
   position: relative
}

.hero-title em::after {
   content: '';
   position: absolute;
   bottom: 4px;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--color-primary);
   opacity: .3
}

.hero-desc {
   font-size: 17px;
   line-height: 1.7;
   color: var(--color-text-light);
   max-width: 440px;
   margin-bottom: 40px;
   animation: fadeInUp .8s ease .3s forwards;
   opacity: 0
}

.hero-actions {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   animation: fadeInUp .8s ease .45s forwards;
   opacity: 0
}

.hero-visual {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
   animation: fadeInRight 1s ease .3s forwards;
   opacity: 0
}

.hero-img {
   border-radius: var(--radius-lg);
   overflow: hidden;
}

.hero-img:nth-child(2) {
   margin-top: 40px
}

.hero-img:nth-child(3) {
   margin-top: -40px
}

.hero-img img {
   width: 280px;
   height: 370px;
   object-fit: cover;
   border-radius: 15px;
   aspect-ratio: 3/4;
   transition: transform .6s ease
}

.hero-img:hover img {
   transform: scale(1.05)
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px)
   }

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

@keyframes fadeInRight {
   from {
      opacity: 0;
      transform: translateX(40px)
   }

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

/* Editor: wyłącz animacje */
.hero.no-anim .hero-content,
.hero.no-anim .hero-title,
.hero.no-anim .hero-desc,
.hero.no-anim .hero-actions,
.hero.no-anim .hero-visual,
.hero.no-anim .hero-badge,
.hero.no-anim .hero-img {
   opacity: 1 !important;
   transform: none !important;
   animation: none !important
}

/* ═══════════════════════════════════════════
   HOMEPAGE: USP BAR
═══════════════════════════════════════════ */
.usp-bar {
   position: relative;
   z-index: 10;
   margin-top: -50px;
   padding: 0;
   background: transparent;
   border: none
}

.usp-bar .container {
   background: #fff;
   border-radius: var(--radius-xl);
   box-shadow: 0 4px 40px rgba(0, 0, 0, .06);
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   overflow: hidden;
   padding: 0
}

.usp-item {
   padding: 36px 32px;
   display: flex;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   transition: var(--transition)
}

.usp-item:not(:last-child)::after {
   content: '';
   position: absolute;
   right: 0;
   top: 20%;
   height: 60%;
   width: 1px;
   background: var(--color-border)
}

.usp-item:hover {
   background: var(--color-primary-ultra-light)
}

.usp-icon {
   width: 48px;
   height: 48px;
   flex-shrink: 0;
   border-radius: 14px;
   background: var(--color-primary-ultra-light);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition)
}

.usp-item:hover .usp-icon {
   background: var(--color-primary)
}

.usp-icon svg {
   width: 22px;
   height: 22px;
   stroke: var(--color-primary);
   stroke-width: 1.5;
   fill: none;
   transition: var(--transition)
}

.usp-item:hover .usp-icon svg {
   stroke: #fff
}

.usp-item strong {
   display: block;
   font-size: 15px;
   font-weight: 600;
   margin-bottom: -5px;
   color: #1a1a2e
}

.usp-item span {
   font-size: 13px;
   color: var(--color-text-muted);
   line-height: 1.5
}

/* ═══════════════════════════════════════════
   HOMEPAGE: PRODUCTS SECTION
═══════════════════════════════════════════ */
.section-products {
   padding: 120px 0 100px;
   background: #fff
}

.section-header {
   text-align: center;
   margin-bottom: 48px
}

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

.section-header-row .section-label {
   margin-bottom: 8px
}

/* ═══════════════════════════════════════════
   HOMEPAGE: HOT SALES CTA
═══════════════════════════════════════════ */
.hot-sales {
   padding: 0;
   background: #fff
}

.hot-sales .container {
   max-width: 100%;
   padding: 0
}

.hot-sales-inner {
   background: linear-gradient(135deg, var(--color-primary) 0%, #e8157a 40%, #c2035a 100%);
   padding: 80px 40px;
   text-align: center;
   position: relative;
   overflow: hidden
}

.hot-sales-inner::before {
   content: '';
   position: absolute;
   top: -100px;
   left: -100px;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .06);
   pointer-events: none
}

.hot-sales-inner::after {
   content: '';
   position: absolute;
   bottom: -80px;
   right: -80px;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .04);
   pointer-events: none
}

.hot-sales-label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, .15);
   backdrop-filter: blur(10px);
   border-radius: 50px;
   padding: 8px 24px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: 24px
}

.hot-sales-title {
   font-family: var(--font-display);
   font-size: clamp(36px, 5vw, 60px);
   font-weight: 400;
   color: #fff;
   line-height: 1.15;
   margin-bottom: 12px
}

.hot-sales-title em {
   font-style: italic;
   color: #fff;
   text-decoration: underline;
   text-decoration-color: rgba(255, 255, 255, .4);
   text-underline-offset: 6px
}

.hot-sales-inner p {
   font-size: 17px;
   color: rgba(255, 255, 255, .85);
   max-width: 480px;
   margin: 0 auto 36px;
   line-height: 1.6
}

.hot-sales-inner .btn-white {
   font-weight: 600;
   padding: 18px 44px;
   font-size: 15px
}

/* ═══════════════════════════════════════════
   HOMEPAGE: ABOUT / TEAM
═══════════════════════════════════════════ */
.section-about {
   padding: 100px 0;
   background: var(--color-bg-warm);
   position: relative;
   overflow: hidden
}

.section-about::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 40%;
   height: 100%;
   background: radial-gradient(ellipse at top right, rgba(209, 4, 102, .04) 0%, transparent 70%);
   pointer-events: none
}

.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center
}

.about-img {
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .08)
}

.about-img img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   object-position: left center;
}

.about-content p {
   font-size: 16px;
   line-height: 1.8;
   color: var(--color-text-light);
   margin: 20px 0 20px;
}

.about-checklist {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-bottom: 40px
}

.about-checklist li {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 15px;
   color: var(--color-text)
}

.about-checklist svg {
   width: 14px;
   height: 14px;
   flex-shrink: 0
}

.about-checklist li::before {
   content: '';
   display: none
}

.about-check-circle {
   width: 28px;
   height: 28px;
   background: var(--color-primary-ultra-light);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

/* ═══════════════════════════════════════════
   HOMEPAGE: STATS
═══════════════════════════════════════════ */
.section-stats {
   padding: 80px 0;
   background: var(--color-primary);
   position: relative;
   overflow: hidden
}

.section-stats::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -10%;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .1);
   pointer-events: none
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 40px;
   text-align: center;
   position: relative;
   z-index: 2
}

.stat-item {
   padding: 24px 16px;
   color: #fff
}

.stat-item * {
   color: #fff
}

.stat-number {
   font-family: var(--font-display);
   font-size: clamp(42px, 5vw, 64px);
   font-weight: 300;
   line-height: 1;
   display: block;
   margin-bottom: 8px;
   color: #fff
}

.stat-label {
   font-size: 14px;
   color: rgba(255, 255, 255, .8);
   font-weight: 500
}

/* ═══════════════════════════════════════════
   HOMEPAGE: BRAFITTING CTA
═══════════════════════════════════════════ */
.section-brafitting {
   padding: 120px 0;
   background: #fff
}

.brafitting-inner {
   background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
   border-radius: var(--radius-xl);
   padding: 80px;
   text-align: center;
   position: relative;
   overflow: hidden
}

.brafitting-inner::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .05);
   pointer-events: none
}

.brafitting-inner::after {
   content: '';
   position: absolute;
   bottom: -30%;
   left: -10%;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .03);
   pointer-events: none
}

.brafitting-inner>* {
   position: relative;
   z-index: 2
}

.brafitting-inner .section-label {
   color: rgba(255, 255, 255, .7)
}

.brafitting-inner .section-title {
   color: #fff
}

.brafitting-inner .section-title em {
   color: #fff
}

.brafitting-inner p {
   font-size: 16px;
   color: rgba(255, 255, 255, .8);
   max-width: 480px;
   margin: 16px auto 40px;
   line-height: 1.7
}

.brafitting-inner .btn-primary {
   background: #fff;
   color: var(--color-primary)
}

.brafitting-inner .btn-primary:hover {
   background: rgba(255, 255, 255, .9);
   transform: translateY(-2px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, .15)
}

/* ═══════════════════════════════════════════
   HOMEPAGE: CATEGORY CARDS
═══════════════════════════════════════════ */
.section-categories {
   padding: 120px 0;
   background: #fff
}

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

.cat-card {
   display: block;
   position: relative;
   border-radius: var(--radius-xl);
   overflow: hidden;
   aspect-ratio: 4/3;
   cursor: pointer;
   background: var(--color-off-white);
   border: none
}

.cat-card-img {
   position: absolute;
   inset: 0
}

.cat-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .8s ease
}

.cat-card:hover .cat-card-img img {
   transform: scale(1.1)
}

.cat-card-content {
   position: absolute;
   inset: 0;
   background: linear-gradient(transparent 30%, rgba(26, 26, 46, .7));
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 36px;
   transition: var(--transition)
}

.cat-card:hover .cat-card-content {
   background: linear-gradient(transparent 20%, rgba(209, 4, 102, .75))
}

.cat-card-content h3 {
   font-family: var(--font-display);
   font-size: 28px;
   font-weight: 400;
   color: #fff;
   margin-bottom: 4px
}

.cat-card-content p {
   font-size: 13px;
   color: rgba(255, 255, 255, .8);
   margin-bottom: 0
}

.cat-card-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   font-weight: 600;
   color: #fff;
   margin-top: 8px;
   transition: var(--transition)
}

.cat-card:hover .cat-card-link {
   gap: 10px
}

.cat-card-link svg {
   transition: transform .3s ease;
   stroke: #fff
}

/* ═══════════════════════════════════════════
   HOMEPAGE: BRANDS
═══════════════════════════════════════════ */
.section-brands {
   padding: 80px 0;
   background: var(--color-off-white)
}

.brands-grid {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 20px;
   padding: 32px 0;
   max-width: 900px;
   margin: 0 auto
}

.brand-item {
   aspect-ratio: 1;
   width: 140px;
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   box-shadow: var(--shadow-card);
   padding: 20px;
   transition: var(--transition)
}

.brand-item:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover)
}

.brand-item img {
   max-width: 90%;
   max-height: 90%;
   object-fit: contain
}

.brand-name {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 500;
   color: var(--color-text-light);
   transition: var(--transition)
}

.brand-item:hover .brand-name {
   color: var(--color-primary)
}

.about-img-placeholder {
   width: 100%;
   aspect-ratio: 4/5;
   background: var(--color-off-white);
   border-radius: var(--radius-xl)
}

/* ═══════════════════════════════════════════
   MOBILE NAV OVERLAY
═══════════════════════════════════════════ */
.mobile-nav {
   position: fixed;
   top: 0;
   right: -100%;
   width: 100%;
   max-width: 380px;
   height: 100dvh;
   background: #fff;
   z-index: 1100;
   transition: right .4s cubic-bezier(.4, 0, .2, 1);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   box-shadow: -8px 0 40px rgba(0, 0, 0, .1)
}

.mobile-nav.open {
   right: 0
}

.mobile-nav-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .4);
   z-index: 1099;
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s ease, visibility .3s ease
}

.mobile-nav-backdrop.open {
   opacity: 1;
   visibility: visible
}

body.menu-open {
   overflow: hidden
}

.mobile-nav-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
   border-bottom: 1px solid var(--color-border)
}

.mobile-nav-header img {
   height: 36px;
   width: auto
}

.mobile-nav-close {
   width: 40px;
   height: 40px;
   background: none;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: var(--transition)
}

.mobile-nav-close:hover {
   background: var(--color-off-white)
}

.mobile-nav-close svg {
   width: 20px;
   height: 20px;
   stroke: var(--color-text);
   stroke-width: 1.5;
   fill: none
}

.mobile-nav-menu {
   padding: 16px 0;
   list-style: none
}

.mobile-nav-menu>li {
   border-bottom: 1px solid var(--color-border)
}

.mobile-nav-menu>li>a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 24px;
   font-size: 15px;
   font-weight: 500;
   color: var(--color-text);
   transition: var(--transition)
}

.mobile-nav-menu>li>a:hover,
.mobile-nav-menu>li>a:active {
   color: var(--color-primary);
   background: var(--color-primary-ultra-light)
}

.mobile-nav-menu>li>a svg {
   width: 16px;
   height: 16px;
   stroke: var(--color-text-muted);
   stroke-width: 2;
   fill: none;
   transition: transform .3s ease
}

.mobile-nav-menu>li.open>a svg {
   transform: rotate(180deg)
}

.mobile-nav-sub {
   display: none;
   list-style: none;
   background: var(--color-off-white);
   padding: 8px 0
}

.mobile-nav-menu>li.open .mobile-nav-sub {
   display: block
}

.mobile-nav-sub a {
   display: block;
   padding: 10px 24px 10px 40px;
   font-size: 14px;
   color: var(--color-text-light);
   transition: var(--transition)
}

.mobile-nav-sub a:hover {
   color: var(--color-primary)
}

/* Mobile nav highlight item */
.mobile-nav-cta {
   padding: 20px 24px
}

.mobile-nav-cta a {
   display: block;
   background: var(--color-primary);
   color: #fff;
   text-align: center;
   padding: 14px;
   border-radius: var(--radius);
   font-weight: 600;
   font-size: 14px;
   transition: var(--transition)
}

.mobile-nav-cta a:hover {
   background: var(--color-primary-dark)
}

/* Hamburger animation */
.menu-toggle.active span:nth-child(1) {
   transform: rotate(45deg) translate(4px, 5px)
}

.menu-toggle.active span:nth-child(2) {
   opacity: 0
}

.menu-toggle.active span:nth-child(3) {
   transform: rotate(-45deg) translate(4px, -5px)
}

/* ═══════════════════════════════════════════
   SEARCH OVERLAY
═══════════════════════════════════════════ */
.search-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   background: rgba(255, 255, 255, .97);
   backdrop-filter: blur(20px);
   z-index: 1200;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 20vh;
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s ease, visibility .3s ease
}

.search-overlay.open {
   opacity: 1;
   visibility: visible
}

.search-overlay-inner {
   width: 100%;
   max-width: 640px;
   padding: 0 24px
}

.search-overlay-close {
   position: absolute;
   top: 24px;
   right: 24px;
   width: 48px;
   height: 48px;
   background: var(--color-off-white);
   border: none;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition)
}

.search-overlay-close:hover {
   background: var(--color-primary-ultra-light)
}

.search-overlay-close svg {
   width: 20px;
   height: 20px;
   stroke: var(--color-text);
   stroke-width: 1.5;
   fill: none
}

.search-overlay-inner label {
   display: block;
   font-family: var(--font-display);
   font-size: clamp(18px, 3vw, 24px);
   font-weight: 400;
   color: var(--color-text-muted);
   margin-bottom: 16px
}

.search-input-wrap {
   position: relative
}

.search-input-wrap input {
   width: 100%;
   border: none;
   border-bottom: 2px solid var(--color-border);
   padding: 16px 48px 16px 0;
   font-family: var(--font-display);
   font-size: clamp(24px, 4vw, 40px);
   color: var(--color-text);
   background: none;
   outline: none;
   transition: border-color .3s ease
}

.search-input-wrap input:focus {
   border-color: var(--color-primary)
}

.search-input-wrap input::placeholder {
   color: var(--color-text-muted)
}

.search-input-wrap button {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   padding: 8px
}

.search-input-wrap button svg {
   width: 24px;
   height: 24px;
   stroke: var(--color-text-muted);
   stroke-width: 1.5;
   fill: none
}

.search-suggestions {
   margin-top: 32px
}

.search-suggestions h4 {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--color-text-muted);
   margin-bottom: 16px
}

.search-suggestions a {
   display: inline-block;
   padding: 8px 20px;
   border: 1px solid var(--color-border);
   border-radius: 50px;
   font-size: 14px;
   color: var(--color-text-light);
   margin: 0 8px 8px 0;
   transition: var(--transition)
}

.search-suggestions a:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
   background: var(--color-primary-ultra-light)
}

/* ═══════════════════════════════════════════
   FIBOFILTERS 1.11.0 — CSS OVERRIDES
═══════════════════════════════════════════ */
/* ═══════ FiboFilters — match native filter style ═══════ */
.fibofilters-vertical-filters-container {
   font-family: var(--font-body) !important
}

/* Block = section */
.fibofilters-block {
   padding: 24px 0 !important;
   border-bottom: 1px solid var(--color-border) !important;
   margin: 0 !important
}

.fibofilters-block:first-child {
   padding-top: 0 !important
}

/* Headlines */
.fibofilters-block__pre-headline {
   display: block;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--color-text-muted);
   margin-bottom: 4px
}

.fibofilters-block__headline-box-inner {
   font-size: 14px !important;
   font-weight: 600 !important;
   letter-spacing: .3px !important;
   color: var(--color-text) !important;
   margin: 0 0 16px !important;
   font-family: var(--font-body) !important
}

.fibofilters-block__headline-desc:empty {
   display: none
}

/* Breadcrumbs */
.fibofilters-block__breadcrumbs {
   display: inline-block;
   font-size: 12px;
   color: var(--color-text-muted);
   margin-bottom: 12px
}

.fibofilters-block__breadcrumbs a {
   color: var(--color-primary);
   text-decoration: underline
}

.fibofilters-block__breadcrumbs a:hover {
   color: var(--color-primary-dark)
}

/* Items list */
.fibofilters-block__items-list {
   list-style: none !important;
   padding: 0 !important;
   margin: 0 !important;
   display: flex;
   flex-direction: column;
   gap: 2px
}

/* Individual item */
.fibofilters-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 8px;
   transition: var(--transition)
}

.fibofilters-item__interactive {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   width: 100%;
   padding: 8px 12px !important;
   font-size: 13.5px !important;
   color: var(--color-text-light) !important;
   border-radius: 8px !important;
   transition: var(--transition) !important;
   text-decoration: none !important;
   cursor: pointer;
   gap: 8px
}

.fibofilters-item:hover {
   background: var(--color-primary-ultra-light) !important
}

.fibofilters-item:hover .fibofilters-item__interactive {
   color: var(--color-primary) !important
}

.fibofilters-item:hover .fibofilters-item__counter {
   color: var(--color-primary) !important;
   background: transparent !important
}

.fibofilters-item--link {
   padding: 0
}

.fibofilters-item--link .fibofilters-item__interactive {
   flex: 1
}

/* Label */
.fibofilters-item__label {
   flex: 1;
   font-size: 13.5px
}

.fibofilters-item__label span {
   font-size: inherit;
   color: inherit
}

/* Counter (pill badge) */
.fibofilters-item__counter {
   font-size: 12px !important;
   color: var(--color-text-muted) !important;
   background: var(--color-off-white) !important;
   padding: 2px 8px !important;
   border-radius: 10px !important;
   min-width: 28px !important;
   text-align: center !important;
   flex-shrink: 0;
   line-height: 1.4
}

.fibofilters-item--link .fibofilters-item__counter {
   padding: 8px 12px !important;
   margin-right: 0
}

/* Radio / Checkbox controls */
.fibofilters-item__control {
   width: 16px;
   height: 16px;
   border: 2px solid var(--color-border);
   border-radius: 50%;
   flex-shrink: 0;
   transition: var(--transition);
   position: relative
}

.fibofilters-item--checkbox .fibofilters-item__control {
   border-radius: 4px
}

.fibofilters-item__interactive[aria-checked="true"] .fibofilters-item__control {
   border-color: var(--color-primary);
   background: var(--color-primary)
}

.fibofilters-item__interactive[aria-checked="true"] .fibofilters-item__control::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 6px;
   height: 6px;
   background: #fff;
   border-radius: 50%
}

.fibofilters-item--checkbox .fibofilters-item__interactive[aria-checked="true"] .fibofilters-item__control::after {
   border-radius: 1px;
   width: 8px;
   height: 5px;
   background: transparent;
   border-left: 2px solid #fff;
   border-bottom: 2px solid #fff;
   transform: translate(-50%, -60%) rotate(-45deg)
}

/* Active/selected state */
.fibofilters-item__interactive[aria-checked="true"] {
   background: var(--color-primary-ultra-light) !important;
   color: var(--color-primary) !important;
   font-weight: 600 !important
}

.fibofilters-item__interactive[aria-checked="true"] .fibofilters-item__label span {
   color: var(--color-primary)
}

/* More/less button */
.fibofilters-more-less {
   font-size: 13px !important;
   color: var(--color-primary) !important;
   cursor: pointer !important;
   padding: 8px 12px !important;
   font-weight: 500 !important;
   display: inline-block
}

.fibofilters-more-less:hover {
   text-decoration: underline
}

.fibofilters-more-less__counter {
   color: var(--color-primary)
}

/* Loading */
.fibofilters-overlay {
   background: rgba(255, 255, 255, .7) !important;
   backdrop-filter: blur(4px) !important
}

/* Button-style filters (Rozmiar etc.) */
.fibofilters-block--buttons .fibofilters-block__items-list {
   flex-direction: row !important;
   flex-wrap: wrap !important;
   gap: 8px !important
}

.fibofilters-item--button {
   border-radius: 8px !important;
   border: 1px solid var(--color-border) !important;
   background: #fff !important;
   transition: all .25s ease !important;
   box-shadow: none !important;
   outline: none !important
}

.fibofilters-item--button * {
   outline: none !important;
   box-shadow: none !important
}

.fibofilters-item--button .fibofilters-item__interactive {
   padding: 8px 14px !important;
   justify-content: center !important;
   font-size: 13px !important;
   color: var(--color-text-light) !important;
   border: none !important;
   background: transparent !important
}

.fibofilters-item--button:hover {
   border-color: var(--color-primary) !important;
   background: var(--color-primary-ultra-light) !important
}

.fibofilters-item--button:hover .fibofilters-item__interactive,
.fibofilters-item--button:hover span {
   color: var(--color-primary) !important
}

.fibofilters-item--color [aria-checked="true"] .fibofilters-item__color {
   border-color: var(--color-primary) !important
}

.fibofilters-item--color [aria-checked="true"] .fibofilters-item__color-inner::after {
   content: '✓';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #2e7d32;
   font-size: 16px;
   font-weight: 900
}

.fibofilters-item--color [aria-checked="true"] .fibofilters-item__color-inner {
   position: relative;
   display: flex
}

/* Color swatches — grid layout */
.fibofilters-block--color .fibofilters-block__items-list {
   flex-direction: row !important;
   flex-wrap: wrap !important;
   gap: 10px !important
}

/* Color swatch filters */
.fibofilters-block--color .fibofilters-block__items-list {
   flex-direction: row !important;
   flex-wrap: wrap !important;
   gap: 8px !important
}

.fibofilters-item--color {
   border: none !important;
   background: none !important
}

.fibofilters-item--color * {
   outline: none !important;
   box-shadow: none !important;
   text-shadow: none !important
}

.fibofilters-item--color *::after,
.fibofilters-item--color *::before {
   display: none !important
}

.fibofilters-item__interactive-wrapper {
   padding: 0 !important
}

.fibofilters-item--color .fibofilters-item__interactive {
   padding: 0 !important
}

.fibofilters-item__color {
   width: 32px !important;
   height: 32px !important;
   border-radius: 50% !important;
   border: 2px solid var(--color-border) !important;
   padding: 2px !important;
   transition: all .25s ease !important;
   cursor: pointer
}

.fibofilters-item__color-inner {
   width: 100% !important;
   height: 100% !important;
   border-radius: 50% !important
}

.fibofilters-item--color:hover .fibofilters-item__color {
   border-color: var(--color-text) !important
}

.fibofilters-item--color [aria-checked="true"] .fibofilters-item__color {
   border: 3px solid #2e7d32 !important
}

.fibofilters-icon-checkmark-stroke {
   display: none !important
}

.fibofilters-block:last-child {
   border-bottom: none !important
}

/* ═══════════════════════════════════════════
   VARIATION SWATCHES PRO 2.2.3 — CSS OVERRIDES
═══════════════════════════════════════════ */
/* Swatches container */
.wvs-style-squared,
.wvs-style-rounded,
.wvs-style,
.variations {
   font-family: var(--font-body) !important
}

/* Hide default WC dropdowns when swatches active */
.wvs-archive-variation-wrapper select,
.wvs-show-label select.woo-variation-raw-select {
   display: none !important
}

/* Label above swatches */
.wvs-style label,
.variations td.label label {
   font-size: 13px !important;
   font-weight: 600 !important;
   letter-spacing: .3px !important;
   color: var(--color-text) !important;
   margin-bottom: 12px !important;
   display: block !important;
   font-family: var(--font-body) !important
}

/* "Dobierz rozmiar" — link next to label */
.variations td.label {
   vertical-align: top;
   padding: 0 16px 0 0
}

.variations td.value {
   padding: 0 0 20px
}

table.variations {
   border: none !important;
   width: 100%;
   margin-top: 1rem;
}

table.variations tr {
   display: block;
   margin-bottom: 20px
}

table.variations td {
   display: block;
   padding: 0 !important;
   border: none !important
}

/* ── Button swatches (Rozmiar, Miseczka, Obwód) ── */
.wvs-style-squared .swatch-item-wrapper .swatch-item,
.wvs-style-rounded .swatch-item-wrapper .swatch-item,
.variable-items-wrapper .variable-item {
   min-width: 52px !important;
   height: auto !important;
   padding: 10px 14px !important;
   border: 1.5px solid var(--color-border) !important;
   border-radius: 10px !important;
   background: #fff !important;
   font-size: 13px !important;
   font-weight: 500 !important;
   color: var(--color-text) !important;
   text-align: center !important;
   transition: var(--transition) !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   line-height: 1.3 !important;
   margin: 0 8px 8px 0 !important;
   box-shadow: none !important;
}

.wvs-style-squared .swatch-item-wrapper .swatch-item:hover,
.wvs-style-rounded .swatch-item-wrapper .swatch-item:hover,
.variable-items-wrapper .variable-item:hover {
   border-color: var(--color-primary) !important;
   color: var(--color-primary) !important;
}

.wvs-style-squared .swatch-item-wrapper .swatch-item.selected,
.wvs-style-rounded .swatch-item-wrapper .swatch-item.selected,
.variable-items-wrapper .variable-item.selected {
   border-color: var(--color-primary) !important;
   background: var(--color-primary-ultra-light) !important;
   color: var(--color-primary) !important;
   font-weight: 600 !important;
}

/* Disabled / out of stock */
.wvs-style-squared .swatch-item-wrapper .swatch-item.disabled,
.wvs-style-rounded .swatch-item-wrapper .swatch-item.disabled,
.variable-items-wrapper .variable-item.disabled,
.variable-items-wrapper .variable-item.no-stock {
   opacity: .35 !important;
   cursor: not-allowed !important;
   text-decoration: line-through !important;
   pointer-events: auto !important;
}

/* ── Color swatches ── */
.wvs-style-squared .swatch-item-wrapper .swatch-item.swatch-color,
.wvs-style-rounded .swatch-item-wrapper .swatch-item.swatch-color,
.variable-items-wrapper .variable-item--color {
   width: 36px !important;
   height: 36px !important;
   min-width: 36px !important;
   border-radius: 50% !important;
   border: 2px solid transparent !important;
   padding: 3px !important;
   margin: 0 10px 10px 0 !important;
}

.wvs-style-squared .swatch-item-wrapper .swatch-item.swatch-color .swatch-inner,
.variable-items-wrapper .variable-item--color .variable-item-span-color {
   border-radius: 50% !important;
   width: 100% !important;
   height: 100% !important;
}

.wvs-style-squared .swatch-item-wrapper .swatch-item.swatch-color.selected,
.wvs-style-rounded .swatch-item-wrapper .swatch-item.swatch-color.selected,
.variable-items-wrapper .variable-item--color.selected {
   border-color: var(--color-primary) !important;
   box-shadow: none !important;
}

.wvs-style-squared .swatch-item-wrapper .swatch-item.swatch-color:hover,
.variable-items-wrapper .variable-item--color:hover {
   border-color: var(--color-primary-light) !important;
}

/* Tooltip */
.woo-variation-swatches-tooltip {
   background: var(--color-text) !important;
   color: #fff !important;
   font-family: var(--font-body) !important;
   font-size: 12px !important;
   padding: 6px 14px !important;
   border-radius: 8px !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .15) !important;
}

/* Clear selection link */
.reset_variations,
.wvs-clear-link {
   font-size: 12px !important;
   color: var(--color-primary) !important;
   font-weight: 500 !important;
   margin-top: 4px !important;
   font-family: var(--font-body) !important;
}

.reset_variations:hover,
.wvs-clear-link:hover {
   text-decoration: underline !important
}

/* Single product add-to-cart form with swatches */
.single-product form.variations_form {
   margin-bottom: 24px
}

.single-product form.variations_form .single_variation_wrap {
   padding-top: 16px;
   border-top: 1px solid var(--color-border);
   margin-top: 8px
}

.single-product .woocommerce-variation-price {
   margin-bottom: 16px
}

.single-product .woocommerce-variation-price .price {
   font-size: 32px !important;
   font-weight: 700 !important;
   color: var(--color-primary) !important
}

.single-product .woocommerce-variation-price del .amount {
   font-size: 20px !important;
   color: var(--color-text-muted) !important;
   font-weight: 400 !important
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1024px) {

   .products-grid,
   ul.products {
      grid-template-columns: repeat(2, 1fr) !important
   }

   .category-layout {
      grid-template-columns: 240px 1fr;
      gap: 28px
   }

   .product-main {
      gap: 40px
   }

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

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

   .hero .container {
      grid-template-columns: 1fr;
      gap: 60px;
      text-align: center
   }

   .hero-content {
      max-width: 100%
   }

   .hero-desc {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto
   }

   .hero-actions {
      justify-content: center
   }

   .hero-visual {
      max-width: 500px;
      margin: 0 auto
   }

   .usp-bar .container {
      grid-template-columns: repeat(2, 1fr);
      border-radius: var(--radius-lg)
   }

   .usp-item:nth-child(2)::after {
      display: none
   }

   .about-grid {
      gap: 40px
   }

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

   .category-cards {
      grid-template-columns: repeat(2, 1fr)
   }

   .brands-grid {
      gap: 16px
   }

   .brand-item {
      width: 120px
   }
}

@media(max-width:768px) {
   .header-nav {
      display: none
   }

   .menu-toggle {
      display: flex
   }

   .category-layout {
      grid-template-columns: 1fr
   }

   .sidebar {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      max-width: 340px;
      height: 100dvh;
      background: #fff;
      z-index: 1100;
      padding: 24px;
      overflow-y: auto;
      transition: left .4s cubic-bezier(.4, 0, .2, 1);
      box-shadow: 8px 0 40px rgba(0, 0, 0, .1);
      display: block
   }

   .sidebar.open {
      left: 0
   }

   .sidebar-mobile-header {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--color-border)
   }

   .sidebar-mobile-header h3 {
      font-size: 18px;
      font-weight: 600
   }

   .sidebar-close {
      width: 40px;
      height: 40px;
      background: none;
      border: none;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition)
   }

   .sidebar-close:hover {
      background: var(--color-off-white)
   }

   .sidebar-close svg {
      width: 20px;
      height: 20px;
      stroke: var(--color-text);
      stroke-width: 1.5;
      fill: none
   }

   .sidebar-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      z-index: 1099;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease
   }

   .sidebar-backdrop.open {
      opacity: 1;
      visibility: visible
   }

   .mobile-filter-btn {
      display: flex
   }

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

   .products-grid,
   ul.products {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px
   }

   .product-main {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .gallery {
      position: static
   }

   .gallery-thumbs {
      gap: 8px
   }

   .product-usps {
      grid-template-columns: 1fr
   }

   .add-to-cart-row,
   .cart {
      flex-direction: column
   }

   .btn-add-to-cart,
   .single_add_to_cart_button {
      padding: 16px !important
   }

   .reviews-summary {
      flex-direction: column;
      text-align: center
   }

   .related-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px
   }

   .related-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .footer-bottom {
      flex-direction: column;
      gap: 16px;
      text-align: center
   }

   /* Cart + Checkout mobile */
   .checkout-layout,
   .woocommerce-checkout .col2-set {
      grid-template-columns: 1fr !important
   }

   #customer_login {
      grid-template-columns: 1fr !important;
      gap: 32px
   }

   .cart_totals {
      max-width: 100% !important
   }

   .actions {
      flex-direction: column
   }

   .actions .coupon {
      width: 100%
   }

   /* Homepage mobile */
   .hero {
      min-height: auto;
      padding: 100px 0 80px
   }

   .hero .container {
      grid-template-columns: 1fr;
      gap: 40px
   }

   .hero-visual {
      max-width: 400px;
      margin: 0 auto
   }

   .usp-bar {
      margin-top: -30px
   }

   .usp-bar .container {
      grid-template-columns: 1fr
   }

   .usp-item::after {
      display: none !important
   }

   .about-grid {
      grid-template-columns: 1fr
   }

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

   .section-header-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px
   }

   .category-cards {
      grid-template-columns: 1fr
   }

   .cat-card {
      aspect-ratio: 16/9
   }

   .brands-grid {
      gap: 12px
   }

   .brand-item {
      width: 100px;
      padding: 12px
   }

   .hot-sales-inner {
      padding: 60px 24px
   }

   .brafitting-inner {
      padding: 48px 28px
   }

   /* Variation Swatches mobile */
   .variable-items-wrapper .variable-item,
   .wvs-style-squared .swatch-item-wrapper .swatch-item {
      min-width: 44px !important;
      padding: 8px 10px !important;
      font-size: 12px !important;
      margin: 0 6px 6px 0 !important;
   }
}

@media(max-width:480px) {

   .products-grid,
   ul.products {
      grid-template-columns: 1fr !important
   }

   .gallery-thumbs {
      grid-template-columns: repeat(4, 1fr)
   }

   .size-btn {
      min-width: 44px;
      padding: 8px 10px;
      font-size: 12px
   }

   .related-grid {
      grid-template-columns: 1fr
   }

   .hero-actions {
      flex-direction: column
   }

   .hero-actions .btn {
      width: 100%;
      justify-content: center
   }

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

/* ═══════════════════════════════════════════
   BRAFITTING / LANDING PAGES
═══════════════════════════════════════════ */
.lp-hero {
   padding: 100px 0 60px;
   background: linear-gradient(135deg, #fff 0%, var(--color-primary-ultra-light) 50%, var(--color-bg-warm) 100%)
}

.lp-grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center
}

.lp-grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px
}

.lp-section {
   padding: 100px 0
}

.lp-section-alt {
   padding: 100px 0;
   background: var(--color-off-white)
}

.lp-img-placeholder {
   background: var(--color-primary-ultra-light);
   border-radius: var(--radius-xl);
   aspect-ratio: 4/5;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden
}

.lp-img-placeholder.square {
   aspect-ratio: 1
}

.lp-floating-badge {
   position: absolute;
   bottom: -20px;
   right: -20px;
   background: #fff;
   border-radius: 20px;
   padding: 20px 28px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, .08)
}

.lp-step {
   text-align: center;
   padding: 40px 24px;
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   transition: var(--transition)
}

.lp-step:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover);
   border-color: transparent
}

.lp-step-num {
   width: 64px;
   height: 64px;
   background: linear-gradient(135deg, var(--color-primary), #e8157a);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 24px;
   color: #fff;
   font-family: var(--font-display);
   font-size: 28px;
   font-weight: 300
}

.lp-step h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 500;
   margin-bottom: 12px
}

.lp-step p {
   font-size: 14px;
   line-height: 1.7;
   color: var(--color-text-light)
}

.lp-benefit {
   display: flex;
   gap: 20px;
   align-items: flex-start
}

.lp-benefit-icon {
   width: 48px;
   height: 48px;
   flex-shrink: 0;
   border-radius: 14px;
   background: var(--color-primary-ultra-light);
   display: flex;
   align-items: center;
   justify-content: center
}

.lp-benefit-icon svg {
   width: 22px;
   height: 22px;
   stroke: var(--color-primary);
   stroke-width: 1.5;
   fill: none
}

.lp-benefit strong {
   font-size: 15px;
   display: block;
   margin-bottom: 4px
}

.lp-benefit span {
   font-size: 14px;
   color: var(--color-text-light);
   line-height: 1.6
}

.lp-faq {
   background: #fff;
   border-radius: var(--radius-lg);
   padding: 8px 32px;
   border: 1px solid var(--color-border)
}

.lp-cta-box {
   background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
   border-radius: var(--radius-xl);
   padding: 80px;
   text-align: center;
   position: relative;
   overflow: hidden
}

.lp-cta-box::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .05);
   pointer-events: none
}

.lp-cta-box>* {
   position: relative;
   z-index: 2
}

.lp-cta-box .section-label {
   color: rgba(255, 255, 255, .7)
}

.lp-cta-box .section-title,
.lp-cta-box .section-title em {
   color: #fff
}

.lp-cta-box p {
   font-size: 16px;
   color: rgba(255, 255, 255, .8);
   max-width: 480px;
   margin: 0 auto 40px;
   line-height: 1.7
}

.lp-cta-actions {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap
}

.btn-ghost {
   background: transparent;
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .4);
   border-radius: 50px
}

.btn-ghost:hover {
   background: rgba(255, 255, 255, .15);
   border-color: rgba(255, 255, 255, .6);
   transform: translateY(-2px)
}

/* ── LP Responsive ── */
@media(max-width:768px) {
   .lp-hero {
      padding: 80px 0 40px
   }

   .lp-grid-2 {
      grid-template-columns: 1fr !important;
      gap: 40px !important
   }

   .lp-grid-4 {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px !important
   }

   .lp-section,
   .lp-section-alt {
      padding: 60px 0
   }

   .lp-cta-box {
      padding: 48px 28px
   }

   .lp-floating-badge {
      position: relative;
      bottom: auto;
      right: auto;
      margin-top: 16px
   }

   .lp-faq {
      padding: 8px 20px
   }
}

@media(max-width:480px) {
   .lp-grid-4 {
      grid-template-columns: 1fr !important
   }

   .lp-cta-actions {
      flex-direction: column
   }

   .lp-cta-actions .btn {
      width: 100%;
      justify-content: center
   }
}

/* ═══════════════════════════════════════════
   O NAS / ABOUT PAGE
═══════════════════════════════════════════ */
.lp-timeline {
   position: relative;
   max-width: 720px;
   margin: 0 auto
}

.lp-timeline::before {
   content: '';
   position: absolute;
   left: 24px;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--color-border)
}

.lp-timeline-item {
   display: flex;
   gap: 32px;
   padding-bottom: 48px;
   position: relative
}

.lp-timeline-item:last-child {
   padding-bottom: 0
}

.lp-timeline-dot {
   width: 50px;
   height: 50px;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--color-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-family: var(--font-display);
   font-size: 14px;
   font-weight: 600;
   position: relative;
   z-index: 2;
   box-shadow: 0 0 0 6px #fff
}

.lp-timeline-body h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 500;
   margin-bottom: 8px;
   color: var(--color-text)
}

.lp-timeline-body p {
   font-size: 15px;
   line-height: 1.7;
   color: var(--color-text-light)
}

.lp-value {
   padding: 40px 32px;
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   transition: var(--transition);
   text-align: center
}

.lp-value:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover);
   border-color: transparent
}

.lp-value-icon {
   width: 64px;
   height: 64px;
   border-radius: 20px;
   background: var(--color-primary-ultra-light);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px
}

.lp-value-icon svg {
   width: 28px;
   height: 28px;
   stroke: var(--color-primary);
   stroke-width: 1.5;
   fill: none
}

.lp-value h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 500;
   margin-bottom: 10px;
   color: var(--color-text)
}

.lp-value p {
   font-size: 14px;
   line-height: 1.7;
   color: var(--color-text-light)
}

.lp-team-card {
   background: #fff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--color-border);
   transition: var(--transition)
}

.lp-team-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover);
   border-color: transparent
}

.lp-team-photo {
   aspect-ratio: 3/4;
   background: var(--color-primary-ultra-light);
   display: flex;
   align-items: center;
   justify-content: center
}

.lp-team-photo svg {
   width: 60px;
   height: 60px;
   stroke: var(--color-primary);
   stroke-width: 1;
   fill: none;
   opacity: .3
}

.lp-team-info {
   padding: 24px;
   text-align: center
}

.lp-team-info h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 500;
   margin-bottom: 4px
}

.lp-team-info .role {
   font-size: 13px;
   color: var(--color-primary);
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   display: block;
   margin-bottom: 12px
}

.lp-team-info p {
   font-size: 14px;
   line-height: 1.6;
   color: var(--color-text-light)
}

.lp-quote {
   position: relative;
   max-width: 700px;
   margin: 0 auto;
   text-align: center
}

.lp-quote blockquote {
   font-family: var(--font-display);
   font-size: clamp(22px, 3vw, 32px);
   font-weight: 400;
   font-style: italic;
   line-height: 1.5;
   color: var(--color-text);
   margin: 0 0 24px
}

.lp-quote cite {
   font-style: normal;
   font-size: 15px;
   color: var(--color-text-light);
   font-family: var(--font-body)
}

.lp-quote::before {
   content: '\201C';
   font-family: var(--font-display);
   font-size: 120px;
   color: var(--color-primary);
   opacity: .15;
   position: absolute;
   top: -40px;
   left: 50%;
   transform: translateX(-50%);
   line-height: 1
}

@media(max-width:768px) {
   .lp-timeline::before {
      left: 24px
   }

   .lp-timeline-item {
      gap: 20px
   }

   .lp-timeline-dot {
      width: 42px;
      height: 42px;
      font-size: 12px
   }

   .lp-value {
      padding: 28px 20px
   }

   .lp-team-info {
      padding: 20px
   }

   .lp-team-grid {
      grid-template-columns: 1fr !important
   }

   .lp-team-card {
      max-width: 360px;
      margin: 0 auto
   }

   .lp-quote blockquote {
      font-size: 22px
   }
}

@media(max-width:480px) {
   .lp-team-grid {
      grid-template-columns: 1fr !important
   }
}

/* ═══════ Products Swiper Slider ═══════ */
.products-slider-wrap {
   position: relative;
}

.products-swiper {
   overflow: hidden;
   padding: 16px 0; /* Daje miejsce na to, by cienie kart produktów nie były chamsko ucinane */
}

.products-swiper .swiper-slide {
   width: auto;
   height: auto;
}

.products-swiper .swiper-slide .product-card {
   margin: 0;
}

/* Kontener kółeczek (paginacji) na dole na środku */
.products-slider-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 24px;
}

/* Wyciągnięcie strzałek na boki */
.products-slider-btn {
   position: absolute;
   top: 40%; /* Pozycja w pionie. Jeśli chcesz by były idealnie na środku zdjęć, zmniejsz np. na 35% */
   transform: translateY(-50%);
   z-index: 10;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 1px solid var(--color-border);
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all .25s;
   color: var(--color-text);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Miękki cień odrywa je od produktów */
}

.products-slider-btn:hover {
   border-color: var(--color-primary);
   color: #fff;
   background: var(--color-primary);
   box-shadow: 0 8px 24px rgba(209, 4, 102, 0.2);
}

/* Zamiast je wygaszać, gdy jesteśmy na skrajnym slajdzie, lepiej je ukryć, co wygląda estetyczniej */
.products-slider-btn:disabled,
.products-slider-btn.swiper-button-disabled {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

/* Strzałka w lewo wystaje nieco za ramy slidera */
.products-slider-prev {
   left: -24px;
}

/* Strzałka w prawo wystaje nieco za ramy slidera */
.products-slider-next {
   right: -24px;
}

.products-slider-pagination {
   display: flex;
   gap: 8px;
   align-items: center;
}

.products-slider-pagination .swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--color-border);
   opacity: 1;
   transition: all .3s;
   cursor: pointer;
}

.products-slider-pagination .swiper-pagination-bullet-active {
   background: var(--color-primary);
   width: 24px;
   border-radius: 4px;
}

.products-slider-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 24px;
   width: 100%; /* Upewniamy się, że kontener zajmuje całą szerokość */
}

.products-slider-pagination {
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: center; /* To wymusza wyśrodkowanie samych kropek */
   width: 100%;
}

/* Korekta na ekrany mobilne */
@media(max-width:768px) {
   .products-slider-btn {
      width: 40px;
      height: 40px;
   }
   /* Przyklejamy lekko do krawędzi, żeby nie wystawały poza ekran telefonu */
   .products-slider-prev {
      left: -15px;
   }
   .products-slider-next {
      right: -15px;
   }
   .products-slider-nav {
      margin-top: 16px;
   }
}

/* ═══════ Brands Swiper Slider ═══════ */
.brands-slider-wrap {
   position: relative;
   max-width: 900px;
   margin: 0 auto;
   padding: 32px 0
}

.brands-swiper {
   overflow: hidden
}

.brands-swiper .swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center
}

.brands-swiper .brand-item {
   width: 100%;
   margin: 0
}

/* ═══════════════════════════════════════════
   Mini Cart Drawer – Redesign
   ═══════════════════════════════════════════ */

.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}

.cart-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 92vw;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .12);
}

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

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border, #eee);
    flex-shrink: 0;
}

.cart-drawer-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-body, sans-serif);
}

.cart-drawer-close {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-off-white, #f5f5f5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    color: var(--color-text, #333);
    flex-shrink: 0;
}

.cart-drawer-close:hover {
    background: var(--color-border, #ddd);
}

.cart-drawer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0;
}

.cart-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 24px;
    text-align: center;
}

.cart-drawer-empty p {
    color: var(--color-text-muted, #888);
    font-size: 14px;
    margin: 0;
}

.cart-drawer .woocommerce-mini-cart {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cart-drawer .woocommerce-mini-cart-item {
    position: relative;
    padding: 16px 20px 16px 98px !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    border-bottom: 1px solid var(--color-border, #f0f0f0);
    min-height: 96px;
}

.cart-drawer .woocommerce-mini-cart-item img {
    position: absolute;
    top: 16px;
    left: 20px;
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--color-border, #eee);
    margin: 0 !important;
}

.cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
    display: block !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text, #222) !important;
    text-decoration: none !important;
    padding-right: 32px;
    margin: 0 !important;
}

.cart-drawer .woocommerce-mini-cart-item > .remove {
    position: absolute !important;
    top: 12px;
    right: 20px;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-off-white, #f5f5f5);
    color: var(--color-text-muted, #999) !important;
    font-size: 15px !important;
    line-height: 1;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
    cursor: pointer;
    z-index: 2;
}

.cart-drawer .woocommerce-mini-cart-item > .remove:hover {
    background: var(--color-primary, #d63384);
    color: #fff !important;
}

.cart-drawer .woocommerce-mini-cart-item .variation {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.cart-drawer .variation dt,
.cart-drawer .variation dd {
    font-size: 12px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
}

.cart-drawer .variation dt {
    font-weight: 400 !important;
    color: var(--color-text-muted, #999) !important;
    margin: 0 4px 0 0 !important;
}

.cart-drawer .variation dd {
    color: var(--color-text-muted, #999) !important;
    margin: 0 12px 0 0 !important;
    font-weight: 600 !important;
}

.cart-drawer .variation dd p {
    margin: 0 !important;
    display: inline !important;
    font-weight: 700 !important;
}

.cart-drawer .woocommerce-mini-cart-item .quantity {
    margin: 2px 0 0 0 !important;
    font-size: 12px;
    color: var(--color-text-muted, #888);
    display: block;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    line-height: 1.4;
}

.cart-drawer .woocommerce-mini-cart-item .quantity .amount {
    color: var(--color-primary, #d63384);
    font-weight: 700;
    font-size: 14px;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.cart-drawer .woocommerce-mini-cart__total {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px !important;
    border-top: 2px solid var(--color-text, #222);
    margin: 0 !important;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.cart-drawer .woocommerce-mini-cart__total .amount {
    color: var(--color-primary, #d63384);
    font-size: 18px;
    font-weight: 700;
}

.cart-drawer .woocommerce-mini-cart__buttons {
    padding: 16px 24px 24px !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.cart-drawer .woocommerce-mini-cart__buttons .button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 28px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--font-body, sans-serif) !important;
    letter-spacing: .3px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    text-decoration: none;
    cursor: pointer;
}

.cart-drawer .woocommerce-mini-cart__buttons .button:first-child {
    background: #fff !important;
    color: var(--color-primary, #d63384) !important;
    border: 2px solid var(--color-primary-light, #f0c0d8) !important;
}

.cart-drawer .woocommerce-mini-cart__buttons .button:first-child:hover {
    border-color: var(--color-primary, #d63384) !important;
    background: var(--color-primary-ultra-light, #fdf2f7) !important;
}

.cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
    background: var(--color-primary, #d63384) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
}

.cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover {
    background: var(--color-primary-dark, #b52a6e) !important;
}

.cart-drawer .woocommerce-mini-cart__buttons .button.checkout::after {
    content: '→';
    margin-left: 6px;
    font-size: 16px;
}

/* ═══════════════════════════════════════════
   Toast Notification (Dymek koszyka)
   ═══════════════════════════════════════════ */

.cart-toast {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(20px) !important;
    background: rgba(30, 30, 30, 0.95) !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    font-family: var(--font-body, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 90% !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    z-index: 100000 !important;
    transition: opacity .3s ease, transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility .3s ease !important;
}

.cart-toast.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 768px) {
    .cart-drawer {
        width: 380px;
    }

    .cart-drawer .woocommerce-mini-cart-item {
        padding: 14px 16px 14px 84px !important;
        min-height: 84px;
    }

    .cart-drawer .woocommerce-mini-cart-item img {
        width: 56px !important;
        height: 56px !important;
        top: 14px;
        left: 16px;
    }

    .cart-drawer-header {
        padding: 16px 16px;
    }

    .cart-drawer .woocommerce-mini-cart__total {
        padding: 16px !important;
    }

    .cart-drawer .woocommerce-mini-cart__buttons {
        padding: 12px 16px 20px !important;
    }
}

/* ═══════════════════════════════════════════
   Mobile (do 767px)
   ═══════════════════════════════════════════ */
@media (max-width: 767px) {
    .cart-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Zabezpieczenie listy przed ujemnymi marginesami z motywu */
    .cart-drawer .woocommerce-mini-cart {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Twardy padding i box-sizing */
    .cart-drawer .woocommerce-mini-cart-item {
        /* 16px (odstęp lewy) + 56px (obrazek) + 12px (odstęp od obrazka) = 84px */
        padding: 14px 16px 14px 84px !important;
        min-height: 84px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Blokada przed "rozlewaniem się" tekstu pod obrazek */
    .cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
        font-size: 13px !important;
        margin: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        display: block !important;
    }

    .cart-drawer .woocommerce-mini-cart-item img {
        width: 56px !important;
        height: 56px !important;
        top: 14px !important;
        left: 16px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .cart-drawer .woocommerce-mini-cart-item .quantity .amount {
        font-size: 13px !important;
    }

    .cart-drawer .woocommerce-mini-cart__total .amount {
        font-size: 16px !important;
    }

    .cart-drawer .woocommerce-mini-cart__buttons .button {
        padding: 13px 24px !important;
        font-size: 13px !important;
    }

    .cart-drawer-header {
        padding: 16px !important;
    }
}

/* ═══════ Product Short Description fix ═══════ */
.product-short-desc h5,
.product-short-desc h6 {
   font-size: 18px !important;
   font-weight: 300 !important;
   line-height: 1.75 !important;
   color: var(--color-text) !important;
   margin: 0 0 12px !important;
   font-family: var(--font-body) !important
}

.product-short-desc h5:last-child,
.product-short-desc h6:last-child {
   margin-bottom: 0 !important
}

.product-short-desc strong {
   font-weight: 600;
}

/* ═══════ Color swatches on product page fix ═══════ */
.color-variable-item {
   width: 36px !important;
   height: 36px !important;
   min-width: 36px !important;
   border-radius: 50% !important;
   border: 2px solid var(--color-border) !important;
   padding: 3px !important;
   margin: 0 10px 10px 0 !important;
   background: transparent !important
}

.color-variable-item .variable-item-span-color {
   border-radius: 50% !important;
   width: 100% !important;
   height: 100% !important;
   display: block !important
}

.color-variable-item.selected {
   border-color: var(--color-primary) !important
}

.color-variable-item:hover {
   border-color: var(--color-primary-light) !important
}

.color-variable-items-wrapper {
   display: flex !important;
   flex-wrap: wrap !important;
   gap: 4px !important
}

/* ═══════ Dodaj do koszyka button pill style ═══════ */
.single_add_to_cart_button {
   background: var(--color-primary) !important;
   color: #fff !important;
   border: none !important;
   border-radius: 50px !important;
   padding: 16px 40px !important;
   font-size: 15px !important;
   font-weight: 600 !important;
   font-family: var(--font-body) !important;
   cursor: pointer;
   transition: var(--transition) !important;
   letter-spacing: .3px
}

.single_add_to_cart_button:hover {
   background: var(--color-primary-dark) !important
}

.single_add_to_cart_button.disabled {
   opacity: .5;
   cursor: not-allowed
}

/* Color swatch fix — force size and display */
.color-variable-item .variable-item-contents {
   width: 100% !important;
   height: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important
}

.color-variable-item .variable-item-span-color {
   width: 26px !important;
   height: 26px !important;
   min-width: 26px !important;
   min-height: 26px !important;
   border-radius: 50% !important;
   display: block !important
}

.color-variable-item {
   width: 36px !important;
   height: 36px !important;
   min-width: 36px !important;
   min-height: 36px !important;
   padding: 3px !important;
   box-sizing: border-box !important
}

/* Add to cart row — qty + button inline */
.woocommerce-variation-add-to-cart {
   display: flex !important;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap
}

.woocommerce-variation-add-to-cart .quantity {
   flex-shrink: 0
}

.single_add_to_cart_button {
   flex: 1;
   min-width: 200px;
   text-align: center !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important
}

/* ═══════ Product page — variation price bigger ═══════ */
.single-product .woocommerce-variation-price .price {
   font-size: 36px !important
}

.single-product .woocommerce-variation-availability p.stock {
   font-size: 12px;
   color: var(--color-text-muted);
   font-weight: 500;
   margin: 0 0 12px
}

/* ═══════ Color swatches — clean circles like category page ═══════ */
.color-variable-item {
   width: 36px !important;
   height: 36px !important;
   min-width: 36px !important;
   min-height: 36px !important;
   padding: 3px !important;
   border: 2px solid var(--color-border) !important;
   border-radius: 50% !important;
   background: transparent !important;
   box-shadow: none !important;
   outline: none !important;
   overflow: hidden !important
}

.color-variable-item .variable-item-contents {
   width: 100% !important;
   height: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   position: relative !important
}

.color-variable-item .variable-item-span-color {
   width: 100% !important;
   height: 100% !important;
   min-width: 100% !important;
   min-height: 100% !important;
   border-radius: 50% !important;
   display: block !important
}

.color-variable-item .button-tooltip,
.color-variable-item svg,
.color-variable-item .wvs-tooltip {
   display: none !important
}

.color-variable-item:hover {
   border-color: var(--color-text) !important
}

.color-variable-item.selected {
   border: 3px solid #2e7d32 !important
}

.color-variable-item.selected svg,
.color-variable-item.selected .button-tooltip {
   display: none !important
}

/* Add to cart row fix */
.woocommerce-variation-add-to-cart {
   display: flex !important;
   align-items: center;
   gap: 12px;
   flex-wrap: nowrap
}

.woocommerce-variation-add-to-cart .quantity {
   flex-shrink: 0
}

.single_add_to_cart_button {
   flex: unset !important;
   min-width: unset !important;
   width: auto !important;
   padding: 16px 40px !important
}

/* Color swatches — product page like category page */
.color-variable-items-wrapper {
   display: flex !important;
   flex-wrap: wrap !important;
   gap: 6px !important;
   list-style: none !important;
   padding: 0 !important
}

.color-variable-item {
   width: 36px !important;
   height: 36px !important;
   min-width: 36px !important;
   min-height: 36px !important;
   padding: 2px !important;
   border: 2px solid var(--color-border) !important;
   border-radius: 50% !important;
   background: transparent !important;
   box-shadow: none !important;
   outline: none !important;
   list-style: none !important
}

.color-variable-item .variable-item-contents {
   width: 100% !important;
   height: 100% !important;
   border-radius: 50% !important;
   overflow: hidden !important
}

.color-variable-item .variable-item-span-color {
   width: 100% !important;
   height: 100% !important;
   border-radius: 50% !important;
   display: block !important
}

.color-variable-item:hover {
   border-color: var(--color-text) !important
}

.color-variable-item.selected {
   border: 3px solid #2e7d32 !important
}

.color-variable-item .button-tooltip,
.color-variable-item svg,
.color-variable-item .wvs-tooltip,
.color-variable-item .woo-variation-swatches-tooltip {
   display: none !important
}

.color-variable-item .variable-item-contents::before,
.color-variable-item .variable-item-contents::after {
   display: none !important
}

/* Disabled/crossed out color — hide X, just dim */
.color-variable-item.disabled,
.color-variable-item.no-stock {
   opacity: .3 !important;
   text-decoration: none !important
}

.color-variable-item.disabled::before,
.color-variable-item.disabled::after,
.color-variable-item.no-stock::before,
.color-variable-item.no-stock::after {
   display: none !important
}

/* Color swatch — force circle, remove all WVS borders */
.color-variable-item,
.color-variable-item.button-variable-item {
   width: 36px !important;
   height: 36px !important;
   min-width: 36px !important;
   min-height: 36px !important;
   max-width: 36px !important;
   padding: 2px !important;
   margin: 0 8px 8px 0 !important;
   border: 2px solid var(--color-border) !important;
   border-radius: 50% !important;
   background: transparent !important;
   box-shadow: none !important;
   outline: none !important;
   overflow: hidden !important
}

.color-variable-item.selected,
.color-variable-item.button-variable-item.selected {
   border: 3px solid #2e7d32 !important;
   border-radius: 50% !important
}

.color-variable-item:hover {
   border-color: var(--color-text) !important
}

.color-variable-item .variable-item-contents {
   width: 100% !important;
   height: 100% !important;
   border-radius: 50% !important;
   overflow: hidden !important;
   padding: 0 !important
}

.color-variable-item .variable-item-span-color {
   width: 100% !important;
   height: 100% !important;
   min-width: 100% !important;
   min-height: 100% !important;
   border-radius: 50% !important;
   display: block !important
}

.color-variable-item *::before,
.color-variable-item *::after,
.color-variable-item svg,
.color-variable-item .button-tooltip,
.color-variable-item .wvs-tooltip {
   display: none !important
}

/* Qty input visible */
.qty-input,
.input-text.qty {
   width: 50px !important;
   text-align: center !important;
   font-size: 16px !important;
   font-weight: 600 !important;
   color: var(--color-text) !important;
   background: #fff !important;
   border: none !important;
   -moz-appearance: textfield !important;
   appearance: textfield !important
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
   -webkit-appearance: none !important;
   margin: 0 !important
}

/* Color swatches on product page — override general .variable-item */
.variable-items-wrapper .variable-item.color-variable-item,
.variable-items-wrapper li.color-variable-item {
   width: 36px !important;
   height: 36px !important;
   min-width: 36px !important;
   max-width: 36px !important;
   min-height: 36px !important;
   padding: 2px !important;
   margin: 0 8px 8px 0 !important;
   border: 2px solid var(--color-border) !important;
   border-radius: 50% !important;
   background: transparent !important;
   box-shadow: none !important;
   outline: none !important;
   overflow: hidden !important
}

.variable-items-wrapper .variable-item.color-variable-item.selected,
.variable-items-wrapper li.color-variable-item.selected {
   border: 3px solid #2e7d32 !important;
   border-radius: 50% !important
}

.variable-items-wrapper .variable-item.color-variable-item:hover {
   border-color: var(--color-text) !important
}

.variable-items-wrapper .color-variable-item .variable-item-contents {
   width: 100% !important;
   height: 100% !important;
   border-radius: 50% !important;
   overflow: hidden !important;
   padding: 0 !important
}

.variable-items-wrapper .color-variable-item .variable-item-span {
   width: 100% !important;
   height: 100% !important;
   min-width: 100% !important;
   min-height: 100% !important;
   border-radius: 50% !important;
   display: block !important
}

.variable-items-wrapper .color-variable-item *::before,
.variable-items-wrapper .color-variable-item *::after,
.variable-items-wrapper .color-variable-item svg,
.variable-items-wrapper .color-variable-item .button-tooltip,
.variable-items-wrapper .color-variable-item .wvs-tooltip {
   display: none !important
}

.variable-items-wrapper .color-variable-item.disabled {
   opacity: .3 !important;
   text-decoration: none !important
}

/* Qty — when hidden (max=1), hide entire qty wrapper */
.qty-styled:has(input[type="hidden"]) {
   display: none !important
}

/* ═══════ Product Brand Logo / Placeholder ═══════ */
.product-brand-block {
   display: inline-block;
   margin-bottom: 16px;
   text-decoration: none
}

.product-brand-logo {
   height: 120px;
   width: auto;
   max-width: 160px;
   object-fit: contain;
   display: block
}

.product-brand-placeholder {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 24px;
   border: 1.5px solid #999;
   border-radius: 6px;
   background: #f5f5f5;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #555;
   text-transform: uppercase;
   font-family: var(--font-body)
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
   background: var(--color-primary) !important;
   color: #fff !important;
   border: none !important;
   border-radius: 50px !important;
   transition: var(--transition);
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
   background: var(--color-primary-dark) !important
}

.wc-block-cart__submit-button::after,
.wc-block-components-checkout-place-order-button::after  {
   content: '→';
   margin-left: 4px
}

/* ═══════════════════════════════════════════
   Ostylowanie selectów wariantów (Bezpośredni selektor)
   ═══════════════════════════════════════════ */

table.variations td.value select {
    width: 100%;
    max-width: 320px;
    
    /* Wymuszenie usunięcia systemowego wyglądu */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    background-color: #fff;
    border: 1px solid #d1d5db; /* Kolor ramki podobny do FiboFilters */
    border-radius: 8px; 
    padding: 12px 40px 12px 16px; 
    font-family: var(--font-body, inherit);
    font-size: 15px;
    color: var(--color-text, #333);
    cursor: pointer;
    
    /* Dodanie ikony strzałki w dół z wymuszeniem */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Efekt po kliknięciu (focus) */
table.variations td.value select:focus {
    outline: none;
    border-color: var(--color-primary, #d63384);
    box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.1);
}

/* Ostylowanie etykiety */
table.variations th.label label {
    font-weight: 600;
    color: var(--color-text, #222);
    font-size: 14px;
}

/* Ostylowanie linku "Wyczyść" */
table.variations td.value .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-text-muted, #888);
    text-decoration: none;
    transition: color 0.2s ease;
}

table.variations td.value .reset_variations:hover {
    color: var(--color-primary, #d63384);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════
   Wyróżnienie dostępnych i zablokowanych opcji (Warianty)
   ═══════════════════════════════════════════ */

/* Opcje niedostępne (wyprzedane / disabled) */
table.variations td.value select option[disabled],
table.variations td.value select option.out-of-stock {
    color: #a1a1aa !important; /* Jasnoszary tekst */
    background-color: #f3f4f6 !important; /* Jasnoszare tło dla odróżnienia */
    font-style: italic !important; /* Pochylenie tekstu */
}

/* Opcje dostępne (żeby mocniej kontrastowały z niedostępnymi) */
table.variations td.value select option:not([disabled]) {
    color: #111827 !important; /* Mocny, ciemny kolor */
    background-color: #ffffff !important;
    font-style: normal !important;
}

/* ═══════════════════════════════════════════
   Strona "Zamówienie otrzymane" (Thank You Page)
   ═══════════════════════════════════════════ */

/* Ograniczenie szerokości i wycentrowanie treści */
.woocommerce-order {
    margin: 0 auto;
    font-family: var(--font-body, sans-serif);
    color: var(--color-text, #333);
}

/* Komunikat o sukcesie */
.woocommerce-notice--success.woocommerce-thankyou-order-received {
    background-color: #fdf2f7; /* Delikatny różowy pasujący do kolorystyki Fantazji */
    border-left: 4px solid var(--color-primary, #d63384);
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 32px;
}

/* Górna lista ze skróconym podsumowaniem (Numer, Data, Razem) */
ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none !important;
    padding: 24px !important;
    margin: 0 0 40px 0 !important;
    background: #fff;
    border: 1px solid var(--color-border, #eee);
    border-radius: 12px;
}

ul.woocommerce-order-overview li {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: var(--color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 !important;
}

ul.woocommerce-order-overview li strong {
    font-size: 16px;
    color: var(--color-text, #222);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 6px;
    font-weight: 600;
}

/* Tabela szczegółów zamówienia */
.woocommerce-order-details {
    margin-bottom: 48px;
}

h2.woocommerce-order-details__title,
h2.woocommerce-column__title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-text, #222);
    padding-bottom: 12px;
    font-family: 'Cormorant Garamond', serif; /* Elegancki font dla nagłówków */
}

table.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border, #eee);
    vertical-align: middle;
}

/* Nagłówki tabeli */
table.woocommerce-table--order-details thead th {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-text, #222) !important;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--color-border, #eee) !important;
}

/* Wiersze z produktami */
table.woocommerce-table--order-details tbody td.product-name a {
    color: var(--color-text, #222);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    transition: color 0.2s;
}

table.woocommerce-table--order-details tbody td.product-name a:hover {
    color: var(--color-primary, #d63384);
}

table.woocommerce-table--order-details tbody td.product-name strong.product-quantity {
    color: var(--color-text-muted, #888);
    font-weight: 400;
    margin-left: 8px;
}

/* Prawa kolumna tabeli (Kwoty) */
table.woocommerce-table--order-details th.product-total,
table.woocommerce-table--order-details td.product-total,
table.woocommerce-table--order-details tfoot td {
    text-align: right;
}

/* Stopka tabeli (Podsumowanie kosztów) */
table.woocommerce-table--order-details tfoot th {
    text-align: left;
    font-weight: 500;
    color: var(--color-text-muted, #666);
}

table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    font-size: 18px;
    color: var(--color-text, #222);
    padding-top: 24px;
}

/* Sekcja adresów (Rozliczeniowy i Wysyłki) */
section.woocommerce-customer-details {
    margin-top: 40px;
}

.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.woocommerce-column address {
    font-style: normal;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-light, #555);
    background: var(--color-off-white, #fafafa);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--color-border, #eee);
}

.woocommerce-column address p {
    margin: 8px 0 0 0;
}

.woocommerce-column address p:first-of-type {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #ddd;
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 767px) {
    ul.woocommerce-order-overview {
        flex-direction: column;
        gap: 16px;
        padding: 20px !important;
    }
    
    .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ═══════════════════════════════════════════
   Poprawka stopki tabeli (Podsumowanie kosztów)
   ═══════════════════════════════════════════ */

table.woocommerce-table--order-details tfoot th,
table.woocommerce-table--order-details tfoot td {
    /* Usuwamy szare tło i wymuszamy czarny/ciemny tekst */
    background-color: transparent !important;
    color: var(--color-text, #222) !important;
    
    /* Równa linia oddzielająca wiersze */
    border-bottom: 1px solid var(--color-border, #eee) !important;
    padding: 16px 0 !important;
    
    /* Wyłączenie wymuszonych dużych liter z motywu */
    text-transform: none !important; 
}

/* Nagłówki (Kwota, Wysyłka, itp.) do lewej */
table.woocommerce-table--order-details tfoot th {
    text-align: left !important;
    font-weight: 600 !important;
}

/* Wartości do prawej */
table.woocommerce-table--order-details tfoot td {
    text-align: right !important;
}

/* Ostatni wiersz (Metoda płatności) bez dolnej linii, żeby ładnie zamknąć tabelę */
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none !important;
}

/* Dodatkowe wyróżnienie wiersza "Razem" (przedostatni wiersz) */
table.woocommerce-table--order-details tfoot tr:nth-last-child(2) th,
table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-text, #111) !important;
    border-top: 2px solid var(--color-text, #222) !important; /* Grubsza linia nad sumą */
}

.shipped_via {
   display: inline-block;
   margin-top: 7px;
}