/* ========================================
   Slagalica sa Vise Lica — Main Stylesheet
   ======================================== */

:root {
    --color-bg:        #FFFBF4;
    --color-bg-alt:    #FFF8F0;
    --color-brown:     #87603f;
    --color-coral:     #E8956A;
    --color-gold:      #F5C842;
    --color-teal:      #4AA8A0;
    --color-purple:    #8060B0;
    --color-muted:     #D4C5A9;
    --color-text:      #87603f;
    --color-text-soft: #8C6E50;
    --color-white:     #FFFFFF;

    /* page accent backgrounds */
    --color-green-pale:  #E4F0DC;
    --color-yellow-pale: #FDF8E0;
    --color-orange-pale: #FDF0E6;

    --font-heading: 'Nunito Sans', sans-serif;
    --font-body:    'Nunito', sans-serif;

    --radius:    16px;
    --radius-sm: 10px;
    --radius-lg: 24px;

    --shadow:       0 4px 20px rgba(92, 61, 30, 0.08);
    --shadow-hover: 0 8px 30px rgba(92, 61, 30, 0.14);

    --container-width: 1200px;

    --transition-btn: all 0.2s ease;
    --transition:     all 0.3s ease;
}

/* ========================================
   Reset & Base
   ======================================== */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-stretch: condensed;
    color: var(--color-brown);
    line-height: 1.15;
}

h3 {
    font-family: var(--font-body);
}

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

a:hover { color: var(--color-brown); }

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

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

/* ========================================
   Buttons
   ======================================== */

.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-btn);
    border: 2px solid transparent;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: var(--color-brown);
    color: var(--color-white);
    border-color: var(--color-brown);
}

.btn-primary:hover {
    background: var(--color-white);
    color: var(--color-brown);
    border-color: var(--color-brown);
}

.btn-outline {
    background: transparent;
    color: var(--color-brown);
    border-color: var(--color-brown);
}

.btn-outline:hover {
    background: var(--color-brown);
    color: var(--color-white);
}

.btn-large {
    padding: 18px 48px;
    font-size: 1.1rem;
}

/* ========================================
   Utilities
   ======================================== */

.section-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-coral);
    margin-bottom: 6px;
    line-height: 1;
}

.section-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    margin-top: 0;
    margin-bottom: 32px;
    line-height: 1.05;
}

.link-arrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-brown);
    border-bottom: 1.5px solid var(--color-muted);
    padding-bottom: 1px;
    transition: var(--transition-btn);
}

.link-arrow:hover {
    color: var(--color-coral);
    border-color: var(--color-coral);
}

.link-arrow--circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-brown);
    color: var(--color-white);
    font-size: 1.1rem;
    border-bottom: none;
    padding-bottom: 0;
}

.link-arrow--circle::before {
    content: "→";
}

.link-arrow--circle:hover {
    background: var(--color-coral);
    color: var(--color-white);
    border-color: transparent;
}

/* ========================================
   Header
   ======================================== */

.site-header {
    background: var(--color-white);
    box-shadow: 0 2px 10px rgba(92, 61, 30, 0.07);
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

.site-branding .site-title-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.site-branding .site-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    line-height: 1;
}

.site-branding .site-subtitle {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-text-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.main-navigation .nav-menu {
    display: flex;
    list-style: none;
    gap: 4px;
}

.main-navigation .nav-menu li a {
    display: block;
    padding: 8px 14px;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.96rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.main-navigation .nav-menu li a:hover,
.main-navigation .nav-menu li.current-menu-item a {
    color: var(--color-coral);
    background: var(--color-bg-alt);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wishlist-link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-text);
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition);
}

.wishlist-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-coral);
}

.cart-link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-text);
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition);
}

.cart-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-coral);
}

.account-link {
    display: flex;
    align-items: center;
    color: var(--color-text);
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition);
}

.account-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-brown);
}

/* Пријављен корисник — икона у боји бренда */
.account-link.is-logged-in {
    color: var(--color-brown);
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-coral);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Дуплирано срце/налог унутар мобилног менија (видети .header-actions мод. изнад 768px) */
.mobile-nav-icons { display: none; }

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-brown);
    border-radius: 2px;
    transition: var(--transition);
}

/* ========================================
   Hero
   ======================================== */

.hero {
    background: var(--color-bg);
    padding: 48px 0 16px;
    overflow: hidden;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-headline {
    font-family: 'Nunito', sans-serif;
    font-size: 2.6rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-soft);
    margin-bottom: 36px;
    max-width: 420px;
}

.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-image {
    display: flex;
    justify-content: center;
}

.hero-image-placeholder svg {
    width: 100%;
    max-width: 420px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    animation: float 6s ease-in-out infinite;
}

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

/* ========================================
   Logo
   ======================================== */

.site-logo-img {
    height: 100px !important;
    width: auto !important;
    max-width: 190px !important;
    display: block;
    object-fit: contain;
}

/* ========================================
   Hero Carousel
   ======================================== */

.hero-carousel {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    position: relative;
}

.carousel-track {
    display: flex;
    transition: transform 0.45s ease;
}

.carousel-slide {
    min-width: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.carousel-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 12px 0 4px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-muted);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--color-brown);
    width: 18px;
    border-radius: 3px;
}

/* ========================================
   How It Works
   ======================================== */

.how-it-works {
    padding: 20px 0;
    background: var(--color-orange-pale);
    border-top: 1px solid var(--color-muted);
    border-bottom: 1px solid var(--color-muted);
}

.how-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 56px;
    align-items: center;
}

.how-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 160px;
}

.how-koncept-img {
    width: 220px;
    height: 220px;
    object-fit: contain;
}

.how-title {
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    text-align: center;
}

.how-right p {
    font-size: 1.15rem;
    color: var(--color-text-soft);
    line-height: 1.9;
    margin-bottom: 24px;

}

/* ========================================
   Product Intro
   ======================================== */

.product-intro {
    padding: 56px 0;
    background: var(--color-bg-alt);
}

.product-intro-text {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.product-intro-text p {
    font-size: 1.08rem;
    color: var(--color-text-soft);
    line-height: 1.8;
    margin-bottom: 20px;
}

/* ========================================
   Collection / Gotovi setovi
   ======================================== */

.collection {
    padding: 72px 0;
    background: var(--color-bg);
}

.age-sets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 40px;
}

.age-set {
    background: var(--color-white);
    border-radius: var(--radius);
    border: 1.5px solid var(--color-muted);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.age-set .link-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
}

.age-set:hover {
    border-color: var(--color-coral);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.age-set-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.age-set-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.age-set:hover .age-set-img img {
    transform: scale(1.04);
}

.age-set-img--emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.age-set-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.age-set-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
}

.age-set-icon {
    width: 64px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: auto;
}

.age-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.age-badge--coral  { background: var(--color-coral); }
.age-badge--purple { background: #8060B0; }

.age-set-meta {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

.age-set-name {
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    margin: 2px 0;
}

.age-set-desc {
    font-size: 0.88rem;
    color: var(--color-text-soft);
    margin-bottom: 12px;
    flex-grow: 1;
    line-height: 1.5;
}

.upsell-banner {
    background: var(--color-bg-alt);
    border: 2px solid var(--color-brown);
    border-radius: var(--radius);
    padding: 20px 28px;
    font-size: 0.95rem;
    color: var(--color-text-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.upsell-banner strong {
    color: var(--color-brown);
    font-weight: 700;
}

/* ========================================
   Personalization
   ======================================== */

.personalization {
    padding: 72px 0;
    background: var(--color-green-pale);
}

.personalization-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.personalization-text .section-label { color: var(--color-teal); }
.personalization-text .section-title { margin-bottom: 16px; }

.personalization-text p:not(.section-label) {
    font-size: 1.05rem;
    color: var(--color-text-soft);
    margin-bottom: 32px;
    line-height: 1.75;
}

.personalization-img img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    object-fit: cover;
}

/* ========================================
   Loyalty
   ======================================== */

.loyalty {
    padding: 72px 0;
    background: var(--color-yellow-pale);
}

.loyalty-inner {
    display: flex;
    align-items: flex-end;
    gap: 40px;
}

.loyalty-left { flex: 1; }

.loyalty-left .section-label { color: var(--color-gold); }
.loyalty-left .section-title { margin-bottom: 24px; }

.loyalty-coins {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}

.loyalty-coins img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.coin-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px dashed var(--color-muted);
    flex-shrink: 0;
}

.loyalty-left p:not(.section-label) {
    font-size: 1.05rem;
    color: var(--color-text-soft);
    line-height: 1.75;
}

/* ========================================
   Mission
   ======================================== */

.mission {
    padding: 72px 0;
    background: var(--color-orange-pale);
}

.mission-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

.mission-img {
    flex-shrink: 0;
}

.mission-img img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: var(--shadow);
    object-fit: cover;
}

.mission-text .section-label { color: var(--color-coral); }

.mission-text p:not(.section-label) {
    font-size: 1.05rem;
    color: var(--color-text-soft);
    margin-bottom: 20px;
    line-height: 1.75;
}

/* ========================================
   Category Page (taxonomy-product_cat)
   ======================================== */

.cat-page {
    padding: 32px 0 80px;
}

.cat-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-soft);
    margin-bottom: 20px;
}

.cat-breadcrumb a { color: var(--color-text-soft); }
.cat-breadcrumb a:hover { color: var(--color-brown); }
.cat-breadcrumb span { color: var(--color-muted); }
.cat-breadcrumb span:last-child { color: var(--color-brown); font-weight: 600; }

.cat-header {
    margin-bottom: 20px;
}

.cat-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    line-height: 1.05;
    margin-top: 2px;
}

/* Age tabs */
.age-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.age-tab {
    padding: 8px 20px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    opacity: 0.45;
    transition: var(--transition-btn);
}

.age-tab.active,
.age-tab:hover { opacity: 1; color: var(--color-white); }

.age-tab--teal   { background: var(--color-teal); }
.age-tab--coral  { background: var(--color-coral); }
.age-tab--purple { background: var(--color-purple); }

/* Koncept card */
.koncept-card {
    background: var(--color-orange-pale);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 32px;
}

.koncept-card-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.koncept-card-text {
    font-size: 0.9rem;
    color: var(--color-text-soft);
    line-height: 1.65;
}

/* Product cards */
.cat-products {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.product-card {
    background: var(--color-white);
    border-radius: var(--radius);
    border: 1.5px solid var(--color-muted);
    overflow: hidden;
    transition: var(--transition);
}

.product-card:hover {
    border-color: var(--color-coral);
    box-shadow: var(--shadow-hover);
}

.product-card-img-link {
    display: block;
    overflow: hidden;
    background: var(--color-bg);
}

.product-card-img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

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

.product-card-img-placeholder {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    background: var(--color-orange-pale);
}

.product-card-body {
    padding: 16px 20px 20px;
}

.product-card-parts {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.product-card-parts--teal   { color: var(--color-teal); }
.product-card-parts--coral  { color: var(--color-coral); }
.product-card-parts--purple { color: var(--color-purple); }

.product-card-name {
    font-family: 'Nunito', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    margin-bottom: 6px;
    line-height: 1.1;
}

.product-card-name a { color: inherit; }

.product-card-desc {
    font-size: 0.88rem;
    color: var(--color-text-soft);
    line-height: 1.55;
    margin-bottom: 16px;
    min-height: calc(1.55em * 2);
}

.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.product-card-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.product-card-price .woocommerce-Price-amount { color: var(--color-brown); }

.btn-add-to-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-brown);
    color: var(--color-white);
    border: 1.5px solid var(--color-brown);
    border-radius: 50px;
    padding: 8px 18px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-btn);
    text-decoration: none;
}

.btn-add-to-cart:hover {
    background: var(--color-white);
    color: var(--color-brown);
}

.btn-wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--color-muted);
    background: transparent;
    color: var(--color-brown);
    cursor: pointer;
    transition: var(--transition-btn);
    flex-shrink: 0;
    position: relative;
}

.btn-wishlist::after {
    content: 'Додај на листу жеља';
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--color-brown);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.btn-wishlist:hover::after {
    opacity: 1;
}

.btn-wishlist:hover {
    border-color: var(--color-coral);
    color: var(--color-coral);
}

