/*
 Theme Name:   Blocksy Child - Magnetky
 Theme URI:    https://tvujmagnet.cz
 Description:  Child theme pro Magnetky e-shop s moderním organickým designem
 Author:       Magnetky Team
 Template:     blocksy
 Version:      2.1.2
 Text Domain:  blocksy-child
*/

/* ==========================================================================
   FORCE LIGHT MODE - prevent dark mode on mobile devices
   ========================================================================== */
:root {
    color-scheme: light only;
}

/* ==========================================================================
   SELF-HOSTED FONTS - eliminates external Google Fonts requests
   ========================================================================== */

/* DM Serif Display - Regular */
@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/dm-serif-display-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/dm-serif-display-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus Jakarta Sans - all weights (400, 500, 600, 700) */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('./assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('./assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   BAREVNÁ PALETA - Soft & Organic
   ========================================================================== */

:root {
    /* Primární barvy - teplejší korálová */
    --magnetky-primary: #E07A5F;
    --magnetky-primary-dark: #C65D45;
    --magnetky-primary-light: #F4A582;
    --magnetky-primary-glow: rgba(224, 122, 95, 0.25);

    /* Sekundární barvy */
    --magnetky-secondary: #F2CC8F;
    --magnetky-accent: #81B29A;
    --magnetky-accent-light: #A8D4BE;

    /* Neutrální barvy - měkčí tóny */
    --magnetky-dark: #2D3142;
    --magnetky-dark-soft: #4F5D75;
    --magnetky-light: #FAF8F5;
    --magnetky-cream: #F5F0E8;
    --magnetky-white: #FFFFFF;

    /* Funkční barvy */
    --magnetky-success: #81B29A;
    --magnetky-error: #E07A5F;
    --magnetky-warning: #F2CC8F;

    /* Typografie */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Stíny - soft organic */
    --shadow-soft: 0 4px 20px rgba(45, 49, 66, 0.08);
    --shadow-medium: 0 8px 40px rgba(45, 49, 66, 0.12);
    --shadow-glow: 0 8px 30px var(--magnetky-primary-glow);

    /* Přechody */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Border radius - organic shapes */
    --radius-soft: 20px;
    --radius-round: 50px;
}

/* ==========================================================================
   MAGNETKY UPLOAD AREA - Custom styly pro upload fotek
   ========================================================================== */

.magnetky-upload-wrapper {
    margin: 20px 0;
    padding: 30px;
    border: 3px dashed var(--magnetky-secondary);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--magnetky-light) 0%, var(--magnetky-white) 100%);
}

.magnetky-upload-wrapper:hover {
    border-color: var(--magnetky-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(224, 122, 95, 0.15);
}

.magnetky-upload-wrapper label {
    display: block;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 18px;
    color: var(--magnetky-dark);
}

.magnetky-upload-wrapper input[type="file"] {
    margin: 15px 0;
}

/* Photo preview */
.magnetky-photo-preview {
    margin-top: 20px;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}

.magnetky-photo-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 4px solid var(--magnetky-white);
}

.magnetky-photo-preview.shape-circle img {
    border-radius: 50%;
}

.magnetky-photo-preview.shape-heart img {
    clip-path: path('M50,15 C30,-5 0,15 0,40 C0,65 50,95 50,95 C50,95 100,65 100,40 C100,15 70,-5 50,15');
}

/* Cart thumbnail */
.magnetky-cart-thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 12px;
    border: 2px solid var(--magnetky-light);
}

/* Required field indicator */
.magnetky-required {
    color: var(--magnetky-error);
    margin-left: 4px;
    font-weight: 700;
}

/* Upload button styling */
.magnetky-upload-btn {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--magnetky-primary) 0%, var(--magnetky-primary-dark) 100%);
    color: var(--magnetky-white);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.magnetky-upload-btn:hover {
    background: linear-gradient(135deg, var(--magnetky-primary-dark) 0%, var(--magnetky-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224, 122, 95, 0.35);
}

/* Error message */
.magnetky-upload-error {
    color: var(--magnetky-error);
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
}

/* ==========================================================================
   WOOCOMMERCE CUSTOMIZATIONS
   ========================================================================== */

/* Add to cart button */
.single_add_to_cart_button,
.woocommerce .button.alt {
    background: linear-gradient(135deg, var(--magnetky-primary) 0%, var(--magnetky-primary-dark) 100%) !important;
    border-radius: 50px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

.single_add_to_cart_button:hover,
.woocommerce .button.alt:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224, 122, 95, 0.35);
}

/* Price styling */
.woocommerce .price,
.woocommerce-Price-amount {
    color: var(--magnetky-primary) !important;
    font-weight: 700;
}

/* ==========================================================================
   PRODUCT CARDS - Moderní karty produktů
   ========================================================================== */

/* Products grid */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
}

/* Product cards */
.woocommerce ul.products li.product {
    background: var(--magnetky-white);
    border-radius: var(--radius-soft) !important;
    overflow: hidden;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 350px;
    justify-self: center;
}

.woocommerce ul.products li.product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-soft);
    transition: var(--transition-smooth);
    pointer-events: none;
    z-index: 10;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
}

.woocommerce ul.products li.product:hover::before {
    border-color: var(--magnetky-primary-light);
}

