/* style.css */
/**
 * FMAN.cz - Modern Frontend CSS
 * Mužský lifestyle srovnávač 2026
 */

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* Tipy na dárek - warm gold / cream palette */
    --primary: #b8862e;
    --primary-dark: #8b5e1a;
    --primary-light: #fdf8f0;
    --primary-rgb: 184, 134, 46;
    --gradient: linear-gradient(135deg, #8b5e1a 0%, #b8862e 100%);
    --gradient-hover: linear-gradient(135deg, #6b4510 0%, #8b5e1a 100%);

    /* Accent colors - warm amber */
    --accent: #c9a96e;
    --accent-dark: #a8843a;

    /* Neutrals */
    --dark: #0f172a;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --white: #ffffff;

    /* Semantic */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* Design tokens */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);

    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container-width: 1280px;
    --container-padding: 24px;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--gray-50);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ===== HOMEPAGE GRID & CARDS ===== */
.hp-section { padding: 48px 0; }
.hp-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 20px;
}
@media (max-width: 1024px) { .hp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .hp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hp-grid { grid-template-columns: 1fr; } }

.hp-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.hp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    border-color: var(--primary);
}
.hp-card-img {
    aspect-ratio: 1;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform 0.3s;
}
.hp-card:hover .hp-card-img img { transform: scale(1.05); }
.hp-card-noimg { color: #d1d5db; font-size: 32px; }
.hp-card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.hp-card-brand {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.hp-card-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #111827;
    margin: 0 0 auto;
}
.hp-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}
.hp-card-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
}
.hp-card-offers {
    font-size: 11px;
    color: #9ca3af;
}
.hp-card-offers i { margin-right: 3px; }

/* ===== HERO ANIMATED ===== */
.hero-animated {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center top;
    animation: heroKenBurns 20s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes heroKenBurns {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.08) translate(-1%, -1%); }
    100% { transform: scale(1.04) translate(1%, 0); }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,25,41,0.92) 0%, rgba(36,59,83,0.55) 50%, rgba(10,25,41,0.8) 100%);
    z-index: 1;
}
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
.hero-particle {
    position: absolute;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}
.hero-animated .container {
    position: relative;
    z-index: 3;
}
.hero-content-centered {
    text-align: center;
    padding: 60px 20px;
    max-width: 800px;
    margin: 0 auto;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 8px 20px;
    border-radius: 50px;
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 24px;
    animation: fadeInDown 0.6s ease-out;
}
.hero-badge i { color: #d97706; }
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-title-anim {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    animation: fadeInUp 0.8s ease-out 0.1s both;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-subtitle-anim {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,0.8);
    margin-bottom: 36px;
    line-height: 1.7;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}
.hero-cta-anim {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
    animation: fadeInUp 0.8s ease-out 0.5s both;
}
.hero-cta-anim .btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
    border-radius: 50px;
    font-weight: 600;
}
.hero-animated .btn-outline,
.btn-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.4);
    color: #fff;
    transition: all 0.3s;
}
.hero-animated .btn-outline:hover,
.btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,255,255,0.15);
}
.hero-stats {
    display: flex;
    gap: 48px;
    justify-content: center;
    animation: fadeInUp 0.8s ease-out 0.7s both;
    padding-top: 8px;
    max-width: 500px;
    margin: 0 auto;
}
.hero-stat {
    text-align: center;
}
.hero-stat-num {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}
.hero-stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
    min-height: 100vh;
}

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

a:hover {
    color: var(--primary-dark);
}

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

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray-900);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
}

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

.btn-lg {
    padding: 16px 32px;
    font-size: 17px;
}

.btn-primary {
    background: var(--gradient);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.4);
}

.btn-primary:hover {
    background: var(--gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.5);
    color: var(--white);
}

.btn-secondary {
    background: var(--white);
    color: var(--gray-700);
    border: 2px solid var(--gray-200);
}

.btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

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

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

.btn-white {
    background: var(--white);
    color: var(--primary);
    box-shadow: var(--shadow);
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-block {
    width: 100%;
}

/* Header */
.site-header {
    background: #fdf8f0;
    box-shadow: 0 1px 3px rgba(140,100,40,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 16px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 26px;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.5px;
}

.logo i {
    font-size: 32px;
    color: var(--primary);
}

.logo span {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-search {
    flex: 1;
    max-width: 520px;
    position: relative;
}

.header-search input {
    width: 100%;
    padding: 14px 50px 14px 20px;
    border: 1px solid #e0d4c0;
    border-radius: var(--radius-full);
    font-size: 15px;
    background: #fff;
    transition: var(--transition);
}

.header-search input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}

.header-search input::placeholder {
    color: var(--gray-400);
}

.header-search button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition);
}

.header-search button:hover {
    background: var(--primary-dark);
}

.main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

.main-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--gray-600);
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 15px;
}

.main-nav a:hover {
    background: var(--gray-100);
    color: var(--primary);
}

.main-nav a i {
    font-size: 18px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gray-700);
    cursor: pointer;
    padding: 8px;
}

/* Mobile Nav */
.mobile-nav {
    display: none;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 20px;
}

.mobile-nav.show {
    display: block;
}

.mobile-search {
    display: flex;
    margin-bottom: 20px;
}

.mobile-search input {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 15px;
}

.mobile-search button {
    padding: 14px 20px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    border-bottom: 1px solid var(--gray-100);
}

.mobile-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    color: var(--gray-700);
    font-weight: 500;
}

.mobile-nav a i {
    width: 24px;
    color: var(--primary);
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
}
.hero::before { display: none; }

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

.hero-text {
    color: var(--white);
}

.hero-text h1 {
    font-size: 48px;
    line-height: 1.15;
    margin: 0 0 24px;
    color: var(--white);
    font-weight: 800;
}

.hero-text p {
    font-size: 20px;
    opacity: 0.9;
    margin: 0 0 32px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-image {
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
}

/* Animal Boxes */
.animal-boxes {
    padding: 60px 0;
}

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

.animal-box {
    position: relative;
    height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    transition: var(--transition-slow);
}

.animal-box:hover {
    transform: scale(1.02);
}

.animal-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
}

.box-content {
    position: relative;
    padding: 28px;
    color: var(--white);
    width: 100%;
}

.box-content h3 {
    font-size: 26px;
    margin: 0 0 16px;
    color: var(--white);
}

.box-content .btn {
    font-size: 14px;
    padding: 10px 20px;
}

/* Categories */
.categories-section {
    padding: 80px 0;
    background: var(--white);
}

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

.section-header h2 {
    font-size: 36px;
    margin: 0 0 12px;
}

.section-header p {
    font-size: 18px;
    color: var(--gray-500);
    margin: 0;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.category-card {
    background: var(--white);
    border: 2px solid var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
}

.category-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.category-icon {
    width: 72px;
    height: 72px;
    background: var(--gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 32px;
    color: var(--white);
    transition: var(--transition);
}

.category-card:hover .category-icon {
    background: var(--gradient-hover);
    transform: scale(1.1);
}

.category-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 16px;
}

.category-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--gray-800);
}

.products-count {
    font-size: 13px;
    color: var(--gray-500);
}

/* Products Section */
.products-section {
    padding: 80px 0;
}

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

.product-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--gray-100);
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.product-image {
    display: block;
    height: 200px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    transition: var(--transition);
}

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

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    background: var(--accent);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-full);
}

.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--gray-300);
    font-size: 48px;
}

.product-content {
    padding: 20px;
}

.product-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-content h3 a {
    color: var(--gray-800);
}

.product-content h3 a:hover {
    color: var(--primary);
}

.product-brand {
    font-size: 13px;
    color: var(--gray-500);
    display: block;
    margin-bottom: 12px;
}

.product-price {
    margin-bottom: 8px;
}

.price-from {
    font-size: 12px;
    color: var(--gray-500);
}

.price-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
}

.price-na {
    font-size: 14px;
    color: var(--gray-400);
}

.product-offers {
    font-size: 13px;
    color: var(--gray-500);
}

.product-offers i {
    color: var(--primary);
    margin-right: 4px;
}

.section-footer {
    text-align: center;
    margin-top: 48px;
}

/* Articles */
.articles-section {
    padding: 80px 0;
    background: var(--white);
}

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

.article-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--gray-100);
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.article-image {
    display: block;
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.article-card:hover .article-image img {
    transform: scale(1.08);
}

.article-content {
    padding: 24px;
}

.article-category {
    display: inline-block;
    padding: 5px 12px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.article-category:hover {
    background: var(--primary);
    color: var(--white);
}

.article-content h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px;
    line-height: 1.45;
}

.article-content h3 a {
    color: var(--gray-800);
}

.article-content h3 a:hover {
    color: var(--primary);
}

.article-excerpt {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
    font-size: 13px;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    gap: 16px;
}

.article-meta i {
    margin-right: 6px;
}

/* Search Section */
.search-section {
    padding: 80px 0;
}

.search-box {
    background: var(--gradient);
    border-radius: var(--radius-xl);
    padding: 64px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.search-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.search-box h2 {
    margin: 0 0 16px;
    font-size: 32px;
    position: relative;
    color: var(--white);
}

.search-box p {
    margin: 0 0 32px;
    font-size: 18px;
    opacity: 0.9;
}

.search-form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.search-form .search-input {
    flex: 1;
    padding: 18px 24px;
    border: none;
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 16px;
}

.search-form .search-input:focus {
    outline: none;
}

.search-form .btn {
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 18px 32px;
}

/* Footer */
.site-footer {
    padding: 80px 0 0;
}

.footer-grid {
    display: grid;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-brand-block .logo {
    font-size: 28px;
    margin-bottom: 8px;
}

.footer-brand-block .logo span,
.footer-brand .logo span {
    color: var(--white);
    -webkit-text-fill-color: var(--white);
}

.footer-brand .logo {
    font-size: 28px;
    margin-bottom: 20px;
}

.footer-text-content,
.footer-brand p {
    font-size: 15px;
    line-height: 1.7;
}

.footer-section h4 {
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 12px;
}

.footer-section a {
    color: var(--gray-400);
    font-size: 15px;
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--white);
    padding-left: 4px;
}

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

.social-links a {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 18px;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
}

.newsletter-form {
    margin-top: 20px;
}

.newsletter-form input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    font-size: 14px;
    background: rgba(255,255,255,0.05);
    color: var(--white);
    margin-bottom: 12px;
}

.newsletter-form input::placeholder {
    color: var(--gray-500);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.newsletter-form button {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form button:hover {
    background: var(--primary-dark);
}

.footer-partners {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 24px 0;
    margin-top: 8px;
}
.footer-partners h4 {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.partner-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.partner-links a {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.2s;
}
.partner-links a:hover {
    color: rgba(255,255,255,0.8);
}

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

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

.footer-legal a {
    color: var(--gray-500);
    font-size: 14px;
}

.footer-legal a:hover {
    color: var(--white);
}

.copyright {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
}

/* Breadcrumbs */
.breadcrumb {
    padding: 20px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--gray-500);
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb .separator {
    color: var(--gray-300);
}

.breadcrumb span:last-child {
    color: var(--gray-700);
    font-weight: 500;
}

/* Breadcrumbs (nav with ul/li structure) */
.breadcrumbs {
    padding: 20px 0;
    font-size: 14px;
}

.breadcrumbs ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: var(--gray-300);
}

.breadcrumbs li a {
    color: var(--gray-500);
    transition: color 0.2s;
}

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

.breadcrumbs li.active span {
    color: var(--gray-700);
    font-weight: 500;
}

/* Page Header */
.page-header {
    margin-bottom: 32px;
}

.page-header h1 {
    font-size: 36px;
    margin: 0 0 8px;
}

.page-header p {
    font-size: 18px;
    color: var(--gray-500);
    margin: 0;
}

/* Cards */
.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.card-body {
    padding: 24px;
}

/* Alerts */
.alert {
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 15px;
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Cookie Consent */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--gray-900);
    color: var(--white);
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cookie-content p {
    margin: 0;
    font-size: 14px;
    color: var(--gray-300);
}

.cookie-content a {
    color: var(--primary-light);
}

.cookie-buttons {
    display: flex;
    gap: 12px;
}

/* Product Detail */
.product-detail {
    padding: 40px 0;
}

.product-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.product-gallery .main-image {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    border: 1px solid var(--gray-100);
}

.product-gallery .main-image img {
    max-height: 400px;
    object-fit: contain;
}

.thumbnail-list {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.thumbnail {
    width: 80px;
    height: 80px;
    background: var(--white);
    border-radius: var(--radius);
    padding: 8px;
    cursor: pointer;
    border: 2px solid var(--gray-200);
    transition: var(--transition);
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--primary);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-info h1 {
    font-size: 32px;
    margin: 0 0 16px;
}

.price-stats {
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8e0f4 100%);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 28px;
}

.price-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.price-main .price-label {
    font-size: 14px;
    color: var(--gray-600);
}

.price-main .price-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-dark);
}

.price-range {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 12px;
}

.offers-count {
    font-size: 15px;
    color: var(--gray-700);
    font-weight: 500;
}

.offers-count i {
    color: var(--primary);
    margin-right: 6px;
}

/* Offers */
.offers-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid var(--gray-100);
}

.offers-section h2 {
    font-size: 24px;
    margin: 0 0 28px;
}

.offers-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.offer-card {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.offer-card:hover {
    background: var(--gray-100);
}

.offer-eshop img {
    height: 32px;
}

.offer-eshop .eshop-name {
    font-weight: 600;
    color: var(--gray-800);
}

.eshop-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--accent);
    margin-left: 12px;
}

.offer-price .price {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.offer-price .price-original {
    font-size: 14px;
    color: var(--gray-400);
    text-decoration: line-through;
    margin-left: 8px;
}

.offer-price .price-discount {
    background: var(--danger);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    margin-left: 8px;
}

.availability.in-stock {
    color: var(--success);
    font-weight: 500;
}

.availability.out-of-stock {
    color: var(--danger);
}

.offer-availability .delivery {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 4px;
}

/* Description sections */
.product-description,
.product-parameters,
.price-history,
.related-products {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid var(--gray-100);
}

.product-description h2,
.product-parameters h2,
.price-history h2,
.related-products h2 {
    font-size: 22px;
    margin: 0 0 24px;
}

.description-content {
    line-height: 1.8;
    color: var(--gray-700);
}

.parameters-table {
    width: 100%;
    border-collapse: collapse;
}

.parameters-table th,
.parameters-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
}

.parameters-table th {
    width: 220px;
    color: var(--gray-500);
    font-weight: 500;
    background: var(--gray-50);
}

.parameters-table tr:last-child th,
.parameters-table tr:last-child td {
    border-bottom: none;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--gray-600);
    font-weight: 500;
    transition: var(--transition);
}

.pagination .page-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination .page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* Form elements */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 15px;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}

/* Badge */
.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

/* Responsive */
@media (max-width: 1200px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-grid,
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .hero-text h1 {
        font-size: 40px;
    }
}

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

    .main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
        margin-left: auto;
    }

    .header-content {
        justify-content: space-between;
    }

    .hero {
        padding: 60px 0;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-image {
        display: none;
    }

    .hero-text h1 {
        font-size: 32px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .boxes-grid {
        grid-template-columns: 1fr;
    }

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

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

    .articles-grid {
        grid-template-columns: 1fr;
    }

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

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

    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    .search-box {
        padding: 40px 24px;
    }

    .search-form {
        flex-direction: column;
    }

    .search-form .search-input {
        border-radius: var(--radius);
    }

    .search-form .btn {
        border-radius: var(--radius);
    }

    .section-header h2 {
        font-size: 28px;
    }

    .page-header h1 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .category-card {
        padding: 20px 12px;
    }

    .category-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}


/* Category Page Styles */
.page-title { font-size: 32px; font-weight: 800; margin: 0 0 32px; color: var(--gray-900); }
.main-categories { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.category-card.large { padding: 40px 24px; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.category-card.large h2 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; color: var(--gray-800); }
.category-card.large .subcategories-count { font-size: 13px; color: var(--gray-500); }
.category-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-200); }
.category-header h1 { font-size: 32px; font-weight: 800; margin: 0; flex: 1; min-width: 200px; }
.category-description { width: 100%; color: var(--gray-600); margin: 0; font-size: 16px; line-height: 1.6; }
.products-count { background: var(--primary-light); color: var(--primary-dark); padding: 8px 16px; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; }

/* Subcategories */
.subcategories-section { margin-bottom: 40px; }
.subcategories-section h2 { font-size: 20px; font-weight: 700; margin: 0 0 20px; color: var(--gray-800); }
.subcategories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.subcategory-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; background: var(--white); border: 2px solid var(--gray-100); border-radius: var(--radius-lg); text-align: center; transition: var(--transition); color: var(--gray-700); }
.subcategory-card:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.subcategory-card i { font-size: 24px; color: var(--primary); }
.subcategory-card span { font-weight: 600; font-size: 14px; }
.subcategory-card small { font-size: 12px; color: var(--gray-500); }

/* Category Content Layout */
.category-content { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }

/* Filters Panel */
.filters-panel { background: var(--white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100); position: sticky; top: 100px; }
.filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-100); }
.filters-header h3 { font-size: 18px; font-weight: 700; margin: 0; }
.reset-filters { font-size: 13px; color: var(--gray-500); }
.reset-filters:hover { color: var(--primary); }
.filter-group { margin-bottom: 24px; }
.filter-group h4 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--gray-700); }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input { flex: 1; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 14px; max-width: 80px; }
.price-inputs input:focus { outline: none; border-color: var(--primary); }
.price-inputs span { color: var(--gray-400); font-size: 13px; }
.price-range-info { margin-top: 8px; font-size: 12px; color: var(--gray-500); }
.filter-options { display: flex; flex-direction: column; gap: 8px; }
.filter-options.scrollable { max-height: 200px; overflow-y: auto; padding-right: 8px; }
.filter-option { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--gray-700); }
.filter-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.filter-option small { color: var(--gray-400); margin-left: auto; }