.btn-wishlist.active {
    background: var(--color-coral);
    border-color: var(--color-coral);
    color: var(--color-white);
}

.btn-wishlist.active svg {
    fill: currentColor;
}

.btn-wishlist.active::after {
    content: 'Уклони са листе жеља';
}

.product-card-link {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-brown);
    border-bottom: 1.5px solid var(--color-muted);
    padding-bottom: 1px;
    transition: var(--transition-btn);
    display: inline-block;
}

.product-card-link:hover {
    color: var(--color-coral);
    border-color: var(--color-coral);
}

/* ── Shop cart drawer ───────────────────────────────────────── */
.shop-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.shop-cart-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.shop-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 100vw);
    height: 100dvh;
    background: #fff;
    z-index: 9001;
    display: flex;
    flex-direction: column;
    font-family: var(--font-heading);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.14);
}
.shop-cart-drawer.is-open { transform: translateX(0); }

.shop-cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-muted);
    flex-shrink: 0;
}
.shop-cart-drawer-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-brown);
}
.shop-cart-drawer-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-soft);
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s;
}
.shop-cart-drawer-close:hover { color: var(--color-brown); }

.shop-cart-drawer-items {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}
.shop-cart-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f2ede8;
}
.shop-cart-item:last-child { border-bottom: none; }
.shop-cart-item-img {
    width: 96px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--color-bg-alt);
}
.shop-cart-item-img--empty {
    width: 96px;
    height: 64px;
    border-radius: 8px;
    background: var(--color-bg-alt);
    flex-shrink: 0;
}
.shop-cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.shop-cart-item-name {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-brown);
    line-height: 1.3;
}
.shop-cart-item-meta {
    font-size: 0.82rem;
    color: var(--color-text-soft);
    font-weight: 600;
}
/* NL stavke — detalji po licu i ramu */
.shop-cart-item-nl-face {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-soft);
    line-height: 1.4;
}
/* Desna kolona: cena gore, × dole — oba desno poravnata */
.shop-cart-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    align-self: center;
}
.shop-cart-item-line {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--color-brown);
    white-space: nowrap;
}
.shop-cart-item-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F0EBE2;
    border: none;
    cursor: pointer;
    color: #927151;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    transition: background 0.15s, color 0.15s;
}
.shop-cart-item-remove:hover { background: #FDECEC; color: #C0392B; }
.shop-cart-item-remove:disabled { opacity: 0.35; cursor: not-allowed; }
.shop-cart-empty {
    font-size: 0.9rem;
    color: var(--color-text-soft);
    padding: 24px 0;
}

.shop-cart-drawer-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--color-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.shop-cart-drawer-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brown);
    margin-bottom: 4px;
}
.shop-cart-drawer-total-price {
    font-size: 1.1rem;
    color: var(--color-coral);
}
.shop-cart-btn {
    display: block;
    width: 100%;
    padding: 13px;
    border-radius: 8px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 900;
    font-stretch: condensed;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: var(--transition-btn);
    border: none;
    text-decoration: none;
}
.shop-cart-btn--outline {
    background: #f4ede6;
    color: var(--color-brown);
}
.shop-cart-btn--outline:hover { background: #ede0d5; color: var(--color-brown); }
.shop-cart-btn--solid {
    background: var(--color-brown);
    color: #fff;
}
.shop-cart-btn--solid:hover { background: var(--color-coral); color: #fff; }

.btn-add-to-cart.is-loading { opacity: 0.6; pointer-events: none; }

.cat-empty {
    font-size: 1rem;
    color: var(--color-text-soft);
    padding: 40px 0;
    text-align: center;
}

/* ========================================
   WooCommerce — General
   ======================================== */

.woo-container {
    padding-top: 40px;
    padding-bottom: 60px;
}

.woocommerce .woocommerce-breadcrumb {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    margin-bottom: 24px;
    padding: 12px 20px;
    background: var(--color-white);
    border-radius: var(--radius-sm);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--color-coral); }

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1.5px solid var(--color-muted);
    transition: var(--transition);
    list-style: none;
}

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

.woocommerce ul.products li.product a img { border-radius: 0; margin: 0; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-brown);
    padding: 16px 20px 4px;
}

.woocommerce ul.products li.product .price {
    color: var(--color-coral);
    font-weight: 700;
    padding: 0 20px 8px;
}

.woocommerce ul.products li.product .button {
    display: block;
    margin: 8px 20px 20px;
    padding: 10px 20px;
    background: var(--color-brown);
    color: white;
    text-align: center;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    transition: var(--transition-btn);
    border: 2px solid var(--color-brown);
    cursor: pointer;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--color-white);
    color: var(--color-brown);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 24px; }

.woocommerce .woocommerce-ordering select {
    padding: 10px 16px;
    border: 2px solid var(--color-muted);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--color-white);
    cursor: pointer;
    color: var(--color-text);
}

.woocommerce .quantity .qty {
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-muted);
    padding: 8px 12px;
}

.woocommerce button.button.alt,
.woocommerce a.button.alt {
    background: var(--color-brown);
    color: var(--color-white);
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 12px 28px;
    border: 2px solid var(--color-brown);
    transition: var(--transition-btn);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
    background: var(--color-white);
    color: var(--color-brown);
}

/* ========================================
   WooCommerce — Single Product
   ======================================== */

.woocommerce div.product {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
    overflow: hidden;
}

.woocommerce div.product::after { content: ''; display: table; clear: both; }

.woocommerce div.product div.images {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg);
}

.woocommerce div.product .product_title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--color-brown);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--color-coral);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--color-text-soft);
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-muted);
}

.woocommerce div.product form.cart {
    margin-bottom: 24px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.woocommerce div.product form.cart .quantity .qty {
    width: 80px;
    height: 50px;
    border: 2px solid var(--color-muted);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    background: var(--color-bg);
    transition: var(--transition);
}

.woocommerce div.product form.cart .quantity .qty:focus {
    border-color: var(--color-coral);
    outline: none;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
    background: var(--color-brown);
    border: 2px solid var(--color-brown);
    border-radius: 50px;
    padding: 14px 36px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: var(--transition-btn);
    text-transform: uppercase;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background: var(--color-white);
    color: var(--color-brown);
}

.woocommerce div.product .product_meta {
    border-top: 1px solid var(--color-muted);
    padding-top: 20px;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--color-text-soft);
}

.woocommerce div.product .product_meta > span { display: block; margin-bottom: 8px; }
.woocommerce div.product .product_meta a { color: var(--color-coral); font-weight: 600; }

/* ========================================
   Product Tabs
   ======================================== */

.woocommerce div.product .woocommerce-tabs {
    margin-top: 0;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 0 40px 40px;
    box-shadow: var(--shadow);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0 -40px 32px;
    border-bottom: 2px solid var(--color-muted);
    background: var(--color-bg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 16px 28px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-soft);
    transition: var(--transition);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-coral); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--color-white); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-coral);
    border-bottom-color: var(--color-coral);
}

.woocommerce div.product .woocommerce-tabs .panel { padding: 0; margin: 0; }

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.4rem;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs .panel p {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--color-text-soft);
}

/* ========================================
   WooCommerce — Cart thumbnails (landscape images)
   Radi i za klasični cart i za Blocks cart
   ======================================== */

/* ── WC Block Cart — naslovna stranica ── */

/* 1. h1 "Корпа" — isto kao ostali page naslovi na sajtu */
.woocommerce-cart .page-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-brown);
    margin-top: 0;
    margin-bottom: 36px;
}

/* ── Blocks Cart (wc-block-cart-item__image) ── */
/* WC 10.7: items su u <table class="wc-block-cart-items">,
   header je <thead class="wc-block-cart-items__header"> */

/* 2. Header red — potpuno sakriven (WC koristi "Details" string koji nema mesta na srpskom sajtu)
   Eyebrow "ПРОИЗВОД" se dodaje kao CSS ::before na tabelu — bez tabličnog headera */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header {
    display: none !important;
}

/* "ПРОИЗВОД" eyebrow — pseudo-element iznad tabele, isti stil kao .section-label */
.wc-block-cart table.wc-block-cart-items {
    position: relative;
}

.wc-block-cart .wc-block-cart-items {
    display: block;
}

.wc-block-cart .wc-block-cart-items::before {
    content: 'Производ';
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-coral);
    line-height: 1;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-muted);
    margin-bottom: 0;
}

/* 3. Vertikalno poravnanje stupaca — levi počinje od iste y-pozicije kao kartica desno */
.wc-block-cart .wc-block-components-sidebar-layout {
    align-items: flex-start !important;
}

.wc-block-cart .wc-block-components-main {
    padding-top: 24px !important; /* izravnavanje sa padding-top kartice desnog stupca */
    margin-top: 0 !important;
}

/* Image ćelija — fiksna širina, overflow visible da nl-cart-thumb frame ne bude odsečen */
.wc-block-cart-item__image {
    width: 130px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    overflow: visible !important;
}

/* WC default thumbnail — uvek sakrij, React ga vraća pri hydration-u ali CSS ga drži skrivenim.
   Naše custom slike (.wc-bc-set-img, .nl-ct-photo) nisu targetovane i ostaju vidljive. */
.woocommerce-cart .wc-block-cart-item__image img:not(.wc-bc-set-img):not(.nl-ct-photo):not(.nl-ct-overlay) {
    display: none !important;
}

/* Neutral placeholder dok custom thumbnail nije još ubačen */
.woocommerce-cart .wc-block-cart-item__image:not([data-sl-patch]) {
    background: var(--color-bg, #faf7f4);
    border-radius: var(--radius-sm);
    min-height: 80px;
}

/* Anchor wrapper — ne reže sliku */
.wc-block-cart-item__image a,
.wc-block-cart-item__image > a {
    display: block !important;
    line-height: 0 !important;
    overflow: visible !important;
}

/* React wrapper div — poništavamo React inline height da ne forsira kvadrat. */
.wc-block-components-product-image {
    overflow: visible !important;
    background: transparent !important;
    height: auto !important;
}

/* Standardna WC slika u block cart-u (klasičan cart, ne block) */
.wc-block-cart-item__image img:not(.nl-ct-photo):not(.nl-ct-overlay),
.wc-block-components-product-image img[data-testid="product-image"]:not(.nl-ct-photo) {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: var(--radius-sm) !important;
}

/* Наш патчирани thumbnail у block cart-u */
.wc-block-cart-item__image .nl-cart-thumb {
    display: block;
    margin: 0 auto;
}

/* Landscape слика за сетове у block cart-u — као shop-cart-item-img у Draweru */
.wc-block-cart-item__image .wc-bc-set-img {
    display: block;
    width: 130px;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}

/* Cart item row — flex: [image 130px] | [product flex:1] | [total 120px right] */
.wc-block-cart-items__row {
    position: relative;
    display: flex !important;
    align-items: flex-start;
    padding: 20px 0;
    border: none !important;
}

/* Separator linija kao pseudo-element — garantovano jedna linija pune širine */
.wc-block-cart-items__row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-muted);
}

/* Poništavamo sve WC-ove native bordere na td ćelijama i tabeli */
.wc-block-cart-items__row > td,
.wc-block-cart-item__image,
.wc-block-cart-item__product,
.wc-block-cart-item__total,
.wc-block-cart-items,
.wc-block-cart-items tbody,
.wc-block-cart-items thead {
    border: none !important;
}

.wc-block-cart-item__product {
    flex: 1 1 auto !important;
    padding: 0 20px !important;
    min-width: 0 !important;
}

.wc-block-cart-item__total {
    flex: 0 0 120px !important;
    text-align: right !important;
    font-weight: 600 !important;
    color: var(--color-brown) !important;
    padding-top: 4px !important;
    font-size: 1rem !important;
}