/* Product image container */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
    border-radius: 0 !important;
    transition: var(--transition-smooth);
    aspect-ratio: 1;
    object-fit: cover;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.05);
}

/* Product image wrapper */
.woocommerce ul.products li.product > a:first-child {
    overflow: hidden;
    display: block;
    position: relative;
    background: var(--magnetky-light);
}

/* Badge pro hover */
.woocommerce ul.products li.product > a:first-child::after {
    content: 'Vybrat';
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--magnetky-white);
    color: var(--magnetky-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-round);
    opacity: 0;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-soft);
}

.woocommerce ul.products li.product:hover > a:first-child::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   PRODUCT CARD STYLING - Clean version using CSS variables
   ========================================================================== */

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display), Georgia, serif;
    font-size: 1.25rem;
    color: var(--magnetky-dark);
    padding: 1.25rem 1.25rem 0.5rem;
    margin: 0;
    text-align: center;
    transition: var(--transition-smooth);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--magnetky-primary);
}

/* Product price */
.woocommerce ul.products li.product .price {
    font-family: var(--font-body), -apple-system, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--magnetky-primary);
    padding: 0 1.25rem 1.25rem;
    text-align: center;
    margin: 0;
}

/* Add to cart button in product list */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    margin: 0 1.25rem 1.25rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--magnetky-primary) 0%, var(--magnetky-primary-dark) 100%);
    color: var(--magnetky-white);
    border-radius: var(--radius-round);
    font-family: var(--font-body), -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0.02em;
    transition: var(--transition-bounce);
    box-shadow: var(--shadow-glow);
}

/* ==========================================================================
   ANIMATIONS - Keyframes
   ========================================================================== */

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

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

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px var(--magnetky-primary-glow); }
    50% { box-shadow: 0 0 40px var(--magnetky-primary-glow); }
}

/* ==========================================================================
   HERO SECTION - Split layout: image left, text right
   ========================================================================== */

.magnetky-hero {
    background: var(--magnetky-cream);
    overflow: hidden;
}

/* WP columns wrapper inside hero - override default flex to our 55/45 split */
/* Target the columns block that has magnetky-hero class directly */
.wp-block-columns.magnetky-hero {
    display: grid !important;
    grid-template-columns: 55% 45%;
    min-height: 25vh; /* Reduced from 40vh for compact hero with workflow icons */
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Left - hero image */
.magnetky-hero__image {
    position: relative;
    overflow: hidden;
}

/* WordPress figure wrapper - nulovat default spacing */
.magnetky-hero__image,
.magnetky-hero figure.wp-block-image {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}

.magnetky-hero__image img,
.magnetky-hero figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder when no real photo exists */
.magnetky-hero__image--placeholder {
    background: linear-gradient(135deg, var(--magnetky-secondary) 0%, var(--magnetky-cream) 50%, var(--magnetky-accent-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    opacity: 0.6;
}

/* Right - text content */
.magnetky-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 3rem; /* Reduced from 3rem 4rem for compact hero */
    animation: fadeInUp 0.8s ease-out;
}

/* Override WP is-content-justification-right that pushes content right on wide screens */
/* WP generates dynamic classes with margin-right:0!important - must use high specificity */
.magnetky-hero__text.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
}

.magnetky-hero__text > * {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

.magnetky-hero__text h2 {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    color: var(--magnetky-dark) !important;
    letter-spacing: -0.03em;
    line-height: 1.15 !important;
    margin: 0 0 1rem !important;
    text-wrap: balance;
}

.magnetky-hero__text p {
    font-family: var(--font-body) !important;
    font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
    color: var(--magnetky-dark-soft) !important;
    margin: 0 0 2rem !important;
    line-height: 1.7;
    max-width: 400px;
}

.magnetky-hero__text .wp-block-button a,
.magnetky-hero__text .wp-block-buttons .wp-block-button__link {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 16px 40px !important;
    background: linear-gradient(135deg, var(--magnetky-primary) 0%, var(--magnetky-primary-dark) 100%) !important;
    border: none !important;
    border-radius: var(--radius-round) !important;
    color: var(--magnetky-white) !important;
    text-decoration: none !important;
    box-shadow: var(--shadow-glow) !important;
    transition: var(--transition-bounce) !important;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.magnetky-hero__text .wp-block-button a:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 40px var(--magnetky-primary-glow) !important;
}

/* ==========================================================================
   HERO WORKFLOW - Compact workflow + benefits (in hero section)
   ========================================================================== */

/* Workflow wrapper - kompaktní spacing */
.magnetky-hero-workflow {
    margin: 1.5rem 0 2rem;
}

/* Workflow steps - horizontal inline layout

   IMPORTANT: Blocksy theme applies strong paragraph styles (display: block)
   that override flexbox layout. Using !important here is a legitimate pattern
   for child theme overrides when working with third-party themes.

   Without !important, workflow icons display vertically instead of horizontally.
*/
.magnetky-hero__text p.workflow-steps {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: nowrap !important;
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--magnetky-dark);
    line-height: 1.4;
}

.workflow-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    white-space: nowrap;
}

.workflow-step i {
    font-size: 1.1rem;
    color: var(--magnetky-primary);
    flex-shrink: 0;
}

/* Arrow between steps */
.workflow-steps .fa-arrow-right {
    font-size: 0.75rem;
    color: var(--magnetky-dark-soft);
    opacity: 0.4;
    flex-shrink: 0;
}