/* Products Toolbar */
.products-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 16px 20px; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-100); }
.filter-toggle { display: none; }
.sort-options { display: flex; align-items: center; gap: 12px; }
.sort-options label { font-size: 14px; color: var(--gray-600); font-weight: 500; }
.sort-options select { padding: 10px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 14px; background: var(--white); cursor: pointer; min-width: 180px; }
.sort-options select:focus { outline: none; border-color: var(--primary); }

/* No Products */
.no-products { text-align: center; padding: 80px 40px; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-100); }
.no-products i { font-size: 48px; color: var(--gray-300); margin-bottom: 20px; display: block; }
.no-products h3 { font-size: 20px; margin: 0 0 8px; color: var(--gray-700); }
.no-products p { color: var(--gray-500); margin: 0; }

/* Product Card enhancements */
.product-card .product-info { padding: 20px; }
.product-card .product-info h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; line-height: 1.5; min-height: 42px; }
.product-card .product-brand { font-size: 12px; color: var(--gray-500); margin-bottom: 12px; display: block; }
.product-card .product-price { margin-bottom: 8px; }
.product-card .price-current { font-size: 20px; font-weight: 700; color: var(--primary); }
.product-card .price-range { font-size: 14px; color: var(--gray-500); margin-left: 4px; }
.product-card .price-unavailable { font-size: 14px; color: var(--gray-400); }
.product-card .product-meta { display: flex; align-items: center; gap: 12px; }
.product-card .offers-count { font-size: 13px; color: var(--gray-500); }
.product-card .offers-count i { color: var(--primary); margin-right: 4px; }
.discount-badge { position: absolute; top: 12px; left: 12px; background: var(--danger); color: var(--white); padding: 5px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; }

/* Category Content Text */
.category-content-text { margin-top: 48px; padding: 32px; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-100); line-height: 1.8; color: var(--gray-700); }

/* Page dots */
.page-dots { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; color: var(--gray-400); }

/* Responsive */
@media (max-width: 1024px) { .category-content { grid-template-columns: 240px 1fr; gap: 24px; } }
@media (max-width: 768px) {
    .category-content { grid-template-columns: 1fr; }
    .filters-panel { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; border-radius: 0; overflow-y: auto; padding-top: 60px; }
    .filters-panel.show { display: block; }
    .filter-toggle { display: flex; }
    .products-toolbar { flex-wrap: wrap; gap: 12px; }
    .sort-options { width: 100%; }
    .sort-options select { flex: 1; }
    .subcategories-grid { display: flex; flex-direction: column; }
    .category-header h1 { font-size: 24px; }
    .main-categories { grid-template-columns: repeat(2, 1fr); }
}

/* Info bar */
.info-bar { padding: 12px 0; text-align: center; font-size: 14px; font-weight: 500; }
.info-bar .container { display: flex; align-items: center; justify-content: center; gap: 16px; }
.info-bar-close { background: none; border: none; color: inherit; font-size: 20px; cursor: pointer; opacity: 0.7; padding: 0 8px; }
.info-bar-close:hover { opacity: 1; }


/* ===================================
   Categories Section
   =================================== */

.categories-section {
    margin-bottom: 40px;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 20px;
}

.main-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.main-category-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray-100);
    transition: var(--transition);
    color: var(--gray-800);
}

.main-category-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    color: var(--primary);
}

.main-category-card .category-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-light), #e0f2fe);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.main-category-card .category-icon i {
    font-size: 24px;
    color: var(--primary);
}

.main-category-card:hover .category-icon {
    background: var(--primary);
}

.main-category-card:hover .category-icon i {
    color: var(--white);
}

.main-category-card .category-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}

.main-category-card .category-count {
    font-size: 13px;
    color: var(--gray-500);
}

/* Subcategories */
.subcategories-section {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
}

.subcategories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.subcategory-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    transition: var(--transition);
}

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

.subcategory-link .count {
    font-size: 12px;
    color: var(--gray-400);
}

.subcategory-link:hover .count {
    color: rgba(255,255,255,0.8);
}

/* Products Grid improvements */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.product-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gray-100);
    transition: var(--transition);
}

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

.product-card .product-image {
    display: block;
    position: relative;
    padding-top: 100%;
    background: #fff;
}

.product-card .product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.product-card .product-info {
    padding: 16px;
}

.product-card .product-info h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card .product-info h3 a {
    color: var(--gray-800);
}

.product-card .product-info h3 a:hover {
    color: var(--primary);
}

.product-card .product-brand {
    display: block;
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.product-card .product-price {
    margin-bottom: 8px;
}

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

.product-card .price-range {
    font-size: 14px;
    color: var(--gray-400);
}

.product-card .price-unavailable {
    font-size: 14px;
    color: var(--gray-400);
    font-style: italic;
}

.product-card .product-meta {
    display: flex;
    align-items: center;
}

.product-card .offers-count {
    font-size: 13px;
    color: var(--gray-500);
}

.product-card .offers-count i {
    margin-right: 6px;
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .main-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .main-category-card {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .main-category-card .category-icon {
        width: 48px;
        height: 48px;
    }

    .main-category-card .category-icon i {
        font-size: 20px;
    }

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

    .subcategories-list {
        gap: 8px;
    }

    .subcategory-link {
        padding: 6px 12px;
        font-size: 13px;
    }
}


/* =====================================================
   CATEGORY PAGE - MODERN DESIGN 2026
   ===================================================== */

/* Category Hero */
.category-hero {
    background: var(--gradient);
    padding: 48px 0 56px;
    position: relative;
    overflow: hidden;
}

.category-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    border-radius: 50%;
}

.category-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
    border-radius: 50%;
}

.category-hero .container {
    position: relative;
    z-index: 1;
}

.category-hero h1 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}

.category-hero > .container > p {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    margin: 0 0 20px;
    max-width: 600px;
}
.category-hero p {
    color: rgba(255,255,255,0.9);
}

.hero-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.hero-stats span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.hero-stats span i {
    font-size: 16px;
}

/* Breadcrumb Light */
.breadcrumb-light {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-light a {
    color: rgba(255,255,255,0.75);
    transition: color 0.2s;
}

.breadcrumb-light a:hover {
    color: #fff;
}

.breadcrumb-light span {
    color: rgba(255,255,255,0.5);
}

.breadcrumb-light .current {
    color: #fff;
    font-weight: 500;
}

/* Category Page Content */
.category-page-content {
    padding: 32px 0 60px;
}

/* All Categories Grid (hlavní stránka kategorií) */
.all-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 40px 0;
}

.main-category-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    border: 2px solid var(--gray-100);
    transition: all 0.3s ease;
    text-decoration: none;
}

.main-category-box:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
    transform: translateY(-4px);
}

.category-box-icon {
    width: 64px;
    height: 64px;
    background: var(--gradient);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.main-category-box:hover .category-box-icon {
    transform: scale(1.1);
}

.category-box-icon i {
    font-size: 28px;
    color: #fff;
}

.category-box-content {
    flex: 1;
}

.category-box-content h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 6px;
}

.subcats-count {
    font-size: 14px;
    color: var(--gray-500);
}

.products-count {
    font-size: 13px;
    color: var(--primary);
    font-weight: 500;
    display: block;
    margin-top: 2px;
}

.category-box-arrow {
    color: var(--gray-300);
    font-size: 18px;
    transition: all 0.3s ease;
}

.main-category-box:hover .category-box-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

/* Subcategories Showcase */
.subcategories-showcase {
    margin-bottom: 32px;
    padding: 0;
}

.subcategories-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px;
}

.subcat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 2px solid var(--gray-100);
    border-radius: 12px;
    transition: all 0.25s ease;
    text-decoration: none;
    width: 200px;
    min-height: 72px;
    box-sizing: border-box;
}

.subcat-card:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-2px);
}

.subcat-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.subcat-icon i {
    font-size: 18px;
    color: #fff;
}

.subcat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.subcat-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.subcat-count {
    font-size: 12px;
    color: var(--gray-500);
}

/* Category Main Grid */
.category-main-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

/* Filters Sidebar */
.filters-sidebar {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--gray-100);
    position: sticky;
    top: 100px;
}

.filters-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--gray-100);
}

.filters-sidebar-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
}

.filters-sidebar-header h3 i {
    color: var(--primary);
}

.close-filters {
    display: none;
    width: 36px;
    height: 36px;
    background: var(--gray-100);
    border: none;
    border-radius: 10px;
    color: var(--gray-600);
    cursor: pointer;
    font-size: 16px;
}

.filter-block {
    margin-bottom: 28px;
}

.filter-block h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brand-search-wrapper {
    position: relative;
    margin-bottom: 14px;
}

.brand-search-input {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
    background: #fff;
}

.brand-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.brand-search-input::placeholder {
    color: var(--gray-400);
}

.brand-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 14px;
    pointer-events: none;
}

.price-filter-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.price-input-group input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
}

.price-input-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.price-input-group .currency {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 13px;
}

.price-separator {
    color: var(--gray-400);
    font-weight: 500;
}

.price-range-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--gray-500);
}

.filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 8px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
}

.filter-checkbox input {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: 6px;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-checkbox input:checked + .checkbox-custom {
    background: var(--gradient);
    border-color: var(--primary);
}

.filter-checkbox input:checked + .checkbox-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 11px;
}

.checkbox-label {
    color: var(--gray-700);
    flex: 1;
}

.checkbox-count {
    color: var(--gray-400);
    font-size: 13px;
}

.stock-filter {
    padding: 14px 16px;
    background: var(--gray-50);
    border-radius: 10px;
}

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--gray-100);
}

.btn-filter-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filter-apply:hover {
    background: var(--gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.btn-filter-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-filter-reset:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

/* Products Main */
.products-main {
    min-width: 0;
}

.products-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--gray-100);
}

.btn-show-filters {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.products-count-badge {
    font-size: 14px;
    color: var(--gray-600);
}

.products-count-badge span {
    font-weight: 700;
    color: var(--primary);
}

.sort-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.sort-dropdown label {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

.sort-dropdown select {
    padding: 10px 16px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    min-width: 180px;
    transition: all 0.2s;
}

.sort-dropdown select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Products Grid Modern */
.products-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.product-card-modern {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--gray-100);
    transition: all 0.3s ease;
}

.product-card-modern:hover {
    border-color: transparent;
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
    transform: translateY(-6px);
}

.product-card-image {
    display: block;
    position: relative;
    padding-top: 100%;
    background: var(--gray-50);
    overflow: hidden;
}

.product-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.4s ease;
}

.product-card-modern:hover .product-card-image img {
    transform: scale(1.08);
}

.product-badge-discount {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
}

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

.product-card-body h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 44px;
}

.product-card-body h3 a {
    color: var(--gray-800);
    transition: color 0.2s;
}

.product-card-body h3 a:hover {
    color: var(--primary);
}

.product-card-brand {
    display: block;
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card-price {
    margin-bottom: 16px;
}

.product-card-price .price-main {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}

.product-card-price .price-to {
    font-size: 14px;
    color: var(--gray-400);
    margin-left: 4px;
}

.product-card-price .price-na {
    font-size: 14px;
    color: var(--gray-400);
    font-style: italic;
}

.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
}

.offers-badge {
    font-size: 13px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.offers-badge i {
    color: var(--primary);
}

.btn-compare {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-compare:hover {
    background: var(--gradient);
    color: #fff;
}

.btn-compare i {
    font-size: 11px;
    transition: transform 0.2s;
}

.btn-compare:hover i {
    transform: translateX(3px);
}

/* Empty Products */
.empty-products {
    text-align: center;
    padding: 80px 40px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--gray-100);
}

.empty-icon {
    width: 80px;
    height: 80px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.empty-icon i {
    font-size: 32px;
    color: var(--gray-400);
}

.empty-products h3 {
    font-size: 20px;
    margin: 0 0 8px;
    color: var(--gray-700);
}

.empty-products p {
    color: var(--gray-500);
    margin: 0 0 24px;
}

.btn-reset {
    display: inline-flex;
    padding: 12px 24px;
    background: var(--gradient);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    color: #fff;
}

/* Pagination Modern */
.pagination-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
}

.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    color: var(--gray-600);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

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

.page-btn.active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
}

.page-dots {
    color: var(--gray-400);
    padding: 0 8px;
}

/* Category SEO Content */
.category-seo-content {
    margin-top: 48px;
    padding: 32px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--gray-100);
    line-height: 1.8;
    color: var(--gray-700);
}

.category-seo-content h2,
.category-seo-content h3 {
    color: var(--gray-900);
    margin-top: 24px;
}

.category-seo-content h2:first-child,
.category-seo-content h3:first-child {
    margin-top: 0;
}

/* Filters Overlay */
.filters-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
}

.filters-overlay.show {
    display: block;
}

body.filters-open {
    overflow: hidden;
}

/* Responsive Category Page */
@media (max-width: 1100px) {
    .category-main-grid {
        grid-template-columns: 250px 1fr;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .category-main-grid {
        grid-template-columns: 1fr;
    }

    .filters-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        border-radius: 0;
        overflow-y: auto;
        padding-top: 20px;
    }

    .filters-sidebar.show {
        display: block;
    }

    .close-filters {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-show-filters {
        display: flex;
    }

    .products-header {
        flex-wrap: wrap;
    }

    .sort-dropdown {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }

    .sort-dropdown select {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .category-hero {
        padding: 32px 0 40px;
    }

    .category-hero h1 {
        font-size: 28px;
    }

    .category-hero p {
        font-size: 16px;
    }

    .hero-stats {
        gap: 12px;
    }

    .hero-stats span {
        padding: 8px 14px;
        font-size: 13px;
    }

    .all-categories-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 0;
    }

    .main-category-box {
        padding: 18px;
    }

    .category-box-icon {
        width: 52px;
        height: 52px;
    }

    .products-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-card-body {
        padding: 14px;
    }

    .product-card-body h3 {
        font-size: 13px;
        min-height: 38px;
    }

    .product-card-price .price-main {
        font-size: 18px;
    }

    .product-card-footer {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .btn-compare {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .subcategories-scroll {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .subcat-card {
        width: 100% !important;
        max-width: 400px !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 480px) {
    .subcategories-scroll {
        gap: 8px !important;
    }

    .subcat-card {
        padding: 12px 14px !important;
        max-width: 100% !important;
    }

    .subcat-icon {
        width: 36px;
        height: 36px;
    }

    .subcat-icon i {
        font-size: 15px;
    }

    .subcat-name {
        font-size: 13px;
    }
}

/* ===========================================
   SIDEBAR LAYOUT
   =========================================== */

.page-with-sidebar {
    display: flex;
    gap: 30px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.page-with-sidebar .page-content {
    flex: 1;
    min-width: 0;
}

.page-with-sidebar.sidebar-right {
    flex-direction: row;
}

.page-with-sidebar.sidebar-left {
    flex-direction: row-reverse;
}

.page-sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* Sidebar widgets */
.sidebar-widget {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}

.sidebar-widget .widget-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-100);
}

.sidebar-widget .widget-content {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
}

/* Widget banner */
.widget-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    transition: transform 0.2s, box-shadow 0.2s;
}

.widget-banner:hover img {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Widget categories */
.widget-categories ul,
.widget-popular_articles ul,
.widget-latest_articles ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-categories li,
.widget-popular_articles li,
.widget-latest_articles li {
    margin-bottom: 8px;
}

.widget-categories a,
.widget-popular_articles a,
.widget-latest_articles a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.2s;
}

.widget-categories a:hover,
.widget-popular_articles a:hover,
.widget-latest_articles a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* Widget newsletter */
.widget-newsletter input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 10px;
}

.widget-newsletter button {
    width: 100%;
    padding: 12px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.widget-newsletter button:hover {
    opacity: 0.9;
}

/* Widget search */
.widget-search form {
    display: flex;
    gap: 8px;
}

.widget-search input[type="search"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.widget-search button {
    padding: 10px 16px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Widget tags */
.widget-tags .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.widget-tags .tag-cloud a {
    display: inline-block;
    padding: 6px 12px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-full);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.widget-tags .tag-cloud a:hover {
    background: var(--primary);
    color: var(--white);
}

/* Widget social */
.widget-social .social-links {
    display: flex;
    gap: 10px;
}

.widget-social .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius);
    font-size: 18px;
    transition: all 0.2s;
}

.widget-social .social-links a:hover {
    background: var(--primary);
    color: var(--white);
}

/* Widget products */
.widget-products,
.widget-popular_products ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-products li,
.widget-popular_products li {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
}

.widget-products li:last-child,
.widget-popular_products li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.widget-products a,
.widget-popular_products a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.2s;
}

.widget-products a:hover,
.widget-popular_products a:hover {
    color: var(--primary);
}

.widget-products img,
.widget-popular_products img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius);
    flex-shrink: 0;
    background: var(--gray-50);
}

.widget-products .product-info,
.widget-popular_products .product-info {
    flex: 1;
    min-width: 0;
}

.widget-products .name,
.widget-popular_products .name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.widget-products .price,
.widget-popular_products .price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 4px;
}

/* Widget articles */
.widget-articles {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-articles li {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
}

.widget-articles li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.widget-articles a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.2s;
}

.widget-articles a:hover {
    color: var(--primary);
}

.widget-articles img {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--radius);
    flex-shrink: 0;
    background: var(--gray-50);
}

.widget-articles .article-info {
    flex: 1;
    min-width: 0;
}

.widget-articles .title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.widget-articles .date {
    display: block;
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 4px;
}