/* ── Block Cart — prazna korpa ── */
.sl-empty-header {
    text-align: center;
    padding: 48px 24px 32px;
}
.sl-empty-logo {
    height: 110px;
    width: auto;
    display: block;
    margin: 0 auto 24px;
}
.sl-empty-text {
    font-size: 1.05rem;
    color: var(--color-brown);
    margin-bottom: 28px;
}
.sl-shop-link {
    display: inline-block;
    background: var(--color-brown);
    color: #fff !important;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: var(--transition);
}
.sl-shop-link:hover { opacity: 0.88; }
.sl-shop-link--secondary {
    background: transparent;
    color: var(--color-brown) !important;
    border: 2px solid var(--color-brown);
    margin-top: 12px;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.sl-shop-link--secondary:hover { background: var(--color-brown); color: #fff !important; opacity: 1; }

/* ── Klasični Cart (table.cart td.product-thumbnail) ── */
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce table.shop_table td.product-thumbnail {
    width: 130px;
    padding-right: 8px;
}

.woocommerce-cart table.cart td.product-thumbnail a,
.woocommerce table.shop_table td.product-thumbnail a {
    display: block;
    line-height: 0;
}

.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce table.shop_table td.product-thumbnail img {
    width: 120px !important;
    height: 80px !important;
    object-fit: contain !important;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    display: block;
}

/* ========================================
   WooCommerce — Cart
   ======================================== */

.woocommerce-cart .woocommerce {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow);
}

.woocommerce table.shop_table {
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
}

.woocommerce table.shop_table thead { background: var(--color-bg); }

.woocommerce table.shop_table th {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 16px 20px;
    border: none;
    color: var(--color-brown);
}

.woocommerce table.shop_table td {
    padding: 20px;
    border-bottom: 1px solid var(--color-muted);
    vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a {
    font-weight: 600;
    color: var(--color-brown);
}

.woocommerce .cart_totals {
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 24px;
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
    background: var(--color-brown) !important;
    border: 2px solid var(--color-brown) !important;
    border-radius: 50px !important;
    font-family: var(--font-heading);
    font-size: 1rem;
    padding: 16px 32px !important;
    transition: var(--transition-btn) !important;
}

.woocommerce .wc-proceed-to-checkout .checkout-button:hover {
    background: var(--color-white) !important;
    color: var(--color-brown) !important;
}

/* ── WC Block Cart — Sidebar kartica (5. sjenka/border) ── */
.wc-block-cart .wc-block-cart__sidebar,
.wc-block-cart .wp-block-woocommerce-cart-totals-block {
    background: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* Ukloni WC-ov card border koji se konfliktuje */
.wc-block-cart .wc-block-cart__sidebar .components-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 4. "УКУПНА ВРЕДНОСТ КОРПЕ" — eyebrow stil, identičan .section-label */
.wc-block-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block {
    font-family: var(--font-heading) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--color-coral) !important;
    line-height: 1 !important;
    margin: 0 0 14px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--color-muted) !important;
    display: block !important;
}

/* ── WC Block Cart — "Наставите с плаћањем" pill dugme ── */
.wp-block-woocommerce-proceed-to-checkout-block {
    margin-top: 20px;
}

.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link,
.wp-block-woocommerce-proceed-to-checkout-block .wp-element-button {
    display: block !important;
    width: 100% !important;
    padding: 16px 32px !important;
    background: var(--color-brown) !important;
    color: var(--color-white) !important;
    border-radius: 50px !important;
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 2px solid var(--color-brown) !important;
    transition: var(--transition-btn) !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
    box-sizing: border-box !important;
}

.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wp-element-button:hover {
    background: var(--color-white) !important;
    color: var(--color-brown) !important;
    border-color: var(--color-brown) !important;
}

/* ========================================
   WooCommerce — Checkout
   ======================================== */

.woocommerce-checkout .woocommerce {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow);
}

.woocommerce form .form-row label {
    font-weight: 600;
    color: var(--color-brown);
    font-size: 0.9rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    padding: 12px 16px;
    border: 2px solid var(--color-muted);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition);
    color: var(--color-text);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-coral);
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 149, 106, 0.12);
}

.woocommerce #order_review {
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 24px;
}

.woocommerce #place_order {
    background: var(--color-brown) !important;
    border: 2px solid var(--color-brown) !important;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 1rem;
    padding: 16px 40px;
    width: 100%;
    transition: var(--transition-btn) !important;
    text-transform: uppercase;
}

.woocommerce #place_order:hover {
    background: var(--color-white) !important;
    color: var(--color-brown) !important;
}

/* ── WC Block Checkout — Place Order + Return to Cart ─────────────────── */

/* Row layout: ← Назад у корпу  [   Наручите   ] */
.wc-block-checkout__actions_row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
}

/* "Наручите" — главно CTA дугме, десно, фиксна ширина */
.wc-block-checkout__actions_row button[type="submit"],
.wc-block-checkout__actions_row .wc-block-checkout__place-order button,
.wc-block-checkout__actions_row .wp-block-button__link,
.wc-block-checkout__actions_row .wp-element-button {
    background: #5C3D1E !important;
    color: var(--color-white) !important;
    border: 2px solid #5C3D1E !important;
    border-radius: 50px !important;
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 16px 32px !important;
    width: auto !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: var(--transition-btn) !important;
    box-sizing: border-box !important;
    letter-spacing: 0.01em !important;
}

.wc-block-checkout__actions_row button[type="submit"]:hover,
.wc-block-checkout__actions_row .wc-block-checkout__place-order button:hover,
.wc-block-checkout__actions_row .wp-block-button__link:hover,
.wc-block-checkout__actions_row .wp-element-button:hover {
    background: var(--color-white) !important;
    color: #5C3D1E !important;
}

/* "← Назад у корпу" — секундарни линк, лево */
.wc-block-checkout__actions_row .wc-block-checkout__return-to-cart-link,
.wc-block-checkout__actions_row a.wc-block-checkout__return-to-cart-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 0 !important;
    color: var(--color-brown) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
    white-space: nowrap !important;
}

.wc-block-checkout__actions_row .wc-block-checkout__return-to-cart-link:hover,
.wc-block-checkout__actions_row a.wc-block-checkout__return-to-cart-link:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
}

/* ── WC Block Checkout — Купон секција (привремено сакривена) ─────────── */

.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wc-block-components-totals-coupon {
    display: none !important;
}

/* ── Apply дугме — CTA стил (за кад се купони поново укључе) ─────────── */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon__button.wc-block-components-button {
    background: var(--color-brown) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-brown) !important;
    border-radius: 50px !important;
    font-family: var(--font-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: var(--transition-btn) !important;
    white-space: nowrap !important;
}

.wc-block-components-totals-coupon__button:hover {
    background: var(--color-white) !important;
    color: var(--color-brown) !important;
}

/* ========================================
   WooCommerce — Messages
   ======================================== */

.woocommerce-message,
.woocommerce-message[role="alert"] {
    border: 1.5px solid var(--color-gold) !important;
    border-top: 1.5px solid var(--color-gold) !important;
    background: #fdf8ef !important;
    color: var(--color-brown) !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 20px !important;
    outline: none !important;
    box-shadow: none !important;
}

.woocommerce-message::before { color: var(--color-gold) !important; }

.woocommerce-info,
.woocommerce-info[role="status"] {
    border: 1.5px solid var(--color-gold) !important;
    border-top: 1.5px solid var(--color-gold) !important;
    background: #fdf8ef !important;
    color: var(--color-text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 20px !important;
    outline: none !important;
    box-shadow: none !important;
}

.woocommerce-error {
    border: 1.5px solid var(--color-coral) !important;
    border-top: 1.5px solid var(--color-coral) !important;
    background: #fff5f0 !important;
    color: var(--color-text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 20px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   Custom Image Upload (Product Page)
   ======================================== */

.slagalice-upload-section {
    margin: 24px 0;
    padding: 24px;
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    border: 2px dashed var(--color-muted);
}

.slagalice-upload-section h3 { font-size: 1.1rem; margin-bottom: 8px; }

.upload-description {
    color: var(--color-text-soft);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.upload-area { position: relative; }

.upload-area input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--color-white);
    border: 2px dashed var(--color-teal);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.upload-label:hover {
    border-color: var(--color-coral);
    background: var(--color-bg);
}

.upload-icon {
    font-size: 2.5rem;
    color: var(--color-teal);
    margin-bottom: 8px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
}

.upload-text { color: var(--color-text-soft); font-size: 0.9rem; }

.upload-preview { margin-top: 16px; text-align: center; }

.upload-preview img {
    max-width: 200px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.slagalice-upload-section textarea {
    width: 100%;
    margin-top: 16px;
    padding: 12px 16px;
    border: 2px solid var(--color-muted);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    resize: vertical;
    transition: var(--transition);
    color: var(--color-text);
}

.slagalice-upload-section textarea:focus {
    outline: none;
    border-color: var(--color-teal);
}

/* ========================================
   Footer
   ======================================== */

.site-footer {
    background: var(--color-brown);
    color: rgba(255, 255, 255, 0.75);
    padding: 60px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-grid h4 {
    color: white;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.footer-grid p { font-size: 0.88rem; line-height: 1.7; }

.footer-brand-name {
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: 10px;
    line-height: 1.2;
    text-transform: uppercase;
}

.footer-brand-tagline {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

.footer-contact li a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
    padding: 4px 0;
    display: block;
    transition: var(--transition);
}

.footer-contact li a:hover { color: white; }

.footer-menu { list-style: none; }

.footer-menu li a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
    padding: 4px 0;
    display: block;
    transition: var(--transition);
}

.footer-menu li a:hover { color: white; padding-left: 4px; }

.footer-contact { list-style: none; font-size: 0.88rem; }
.footer-contact li { padding: 4px 0; }

.footer-bottom {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 0.82rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.footer-legal-link {
    color: rgba(255, 255, 255, 0.75);
    position: relative;
    padding-left: 18px;
}

.footer-legal-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.footer-legal-link:hover {
    color: white;
}

@media (max-width: 480px) {
    .footer-legal-link {
        padding-left: 0;
    }

    .footer-legal-link::before {
        display: none;
    }
}

/* ========================================
   Posts / Blog
   ======================================== */

.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    padding: 48px 0;
}

.post-card {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.post-thumbnail img { width: 100%; height: 200px; object-fit: cover; }

.post-card-content { padding: 24px; }

.post-card-content h2 { font-size: 1.15rem; margin-bottom: 8px; }

.post-card-content h2 a { color: var(--color-brown); }

.post-card-content h2 a:hover { color: var(--color-coral); }

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 992px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .hero-headline { font-size: 2.6rem; }
    .hero-subtitle { margin: 0 auto 32px; }
    .hero-cta { justify-content: center; }

    .carousel-slide img { height: 340px; }

    .how-inner {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }

    .how-it-works { padding: 4px 0 16px; }

    .how-left {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: unset;
        width: 100%;
    }

    .how-koncept-img {
        display: block;
        margin: 0 auto;
        width: 120px;
        height: 120px;
    }

    .how-right p { text-align: center; }

    .how-right .link-arrow { display: block; text-align: center; }

    .age-sets-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }

    .personalization-inner,
    .mission-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .loyalty-inner { flex-direction: column; align-items: flex-start; gap: 24px; }

    .loyalty-coins { gap: 8px; flex-wrap: wrap; }

    .loyalty-coins img,
    .coin-placeholder { width: 60px; height: 60px; }

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

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

@media (max-width: 768px) {
    .header-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

    .menu-toggle { display: flex; order: 1; }

    .site-branding {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow: hidden;
    }

    .header-actions { order: 3; gap: 4px; }
    .header-actions .wishlist-link,
    .header-actions .account-link { display: none; }

    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        box-shadow: 0 8px 20px rgba(92, 61, 30, 0.12);
        padding: 16px;
        z-index: 999;
    }

    .main-navigation.active { display: block; }
    .main-navigation .nav-menu { flex-direction: column; }

    .mobile-nav-icons {
        display: flex;
        gap: 12px;
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--color-muted);
    }
    .mobile-nav-icons .wishlist-link,
    .mobile-nav-icons .account-link {
        background: var(--color-bg-alt);
        border-radius: 50%;
    }

    .hero { padding: 40px 0 0; }
    .hero-headline { font-size: 2rem; }

    .site-logo-img { height: 64px !important; max-width: 100% !important; }

    .how-right p { text-align: left; }
    .how-right .link-arrow { text-align: left; display: inline-block; }

    .carousel-slide img { height: 280px; }

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

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

    .how-it-works,
    .collection,
    .personalization,
    .loyalty,
    .mission { padding: 48px 0; }

    .section-title { font-size: 1.45rem; }

    .product-layout { grid-template-columns: 1fr; gap: 32px; }
    .product-single-name { font-size: 1.6rem; }
    .product-atc-form { flex-wrap: nowrap; }
    .btn-primary-solid { flex: 1; justify-content: center; }
}

@media (max-width: 480px) {
    .hero-cta { flex-direction: column; align-items: center; }

    .btn { width: 100%; max-width: 280px; }

    .upsell-banner { flex-direction: column; gap: 6px; }

    .carousel-slide img { height: 240px; }

    .product-single-name { font-size: 1.4rem; }
}

/* =============================================
   SINGLE PRODUCT PAGE
   ============================================= */

.single-product-page {
    padding: 40px 0 80px;
}

.product-layout {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 56px;
    margin-top: 32px;
    align-items: start;
}

/* Images */
.product-featured-wrap {
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-bg);
}

.product-featured-img {
    width: 100%;
    height: auto;
    display: block;
}

.product-gallery-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.product-gallery-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-gallery-thumb.active img {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(92, 61, 30, 0.28);
    position: relative;
    z-index: 2;
}

.product-gallery-placeholder {
    aspect-ratio: 1;
    border: 2px dashed var(--color-muted);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-muted);
}

/* Product info */
.product-single-name {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    line-height: 1.1;
    margin: 8px 0 16px;
}

.product-single-short-desc {
    color: var(--color-brown);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 24px;
}

.product-types-block {
    margin-bottom: 28px;
}

.product-types-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted);
    margin-bottom: 10px;
}