/* Benefits row - horizontal inline layout

   IMPORTANT: Same as workflow-steps - requires !important to override
   Blocksy's default paragraph display:block styling.
*/
.magnetky-hero__text p.hero-benefits {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: nowrap !important;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--magnetky-dark-soft);
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

.benefit-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.benefit-item i {
    font-size: 0.9rem;
    color: var(--magnetky-primary);
    flex-shrink: 0;
}

.benefit-divider {
    color: var(--magnetky-dark-soft);
    opacity: 0.3;
    margin: 0 0.2rem;
    flex-shrink: 0;
}

/* ==========================================================================
   PRODUCT CAROUSEL - Fullwidth scrolling product cards
   ========================================================================== */

.magnetky-carousel {
    overflow: hidden;
    padding: 2.5rem 0;
    background: var(--magnetky-white);
    position: relative;

    /* Full-width breakout from Blocksy/Gutenberg container */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    max-width: none;
}

/* Fade-out na okrajích karuselu */
.magnetky-carousel::before,
.magnetky-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.magnetky-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--magnetky-white), transparent);
}

.magnetky-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--magnetky-white), transparent);
}

.magnetky-carousel__track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: carousel-scroll 35s linear infinite;
    padding: 1rem 0;
}

/* Grab cursor for drag interaction */
.magnetky-carousel__track {
    cursor: grab;
}

.magnetky-carousel__track:active {
    cursor: grabbing;
}

/* Arrow navigation */
.magnetky-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--magnetky-white);
    color: var(--magnetky-dark);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.magnetky-carousel:hover .magnetky-carousel__arrow {
    opacity: 1;
}

.magnetky-carousel__arrow:hover {
    background: var(--magnetky-primary);
    color: var(--magnetky-white);
    box-shadow: var(--shadow-medium);
}

.magnetky-carousel__arrow--prev {
    left: 16px;
}

.magnetky-carousel__arrow--next {
    right: 16px;
}

@media (hover: none) {
    .magnetky-carousel__arrow {
        display: none;
    }
}

.magnetky-carousel__slide {
    flex-shrink: 0;
    width: 260px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease;
}

.magnetky-carousel__slide:hover {
    transform: translateY(-4px);
}

.magnetky-carousel__slide img {
    width: 260px;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    border: 3px solid transparent;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    display: block;
}

.magnetky-carousel__slide:hover img {
    box-shadow: var(--shadow-medium);
    border-color: var(--magnetky-primary);
}

.magnetky-carousel__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--magnetky-dark);
    margin: 0.6rem 0 0.2rem;
    min-height: 1.5em;
    line-height: 1.4;
}

.magnetky-carousel__price {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--magnetky-primary);
    min-height: 1.5em;
    line-height: 1.4;
}

@keyframes carousel-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================================
   HOW IT WORKS - "Jak to funguje" section
   ========================================================================== */

.magnetky-how-it-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 2rem 3rem;
}

.magnetky-how-it-works__card {
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-soft);
    background: var(--magnetky-white);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
}

.magnetky-how-it-works__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

.magnetky-how-it-works__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magnetky-primary), var(--magnetky-primary-dark));
    color: var(--magnetky-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-glow);
}

.magnetky-how-it-works__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--magnetky-dark);
    margin: 0 0 0.5rem;
}

.magnetky-how-it-works__desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--magnetky-dark-soft);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   PRODUCT SLIDER - Homepage "Naše magnetky"
   ========================================================================== */

.magnetky-slider {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3.5rem 2rem;
}

.magnetky-slider__viewport {
    overflow: hidden;
}

.magnetky-slider__track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.magnetky-slider__card {
    flex: 0 0 calc((100% - 3rem) / 3);
    background: var(--magnetky-white);
    border-radius: var(--radius-soft);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    position: relative;
}

.magnetky-slider__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-soft);
    transition: var(--transition-smooth);
    pointer-events: none;
    z-index: 2;
}

.magnetky-slider__card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
}

.magnetky-slider__card:hover::before {
    border-color: var(--magnetky-primary-light);
}

/* Image */
.magnetky-slider__image-link {
    display: block;
    overflow: hidden;
    position: relative;
    background: var(--magnetky-light);
}

.magnetky-slider__image-link img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.magnetky-slider__card:hover .magnetky-slider__image-link img {
    transform: scale(1.05);
}

/* Hover badge */
.magnetky-slider__badge {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--magnetky-white);
    color: var(--magnetky-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-round);
    opacity: 0;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-soft);
}

.magnetky-slider__card:hover .magnetky-slider__badge {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Info section */
.magnetky-slider__info {
    padding: 1.25rem;
    text-align: center;
    min-height: 140px;
}

.magnetky-slider__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--magnetky-dark);
    margin: 0 0 0.5rem;
    transition: var(--transition-smooth);
    min-height: 1.4em;
    line-height: 1.4;
}

.magnetky-slider__card:hover .magnetky-slider__name {
    color: var(--magnetky-primary);
}

.magnetky-slider__price {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--magnetky-primary);
    margin-bottom: 1rem;
    min-height: 1.6em;
}

.magnetky-slider__btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--magnetky-primary) 0%, var(--magnetky-primary-dark) 100%);
    color: var(--magnetky-white);
    border-radius: var(--radius-round);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition-bounce);
    box-shadow: var(--shadow-glow);
}