/* Widget breeds */
.widget-breeds {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-breeds li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-100);
}

.widget-breeds li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.widget-breeds a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.2s;
}

.widget-breeds a:hover {
    color: var(--primary);
}

.widget-breeds img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gray-100);
}

.widget-breeds .breed-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gray-400);
    font-size: 18px;
}

.widget-breeds .breed-info {
    flex: 1;
    min-width: 0;
}

.widget-breeds .name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.widget-breeds .size {
    display: block;
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 2px;
}

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

@media (max-width: 1024px) {
    /* Reset sidebar layout for mobile - display as block, not flex */
    .page-with-sidebar,
    .page-with-sidebar.sidebar-left,
    .page-with-sidebar.sidebar-right {
        display: block !important;
        padding: 0 15px !important;
    }

    .page-with-sidebar .page-content {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    .page-sidebar,
    aside.page-sidebar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 30px 0 0 0 !important;
        padding: 0 !important;
    }

    .sidebar-widget {
        padding: 16px;
    }

    /* Product detail */
    .product-main {
        display: block !important;
    }

    .product-gallery {
        margin-bottom: 24px;
    }

    .product-gallery .main-image {
        padding: 20px;
    }

    .product-info h1 {
        font-size: 24px;
    }

    .price-stats {
        padding: 20px;
    }

    .price-main .price-value {
        font-size: 28px;
    }

    /* Offers */
    .offers-section {
        padding: 20px;
    }

    .offer-card {
        display: block !important;
        padding: 16px;
    }

    .offer-card.offer-best {
        transform: none;
    }

    .best-offer-badge {
        position: static;
        display: inline-flex;
        margin-bottom: 12px;
    }

    .offer-eshop {
        margin-bottom: 12px;
    }

    .offer-price {
        margin-bottom: 12px;
    }

    .offer-action {
        width: 100%;
    }

    .offer-action .btn {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Category */
    .category-header {
        display: block !important;
    }

    .category-header h1 {
        margin-bottom: 12px;
    }

    .subcategories-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
    }

    .subcategory-card {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    /* Products */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .product-card {
        padding: 12px;
    }

    .product-card h3 {
        font-size: 13px;
        line-height: 1.3;
    }

    /* Articles */
    .articles-grid {
        grid-template-columns: 1fr;
    }

    /* Thumbnails */
    .thumbnail-list {
        flex-wrap: wrap;
    }

    .thumbnail {
        width: 60px;
        height: 60px;
    }

    /* Eshop in offers */
    .eshop-logo-large {
        height: 40px;
        max-width: 80px;
    }

    .eshop-name-text a {
        font-size: 14px;
    }

    .offer-price .price {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .page-sidebar {
        margin-top: 20px !important;
    }

    .sidebar-widget {
        padding: 14px;
    }

    .products-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .product-info h1 {
        font-size: 20px;
    }

    .price-main .price-value {
        font-size: 22px;
    }

    .eshop-logo-large {
        height: 32px;
        max-width: 60px;
    }

    .widget-breeds li a {
        padding: 10px;
        gap: 10px;
    }

    .widget-breeds img,
    .widget-breeds .breed-icon {
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   Gift Oracle - Věštecká koule (premium)
   ============================================================ */

.gift-oracle-section {
    padding: 100px 0 80px;
    background: linear-gradient(170deg, #070b1a 0%, #0f1b3d 30%, #1a0a2e 60%, #0d1117 100%);
    overflow: hidden;
    position: relative;
}

/* Ambient nebula blobs */
.gift-oracle-section::before,
.gift-oracle-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}
.gift-oracle-section::before {
    width: 600px; height: 600px;
    top: -200px; left: -100px;
    background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
    animation: oracleNebula1 12s ease-in-out infinite;
}
.gift-oracle-section::after {
    width: 500px; height: 500px;
    bottom: -150px; right: -80px;
    background: radial-gradient(circle, rgba(56,189,248,0.08) 0%, transparent 70%);
    animation: oracleNebula2 15s ease-in-out infinite;
}

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

.oracle-title {
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 12px;
    text-align: center;
    background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.oracle-subtitle {
    color: rgba(255,255,255,0.5);
    font-size: 17px;
    text-align: center;
    margin: 0 0 48px;
    font-style: italic;
}

/* Crystal ball */
.oracle-ball-container {
    position: relative;
    width: 300px;
    height: 340px;
    margin: 0 auto;
}

.oracle-glow {
    position: absolute;
    width: 260px; height: 260px;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, rgba(59,130,246,0.15) 40%, transparent 70%);
    filter: blur(30px);
    animation: oracleGlowPulse 4s ease-in-out infinite;
}

.oracle-ball {
    position: absolute;
    width: 260px; height: 260px;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}

.oracle-ball:hover { transform: translateX(-50%) scale(1.06); }
.oracle-ball:active { transform: translateX(-50%) scale(0.96); }

.oracle-ball-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(200,180,255,0.2) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(59,130,246,0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(20,10,50,0.95) 0%, rgba(10,5,30,1) 100%);
    box-shadow:
        0 0 80px rgba(139,92,246,0.35),
        0 0 160px rgba(99,102,241,0.12),
        inset 0 0 80px rgba(139,92,246,0.1),
        inset 0 -20px 40px rgba(0,0,0,0.4),
        0 12px 40px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
    border: 1.5px solid rgba(139,92,246,0.25);
    transition: box-shadow 0.4s;
}

.oracle-ball:hover .oracle-ball-inner {
    box-shadow:
        0 0 100px rgba(139,92,246,0.5),
        0 0 200px rgba(99,102,241,0.15),
        inset 0 0 80px rgba(139,92,246,0.15),
        inset 0 -20px 40px rgba(0,0,0,0.4),
        0 12px 40px rgba(0,0,0,0.6);
}

.oracle-mist {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 35%, rgba(167,139,250,0.2) 0%, transparent 55%);
    animation: oracleMist 7s ease-in-out infinite;
}

.oracle-mist-2 {
    background: radial-gradient(circle at 35% 65%, rgba(59,130,246,0.12) 0%, transparent 50%);
    animation: oracleMist2 9s ease-in-out infinite;
}

.oracle-stars {
    position: absolute; inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(1.5px 1.5px at 25% 35%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 18% 55%, rgba(167,139,250,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 78% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 42%, rgba(129,140,248,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 82% 38%, rgba(255,255,255,0.3) 0%, transparent 100%);
    animation: oracleStarsTwinkle 3s ease-in-out infinite;
}

.oracle-prompt {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.9);
    font-size: 18px; font-weight: 700;
    gap: 10px;
    text-shadow: 0 0 20px rgba(139,92,246,0.5), 0 2px 8px rgba(0,0,0,0.5);
    animation: oraclePromptPulse 2.5s ease-in-out infinite;
}

.oracle-prompt i {
    font-size: 44px;
    color: #c4b5fd;
    filter: drop-shadow(0 0 12px rgba(167,139,250,0.6));
}

/* Glass shine reflection */
.oracle-shine {
    position: absolute;
    top: 14px; left: calc(50% - 128px + 20px);
    width: 80px; height: 40px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.18) 0%, transparent 70%);
    border-radius: 50%;
    transform: rotate(-25deg);
    pointer-events: none;
}

/* Ornate base */
.oracle-base {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 180px; height: 50px;
    background: linear-gradient(180deg, #201838 0%, #120e20 100%);
    border-radius: 8px 8px 50% 50% / 8px 8px 100% 100%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(139,92,246,0.15);
}
.oracle-base::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(167,139,250,0.4), rgba(129,140,248,0.3), transparent);
    border-radius: 2px;
}
.oracle-base::after {
    content: '';
    position: absolute;
    top: 6px; left: 25%; right: 25%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

.oracle-sparkles { position: absolute; inset: 0; pointer-events: none; }
.oracle-sparkle {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    animation: oracleSparklePop 1s ease-out forwards;
}
.oracle-sparkle:nth-child(odd) { background: #c4b5fd; }
.oracle-sparkle:nth-child(even) { background: #818cf8; }

/* Ball active state */
.oracle-ball-active .oracle-ball-inner {
    animation: oracleBallShake 0.7s ease-in-out;
    box-shadow:
        0 0 120px rgba(139,92,246,0.6),
        0 0 240px rgba(99,102,241,0.2),
        inset 0 0 80px rgba(168,85,247,0.25),
        0 12px 40px rgba(0,0,0,0.6);
}
.oracle-ball-active .oracle-mist { animation: oracleMistFast 0.6s ease-in-out infinite; }
.oracle-ball-active .oracle-glow { animation: none; opacity: 1; filter: blur(25px); transform: translateX(-50%) scale(1.3); }

/* ── Result panel ───────────────────────────────────── */

.oracle-result {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oracle-empty-state {
    display: flex; flex-direction: column;
    align-items: center; gap: 20px;
    color: rgba(255,255,255,0.3);
    text-align: center;
    font-size: 17px; line-height: 1.7;
}
.oracle-empty-state i {
    font-size: 56px;
    color: rgba(139,92,246,0.25);
    filter: drop-shadow(0 0 20px rgba(139,92,246,0.15));
}

.oracle-loading {
    display: flex; flex-direction: column;
    align-items: center; gap: 20px;
    color: rgba(255,255,255,0.6);
    font-size: 16px; font-style: italic;
}
.oracle-loading-spinner {
    width: 48px; height: 48px;
    border: 3px solid rgba(139,92,246,0.15);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Product card */
.oracle-product {
    background: linear-gradient(145deg, rgba(139,92,246,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 20px;
    padding: 28px;
    max-width: 400px;
    width: 100%;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 60px rgba(139,92,246,0.05);
}

.oracle-product-badge {
    display: inline-flex;
    align-items: center; gap: 6px;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    font-size: 12px; font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

.oracle-product-img {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.oracle-product-img img {
    max-width: 100%; max-height: 180px;
    object-fit: contain;
}

.oracle-product-info h3 {
    color: #fff;
    font-size: 17px; font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.5;
}

.oracle-product-brand {
    color: #a78bfa;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 4px;
}

.oracle-product-meta {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 20px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.oracle-product-price {
    color: #34d399;
    font-size: 22px; font-weight: 800;
}
.oracle-product-offers {
    color: rgba(255,255,255,0.45);
    font-size: 13px;
}

.oracle-product .btn {
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 600;
}

.oracle-again-btn {
    border-color: rgba(139,92,246,0.25) !important;
    color: rgba(255,255,255,0.5) !important;
    background: rgba(139,92,246,0.06) !important;
}
.oracle-again-btn:hover {
    border-color: rgba(139,92,246,0.5) !important;
    color: #c4b5fd !important;
    background: rgba(139,92,246,0.12) !important;
}

.oracle-reveal-anim { animation: oracleRevealCard 0.6s cubic-bezier(.34,1.56,.64,1); }

.oracle-cta {
    text-align: center;
    margin-top: 56px;
    position: relative; z-index: 1;
}

/* ── Animations ─────────────────────────────────────── */

@keyframes oracleNebula1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(40px, 20px) scale(1.1); opacity: 0.9; }
}
@keyframes oracleNebula2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-30px, -15px) scale(1.15); opacity: 0.8; }
}

@keyframes oracleGlowPulse {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}
@keyframes oracleMist {
    0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(1) rotate(0); }
    33% { opacity: 0.8; transform: translate(12px, -8px) scale(1.08) rotate(5deg); }
    66% { opacity: 0.3; transform: translate(-10px, 6px) scale(0.95) rotate(-3deg); }
}
@keyframes oracleMist2 {
    0%, 100% { opacity: 0.3; transform: translate(0, 0) rotate(0); }
    50% { opacity: 0.6; transform: translate(-12px, -10px) rotate(-8deg); }
}
@keyframes oracleStarsTwinkle {
    0%, 100% { opacity: 0.5; }
    25% { opacity: 0.9; }
    75% { opacity: 0.7; }
}
@keyframes oraclePromptPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}
@keyframes oracleBallShake {
    0%, 100% { transform: rotate(0) scale(1); }
    15% { transform: rotate(-4deg) scale(1.04); }
    30% { transform: rotate(4deg) scale(1.07); }
    50% { transform: rotate(-3deg) scale(1.05); }
    70% { transform: rotate(2deg) scale(1.02); }
    85% { transform: rotate(-1deg); }
}
@keyframes oracleMistFast {
    0%, 100% { opacity: 0.8; transform: rotate(0) scale(1); }
    50% { opacity: 1; transform: rotate(180deg) scale(1.15); }
}
@keyframes oracleSparklePop {
    0% { transform: scale(0) rotate(0); opacity: 1; }
    40% { transform: scale(2) rotate(90deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(180deg); opacity: 0; }
}
@keyframes oracleRevealCard {
    0% { opacity: 0; transform: translateY(30px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes oracleStarFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    25% { transform: translateY(-15px) scale(1.3); opacity: 0.7; }
    50% { transform: translateY(-8px) scale(0.8); opacity: 0.5; }
    75% { transform: translateY(-20px) scale(1.1); opacity: 0.8; }
}

.oracle-bg-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 1024px) {
    .oracle-wrapper { gap: 48px; }
    .oracle-ball-container { width: 260px; height: 300px; }
    .oracle-ball, .oracle-glow { width: 220px; height: 220px; }
}

@media (max-width: 768px) {
    .gift-oracle-section { padding: 60px 0; }
    .oracle-wrapper { grid-template-columns: 1fr; gap: 32px; }
    .oracle-title { font-size: 26px; }
    .oracle-ball-container { width: 220px; height: 260px; }
    .oracle-ball, .oracle-glow { width: 180px; height: 180px; top: 15px; }
    .oracle-shine { top: 18px; left: calc(50% - 88px + 18px); width: 55px; height: 28px; }
    .oracle-base { width: 140px; height: 40px; }
    .oracle-result { min-height: auto; }
    .oracle-product { max-width: 100%; }
}

/* redesign.css */
/**
 * Tipy na dárek — frontend redesign overlay
 * Override stylů z style.css. Soustředí se na moderní vzhled, animace a luxusní hover efekty.
 * Barvy zachovány (zlatá #b8862e + krémová), polished typografie.
 */

/* ============================================================
   ROZŠÍŘENÉ DESIGN TOKENS
   ============================================================ */
:root {
    /* Tlumené zlaté přechody */
    --gold-100: #fef9ed;
    --gold-200: #fcebc4;
    --gold-300: #f4d588;
    --gold-400: #d8a64c;
    --gold-500: #b8862e;
    --gold-600: #8b5e1a;
    --gold-700: #5e3f10;

    /* Premium gradients */
    --grad-gold: linear-gradient(135deg, #d8a64c 0%, #b8862e 50%, #8b5e1a 100%);
    --grad-gold-soft: linear-gradient(135deg, #fef9ed 0%, #fcebc4 100%);
    --grad-shimmer: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);

    /* Premium shadows (cooler, longer, multi-layer) */
    --shadow-soft:  0 1px 2px rgba(15,23,42,0.04), 0 2px 4px rgba(15,23,42,0.04);
    --shadow-card:  0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.05);
    --shadow-pop:   0 14px 28px -10px rgba(15,23,42,0.18), 0 6px 12px -6px rgba(184,134,46,0.18);
    --shadow-deep:  0 30px 60px -15px rgba(15,23,42,0.25), 0 12px 24px -8px rgba(184,134,46,0.18);
    --shadow-glow:  0 0 0 1px rgba(184,134,46,0.18), 0 8px 24px -6px rgba(184,134,46,0.30);

    /* Easings — physical-feel motion */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

    --t-fast: 180ms;
    --t-med:  280ms;
    --t-slow: 480ms;
}

/* ============================================================
   GLOBÁLNÍ POLISH
   ============================================================ */
body {
    font-feature-settings: "ss01", "cv11";
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--gold-300);
    color: var(--gold-700);
}

/* Smooth focus rings všude */
*:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================================
   STICKY HEADER s BACKDROP-BLUR
   ============================================================ */
.site-header {
    background: rgba(253, 248, 240, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(184, 134, 46, 0.08);
    box-shadow: none;
    transition: background var(--t-med) var(--ease-in-out),
                box-shadow var(--t-med) var(--ease-in-out),
                border-color var(--t-med) var(--ease-in-out);
}

.site-header.is-scrolled {
    background: rgba(253, 248, 240, 0.95);
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.12);
    border-bottom-color: rgba(184, 134, 46, 0.18);
}

.logo {
    transition: transform var(--t-fast) var(--ease-out-back);
}
.logo:hover { transform: scale(1.03); }

.logo i {
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: transform var(--t-med) var(--ease-out-back);
}
.logo:hover i { transform: rotate(-8deg); }

.header-search input {
    border-color: rgba(184, 134, 46, 0.18);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}
.header-search input:hover {
    border-color: rgba(184, 134, 46, 0.35);
}

/* ============================================================
   TLAČÍTKA — gradient + shimmer + glow
   ============================================================ */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: transform var(--t-fast) var(--ease-out-back),
                box-shadow var(--t-med) var(--ease-in-out),
                background var(--t-med) var(--ease-in-out);
}

/* Shimmer pass přes tlačítko při hoveru */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-shimmer);
    transform: translateX(-100%);
    transition: transform 700ms var(--ease-out-expo);
    pointer-events: none;
    z-index: -1;
}
.btn:hover::before {
    transform: translateX(100%);
}

.btn-primary {
    background: var(--grad-gold);
    border: none;
    box-shadow: 0 6px 16px -4px rgba(184, 134, 46, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(184, 134, 46, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    background: transparent;
    border: 1.5px solid var(--gold-500);
    color: var(--gold-600);
    transition: var(--transition);
}
.btn-outline-primary:hover {
    background: var(--gold-500);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(184, 134, 46, 0.5);
}

/* ============================================================
   SECTION TITULKY se zlatou decorative linkou
   ============================================================ */
.section-title {
    position: relative;
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 48px;
    padding-bottom: 18px;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: var(--grad-gold);
    border-radius: 3px;
    box-shadow: 0 2px 8px -2px rgba(184, 134, 46, 0.5);
}

/* ============================================================
   ARTICLE CARDS — luxusní hover efekt
   ============================================================ */
.articles-section {
    background: linear-gradient(180deg, var(--white) 0%, #faf6ed 100%);
}

.article-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(184, 134, 46, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--t-med) var(--ease-out-expo),
                box-shadow var(--t-med) var(--ease-out-expo),
                border-color var(--t-med) var(--ease-in-out);
    isolation: isolate;
}

/* Bottom accent line — vyjede zleva při hoveru */
.article-card::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--grad-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-slow) var(--ease-out-expo);
    z-index: 2;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-deep);
    border-color: rgba(184, 134, 46, 0.25);
}
.article-card:hover::before {
    transform: scaleX(1);
}