.product-types-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.product-type-pill {
    padding: 5px 14px;
    border: 1.5px solid rgba(92, 61, 30, 0.25);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--color-brown);
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.product-type-pill:hover,
.product-type-pill.active {
    background: #9B7050;
    color: var(--color-white);
    border-color: #9B7050;
}

.product-lb-trigger {
    cursor: zoom-in;
    position: relative;
}

.product-featured-wrap.product-lb-trigger:hover .product-lb-zoom,
.product-gallery-thumb.product-lb-trigger:hover .product-lb-zoom {
    opacity: 1;
}

.product-lb-zoom {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.88);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
    color: var(--color-brown);
}

/* Product lightbox */
.prd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(20, 14, 8, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    outline: none;
}

.prd-lightbox[hidden] { display: none; }

.prd-lightbox-inner {
    max-width: min(90vw, 800px);
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    display: block;
    object-fit: contain;
}

.prd-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.prd-lightbox-close:hover { background: rgba(255,255,255,0.22); }

.prd-lightbox-prev,
.prd-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.prd-lightbox-prev { left: 16px; }
.prd-lightbox-next { right: 16px; }
.prd-lightbox-prev:hover,
.prd-lightbox-next:hover { background: rgba(255,255,255,0.22); }

.prd-lightbox-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.prd-lb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.prd-lb-dot.is-active { background: #fff; }

.product-gallery-thumb--hidden {
    display: none;
}

.product-gallery-thumb {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.product-gallery-thumb.active {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(92, 61, 30, 0.18);
}

.product-gallery-placeholder {
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.product-gallery-placeholder.active {
    transform: scale(1.05);
    border-color: var(--color-brown);
}

.product-purchase {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.product-stock {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 600;
}

.stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.product-stock--in  { color: #4A9668; }
.product-stock--in  .stock-dot { background: #4A9668; }
.product-stock--out { color: var(--color-text-soft); }
.product-stock--out .stock-dot { background: var(--color-muted); }

.product-notify-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-notify-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1.5px solid var(--color-brown);
    background: transparent;
    color: var(--color-brown);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-btn);
    width: fit-content;
}

.btn-notify-toggle:hover {
    background: var(--color-brown);
    color: var(--color-white);
}

.product-notify-form {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.product-notify-form[hidden] {
    display: none;
}

.notify-email-input {
    padding: 8px 12px;
    border: 1.5px solid var(--color-muted);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-brown);
    background: var(--color-white);
    outline: none;
    transition: border-color 0.2s;
    flex: 1;
}

.notify-email-input:focus {
    border-color: var(--color-brown);
}

.notify-feedback {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4A9668;
}

.notify-feedback.error {
    color: #C0392B;
}

.product-single-price .woocommerce-Price-amount,
.product-single-price .amount {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-brown);
}

.product-atc-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-primary-solid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-brown);
    color: var(--color-white);
    border: 2px solid var(--color-brown);
    border-radius: 50px;
    padding: 12px 28px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-btn);
    text-decoration: none;
}

.btn-primary-solid:hover {
    background: var(--color-white);
    color: var(--color-brown);
}

.btn--sm {
    padding: 8px 16px;
    font-size: 0.8rem;
}

.btn-wishlist--lg {
    width: 48px;
    height: 48px;
}

/* Long description */
.product-long-desc {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-muted);
}

.product-long-desc-label {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.05;
}

.product-long-desc-content {
    columns: 2;
    column-gap: 48px;
}

.product-long-desc-content p {
    font-size: 0.9rem;
    color: var(--color-brown);
    line-height: 1.65;
    margin-bottom: 14px;
    break-inside: avoid;
}

.product-long-desc-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .product-long-desc-content {
        columns: 1;
    }
}

/* ── Product accordions ─────────────────────────────────────────────── */
.product-accordions {
    margin-top: 32px;
    border-top: 1px solid var(--color-muted);
}

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

/* Kill browser default triangle — all engines */
.product-accordion-item > summary,
summary.product-accordion-trigger {
    list-style: none !important;
    display: flex !important;
}
.product-accordion-item > summary::marker,
.product-accordion-item > summary::-webkit-details-marker,
summary.product-accordion-trigger::marker,
summary.product-accordion-trigger::-webkit-details-marker {
    display: none !important;
    content: '' !important;
}

.product-accordion-trigger {
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brown);
    cursor: pointer;
    user-select: none;
    gap: 16px;
    transition: color 0.2s;
}

.product-accordion-trigger:hover { color: var(--color-coral); }

/* + / − indicator via ::after */
.product-accordion-trigger::after {
    content: '+';
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
    color: var(--color-coral);
    transition: opacity 0.2s;
}

.product-accordion-item[open] .product-accordion-trigger::after {
    content: '−';
}

.product-accordion-body {
    padding: 4px 0 22px;
}

.product-accordion-body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.product-accordion-body ul li {
    list-style: none !important;
    font-size: 0.9rem;
    color: var(--color-brown);
    line-height: 1.55;
    padding-left: 20px;
    position: relative;
}

.product-accordion-body ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-coral);
    font-weight: 700;
}

.product-accordion-body ul li::marker {
    content: '' !important;
}

/* Related products */
.related-products {
    margin-top: 64px;
    padding-top: 48px;
}

.related-products-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    margin-bottom: 28px;
}

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

@media (max-width: 768px) {
    .product-layout { grid-template-columns: 1fr; gap: 32px; }
    .product-single-name { font-size: 1.6rem; }
    .product-atc-form { flex-wrap: nowrap; }
    .btn-primary-solid { flex: 1; justify-content: center; }
}

@media (max-width: 480px) {
    .related-products-grid { grid-template-columns: 1fr; }
    .product-single-name { font-size: 1.4rem; }
}

/* =============================================
   SHOP PAGE
   ============================================= */

.shop-page {
    padding: 40px 0 80px;
}

.shop-header {
    margin-bottom: 32px;
}

.shop-age-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 48px;
}

.shop-age-section {
    margin-bottom: 64px;
    padding-top: 8px;
}

.shop-age-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

.shop-age-badge {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shop-age-badge--teal   { background: #E0F4F2; color: var(--color-teal); }
.shop-age-badge--coral  { background: #FDF0E6; color: var(--color-coral); }
.shop-age-badge--purple { background: #EDE6F5; color: var(--color-purple); }

.shop-age-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    margin: 0 0 4px;
    line-height: 1.1;
}

.shop-age-text {
    color: var(--color-text-soft);
    font-size: 0.9rem;
    margin: 0;
}

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

.shop-empty {
    color: var(--color-muted);
    font-style: italic;
    padding: 24px 0;
}

@media (max-width: 768px) {
    .shop-products-grid { grid-template-columns: 1fr; }
    .shop-age-tabs { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .shop-age-header { flex-direction: column; gap: 12px; }
}

/* ========================================
   Configurator — Додатна лица
   ======================================== */

.configurator-page { padding: 40px 0 80px; }

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

.configurator-title {
    font-family: 'Nunito', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    margin-bottom: 10px;
}

.configurator-subtitle {
    font-size: 1rem;
    color: var(--color-text-soft);
    max-width: 480px;
    margin: 0 auto;
}

.cfg-step { margin-bottom: 40px; }

.cfg-shape-panel { scroll-margin-top: 80px; }
.cfg-face-panel  { scroll-margin-top: 80px; }

.cfg-step-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-soft);
    margin-bottom: 16px;
}

/* Age tabs */
.cfg-age-tabs { display: flex; gap: 12px; flex-wrap: wrap; }

.cfg-age-tab {
    padding: 8px 20px;
    border-radius: 50px;
    border: none;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-btn);
    color: #fff;
    opacity: 0.45;
}

.cfg-age-tab--teal   { background: var(--color-teal); }
.cfg-age-tab--coral  { background: var(--color-coral); }
.cfg-age-tab--purple { background: var(--color-purple); }

.cfg-age-tab.is-active,
.cfg-age-tab:hover { opacity: 1; }

/* Face grid */
.cfg-face-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.cfg-face-card {
    background: #fff;
    border: 2.5px solid var(--color-muted);
    border-radius: var(--radius);
    padding: 0;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cfg-face-card:hover { border-color: var(--color-brown); box-shadow: var(--shadow-hover); }

.cfg-face-card.is-selected {
    border-color: var(--color-brown);
    box-shadow: 0 0 0 3px rgba(135, 96, 63, 0.2);
    transform: scale(1.06);
    z-index: 1;
}

/* Spotlight mode: hide others, fill left column */
.cfg-face-grid.has-selection {
    display: block;
}

.cfg-face-grid.has-selection .cfg-face-card:not(.is-selected) {
    display: none;
}

/* Out-of-stock face card */
.cfg-face-card--oos {
    opacity: 0.82;
    cursor: default !important;
}

.cfg-face-card--oos:hover {
    border-color: var(--color-muted) !important;
    box-shadow: none !important;
    transform: none !important;
}

.cfg-face-oos-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background: rgba(245, 237, 225, 0.93);
    color: var(--color-brown);
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 20px;
    border: 1px solid rgba(139, 100, 60, 0.18);
    pointer-events: none;
    line-height: 1.4;
}

.cfg-face-grid.has-selection .cfg-face-card.is-selected {
    transform: none;
    box-shadow: 0 6px 24px rgba(135, 96, 63, 0.18);
    width: 100%;
}

/* Two-column spotlight layout */
.cfg-spotlight-row {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.cfg-spotlight-left {
    flex: 0 0 310px;
    width: 310px;
}

.cfg-spotlight-row .cfg-shape-panel {
    flex: 1;
    margin: 0;
}

.cfg-spotlight-row .cfg-shape-panel > .cfg-step-label {
    margin-top: 0;
}

/* Compact horizontal shape cards */
.cfg-spotlight-row .cfg-shape-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}

.cfg-spotlight-row .cfg-shape-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-align: left;
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
}

.cfg-spotlight-row .cfg-shape-icon {
    width: 50px;
    height: 38px;
    flex-shrink: 0;
}

.cfg-spotlight-row .cfg-shape-name { font-size: 0.88rem; }
.cfg-spotlight-row .cfg-shape-desc { display: none; }

.cfg-step-connector {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 1px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--color-muted);
    line-height: 1;
    user-select: none;
    transition: opacity 0.2s;
}

.cfg-step-connector::after { content: ''; }
.cfg-step-connector.is-equal::after { content: ''; }

.cfg-shape-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
}

.cfg-shape-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cfg-shape-overlay path {
    stroke: #F0EDE8 !important;
    stroke-width: 3px !important;
    vector-effect: non-scaling-stroke;
    fill: none !important;
}

.cfg-spotlight-row .cfg-summary {
    flex: 1;
    margin: 0;
    align-self: center;
}

