/* Kartichka.eu — Site Refresh v1
 * Global visual overhaul applied on top of the SPA + home-enhance + calendar.
 * Warm cream base, coral & burgundy accents, Fraunces headlines + Inter body,
 * elevated cards, refined header/footer, tighter spacing site-wide.
 * Loaded AFTER the SPA stylesheet so selectors here win without !important
 * where possible; specificity + late load = safe overrides.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --kk-cream: #FBF5EA;
  --kk-cream-2: #FFF9EE;
  --kk-ink: #2A211B;
  --kk-ink-soft: #4A3B31;
  --kk-muted: #8A7761;
  --kk-line: #EADFC8;
  --kk-line-soft: #F3E9D3;
  --kk-coral: #E27860;
  --kk-coral-deep: #C55A44;
  --kk-burgundy: #7A2F2A;
  --kk-gold: #C9A24C;
  --kk-shadow-sm: 0 2px 8px rgba(89, 46, 26, 0.06);
  --kk-shadow-md: 0 8px 24px rgba(89, 46, 26, 0.10);
  --kk-shadow-lg: 0 20px 48px rgba(89, 46, 26, 0.14);
  --kk-radius-sm: 10px;
  --kk-radius: 16px;
  --kk-radius-lg: 22px;
  --kk-serif: 'Fraunces', 'Playfair Display', ui-serif, Georgia, serif;
  --kk-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html, body {
  background: var(--kk-cream) !important;
  color: var(--kk-ink);
  font-family: var(--kk-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============ TYPOGRAPHY ============ */
h1, h2, h3, h4, .font-display,
.gradient-text, .khero-title, .ksec-head, .kcat-nm,
.editor-title, .card-title {
  font-family: var(--kk-serif);
  letter-spacing: -0.015em;
  font-weight: 600;
}