/* Obrázek: gradient overlay + soft zoom */
.article-image {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--gold-100), var(--gold-200));
    overflow: hidden;
}
.article-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.45) 100%);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease-in-out);
    z-index: 1;
}
.article-card:hover .article-image::after {
    opacity: 1;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms var(--ease-out-expo),
                filter var(--t-med) var(--ease-in-out);
}
.article-card:hover .article-image img {
    transform: scale(1.08);
    filter: saturate(1.1);
}

/* Article meta polish */
.article-content {
    padding: 24px;
}
.article-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--grad-gold-soft);
    color: var(--gold-600);
    border: 1px solid rgba(184, 134, 46, 0.15);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
    transition: var(--transition);
}
.article-card .article-category:hover,
a.article-category:hover {
    background: var(--grad-gold);
    color: #fff;
    border-color: transparent;
}

.article-card h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
    letter-spacing: -0.2px;
    color: var(--gray-900);
    transition: color var(--t-med) var(--ease-in-out);
}
.article-card h3 a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--gold-500), var(--gold-500));
    background-size: 0 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--t-med) var(--ease-out-expo);
}
.article-card:hover h3 { color: var(--gold-600); }
.article-card h3 a:hover { background-size: 100% 1.5px; }

.article-card p {
    color: var(--gray-600);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 14px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--gray-500);
}
.article-date::before {
    content: "\f073";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 5px;
    color: var(--gold-400);
    font-size: 11px;
}

/* ============================================================
   PRODUCT / HP CARDS — sjednoceno se stylováním článků
   ============================================================ */
.hp-card {
    border: 1px solid rgba(184, 134, 46, 0.08);
    box-shadow: var(--shadow-card);
    transition: transform var(--t-med) var(--ease-out-expo),
                box-shadow var(--t-med) var(--ease-out-expo),
                border-color var(--t-med) var(--ease-in-out);
}
.hp-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-pop);
    border-color: rgba(184, 134, 46, 0.30);
}

/* ============================================================
   DETAIL ČLÁNKU — typografie + featured image
   ============================================================ */
.article-detail {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(184, 134, 46, 0.08);
}

.article-header {
    padding: 48px 48px 32px;
    text-align: center;
    background: var(--grad-gold-soft);
    border-bottom: 1px solid rgba(184, 134, 46, 0.12);
}
.article-header h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin: 16px 0 20px;
    color: var(--gray-900);
}
.article-header .article-category {
    margin-bottom: 0;
}
.article-header .article-meta {
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
    color: var(--gray-600);
}

/* Featured image — bez ořezu, s rámečkem a lehkým stínem */
.article-featured-image {
    margin: 0;
    padding: 24px 48px 0;
    background: #fff;
}
.article-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.18),
                0 0 0 1px rgba(184, 134, 46, 0.08);
}

/* Content typography */
.article-detail .article-content {
    padding: 36px 48px 48px;
    font-size: 18px;
    line-height: 1.78;
    color: var(--gray-800);
}
.article-detail .article-content > *:first-child { margin-top: 0; }
.article-detail .article-content h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 40px 0 16px;
    color: var(--gray-900);
    position: relative;
    padding-left: 18px;
}
.article-detail .article-content h2::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 4px;
    background: var(--grad-gold);
    border-radius: 4px;
}
.article-detail .article-content h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 12px;
    color: var(--gray-900);
}
.article-detail .article-content p {
    margin: 0 0 18px;
}
.article-detail .article-content a {
    color: var(--gold-600);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(var(--gold-400), var(--gold-400));
    background-size: 100% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--t-med) var(--ease-out-expo),
                color var(--t-fast) var(--ease-in-out);
}
.article-detail .article-content a:hover {
    color: var(--gold-700);
    background-size: 100% 100%;
    background-image: linear-gradient(var(--gold-100), var(--gold-100));
}
.article-detail .article-content blockquote {
    margin: 28px 0;
    padding: 20px 28px;
    background: var(--grad-gold-soft);
    border-left: 4px solid var(--gold-500);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--gray-700);
}
.article-detail .article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin: 20px 0;
}
.article-detail .article-content ul,
.article-detail .article-content ol {
    padding-left: 24px;
    margin: 16px 0 22px;
}
.article-detail .article-content li {
    margin-bottom: 8px;
}
.article-detail .article-content ul li::marker {
    color: var(--gold-500);
}

/* Tags pod článkem */
.article-tags {
    padding: 24px 48px;
    border-top: 1px solid rgba(184, 134, 46, 0.12);
    background: var(--gray-50);
}
.article-tags .tag {
    display: inline-block;
    padding: 6px 14px;
    margin: 4px 6px 4px 0;
    background: #fff;
    border: 1px solid rgba(184, 134, 46, 0.18);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    font-size: 13px;
    text-decoration: none;
    transition: var(--transition);
}
.article-tags .tag:hover {
    background: var(--grad-gold);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(184, 134, 46, 0.4);
}

/* ============================================================
   LEGAL PAGES — typography for /podminky-pouzivani, /ochrana-osobnich-udaju, /cookies
   ============================================================ */
.legal-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--gray-800);
}
.legal-content h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 36px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gold-300);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 24px 0 10px;
}
.legal-content p { margin: 0 0 14px; }
.legal-content ul, .legal-content ol { margin: 0 0 18px; padding-left: 26px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a {
    color: var(--gold-600);
    text-decoration: underline;
    text-decoration-color: rgba(184, 134, 46, 0.4);
    text-underline-offset: 3px;
    transition: color var(--t-fast) var(--ease-in-out);
}
.legal-content a:hover { color: var(--gold-700); text-decoration-color: var(--gold-600); }
.legal-content code {
    background: var(--gold-100);
    color: var(--gold-700);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.legal-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.95rem; }
.legal-content th, .legal-content td { padding: 10px 12px; border: 1px solid var(--gray-200); text-align: left; vertical-align: top; }
.legal-content th { background: var(--gold-100); color: var(--gold-700); font-weight: 700; }
.legal-content em { color: var(--gray-500); font-style: italic; }
@media (max-width: 768px) {
    .legal-content { padding: 24px 16px 48px; font-size: 15px; }
    .legal-content h2 { font-size: 1.35rem; }
    .legal-content table { font-size: 0.85rem; }
    .legal-content th, .legal-content td { padding: 8px; }
}

/* ============================================================
   SCROLL-REVEAL ANIMACE
   Přidá se třída .reveal na elementy v JS, .is-visible v IntersectionObserver
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out-expo),
                transform 700ms var(--ease-out-expo);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger pro dětské elementy v gridu */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--ease-out-expo),
                transform 600ms var(--ease-out-expo);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
    .article-detail { border-radius: var(--radius-lg); }
    .article-header { padding: 32px 24px 24px; }
    .article-featured-image { padding: 20px 24px 0; }
    .article-detail .article-content { padding: 28px 24px 32px; font-size: 16.5px; }
    .article-tags { padding: 20px 24px; }
    .section-title { margin-bottom: 32px; }
}

/* oracle.css */
/* ============================================================
   ORACLE ORB — sdílené styly pro 3D skleněnou kouli + recipient picker
   Používá se v hero (.hero-oracle) i v samostatné sekci (.go)
   ============================================================ */

.go, .hero-oracle {
    --bg: #f5efe6;
    --bg2: #ebe3d4;
    --ink: #2a2018;
    --ink-muted: #6b5e4f;
    --gold: #b8862e;
    --gold-bright: #d4ad5c;
    --gold-soft: #fef3da;
}

.go {
    position: relative;
    padding: 50px 0 60px;
    background:
        radial-gradient(ellipse at 50% 0%, #fbf6ec 0%, transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
    color: var(--ink);
    text-align: center;
    overflow: hidden;
}

/* Header (jen v samostatné sekci .go) */
.go-header { position: relative; z-index: 2; }
.go-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid #e8dcc4;
    color: var(--gold);
    padding: 7px 18px; border-radius: 50px;
    font-size: .76rem; font-weight: 700;
    letter-spacing: .8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    text-transform: uppercase;
}
.go-title {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -.5px;
}
.go-sub {
    color: var(--ink-muted);
    font-size: 1.05rem;
    margin: 0 auto 28px;
    max-width: 560px;
    line-height: 1.55;
}

/* Recipient pills */
.go-recipients {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-bottom: 24px;
    position: relative; z-index: 2;
}
.go-rec {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border: 1px solid #d8cab2;
    border-radius: 50px;
    background: #fff;
    color: var(--ink-muted);
    font-size: .82rem; font-weight: 500;
    cursor: pointer; transition: all .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.go-rec:hover {
    border-color: var(--gold);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(184,134,46,.15);
}
.go-rec.active {
    border-color: var(--gold);
    background: linear-gradient(135deg, #fef3da, #fdebc4);
    color: #6e4622;
    box-shadow: 0 4px 16px rgba(184,134,46,.22);
}
.go-rec i { color: var(--gold); }

/* === STAGE (canvas + overlay) === */
.go-stage {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 520px;
    margin: 0 auto;
}
.go-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* Canvas oříznutý na kruh — opaque scene.background nikdy nevytvoří viditelný čtverec */
    -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 76%);
            mask-image: radial-gradient(circle, #000 62%, transparent 76%);
}
.go-canvas:focus-visible {
    outline: 2px solid rgba(184,134,46,.5);
    outline-offset: 4px;
    border-radius: 50%;
}
.go-canvas-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-muted);
}

/* Floating click hint pod koulí */
.go-prompt-hint {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(184,134,46,.3);
    color: var(--gold);
    border-radius: 50px;
    font-size: .82rem; font-weight: 600;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    pointer-events: none;
    animation: goPromptPulse 2.2s ease-in-out infinite;
    z-index: 2;
}
.go-prompt-hint i { color: var(--gold); }

/* Sparkles container (overlays canvas) */
.go-sparkles {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 3;
}
.go-sparkle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--gold-bright) 50%, transparent 70%);
    box-shadow: 0 0 12px var(--gold-bright);
}

/* === RESULT === */
.go-result {
    position: relative; z-index: 2;
    max-width: 540px; margin: 24px auto 0;
    min-height: 60px;
}
.go-result-empty {
    color: var(--ink-muted);
    font-size: .98rem;
    font-style: italic;
    text-align: center;
}
.go-result-loading {
    color: var(--gold);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    font-size: .95rem;
}
.go-spinner {
    width: 42px; height: 42px;
    border: 3px solid rgba(184,134,46,.18);
    border-top-color: var(--gold);
    border-right-color: var(--gold-bright);
    border-radius: 50%;
    animation: goSpin .9s linear infinite;
}
.go-result-card {
    background: #fff;
    border: 1px solid #e8dcc4;
    border-radius: 18px;
    padding: 26px 30px;
    text-align: left;
    animation: goCardIn .55s cubic-bezier(.34, 1.56, .64, 1);
    box-shadow: 0 12px 32px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.5);
}
.go-card-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    color: #fff;
    padding: 5px 14px; border-radius: 16px;
    font-size: .72rem; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(184,134,46,.3);
}
.go-card-who {
    display: inline-block;
    background: var(--gold-soft);
    border: 1px solid #f0e0c0;
    color: #8b5e1a;
    padding: 4px 12px; border-radius: 12px;
    font-size: .78rem; font-weight: 600;
    margin-bottom: 10px;
}
.go-result-card h3 {
    font-size: 1.35rem; font-weight: 700;
    color: var(--ink); margin: 0 0 8px;
}
.go-result-card p {
    color: var(--ink-muted);
    font-size: .95rem;
    margin: 0 0 14px;
    line-height: 1.5;
}
.go-card-price {
    display: inline-block;
    background: #edf7ed;
    color: #2d8a3e;
    padding: 5px 14px; border-radius: 10px;
    font-weight: 700; font-size: .92rem;
    margin-bottom: 18px;
}
.go-card-product { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.go-card-image {
    width: 120px; height: 120px; flex: 0 0 120px;
    object-fit: cover;
    border-radius: 12px;
    background: #f5efe6;
    border: 1px solid #e8dcc4;
}
.go-card-info { flex: 1; min-width: 0; }
.go-card-info h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.go-card-eshop {
    margin: 0 0 8px; font-size: .82rem; color: var(--ink-muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.go-card-eshop i { color: var(--gold); }

.go-card-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.go-btn-primary {
    flex: 1; min-width: 160px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    color: #fff;
    border-radius: 12px;
    font-size: .9rem; font-weight: 700;
    text-decoration: none; transition: all .25s;
    box-shadow: 0 4px 16px rgba(184,134,46,.3);
}
.go-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(184,134,46,.4);
}
.go-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid #d8cab2;
    color: var(--gold);
    border-radius: 12px;
    font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: all .2s;
}
.go-btn-ghost:hover {
    background: var(--gold-soft);
    border-color: var(--gold);
}

.go-cta { margin-top: 32px; position: relative; z-index: 2; }
.go-cta a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 26px;
    background: #fff;
    border: 1px solid #d8cab2;
    color: var(--gold);
    border-radius: 12px;
    font-size: .92rem; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: all .25s;
}
.go-cta a:hover {
    background: var(--gold-soft);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(184,134,46,.2);
}

/* Animace */
@keyframes goPromptPulse {
    0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.05); }
}
@keyframes goSpin { to { transform: rotate(360deg); } }
@keyframes goCardIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes goSparkle {
    0%   { opacity: 0; transform: scale(0); }
    20%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.4) translate(var(--tx, 0), var(--ty, 0)); }
}

/* Responzivita */
@media (max-width: 768px) {
    .go { padding: 40px 0 50px; }
    .go-stage { height: 420px; max-width: 420px; }
    .go-rec { padding: 6px 12px; font-size: .78rem; }
    .go-card-btns { flex-direction: column; }
    .go-btn-primary, .go-btn-ghost { width: 100%; }
}
@media (max-width: 480px) {
    .go-card-product { flex-direction: column; align-items: stretch; }
    .go-card-image { width: 100%; height: 180px; flex-basis: auto; }
    .go-stage { height: 360px; max-width: 360px; }
}

/* tokens.css */
/* =========================================================
   Tipy na dárek — Design system: tokeny
   Barvy, typografie, stíny, rádiusy, spacing.
   Zdroj pravdy pro celý web. Nic tu není komponenta.
   ========================================================= */

:root {
    /* --- Značkové barvy --- */
    --tp-teal-900: #093642;
    --tp-teal-800: #0d4551;
    --tp-teal-700: #0f4c5c;   /* primární tmavá — tlačítka, nadpisy */
    --tp-teal-600: #16697a;
    --tp-teal-100: #d9e8ec;
    --tp-teal-50:  #eef5f7;

    --tp-gold-700: #a9761d;
    --tp-gold-600: #c9922f;   /* logo, hvězdy, akcenty */
    --tp-gold-400: #e0b45f;
    --tp-gold-100: #fbeed3;

    --tp-coral-700: #b03f28;  /* hover plochy s bílým textem */
    --tp-coral-600: #cc4a30;  /* plochy s bílým textem — 4.6:1 (AA) */
    --tp-coral-500: #f2705b;  /* dekorace: ikony, srdíčka */
    --tp-coral-100: #fde5df;

    /* --- Neutrály --- */
    --tp-ink:        #17282e;  /* hlavní text */
    --tp-ink-soft:   #4a5b62;
    --tp-muted:      #626d74;  /* popisky, meta — AA i na krémovém pozadí */
    --tp-line:       #e7e2d9;  /* linky, rámečky */
    --tp-line-soft:  #f0ece5;

    /* --- Plochy --- */
    --tp-surface:      #ffffff;
    --tp-surface-alt:  #fdfbf7;
    --tp-cream:        #faf2e6;
    --tp-cream-deep:   #f4e7d5;
    --tp-hero-from:    #fdf6ec;
    --tp-hero-to:      #f6e9d8;

    /* --- Typografie --- */
    --tp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tp-font-display: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
    --tp-font-hand: "Caveat", "Segoe Script", cursive;

    --tp-text-xs:   0.75rem;   /* 12 */
    --tp-text-sm:   0.8125rem; /* 13 */
    --tp-text-base: 0.9375rem; /* 15 */
    --tp-text-md:   1rem;      /* 16 */
    --tp-text-lg:   1.125rem;  /* 18 */
    --tp-text-xl:   1.375rem;  /* 22 */
    --tp-text-2xl:  1.75rem;   /* 28 */
    --tp-text-3xl:  2.25rem;   /* 36 */
    --tp-text-4xl:  3.25rem;   /* 52 — hero */

    /* --- Rádiusy --- */
    --tp-r-sm:   8px;
    --tp-r-md:   12px;
    --tp-r-lg:   16px;
    --tp-r-xl:   22px;
    --tp-r-pill: 999px;

    /* --- Stíny --- */
    --tp-shadow-xs: 0 1px 2px rgba(23, 40, 46, .05);
    --tp-shadow-sm: 0 2px 8px rgba(23, 40, 46, .06);
    --tp-shadow-md: 0 6px 20px rgba(23, 40, 46, .08);
    --tp-shadow-lg: 0 16px 44px rgba(23, 40, 46, .12);
    --tp-shadow-cta: 0 8px 20px rgba(15, 76, 92, .28);

    /* --- Rozestupy --- */
    --tp-gap-xs: 6px;
    --tp-gap-sm: 10px;
    --tp-gap:    16px;
    --tp-gap-md: 24px;
    --tp-gap-lg: 40px;
    --tp-gap-xl: 64px;

    /* --- Layout --- */
    --tp-container: 1400px;
    --tp-container-pad: 28px;

    /* --- Pohyb --- */
    --tp-ease: cubic-bezier(.4, 0, .2, 1);
    --tp-ease-out-back: cubic-bezier(.34, 1.4, .64, 1);
    --tp-dur: .22s;
}