.magnetky-slider__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--magnetky-primary-glow);
    color: var(--magnetky-white);
}

/* Arrows */
.magnetky-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--magnetky-white);
    border: 2px solid var(--magnetky-light);
    color: var(--magnetky-dark);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
}

.magnetky-slider__arrow:hover {
    background: var(--magnetky-primary);
    border-color: var(--magnetky-primary);
    color: var(--magnetky-white);
    box-shadow: var(--shadow-glow);
}

.magnetky-slider__arrow--prev {
    left: 0;
}

.magnetky-slider__arrow--next {
    right: 0;
}

/* ==========================================================================
   PRODUCT SCROLL - Compact auto-scrolling product cards (bottom section)
   Cards are 20% smaller than the slider, infinite CSS-only auto-scroll
   ========================================================================== */

.magnetky-scroll {
    overflow: hidden;
    padding: 2rem 0 3rem;
    position: relative;
    background: var(--magnetky-light);
}

/* Fade-out edges */
.magnetky-scroll::before,
.magnetky-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.magnetky-scroll::before {
    left: 0;
    background: linear-gradient(to right, var(--magnetky-light), transparent);
}

.magnetky-scroll::after {
    right: 0;
    background: linear-gradient(to left, var(--magnetky-light), transparent);
}

.magnetky-scroll__track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: scroll-products 30s linear infinite;
    padding: 0.75rem 0;
}

@keyframes scroll-products {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Card - compact version of slider card */
.magnetky-scroll__card {
    flex-shrink: 0;
    width: 210px;
    background: var(--magnetky-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}

.magnetky-scroll__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 16px;
    transition: var(--transition-smooth);
    pointer-events: none;
    z-index: 2;
}

.magnetky-scroll__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

.magnetky-scroll__card:hover::before {
    border-color: var(--magnetky-primary-light);
}

/* Image */
.magnetky-scroll__image {
    overflow: hidden;
    position: relative;
    background: var(--magnetky-light);
}

.magnetky-scroll__image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.magnetky-scroll__card:hover .magnetky-scroll__image img {
    transform: scale(1.05);
}

/* Hover badge */
.magnetky-scroll__badge {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--magnetky-white);
    color: var(--magnetky-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-round);
    opacity: 0;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-soft);
}

.magnetky-scroll__card:hover .magnetky-scroll__badge {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Info section */
.magnetky-scroll__info {
    padding: 1rem;
    text-align: center;
    min-height: 85px;
}

.magnetky-scroll__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    color: var(--magnetky-dark);
    margin: 0 0 0.35rem;
    transition: var(--transition-smooth);
    min-height: 1.4em;
    line-height: 1.4;
}

.magnetky-scroll__card:hover .magnetky-scroll__name {
    color: var(--magnetky-primary);
}

.magnetky-scroll__price {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--magnetky-primary);
    min-height: 1.4em;
}

/* Arrow navigation buttons */
.magnetky-scroll__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--magnetky-white);
    color: var(--magnetky-dark);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.magnetky-scroll:hover .magnetky-scroll__arrow {
    opacity: 1;
}

.magnetky-scroll__arrow:hover {
    background: var(--magnetky-primary);
    color: var(--magnetky-white);
    box-shadow: var(--shadow-medium);
}

.magnetky-scroll__arrow--prev {
    left: 12px;
}

.magnetky-scroll__arrow--next {
    right: 12px;
}

/* Grab cursor for drag interaction */
.magnetky-scroll__track {
    cursor: grab;
}

.magnetky-scroll__track:active {
    cursor: grabbing;
}

/* Hide arrows on touch devices (swipe is intuitive) */
@media (hover: none) {
    .magnetky-scroll__arrow {
        display: none;
    }
}

/* ==========================================================================
   SECTION HEADINGS - Homepage
   ========================================================================== */

h2.wp-block-heading {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
    text-align: center;
    color: var(--magnetky-dark) !important;
    margin-bottom: 0.5rem !important;
    position: relative;
}

/* ==========================================================================
   HOMEPAGE - Skrytí page title a oprava mezer
   ========================================================================== */

/* Skrýt page title "Domů" na homepage */
.home .entry-title,
.home .page-title,
.home h1.wp-block-post-title,
.page-id-11 .entry-title,
.page-id-11 .page-title,
body.home article > header,
body.page-id-11 article > header {
    display: none !important;
}

/* Odstranit padding před obsahem na homepage */
.home .entry-content,
.page-id-11 .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Hero sekce - menší padding nahoře */
.home .wp-block-cover:first-child,
.page-id-11 .wp-block-cover:first-child {
    margin-top: 0 !important;
}

/* Odstranit mezeru mezi headerem a obsahem */
.home main,
.page-id-11 main {
    padding-top: 0 !important;
}

.home .ct-container-full,
.page-id-11 .ct-container-full {
    padding-top: 0 !important;
}

.home .ct-container-full[data-vertical-spacing],
.page-id-11 .ct-container-full[data-vertical-spacing] {
    padding-top: 0 !important;
}

.home .ct-container,
.page-id-11 .ct-container {
    padding-top: 0 !important;
}

/* Hero section banner (Blocksy page title) - skrýt mezeru */
.home .hero-section,
.page-id-11 .hero-section {
    display: none !important;
}