.gradient-text {
  background: linear-gradient(120deg, var(--kk-coral) 0%, var(--kk-burgundy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

::selection { background: var(--kk-coral); color: #fff; }

/* ============ HEADER / NAV ============ */
header, nav[class*="top"], .site-header, [class*="navbar"] {
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: rgba(251, 245, 234, 0.85) !important;
  border-bottom: 1px solid var(--kk-line) !important;
}

header a, nav a {
  font-family: var(--kk-sans);
  font-weight: 500;
  color: var(--kk-ink-soft);
  transition: color .18s ease;
}
header a:hover, nav a:hover { color: var(--kk-coral-deep); }

/* Brand logo tint */
header [class*="text-"][class*="D48585"],
header .gradient-text {
  color: var(--kk-burgundy);
  -webkit-text-fill-color: var(--kk-burgundy);
  background: none;
}

/* ============ BUTTONS ============ */
button, .btn, [role="button"] {
  font-family: var(--kk-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

button:hover:not(:disabled), .btn:hover, [role="button"]:hover {
  transform: translateY(-1px);
}

/* Primary CTA look — targets home-enhance khero-btn + generic pill buttons */
.khero-btn, .kcta, .filter[class*="active"], .category-btn-active {
  background: linear-gradient(120deg, var(--kk-coral) 0%, var(--kk-coral-deep) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(226,120,96,0.35) !important;
  padding: 14px 28px !important;
}
.khero-btn:hover, .kcta:hover {
  box-shadow: 0 12px 28px rgba(226,120,96,0.45) !important;
}

/* Secondary pill buttons */
.category-btn:not(.category-btn-active),
.filter:not(.active),
.kchip {
  background: #fff !important;
  color: var(--kk-ink) !important;
  border: 1px solid var(--kk-line) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-weight: 500 !important;
  box-shadow: var(--kk-shadow-sm) !important;
}
.category-btn:not(.category-btn-active):hover,
.filter:not(.active):hover,
.kchip:hover {
  background: var(--kk-cream-2) !important;
  border-color: var(--kk-coral) !important;
  color: var(--kk-burgundy) !important;
}

/* ============ CARDS (catalog gallery) ============ */
.gallery-card, .kgal-item, .card-preview-wrapper {
  border-radius: var(--kk-radius) !important;
  background: #fff;
  border: 1px solid var(--kk-line-soft);
  box-shadow: var(--kk-shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gallery-card:hover, .kgal-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--kk-shadow-lg);
  border-color: var(--kk-coral);
}
.gallery-card img, .kgal-item img {
  transition: transform .5s ease;
}
.gallery-card:hover img, .kgal-item:hover img {
  transform: scale(1.04);
}

/* Category tag ribbon on cards */
.gallery-card [class*="Ден"], .gallery-card [class*="bg-white/9"],
.gallery-card > div > div:first-child {
  border-radius: 999px !important;
}

/* ============ HERO (home-enhance khero) ============ */
.khero {
  background: linear-gradient(180deg, rgba(42,33,27,0.55) 0%, rgba(42,33,27,0.75) 60%, rgba(42,33,27,0.9) 100%),
              var(--kk-ink) !important;
}
.khero-title {
  font-family: var(--kk-serif);
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}
.khero-title em, .khero-title i {
  font-style: italic;
  font-family: var(--kk-serif);
  background: linear-gradient(120deg, #FFCFA8 0%, #E27860 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.khero-badge {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #FFF9EE !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-size: 12px !important;
}
.khero-sub { color: rgba(255, 245, 230, 0.88) !important; font-size: 18px !important; }
.khero-stat { color: #FFEDC7 !important; }
.khero-stat > div:first-child { font-family: var(--kk-serif); font-weight: 600; }

/* ============ CATEGORY TILES ============ */
.kcat, .kcat-body {
  border-radius: var(--kk-radius-lg) !important;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.kcat:hover { transform: translateY(-6px); box-shadow: var(--kk-shadow-lg); }
.kcat-nm {
  font-family: var(--kk-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.kcat-cn { color: rgba(255,245,230,0.85) !important; font-weight: 500; }

/* ============ SECTIONS ============ */
.ksec, section {
  padding-block: clamp(48px, 6vw, 96px);
}
.ksec-eyebrow {
  color: var(--kk-coral-deep) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-size: 12px !important;
}
.ksec-head {
  font-size: clamp(28px, 3.6vw, 44px) !important;
  color: var(--kk-ink) !important;
  margin-top: 8px;
}

/* Feature strip / trust / testimonials from home-enhance */
.kfeat, .ktrust-grid > *, .kquote {
  background: #fff !important;
  border: 1px solid var(--kk-line-soft) !important;
  border-radius: var(--kk-radius) !important;
  box-shadow: var(--kk-shadow-sm) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kfeat:hover, .ktrust-grid > *:hover, .kquote:hover {
  transform: translateY(-3px);
  box-shadow: var(--kk-shadow-md);
}

/* ============ EDITOR / CARD DETAIL PAGE ============ */
.editor-panel, [class*="EditorPanel"], .card-preview-wrapper {
  border-radius: var(--kk-radius-lg) !important;
  background: #fff;
  box-shadow: var(--kk-shadow-md);
  border: 1px solid var(--kk-line-soft);
}
.editor-panel input, .editor-panel textarea, .editor-panel select,
input[type="text"], textarea {
  border-radius: var(--kk-radius-sm) !important;
  border: 1px solid var(--kk-line) !important;
  background: var(--kk-cream-2);
  padding: 10px 14px !important;
  font-family: var(--kk-sans);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.editor-panel input:focus, .editor-panel textarea:focus,
input[type="text"]:focus, textarea:focus {
  outline: none !important;
  border-color: var(--kk-coral) !important;
  box-shadow: 0 0 0 3px rgba(226,120,96,0.15) !important;
}

/* ============ CALENDAR (calendar-i18n) tint refresh ============ */
.kc-wrap { background: var(--kk-cream) !important; }
.kc-hero h1, .kc-month-title, .kc-section h2 {
  font-family: var(--kk-serif) !important;
  color: var(--kk-burgundy) !important;
  letter-spacing: -0.015em;
}
.kc-flag-active { background: var(--kk-burgundy) !important; border-color: var(--kk-burgundy) !important; }
.kc-switcher { background: var(--kk-cream-2) !important; border-color: var(--kk-line) !important; }
.kc-month, .kc-up-item, .kc-article, .kc-faq details {
  border-color: var(--kk-line) !important;
  box-shadow: var(--kk-shadow-sm) !important;
}
.kc-today { background: var(--kk-coral) !important; }
.kc-holiday { background: #FFF0D8 !important; }

/* ============ FOOTER ============ */
footer {
  background: linear-gradient(180deg, transparent 0%, var(--kk-cream-2) 40%) !important;
  border-top: 1px solid var(--kk-line) !important;
  color: var(--kk-ink-soft);
  padding-block: 40px !important;
}
footer a { color: var(--kk-ink-soft); }
footer a:hover { color: var(--kk-coral-deep); }

/* ============ MISC POLISH ============ */
img { image-rendering: -webkit-optimize-contrast; }
a { text-underline-offset: 3px; }

/* Loading skeleton refresh */
[class*="skeleton"], [class*="Skeleton"] {
  background: linear-gradient(90deg, var(--kk-line-soft) 25%, var(--kk-cream-2) 50%, var(--kk-line-soft) 75%) !important;
  background-size: 200% 100% !important;
  border-radius: var(--kk-radius-sm) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--kk-cream-2); }
::-webkit-scrollbar-thumb {
  background: var(--kk-line);
  border-radius: 999px;
  border: 2px solid var(--kk-cream-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--kk-coral); }

/* Mobile tweaks */
@media (max-width: 768px) {
  .khero-title { font-size: clamp(36px, 9vw, 56px) !important; }
  .ksec-head { font-size: clamp(24px, 6vw, 32px) !important; }
  .kchip, .filter, .category-btn { padding: 8px 14px !important; font-size: 13px !important; }
}