@media (max-width: 700px) {
    :root {
        --tp-text-4xl: 2.15rem;
        --tp-text-3xl: 1.7rem;
        --tp-text-2xl: 1.4rem;
        --tp-container-pad: 16px;
    }
}

/* Uživatelé s omezením pohybu — vypnout dekorativní animace */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* base.css */
/* =========================================================
   Tipy na dárek — Design system: base
   Reset navazující na existující style.css, typografie, container,
   tlačítka, badge, hvězdy. Nic specifického pro jednu stránku.
   ========================================================= */

/* [hidden] musí přebít i display z komponent (skrývání přes JS) */
.tp [hidden] { display: none !important; }

body.tp {
    font-family: var(--tp-font);
    color: var(--tp-ink);
    background: var(--tp-surface);
    -webkit-font-smoothing: antialiased;
    font-size: var(--tp-text-base);
    line-height: 1.55;
}

/* :where() drží nulovou specificitu, aby komponenty mohly barvu přebít
   bez eskalace selektorů (dřív .tp h2 přebíjelo .tp-newsletter__title). */
.tp :where(h1, h2, h3, h4) {
    font-family: var(--tp-font-display);
    color: var(--tp-teal-700);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
}

/* :where() drží nulovou specificitu — jinak by `.tp a` přebilo barvu
   každé komponenty, která je odkazem (tlačítka, "Zobrazit všechny", …). */
.tp :where(a) { color: inherit; text-decoration: none; }

.tp-container {
    width: 100%;
    max-width: var(--tp-container);
    margin-inline: auto;
    padding-inline: var(--tp-container-pad);
}

/* Skrytí vizuální, ne pro čtečky */
.tp-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Tlačítka ---------- */
.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tp-gap-sm);
    font-family: var(--tp-font);
    font-size: var(--tp-text-base);
    font-weight: 600;
    line-height: 1;
    padding: 15px 26px;
    border-radius: var(--tp-r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--tp-dur) var(--tp-ease),
                box-shadow var(--tp-dur) var(--tp-ease),
                background-color var(--tp-dur) var(--tp-ease),
                border-color var(--tp-dur) var(--tp-ease);
    white-space: nowrap;
}
.tp-btn:hover  { transform: translateY(-1px); }
.tp-btn:active { transform: translateY(0); }
.tp-btn:focus-visible {
    outline: 3px solid var(--tp-gold-400);
    outline-offset: 2px;
}

.tp-btn--primary {
    background: var(--tp-teal-700);
    color: #fff;
    box-shadow: var(--tp-shadow-cta);
}
/* Barvu je nutne zopakovat i v :hover. Stare style.css ma globalni
   `a:hover { color: ... }`, ktere je specifictejsi nez `.tp-btn--primary`,
   a bez tohoto by text tlacitka pri najeti zmenil barvu. */
.tp-btn--primary:hover { background: var(--tp-teal-800); color: #fff; }

.tp-btn--ghost {
    background: var(--tp-surface);
    color: var(--tp-ink);
    border-color: var(--tp-line);
    box-shadow: var(--tp-shadow-sm);
}
.tp-btn--ghost:hover { border-color: var(--tp-teal-600); color: var(--tp-teal-700); }

.tp-btn--coral {
    background: var(--tp-coral-600);
    color: #fff;
    box-shadow: 0 8px 18px rgba(176, 63, 40, .32);
}
.tp-btn--coral:hover { background: var(--tp-coral-700); color: #fff; }

.tp-btn--sm { padding: 11px 18px; font-size: var(--tp-text-sm); }

/* ---------- Hlavička sekce ---------- */
.tp-section { padding-block: var(--tp-gap-lg); }
.tp-section--tight { padding-block: var(--tp-gap-md); }

.tp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tp-gap);
    margin-bottom: var(--tp-gap-md);
}
.tp-section-title {
    font-size: var(--tp-text-2xl);
    font-weight: 800;
}
.tp-section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-muted);
    transition: color var(--tp-dur) var(--tp-ease), gap var(--tp-dur) var(--tp-ease);
    flex: none;
}
.tp-section-more:hover { color: var(--tp-teal-700); gap: 10px; }

/* ---------- Badge ---------- */
.tp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--tp-text-xs);
    font-weight: 700;
    letter-spacing: .02em;
    padding: 5px 11px;
    border-radius: var(--tp-r-pill);
}
.tp-badge--top  { background: var(--tp-coral-600); color: #fff; }
.tp-badge--gold { background: var(--tp-gold-100); color: var(--tp-gold-700); }
.tp-badge--teal { background: var(--tp-teal-50);  color: var(--tp-teal-700); }

/* ---------- Hodnocení ---------- */
.tp-rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--tp-text-xs);
}
.tp-stars { color: var(--tp-gold-600); letter-spacing: .5px; }
.tp-stars .fa-star,
.tp-stars .fa-star-half-stroke { font-size: 11px; }
.tp-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--tp-coral-600);
    font-weight: 700;
}

/* ---------- Oblíbené (srdíčko) ---------- */
.tp-fav {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--tp-r-pill);
    border: none;
    background: rgba(255,255,255,.9);
    color: var(--tp-coral-500);
    cursor: pointer;
    font-size: 14px;
    box-shadow: var(--tp-shadow-xs);
    transition: transform var(--tp-dur) var(--tp-ease-out-back),
                color var(--tp-dur) var(--tp-ease);
}
.tp-fav:hover { transform: scale(1.12); }
.tp-fav[aria-pressed="true"] { color: var(--tp-gold-600); }
.tp-fav:focus-visible { outline: 3px solid var(--tp-gold-400); outline-offset: 2px; }

/* ---------- Vodorovný carousel ---------- */
.tp-rail-wrap { position: relative; }
.tp-rail {
    display: flex;
    gap: var(--tp-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.tp-rail::-webkit-scrollbar { display: none; }
.tp-rail > * { scroll-snap-align: start; flex: none; }

.tp-rail-nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--tp-r-pill);
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    color: var(--tp-teal-700);
    box-shadow: var(--tp-shadow-md);
    cursor: pointer;
    z-index: 3;
    transition: opacity var(--tp-dur) var(--tp-ease), transform var(--tp-dur) var(--tp-ease);
}
.tp-rail-nav:hover { transform: translateY(-50%) scale(1.06); }
.tp-rail-nav[hidden] { display: none; }
.tp-rail-nav--prev { left: -14px; }
.tp-rail-nav--next { right: -14px; }

/* Hláška o rozvolněném filtru ve výpisu produktů */
.tp-relaxed-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--tp-gap);
    padding: 12px 16px;
    border-radius: var(--tp-r-md);
    background: var(--tp-gold-100);
    border: 1px solid var(--tp-gold-400);
    color: var(--tp-gold-700);
    font-size: var(--tp-text-sm);
}
.tp-relaxed-note strong { color: var(--tp-ink); }

/* ============================================================
   Nákup na detailu produktu
   Web není srovnávač — 99 % dárků má jedinou nabídku, takže
   místo tabulky nabídek vede z detailu rovnou odkaz do e-shopu.
   ============================================================ */
.tp-buy {
    margin: 18px 0 22px;
    padding: 20px;
    background: var(--tp-surface, #fff);
    border: 1px solid var(--tp-line, #e7e2d9);
    border-radius: var(--tp-r-lg, 16px);
}
.tp-buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tp-buy__amount {
    font-family: var(--tp-font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    color: var(--tp-teal-700, #0f4c5c);
    line-height: 1;
}
.tp-buy__before { color: var(--tp-muted, #7a7268); text-decoration: line-through; font-size: var(--tp-text-base); }
.tp-buy__off {
    background: var(--tp-coral-600, #d65a3c);
    color: #fff;
    font-weight: 700;
    font-size: var(--tp-text-xs);
    padding: 3px 9px;
    border-radius: 999px;
}
.tp-buy__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 22px;
    font-size: var(--tp-text-base);
    font-weight: 700;
}
.tp-buy__note {
    margin: 11px 0 0;
    font-size: var(--tp-text-xs);
    color: var(--tp-muted, #7a7268);
    display: flex;
    align-items: center;
    gap: 7px;
}
.tp-buy__alt {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--tp-line, #e7e2d9);
    font-size: var(--tp-text-sm);
    color: var(--tp-muted, #7a7268);
}
.tp-buy__alt a { color: var(--tp-teal-700, #0f4c5c); font-weight: 600; }
.tp-buy__gone {
    margin: 0;
    color: var(--tp-muted, #7a7268);
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

/* legacy-bridge.css */
/* =========================================================
   Tipy na dárek — most mezi starým stylem a designem 2026
   -----------------------------------------------------------
   Podstránky (produkty, kategorie, články, e-shopy…) používají
   třídy ze style.css, které jsou celé postavené na CSS proměnných.
   Přemapováním těch proměnných dostane celý web novou paletu bez
   přepisování markupu. Pod tím je pár cílených úprav komponent,
   které se paletou samy neopraví.
   ========================================================= */

body.tp {
    /* --- Značka --- */
    --primary:       var(--tp-teal-700);
    --primary-dark:  var(--tp-teal-900);
    --primary-light: var(--tp-teal-50);
    --primary-rgb:   15, 76, 92;
    --gradient:       linear-gradient(135deg, var(--tp-teal-700) 0%, var(--tp-teal-600) 100%);
    --gradient-hover: linear-gradient(135deg, var(--tp-teal-800) 0%, var(--tp-teal-700) 100%);

    --accent:      var(--tp-gold-600);
    --accent-dark: var(--tp-gold-700);

    /* --- Neutrály sladěné do teplé šedé --- */
    --dark:     var(--tp-ink);
    --gray-50:  var(--tp-surface-alt);
    --gray-100: var(--tp-line-soft);
    --gray-200: var(--tp-line);
    --gray-300: #cfc7b9;
    /* --gray-400 je ve style.css výhradně barva textu (25x `color:`),
       takže musí projít kontrastem AA na bílé. */
    --gray-400: var(--tp-muted);
    --gray-500: var(--tp-muted);
    --gray-600: var(--tp-ink-soft);
    --gray-700: #3a4a51;
    --gray-800: #26363c;
    --gray-900: var(--tp-ink);

    /* --- Tvary a stíny --- */
    --radius-sm:   var(--tp-r-sm);
    --radius:      var(--tp-r-md);
    --radius-lg:   var(--tp-r-lg);
    --radius-xl:   var(--tp-r-xl);
    --radius-full: var(--tp-r-pill);

    --shadow-sm: var(--tp-shadow-xs);
    --shadow:    var(--tp-shadow-sm);
    --shadow-md: var(--tp-shadow-md);
    --shadow-lg: var(--tp-shadow-lg);

    --transition:      all var(--tp-dur) var(--tp-ease);
    --transition-slow: all .3s var(--tp-ease);

    /* --- Proměnné z redesign.css (zlatá škála) --- */
    --gold-100: var(--tp-gold-100);
    --gold-200: #f7e3bd;
    --gold-300: var(--tp-gold-400);
    --gold-400: var(--tp-gold-600);
    --gold-500: var(--tp-gold-700);
    --gold-600: var(--tp-teal-700);   /* nese text odkazů — musí projít AA */
    --gold-700: var(--tp-teal-900);
    --grad-gold: linear-gradient(135deg, var(--tp-teal-600) 0%, var(--tp-teal-700) 55%, var(--tp-teal-900) 100%);
    --grad-gold-soft: linear-gradient(135deg, var(--tp-cream) 0%, var(--tp-cream-deep) 100%);
}

/* ---------- Hlavička podstránky ---------- */
.tp .category-hero,
.tp .page-hero,
.tp .article-hero {
    background: linear-gradient(120deg, var(--tp-hero-from) 0%, var(--tp-hero-to) 100%) !important;
    color: var(--tp-ink);
    border-bottom: 1px solid var(--tp-line-soft);
    padding-block: 34px 30px;
}
.tp .category-hero h1,
.tp .page-hero h1,
.tp .article-hero h1 {
    font-family: var(--tp-font-display);
    font-weight: 800;
    color: var(--tp-ink);
    letter-spacing: -.02em;
}
/* Hlavičky byly původně světlý text na tmavém banneru — teď je banner
   krémový, takže bílý podtitulek nebyl vidět. */
.tp .category-hero p,
.tp .page-hero p,
.tp .article-hero p {
    color: var(--tp-ink-soft);
    max-width: 62ch;
}
.tp .breadcrumb-light,
.tp .breadcrumb-light a,
.tp .breadcrumb-light span { color: var(--tp-muted); }
.tp .breadcrumb-light a:hover { color: var(--tp-teal-700); }
.tp .breadcrumb-light .current { color: var(--tp-ink); font-weight: 600; }


/* ---------- Tlačítka ---------- */
.tp .btn-primary,
.tp .btn-apply-filters {
    background: var(--tp-teal-700);
    border-color: var(--tp-teal-700);
    color: #fff;
    box-shadow: var(--tp-shadow-cta);
}
.tp .btn-primary:hover,
.tp .btn-apply-filters:hover { background: var(--tp-teal-800); border-color: var(--tp-teal-800); }

.tp .btn-secondary,
.tp .btn-reset {
    background: var(--tp-surface);
    color: var(--tp-ink);
    border: 1px solid var(--tp-line);
}
.tp .btn-secondary:hover,
.tp .btn-reset:hover { border-color: var(--tp-teal-600); color: var(--tp-teal-700); }

/* ---------- Karty produktů ---------- */
.tp .product-card-modern,
.tp .hp-card,
.tp .article-card {
    border: 1px solid var(--tp-line-soft);
    border-radius: var(--tp-r-lg);
    background: var(--tp-surface);
    box-shadow: var(--tp-shadow-xs);
    transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}
.tp .product-card-modern:hover,
.tp .hp-card:hover,
.tp .article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tp-shadow-md);
}
.tp .product-card-price,
.tp .hp-card-price,
.tp .price-current {
    font-family: var(--tp-font-display);
    font-weight: 800;
    color: var(--tp-teal-700);
}

/* ---------- Filtry ---------- */
.tp .filters-sidebar {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-lg);
}
.tp .filters-sidebar h3,
.tp .filters-sidebar h4 { font-family: var(--tp-font-display); color: var(--tp-teal-700); }

/* ---------- Stránkování ---------- */
.tp .pagination a,
.tp .pagination span {
    border-radius: var(--tp-r-sm);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink);
}
.tp .pagination .active,
.tp .pagination a:hover {
    background: var(--tp-teal-700);
    border-color: var(--tp-teal-700);
    color: #fff;
}

/* ---------- Nadpisy sekcí na podstránkách ---------- */
.tp .section-title {
    font-family: var(--tp-font-display);
    font-weight: 800;
    color: var(--tp-teal-700);
}

/* ---------- Drobný meta text ze starých šablon ----------
   Tyhle třídy měly natvrdo světlé odstíny a na bílé nebyly čitelné. */
.tp .breadcrumb .separator,
.tp .breadcrumb-light .separator,
.tp .separator {
    color: var(--tp-muted);
    opacity: .7;
}
.tp .article-card .date,
.tp .article-meta .date,
.tp .date,
.tp .post-meta,
.tp .card-meta {
    color: var(--tp-muted);
}

/* ---------- Vyhledávání ----------
   Stránka měla vlastní, nesladěné komponenty. Tohle je sjednocuje
   s designem: formulář, záložky a hlavičky sekcí. */
.tp .search-page > h1 {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-3xl);
    font-weight: 800;
    color: var(--tp-ink);
    margin: 0 0 var(--tp-gap);
}

.tp .search-form-large {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin-bottom: var(--tp-gap-md);
}
.tp .search-form-large input {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-md);
    background: var(--tp-surface);
    font-family: inherit;
    font-size: var(--tp-text-md);
    color: var(--tp-ink);
}
.tp .search-form-large input:focus {
    outline: none;
    border-color: var(--tp-teal-600);
    box-shadow: 0 0 0 3px var(--tp-teal-50);
}
.tp .search-form-large .tp-btn { flex: none; }

.tp .search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--tp-gap-md);
    padding-bottom: var(--tp-gap);
    border-bottom: 1px solid var(--tp-line-soft);
}
.tp .search-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-pill);
    background: var(--tp-surface);
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-ink-soft);
    transition: all var(--tp-dur) var(--tp-ease);
}
.tp .search-tab:hover { border-color: var(--tp-teal-600); color: var(--tp-teal-700); }
.tp .search-tab.active {
    background: var(--tp-teal-700);
    border-color: var(--tp-teal-700);
    color: #fff;
}
.tp .search-tab i { font-size: 12px; opacity: .8; }
.tp .search-tab-count {
    padding: 2px 8px;
    border-radius: var(--tp-r-pill);
    background: var(--tp-teal-50);
    color: var(--tp-teal-700);
    font-size: var(--tp-text-xs);
    font-weight: 700;
}
.tp .search-tab.active .search-tab-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.tp .search-section { margin-bottom: var(--tp-gap-lg); }
.tp .search-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-xl);
    font-weight: 800;
    color: var(--tp-teal-700);
    margin: 0 0 var(--tp-gap);
}
.tp .search-section-title i { font-size: 15px; color: var(--tp-gold-600); }
.tp .search-section-title .see-all {
    margin-left: auto;
    font-family: var(--tp-font);
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-muted);
}
.tp .search-section-title .see-all:hover { color: var(--tp-teal-700); }