/* Blocksy content vertical spacing - nulovat na homepage */
.home .ct-container-full[data-vertical-spacing],
.page-id-11 .ct-container-full[data-vertical-spacing] {
    --content-vertical-spacing: 0px !important;
    padding-top: 0 !important;
}

/* Bílé pozadí stránky místo šedého */
body.home,
body.page-id-11 {
    background-color: var(--magnetky-white) !important;
}

/* Full-width hero bez omezení kontejneru */
.home .entry-content > .wp-block-group.magnetky-hero,
.page-id-11 .entry-content > .wp-block-group.magnetky-hero {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    max-width: 100vw !important;
    width: 100vw !important;
}

/* ==========================================================================
   SHOP PAGE - Skrytí "Shop" banneru
   ========================================================================== */

/* Skrýt velký Shop banner/title na stránce obchodu */
.woocommerce-page .hero-section,
.woocommerce-page .page-title-section,
.post-type-archive-product .hero-section,
.post-type-archive-product .ct-page-title,
.woocommerce-shop .ct-page-title,
body.woocommerce .ct-page-title,
.archive.woocommerce-page .ct-page-title {
    display: none !important;
}

/* Odstranit mezeru po skrytém banneru */
.woocommerce-page main,
.post-type-archive-product main {
    padding-top: 20px !important;
}

/* ==========================================================================
   CONTACT PAGE - Kontaktní stránka
   Uses stable .magnetky-contact-* classes set on Gutenberg Group blocks
   (same pattern as Služby page with .magnetky-services-*)
   ========================================================================== */

/* Hide duplicate page title */
body[class*="kontakt"] .entry-title,
body[class*="kontakt"] .page-title,
body[class*="kontakt"] h1.wp-block-post-title,
body[class*="kontakt"] article > header,
body[class*="kontakt"] .ct-page-title,
.page-template-default[class*="kontakt"] .entry-title {
    display: none !important;
}

body[class*="kontakt"] .entry-content {
    padding-top: 0 !important;
}

/* Background for contact page */
body[class*="kontakt"] {
    background-color: var(--magnetky-light) !important;
}

/* --- Hero section (heading + subtitle) --- */
.magnetky-contact-hero {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem 1rem 2.5rem;
}

.magnetky-contact-hero h2 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    color: var(--magnetky-dark);
    margin: 0 0 0.25rem;
    position: relative;
}

.magnetky-contact-hero h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--magnetky-primary), var(--magnetky-secondary));
    border-radius: 2px;
    margin: 1rem auto 0;
}

.magnetky-contact-hero p {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--magnetky-dark-soft);
    max-width: 500px;
    margin: 1.25rem auto 0;
    line-height: 1.7;
}

/* --- Form section (WPForms wrapper) --- */
.magnetky-contact-form {
    max-width: 600px;
    margin: 0 auto 2.5rem;
    background: var(--magnetky-white);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    border-top: 3px solid var(--magnetky-primary);
}

/* Form field inputs */
.magnetky-contact-form .wpforms-field input[type="text"],
.magnetky-contact-form .wpforms-field input[type="email"],
.magnetky-contact-form .wpforms-field textarea {
    font-family: var(--font-body);
    border: 2px solid var(--magnetky-cream);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: var(--magnetky-dark);
    background: var(--magnetky-light);
    transition: var(--transition-smooth);
}

.magnetky-contact-form .wpforms-field input[type="text"]:focus,
.magnetky-contact-form .wpforms-field input[type="email"]:focus,
.magnetky-contact-form .wpforms-field textarea:focus {
    border-color: var(--magnetky-primary);
    background: var(--magnetky-white);
    outline: none;
    box-shadow: 0 0 0 3px var(--magnetky-primary-glow);
}

/* Form labels */
.magnetky-contact-form .wpforms-field-label {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--magnetky-dark);
    font-size: 0.95rem;
    margin-bottom: 0.375rem;
}

/* Submit button - brand gradient */
.magnetky-contact-form button.wpforms-submit {
    background: linear-gradient(135deg, var(--magnetky-primary) 0%, var(--magnetky-primary-dark) 100%) !important;
    border: none !important;
    border-radius: var(--radius-round) !important;
    padding: 14px 40px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--magnetky-white) !important;
    cursor: pointer;
    transition: var(--transition-bounce) !important;
    box-shadow: var(--shadow-glow) !important;
    text-transform: none !important;
    letter-spacing: 0.02em;
    width: 100%;
}

.magnetky-contact-form button.wpforms-submit:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px var(--magnetky-primary-glow) !important;
}

/* --- Contact info card --- */
.magnetky-contact-info {
    max-width: 600px;
    margin: 0 auto 3rem;
    background: var(--magnetky-white);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    text-align: center;
    border-top: 3px solid var(--magnetky-primary);
    transition: var(--transition-smooth);
}

.magnetky-contact-info:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.magnetky-contact-info h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--magnetky-dark);
    margin: 0 0 1.25rem;
    position: relative;
    padding-bottom: 1rem;
}

.magnetky-contact-info h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--magnetky-primary), var(--magnetky-secondary));
    border-radius: 2px;
    margin: 0.75rem auto 0;
}

/* Contact info items (phone, email) */
.magnetky-contact-info__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--magnetky-light);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-soft);
    margin-bottom: 0.75rem;
    transition: var(--transition-smooth);
}

