/* ============================================================================
   SKIN: SEXSHOP  ·  v2.0  ·  Clean Minimal (Scala-style)
   Biele pozadie, čierna typografia, monochróm, ostré rohy (0 radius),
   jemné tiene, veľa vzduchu, neutrálny sans. Žiadne gradienty, žiadny pop.
   Načíta sa PO frontend.css + layout-renderer.css → override premenných a selektorov.
   ============================================================================ */

/* ============================================================================
   1. CSS PREMENNÉ — clean minimal (platí aj pod .dark-mode → svetlý look)
   ============================================================================ */
body,
body.dark-mode,
body.light-mode {
    /* POZADIA */
    --bg-primary:      #FFFFFF;
    --bg-secondary:    #FFFFFF;
    --bg-tertiary:     #F5F5F5;
    --bg-card:         #FFFFFF;
    --bg-card-hover:   #FFFFFF;
    --bg-elevated:     #FFFFFF;

    /* TEXT */
    --text-primary:    #000000;
    --text-secondary:  #333333;
    --text-muted:      #666666;

    /* OKRAJE */
    --border-color:    #E6E6E6;
    --border-hover:    #000000;

    /* BRAND = čierna (bez farebného akcentu, ako Scala) */
    --primary:         #000000;
    --primary-dark:    #000000;
    --primary-light:   #333333;
    --secondary:       #000000;
    --secondary-light: #333333;
    --accent-primary:  #000000;
    --accent-secondary:#000000;

    /* STAVY (nenápadné) */
    --success:         #1F7A44;
    --warning:         #B26A00;
    --danger:          #C0392B;
    --sale:            #C0392B;   /* zľava — jediná dovolená farba, decentná červená */

    /* NAVBAR / INPUT */
    --navbar-bg:       #FFFFFF;
    --input-bg:        #FFFFFF;

    /* TIENE — jemné, sivé (nie farebné) */
    --shadow-sm:       0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:       0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:       0 6px 20px rgba(0,0,0,0.10);
    --shadow-glow:     0 2px 8px rgba(0,0,0,0.12);
    --shadow-card:     0 1px 6px rgba(0,0,0,0.07);

    /* RADIUS — ostré rohy (Scala podpis) */
    --radius-sm:       0px;
    --radius-md:       0px;
    --radius-lg:       0px;
    --radius-xl:       0px;
    --radius-full:     0px;

    /* GRADIENTY — žiadne (ploché čierne/biele) */
    --gradient-brand:     #000000;
    --gradient-brand-r:   #000000;
    --gradient-pop-warm:  #F5F5F5;
    --gradient-pop-soft:  #F5F5F5;

    /* GLASS / SCROLLBAR */
    --glass-bg:        #FFFFFF;
    --glass-border:    #E6E6E6;
    --glass-blur:      none;
    --scrollbar-track: #F5F5F5;
    --scrollbar-thumb: #CCCCCC;

    /* PRECHODY */
    --transition-fast:   0.15s ease;
    --transition-smooth: 0.2s ease;
    --transition-slow:   0.3s ease;
    --transition-bounce: 0.2s ease;
    --ease-bounce:       ease;

    /* FONTY — neutrálny sans (Inter, self-host v theme) */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-logo:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ============================================================================
   2. SCROLLBAR
   ============================================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F5F5F5; }