.cfg-spotlight-left .cfg-face-change,
.cfg-spotlight-left .cfg-shape-change {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--cfg-age-color, var(--color-teal));
    border: 2px solid var(--cfg-age-color, var(--color-teal));
    border-radius: 50px;
    padding: 7px 16px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.cfg-spotlight-left .cfg-face-change:hover,
.cfg-spotlight-left .cfg-shape-change:hover {
    filter: brightness(0.88);
}

/* CSS chevron arrows on buttons */
.cfg-spotlight-left .cfg-face-change:not(.cfg-shape-change)::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: -1px;
}
.cfg-spotlight-left .cfg-shape-change::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2.5px solid #fff;
    border-top: 2.5px solid #fff;
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: -1px;
}

/* Buttons side by side */
.cfg-spotlight-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Boja dugmića prema uzrastu */
#cfg-faces-3plus { --cfg-age-color: var(--color-teal); }
#cfg-faces-4plus { --cfg-age-color: var(--color-coral); }
#cfg-faces-5plus { --cfg-age-color: var(--color-purple); }

.cfg-face-change {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-brown);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.15s;
}

.cfg-face-change:hover { opacity: 0.65; }

@media (max-width: 600px) {
    .cfg-spotlight-row { flex-direction: column; }
    .cfg-spotlight-left { width: 100%; flex: unset; }
    .cfg-step-connector { display: none; }
    .cfg-face-grid.has-selection .cfg-face-card.is-selected { max-width: 280px; }
    .cfg-spotlight-row .cfg-shape-card { width: 100%; }
    .cfg-spotlight-row .cfg-summary { align-self: stretch; }
}

.cfg-face-img {
    width: 100%;
    height: auto;
    display: block;
}

.cfg-face-img-wrap {
    position: relative;
    display: block;
}

.cfg-face-zoom {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-brown);
    opacity: 0;
    transition: opacity 0.18s;
    backdrop-filter: blur(2px);
}

.cfg-face-card:hover .cfg-face-zoom { opacity: 1; }

.cfg-face-zoom::after {
    content: 'Увећај слику';
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: rgba(30, 20, 10, 0.82);
    color: #fff;
    font-size: 0.7rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.cfg-face-zoom:hover::after { opacity: 1; }

@media (hover: none) {
    .cfg-face-zoom { opacity: 0.7; }
    .cfg-face-zoom::after { display: none; }
}

/* Lightbox */
.cfg-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(30, 20, 10, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
    cursor: pointer;
}

.cfg-lightbox[hidden] { display: none; }

.cfg-lightbox-inner {
    position: relative;
    display: inline-flex;
    max-width: min(88vw, 520px);
    max-height: 82vh;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    cursor: default;
}

.cfg-lightbox-img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    display: block;
}

.cfg-lightbox-inner .cfg-shape-overlay {
    opacity: 0.6;
}

.cfg-lightbox-inner .cfg-shape-overlay path {
    stroke-width: 3.5px !important;
}

.cfg-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.cfg-lightbox-close:hover { background: rgba(255,255,255,0.28); }

.cfg-face-placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: var(--color-bg-alt);
}

.cfg-face-name {
    display: block;
    padding: 10px 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-brown);
    line-height: 1.3;
}

.cfg-empty { color: var(--color-muted); font-style: italic; }

/* Shape grid */
/* Shape card fade-in animation */
@keyframes cfg-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cfg-shape-grid { display: flex; gap: 16px; flex-wrap: wrap; }

.cfg-shape-grid .cfg-shape-card {
    opacity: 0;
    animation: cfg-card-in 0.48s ease both;
}
.cfg-shape-grid .cfg-shape-card:nth-child(1) { animation-delay: 0.05s; }
.cfg-shape-grid .cfg-shape-card:nth-child(2) { animation-delay: 0.16s; }
.cfg-shape-grid .cfg-shape-card:nth-child(3) { animation-delay: 0.27s; }
.cfg-shape-grid .cfg-shape-card:nth-child(4) { animation-delay: 0.38s; }
.cfg-shape-grid .cfg-shape-card:nth-child(5) { animation-delay: 0.49s; }
.cfg-shape-grid .cfg-shape-card:nth-child(6) { animation-delay: 0.60s; }

.cfg-shape-card {
    flex: 1;
    min-width: 160px;
    max-width: 240px;
    background: #fff;
    border: 2.5px solid var(--color-muted);
    border-radius: var(--radius);
    padding: 20px 16px 16px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cfg-shape-card:hover { border-color: var(--color-brown); box-shadow: var(--shadow-hover); }

.cfg-shape-card.is-selected {
    border-color: var(--color-brown);
    box-shadow: 0 0 0 3px rgba(135, 96, 63, 0.2);
}

.cfg-shape-icon { width: 80px; height: 60px; opacity: 0.75; }
.cfg-shape-icon path { stroke-width: 0.22; }
.cfg-shape-icon svg { width: 100%; height: 100%; }
.cfg-shape-card.is-selected .cfg-shape-icon { opacity: 1; }

.cfg-shape-name {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-brown);
}

.cfg-shape-desc { font-size: 0.75rem; color: var(--color-text-soft); line-height: 1.3; }

/* Summary bar */
.cfg-summary { margin-top: 8px; }

.cfg-summary-inner {
    background: #fff;
    border: 2px solid var(--color-muted);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.cfg-summary-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-soft);
    margin-bottom: 4px;
}

.cfg-summary-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brown);
}

.cfg-summary-age-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    vertical-align: middle;
    margin-right: 4px;
    line-height: 1;
    flex-shrink: 0;
}
.cfg-summary-age-badge--teal   { background: var(--color-teal); }
.cfg-summary-age-badge--coral  { background: var(--color-coral); }
.cfg-summary-age-badge--purple { background: var(--color-purple); }

.cfg-summary-price-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cfg-summary-price {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-brown);
}

/* Loyalty режим — precrtana цена + 0 рсд; multi-face попуст — ~~600~~ 400 */
.cfg-price-orig {
    font-weight: 400;
    color: var(--color-muted);
    text-decoration: line-through;
}
.cfg-price-free {
    color: var(--color-brown);
    font-weight: 700;
}
.cfg-price-multi {
    color: var(--color-brown);
    font-weight: 700;
}

.cfg-atc-btn { white-space: nowrap; }

.cfg-atc-feedback {
    width: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 0 0;
}
.cfg-atc-feedback.is-error   { color: #c0392b; }
.cfg-atc-feedback[hidden]    { display: none; }

.cfg-added-msg {
    display: block;
    color: #4A9668;
    margin-bottom: 10px;
}

.cfg-added-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.cfg-btn-cart  { font-size: 0.85rem; padding: 8px 18px; }
.cfg-btn-more  { font-size: 0.85rem; padding: 8px 18px; }

.cfg-atc-btn.is-added {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loyalty free face i multi-face popust — prečrtana cena u draweru */
.shop-cart-item-discount-price {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-soft);
    line-height: 1.4;
    margin-bottom: 2px;
}
.shop-cart-item-discount-price s {
    color: var(--color-text-soft);
    opacity: 0.7;
}
.shop-cart-item-loyalty-price {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-soft);
    line-height: 1.4;
    margin-bottom: 2px;
}
.shop-cart-item-loyalty-price s {
    color: var(--color-text-soft);
    opacity: 0.7;
}
.shop-cart-item-loyalty-price strong {
    color: var(--color-brown);
}
li.sl-dl-loyalty-price s {
    color: var(--color-text-soft);
    opacity: 0.7;
}
li.sl-dl-loyalty-price strong {
    color: var(--color-brown);
}
li.sl-dl-ram-price {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-brown);
}

/* Block Cart DL meta — свако лице у засебном реду */
li.sl-dl-meta-line {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-soft);
    line-height: 1.5;
    list-style: none;
}
li.sl-dl-meta-line::before { content: none; }