.tp .no-results {
    text-align: center;
    padding: var(--tp-gap-xl) var(--tp-gap);
    background: var(--tp-surface-alt);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-lg);
}
.tp .no-results i { font-size: 34px; color: var(--tp-gold-400); margin-bottom: var(--tp-gap); }
.tp .no-results ul { list-style: none; padding: 0; margin: var(--tp-gap) 0 0; color: var(--tp-muted); }
.tp .no-results li { padding: 3px 0; font-size: var(--tp-text-sm); }

/* header.css */
/* =========================================================
   Tipy na dárek — Hlavička + mobilní navigace
   ========================================================= */

.tp-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--tp-surface);
    border-bottom: 1px solid var(--tp-line-soft);
}
.tp-header__inner {
    display: flex;
    align-items: center;
    gap: var(--tp-gap-md);
    height: 74px;
}

/* --- Logo --- */
.tp-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--tp-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tp-teal-700);
    letter-spacing: -.025em;
    flex: none;
}
.tp-logo__mark { width: 34px; height: 34px; flex: none; }
.tp-logo__light { font-weight: 500; color: var(--tp-ink-soft); }

/* --- Navigace --- */
.tp-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.tp-nav__item { position: relative; }
/* Položky jsou <button> kvůli přístupnosti rozbalovacího menu — bez
   resetu by měly šedý systémový rámeček prohlížeče. */
.tp-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: none;
    background: transparent;
    appearance: none;
    border-radius: var(--tp-r-sm);
    font-family: inherit;
    font-size: var(--tp-text-base);
    font-weight: 600;
    color: var(--tp-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--tp-dur) var(--tp-ease), background-color var(--tp-dur) var(--tp-ease);
}
.tp-nav__link:focus-visible {
    outline: 2px solid var(--tp-teal-600);
    outline-offset: 2px;
}
.tp-nav__link:hover,
.tp-nav__item[data-open="true"] > .tp-nav__link { color: var(--tp-teal-700); background: var(--tp-teal-50); }
.tp-nav__chev { font-size: 10px; opacity: .6; transition: rotate var(--tp-dur) var(--tp-ease); }
.tp-nav__item[data-open="true"] .tp-nav__chev { rotate: 180deg; }

/* --- Rozbalovací menu --- */
.tp-drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    translate: -50% 0;
    min-width: 260px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-lg);
    box-shadow: var(--tp-shadow-lg);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--tp-dur) var(--tp-ease),
                transform var(--tp-dur) var(--tp-ease),
                visibility var(--tp-dur);
}
.tp-nav__item[data-open="true"] .tp-drop {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.tp-drop--wide { min-width: 440px; }
.tp-drop__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.tp-drop__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--tp-r-sm);
    font-size: var(--tp-text-base);
    color: var(--tp-ink);
    transition: background-color var(--tp-dur) var(--tp-ease), color var(--tp-dur) var(--tp-ease);
}
.tp-drop__link:hover { background: var(--tp-teal-50); color: var(--tp-teal-700); }
.tp-drop__link i { width: 18px; text-align: center; color: var(--tp-gold-600); font-size: 13px; }
.tp-drop__all {
    display: block;
    margin-top: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--tp-line-soft);
    font-size: var(--tp-text-sm);
    font-weight: 700;
    color: var(--tp-teal-700);
}

/* --- Hledání --- */
.tp-search { position: relative; flex: 0 1 340px; }
.tp-search input {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 18px;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-md);
    background: var(--tp-surface-alt);
    font-family: inherit;
    font-size: var(--tp-text-base);
    color: var(--tp-ink);
    transition: border-color var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}
.tp-search input::placeholder { color: var(--tp-muted); }
.tp-search input:focus {
    outline: none;
    border-color: var(--tp-teal-600);
    box-shadow: 0 0 0 3px var(--tp-teal-50);
    background: var(--tp-surface);
}
.tp-search button {
    position: absolute;
    right: 6px; top: 50%;
    translate: 0 -50%;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: none; border-radius: var(--tp-r-sm);
    background: transparent;
    color: var(--tp-muted);
    cursor: pointer;
    transition: color var(--tp-dur) var(--tp-ease), background-color var(--tp-dur) var(--tp-ease);
}
.tp-search button:hover { color: var(--tp-teal-700); background: var(--tp-teal-50); }

.tp-header__cta { flex: none; }

/* --- Přepínač mobilního menu --- */
.tp-burger {
    display: none;
    width: 44px; height: 44px;
    place-items: center;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-sm);
    background: var(--tp-surface);
    color: var(--tp-teal-700);
    font-size: 17px;
    cursor: pointer;
}

/* --- Mobilní panel --- */
.tp-mobile {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(380px, 88vw);
    background: var(--tp-surface);
    box-shadow: -12px 0 40px rgba(23,40,46,.18);
    padding: 20px;
    overflow-y: auto;
    z-index: 400;
    transform: translateX(100%);
    transition: transform .3s var(--tp-ease);
}
.tp-mobile[data-open="true"] { transform: translateX(0); }
.tp-mobile__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.tp-mobile__close {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm);
    background: transparent; color: var(--tp-ink); font-size: 18px; cursor: pointer;
}
.tp-mobile__group { border-bottom: 1px solid var(--tp-line-soft); padding-block: 4px; }
.tp-mobile__toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px;
    border: none; background: transparent;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-md); font-weight: 700; color: var(--tp-teal-700);
    cursor: pointer;
}
.tp-mobile__panel { display: none; padding-bottom: 10px; }
.tp-mobile__group[data-open="true"] .tp-mobile__panel { display: block; }
.tp-mobile__group[data-open="true"] .tp-mobile__toggle .fa-chevron-down { rotate: 180deg; }
.tp-mobile__panel a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 6px; font-size: var(--tp-text-base); color: var(--tp-ink-soft);
}
.tp-mobile__panel a i { width: 18px; text-align: center; color: var(--tp-gold-600); font-size: 13px; }

.tp-scrim {
    position: fixed; inset: 0;
    background: rgba(9,54,66,.42);
    backdrop-filter: blur(2px);
    z-index: 390;
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--tp-ease), visibility .3s;
}
.tp-scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* --- Responzivita --- */
@media (max-width: 1180px) {
    .tp-search { flex-basis: 240px; }
    .tp-nav__link { padding: 10px 10px; font-size: var(--tp-text-sm); }
}
@media (max-width: 1000px) {
    .tp-nav, .tp-search { display: none; }
    .tp-burger { display: grid; }
    .tp-header__inner { gap: var(--tp-gap); justify-content: space-between; }
    .tp-header__cta { margin-left: auto; }
}
@media (max-width: 560px) {
    .tp-header__inner { height: 64px; }
    .tp-header__cta .tp-btn { padding: 12px 16px; }
    .tp-header__cta .tp-btn span { display: none; }
    .tp-logo { font-size: 1.15rem; }
}

/* home.css */
/* =========================================================
   Tipy na dárek — Homepage
   Hero, příjemci, příležitosti, top tipy, rozpočty, články.
   ========================================================= */

/* ================= HERO ================= */
.tp-hero {
    position: relative;
    /* Podklad je satenova latka z grafickeho navrhu. Nad ni lezi kremovy
       zavoj — vlevo skoro nepruhledny, aby text zustal citelny, vpravo
       slabsi, aby za kouli byly videt zahyby. */
    background:
        radial-gradient(44% 44% at 60% 40%, rgba(255, 243, 219, .55) 0%, rgba(255, 243, 219, 0) 70%),
        linear-gradient(100deg,
            rgba(250, 242, 230, .97) 0%,
            rgba(250, 242, 230, .93) 30%,
            rgba(250, 242, 230, .74) 52%,
            rgba(250, 242, 230, .52) 74%,
            rgba(250, 242, 230, .46) 100%),
        url("/uploads/tp/hero/pozadi.jpg") center right / cover no-repeat,
        linear-gradient(120deg, var(--tp-hero-from) 0%, var(--tp-hero-to) 100%);
    /* Bez overflow: hidden — jinak se ořízne rozbalovací panel výběru.
       Dekorativní přechod dole je uvnitř, takže nic nepřetéká. */
}

/* Rozostřená světla a jiskřičky kolem koule. Čistě dekorace, proto
   pointer-events: none a z-index pod obsahem. */
.tp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle, rgba(255, 244, 214, .85) 0%, rgba(255, 244, 214, 0) 70%),
        radial-gradient(circle, rgba(212, 166, 84, .35) 0%, rgba(212, 166, 84, 0) 70%),
        radial-gradient(circle, rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle at center, rgba(212, 166, 84, .95) 0 2.5px, transparent 3px),
        radial-gradient(circle at center, rgba(255, 255, 255, 1)   0 2px,   transparent 2.5px),
        radial-gradient(circle at center, rgba(212, 166, 84, .80)  0 2px,   transparent 2.5px),
        radial-gradient(circle at center, rgba(212, 166, 84, .70)  0 3px,   transparent 3.5px),
        radial-gradient(circle at center, rgba(255, 255, 255, .95) 0 2px,   transparent 2.5px),
        radial-gradient(circle at center, rgba(212, 166, 84, .65)  0 2px,   transparent 2.5px),
        radial-gradient(circle at center, rgba(255, 255, 255, .85) 0 1.5px, transparent 2px),
        radial-gradient(circle at center, rgba(212, 166, 84, .75)  0 2.5px, transparent 3px);
    background-size:
        220px 220px, 300px 300px, 180px 180px,
        auto, auto, auto, auto, auto, auto, auto, auto;
    background-position:
        54% 20%, 84% 68%, 66% 88%,
        57% 16%, 63% 30%, 79% 22%, 88% 48%, 71% 74%, 51% 52%, 93% 30%, 82% 84%;
}
.tp-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55));
    pointer-events: none;
}
.tp-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--tp-gap-lg);
    padding-block: 20px 30px;
    position: relative;
    z-index: 1;
}

.tp-hero__title {
    font-size: var(--tp-text-4xl);
    font-weight: 800;
    line-height: 1.08;
    color: var(--tp-ink);
    margin-bottom: 18px;
}
.tp-hero__title em {
    display: block;
    font-style: normal;
    color: var(--tp-teal-700);
}
.tp-hero__sub {
    font-size: var(--tp-text-md);
    color: var(--tp-ink-soft);
    max-width: 46ch;
    margin: 0 0 28px;
}

/* --- Výběr s ikonami (nahrazuje nativní select) --- */
.tp-picker { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }

.tp-choice { position: relative; flex: 1 1 172px; min-width: 0; }

.tp-choice__label {
    display: block;
    font-size: var(--tp-text-xs);
    color: var(--tp-muted);
    margin-bottom: 5px;
    padding-left: 2px;
}

.tp-choice__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-md);
    box-shadow: var(--tp-shadow-sm);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color var(--tp-dur) var(--tp-ease),
                box-shadow var(--tp-dur) var(--tp-ease);
}
.tp-choice__trigger:hover { border-color: var(--tp-teal-600); }
.tp-choice__trigger:focus-visible,
.tp-choice[data-open="true"] .tp-choice__trigger {
    outline: none;
    border-color: var(--tp-teal-600);
    box-shadow: 0 0 0 3px var(--tp-teal-50);
}

.tp-choice__thumb {
    width: 34px; height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--tp-r-sm);
    overflow: hidden;
    background: var(--tp-cream);
}
.tp-choice__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-choice__thumb--icon { background: var(--tp-teal-50); }
.tp-choice__thumb--icon i { font-size: 13px; color: var(--tp-teal-700); }

.tp-choice__value {
    flex: 1;
    min-width: 0;
    font-size: var(--tp-text-base);
    font-weight: 600;
    color: var(--tp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-choice[data-chosen="true"] .tp-choice__value { color: var(--tp-ink); }

.tp-choice__chev {
    flex: none;
    font-size: 10px;
    color: var(--tp-muted);
    transition: rotate var(--tp-dur) var(--tp-ease);
}
.tp-choice[data-open="true"] .tp-choice__chev { rotate: 180deg; }

/* --- Rozbalovací panel --- */
.tp-choice__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    max-height: 340px;
    overflow-y: auto;
    display: grid;
    gap: 3px;
    padding: 8px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-lg);
    box-shadow: var(--tp-shadow-lg);
    animation: tpChoiceIn .16s var(--tp-ease);
}
.tp-choice[data-columns="2"] .tp-choice__panel {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    width: max-content;
    max-width: min(420px, 88vw);
}
.tp-choice[data-columns="2"] .tp-choice__panel > :first-child { grid-column: 1 / -1; }

@keyframes tpChoiceIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tp-choice__option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: none;
    border-radius: var(--tp-r-sm);
    background: transparent;
    font-family: inherit;
    font-size: var(--tp-text-sm);
    font-weight: 500;
    color: var(--tp-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--tp-dur) var(--tp-ease);
}
.tp-choice__option:hover,
.tp-choice__option:focus-visible { background: var(--tp-teal-50); outline: none; }
.tp-choice__option[aria-selected="true"] {
    background: var(--tp-teal-50);
    color: var(--tp-teal-700);
    font-weight: 700;
}
.tp-choice__option .tp-choice__thumb { width: 30px; height: 30px; }

.tp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* poslední pole rozbaluje doleva, ať panel nevyjede z okna */
.tp-picker > .tp-choice:last-child .tp-choice__panel { left: auto; right: 0; }

/* --- Poznámka psaná rukou --- */
.tp-hero__note {
    position: absolute;
    right: 0;
    top: 6%;
    max-width: 178px;
    font-family: var(--tp-font-hand);
    font-size: 1.32rem;
    line-height: 1.25;
    color: var(--tp-teal-700);
    text-align: center;
    transform: rotate(-4deg);
    pointer-events: none;
    z-index: 3;
}
.tp-hero__note svg { display: block; margin: 4px auto 0; width: 96px; height: auto; }

/* --- Scéna s koulí --- */
.tp-hero__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1080px) {
    .tp-hero__inner { grid-template-columns: 1fr; padding-block: 22px 30px; }
    .tp-hero__stage { order: -1; }
    .tp-hero__note { display: none; }
    .tp-hero__sub { max-width: none; }
}
@media (max-width: 560px) {
    .tp-choice { flex-basis: 100%; }
    .tp-hero__actions .tp-btn { flex: 1 1 100%; }
}

/* ================= PŘÍJEMCI ================= */
/* Mřížka, ne vodorovný posuvník — všichni příjemci mají být vidět naráz. */
.tp-people {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.tp-person {
    position: relative;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-lg);
    box-shadow: var(--tp-shadow-sm);
    transition: transform var(--tp-dur) var(--tp-ease),
                box-shadow var(--tp-dur) var(--tp-ease),
                border-color var(--tp-dur) var(--tp-ease);
}
.tp-person:hover {
    transform: translateY(-3px);
    box-shadow: var(--tp-shadow-md);
    border-color: var(--tp-teal-100);
}

.tp-person__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 34px 11px 11px;
}

.tp-person__photo {
    width: 44px; height: 44px;
    flex: none;
    border-radius: var(--tp-r-md);
    overflow: hidden;
    background: var(--tp-cream);
    display: grid;
    place-items: center;
}
.tp-person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-person__photo i { font-size: 18px; color: var(--tp-gold-600); }

.tp-person__name {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-sm);
    font-weight: 700;
    color: var(--tp-ink);
    line-height: 1.25;
}

.tp-person .tp-fav {
    position: absolute;
    right: 8px; top: 50%;
    translate: 0 -50%;
    width: 26px; height: 26px;
    font-size: 12px;
}

@media (max-width: 1180px) { .tp-people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .tp-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .tp-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }

/* ================= TŘÍSLOUPCOVÝ BLOK ================= */
/* Tři sloupce končí ve stejné výšce. Výšku určuje prostřední sloupec
   s tipy (má nejbohatší obsah), zbylé dva se k němu dotáhnou přes flex.
   Mřížka tipů proto NESMÍ mít flex: 1 — jinak by rostly obě strany
   navzájem a blok by se roztáhl donekonečna. */
.tp-triptych {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--tp-gap-md);
    align-items: stretch;
}
.tp-triptych > * {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
@media (max-width: 1180px) {
    .tp-triptych { grid-template-columns: 1fr; }
    .tp-triptych > * { height: auto; }
    .tp-occasions,
    .tp-budgets,
    .tp-picks__grid { grid-template-rows: auto; }
    .tp-occasions { grid-template-columns: repeat(3, 1fr); }
    .tp-occasion__art { aspect-ratio: 4 / 3; flex: none; }
    .tp-product__img  { aspect-ratio: 1; flex: none; }
}

/* --- Příležitosti --- */
.tp-occasions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 10px;
    flex: 1;
    min-height: 0;
}
.tp-occasion {
    display: flex;
    flex-direction: column;
    min-height: 0;
    text-align: center;
    transition: transform var(--tp-dur) var(--tp-ease);
}
.tp-occasion:hover { transform: translateY(-3px); }
.tp-occasion__art {
    /* Dlaždice se roztáhne na výšku sloupce, ikona uvnitř drží poměr
       díky `contain` — jinak by se protáhla. */
    flex: 1;
    min-height: 40px;
    /* Strop, aby se dlaždice nenatahovala do zbytecne vysky. */
    max-height: 120px;
    position: relative;
    border-radius: var(--tp-r-md);
    background: var(--tp-cream);
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--tp-line-soft);
    margin-bottom: 7px;
}
/* Obrazek musi vyplnit SKUTECNOU vysku ramecku. Pri `height: 100%` se
   procenta pocitaji z nezkracene vysky rodice a `max-height` se ignoruje —
   obrazek pak pretece a `overflow: hidden` ho usekne. Absolutni pozicovani
   sveze obrazek presne do pouziteho rozmeru. */