.magnetky-contact-info__item:hover {
    background: var(--magnetky-cream);
    transform: translateY(-2px);
}

.magnetky-contact-info__item p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--magnetky-dark-soft);
    line-height: 1.6;
    margin: 0;
}

/* Social links separator */
.magnetky-contact-social {
    border-top: 1px solid var(--magnetky-cream);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}

.magnetky-contact-social p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--magnetky-dark-soft);
    line-height: 1.8;
    margin: 0;
}

.magnetky-contact-info a {
    color: var(--magnetky-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--magnetky-primary-glow);
    transition: var(--transition-smooth);
    padding-bottom: 1px;
}

.magnetky-contact-info a:hover {
    border-bottom-color: var(--magnetky-primary);
    color: var(--magnetky-primary-dark);
}

/* ==========================================================================
   CONTACT PAGE - Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .magnetky-contact-hero {
        padding: 2rem 1rem;
    }

    .magnetky-contact-form {
        padding: 1.5rem 1rem;
        margin: 0 0.5rem 2rem;
    }

    .magnetky-contact-info {
        padding: 1.5rem 1rem;
        margin: 0 0.5rem 2.5rem;
    }

    .magnetky-contact-info__item {
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   SINGLE PRODUCT PAGE - Detail produktu
   ========================================================================== */

/* Product title on single page */
.single-product .product_title,
.single-product h1.product_title,
.woocommerce div.product .product_title {
    font-family: var(--font-display) !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    color: var(--magnetky-dark) !important;
    -webkit-text-fill-color: var(--magnetky-dark) !important;
    margin-bottom: 1rem !important;
}

/* Price on single product - scoped to .summary to not affect related products */
.single-product .summary .price,
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price {
    font-family: var(--font-body) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--magnetky-primary) !important;
    -webkit-text-fill-color: var(--magnetky-primary) !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
    font-family: var(--font-body) !important;
    color: var(--magnetky-dark-soft) !important;
    -webkit-text-fill-color: var(--magnetky-dark-soft) !important;
    font-size: 1rem;
    line-height: 1.7;
}

/* Variation labels and selects */
.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart .variations td.label label {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--magnetky-dark) !important;
    -webkit-text-fill-color: var(--magnetky-dark) !important;
}

.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .variations td.value select {
    font-family: var(--font-body) !important;
    font-size: 1rem;
    color: var(--magnetky-dark) !important;
    -webkit-text-fill-color: var(--magnetky-dark) !important;
    padding: 0.875rem 1rem;
    min-height: 50px;
    line-height: 1.4;
    border: 2px solid var(--magnetky-light);
    border-radius: var(--radius-soft);
    background: var(--magnetky-white);
    transition: var(--transition-smooth);
}

.woocommerce div.product form.cart .variations select:focus {
    border-color: var(--magnetky-primary);
    outline: none;
}

/* ==========================================================================
   QUANTITY PRICE CALCULATOR - Dynamic total on product page
   ========================================================================== */

.magnetky-qty-total {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--magnetky-primary);
    background: var(--magnetky-light);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-soft);
    margin-bottom: 1rem;
    text-align: center;
}

/* ==========================================================================
   TIERED PRICING - Quantity discount chips on product page
   ========================================================================== */

.magnetky-tiers {
    background: var(--magnetky-light);
    border-radius: var(--radius-soft);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.magnetky-tiers__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    min-height: 52px;
}

.magnetky-tiers__chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.625rem 1rem;
    border: 2px solid var(--magnetky-cream);
    border-radius: 14px;
    background: var(--magnetky-white);
    transition: var(--transition-smooth);
    min-width: 90px;
    font-family: var(--font-body);
}

.magnetky-tiers__chip.is-active {
    border-color: var(--magnetky-primary);
    background: linear-gradient(135deg, rgba(224, 122, 95, 0.06) 0%, rgba(224, 122, 95, 0.12) 100%);
    box-shadow: 0 2px 12px var(--magnetky-primary-glow);
}

.magnetky-tiers__chip-qty {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--magnetky-dark);
}

.magnetky-tiers__chip-price {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--magnetky-primary);
}

.magnetky-tiers__motivation {
    text-align: center;
    margin-top: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--magnetky-accent);
    min-height: 1.4em;
}

/* ==========================================================================
   CART & CHECKOUT - Layout Shift Prevention (CLS fix)
   Preallocate space for WooCommerce Blocks to prevent CLS > 0.1
   ========================================================================== */

/* Hide per-item sale badge in cart — total savings shown in sidebar is enough */
.wc-block-cart-item__sale-badge {
    display: none;
}

/* --- Empty cart page: compact & clean layout --- */

/* Shrink the large sad face SVG icon (WooCommerce Blocks empty cart) */
.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    height: 3em;
    width: 3em;
    mask-size: 3em;
    margin: 0 auto 1rem;
    opacity: 0.5;
    color: var(--magnetky-dark-soft);
}

/* Smaller heading text */
.woocommerce-cart .wc-block-cart__empty-cart__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--magnetky-dark);
    margin-bottom: 1.5rem;
}

/* Classic cart empty message - also smaller */
.woocommerce-cart .cart-empty.woocommerce-info {
    font-size: 1.25rem;
    font-family: var(--font-body);
    color: var(--magnetky-dark);
    font-weight: 500;
}