/* Multi-face selection — confirmed faces bar */
.cfg-confirmed-bar {
    background: #FFFBF4;
    border: 1.5px solid #D4C5A9;
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 24px;
}
.cfg-confirmed-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cfg-confirmed-face {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--color-brown);
}
.cfg-confirmed-num  { font-weight: 700; flex-shrink: 0; }
.cfg-confirmed-name { font-weight: 700; }
.cfg-confirmed-shape { color: var(--color-text-soft); font-size: 0.85rem; }
.cfg-confirmed-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.cfg-confirmed-remove,
.cfg-confirmed-edit {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.cfg-confirmed-edit:hover { color: var(--color-brown); background: #f0ebe3; }
.cfg-confirmed-remove:hover { color: #c0392b; background: #fde8e8; }
/* Confirmed bar inside summary — no extra top margin needed */
.cfg-summary .cfg-confirmed-bar { margin-bottom: 12px; background: #FFFBF4; }

/* Summary section layout additions */
.cfg-summary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cfg-add-face-btn[hidden] { display: none; }

/* Price with savings */
.cfg-price-savings {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4A9668;
    margin-left: 4px;
}
.cfg-face-num {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--color-text-soft);
}

/* RAM section below DL summary box (sibling of cfg-summary-inner) */
.cfg-ram-section {
    margin-top: 12px;
}

/* Faces list — unified list of confirmed + pending faces */
.cfg-faces-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}
.cfg-face-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #FFFBF4;
    border: 1.5px solid #D4C5A9;
    border-radius: var(--radius);
    margin-bottom: 8px;
}
.cfg-face-row--pending {
    border-style: dashed;
    opacity: 0.85;
}
.cfg-face-row.is-editing {
    border-color: var(--color-brown);
    background: #FFF8EE;
}
.cfg-face-row-img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}
.cfg-face-row-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.cfg-face-row-thumb--empty {
    background: #EDE7DA;
    border-radius: 6px;
}
.cfg-face-row-info {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-brown);
    line-height: 1.4;
}
.cfg-face-row-label { font-weight: 700; }
.cfg-face-row-name  { font-weight: 700; }
.cfg-face-row-shape { color: var(--color-text-soft); font-size: 0.85rem; }
.cfg-face-row-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cfg-face-row-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 3px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1.3;
}
.cfg-face-row-edit-btn   { color: var(--color-brown);  font-weight: 600; }
.cfg-face-row-remove-btn { color: var(--color-muted); }
.cfg-face-row-edit-btn:hover   { background: #f0ebe3; color: var(--color-brown); }
.cfg-face-row-remove-btn:hover { background: #fde8e8; color: #c0392b; }
.cfg-face-row-editing-label {
    font-size: 0.78rem;
    color: var(--color-text-soft);
    font-style: italic;
    padding: 3px 8px;
}

/* Summary footer — price row + add-face button */
.cfg-summary-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cfg-summary-price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cfg-summary-price-row .cfg-summary-price {
    flex: 1;
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .cfg-face-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
    .cfg-shape-grid { gap: 10px; }
    .cfg-shape-card { min-width: 100px; padding: 14px 10px 12px; }
    .cfg-shape-icon { width: 60px; height: 45px; }
    .cfg-summary-inner { flex-direction: column; align-items: flex-start; }
    .cfg-summary-price-wrap { width: 100%; justify-content: space-between; }
    .cfg-summary-actions { width: 100%; }
}

@media (max-width: 480px) {
    .configurator-title { font-size: 1.7rem; }
    .cfg-age-tabs { gap: 8px; }
    .cfg-age-tab { padding: 8px 18px; }
    .cfg-face-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
    .cfg-face-name { font-size: 0.72rem; padding: 8px 6px; }
}


/* ================================================================
   НАПРАВИ СВОЈЕ ЛИЦЕ — страница
   ================================================================ */

.napravi-lice-page { padding: 48px 0 80px; }

/* Хедер странице */
.nl-page-header { text-align: center; max-width: 780px; margin: 0 auto 32px; }
.nl-intro { font-size: 1rem; color: #5C3D1E; line-height: 1.7; margin-top: 12px; }
.nl-intro p + p { margin-top: 12px; }

/* ── Слотови ─────────────────────────────────────────────────── */
.nl-slots { display: flex; flex-direction: column; gap: 24px; margin-bottom: 0; }

/* ── Направи још лица ───────────────────────────────────────── */
.nl-add-face-wrap {
    margin: 20px 0 28px;
    text-align: center;
}
.nl-add-face-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px dashed #E8956A;
    border-radius: 12px;
    color: #E8956A;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    width: 100%;
    justify-content: center;
    max-width: 500px;
}
.nl-add-face-btn:hover {
    background: #FDF0E6;
    border-color: #C96C3A;
    color: #C96C3A;
}
.nl-add-face-btn svg { flex-shrink: 0; }
.nl-add-face-incentive {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4AA8A0;
}

.nl-slot {
    border: 1.5px solid #D4C5A9;
    border-radius: 16px;
    padding: 28px;
    background: #FFFBF4;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.nl-slot--active  { border-color: #E8956A; box-shadow: 0 2px 12px rgba(232,149,106,.10); }
.nl-slot--done    { border-color: #4AA8A0; box-shadow: 0 2px 12px rgba(74,168,160,.10); }
.nl-slot--pending { border-color: #F5C842; box-shadow: 0 2px 12px rgba(245,200,66,.12); }
.nl-slot--locked  { opacity: 0.6; border-style: dashed; }

/* Наслов слота */
.nl-slot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.nl-slot-num {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5C3D1E;
}
.nl-slot-incentive { font-size: 0.88rem; color: #E8956A; font-weight: 600; }
.nl-slot-saving    { font-size: 0.82rem; color: #4AA8A0; font-weight: 500; }
.nl-slot-base-price {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-brown);
    letter-spacing: 0.02em;
    text-transform: none;  /* спречи uppercase наслеђе из .nl-slot-num */
}

/* Slot summary in header */
.nl-slot-summary {
    font-size: 0.82rem;
    font-weight: 700;
    color: #4AA8A0;
    margin-left: auto;
}

/* ── Тело слота: рам лево, пикер десно ───────────────────────── */
.nl-slot-body {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ── Рам / Upload колона ─────────────────────────────────────── */
.nl-frame-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* The frame label is the entire clickable / droppable area */
.nl-frame-label {
    position: relative;
    display: block;
    width: 260px;
    cursor: pointer;
    border-radius: 4px;
    background: #FFFFFF; /* neutrališe žućkasti odsjaj sepia filtera na unutrašnjosti rama */
}
.nl-frame-label.is-dragover .nl-frame-overlay {
    filter: sepia(0.18) saturate(1.25) brightness(1.02) drop-shadow(0 0 6px rgba(232,149,106,.5));
}

.nl-frame-overlay {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3;
    pointer-events: none;
    user-select: none;
    /* Загреј светли бреза-дрво: dodaj suptilnu toplinu, brightness svetli unutrašnjost */
    filter: sepia(0.18) saturate(1.25) brightness(1.07);
}
.nl-preview-photo {
    position: absolute;
    /* Inner cream area: 78% wide × 81% tall, offset 11.21% / 8.93% */
    top:    8.93%;
    left:   11.21%;
    width:  78.02%;
    height: 81.0%;
    object-fit: cover;
    z-index: 4; /* iznad rama (z:3) — PNG interior je opak, foto mora biti on top */
    border-radius: 1px;
}

/* Shape cut-line overlay — positioned over the photo, under the frame border */
.nl-shape-overlay[hidden] { display: none; }
.nl-shape-overlay {
    position: absolute;
    top:    8.93%;
    left:   11.21%;
    width:  78.02%;
    height: 81.0%;
    z-index: 5; /* iznad foto */
    pointer-events: none;
    opacity: 0.6;
}
.nl-shape-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
}
.nl-shape-overlay path {
    stroke: #F0EDE8 !important;
    stroke-width: 2px !important;
    vector-effect: non-scaling-stroke;
    fill: none !important;
}

/* Upload hint — centred over the frame interior */
.nl-upload-hint[hidden] { display: none; }
.nl-upload-hint {
    position: absolute;
    top: 8.93%; left: 11.21%;
    width: 78.02%; height: 81.0%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 8px;
    pointer-events: none; /* label handles the click */
}
.nl-upload-hint svg  { color: #C4A882; }
.nl-frame-label:hover .nl-upload-hint svg,
.nl-frame-label.is-dragover .nl-upload-hint svg { color: #E8956A; }
.nl-drop-main { font-size: 0.8rem; color: #5C3D1E; font-weight: 700; line-height: 1.3; }
.nl-drop-hint { font-size: 0.68rem; color: #927151; line-height: 1.4; }

/* DPI badge — below the frame */
.nl-res-badge {
    font-size: 0.7rem;
    text-align: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    max-width: 260px;
    width: 100%;
}
.nl-res--great { background: #E4F0DC; color: #3A7A2E; }
.nl-res--ok    { background: #FDF8E0; color: #7A6210; }
.nl-res--low   { background: #FDECEC; color: #C0392B; }

.nl-upload-error {
    font-size: 0.8rem;
    color: #C0392B;
    background: #FDECEC;
    border-radius: 8px;
    padding: 6px 10px;
    max-width: 260px;
    width: 100%;
    text-align: center;
}

/* Visually hidden file input — still triggerable via <label for> */
.nl-file-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0; opacity: 0;
}

/* ── Пикер: број делова + облик ──────────────────────────────── */
.nl-picker {
    flex: 1;
    min-width: 220px;
}

/* Disabled state — before photo is uploaded */
.nl-picker--disabled {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* Done / locked state — after confirmation, selection visible but not editable */
.nl-picker--done {
    pointer-events: none;
    user-select: none;
}

.nl-picker-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #927151;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

/* Size tabs */
.nl-size-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.nl-size-tab {
    padding: 6px 14px;
    border: 1.5px solid #D4C5A9;
    border-radius: 20px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #5C3D1E;
    cursor: pointer;
    transition: all 0.18s;
}
.nl-size-tab:hover   { border-color: #E8956A; color: #E8956A; }
.nl-size-tab.is-active {
    background: #5C3D1E;
    border-color: #5C3D1E;
    color: #fff;
}

/* Shape list — horizontal rows like cfg-spotlight */
.nl-shape-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}
.nl-shape-list[hidden] { display: none; }

.nl-shape-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 2px solid #D4C5A9;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.nl-shape-row:hover { border-color: #5C3D1E; box-shadow: 0 2px 8px rgba(92,61,30,.12); }
.nl-shape-row.is-selected {
    border-color: #5C3D1E;
    background: #FDF0E6;
    box-shadow: 0 0 0 2px rgba(92,61,30,.18);
}

.nl-shape-row-icon {
    width: 52px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
}
.nl-shape-row-icon svg { width: 100%; height: 100%; }
.nl-shape-row-icon path { stroke-width: 0.22; }
.nl-shape-row.is-selected .nl-shape-row-icon { opacity: 1; }

.nl-shape-name {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #5C3D1E;
}

.nl-picker-required {
    font-size: 0.82rem;
    color: #E8956A;
    margin-top: 6px;
    font-weight: 600;
}

/* Уклони дугме */
.nl-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #927151;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s;
}
.nl-remove-btn:hover { color: #C0392B; }

/* Потврди избор дугме */
.nl-confirm-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px 18px;
    font-size: 0.9rem;
}
.nl-confirm-btn[hidden] { display: none; }

/* Измени избор дугме */
.nl-edit-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    color: #927151;
    background: none;
    border: 1.5px solid #D4C5A9;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, color 0.15s;
    pointer-events: auto; /* override nl-picker--done inheritance */
}
.nl-edit-btn:hover { border-color: #87603f; color: #5C3D1E; }
.nl-edit-btn[hidden] { display: none; }

/* ── NL Cart & drawer thumbnail ─────────────────────────────── */
.nl-cart-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.nl-ct-frame {
    position: absolute;
    width: 44px;        /* portrait; height determined by overlay img */
}
.nl-ct-overlay {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.nl-ct-photo {
    position: absolute;
    top: 8.93%; left: 11.21%;
    width: 78.02% !important; height: 81% !important;
    object-fit: cover !important;
    z-index: 3; /* iznad overlay PNG (z:2) — PNG interior je opak, foto mora biti on top */
    border-radius: 1px;
}

/* 1 лице — по средини */
.nl-cart-thumb--1 .nl-ct-frame {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* 2 лица — лепезасто */
.nl-cart-thumb--2 .nl-ct-frame:nth-child(1) {
    top: 4px; left: 4px; z-index: 2;
    transform: rotate(-7deg);
    transform-origin: 50% 100%;
}
.nl-cart-thumb--2 .nl-ct-frame:nth-child(2) {
    top: 4px; left: 26px; z-index: 1;
    transform: rotate(7deg);
    transform-origin: 50% 100%;
    opacity: 0.8;
}

/* 3 лица — лепезасто */
.nl-cart-thumb--3 .nl-ct-frame:nth-child(1) {
    top: 4px; left: 0;  z-index: 3;
    transform: rotate(-10deg);
    transform-origin: 50% 100%;
}
.nl-cart-thumb--3 .nl-ct-frame:nth-child(2) {
    top: 2px; left: 16px; z-index: 2;
    transform: rotate(0deg);
}
.nl-cart-thumb--3 .nl-ct-frame:nth-child(3) {
    top: 4px; left: 32px; z-index: 1;
    transform: rotate(10deg);
    transform-origin: 50% 100%;
    opacity: 0.8;
}

/* Сетови у корпи — редни приказ, без ротације, без рама */
.nl-cart-thumb--set {
    width: 120px;
    height: 72px;
    display: flex;
    gap: 3px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative; /* reset absolute iz .nl-cart-thumb */
}
.nl-cart-thumb--set .nl-ct-frame {
    position: relative;
    flex: 1;
    min-width: 0;
    width: auto;
    transform: none !important;
    transform-origin: initial !important;
    opacity: 1 !important;
    z-index: auto !important;
    overflow: hidden;
    border-radius: 3px;
}
.nl-cart-thumb--set .nl-ct-photo {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
    z-index: 1;
}
.nl-cart-thumb--set .nl-ct-overlay { display: none !important; }

/* ── Ram sekcija ─────────────────────────────────────────────── */
/* DL stranica — RAM kao zaseban proizvod */
.dl-ram-section {
    background: #FFFBF4;
    border: 1.5px solid #D4C5A9;
    border-radius: 16px;
    padding: 24px 28px;
    margin-top: 40px;
    margin-bottom: 32px;
}
.dl-ram-action {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: auto;
}
.dl-ram-atc {
    white-space: nowrap;
    font-size: 0.88rem;
    padding: 10px 20px;
}

.nl-ram-section {
    background: #FFFBF4;
    border: 1.5px solid #D4C5A9;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 32px;
}
.nl-ram-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.nl-ram-img {
    width: 80px;
    height: auto;
    flex-shrink: 0;
    filter: sepia(0.18) saturate(1.25) brightness(1.07) drop-shadow(0 2px 6px rgba(92,61,30,.15));
}
.nl-ram-text { flex: 1; min-width: 180px; }
.nl-ram-text strong { display: block; font-size: 1rem; color: #5C3D1E; margin-bottom: 4px; }
.nl-ram-text p { font-size: 0.85rem; color: #927151; margin: 0; line-height: 1.5; }

/* Toggle */
.nl-ram-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
}
.nl-ram-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #5C3D1E;
}
.nl-ram-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.nl-toggle-track {
    display: inline-block;
    width: 46px;
    height: 26px;
    background: #D4C5A9;
    border-radius: 13px;
    position: relative;
    transition: background 0.2s;
}
.nl-ram-cb:checked + .nl-toggle-track { background: #4AA8A0; }
.nl-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: transform 0.2s;
}
.nl-ram-cb:checked + .nl-toggle-track .nl-toggle-thumb { transform: translateX(20px); }

/* ── Summary ─────────────────────────────────────────────────── */
.nl-summary {
    background: #FFFBF4;
    border: 1.5px solid #D4C5A9;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 16px;
}

/* Инлајн "Направи још лица" унутар summary boksa */
.nl-add-face-inline[hidden] { display: none; }
.nl-add-face-inline { margin-bottom: 20px; }
.nl-add-face-inline-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px dashed #E8956A;
    border-radius: 12px;
    color: #E8956A;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    width: 100%;
    justify-content: center;
}
.nl-add-face-inline-btn:hover {
    background: #FDF0E6;
    border-color: #C96C3A;
    color: #C96C3A;
}
.nl-add-face-inline-btn svg { flex-shrink: 0; }

.nl-breakdown { margin-bottom: 16px; }

.nl-bd-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
    color: #5C3D1E;
    padding: 4px 0;
}
.nl-bd-saving {
    font-size: 0.82rem;
    color: #4AA8A0;
    font-weight: 600;
    padding: 2px 0 6px;
}

.nl-summary-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid #F0E8DA;
    padding-top: 16px;
}
.nl-total-row { display: flex; align-items: baseline; gap: 8px; }
.nl-total-label { font-size: 0.85rem; color: #927151; font-weight: 600; }
.nl-total-price {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: #5C3D1E;
}
.nl-atc-btn { margin-left: auto; }
.nl-atc-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.nl-atc-btn.is-loading { opacity: 0.7; pointer-events: none; }

.nl-atc-feedback {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
}
.nl-atc-feedback.is-error   { background: #FDECEC; color: #C0392B; }
.nl-atc-feedback.is-success { background: #E4F0DC; color: #3A7A2E; }

.nl-success-msg     { display: block; font-weight: 700; margin-bottom: 10px; }
.nl-success-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.nl-footnote { font-size: 0.8rem; color: #927151; text-align: center; }

.shipping-note {
    font-size: 0.85rem;
    color: #927151;
    line-height: 1.4;
    margin: 0;
}

/* ── Crop modal ──────────────────────────────────────────────── */
.nl-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nl-crop-modal[hidden] { display: none; }

.nl-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}
.nl-crop-dialog {
    position: relative;
    z-index: 1;
    background: #FFFBF4;
    border-radius: 16px;
    width: min(96vw, 680px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.nl-crop-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #EDE3D5;
    flex-shrink: 0;
}
.nl-crop-dialog-title {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5C3D1E;
    margin: 0;
}
.nl-crop-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #927151;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s;
}
.nl-crop-close-btn:hover { color: #5C3D1E; }

.nl-crop-canvas-wrap {
    flex: 1;
    overflow: hidden;
    background: #1a1a1a;
    min-height: 300px;
}
.nl-crop-canvas-wrap img { display: block; max-width: 100%; }

.nl-crop-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 18px;
    border-top: 1px solid #EDE3D5;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}
.nl-crop-hint { font-size: 0.78rem; color: #927151; margin: 0; }
.nl-crop-dialog-footer #nl-crop-confirm { margin-left: auto; }
.nl-crop-hint--touch { display: none; }
@media (pointer: coarse) {
    .nl-crop-hint--mouse { display: none; }
    .nl-crop-hint--touch { display: block; }
}

.nl-crop-error {
    width: 100%;
    background: #FDECEC;
    color: #C0392B;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
}
.nl-crop-error[hidden] { display: none; }

/* Cropper.js overrides */
.cropper-view-box, .cropper-face { border-radius: 0; }
.cropper-line   { background-color: #E8956A; }
.cropper-point  { background-color: #E8956A; }
.cropper-dashed { border-color: rgba(232,149,106,.6); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nl-slot { padding: 20px 16px; }
    .nl-slot-body { flex-direction: column; gap: 20px; }
    .nl-frame-col { width: 100%; align-items: center; }
    .nl-frame-label { width: 200px; }
    .nl-picker { min-width: 0; width: 100%; }
    .nl-ram-inner { gap: 14px; }
    .nl-ram-img { width: 60px; }
    .nl-ram-toggle-label { margin-left: 0; width: 100%; justify-content: space-between; }
    .dl-ram-action { margin-left: 0; width: 100%; justify-content: space-between; }
    .nl-summary-footer { flex-direction: column; align-items: stretch; }
    .nl-atc-btn { margin-left: 0; width: 100%; justify-content: center; }
    .nl-total-row { justify-content: space-between; }
    .nl-crop-dialog { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    .nl-crop-canvas-wrap { min-height: 50vh; }
}

@media (max-width: 480px) {
    .nl-size-tabs { gap: 6px; }
    .nl-size-tab { padding: 5px 11px; font-size: 0.78rem; }
    .nl-shape-row { padding: 10px 12px; gap: 10px; }
    .nl-shape-row-icon { width: 40px; height: 30px; }
    .nl-shape-name { font-size: 0.85rem; }
}


/* ========================================
   Мој налог — My Account страница
   ======================================== */

/* ── Wrapper страница ───────────────────────────────────────────────────── */
.woocommerce-account .woocommerce {
    max-width: 960px;
    margin: 48px auto;
    padding: 0 24px;
    /* Flexbox уместо float — parent расте са садржајем, мени не пробија у футер */
    display: flex;
    align-items: flex-start;
    gap: 32px;
    min-height: 60vh; /* Минимална висина да футер остане доле */
}

/* ── Navigation (таб мени лево) ─────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
    width: 220px;
    flex-shrink: 0; /* Не смањује се кад нема простора */
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 20px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-muted);
    transition: background 0.15s, color 0.15s;
}

.woocommerce-MyAccount-navigation ul li:last-child a {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--color-bg);
    color: var(--color-brown);
    padding-left: 26px;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
    background: var(--color-brown);
    color: var(--color-white) !important;
    font-weight: 700;
    padding-left: 20px;
}

/* ── Content десно ──────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0; /* Спречава flex overflow код дугог текста */
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(92, 61, 30, 0.13);
    border: 1px solid rgba(92, 61, 30, 0.07);
    padding: 32px;
}

/* ── Историја поруџбина — табела ─────────────────────────────────────────── */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.woocommerce-orders-table th {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-coral);
    padding: 0 16px 12px 0;
    border-bottom: 1px solid var(--color-muted);
    text-align: left;
}

.woocommerce-orders-table td {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--color-muted);
    color: var(--color-text);
    vertical-align: middle;
}

.woocommerce-orders-table tbody tr:last-child td {
    border-bottom: none;
}

/* Дугме "Детаљи" у табели поруџбина */
.woocommerce-orders-table .button,
.woocommerce-orders-table a.button {
    display: inline-block;
    background: var(--color-brown);
    color: var(--color-white) !important;
    padding: 8px 18px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-btn);
    border: 2px solid var(--color-brown);
}

.woocommerce-orders-table .button:hover,
.woocommerce-orders-table a.button:hover {
    background: var(--color-white);
    color: var(--color-brown) !important;
}

/* ── Статуси поруџбина ──────────────────────────────────────────────────── */
.woocommerce-order-status {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    display: inline-block;
}

mark.order-status { background: transparent; }
mark.order-status.status-processing,
.wc-processing { background: #e8f5e9; color: #2e7d32; }
mark.order-status.status-completed,
.wc-completed   { background: #e3f2fd; color: #1565c0; }
mark.order-status.status-on-hold,
.wc-on-hold     { background: #fff8e1; color: #e65100; }
mark.order-status.status-cancelled,
.wc-cancelled   { background: #fce4ec; color: #c62828; }
mark.order-status.status-pending,
.wc-pending     { background: var(--color-bg); color: var(--color-brown); }

/* ── Форме (адреса, лични подаци) ───────────────────────────────────────── */
.woocommerce-address-fields .form-row label,
.woocommerce-EditAccountForm .form-row label,
.woocommerce-LostPassword .form-row label {
    font-weight: 600;
    color: var(--color-brown);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 4px;
}

.woocommerce-address-fields .form-row input,
.woocommerce-address-fields .form-row select,
.woocommerce-EditAccountForm .form-row input,
.woocommerce-EditAccountForm .form-row select,
.woocommerce-LostPassword .form-row input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-muted);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.woocommerce-address-fields .form-row input:focus,
.woocommerce-address-fields .form-row select:focus,
.woocommerce-EditAccountForm .form-row input:focus,
.woocommerce-LostPassword .form-row input:focus {
    border-color: var(--color-coral);
    outline: none;
    box-shadow: 0 0 0 3px rgba(232,149,106,0.12);
}

/* Save / Submit дугмад */
.woocommerce-address-fields button[type="submit"],
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-LostPassword button[type="submit"],
.woocommerce-Button,
.woocommerce button.button {
    background: var(--color-brown) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-brown) !important;
    border-radius: 50px !important;
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    cursor: pointer !important;
    transition: var(--transition-btn) !important;
    display: inline-block !important;
}

.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-LostPassword button[type="submit"]:hover,
.woocommerce button.button:hover {
    background: var(--color-white) !important;
    color: var(--color-brown) !important;
}

/* ── Детаљи поруџбине (view-order) ──────────────────────────────────────── */

/* Наслови адресних колона — смањити са h2 на h3 */
.woocommerce-order .woocommerce-column__title,
.woocommerce-order-details .woocommerce-column__title,
.woocommerce-customer-details .woocommerce-column__title {
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-brown) !important;
    margin: 24px 0 8px !important;
    text-transform: none !important;
}

/* ── Password change fieldset ───────────────────────────────────────────── */
.woocommerce-EditAccountForm fieldset {
    border: 1px solid var(--color-muted) !important;
    border-radius: var(--radius-sm) !important;
    padding: 20px 24px 8px !important;
    margin: 24px 0 16px !important;
    background: var(--color-bg) !important;
}

.woocommerce-EditAccountForm fieldset legend {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--color-coral) !important;
    padding: 0 8px !important;
}

/* Уклони bullet point маркере између поља */
.woocommerce-EditAccountForm fieldset .form-row::before,
.woocommerce-EditAccountForm fieldset > span,
.woocommerce-EditAccountForm fieldset > br {
    display: none !important;
}

/* ── Login форма на My Account ──────────────────────────────────────────── */
.woocommerce-account .u-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.woocommerce-form-login,
.woocommerce-form-register {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 32px;
}

/* ── My Account — Dashboard добродошлица ─────────────────────────────── */
.wc-dashboard-welcome {
    padding: 4px 0 8px;
}

.wc-dashboard-greeting {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--color-brown);
    margin-bottom: 10px;
}

.wc-dashboard-desc {
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 16px;
    line-height: 1.6;
}

.wc-dashboard-not-you {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-bottom: 0;
}

.wc-dashboard-not-you a {
    color: var(--color-muted);
    text-decoration: underline;
}

.wc-dashboard-not-you a:hover {
    color: var(--color-brown);
}

/* ── My Account — Login/Register форме ─────────────────────────────── */
.woocommerce-form-login h2,
.woocommerce-form-register h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-brown);
    margin-bottom: 20px;
}

/* ── Login/Register — сва поља у истом нивоу (label увек изнад инпута) ──── */
.woocommerce-form-login label:not(.woocommerce-form-login__rememberme),
.woocommerce-form-register label {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.password-input {
    display: block;
    width: 100%;
}

.show-password-input {
    display: none;
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    margin-bottom: 18px;
}

/* ── Login форма — ред са "Запамти ме" + дугме (спречи преклапање) ──────── */
.woocommerce-form-login p.form-row:not(.woocommerce-form-row--wide) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    float: none;
}

.woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    font-size: 0.92rem;
    color: var(--color-text);
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
    float: none;
    margin-left: auto;
}

.woocommerce-form-register p.form-row:has(.woocommerce-form-register__submit) {
    display: flex;
}

.woocommerce-LostPassword {
    margin-top: 14px;
}

/* Празан notices wrapper и даље заузима место у flex реду — уклони */
.woocommerce-notices-wrapper:empty {
    display: none;
}

/* ── Заборављена лозинка / Постави лозинку ───────────────────────────────── */
.woocommerce-ResetPassword {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 32px;
    max-width: 420px;
    width: 100%;
}

.woocommerce-ResetPassword > p:first-child {
    margin-bottom: 20px;
    color: var(--color-text);
}

.woocommerce-ResetPassword label {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

.woocommerce-ResetPassword input.input-text {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.woocommerce-ResetPassword .form-row {
    margin-bottom: 18px;
}

.woocommerce-ResetPassword .form-row:has(button.woocommerce-Button) {
    display: flex;
    margin-top: 8px;
    margin-bottom: 0;
}

.woocommerce-ResetPassword button.woocommerce-Button {
    float: none;
    margin-left: auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
        min-height: 0;
    }

    .woocommerce-MyAccount-navigation {
        width: 100%;
        margin-bottom: 20px;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
    }

    .woocommerce-MyAccount-navigation ul li {
        flex: 1 1 auto;
    }

    .woocommerce-MyAccount-navigation ul li a {
        text-align: center;
        border-bottom: none;
        border-right: 1px solid var(--color-muted);
        font-size: 0.85rem;
        padding: 10px 12px;
    }

    .woocommerce-account .u-columns {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   Моји новчићи — Loyalty страница
   ======================================== */

.loyalty-page {
    max-width: 560px;
}

.loyalty-page__eyebrow {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-gold);
    margin: 0 0 6px;
}

.loyalty-page__title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--color-brown);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.loyalty-page__desc {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* ── Трак новчића ─────────────────────────────────────────────────────── */
.loyalty-track {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.loyalty-track__coin {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
}

.loyalty-track__coin--filled {
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(92, 61, 30, 0.2);
    transition: transform 0.2s;
}

.loyalty-track__coin--filled:hover {
    transform: scale(1.06);
}

.loyalty-track__coin--empty {
    border: 2.5px dashed var(--color-muted);
    background: transparent;
}

/* ── Статус текст ─────────────────────────────────────────────────────── */
.loyalty-status {
    font-size: 1.05rem;
    color: var(--color-text);
    margin-bottom: 8px;
}

.loyalty-status strong {
    color: var(--color-brown);
    font-size: 1.15rem;
}

.loyalty-empty {
    font-size: 0.9rem;
    color: var(--color-brown);
    opacity: 0.6;
    margin-top: 8px;
}

.loyalty-pending {
    font-size: 0.85rem;
    color: var(--color-brown);
    opacity: 0.55;
    margin-top: 8px;
    font-style: italic;
}

/* ── Честитке кад > 6 ─────────────────────────────────────────────────── */
.loyalty-reward {
    background: linear-gradient(135deg, #fdf6e9 0%, #fef9f0 100%);
    border: 1.5px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-top: 8px;
    text-align: center;
}

.loyalty-reward__msg {
    font-size: 1.05rem;
    color: var(--color-brown);
    line-height: 1.6;
    margin-bottom: 20px;
}

.loyalty-reward__cta {
    display: inline-block;
    background: var(--color-brown);
    color: var(--color-white) !important;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    border: 2px solid var(--color-brown);
    transition: var(--transition-btn);
}

.loyalty-reward__cta:hover {
    background: var(--color-white);
    color: var(--color-brown) !important;
}

@media (max-width: 480px) {
    .loyalty-track__coin {
        width: 46px;
        height: 46px;
    }
    /* 3 колоне → 3+3 уместо 5+1 */
    .loyalty-track {
        display: grid;
        grid-template-columns: repeat(3, 46px);
        justify-content: center;
        gap: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   О нама
══════════════════════════════════════════════════════════════════ */

.o-nama-hero {
    width: 100%;
    max-height: 480px;
    overflow: hidden;
}

.o-nama-hero-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.o-nama-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 24px 80px;
}

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

.o-nama-header .section-label {
    color: var(--color-teal);
}

.o-nama-body p {
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 22px;
    color: var(--color-text);
}

.o-nama-body p:last-child {
    margin-bottom: 0;
}

.o-nama-facts {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid var(--color-muted);
}

.o-nama-facts-heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
    margin-bottom: 24px;
}

.o-nama-fact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.o-nama-fact-list li {
    padding: 14px 0 14px 32px;
    position: relative;
    border-bottom: 1px solid var(--color-muted);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
}

.o-nama-fact-list li:last-child {
    border-bottom: none;
}

.o-nama-fact-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-coral);
    font-weight: 700;
}

@media (max-width: 600px) {
    .o-nama-content {
        padding: 48px 20px 64px;
    }

    .o-nama-hero-img {
        height: 280px;
    }

    .o-nama-body p {
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Више од игре
══════════════════════════════════════════════════════════════════ */

/* ── Placeholder за слике ── */
.vog-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-muted);
    border-radius: var(--radius-lg);
    opacity: 0.35;
}

/* ── Стварне слике из медија ── */
.vog-hero-media .vog-section-img,
.vog-section-media .vog-section-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

/* ── Label варијанте ── */
.vog-label--teal  { color: var(--color-teal); }
.vog-label--gold  { color: var(--color-gold); }
.vog-label--coral { color: var(--color-coral); }

/* ── Hero ── */
.vog-hero {
    padding: 72px 0 56px;
}

.vog-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.vog-hero-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 24px;
    line-height: 1.1;
}

.vog-hero-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-soft);
    margin-bottom: 16px;
}

.vog-hero-text p:last-child { margin-bottom: 0; }

/* ── Sekcije sa slikom ── */
.vog-section {
    padding: 72px 0;
}

.vog-section--alt {
    background: var(--color-bg-alt);
}

.vog-section-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.vog-section--reverse .vog-section-inner {
    direction: rtl;
}

.vog-section--reverse .vog-section-inner > * {
    direction: ltr;
}

.vog-section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.vog-section-text .section-label {
    margin-bottom: 8px;
}

.vog-section-text p:not(.section-label) {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-soft);
    margin-bottom: 16px;
}

.vog-section-text p:last-of-type {
    margin-bottom: 28px;
}

.vog-section-text .btn {
    margin-top: 4px;
}

/* ── Секција без слике (Solo) ── */
.vog-section--solo {
    text-align: center;
}

.vog-solo-inner {
    max-width: 640px;
    margin: 0 auto;
}

.vog-solo-inner .section-label {
    display: block;
    margin-bottom: 8px;
}

.vog-solo-inner .vog-section-title {
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.vog-solo-inner p:not(.section-label) {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-soft);
    margin-bottom: 14px;
}

/* ── Завршна секција ── */
.vog-closing {
    padding: 80px 0;
    background: var(--color-bg-alt);
    text-align: center;
}

.vog-closing-inner {
    max-width: 680px;
    margin: 0 auto;
}

.vog-closing-headline {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 32px;
    line-height: 1.2;
}

.vog-closing-lines p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-soft);
    margin-bottom: 8px;
}

.vog-cta-box {
    margin-top: 48px;
    padding: 40px 48px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.vog-cta-box-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 12px;
}

.vog-cta-box p {
    font-size: 1rem;
    color: var(--color-text-soft);
    margin-bottom: 24px;
    line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .vog-hero-inner,
    .vog-section-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .vog-section--reverse .vog-section-inner {
        direction: ltr;
    }

    .vog-hero-media { order: -1; }

    .vog-placeholder {
        aspect-ratio: 16 / 9;
        max-height: 280px;
    }

    .vog-hero-media .vog-section-img,
    .vog-section-media .vog-section-img {
        aspect-ratio: 16 / 9;
        max-height: 280px;
    }

    .vog-hero-title { font-size: 2rem; }
    .vog-closing-headline { font-size: 1.4rem; }
}

@media (max-width: 600px) {
    .vog-hero { padding: 48px 0 40px; }
    .vog-section { padding: 48px 0; }
    .vog-closing { padding: 56px 0; }

    .vog-cta-box {
        padding: 28px 24px;
    }

    .vog-hero-title { font-size: 1.7rem; }
}

/* ── Сакри "Save X рсд" badge у Block Cart-у ── */
.wc-block-components-sale-badge,
.wc-block-components-product-sale-badge {
    display: none !important;
}

/* ── Wishlist count badge ── */
.wishlist-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--color-coral);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
}

/* ── Wishlist page ── */
.wishlist-page {
    padding: 48px 0 80px;
}

.wishlist-header {
    margin-bottom: 40px;
}

.wishlist-title {
    font-family: 'Nunito', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-brown);
    text-transform: uppercase;
    margin-bottom: 10px;
}

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

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


.wishlist-loading {
    color: var(--color-text-soft);
    grid-column: 1 / -1;
}

.wishlist-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 0;
    color: var(--color-text-soft);
}