::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #999999; }
::selection { background: #000; color: #fff; }

/* ============================================================================
   3. BASE — biely, čistý
   ============================================================================ */
html,
body,
body.dark-mode,
body.light-mode {
    background: #FFFFFF !important;
    color: #333333 !important;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
}
body::before { display: none !important; content: none !important; }  /* zruš pop mesh */
a { color: #000000; text-decoration: none; }
a:hover { color: #000000; text-decoration: underline; }
img { border-radius: 0 !important; }

/* ============================================================================
   4. TYPOGRAFIA — čierne nadpisy, mixed case, 600–700
   ============================================================================ */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .pd-title,
.category-header h1, .cat-header-title,
.footer-title, .giga-footer h4, .giga-footer h3,
.modal-title, .checkout-step-title, .newsletter-section h2 {
    font-family: var(--font-display) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}
.section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; margin-bottom: 1.5rem !important; }
.hero-title    { font-size: clamp(2rem, 4.5vw, 3.2rem) !important; line-height: 1.1 !important; }
.section-subtitle, .overline {
    text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
    font-size: 0.75rem; color: #666666 !important;
}

/* LOGO — čistý wordmark, čierny, bez gradientu */
.nav-logo-text, .navbar-brand, .logo-text {
    font-family: var(--font-logo) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
}

.product-card-name, .cat-card-name, .category-card-name {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: #000000 !important;
}

/* ============================================================================
   5. TLAČIDLÁ — čierne, obdĺžnikové, ostré rohy
   ============================================================================ */
.btn, .btn-primary, .hero-cta, .cta-btn, .add-to-cart-btn,
.newsletter-form button, .btn-shop, button.btn-buy, .checkout-btn {
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none;
    transition: background var(--transition-fast), color var(--transition-fast) !important;
}
.btn-primary, .hero-cta, .add-to-cart-btn, .newsletter-form button,
.btn-shop, button.btn-buy, .checkout-btn, .cta-btn.primary {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 1px solid #000000 !important;
    box-shadow: none !important;
}
.btn-primary:hover, .hero-cta:hover, .add-to-cart-btn:hover, .newsletter-form button:hover,
.btn-shop:hover, button.btn-buy:hover, .checkout-btn:hover, .cta-btn.primary:hover {
    background: #333333 !important;
    color: #FFFFFF !important;
    transform: none;
    filter: none;
}
.btn-secondary, .cta-btn.secondary, .btn-outline {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    border-radius: 0 !important;
}
.btn-secondary:hover, .cta-btn.secondary:hover, .btn-outline:hover {
    background: #000000 !important;
    color: #FFFFFF !important;
}

/* ============================================================================
   6. NAVBAR / HEADER — biely, minimal, tenký spodný okraj
   ============================================================================ */
.navbar, .site-header, header.main-header, .nav-main {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid #E6E6E6 !important;
    box-shadow: none !important;
}
.navbar.scrolled, .site-header.scrolled { box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important; }

.announcement-bar, .topbar, .top-bar {
    background: #000000 !important;
    color: #FFFFFF !important;
    font-size: 0.8rem; letter-spacing: 0.03em;
}
.announcement-bar a, .topbar a { color: #FFFFFF !important; }

.age-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border: 1px solid rgba(255,255,255,0.5); border-radius: 0;
    color: #fff; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.06em;
}

.nav-categories, .nav-category-bar { background: #FFFFFF !important; border-bottom: 1px solid #E6E6E6; }
.nav-category-link { font-weight: 500 !important; color: #000000 !important; border-radius: 0; text-transform: none; }
.nav-category-link:hover { color: #000000 !important; background: transparent !important; text-decoration: underline; }
.mega-dropdown, .nav-mega {
    background: #FFFFFF !important;
    border: 1px solid #E6E6E6 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
.mega-dropdown .cat-mega-item:hover { background: #F5F5F5 !important; border-radius: 0; }

.search-bar, .nav-search, .header-search input, .search-input {
    border-radius: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
}
.search-bar:focus-within, .search-input:focus {
    border-color: #000000 !important;
    box-shadow: none !important;
}
.cart-count, .wishlist-count, .badge-count {
    background: #000000 !important; color: #FFFFFF !important; border-radius: 0 !important;
}

/* ============================================================================
   7. HERO — čistý, svetlý, bez animácií a gradientov
   ============================================================================ */
.hero-section, .hero { position: relative; overflow: hidden; background: #F5F5F5 !important; }
.hero-bg-gradient, .hero-bg {
    background: #F5F5F5 !important;
    background-image: none !important;
    animation: none !important;
}
.hero-section::after { display: none !important; content: none !important; }
.hero-title { color: #000000 !important; position: relative; z-index: 3; }
.hero-subtitle {
    color: #333333 !important; position: relative; z-index: 3;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important; font-weight: 400 !important;
}
.hero-content { position: relative; z-index: 3; }
.hero-badge {
    display: inline-block; padding: 5px 12px; border-radius: 0;
    background: #000; color: #fff; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem;
}
.hero-floating-cards .float-card, .hero-floating-cards .product-card {
    border-radius: 0 !important; box-shadow: var(--shadow-md) !important; animation: none !important;
}

/* ============================================================================
   8. SEKCIE
   ============================================================================ */
.section { padding: clamp(40px, 6vw, 88px) 0 !important; }
.section.alt, .section-soft { background: #F5F5F5 !important; }
.container, .section-container { max-width: 1360px !important; }

/* ============================================================================
   9. PRODUCT CARD — bez okraja, jemný tieň, ostré rohy, 1:1 obrázok
   ============================================================================ */
.product-card {
    background: #FFFFFF !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden;
    transition: box-shadow var(--transition-smooth) !important;
}
.product-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-lg) !important;
    border: none !important;
}
.product-card-img, .product-card .card-img { aspect-ratio: 1 / 1; overflow: hidden; background: #F5F5F5; }
.product-card-img img, .product-card .card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--transition-slow) !important;
}
.product-card:hover .product-card-img img { transform: scale(1.03); }

.product-card-body { padding: 14px 16px 18px !important; }
.price-current, .product-card-price .current, .product-price {
    color: #000000 !important; font-weight: 700 !important; font-size: 1.05rem !important;
}
.price-original, .product-card-price .original { color: #999999 !important; text-decoration: line-through; font-weight: 400; }

/* badge — minimalistický, obdĺžnikový */
.product-badges span, .product-badge, .badge-new, .badge-sale, .badge-top {
    border-radius: 0 !important;
    font-weight: 600 !important; text-transform: uppercase;
    letter-spacing: 0.04em; font-size: 0.65rem;
    padding: 3px 8px !important;
    animation: none !important;
}
.badge-new  { background: #000000 !important; color: #FFFFFF !important; }
.badge-sale { background: var(--sale) !important; color: #FFFFFF !important; }
.badge-top  { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000 !important; }

/* quick actions — biele, tenký okraj */
.product-card-actions { gap: 6px; }
.product-card-actions button, .product-card-actions a, .quick-action {
    background: #FFFFFF !important;
    backdrop-filter: none;
    border: 1px solid #E6E6E6 !important;
    border-radius: 0 !important;
    color: #000000 !important;
    transition: background var(--transition-fast), color var(--transition-fast) !important;
}
.product-card-actions button:hover, .product-card-actions a:hover, .quick-action:hover {
    background: #000000 !important; color: #FFFFFF !important; transform: none;
}

/* ============================================================================
   10. KATEGÓRIOVÉ KARTY — čisté, ostré, jemný tieň
   ============================================================================ */
.cat-card, .category-card {
    background: #FFFFFF !important;
    border-radius: 0 !important;
    border: 1px solid #E6E6E6 !important;
    box-shadow: none !important;
    transition: box-shadow var(--transition-smooth) !important;
    overflow: hidden;
}
.cat-card:hover, .category-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-md) !important;
}
.cat-card-icon, .category-card-icon {
    width: 56px; height: 56px; display: grid; place-items: center;
    border-radius: 0;
    background: #F5F5F5;
    font-size: 1.6rem;
    transition: none;
}
.cat-card:hover .cat-card-icon, .category-card:hover .category-card-icon {
    transform: none; background: #EDEDED; color: #000;
}

/* ============================================================================
   11. FEATURES / USP BAR — nenápadný riadok
   ============================================================================ */
.features-grid { gap: 16px; }
.feature-item {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none;
}
.feature-item:hover { transform: none; box-shadow: none !important; }
.feature-item i, .feature-item .feature-icon {
    color: #000000 !important;
    background: transparent;
    border-radius: 0;
    width: auto; height: auto;
    font-size: 1.4rem;
}

/* ============================================================================
   12. NEWSLETTER — čierny blok, biely text, obdĺžnikové pole
   ============================================================================ */
.newsletter-section {
    background: #000000 !important;
    border-radius: 0 !important;
    color: #FFFFFF !important;
}
.newsletter-section h2, .newsletter-section p { color: #FFFFFF !important; }
.newsletter-form input {
    border-radius: 0 !important;
    border: 1px solid #FFFFFF !important;
    background: #FFFFFF !important;
    color: #000 !important;
}

/* ============================================================================
   13. KATEGÓRIA / FILTRE / GRID
   ============================================================================ */
.category-header, .cat-header {
    background: #F5F5F5 !important;
    border-radius: 0 !important;
}
.category-filters, .filter-sidebar {
    background: #FFFFFF !important;
    border: none !important;
    border-right: 1px solid #E6E6E6 !important;
    border-radius: 0 !important;
}
.filter-chip, .subcategory-chip, .active-filter {
    border-radius: 0 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #CCCCCC !important;
    transition: all var(--transition-fast);
}
.filter-chip:hover, .subcategory-chip:hover { background: #000000 !important; color: #FFFFFF !important; border-color: #000 !important; }
.sort-select, .view-toggle button { border-radius: 0 !important; border: 1px solid #CCCCCC !important; }

/* ============================================================================
   14. PRODUKTOVÁ STRÁNKA
   ============================================================================ */
.pd-gallery img, .product-gallery-main img { border-radius: 0 !important; }
.pd-thumb, .gallery-thumb { border-radius: 0 !important; border: 1px solid #E6E6E6; }
.pd-thumb.active, .gallery-thumb.active { border-color: #000000 !important; }
.pd-price, .product-detail-price { color: #000000 !important; font-weight: 700 !important; }
.variant-swatch, .pd-variant-option {
    border-radius: 0 !important;
    border: 1px solid #CCCCCC !important;
    transition: all var(--transition-fast);
}
.variant-swatch.active, .pd-variant-option.active { border-color: #000000 !important; box-shadow: none; }
.product-tabs .tab-btn, .pd-tab { border-radius: 0 !important; font-weight: 600; border-bottom: 2px solid transparent; }
.product-tabs .tab-btn.active, .pd-tab.active { background: transparent !important; color: #000000 !important; border-bottom: 2px solid #000 !important; }

.pd-usp-bar { display: flex; gap: 24px; flex-wrap: wrap; }
.pd-usp-bar .pd-usp {
    display: flex; align-items: center; gap: 8px;
    background: transparent; border-radius: 0;
    padding: 8px 0; font-weight: 500; color: #333333;
}
.pd-usp-bar .pd-usp i { color: #000000; }

/* ============================================================================
   15. CHECKOUT — čisté kroky, obdĺžnikové
   ============================================================================ */
.checkout-steps, .checkout-progress { gap: 8px; }
.checkout-step, .checkout-progress-step {
    border-radius: 0 !important;
    background: #F5F5F5 !important;
    color: #666666 !important;
    font-weight: 600;
}
.checkout-step.active, .checkout-progress-step.active {
    background: #000000 !important; color: #FFFFFF !important;
}
.checkout-step.done, .checkout-progress-step.completed { color: #000000 !important; }
.checkout-summary, .order-summary {
    background: #FFFFFF !important;
    border: 1px solid #E6E6E6 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.checkout-reassurance {
    background: #F5F5F5; border-radius: 0;
    padding: 12px 16px; color: #333333; font-size: 0.9rem;
}

input:not([type=checkbox]):not([type=radio]), select, textarea, .form-control {
    border-radius: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
    color: #000000 !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: #000000 !important;
    box-shadow: none !important;
    outline: none;
}

/* ============================================================================
   16. FOOTER — čierny, čistý, viac-stĺpcový
   ============================================================================ */
.giga-footer, .site-footer, footer.main-footer {
    background: #000000 !important;
    color: #AAAAAA !important;
}
.giga-footer a, .site-footer a { color: #CCCCCC !important; }
.giga-footer a:hover, .site-footer a:hover { color: #FFFFFF !important; text-decoration: underline; }
.giga-footer h3, .giga-footer h4, .footer-title { color: #FFFFFF !important; }
.footer-social a {
    background: transparent; border: 1px solid #444; border-radius: 0;
    width: 38px; height: 38px; display: grid; place-items: center;
    transition: all var(--transition-fast);
}
.footer-social a:hover { background: #FFFFFF; color: #000 !important; }
.payment-icons span, .payment-badge {
    background: #FFFFFF; border-radius: 0; padding: 4px 8px; color: #000;
}
.footer-age {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #444; border-radius: 0;
    padding: 4px 10px; font-weight: 600; font-size: 0.75rem; color: #ccc;
}

/* ============================================================================
   17. 18+ MODÁL — biely box, čierne tlačidlo, ostré rohy
   ============================================================================ */
.pb-popup-modal, .popup-modal, .modal-overlay, .age-gate-overlay { backdrop-filter: none; }
.pb-popup-modal .modal-box, .popup-modal-content, .modal-content, .age-gate-box {
    border-radius: 0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    border: 1px solid #E6E6E6 !important;
}
.age-gate-overlay {
    position: fixed; inset: 0; z-index: 99999; display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.8);
}
.age-gate-overlay.show { display: flex; }
.age-gate-box { max-width: 420px; margin: 20px; padding: 40px 32px; text-align: center; }
.age-gate-box .age-logo {
    font-family: var(--font-logo); font-weight: 700; font-size: 1.4rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: #000; margin-bottom: 10px;
}
.age-gate-box h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 10px; color: #000; }
.age-gate-box p { color: #555; margin-bottom: 24px; font-size: 0.95rem; }
.age-gate-actions { display: flex; gap: 12px; justify-content: center; }
.age-gate-actions .btn-yes {
    background: #000; color: #fff; border: 1px solid #000;
    border-radius: 0; padding: 12px 28px; font-weight: 600; cursor: pointer;
    transition: background var(--transition-fast);
}
.age-gate-actions .btn-yes:hover { background: #333; }
.age-gate-actions .btn-no {
    background: #fff; color: #000; border: 1px solid #000;
    border-radius: 0; padding: 12px 28px; font-weight: 600; cursor: pointer;
}
.age-gate-actions .btn-no:hover { background: #000; color: #fff; }

/* ============================================================================
   18. SCROLL REVEAL — veľmi jemný (Scala je pokojná)
   ============================================================================ */
.fade-section, [data-animation] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.fade-section.in-view, [data-animation].in-view { opacity: 1; transform: none; }

/* ============================================================================
   19. RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
    .product-grid, .products-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
    .product-grid, .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .section { padding: 36px 0 !important; }
}

/* ============================================================================
   20. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .fade-section, [data-animation] { transition: none !important; }
    * { scroll-behavior: auto !important; }
}