.tp-occasion__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tp-occasion__art i { font-size: 28px; color: var(--tp-gold-600); }
.tp-occasion__name {
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-ink);
}

/* --- Top tipy (zvýrazněný střed) ---
   Nadpis je nad kartou, stejně jako u sousedních sekcí; krémová plocha
   obaluje jen mřížku produktů. */
.tp-picks {
    display: flex;
    flex: 1;
    min-height: 0;
    background: linear-gradient(160deg, var(--tp-cream) 0%, #fff9ef 100%);
    border: 1px solid var(--tp-cream-deep);
    border-radius: var(--tp-r-xl);
    padding: 14px;
}
.tp-picks__grid { flex: 1; min-width: 0; }
/* Dva řádky karet místo vodorovného posuvníku — sloupec pak výškou
   odpovídá příležitostem i rozpočtům. */
.tp-picks__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.tp-picks .tp-rail-nav--prev { left: -12px; }
.tp-picks .tp-rail-nav--next { right: -12px; }

.tp-product {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line-soft);
    border-radius: var(--tp-r-md);
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}
.tp-product:hover { transform: translateY(-3px); box-shadow: var(--tp-shadow-md); }
.tp-product__badge { position: absolute; top: 8px; left: 8px; z-index: 2; }
.tp-product__img {
    aspect-ratio: 16 / 10;
    position: relative;
    border-radius: var(--tp-r-sm);
    background: var(--tp-surface-alt);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.tp-product__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tp-product__name {
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-product__price {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-base);
    font-weight: 800;
    color: var(--tp-teal-700);
    margin-top: auto;
}

/* --- Rozpočty --- */
/* Dva sloupce a dva řádky, ať sloupec výškou odpovídá sousedním. */
.tp-budgets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    flex: 1;
    min-height: 0;
}
.tp-budget {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 6px;
    text-align: center;
    padding: 10px 10px 12px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-md);
    transition: transform var(--tp-dur) var(--tp-ease),
                border-color var(--tp-dur) var(--tp-ease),
                box-shadow var(--tp-dur) var(--tp-ease);
}
.tp-budget:hover {
    transform: translateY(-3px);
    border-color: var(--tp-gold-400);
    box-shadow: var(--tp-shadow-md);
}
/* Ikona vyplní celou dlaždici; `contain` hlídá, aby se nedeformovala. */
.tp-budget__art {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 40px;
    max-height: 150px;
    width: 100%;
    position: relative;
    border-radius: var(--tp-r-md);
    overflow: hidden;
    background: var(--tp-cream);
}
.tp-budget__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tp-budget__art i { font-size: 26px; color: var(--tp-gold-600); }
.tp-budget__name {
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-ink);
    line-height: 1.3;
}
@media (max-width: 1180px) { .tp-budgets { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; } }
@media (max-width: 620px)  { .tp-budgets { grid-template-columns: repeat(2, 1fr); } }

/* ================= ČLÁNKY ================= */
.tp-articles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tp-gap-md);
    align-items: stretch;
}

.tp-article {
    display: flex;
    gap: 13px;
    min-width: 0;
}

.tp-article__img {
    width: 96px; height: 96px;
    flex: none;
    border-radius: var(--tp-r-md);
    overflow: hidden;
    /* Rámeček a krémový podklad drží i obrázky s bílým pozadím
       (loga e-shopů), jinak vypadají, že v kartě volně plavou. */
    background: var(--tp-cream);
    border: 1px solid var(--tp-line-soft);
}
.tp-article__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s var(--tp-ease);
}
.tp-article:hover .tp-article__img img { transform: scale(1.06); }

/* Textový sloupec dorovná výšku, aby odkazy skončily na jedné lince. */
.tp-article__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.tp-article__title {
    font-size: var(--tp-text-base);
    font-weight: 700;
    color: var(--tp-teal-700);
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-article__excerpt {
    font-size: var(--tp-text-sm);
    color: var(--tp-muted);
    line-height: 1.45;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-article__more {
    margin-top: auto;
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-teal-600);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--tp-dur) var(--tp-ease);
}
.tp-article:hover .tp-article__more { gap: 10px; }

@media (max-width: 1180px) { .tp-articles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .tp-articles { grid-template-columns: 1fr; } }

/* ================= DEKORACE KOLEM KOULE =================
   Plovouci predmety podle grafickeho navrhu. Lezi v souradnicich sceny,
   takze se drzi koule i pri zmene sirky okna. Nesmi brat kliky — jinak by
   prekryly samotnou kouli. */
.tp-props {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.tp-prop {
    position: absolute;
    width: auto;
    /* Dve stopy: mekky kontaktni stin (predmet se opira o plochu) a teply
       zaves svetla, ktery ho spoji s okolni scenou — bez nej pusobi
       predmet jako nalepeny vystrizek. */
    filter:
        drop-shadow(0 14px 22px rgba(9, 54, 66, .20))
        drop-shadow(0 0 30px rgba(255, 236, 196, .85));
    animation: tp-float 7s ease-in-out infinite;
    will-change: transform;
}
/* Rozmisteni po obvodu koule. Vysky a odsazeni jsou vyladene tak,
   aby se zadne dva predmety nedotykaly ani pri plovouci animaci. */
.tp-prop--sluchatka { height: 21%; left: 3%;  top: 1%;     animation-delay: -2.1s; }
.tp-prop--parfem    { height: 19%; left: 1%;  top: 29%;    animation-delay: -.4s; }
.tp-prop--svicka    { height: 16%; left: 0%;  bottom: 27%; animation-delay: -5.2s; }
/* Hodinky patri pod rucne psanou poznamku, jinak jsou pres text. */
.tp-prop--hodinky   { height: 18%; right: 2%; top: 45%;    animation-delay: -3.4s; }

/* Karta "Zážitek jako dárek" — schvalne v CSS, ne obrazek:
   text zustane ostry a da se kdykoli prepsat. */
.tp-prop-card {
    position: absolute;
    right: 2%;
    bottom: 10%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px 40px 14px 14px;
    border-radius: var(--tp-r-md);
    background: linear-gradient(135deg, #0f4c5c 0%, #093642 100%);
    color: #fff;
    font-family: var(--tp-font-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    box-shadow: 0 16px 30px rgba(9, 54, 66, .28);
    transform: rotate(-6deg);
    animation: tp-float 7s ease-in-out infinite;
    animation-delay: -1.3s;
}
.tp-prop-card__icon {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 17px;
    color: var(--tp-gold-400);
}

@keyframes tp-float {
    0%, 100% { transform: translateY(0) rotate(var(--tp-prop-rot, 0deg)); }
    50%      { transform: translateY(-11px) rotate(var(--tp-prop-rot, 0deg)); }
}
.tp-prop-card {
    --tp-prop-rot: -6deg;
}

/* Uzsi okna: dekorace by se pralo s koulí, tak ji necháme dýchat. */
@media (max-width: 1180px) {
    .tp-prop--sluchatka, .tp-prop--svicka { display: none; }
    .tp-prop--parfem  { height: 17%; left: -1%; }
    .tp-prop--hodinky { height: 16%; }
    .tp-prop-card     { font-size: 11px; padding: 9px 32px 10px 11px; }
}
@media (max-width: 760px) {
    .tp-props { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-prop, .tp-prop-card { animation: none; }
}

/* Zare kolem sceny uz netreba — prostredi dela satenova latka v pozadi.
   Obdelnikovy okraj te zare byl navic na latce videt jako predel. */
.tp-hero__stage::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 6%;
    height: 11%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(9, 54, 66, .13) 0%, rgba(9, 54, 66, .04) 42%, rgba(9, 54, 66, 0) 70%);
}
/* Obsah sceny nad pozadi. Zamerne vyjmenovane — plosne `> *` by prebilo
   `position: absolute` u kontejneru dekoraci a rozsypalo cely hero. */
/* Pozor: .tp-hero__note je absolutne pozicovana — prepsat ji na relative
   by ji vrazilo do toku a posunulo celou kouli dolu. Menime jen vrstveni. */
.tp-hero__note { z-index: 3; }
.tp-orb,
.tp-orb-result { position: relative; z-index: 1; }
.tp-props { z-index: 2; }

/* orb.css */
/* =========================================================
   Tipy na dárek — Věštecká koule (scéna + výsledek)
   ========================================================= */

.tp-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
}

/* Teplá záře za koulí — dělá dojem prosvětleného skla */
.tp-orb::before {
    content: "";
    position: absolute;
    width: min(58%, 310px);
    aspect-ratio: 1;
    top: 42%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(255, 233, 190, .5) 0%,
                rgba(250, 226, 178, .22) 45%,
                rgba(250, 226, 178, 0) 72%);
    filter: blur(6px);
    pointer-events: none;
    z-index: 0;
}

.tp-orb__canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 1 / 0.96;
    display: block;
    cursor: pointer;
    touch-action: manipulation;
    background: transparent;
    border: none;
    padding: 0;
}
.tp-orb__canvas:focus-visible {
    outline: 3px solid var(--tp-gold-600);
    outline-offset: 6px;
    border-radius: var(--tp-r-lg);
}

/* Dokud se scéna nenačte (nebo bez WebGL) — čitelná statická náhrada */
.tp-orb:not([data-ready]) .tp-orb__canvas,
.tp-orb[data-ready="fallback"] .tp-orb__canvas {
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 42%),
        radial-gradient(circle at 50% 46%, #fdf3e0 0%, #ecdcc2 55%, #cbb597 100%);
    border-radius: 50%;
    max-width: 400px;
    aspect-ratio: 1;
}

/* Nápověda "Klikni na kouli" */
.tp-orb__hint {
    position: absolute;
    z-index: 2;
    bottom: 6%;
    left: 50%;
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: var(--tp-r-pill);
    background: rgba(255, 255, 255, .93);
    border: 1px solid var(--tp-line);
    box-shadow: var(--tp-shadow-md);
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-teal-700);
    white-space: nowrap;
    pointer-events: none;
    animation: tpOrbHint 2.6s ease-in-out infinite;
}
@keyframes tpOrbHint {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* ---------- Výsledek věštby ---------- */
/* Vsechny tri stavy (vyzva / nacitani / karta) lezi na sobe v jedne bunce
   mrizky a box ma pevnou vysku — hero se tak po kliknuti na kouli
   nepreskladava a stranka nepoposkoci. */
.tp-orb-result {
    width: 100%;
    max-width: 520px;
    /* zarovnání přesně pod kouli — bez auto marginů box ujížděl doleva */
    margin: -62px auto 0;   /* karta zamerne prekryva podstavec koule */
    display: grid;
    align-items: center;
    height: 210px;
    z-index: 2;
}
.tp-orb-result > * { grid-area: 1 / 1; }

.tp-orb-result__empty {
    text-align: center;
    font-size: var(--tp-text-sm);
    color: var(--tp-muted);
    /* uzsi nez cely box, jinak posledni slovo koncilo pod stitkem "Zazitek" */
    max-width: 400px;
    margin: 0 auto;
    padding: 0 12px;
}

.tp-orb-result__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: var(--tp-text-sm);
    color: var(--tp-teal-700);
    font-weight: 600;
}
.tp-orb-result__loading[hidden] { display: none; }

.tp-spinner {
    width: 19px; height: 19px;
    border: 2px solid var(--tp-gold-100);
    border-top-color: var(--tp-gold-600);
    border-radius: 50%;
    animation: tpSpin .8s linear infinite;
}
@keyframes tpSpin { to { rotate: 360deg; } }

.tp-orb-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-lg);
    box-shadow: var(--tp-shadow-lg);
    padding: 13px 14px;
    /* Karta vyplni presne rezervovanou vysku, at uz je nazev kratky nebo dlouhy. */
    height: 100%;
    display: flex;
    flex-direction: column;
}
@keyframes tpOrbCardIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tp-orb-card__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.tp-orb-card__body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.tp-orb-card__img {
    width: 64px; height: 64px;
    flex: none;
    object-fit: contain;
    border-radius: var(--tp-r-sm);
    background: var(--tp-surface-alt);
}
.tp-orb-card__name {
    font-size: var(--tp-text-base);
    font-weight: 700;
    color: var(--tp-ink);
    line-height: 1.32;
    margin: 0 0 4px;
    /* Dlouhe nazvy z feedu orizneme na dva radky — jinak by kartu nafoukly. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-orb-card__eshop {
    font-size: var(--tp-text-xs);
    color: var(--tp-muted);
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-orb-card__price {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-lg);
    font-weight: 800;
    color: var(--tp-teal-700);
}
.tp-orb-card__actions { display: flex; gap: 10px; margin-top: 11px; flex: none; }
.tp-orb-card__actions .tp-btn { flex: 1; }

@media (max-width: 1080px) {
    .tp-orb__canvas { max-width: 430px; }
    .tp-orb-result { margin-top: -48px; }
}
@media (max-width: 560px) {
    .tp-orb__canvas { max-width: 320px; }
    /* Na uzkem displeji jsou tlacitka pod sebou, karta tedy potrebuje vic mista.
       Vyska zustava pevna, jen jina — hero se porad nepreskladava. */
    .tp-orb-card__actions { flex-direction: column; }
    .tp-orb-result { height: 264px; margin-top: -30px; }
}

/* pruvodce.css */
/* ============================================================
   Průvodce výběrem dárku (/pruvodce)
   ============================================================ */

.tp-guide-page { padding: 26px 0 60px; }

.tp-guide-intro { max-width: 720px; margin: 18px auto 30px; text-align: center; }
.tp-guide-intro h1 {
    font-family: var(--tp-font-display);
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.1;
    color: var(--tp-ink);
    margin: 0 0 14px;
}
.tp-guide-intro h1 em {
    display: block;
    font-style: normal;
    color: var(--tp-teal-700);
}
.tp-guide-intro p {
    font-size: var(--tp-text-base);
    color: var(--tp-muted);
    line-height: 1.6;
    margin: 0;
}

/* ---------- Ukazatel postupu ---------- */
.tp-guide__progress {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    counter-reset: none;
}
.tp-guide__progress li { display: flex; }
.tp-guide__step {
    display: flex;
    background: none;
    border: 0;
    padding: 4px 2px;
    font: inherit;
    cursor: default;
    align-items: center;
    gap: 9px;
    font-size: var(--tp-text-sm);
    color: var(--tp-muted);
    font-weight: 600;
}
.tp-guide__step-num {
    display: grid;
    place-items: center;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: var(--tp-surface-alt);
    border: 1px solid var(--tp-line);
    font-size: var(--tp-text-xs);
    font-weight: 700;
    flex: none;
}
/* Na uz vyplneny krok se da vratit kliknutim. */
.tp-guide__step.is-done { cursor: pointer; }
.tp-guide__step.is-done:hover { color: var(--tp-teal-800); }
.tp-guide__step.is-done:hover .tp-guide__step-num {
    border-color: var(--tp-teal-700);
}
.tp-guide__step.has-value .tp-guide__step-label { color: var(--tp-ink); font-weight: 700; }
.tp-guide__step.is-active { color: var(--tp-teal-800); }
.tp-guide__step.is-active .tp-guide__step-num {
    background: var(--tp-teal-700);
    border-color: var(--tp-teal-700);
    color: #fff;
}
.tp-guide__step.is-done .tp-guide__step-num {
    background: var(--tp-gold-100);
    border-color: var(--tp-gold-600);
    color: var(--tp-teal-800);
}

/* ---------- Kroky ---------- */
.tp-guide__panel { display: none; }
.tp-guide__panel.is-active { display: block; animation: tpGuideIn .28s ease both; }
@keyframes tpGuideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.tp-guide__question {
    font-family: var(--tp-font-display);
    font-size: clamp(21px, 2.6vw, 28px);
    color: var(--tp-ink);
    text-align: center;
    margin: 0 0 20px;
}

.tp-guide__grid {
    display: grid;
    /* Pocet sloupcu posila sablona (--tp-cols) tak, aby radky vyply rovnomerne. */
    grid-template-columns: repeat(var(--tp-cols, 6), minmax(0, 1fr));
    gap: 12px;
}

.tp-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 16px 12px 14px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-lg);
    cursor: pointer;
    text-align: center;
    font: inherit;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.tp-tile:hover {
    border-color: var(--tp-teal-700);
    box-shadow: var(--tp-shadow-md);
    transform: translateY(-2px);
}
.tp-tile.is-picked {
    border-color: var(--tp-teal-700);
    box-shadow: 0 0 0 2px var(--tp-teal-700) inset;
    background: var(--tp-surface-alt);
}
.tp-tile__img {
    width: 64px; height: 64px;
    object-fit: contain;
}
.tp-tile__icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    font-size: 27px;
    color: var(--tp-teal-700);
}
.tp-tile__name {
    font-weight: 700;
    font-size: var(--tp-text-sm);
    color: var(--tp-ink);
    line-height: 1.3;
}
.tp-tile__note {
    font-size: var(--tp-text-xs);
    color: var(--tp-muted);
    line-height: 1.35;
}