.wl-card {
    background: var(--color-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(92,61,30,0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(92,61,30,0.12);
}

.wl-card--removing {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.wl-card-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 160px;
    overflow: hidden;
}

.wl-card-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wl-card-gallery-placeholder {
    background: var(--color-bg-alt);
}

.wl-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.wl-card-parts {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.wl-card-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-brown);
    margin: 0 0 8px;
}

.wl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
}

.wl-card-price {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-brown);
}

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

.wl-card-actions .btn {
    font-size: 0.82rem;
    padding: 9px 16px;
}

.wl-oos {
    font-size: 0.82rem;
    color: var(--color-text-soft);
}

.wl-card-link {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-brown);
    text-decoration: none;
    margin-top: 12px;
    display: inline-block;
    border-top: 1px solid var(--color-divider, #EAE0D5);
    padding-top: 12px;
}

.wl-card-link:hover { text-decoration: underline; }

/* ── Blog ─────────────────────────────────────────────────────────────────── */

.blog-page {
    padding: 64px 0 80px;
}

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

.blog-title {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--color-brown);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 36px;
}

.blog-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.blog-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.11);
}

.blog-card-img-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.04);
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 28px;
    gap: 10px;
}

.blog-card-date {
    font-size: 0.8rem;
    color: var(--color-text-soft);
    margin: 0;
}