/* Hide "Novinka" heading, product grid, and cross-sells on the cart page */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title),
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid,
.woocommerce-cart .wc-block-grid__products,
.woocommerce-cart .cross-sells,
.woocommerce-cart .woocommerce ul.products,
.woocommerce-cart .related.products,
.woocommerce-cart .up-sells {
    display: none !important;
}

/* Style the "Return to shop" button */
.woocommerce-cart .wc-block-cart__empty-cart__title ~ .wp-block-button a,
.woocommerce-cart .return-to-shop .button,
.woocommerce-cart .wc-backward {
    background: linear-gradient(135deg, var(--magnetky-primary) 0%, var(--magnetky-primary-dark) 100%);
    color: var(--magnetky-white);
    border-radius: var(--radius-round);
    padding: 14px 36px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition-bounce);
    box-shadow: var(--shadow-glow);
    display: inline-block;
    margin-top: 1rem;
}

.woocommerce-cart .wc-block-cart__empty-cart__title ~ .wp-block-button a:hover,
.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-cart .wc-backward:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px var(--magnetky-primary-glow);
    color: var(--magnetky-white);
}

.wc-block-cart__main,
.wc-block-checkout__main {
    min-height: 400px;
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
    min-height: 200px;
}

.wc-block-components-order-summary {
    min-height: 120px;
}

.wc-block-components-shipping-rates-control,
.wc-block-components-payment-method-icons {
    min-height: 50px;
}

/* ==========================================================================
   CHECKOUT - Floating Labels & Input Styling
   ========================================================================== */

/* Floating labels - změna z oranžové na neutrální šedou */
.wc-block-components-text-input label,
.wc-block-components-textarea label,
.wc-block-components-select label,
.wc-block-components-country-input label,
.wc-block-components-state-input label,
.wc-block-checkout__form .wc-block-components-text-input label,
.wc-block-checkout__form label {
    color: #757575 !important;
}

/* Placeholder text pro inputs */
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea textarea::placeholder,
.wc-block-checkout__form input::placeholder {
    color: #757575 !important;
    opacity: 1;
}

/* Focus state - zachovat primární barvu pro interakci */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
    color: var(--magnetky-primary) !important;
}

/* ==========================================================================
   ZÁSILKOVNA / PACKETERY - Checkout widget sizing
   ========================================================================== */

/* Carrier logo - plugin class: packetery-widget-button-logo */
.packetery-widget-button-logo {
    max-width: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
}

/* Pickup button - plugin renders .button.alt inside .packetery-widget-button-wrapper
   Override our global .button.alt sizing to be compact */
.packetery-widget-button-wrapper .button.alt {
    padding: 8px 18px !important;
    font-size: 0.8rem !important;
    border-radius: 50px !important;
    display: inline-block !important;
    width: auto !important;
    min-width: unset !important;
}

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */

/* Produkty na shop stránce - jemná animace */
.woocommerce ul.products li.product {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 1;
}

.woocommerce ul.products li.product:nth-child(1) { animation-delay: 0.05s; }
.woocommerce ul.products li.product:nth-child(2) { animation-delay: 0.1s; }
.woocommerce ul.products li.product:nth-child(3) { animation-delay: 0.15s; }
.woocommerce ul.products li.product:nth-child(4) { animation-delay: 0.2s; }

/* ==========================================================================
   GLOBAL POLISH - Finální detaily
   ========================================================================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background: var(--magnetky-primary-light);
    color: var(--magnetky-dark);
}

/* Focus states pro accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--magnetky-primary);
    outline-offset: 2px;
}

/* Container max-width */
.ct-container {
    max-width: 1200px !important;
}

/* ==========================================================================
   FOOTER BOTTOM BAR - Copyright strip
   ========================================================================== */

/* Footer copyright row - layout & decoration only (colors via Customizer) */
.ct-footer [data-row="bottom"] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    padding: 1.25rem 0;
    position: relative;
}

/* Gradient accent line on top - Customizer neumí */
.ct-footer [data-row="bottom"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--magnetky-primary), var(--magnetky-secondary), var(--magnetky-accent));
}

/* Copyright text layout */
.ct-footer [data-row="bottom"] .ct-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Link hover transition - Customizer nemá transition */
.ct-footer [data-row="bottom"] a {
    transition: color 0.3s ease;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .magnetky-upload-wrapper {
        padding: 20px;
    }

    /* Hero - mobile: stack vertically */
    .magnetky-hero > .wp-block-columns {
        grid-template-columns: 1fr !important;
        min-height: auto;
    }

    /* Hero workflow - smaller font on mobile */
    .workflow-steps {
        font-size: 0.875rem;
        gap: 0.5rem;
    }

    .workflow-step i {
        font-size: 1.1rem;
    }

    .hero-benefits {
        font-size: 0.8rem;
    }

    .benefit-item i {
        font-size: 0.9rem;
    }

    .magnetky-hero__image {
        height: 300px;
    }

    .magnetky-hero__text {
        padding: 2rem 1.5rem;
        text-align: center;
    }

    .magnetky-hero__text p {
        max-width: none;
    }

    /* Carousel mobile */
    .magnetky-carousel__slide {
        width: 220px;
    }

    .magnetky-carousel__slide img {
        width: 220px;
        height: 220px;
    }

    /* How it works mobile - stack */
    .magnetky-how-it-works {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem 1.5rem 2rem;
    }

    /* Product slider mobile - 2 cards */
    .magnetky-slider__card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }

    /* Product scroll mobile */
    .magnetky-scroll__card {
        width: 180px;
    }

    .magnetky-scroll__track {
        gap: 1rem;
    }

    /* Tier chips mobile - 2 column grid */
    .magnetky-tiers__chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Products grid mobile */
    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 1.5rem !important;
    }

}