/* Hlavicka kroku: Zpet vlevo, otazka presne uprostred panelu.
   Tri sloupce (1fr auto 1fr) drzi nadpis na stredu bez ohledu na sirku tlacitka. */
.tp-guide__head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.tp-guide__head .tp-guide__question { margin: 0; }

/* Zpet patri nad otazku — pod mrizkou dlazdic ho nikdo nenajde. */
.tp-guide__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    margin: 0;
    padding: 7px 14px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: 999px;
    color: var(--tp-teal-800);
    font: inherit;
    font-size: var(--tp-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s, background .16s;
}
.tp-guide__back:hover {
    border-color: var(--tp-teal-700);
    background: var(--tp-surface-alt);
}
.tp-guide__panel { text-align: center; }
.tp-guide__grid, .tp-guide__products { text-align: left; }

/* ---------- Výsledek ---------- */
.tp-guide__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 60px 0;
    color: var(--tp-teal-700);
    font-weight: 600;
}
.tp-guide__summary {
    text-align: center;
    font-weight: 600;
    color: var(--tp-muted);
    font-size: var(--tp-text-sm);
    margin: -10px 0 24px;
}

.tp-guide__products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.tp-gp {
    display: flex;
    flex-direction: column;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-lg);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.tp-gp:hover {
    border-color: var(--tp-teal-700);
    box-shadow: var(--tp-shadow-md);
    transform: translateY(-3px);
}
.tp-gp__img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--tp-surface-alt);
}
.tp-gp__img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 10px;
}
.tp-gp__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px 14px; }
.tp-gp__name {
    font-weight: 700;
    font-size: var(--tp-text-sm);
    color: var(--tp-ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-gp__eshop { font-size: var(--tp-text-xs); color: var(--tp-muted); }
.tp-gp__price {
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-base);
    font-weight: 800;
    color: var(--tp-teal-700);
    margin-top: 2px;
}

.tp-guide__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.tp-guide__empty { padding: 50px 20px; color: var(--tp-muted); }
.tp-guide__empty i { font-size: 40px; color: var(--tp-line); display: block; margin-bottom: 14px; }
.tp-guide__empty p { margin: 0 0 18px; }

/* ---------- Textoví průvodci pod nástrojem ---------- */
.tp-guide-articles { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--tp-line); }
.tp-guide-articles h2 {
    font-family: var(--tp-font-display);
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--tp-ink);
    margin: 0 0 22px;
}

/* Pod 1000 px uz pevny pocet sloupcu nedava smysl — necháme dlazdice balit se samy. */
@media (max-width: 1000px) {
    .tp-guide__grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
}
@media (max-width: 700px) {
    /* Na uzkem displeji se nadpis nevejde vedle tlacitka — dame ho pod nej. */
    .tp-guide__head { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
    .tp-guide__head .tp-guide__back { justify-self: center; }
    .tp-guide__head > span:last-child { display: none; }
    .tp-guide__grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
    .tp-tile { padding: 13px 9px 12px; }
    .tp-tile__img, .tp-tile__icon { width: 52px; height: 52px; }
    .tp-tile__icon { font-size: 22px; }
    .tp-guide__products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    /* Popisky nechavame i na mobilu — nesou vybranou hodnotu. */
    .tp-guide__progress { gap: 6px 12px; }
    .tp-guide__step { font-size: var(--tp-text-xs); gap: 6px; }
    .tp-guide__step-num { width: 22px; height: 22px; }
    .tp-guide__actions .tp-btn { flex: 1 1 100%; }
}

/* article.css */
/* =========================================================
   Tipy na dárek — Články (výpis + detail)
   ========================================================= */

/* ================= VÝPIS ================= */
.tp-articles-head {
    max-width: 62ch;
    margin-bottom: var(--tp-gap-md);
}
.tp-articles-head h1 {
    font-size: var(--tp-text-3xl);
    font-weight: 800;
    color: var(--tp-ink);
    margin-bottom: 10px;
}
.tp-articles-head p {
    margin: 0;
    font-size: var(--tp-text-md);
    color: var(--tp-ink-soft);
}

/* Filtr kategorií */
.tp-cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--tp-gap-md);
    padding-bottom: var(--tp-gap);
    border-bottom: 1px solid var(--tp-line-soft);
}
.tp-cat-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r-pill);
    background: var(--tp-surface);
    font-size: var(--tp-text-sm);
    font-weight: 600;
    color: var(--tp-ink-soft);
    transition: all var(--tp-dur) var(--tp-ease);
}
.tp-cat-chip:hover { border-color: var(--tp-teal-600); color: var(--tp-teal-700); }
.tp-cat-chip[aria-current="page"] {
    background: var(--tp-teal-700);
    border-color: var(--tp-teal-700);
    color: #fff;
}

/* Mřížka článků */
.tp-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tp-gap-md);
}

.tp-post {
    display: flex;
    flex-direction: column;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line-soft);
    border-radius: var(--tp-r-lg);
    overflow: hidden;
    transition: transform var(--tp-dur) var(--tp-ease),
                box-shadow var(--tp-dur) var(--tp-ease),
                border-color var(--tp-dur) var(--tp-ease);
}
.tp-post:hover {
    transform: translateY(-3px);
    box-shadow: var(--tp-shadow-md);
    border-color: var(--tp-teal-100);
}

.tp-post__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--tp-cream);
    overflow: hidden;
}
.tp-post__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--tp-ease);
}
.tp-post:hover .tp-post__media img { transform: scale(1.05); }
.tp-post__media--empty { display: grid; place-items: center; }
.tp-post__media--empty i { font-size: 30px; color: var(--tp-gold-400); }

.tp-post__chip {
    position: absolute;
    left: 12px; top: 12px;
    padding: 5px 11px;
    border-radius: var(--tp-r-pill);
    background: rgba(255, 255, 255, .94);
    font-size: var(--tp-text-xs);
    font-weight: 700;
    color: var(--tp-teal-700);
    letter-spacing: .01em;
}

.tp-post__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 16px 18px 18px;
}
.tp-post__title {
    font-size: var(--tp-text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--tp-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-post:hover .tp-post__title { color: var(--tp-teal-700); }
.tp-post__excerpt {
    margin: 0;
    font-size: var(--tp-text-base);
    color: var(--tp-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--tp-line-soft);
    font-size: var(--tp-text-xs);
    color: var(--tp-muted);
}
.tp-post__meta span { display: inline-flex; align-items: center; gap: 5px; }
.tp-post__meta i { color: var(--tp-gold-600); }

@media (max-width: 1080px) { .tp-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tp-post-grid { grid-template-columns: 1fr; } }

/* ================= DETAIL =================
   Prefix `tp-detail`, ne `tp-article` — ten už patří kartám
   článků na homepage a názvy by se srazily. */
.tp-detail { padding-bottom: var(--tp-gap-lg); }

.tp-detail__head {
    max-width: 780px;
    margin: 0 auto var(--tp-gap-md);
    text-align: center;
}
.tp-detail__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--tp-r-pill);
    background: var(--tp-teal-50);
    font-size: var(--tp-text-xs);
    font-weight: 700;
    color: var(--tp-teal-700);
    margin-bottom: var(--tp-gap);
}
.tp-detail__title {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--tp-ink);
    margin-bottom: var(--tp-gap);
}
.tp-detail__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    font-size: var(--tp-text-sm);
    color: var(--tp-muted);
}
.tp-detail__meta span { display: inline-flex; align-items: center; gap: 6px; }
.tp-detail__meta i { color: var(--tp-gold-600); }

.tp-detail__cover {
    max-width: 980px;
    margin: 0 auto var(--tp-gap-lg);
    aspect-ratio: 16 / 9;
    border-radius: var(--tp-r-xl);
    overflow: hidden;
    background: var(--tp-cream);
    box-shadow: var(--tp-shadow-md);
}
.tp-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Tělo článku: pohodlný sloupec na čtení --- */
.tp-detail__body {
    max-width: 72ch;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--tp-ink-soft);
}
.tp-detail__body > * + * { margin-top: 1.1em; }
.tp-detail__body p { margin: 0; }

/* Většina článků používá h2/h3, část importovaných z WordPressu ale
   začíná až u h4/h5 — proto má typografii i spodní část škály. */
.tp-detail__body h2,
.tp-detail__body h3,
.tp-detail__body h4,
.tp-detail__body h5 {
    font-family: var(--tp-font-display);
    color: var(--tp-ink);
    line-height: 1.25;
    margin-top: 1.9em;
    margin-bottom: .6em;
}
.tp-detail__body h2 { font-size: 1.6rem;  font-weight: 800; }
.tp-detail__body h3 { font-size: 1.32rem; font-weight: 700; }
.tp-detail__body h4 { font-size: 1.16rem; font-weight: 700; }
.tp-detail__body h5 { font-size: 1.04rem; font-weight: 700; margin-top: 1.5em; }

.tp-detail__body a {
    color: var(--tp-teal-700);
    font-weight: 600;
    background-image: linear-gradient(var(--tp-gold-400), var(--tp-gold-400));
    background-size: 100% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.tp-detail__body a:hover { color: var(--tp-teal-900); }

.tp-detail__body ul,
.tp-detail__body ol { padding-left: 1.4em; }
.tp-detail__body li + li { margin-top: .45em; }
.tp-detail__body li::marker { color: var(--tp-gold-600); font-weight: 700; }

.tp-detail__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tp-r-lg);
    display: block;
    margin-inline: auto;
}
.tp-detail__body figure { margin: 1.6em 0; }
.tp-detail__body figcaption {
    margin-top: 8px;
    font-size: var(--tp-text-sm);
    color: var(--tp-muted);
    text-align: center;
}

.tp-detail__body blockquote {
    margin: 1.6em 0;
    padding: 16px 22px;
    border-left: 3px solid var(--tp-gold-600);
    background: var(--tp-cream);
    border-radius: 0 var(--tp-r-md) var(--tp-r-md) 0;
    font-size: 1.08rem;
    color: var(--tp-ink);
}
.tp-detail__body blockquote p { margin: 0; }

.tp-detail__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tp-text-base);
}
.tp-detail__body th,
.tp-detail__body td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--tp-line);
    text-align: left;
}
.tp-detail__body th { background: var(--tp-cream); color: var(--tp-ink); font-weight: 700; }

/* --- Patička článku --- */
.tp-detail__foot {
    max-width: 72ch;
    margin: var(--tp-gap-lg) auto 0;
    padding-top: var(--tp-gap-md);
    border-top: 1px solid var(--tp-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-gap);
}
.tp-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-tag {
    padding: 6px 13px;
    border-radius: var(--tp-r-pill);
    background: var(--tp-surface-alt);
    border: 1px solid var(--tp-line);
    font-size: var(--tp-text-xs);
    font-weight: 600;
    color: var(--tp-ink-soft);
    transition: all var(--tp-dur) var(--tp-ease);
}
.tp-tag:hover { border-color: var(--tp-teal-600); color: var(--tp-teal-700); }

.tp-share { display: flex; align-items: center; gap: 8px; }
.tp-share__label { font-size: var(--tp-text-sm); color: var(--tp-muted); }
.tp-share a {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--tp-r-pill);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink-soft);
    font-size: 14px;
    transition: all var(--tp-dur) var(--tp-ease);
}
.tp-share a:hover { background: var(--tp-teal-700); border-color: var(--tp-teal-700); color: #fff; }

/* --- Související --- */
.tp-related { margin-top: var(--tp-gap-xl); }

@media (max-width: 700px) {
    .tp-detail__cover { border-radius: var(--tp-r-lg); }
    .tp-detail__body { font-size: 1rem; }
    .tp-detail__foot { flex-direction: column; align-items: flex-start; }
}

/* footer.css */
/* =========================================================
   Tipy na dárek — Newsletter pruh + patička
   ========================================================= */

.tp-newsletter {
    background: linear-gradient(135deg, var(--tp-teal-700), var(--tp-teal-900));
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: var(--tp-gap-lg);
}
/* Dekorativní listy v rozích — jemný ornament jako v návrhu */
.tp-newsletter::before,
.tp-newsletter::after {
    content: "";
    position: absolute;
    width: 220px; height: 220px;
    /* střed kruhu musí být uprostřed boxu, jinak ho okraj boxu ořízne
       a vznikne viditelná hrana */
    background: radial-gradient(circle at 50% 50%, rgba(224,180,95,.18), rgba(224,180,95,0) 68%);
    pointer-events: none;
}
.tp-newsletter::before { left: -60px;  top: -70px; }
.tp-newsletter::after  { right: -60px; bottom: -80px; }

.tp-newsletter__inner {
    display: flex;
    align-items: center;
    gap: var(--tp-gap-lg);
    flex-wrap: wrap;
    padding-block: 30px;
    position: relative;
    z-index: 1;
}

.tp-newsletter__lead { display: flex; align-items: center; gap: var(--tp-gap); flex: 1 1 320px; }
.tp-newsletter__icon {
    display: grid; place-items: center;
    width: 54px; height: 54px; flex: none;
    border-radius: var(--tp-r-pill);
    border: 1.5px solid rgba(224,180,95,.55);
    color: var(--tp-gold-400);
    font-size: 20px;
}
.tp-newsletter__title {
    color: #fff;
    font-size: var(--tp-text-xl);
    font-weight: 800;
    margin-bottom: 3px;
}
.tp-newsletter__sub {
    margin: 0;
    font-size: var(--tp-text-base);
    color: rgba(255,255,255,.72);
}

.tp-newsletter__form { display: flex; gap: 10px; flex: 1 1 360px; }
.tp-newsletter__form input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 18px;
    border-radius: var(--tp-r-md);
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-family: inherit;
    font-size: var(--tp-text-base);
}
.tp-newsletter__form input::placeholder { color: rgba(255,255,255,.55); }
.tp-newsletter__form input:focus {
    outline: none;
    border-color: var(--tp-gold-400);
    background: rgba(255,255,255,.14);
}

.tp-newsletter__trust {
    display: flex;
    gap: var(--tp-gap-md);
    list-style: none;
    margin: 0; padding: 0;
    flex-wrap: wrap;
}
.tp-newsletter__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tp-text-sm);
    color: rgba(255,255,255,.8);
    white-space: nowrap;
}
.tp-newsletter__trust i { color: var(--tp-gold-400); font-size: 14px; }

/* Zpětná vazba po odeslání (?newsletter=ok apod.) */
.tp-newsletter__note {
    flex: 1 1 100%;
    margin: 0;
    padding: 11px 16px;
    border-radius: var(--tp-r-md);
    font-size: var(--tp-text-base);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
}
.tp-newsletter__note--ok { border-color: rgba(224,180,95,.6); color: #fff; }

@media (max-width: 900px) {
    .tp-newsletter__inner { gap: var(--tp-gap-md); }
    .tp-newsletter__trust { order: 3; }
}

/* ---------- Patička ---------- */
.tp .site-footer {
    background: var(--tp-teal-900) !important;
    color: rgba(255,255,255,.62) !important;
    margin-top: 0;
}
.tp .site-footer a { color: rgba(255,255,255,.72); transition: color var(--tp-dur) var(--tp-ease); }
.tp .site-footer a:hover { color: var(--tp-gold-400); }
.tp .site-footer h3,
.tp .site-footer h4,
.tp .site-footer .footer-heading {
    color: #fff;
    font-family: var(--tp-font-display);
    /* Nadpis sekce potrebuje odsadit od odkazu pod nim, jinak na nich sedi. */
    margin: 0 0 14px;
}
.tp .site-footer .footer-section ul { margin: 0; padding: 0; list-style: none; }
.tp .site-footer .footer-text-block .footer-text-content { margin-top: 4px; }
.tp .site-footer hr,
.tp .site-footer .footer-bottom { border-color: rgba(255,255,255,.12); }

/* Ztlumený text v patičce nesmí použít --tp-muted (ten je laděný na bílé
   pozadí a na tmavé by spadl pod AA). */
.tp .site-footer .copyright,
.tp .site-footer .footer-bottom,
.tp .site-footer small {
    color: rgba(255, 255, 255, .62);
}

/* ================= PRUH S DALŠÍMI PROJEKTY =================
   Sedí pod patičkou jako samostatný, tmavší pás. Odkazy vedou pryč
   z webu, proto jsou vizuálně potlačené — nemají soupeřit s patičkou. */
.tp .tp-projects {
    background: #0d2b30;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 18px 0 22px;
}
.tp .tp-projects__title {
    margin: 0 0 10px;
    font-family: var(--tp-font-display);
    font-size: var(--tp-text-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.tp .tp-projects__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tp .tp-projects__list a {
    font-size: var(--tp-text-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, .58);
    text-decoration: none;
    transition: color var(--tp-dur) var(--tp-ease);
}
.tp .tp-projects__list a:hover,
.tp .tp-projects__list a:focus-visible {
    color: var(--tp-gold-400);
    text-decoration: underline;
}
@media (max-width: 640px) {
    .tp .tp-projects__list { gap: 4px 14px; }
}

/* Hlaska po prihlaseni k newsletteru — driv se stranka jen obnovila a
   navstevnik nevedel, jestli se neco stalo. */
.tp-newsletter__msg {
    /* Kontejner je flex — celou sirku si vezmeme takto, jinak by hlaska
       vtlacila odznaky na dalsi radek a pruh by povyskocil. */
    flex: 1 1 100%;
    order: 9;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--tp-r-md, 10px);
    font-size: var(--tp-text-sm);
    font-weight: 600;
    text-align: center;
}
.tp-newsletter__msg.is-ok    { background: rgba(255,255,255,.14); color: #fff; }
.tp-newsletter__msg.is-chyba { background: rgba(214,90,60,.22);   color: #ffe4dc; }

/* Kotva z formulare nesmi schovat nadpis pod lepici listu. */
.tp-newsletter { scroll-margin-top: 96px; }