.blog-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-brown);
    margin: 0;
    line-height: 1.35;
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card-title a:hover {
    text-decoration: underline;
}

.blog-card-excerpt {
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.blog-card-link {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-brown);
    text-decoration: none;
    margin-top: 6px;
    align-self: flex-start;
}

.blog-card-link:hover {
    text-decoration: underline;
}

.blog-pagination {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}

/* ── Single post ──────────────────────────────────────────────────────────── */

.single-post-page {
    padding: 64px 0 80px;
}

.single-post-page .single-post {
    max-width: 780px;
    margin: 0 auto;
}

.single-post-header {
    margin-bottom: 36px;
}

.single-post-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-brown);
    line-height: 1.25;
    margin: 0 0 12px;
}

.single-post-meta {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-post-sep {
    opacity: 0.5;
}

.single-post-thumb {
    margin-bottom: 40px;
    border-radius: var(--radius);
    overflow: hidden;
}

.single-post-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.single-post-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
}

.single-post-content h2 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-brown);
    margin: 2em 0 0.6em;
}

.single-post-content h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-brown);
    margin: 1.6em 0 0.5em;
}

.single-post-content p {
    margin: 0 0 1.2em;
}

.single-post-content ul,
.single-post-content ol {
    margin: 0 0 1.2em 1.4em;
}

.single-post-content li {
    margin-bottom: 0.4em;
}

.single-post-content a {
    color: var(--color-brown);
    font-weight: 600;
}

.single-post-content a:hover {
    text-decoration: underline;
}

.single-post-back {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--color-divider, #EAE0D5);
}

.single-post-back-link {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-brown);
    text-decoration: none;
}

.single-post-back-link:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .blog-title {
        font-size: 1.8rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .single-post-title {
        font-size: 1.5rem;
    }
}

/* ========================================
   Услови куповине и приватност — legal страница
   ======================================== */

.legal-page {
    padding: 48px 0 80px;
}

.legal-article .page-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-brown);
    line-height: 1.15;
    margin: 0 0 28px;
    max-width: 820px;
}

.legal-content {
    max-width: 820px;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.75;
}

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

.legal-content strong {
    color: var(--color-brown);
}

.legal-content a {
    color: var(--color-coral);
    text-decoration: underline;
    text-decoration-color: rgba(232, 149, 106, 0.4);
    text-underline-offset: 2px;
}

.legal-content a:hover {
    color: var(--color-brown);
}

.legal-content ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.legal-content ul li {
    margin-bottom: 8px;
}

.legal-content hr.wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-muted);
    margin: 40px 0;
}

.legal-part-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-coral);
    margin: 8px 0 24px;
}

.legal-section-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-brown);
    margin: 36px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--color-muted);
}

.legal-content > .legal-section-title:first-of-type,
.legal-part-title + .legal-section-title {
    border-top: none;
    padding-top: 0;
    margin-top: 8px;
}

.legal-subsection-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brown);
    margin: 20px 0 10px;
}

@media (max-width: 600px) {
    .legal-article .page-title {
        font-size: 1.5rem;
    }

    .legal-content {
        font-size: 0.95rem;
    }
}