/* ==========================================================================
   SLUŽBY PAGE - Event magnet service page styling
   Uses stable .magnetky-services-* classes set on Gutenberg Group blocks
   ========================================================================== */

/* Hide duplicate page title */
body[class*="sluzby"] .entry-title,
body[class*="sluzby"] .page-title,
body[class*="sluzby"] h1.wp-block-post-title,
body[class*="sluzby"] article > header,
body[class*="sluzby"] .ct-page-title {
    display: none !important;
}

/* --- Hero section --- */
.magnetky-services-hero {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem 1rem 2.5rem;
}

.magnetky-services-hero h2 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    color: var(--magnetky-dark);
    margin: 0 0 0.25rem;
    position: relative;
}

.magnetky-services-hero h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--magnetky-primary), var(--magnetky-secondary));
    border-radius: 2px;
    margin: 1rem auto 0;
}

.magnetky-services-hero h3 {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 500;
    color: var(--magnetky-dark-soft);
    max-width: 600px;
    margin: 1.5rem auto 1rem;
    line-height: 1.6;
}

.magnetky-services-hero p {
    max-width: 560px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--magnetky-dark-soft);
}

/* --- Feature cards grid (Gutenberg Columns) --- */
.magnetky-services-features {
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
}

.magnetky-services-features .wp-block-column {
    background: var(--magnetky-white);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem 1.5rem;
    text-align: center;
    border-top: 3px solid var(--magnetky-primary);
    transition: var(--transition-smooth);
}

.magnetky-services-features .wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.magnetky-services-features h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--magnetky-dark);
    margin: 0 0 0.5rem;
}

.magnetky-services-features p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--magnetky-dark-soft);
    margin: 0;
}

/* --- Pricing section --- */
.magnetky-services-pricing {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
    text-align: center;
}

.magnetky-services-pricing h3 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 400;
    color: var(--magnetky-dark);
    margin: 0 0 1.25rem;
}

.magnetky-services-pricing ol {
    list-style: none;
    counter-reset: pricing-step;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.magnetky-services-pricing ol li {
    counter-increment: pricing-step;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--magnetky-white);
    border: 1px solid var(--magnetky-cream);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-soft);
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--magnetky-dark);
    flex: 1 1 auto;
    min-width: 150px;
    transition: var(--transition-smooth);
    font-size: 0.9rem;
}

.magnetky-services-pricing ol li:hover {
    background: var(--magnetky-cream);
    transform: translateY(-2px);
}

.magnetky-services-pricing ol li::before {
    content: counter(pricing-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magnetky-primary), var(--magnetky-primary-dark));
    color: var(--magnetky-white);
    font-weight: 700;
    font-size: 0.9rem;
}

/* --- CTA section --- */
.magnetky-services-cta {
    max-width: 650px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
    text-align: center;
}

.magnetky-services-cta__box {
    background: linear-gradient(135deg, var(--magnetky-cream) 0%, var(--magnetky-light) 100%);
    border-radius: var(--radius-soft);
    padding: 2rem 2.5rem;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--magnetky-dark);
    font-weight: 500;
    border-left: 4px solid var(--magnetky-primary);
    margin-bottom: 1.5rem;
}

.magnetky-services-cta__box p {
    margin: 0;
}

.magnetky-services-cta__signoff {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--magnetky-dark);
    margin-bottom: 0.5rem;
}

.magnetky-services-cta__signoff p {
    margin: 0;
}

.magnetky-services-cta__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--magnetky-primary);
}

.magnetky-services-cta__name p {
    margin: 0;
}

.magnetky-services-cta__name::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--magnetky-primary), var(--magnetky-secondary));
    border-radius: 2px;
    margin: 0.75rem auto 0;
}

/* ==========================================================================
   SLUŽBY PAGE - Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .magnetky-services-hero {
        padding: 2rem 1rem 2rem;
    }

    .magnetky-services-features .wp-block-columns {
        flex-direction: column;
        gap: 1rem;
    }

    .magnetky-services-pricing ol {
        flex-direction: column;
        gap: 0.75rem;
    }

    .magnetky-services-cta__box {
        padding: 1.5rem;
        border-left: none;
        border-top: 3px solid var(--magnetky-primary);
    }
}

@media (max-width: 480px) {
    .magnetky-hero__text h2 {
        font-size: 1.75rem !important;
    }

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

    .magnetky-hero__text .wp-block-button a {
        padding: 14px 28px !important;
        font-size: 0.9rem !important;
    }

    /* Product slider - 1 card on small screens */
    .magnetky-slider__card {
        flex: 0 0 100%;
    }

    .magnetky-slider {
        padding: 0 2.5rem 2rem;
    }

    /* Product scroll - smaller cards on small screens */
    .magnetky-scroll__card {
        width: 160px;
    }

    .magnetky-scroll__name {
        font-size: 0.875rem;
    }

    .magnetky-scroll__price {
        font-size: 0.8rem;
    }
}